Upload 2 files

static/app.js

@@ -34,6 +34,13 @@ let facetRetryTimer = null;
 let progressTimer = null;
 let searchRequestSeq = 0;
 let searchAbortController = null;
+let previewRequestSeq = 0;
+let previewAbortController = null;
+let compareRequestSeq = 0;
+let compareAbortController = null;
+let randomRequestSeq = 0;
+let randomAbortController = null;
+let previewCloseUrl = "/";
 
 function escapeHTML(value) {
   return String(value ?? "").replace(/[&<>"']/g, (ch) => ({
@@ -101,13 +108,20 @@ function syncUrl(replace = true) {
   if (STATE.filterPage.tag > 1) params.set("tag_page", String(STATE.filterPage.tag));
   if (STATE.preview) params.set("preview", STATE.preview);
   const url = params.toString() ? `/?${params.toString()}` : "/";
-  history[replace ? "replaceState" : "pushState"](null, "", url);
+  if (STATE.preview) {
+    const closeParams = new URLSearchParams(params);
+    closeParams.delete("preview");
+    previewCloseUrl = closeParams.toString() ? `/?${closeParams.toString()}` : "/";
+  }
+  const previewEntry = Boolean(STATE.preview && (!replace || history.state?.previewEntry === true));
+  history[replace ? "replaceState" : "pushState"]({ previewEntry }, "", url);
 }
 
 function applyStateToDom() {
   document.body.classList.toggle("light", !STATE.isDark);
   document.body.classList.toggle("mobile", STATE.isMobile);
   document.body.classList.toggle("force-desktop", !STATE.isMobile);
+  document.body.classList.toggle("preview-open", Boolean(STATE.preview));
   if (DOM.mobileToggleIcon) DOM.mobileToggleIcon.className = STATE.isMobile ? "ui-icon ui-icon-phone" : "ui-icon ui-icon-desktop";
   DOM.searchInput.value = STATE.q;
   DOM.exactToggle.checked = STATE.exact;
@@ -130,6 +144,17 @@ function applyStateToDom() {
     if (body) body.classList.toggle("collapsed", collapsed);
     if (toggle) toggle.classList.toggle("collapsed", collapsed);
   }
+  const previewThemeButton = DOM.previewPanel?.querySelector("[data-preview-theme]");
+  if (previewThemeButton) {
+    previewThemeButton.setAttribute("aria-label", STATE.isDark ? "切换到白天模式" : "切换到黑夜模式");
+    previewThemeButton.title = STATE.isDark ? "白天模式" : "黑夜模式";
+  }
+}
+
+function toggleTheme() {
+  STATE.isDark = !STATE.isDark;
+  localStorage.setItem("theme", STATE.isDark ? "dark" : "light");
+  applyStateToDom();
 }
 
 function hasActiveFilters() {
@@ -163,13 +188,36 @@ function highlightPreviewText(text) {
   return html.replace(pattern, (match) => `<mark>${match}</mark>`);
 }
 
-function closePreview() {
-  STATE.preview = "";
+function cancelPreviewRequests() {
+  previewRequestSeq += 1;
+  compareRequestSeq += 1;
+  randomRequestSeq += 1;
+  if (previewAbortController) previewAbortController.abort();
+  if (compareAbortController) compareAbortController.abort();
+  if (randomAbortController) randomAbortController.abort();
+  previewAbortController = null;
+  compareAbortController = null;
+  randomAbortController = null;
+}
+
+function clearPreviewDom() {
+  document.body.classList.remove("preview-open");
   DOM.previewPanel.hidden = true;
   DOM.previewPanel.style.display = "none";
   DOM.previewPanel.innerHTML = "";
 }
 
+function closePreview(useHistory = false) {
+  cancelPreviewRequests();
+  if (useHistory && history.state?.previewEntry === true) {
+    history.back();
+    return;
+  }
+  STATE.preview = "";
+  clearPreviewDom();
+  syncUrl();
+}
+
 async function api(path, options) {
   const response = await fetch(path, options);
   if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -418,36 +466,49 @@ function scheduleSearch() {
 
 async function restorePreview(scroll = true) {
   if (!STATE.preview) {
-    DOM.previewPanel.hidden = true;
-    DOM.previewPanel.style.display = "none";
-    DOM.previewPanel.innerHTML = "";
-    syncUrl();
+    cancelPreviewRequests();
+    clearPreviewDom();
     return;
   }
+  const docId = STATE.preview;
+  const requestSeq = previewRequestSeq + 1;
+  previewRequestSeq = requestSeq;
+  if (previewAbortController) previewAbortController.abort();
+  previewAbortController = new AbortController();
   try {
-    const item = await api(`/api/preview/${encodeURIComponent(STATE.preview)}`);
+    const item = await api(`/api/preview/${encodeURIComponent(docId)}`, { signal: previewAbortController.signal });
+    if (requestSeq !== previewRequestSeq || STATE.preview !== docId) return;
     DOM.previewPanel.innerHTML = previewHTML(item);
     DOM.previewPanel.hidden = false;
     DOM.previewPanel.style.display = "flex";
+    document.body.classList.add("preview-open");
+    previewAbortController = null;
     DOM.emptyState.style.display = "none";
     if (scroll) DOM.previewPanel.querySelector(".preview-body")?.scrollTo({ top: 0, behavior: "smooth" });
-    syncUrl();
   } catch (error) {
-    STATE.preview = "";
-    DOM.previewPanel.hidden = true;
-    DOM.previewPanel.style.display = "none";
+    if (error.name === "AbortError" || requestSeq !== previewRequestSeq || STATE.preview !== docId) return;
     showToast("预览失败");
-    syncUrl();
+    closePreview(true);
   }
 }
 
+function openPreview(docId, scroll = true) {
+  if (!docId) return;
+  const replacingPreview = history.state?.previewEntry === true;
+  STATE.preview = docId;
+  applyStateToDom();
+  syncUrl(replacingPreview);
+  restorePreview(scroll);
+}
+
 function previewHTML(item, compareItem = null) {
-  const actions = [previewDownloadHTML(item), compareSelectHTML(item), '<button class="icon-btn-sm" data-close-preview>×</button>'].join("");
+  const themeAction = `<button type="button" class="icon-btn-sm preview-theme-btn" data-preview-theme aria-label="${STATE.isDark ? "切换到白天模式" : "切换到黑夜模式"}" title="${STATE.isDark ? "白天模式" : "黑夜模式"}"><span class="ui-icon ui-icon-theme" aria-hidden="true"></span></button>`;
+  const actions = [previewDownloadHTML(item), compareSelectHTML(item), `<div class="preview-tools"><button type="button" class="icon-btn-sm" data-close-preview aria-label="关闭预览">×</button>${themeAction}</div>`].join("");
   if (compareItem) {
     const diff = diffHTML(item.content || "", compareItem.content || "");
-    return `<div class="preview-header"><div>${previewTitleHTML(item)}<div class="preview-compare-note">正在对比：${escapeHTML(item.publication_name)} / ${escapeHTML(compareItem.publication_name)}</div></div><div class="preview-actions">${actions}</div></div><div class="preview-compare-grid"><div>${previewMetaHTML(item)}<pre class="preview-body compare-body">${diff.left}</pre></div><div>${previewMetaHTML(compareItem)}<pre class="preview-body compare-body">${diff.right}</pre></div></div>`;
+    return `<div class="preview-header"><div class="preview-heading">${previewTitleHTML(item)}<div class="preview-compare-note">正在对比：${escapeHTML(item.publication_name)} / ${escapeHTML(compareItem.publication_name)}</div></div><div class="preview-actions">${actions}</div></div><div class="preview-compare-grid"><div>${previewMetaHTML(item)}<pre class="preview-body compare-body">${diff.left}</pre></div><div>${previewMetaHTML(compareItem)}<pre class="preview-body compare-body">${diff.right}</pre></div></div>`;
   }
-  return `<div class="preview-header"><div>${previewTitleHTML(item)}${previewMetaHTML(item)}</div><div class="preview-actions">${actions}</div></div><pre class="preview-body">${highlightPreviewText(item.content || "")}</pre>`;
+  return `<div class="preview-header"><div class="preview-heading">${previewTitleHTML(item)}${previewMetaHTML(item)}</div><div class="preview-actions">${actions}</div></div><pre class="preview-body">${highlightPreviewText(item.content || "")}</pre>`;
 }
 
 function previewDownloadHTML(item) {
@@ -461,16 +522,17 @@ function previewDownloadHTML(item) {
 }
 
 async function openRandomPreview() {
+  const requestSeq = randomRequestSeq + 1;
+  randomRequestSeq = requestSeq;
+  if (randomAbortController) randomAbortController.abort();
+  randomAbortController = new AbortController();
   try {
-    const item = await api("/api/random");
-    STATE.preview = item.doc_id;
-    DOM.previewPanel.innerHTML = previewHTML(item);
-    DOM.previewPanel.hidden = false;
-    DOM.previewPanel.style.display = "flex";
-    DOM.emptyState.style.display = "none";
-    DOM.previewPanel.querySelector(".preview-body")?.scrollTo({ top: 0, behavior: "smooth" });
-    syncUrl(false);
+    const item = await api("/api/random", { signal: randomAbortController.signal });
+    if (requestSeq !== randomRequestSeq) return;
+    randomAbortController = null;
+    openPreview(item.doc_id);
   } catch (error) {
+    if (error.name === "AbortError" || requestSeq !== randomRequestSeq) return;
     showToast("随机文章加载失败");
   }
 }
@@ -558,11 +620,21 @@ function compareSelectHTML(item) {
 
 async function comparePreview(docId) {
   if (!STATE.preview || !docId) return;
+  const baseDocId = STATE.preview;
+  const requestSeq = compareRequestSeq + 1;
+  compareRequestSeq = requestSeq;
+  if (compareAbortController) compareAbortController.abort();
+  compareAbortController = new AbortController();
   try {
-    const current = await api(`/api/preview/${encodeURIComponent(STATE.preview)}`);
-    const target = await api(`/api/preview/${encodeURIComponent(docId)}`);
+    const [current, target] = await Promise.all([
+      api(`/api/preview/${encodeURIComponent(baseDocId)}`, { signal: compareAbortController.signal }),
+      api(`/api/preview/${encodeURIComponent(docId)}`, { signal: compareAbortController.signal }),
+    ]);
+    if (requestSeq !== compareRequestSeq || STATE.preview !== baseDocId) return;
+    compareAbortController = null;
     DOM.previewPanel.innerHTML = previewHTML(current, target);
   } catch (error) {
+    if (error.name === "AbortError" || requestSeq !== compareRequestSeq) return;
     showToast("对比加载失败");
   }
 }
@@ -577,7 +649,6 @@ function resetFilters() {
   STATE.yearTo = "";
   STATE.exact = true;
   STATE.page = 1;
-  closePreview();
   doSearch();
 }
 
@@ -599,11 +670,7 @@ function attachEvents() {
     applyStateToDom();
     syncUrl();
   });
-  DOM.themeBtn.addEventListener("click", () => {
-    STATE.isDark = !STATE.isDark;
-    localStorage.setItem("theme", STATE.isDark ? "dark" : "light");
-    applyStateToDom();
-  });
+  DOM.themeBtn.addEventListener("click", toggleTheme);
   DOM.mobileToggleBtn.addEventListener("click", () => {
     STATE.isMobile = !STATE.isMobile;
     localStorage.setItem("mobileMode", STATE.isMobile ? "mobile" : "desktop");
@@ -622,7 +689,6 @@ function attachEvents() {
   DOM.exactToggle.addEventListener("change", () => {
     STATE.exact = DOM.exactToggle.checked;
     STATE.page = 1;
-    closePreview();
     doSearch();
   });
   DOM.previewHighlightToggle.addEventListener("change", () => {
@@ -633,16 +699,15 @@ function attachEvents() {
   DOM.pageSize.addEventListener("change", () => {
     STATE.pageSize = parseInt(DOM.pageSize.value, 10);
     STATE.page = 1;
-    closePreview();
     doSearch();
   });
-  DOM.sortFilter.addEventListener("change", () => { STATE.sort = DOM.sortFilter.value; STATE.page = 1; closePreview(); doSearch(); });
+  DOM.sortFilter.addEventListener("change", () => { STATE.sort = DOM.sortFilter.value; STATE.page = 1; doSearch(); });
   DOM.sourceSearch.addEventListener("input", () => { STATE.filterSearch.source = DOM.sourceSearch.value; STATE.filterPage.source = 1; loadFacetPage("source"); });
   DOM.authorSearch.addEventListener("input", () => { STATE.filterSearch.author = DOM.authorSearch.value; STATE.filterPage.author = 1; loadFacetPage("author"); });
   DOM.tagSearch.addEventListener("input", () => { STATE.filterSearch.tag = DOM.tagSearch.value; STATE.filterPage.tag = 1; loadFacetPage("tag"); });
-  DOM.sourceFilter.addEventListener("click", (event) => { const pageButton = event.target.closest("[data-source-page]"); if (pageButton) { if (!pageButton.disabled) STATE.filterPage.source += pageButton.dataset.sourcePage === "next" ? 1 : -1; loadFacetPage("source"); syncUrl(); return; } if (event.target.closest("[data-clear-source]")) { STATE.sources = []; STATE.page = 1; closePreview(); renderFilterOptions(); doSearch(); return; } const item = event.target.closest("[data-source]"); if (!item || event.target.closest("input")) return; STATE.sources = toggleValue(STATE.sources, item.dataset.source); STATE.page = 1; closePreview(); renderFilterOptions(); doSearch(); });
-  DOM.authorFilter.addEventListener("click", (event) => { const pageButton = event.target.closest("[data-author-page]"); if (pageButton) { if (!pageButton.disabled) STATE.filterPage.author += pageButton.dataset.authorPage === "next" ? 1 : -1; loadFacetPage("author"); syncUrl(); return; } if (event.target.closest("[data-clear-author]")) { STATE.authors = []; STATE.page = 1; closePreview(); renderFilterOptions(); doSearch(); return; } const item = event.target.closest("[data-author]"); if (!item || event.target.closest("input")) return; STATE.authors = toggleValue(STATE.authors, item.dataset.author); STATE.page = 1; closePreview(); renderFilterOptions(); doSearch(); });
-  DOM.tagFilter.addEventListener("click", (event) => { const pageButton = event.target.closest("[data-tag-page]"); if (pageButton) { if (!pageButton.disabled) STATE.filterPage.tag += pageButton.dataset.tagPage === "next" ? 1 : -1; loadFacetPage("tag"); syncUrl(); return; } if (event.target.closest("[data-clear-tag]")) { STATE.tags = []; STATE.page = 1; closePreview(); renderFilterOptions(); doSearch(); return; } const item = event.target.closest("[data-tag]"); if (!item || event.target.closest("input")) return; STATE.tags = toggleValue(STATE.tags, item.dataset.tag); STATE.page = 1; closePreview(); renderFilterOptions(); doSearch(); });
+  DOM.sourceFilter.addEventListener("click", (event) => { const pageButton = event.target.closest("[data-source-page]"); if (pageButton) { if (!pageButton.disabled) STATE.filterPage.source += pageButton.dataset.sourcePage === "next" ? 1 : -1; loadFacetPage("source"); syncUrl(); return; } if (event.target.closest("[data-clear-source]")) { STATE.sources = []; STATE.page = 1; renderFilterOptions(); doSearch(); return; } const item = event.target.closest("[data-source]"); if (!item || event.target.closest("input")) return; STATE.sources = toggleValue(STATE.sources, item.dataset.source); STATE.page = 1; renderFilterOptions(); doSearch(); });
+  DOM.authorFilter.addEventListener("click", (event) => { const pageButton = event.target.closest("[data-author-page]"); if (pageButton) { if (!pageButton.disabled) STATE.filterPage.author += pageButton.dataset.authorPage === "next" ? 1 : -1; loadFacetPage("author"); syncUrl(); return; } if (event.target.closest("[data-clear-author]")) { STATE.authors = []; STATE.page = 1; renderFilterOptions(); doSearch(); return; } const item = event.target.closest("[data-author]"); if (!item || event.target.closest("input")) return; STATE.authors = toggleValue(STATE.authors, item.dataset.author); STATE.page = 1; renderFilterOptions(); doSearch(); });
+  DOM.tagFilter.addEventListener("click", (event) => { const pageButton = event.target.closest("[data-tag-page]"); if (pageButton) { if (!pageButton.disabled) STATE.filterPage.tag += pageButton.dataset.tagPage === "next" ? 1 : -1; loadFacetPage("tag"); syncUrl(); return; } if (event.target.closest("[data-clear-tag]")) { STATE.tags = []; STATE.page = 1; renderFilterOptions(); doSearch(); return; } const item = event.target.closest("[data-tag]"); if (!item || event.target.closest("input")) return; STATE.tags = toggleValue(STATE.tags, item.dataset.tag); STATE.page = 1; renderFilterOptions(); doSearch(); });
   for (const [kind, element] of Object.entries({ source: DOM.sourceFilter, author: DOM.authorFilter, tag: DOM.tagFilter })) {
     element.addEventListener("keydown", (event) => {
       const input = event.target.closest(`[data-${kind}-page-input]`);
@@ -656,10 +721,10 @@ function attachEvents() {
       if (input) commitFilterPage(kind, input);
     });
   }
-  DOM.archiveFilter.addEventListener("change", () => { STATE.archiveId = DOM.archiveFilter.value; STATE.page = 1; closePreview(); doSearch(); });
-  DOM.typeFilter.addEventListener("change", () => { STATE.publicationType = DOM.typeFilter.value; STATE.page = 1; closePreview(); doSearch(); });
-  DOM.yearFrom.addEventListener("change", () => { STATE.yearFrom = DOM.yearFrom.value; STATE.page = 1; closePreview(); doSearch(); });
-  DOM.yearTo.addEventListener("change", () => { STATE.yearTo = DOM.yearTo.value; STATE.page = 1; closePreview(); doSearch(); });
+  DOM.archiveFilter.addEventListener("change", () => { STATE.archiveId = DOM.archiveFilter.value; STATE.page = 1; doSearch(); });
+  DOM.typeFilter.addEventListener("change", () => { STATE.publicationType = DOM.typeFilter.value; STATE.page = 1; doSearch(); });
+  DOM.yearFrom.addEventListener("change", () => { STATE.yearFrom = DOM.yearFrom.value; STATE.page = 1; doSearch(); });
+  DOM.yearTo.addEventListener("change", () => { STATE.yearTo = DOM.yearTo.value; STATE.page = 1; doSearch(); });
   DOM.clearFilters.addEventListener("click", resetFilters);
   DOM.randomBookBtn.addEventListener("click", openRandomPreview);
   DOM.emptyRandomBtn.addEventListener("click", openRandomPreview);
@@ -673,15 +738,13 @@ function attachEvents() {
   DOM.results.addEventListener("click", (event) => {
     const preview = event.target.closest("[data-preview]");
     if (preview) {
-      STATE.preview = preview.dataset.preview;
-      restorePreview();
+      openPreview(preview.dataset.preview);
       return;
     }
     const source = event.target.closest(".path-folder[data-source]");
     if (source) {
       STATE.sources = toggleValue(STATE.sources, source.dataset.source);
       STATE.page = 1;
-      closePreview();
       doSearch();
       return;
     }
@@ -689,7 +752,6 @@ function attachEvents() {
     if (author) {
       STATE.authors = toggleValue(STATE.authors, author.dataset.author);
       STATE.page = 1;
-      closePreview();
       doSearch();
       return;
     }
@@ -697,7 +759,6 @@ function attachEvents() {
     if (tag) {
       STATE.tags = toggleValue(STATE.tags, tag.dataset.tag);
       STATE.page = 1;
-      closePreview();
       doSearch();
     }
   });
@@ -708,9 +769,10 @@ function attachEvents() {
       return;
     }
     if (event.target.closest("[data-close-preview]")) {
-      STATE.preview = "";
-      restorePreview(false);
+      closePreview(true);
+      return;
     }
+    if (event.target.closest("[data-preview-theme]")) toggleTheme();
   });
   DOM.previewPanel.addEventListener("change", (event) => {
     const select = event.target.closest("[data-compare-select]");
@@ -737,9 +799,16 @@ function attachEvents() {
   });
   DOM.pageInput.addEventListener("change", commitResultPage);
   window.addEventListener("popstate", () => {
+    cancelPreviewRequests();
+    const wasPreviewOpen = Boolean(STATE.preview);
     parseUrl();
+    if (wasPreviewOpen && !STATE.preview) {
+      history.replaceState({ previewEntry: false }, "", previewCloseUrl);
+      parseUrl();
+    }
     applyStateToDom();
     doSearch();
+    restorePreview(false);
   });
   document.addEventListener("keydown", (event) => {
     if (event.key === "/" && document.activeElement !== DOM.searchInput) {
@@ -799,10 +868,18 @@ function init() {
   const savedMobileMode = localStorage.getItem("mobileMode");
   STATE.isMobile = savedMobileMode === "mobile" || (!savedMobileMode && window.innerWidth <= 768);
   parseUrl();
+  if (STATE.preview && history.state?.previewEntry !== true) {
+    const previewDocId = STATE.preview;
+    STATE.preview = "";
+    syncUrl();
+    STATE.preview = previewDocId;
+    syncUrl(false);
+  }
   applyStateToDom();
   attachEvents();
   loadFacets();
   doSearch();
+  restorePreview(false);
   updateProgress();
 }
 

static/style.css

@@ -469,6 +469,11 @@ ul, li {
   border-bottom: 1px solid var(--outline-variant);
 }
 
+.preview-heading {
+  min-width: 0;
+  flex: 1;
+}
+
 .preview-actions {
   display: flex;
   align-items: center;
@@ -476,6 +481,16 @@ ul, li {
   flex-shrink: 0;
 }
 
+.preview-tools {
+  display: flex;
+  flex-shrink: 0;
+  gap: 4px;
+}
+
+.preview-theme-btn {
+  display: none;
+}
+
 .preview-compare-select {
   min-width: 128px;
   max-width: 220px;
@@ -565,8 +580,11 @@ ul, li {
 }
 
 .preview-body {
+  box-sizing: border-box;
+  width: 100%;
   margin: 0;
-  padding: 14px;
+  padding-block: 24px 36px;
+  padding-inline: max(20px, calc((100% - 72ch) / 2));
   max-height: none;
   height: auto;
   flex: 0 1 auto;
@@ -574,8 +592,12 @@ ul, li {
   overflow: auto;
   white-space: pre-wrap;
   word-break: break-word;
-  font-family: var(--font-sans);
-  line-height: 1.75;
+  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", var(--font-sans);
+  font-size: 16px;
+  line-height: 1.9;
+  letter-spacing: 0.015em;
+  text-wrap: pretty;
+  tab-size: 4;
 }
 
 .preview-body mark {
@@ -609,13 +631,101 @@ body.mobile .preview-compare-grid .diff-gap {
   display: none;
 }
 
-body.mobile .preview-panel {
-  flex: 1 1 auto;
+body.mobile.preview-open .preview-panel {
+  --reader-bg: #1d1e1b;
+  --reader-header: #22231f;
+  --reader-text: #d4d0c6;
+  --reader-title: #e3dfd5;
+  --reader-muted: #9f9d95;
+  --reader-divider: #393a35;
+  --reader-mark: #59491f;
+  --reader-on-mark: #f2d98f;
+  position: fixed;
+  inset: 0;
+  z-index: 150;
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  flex: none;
   max-height: none;
+  color: var(--reader-text);
+  background: var(--reader-bg);
 }
 
-body.mobile .preview-panel:not([hidden]) + .results-list {
-  display: none;
+body.light.mobile.preview-open .preview-panel {
+  --reader-bg: #f7f3e8;
+  --reader-header: #f0ecdf;
+  --reader-text: #2d2b27;
+  --reader-title: #1e1d1a;
+  --reader-muted: #6b6860;
+  --reader-divider: #d7d0c2;
+  --reader-mark: #f1d58a;
+  --reader-on-mark: #3a2d0d;
+}
+
+body.mobile.preview-open .preview-header {
+  flex-shrink: 0;
+  padding-top: max(12px, env(safe-area-inset-top));
+  color: var(--reader-title);
+  background: var(--reader-header);
+  border-color: var(--reader-divider);
+}
+
+body.mobile.preview-open .preview-actions {
+  align-items: flex-start;
+  max-width: 48%;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+body.mobile.preview-open .preview-tools {
+  flex-direction: column;
+}
+
+body.mobile.preview-open .preview-theme-btn {
+  display: flex;
+}
+
+body.mobile.preview-open .preview-body {
+  flex: 1;
+  min-height: 0;
+  max-height: none;
+  padding: 22px 18px max(36px, env(safe-area-inset-bottom));
+  font-size: 17px;
+  line-height: 1.95;
+  letter-spacing: 0.02em;
+  color: var(--reader-text);
+  background: var(--reader-bg);
+}
+
+body.mobile.preview-open .preview-body mark {
+  color: var(--reader-on-mark);
+  background: var(--reader-mark);
+}
+
+body.mobile.preview-open .preview-path,
+body.mobile.preview-open .preview-meta-row {
+  min-width: 0;
+  max-width: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  word-break: normal;
+  scrollbar-width: thin;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+body.mobile.preview-open .preview-path {
+  color: var(--reader-muted);
+  opacity: 1;
+}
+
+body.mobile.preview-open .preview-tools .icon-btn-sm {
+  color: var(--reader-muted);
 }
 
 .result-snippet {