dsh-quick-toc 0.9.4 → 0.10.0

package/lib/client.js

@@ -44,6 +44,11 @@ window.__ModuleLoader__.load({
     var Z_PANEL = 14;  // the docked panel
     var Z_SHEET = 16;  // the curtain, which replaces the docked panel while it is up
     var Z_HOVER = 18;  // hover preview card: above both, still inside the free band
+    // Corner radius of the two surfaces. One number each so the panel, its glass
+    // twin and its shadow twin can never disagree, and so the curtain's bottom
+    // pair stays in step with the panel's rounded shape.
+    var RADIUS_PANEL = 18;
+    var RADIUS_SHEET = 18;
     // A narrow conversation column has no room for a handle floating over the text: below
     // NARROW_CONV_W the collapsed-panel handle slides back into the divider (its usual
     // motion) while the droplet above the conversation stays as the way in. Nothing opens
@@ -72,6 +77,16 @@ window.__ModuleLoader__.load({
     // two "fight" on long group headers, the label's box running right up to the
     // circle.
     var END_ZONE = 32;
+    // The bookmark ribbon's gutter at the left of every outline row. Reserved ALWAYS
+    // (whether or not anything is bookmarked) so that bookmarking a row never shifts
+    // the text: a ribbon that appeared by pushing content sideways would make the
+    // whole list twitch every time something is saved.
+    //
+    // 16px wide on purpose: at 9px the notch ate most of the shape and the ribbon read
+    // as a left-pointing arrow. At 16px the flat body dominates and the cut edge reads
+    // as a bookmark tab.
+    var MARK_W = 16;
+    var MARK_INSET = 20;
     // How long the collapsed edge handle takes to slip back into the edge when it is
     // the thing that was clicked. The panel's own slide waits exactly this long, so the
     // two motions are sequential instead of crossing over.
@@ -144,6 +159,7 @@ window.__ModuleLoader__.load({
         "search.hintOldest": "已经是最早的消息",
         "hint.autoOff": "上面还有更早的历史（自动加载已关闭，点「未加载」的条目才会加载）",
         "hint.bottom": "已经到底了",
+        "outline.empty": "这个会话还没有可跳转的标题。等对话里出现 Markdown 标题，这里就会列出来。",
         "outline.bottom": "回到底部",
         "outline.backToMine": "回到我滚到的位置",
         "turn.jumpReply": "跳转到该回合的模型回答开头",
@@ -160,6 +176,15 @@ window.__ModuleLoader__.load({
         "preview.truncated": "预览由宿主提供，可能被截断",
         "preview.pin": "钉住预览",
         "preview.unpin": "取消钉住",
+        "marks.tip.only": "只看书签（{n}）",
+        "marks.tip.all": "显示全部大纲（书签 {n}）",
+        "marks.empty": "还没有书签。右键任意条目，选「加入书签」即可。",
+        "menu.goto": "跳到这一节",
+        "menu.mark": "加入书签",
+        "menu.unmark": "移出书签",
+        "menu.copyTitle": "复制标题",
+        "menu.copied": "已复制",
+        "menu.copySection": "复制本节大纲",
         "menu.pin": "钉住预览",
         "menu.unpin": "取消钉住",
         "menu.end": "跳到本节末尾",
@@ -179,6 +204,19 @@ window.__ModuleLoader__.load({
         "settings.density": "大纲密度",
         "settings.density.comfy": "标准",
         "settings.density.compact": "紧凑",
+        "sheet.resize": "拖动调整幕布高度",
+        "settings.glass": "半透明界面",
+        "settings.glass.autoOff": "已根据当前设备的帧率自动关闭，可手动重新开启。",
+        "settings.glass.tip": "开启后幕布会模糊它后面的对话，面板也能透出背景；关闭则改为不透明。设备性能不足时会自动关闭。",
+        "settings.glassStrength": "通透度",
+        "settings.glassStrength.tip": "数值越大越透。面板与幕布一起调整，面板会比幕布更实一些。",
+        "settings.accent": "主题色",
+        "settings.accent.blue": "蓝色",
+        "settings.accent.red": "红色",
+        "settings.accent.yellow": "黄色",
+        "settings.accent.green": "绿色",
+        "settings.accent.purple": "紫色",
+        "settings.accent.pink": "粉色",
         "settings.zoom": "面板缩放",
         "settings.zoom.tip": "文字、图标与按钮按比例缩放，面板本身的尺寸不变",
         "settings.sheetZoom": "幕布缩放",
@@ -249,6 +287,7 @@ window.__ModuleLoader__.load({
         "search.hintOldest": "This is the earliest message",
         "hint.autoOff": "There is older history above (auto-loading is off — click an unloaded row to load it)",
         "hint.bottom": "You have reached the end",
+        "outline.empty": "Nothing to jump to in this conversation yet. Markdown headings will be listed here as they appear.",
         "outline.bottom": "Back to the newest entry",
         "outline.backToMine": "Back to where I scrolled to",
         "turn.jumpReply": "Jump to the start of this turn's model reply",
@@ -267,6 +306,15 @@ window.__ModuleLoader__.load({
         "preview.truncated": "Preview comes from the host and may be truncated",
         "preview.pin": "Pin this preview",
         "preview.unpin": "Unpin",
+        "marks.tip.only": "Show bookmarks only ({n})",
+        "marks.tip.all": "Show the whole outline ({n} bookmarked)",
+        "marks.empty": "No bookmarks yet. Right-click any entry and choose \u201cAdd bookmark\u201d.",
+        "menu.goto": "Jump to this section",
+        "menu.mark": "Add bookmark",
+        "menu.unmark": "Remove bookmark",
+        "menu.copyTitle": "Copy heading",
+        "menu.copied": "Copied",
+        "menu.copySection": "Copy this section",
         "menu.pin": "Pin this preview",
         "menu.unpin": "Unpin this preview",
         "menu.end": "Jump to the end of this section",
@@ -286,6 +334,19 @@ window.__ModuleLoader__.load({
         "settings.density": "Outline density",
         "settings.density.comfy": "Comfy",
         "settings.density.compact": "Compact",
+        "sheet.resize": "Drag to resize the curtain",
+        "settings.glass": "Translucent surfaces",
+        "settings.glass.autoOff": "Switched off automatically for this device's frame rate; you can turn it back on.",
+        "settings.glass.tip": "The curtain blurs the conversation behind it and the panel lets the background show through; off makes both solid. Turned off automatically on a slow device.",
+        "settings.glassStrength": "See-through",
+        "settings.glassStrength.tip": "Higher is lighter. One setting for both surfaces; the panel always stays a little denser than the curtain.",
+        "settings.accent": "Theme colour",
+        "settings.accent.blue": "Blue",
+        "settings.accent.red": "Red",
+        "settings.accent.yellow": "Yellow",
+        "settings.accent.green": "Green",
+        "settings.accent.purple": "Purple",
+        "settings.accent.pink": "Pink",
         "settings.zoom": "Panel scale",
         "settings.zoom.tip": "Scales the text, icons and buttons; the panel's own size is unchanged",
         "settings.sheetZoom": "Curtain scale",
@@ -370,12 +431,14 @@ window.__ModuleLoader__.load({
     // purpose — they describe THIS screen, not the account.
     var NAMESPACE = "dsh-quick-toc";
     // Fields backed by the Host settings document; everything else is localStorage.
-    var HOST_FIELDS = { dock: 1, lang: 1, levels: 1, density: 1, zoom: 1, sheetZoom: 1, handle: 1, fuzzy: 1, hover: 1, debug: 1, remember: 1, autoLoad: 1 };
+    var HOST_FIELDS = { dock: 1, lang: 1, levels: 1, density: 1, accent: 1, glass: 1, glassStrength: 1, sheetHeight: 1, zoom: 1, sheetZoom: 1, handle: 1, fuzzy: 1, hover: 1, debug: 1, remember: 1, autoLoad: 1 };
     // The schema defaults (mirrored here for the card's per-field reset and for the
     // one-time import of a 0.5.x install's stored values).
     var DEFAULTS = {
       dock: "left", y: 0, w: 0, h: 0,
-      levels: [1, 2, 3, 4, 5, 6], density: "comfy",
+      // "share" of see-through: 0 = nearly solid, 100 = the lightest material
+      levels: [1, 2, 3, 4, 5, 6], density: "comfy", accent: "blue",
+      glass: true, glassStrength: 60, sheetHeight: 1,
       zoom: 1, sheetZoom: 1, handle: 0.5,
       fuzzy: false, hover: true, lang: "auto", debug: false,
       remember: true, autoLoad: true
@@ -387,6 +450,10 @@ window.__ModuleLoader__.load({
       h: "dsh-quick-toc.panelH.v1",
       levels: "dsh-quick-toc.levels.v1",
       density: "dsh-quick-toc.density.v1",
+      accent: "dsh-quick-toc.accent.v1",
+      glass: "dsh-quick-toc.glass.v1",
+      glassStrength: "dsh-quick-toc.glassStrength.v1",
+      sheetHeight: "dsh-quick-toc.sheetHeight.v1",
       zoom: "dsh-quick-toc.zoom.v1",
       sheetZoom: "dsh-quick-toc.sheetZoom.v1",
       handle: "dsh-quick-toc.handle.v1",
@@ -397,6 +464,117 @@ window.__ModuleLoader__.load({
       autoLoad: "dsh-quick-toc.autoLoad.v1",
       debug: "dsh-quick-toc.debug"
     };
+    // Theme colours for every "selected / active / current" surface. Blue is the
+    // null entry: today's exact values (host brand text + fixed fills), so the
+    // default reproduces the current look pixel for pixel. The rest pair a fill
+    // triplet with a solid that stays legible on both light and dark surfaces
+    // (the dot shows the vivid hue; the solid is the readable one).
+    var ACCENTS = {
+      blue: { rgb: "79, 140, 255", solid: null, dot: "#4f8cff" },
+      red: { rgb: "245, 72, 77", solid: "#F5484D", dot: "#F5484D" },
+      yellow: { rgb: "232, 162, 12", solid: "#D99300", dot: "#FFB020" },
+      green: { rgb: "48, 164, 108", solid: "#2FA36B", dot: "#2FA36B" },
+      purple: { rgb: "142, 78, 198", solid: "#8E4EC6", dot: "#8E4EC6" },
+      pink: { rgb: "233, 61, 130", solid: "#E93D82", dot: "#E93D82" }
+    };
+    // self-contained on purpose: this runs in scopes where the store's own
+    // hasOwn helper is not visible, so it must not borrow it (borrowing it
+    // threw on every render and the error boundary ate the whole header)
+    var normAccent = function (v) { return (typeof v === "string" && Object.prototype.hasOwnProperty.call(ACCENTS, v)) ? v : "blue"; };
+    // 0..100 whole numbers — the "how see-through" slider
+    var clampPct = function (raw, fallback) {
+      return raw !== null && raw !== undefined && raw !== "" && isFinite(Number(raw))
+        ? Math.min(100, Math.max(0, Math.round(Number(raw)))) : fallback;
+    };
+    // 0.25..1, two decimals — the curtain's own height as a share of the area
+    var clampFrac = function (raw, fallback) {
+      return raw !== null && raw !== undefined && raw !== "" && isFinite(Number(raw))
+        ? Math.min(1, Math.max(0.25, Math.round(Number(raw) * 100) / 100)) : fallback;
+    };
+    // The three theme-dependent rules of the once-injected stylesheet, rebuilt
+    // whenever the theme colour changes. A later style element wins over the
+    // injected base, which keeps today's values as its fallback.
+    var accentCssText = function (id) {
+      var t = ACCENTS[normAccent(id)] || ACCENTS.blue;
+      var solid = t.solid || "var(--dsw-alias-brand-primary, #4f8cff)";
+      return ".dqt-nav{box-shadow:inset 0 0 0 1px " + solid + ";background:rgba(" + t.rgb + ",0.10)}"
+        + ".dqt-phead:focus-visible{outline-color:" + solid + "}"
+        + ".dqt-slider{accent-color:" + solid + "}";
+    };
+    var applyAccentCss = function (id) {
+      if (typeof document === "undefined") return;
+      var el = document.getElementById("dsh-quick-toc-accent");
+      if (!el) {
+        el = document.createElement("style");
+        el.id = "dsh-quick-toc-accent";
+        document.head.appendChild(el);
+      }
+      el.textContent = accentCssText(id);
+    };
+    // A caller-owned palette for one render: blue shares the module palette
+    // object itself (default path: zero behaviour change, same identity), any
+    // other choice merges the same keys with its own triplet.
+    var themeC = function (id) {
+      var key = normAccent(id);
+      if (key === "blue") return C;
+      var t = ACCENTS[key];
+      var out = {};
+      for (var k in C) if (Object.prototype.hasOwnProperty.call(C, k)) out[k] = C[k];
+      out.accent = t.solid;
+      out.accentRgb = t.rgb;
+      out.chip = "rgba(" + t.rgb + ", 0.18)";
+      out.groupTint = "rgba(" + t.rgb + ", 0.10)";
+      out.groupEdge = "rgba(" + t.rgb + ", 0.85)";
+      out.groupEdgeSoft = "rgba(" + t.rgb + ", 0.35)";
+      return out;
+    };
+    // How see-through the material is, from the reader's 0..100 preference.
+    // One slider drives both surfaces, each with its own range: the panel is read
+    // from, so it stays denser; the curtain is transient, so it goes lighter.
+    var glassPct = function (strength, forSheet) {
+      var s = Math.min(100, Math.max(0, Number(strength)));
+      if (!isFinite(s)) s = 60;
+      // lighter base than before: the panel has to look see-through again, and
+      // the card uses the same scale so the two always match
+      // panel/card 50 % and curtain 36 % at the default see-through of 60 — the
+      // densities the reader picked by eye
+      var pct = forSheet ? (62 - s * 0.433) : (62 - s * 0.2);
+      return Math.round(Math.min(96, Math.max(24, pct)));
+    };
+    // Applies the reader's glass choices to a palette, returning a fresh object.
+    // With glass off (or unsupported) every surface falls back to the solid panel
+    // colour, and the blur strings become undefined rather than empty.
+    // A device that cannot hold the frame rate loses the blur by itself. The
+    // verdict is remembered, so a slow machine pays for the probe once.
+    var AUTO_OFF_KEY = "dsh-quick-toc.glassAutoOff.v1";
+    var autoGlassOff = (function () {
+      try { return localStorage.getItem(AUTO_OFF_KEY) === "1"; } catch (e) { return false; }
+    })();
+    var glassC = function (base, prefs) {
+      var on = !!(prefs && prefs.glass) && !autoGlassOff && GLASS_OK;
+      var s = prefs && prefs.glassStrength !== undefined ? prefs.glassStrength : 60;
+      var out = {};
+      for (var k in base) if (Object.prototype.hasOwnProperty.call(base, k)) out[k] = base[k];
+      out.glassOn = on;
+      out.glassBg = on ? "color-mix(in srgb, var(--dsw-alias-bg-base, rgba(24, 28, 36, 0.96)) " + glassPct(s, false) + "%, transparent)" : C.panelBg;
+      out.sheetBg = on ? "color-mix(in srgb, var(--dsw-alias-bg-base, rgba(24, 28, 36, 0.96)) " + glassPct(s, true) + "%, transparent)" : C.panelBg;
+      // The preview card is a small floating layer, so it needs a lighter mix than
+      // the panel to show any blur at all at its size — at the panel's density the
+      // material reads as flat white.
+      out.cardBg = on
+        ? "color-mix(in srgb, var(--dsw-alias-bg-base, rgba(24, 28, 36, 0.96)) " + Math.max(30, glassPct(s, false) - 12) + "%, transparent)"
+        : C.panelBg;
+      // Small radius on purpose: the panel is a place you read, so the material
+      // should only soften the conversation, never push it toward "text smeared
+      // into a blur". The curtain can go a little further — it is transient.
+      // A very small radius on the panel on purpose: enough to soften the
+      // conversation, not enough to destroy the sense that there IS something
+      // behind it (a bigger blur made the surface read as solid). The curtain
+      // sits at 10px, which is the reader's own pick.
+      out.panelBlur = on ? "blur(3px) saturate(1.1)" : undefined;
+      out.sheetBlur = on ? "blur(5px) saturate(1.1)" : undefined;
+      return out;
+    };
     // Writing a field's schema default through the card IS its reset — a value that
     // equals the default carries no customization, so it must not pin an entry (and
     // the "customized" badge with it) into the user layer.
@@ -461,6 +639,44 @@ window.__ModuleLoader__.load({
         localStorage.setItem(READ_POS_KEY, JSON.stringify(map));
       } catch (e) {}
     };
+    // ---- bookmarks (browser-local, per session) -------------------------------
+    // Same shape as the reading position and for the same reason: a node key only
+    // means anything inside ONE session, so bookmarks are stored per session and
+    // never travel through the host's settings document. `{ [sessionId]: [entry] }`
+    // where an entry is { key, idx, title, level, at }.
+    var BOOKMARK_KEY = "dsh-quick-toc.bookmarks.v1";
+    var BOOKMARK_MAX = 300;
+    var bookmarkMap = function () {
+      try {
+        var raw = localStorage.getItem(BOOKMARK_KEY);
+        var parsed = raw ? JSON.parse(raw) : null;
+        return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {};
+      } catch (e) { return {}; }
+    };
+    var bookmarksOf = function (sessionId) {
+      if (!sessionId) return [];
+      var list = bookmarkMap()[sessionId];
+      return Array.isArray(list) ? list : [];
+    };
+    var writeBookmarks = function (sessionId, list) {
+      if (!sessionId) return;
+      try {
+        var map = bookmarkMap();
+        if (list && list.length) map[sessionId] = list;
+        else delete map[sessionId];
+        // trim the OLDEST sessions first, so a long-lived install cannot grow forever
+        var ids = Object.keys(map);
+        if (ids.length > BOOKMARK_MAX) {
+          ids.sort(function (a, b) {
+            var aa = (map[a][0] && map[a][0].at) || 0;
+            var bb = (map[b][0] && map[b][0].at) || 0;
+            return aa - bb;
+          });
+          for (var i = 0; i < ids.length - BOOKMARK_MAX; i++) delete map[ids[i]];
+        }
+        localStorage.setItem(BOOKMARK_KEY, JSON.stringify(map));
+      } catch (e) { /* storage blocked: bookmarks are a convenience */ }
+    };
     // ---- recent search history (browser-local, like the reading position) --
     // Most-recent-first [{q, scope}]: filled when a search is committed (Enter in
     // the box, a result click), offered back as one-tap chips while the box is
@@ -554,6 +770,7 @@ window.__ModuleLoader__.load({
         var clampRatio = function (raw, fallback) {
           return raw !== null && isFinite(Number(raw)) ? Math.min(1, Math.max(0, Math.round(Number(raw) * 100) / 100)) : fallback;
         };
+
         return {
           dock: dockRaw === "right" ? "right" : "left",
           // 0 means "the panel's own default" (see PANEL_WIDTH / auto height)
@@ -562,6 +779,11 @@ window.__ModuleLoader__.load({
           h: hRaw !== null && isFinite(Number(hRaw)) && Number(hRaw) >= 60 ? Number(hRaw) : 0,
           levels: parseLevels(rawLevels) || LEVELS_ALL.slice(),
           density: read(PREF_KEYS.density) === "compact" ? "compact" : "comfy",
+          accent: normAccent(read(PREF_KEYS.accent)),
+          // absent means "on": the translucent look is what this version ships
+          glass: read(PREF_KEYS.glass) !== "0",
+          glassStrength: clampPct(read(PREF_KEYS.glassStrength), 60),
+          sheetHeight: clampFrac(read(PREF_KEYS.sheetHeight), 1),
           zoom: clampRatio(zoomRaw, 1),
           sheetZoom: clampRatio(sheetZoomRaw, 1),
           handle: clampRatio(handleRaw, 0.5),
@@ -584,6 +806,10 @@ window.__ModuleLoader__.load({
           h: function (v) { return String(v); },
           levels: function (v) { return JSON.stringify(v); },
           density: function (v) { return v === "compact" ? "compact" : "comfy"; },
+          accent: function (v) { return normAccent(v); },
+          glass: function (v) { return v ? "1" : "0"; },
+          glassStrength: function (v) { return String(v); },
+          sheetHeight: function (v) { return String(v); },
           zoom: function (v) { return String(v); },
           sheetZoom: function (v) { return String(v); },
           handle: function (v) { return String(v); },
@@ -619,6 +845,10 @@ window.__ModuleLoader__.load({
           lang: v.lang === "zh" || v.lang === "en" ? v.lang : "auto",
           levels: levels || LEVELS_ALL.slice(),
           density: v.density === "compact" ? "compact" : "comfy",
+          accent: normAccent(v.accent),
+          glass: v.glass !== false,
+          glassStrength: clampPct(v.glassStrength, 60),
+          sheetHeight: clampFrac(v.sheetHeight, 1),
           zoom: isFinite(zoomNum) ? Math.min(2, Math.max(0.5, Math.round(zoomNum * 100) / 100)) : 1,
           sheetZoom: isFinite(sheetZoomNum) ? Math.min(2, Math.max(0.5, Math.round(sheetZoomNum * 100) / 100)) : 1,
           handle: isFinite(handleNum) ? Math.min(1, Math.max(0, Math.round(handleNum * 100) / 100)) : 0.5,
@@ -635,7 +865,9 @@ window.__ModuleLoader__.load({
         if (!over) return local;
         return {
           dock: over.dock, y: local.y, w: local.w, h: local.h,
-          levels: over.levels, density: over.density, zoom: over.zoom, sheetZoom: over.sheetZoom, handle: over.handle, fuzzy: over.fuzzy, hover: over.hover,
+          levels: over.levels, density: over.density, accent: over.accent,
+          glass: over.glass, glassStrength: over.glassStrength, sheetHeight: over.sheetHeight,
+          zoom: over.zoom, sheetZoom: over.sheetZoom, handle: over.handle, fuzzy: over.fuzzy, hover: over.hover,
           lang: over.lang, remember: over.remember, debug: over.debug, autoLoad: over.autoLoad
         };
       };
@@ -1875,7 +2107,7 @@ window.__ModuleLoader__.load({
     // NOTE: these fills sit ON TOP OF conversation text, so they stay deliberately
     // stronger than the panel's UI tints (C.chip / C.groupTint); only the current
     // hit's outline reuses the shared accent value.
-    function highlightRow(row, q, currentOcc, fuzzy) {
+    function highlightRow(row, q, currentOcc, fuzzy, rgb) {
       if (!row || !q) return;
       var fq = foldQuery(q);
       if (!fq) return;
@@ -1906,12 +2138,13 @@ window.__ModuleLoader__.load({
             if (from < cursor || to <= from) continue;
             if (from > cursor) frag.appendChild(document.createTextNode(text.slice(cursor, from)));
             var mark = document.createElement("span");
+            var hitRgb = rgb || "79,140,255";
             if (isCurrent) {
               mark.className = "dqt-current";
-              mark.style.background = "rgba(79,140,255,0.55)";
-              mark.style.boxShadow = "0 0 0 1px rgba(79,140,255,0.85)";
+              mark.style.background = "rgba(" + hitRgb + ",0.55)";
+              mark.style.boxShadow = "0 0 0 1px rgba(" + hitRgb + ",0.85)";
             } else {
-              mark.style.background = "rgba(79,140,255,0.32)";
+              mark.style.background = "rgba(" + hitRgb + ",0.32)";
             }
             mark.style.borderRadius = "2px";
             mark.style.color = "inherit";
@@ -1933,6 +2166,9 @@ window.__ModuleLoader__.load({
       text: "var(--dsw-alias-label-primary, #e8eaee)",
       muted: "var(--dsw-alias-label-secondary, #9aa0ab)",
       accent: "var(--dsw-alias-brand-primary, #4f8cff)",
+      // the selection triplet, for callers that paint their own alphas (search
+      // hit marks): same hue as every tint above, in one place
+      accentRgb: "79,140,255",
       // terminal turn failures (a reply that never arrived) get the host's own
       // error colour, so the outline speaks the same language as the transcript
       error: "var(--dsw-alias-state-error-primary, #e5534b)",
@@ -1952,8 +2188,59 @@ window.__ModuleLoader__.load({
       // edge at the left and right, so the negative spreads keep the vertical seams
       // free of shadow while the bottom — rounded corners included — lifts off the
       // conversation below.
-      sheetShadow: "0 14px 22px -12px rgba(0, 0, 0, 0.35), 0 6px 12px -10px rgba(0, 0, 0, 0.25)"
+      sheetShadow: "0 14px 22px -12px rgba(0, 0, 0, 0.35), 0 6px 12px -10px rgba(0, 0, 0, 0.25)",
+      // ---- glass surface (the 0.10.0 visual upgrade) -------------------------
+      // The panel and the curtain are the same colour at GLASS_PCT plus a small
+      // backdrop blur; the two 1px inset lines are the "light catching the edge"
+      // that makes a translucent surface read as a material instead of a tint.
+      // A small radius leaves the conversation TEXT recognisable-but-smudged, and
+      // that fights the panel's own rows ("blurred and clear at once"). A wider
+      // radius turns it into colour and light — the only thing that reads as a
+      // surface rather than as a second layer of type.
+      glassBlur: "blur(22px) saturate(1.25)",
+      sheetBlur: "blur(20px) saturate(1.2)"
     };
+    // Blur is painted by a CHILD layer, never by the surface itself: a
+    // backdrop-filter on an element that also lives inside a clip-path container
+    // gets promoted to its own compositing layer, and in the host's page that
+    // promotion put the whole panel underneath the conversation. A child layer
+    // keeps the surface's own stacking exactly as it was.
+    var GLASS_OK = (function () {
+      try {
+        return typeof CSS !== "undefined" && CSS.supports
+          && (CSS.supports("backdrop-filter", "blur(12px)") || CSS.supports("-webkit-backdrop-filter", "blur(12px)"));
+      } catch (e) { return false; }
+    })();
+    // Two densities: the docked panel is a surface you read in, so it stays
+    // denser (70 %); the curtain is a transient sheet over the conversation and
+    // the reader is meant to see the page move behind it, so it goes lighter
+    // (54 %). Below ~50 % the labels start to fight the blurred text underneath.
+    C.glassBg = GLASS_OK
+      ? "color-mix(in srgb, var(--dsw-alias-bg-base, rgba(24, 28, 36, 0.96)) 80%, transparent)"
+      : C.panelBg;
+    C.sheetBg = GLASS_OK
+      ? "color-mix(in srgb, var(--dsw-alias-bg-base, rgba(24, 28, 36, 0.96)) 46%, transparent)"
+      : C.panelBg;
+    // The two 1px rim lines: a bright catch on the top edge and a whisper on the
+    // bottom one. Dark surfaces need much less white to read the same way.
+    var rimInset = function () {
+      return isDarkScheme()
+        ? "inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.05)"
+        : "inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(255,255,255,0.35)";
+    };
+    // The material itself, as a layer that sits behind a surface's content
+    // (z-index -1 inside the host surface's own stacking context).
+    // Why the blur has to live on a SIBLING (docked panel) or on a surface with no
+    // opacity of its own (the curtain):
+    //  · an element with `opacity` below 1 becomes a *backdrop root*, so a
+    //    backdrop-filter INSIDE it only ever samples that element's own content —
+    //    the blur comes out of nothing (that is why the child-layer attempt looked
+    //    exactly like no blur at all);
+    //  · putting it on the panel itself, inside the clip wrapper, got the panel
+    //    promoted to its own compositing layer and pushed under the conversation.
+    // A sibling sits outside both problems: it samples the page, and the panel's
+    // own translucent fill is painted over it.
+
 
     // ---- theme scheme detection (for the panel's 3D inner shadow) ----
     // Prefer a positive dark signal from the OS preference, then DSH's theme
@@ -2073,6 +2360,43 @@ window.__ModuleLoader__.load({
       // leave a stale handle behind.
       var tocHost = props.tocHost;
       var sessionId = props.sessionId;
+      // ---- bookmarks -----------------------------------------------------------
+      // Read once per session switch; every mutation writes straight through, so
+      // there is no second source of truth to reconcile.
+      var _sMarks = react.useState(function () { return bookmarksOf(props.sessionId); });
+      var marks = _sMarks[0];
+      var setMarks = _sMarks[1];
+      react.useEffect(function () {
+        setMarks(bookmarksOf(props.sessionId));
+      }, [props.sessionId]);
+      var markSet = (function () {
+        var m = {};
+        for (var i = 0; i < marks.length; i++) if (marks[i] && marks[i].key) m[marks[i].key + "#" + (marks[i].idx === undefined ? 0 : marks[i].idx)] = true;
+        return m;
+      })();
+      var isMarked = function (key, idx) { return !!markSet[key + "#" + (idx === undefined ? 0 : idx)]; };
+      var toggleMark = function (key, idx, title, level) {
+        if (!key) return;
+        var id = key + "#" + (idx === undefined ? 0 : idx);
+        var next = [];
+        var found = false;
+        for (var i = 0; i < marks.length; i++) {
+          var e = marks[i];
+          if (!e) continue;
+          if (e.key + "#" + (e.idx === undefined ? 0 : e.idx) === id) { found = true; continue; }
+          next.push(e);
+        }
+        if (!found) next.push({ key: key, idx: idx === undefined ? 0 : idx, title: title || "", level: level || 1, at: Date.now() });
+        setMarks(next);
+        writeBookmarks(props.sessionId, next);
+      };
+      // The bookmark list reuses the outline renderer: entries become ordinary rows
+      // (same look, same jump, same hover/end control), so "only bookmarks" needs no
+      // second view — just a different array of groups to draw.
+      var _sOnlyMarks = react.useState(false);
+      var onlyMarks = _sOnlyMarks[0];
+      var setOnlyMarks = _sOnlyMarks[1];
+      var toggleOnlyMarks = function () { setOnlyMarks(!onlyMarks); };
       var hostSessions = function () {
         if (!tocHost || typeof tocHost.sessions !== "function") return null;
         try {
@@ -2638,9 +2962,28 @@ window.__ModuleLoader__.load({
       var menuClosing = _sMenuClose[0];
       var setMenuClosing = _sMenuClose[1];
       var menuCloseTimerRef = react.useRef(null);
+      // "已复制": the two copy entries write to the clipboard and used to close the
+      // menu with no other trace, so there was no way to tell a copy from a misfire
+      // (or the two entries apart). The label confirms it for a beat before the fade.
+      var _sCopied = react.useState(null);
+      var copiedId = _sCopied[0];
+      var setCopiedId = _sCopied[1];
+      var copyTimerRef = react.useRef(null);
+      // Show the confirmation, then let the menu close on its own short fade.
+      var flashCopied = function (id) {
+        if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+        setCopiedId(id);
+        copyTimerRef.current = setTimeout(function () {
+          copyTimerRef.current = null;
+          setCopiedId(null);
+          closeRowMenu();
+        }, 420);
+      };
       var openRowMenu = function (e, info, key, idx) {
         if (e && e.preventDefault) e.preventDefault();
         if (e && e.stopPropagation) e.stopPropagation();
+        if (copyTimerRef.current) { clearTimeout(copyTimerRef.current); copyTimerRef.current = null; }
+        setCopiedId(null);
         var x = e && typeof e.clientX === "number" ? e.clientX : 0;
         var y = e && typeof e.clientY === "number" ? e.clientY : 0;
         if (menuCloseTimerRef.current) { clearTimeout(menuCloseTimerRef.current); menuCloseTimerRef.current = null; }
@@ -3113,6 +3456,132 @@ window.__ModuleLoader__.load({
       // two comparisons disagree forever — the panel then republishes its default on
       // every pass and stomps a fresh change with the value it had just read back.
       var prefs = usePrefs();
+      // ---- the day strip (see its call site) -----------------------------------
+      // Declared up here with the other hooks: an early "nothing to show yet"
+      // return must not skip them, or the first empty render and every real one
+      // disagree on the hook count (React #310). It reads the list's scroll
+      // position directly — the labels are plain DOM and offsetTop is all the
+      // answer needs — so the handler only ever sets one string.
+      var _sDayStrip = react.useState("");
+      var dayStripText = _sDayStrip[0];
+      var setDayStripText = _sDayStrip[1];
+      react.useEffect(function () {
+        var el = listRef.current;
+        if (!el || typeof el.addEventListener !== "function") return undefined;
+        var sync = function () {
+          var top = el.scrollTop || 0;
+          if (top < 2) { setDayStripText(""); return; }
+          var labels = typeof el.querySelectorAll === "function"
+            ? el.querySelectorAll("[data-dqt-grouplabel]") : [];
+          var cur = null;
+          for (var i = 0; i < labels.length; i++) {
+            if ((labels[i].offsetTop || 0) - 6 <= top) cur = labels[i];
+            else break;
+          }
+          setDayStripText(cur ? String(cur.getAttribute("data-dqt-day") || "") : "");
+        };
+        el.addEventListener("scroll", sync);
+        sync();
+        return function () { el.removeEventListener("scroll", sync); };
+      }, []);
+      // ---- the curtain's own height (dragged from its bottom edge) -------------
+      // The panel's blur twin needs the panel's REAL height: the panel's own height
+      // is often auto (a stored 0), and a twin with no height blurs nothing — that
+      // is what made the first twin invisible.
+      //
+      // Measured through a ResizeObserver, NOT on every render: reading offsetHeight
+      // in a layout effect forces a synchronous layout of the whole (often huge)
+      // outline on every single render, which is exactly the kind of thing that
+      // turns a scroll or a jump into visible jank.
+      var _sBlurH = react.useState(0);
+      var panelBlurH = _sBlurH[0];
+      var setPanelBlurH = _sBlurH[1];
+      react.useEffect(function () {
+        var el = panelRootRef.current;
+        if (!el) return undefined;
+        var measure = function () {
+          var h = el.offsetHeight ? Math.round(el.offsetHeight) : 0;
+          setPanelBlurH(function (prev) { return prev === h ? prev : h; });
+        };
+        if (typeof ResizeObserver === "function") {
+          var ro = new ResizeObserver(measure);
+          ro.observe(el);
+          measure();
+          return function () { ro.disconnect(); };
+        }
+        measure();
+        return undefined;
+      }, [open, sheetOpen]);
+      var _sAutoGlass = react.useState(autoGlassOff);
+      var autoGlassState = _sAutoGlass[0];
+      var setAutoGlassOff = _sAutoGlass[1];
+      var _sSheetFrac = react.useState(null);
+      var sheetDragFrac = _sSheetFrac[0];
+      var setSheetDragFrac = _sSheetFrac[1];
+      var sheetDragRef = react.useRef(null);
+      var sheetResizeStart = function (e) {
+        if (!e || e.button === 2) return;
+        var h = (sheetRef.current && sheetRef.current.clientHeight) || window.innerHeight || 600;
+        sheetDragRef.current = { y: e.clientY, frac: prefs.sheetHeight, h: h };
+        setSheetDragFrac(prefs.sheetHeight);
+        try { if (e.currentTarget && e.currentTarget.setPointerCapture) e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {}
+      };
+      var sheetResizeMove = function (e) {
+        var d = sheetDragRef.current;
+        if (!d) return;
+        // dragging DOWN grows the curtain: the free edge is its bottom
+        setSheetDragFrac(clampFrac(d.frac + (e.clientY - d.y) / d.h, 1));
+      };
+      var sheetResizeEnd = function () {
+        if (!sheetDragRef.current) return;
+        sheetDragRef.current = null;
+        if (sheetDragFrac !== null) prefsStore.set({ sheetHeight: sheetDragFrac });
+        setSheetDragFrac(null);
+      };
+      // ---- slow-device probe (see AUTO_OFF_KEY) --------------------------------
+      // Sampled once per curtain opening, and only while the material is on: the
+      // first 700ms of animated curtain is the heaviest thing this plugin does, so
+      // a p90 frame time over ~26ms there means the blur is costing more than the
+      // look is worth on this machine.
+      react.useEffect(function () {
+        if (!sheetOpen || !prefs.glass || autoGlassOff) return undefined;
+        if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") return undefined;
+        var frames = [];
+        var last = 0;
+        var stop = false;
+        var tick = function (t) {
+          if (stop) return;
+          if (last) frames.push(t - last);
+          last = t;
+          if (frames.length < 40) window.requestAnimationFrame(tick);
+          else finish();
+        };
+        var finish = function () {
+          stop = true;
+          if (!frames.length) return;
+          var sorted = frames.slice().sort(function (a, b) { return a - b; });
+          var p90 = sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.9))];
+          if (p90 > 26) {
+            autoGlassOff = true;
+            try { localStorage.setItem(AUTO_OFF_KEY, "1"); } catch (e) {}
+            setAutoGlassOff(true);
+          }
+        };
+        var id = window.requestAnimationFrame(tick);
+        var guard = setTimeout(finish, 1200);
+        return function () { stop = true; clearTimeout(guard); try { window.cancelAnimationFrame(id); } catch (e) {} };
+      }, [sheetOpen]);
+      // The render's own palette: blue shares the module object itself (default
+      // path: zero behaviour change), any other theme merges the same keys.
+      // Every C.* use below this line — rows, chips, the accent bar, hit marks —
+      // follows the preference without touching a single call site.
+      var C = glassC(themeC(prefs.accent), {
+        glass: prefs.glass && !autoGlassState,
+        glassStrength: prefs.glassStrength
+      });
+      // the once-injected stylesheet cannot see per-render values: repaint its
+      // three theme-dependent rules whenever the theme colour changes
+      react.useEffect(function () { applyAccentCss(prefs.accent); }, [prefs.accent]);
       // Resolve the language for this render FIRST: the group builder below bakes the
       // localised turn stamps (昨天 versus a numeric date) into its memo, and `langKey`
       // is what tells that memo a language switch has to rebuild it.
@@ -5091,11 +5560,23 @@ window.__ModuleLoader__.load({
           landed = true;
           if (glide === mine) glide = null;
           var ticks = 0;
+          var lastSign = 0;
           var iv = setInterval(function () {
-            if (mine.done || (ticks += 1) > 5) { clearInterval(iv); return; }
+            if (mine.done || (ticks += 1) > 3) { clearInterval(iv); return; }
             var next = getTarget(sp);
-            if (Math.abs(next - sp.scrollTop) > 2) sp.scrollTop = next;
-          }, 120);
+            var delta = next - sp.scrollTop;
+            // Only ever nudge a SMALL drift, and never twice in a row in opposite
+            // directions. The re-check exists to absorb the last few pixels while
+            // the host finishes measuring; if the measurement itself swings (a
+            // virtualized turn settling under the target) an unbounded correction
+            // yanks the reader away from where they just landed and then back —
+            // "it arrives and flashes back". A jump that really moved is a fresh
+            // glide, not this one's business.
+            if (Math.abs(delta) > 60) { clearInterval(iv); return; }
+            var sign = delta > 0 ? 1 : (delta < 0 ? -1 : 0);
+            if (sign !== 0 && lastSign !== 0 && sign !== lastSign) { clearInterval(iv); return; }
+            if (Math.abs(delta) > 8) { sp.scrollTop = next; lastSign = sign; }
+          }, 140);
         };
 
         // fallback: draw the glide ourselves, in real time, decelerating to a stop
@@ -5289,7 +5770,7 @@ window.__ModuleLoader__.load({
             // a jump that started from a search hit keeps the hit highlighted
             if (query.trim()) {
               clearHighlights();
-              highlightRow(row, query.trim(), 0, fuzzy);
+              highlightRow(row, query.trim(), 0, fuzzy, C.accentRgb);
             }
             return;
           }
@@ -5481,7 +5962,7 @@ window.__ModuleLoader__.load({
           // occurrence index within the target message (consecutive in matches)
           var occ = 0;
           for (var p = i - 1; p >= 0 && matches[p].key === m.key; p--) occ++;
-          highlightRow(r, q, occ, fuzzy);
+          highlightRow(r, q, occ, fuzzy, C.accentRgb);
           var markEl = r.querySelector(".dqt-current");
           var sp = r.closest ? r.closest("[data-conversation-scroll]") : null;
           if (sp && markEl) {
@@ -5540,7 +6021,7 @@ window.__ModuleLoader__.load({
           title: tip,
           onMouseEnter: function (e) {
             e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-active, rgba(79,140,255,0.24))";
-            e.currentTarget.style.color = "var(--dsw-alias-brand-primary, #4f8cff)";
+            e.currentTarget.style.color = C.accent;
           },
           onMouseLeave: function (e) {
             e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
@@ -5565,6 +6046,10 @@ window.__ModuleLoader__.load({
         onOpenTurn: openTurn,
         hoverStart: hoverStart,
         hoverEnd: hoverEnd,
+        // B: which rows carry a bookmark (the flag layer reads this)
+        isMarked: isMarked,
+        // B: the ribbon's colour, resolved here to a concrete hex (see renderItem)
+        markColor: (ACCENTS[normAccent(prefs.accent)] || ACCENTS.blue).dot,
         // right-click on a row: pin its preview / jump to the end of its section
         rowMenu: openRowMenu,
         // the curtain is wide: rows switch to a one-line, multi-part layout that
@@ -5807,7 +6292,11 @@ window.__ModuleLoader__.load({
       // ramp over the slide only made the two directions read different lines.
       // While parked the wipe covers the box entirely, so the resting opacity can
       // simply stay up.
-      var panelOpacity = chatViewActive ? (hovered ? 1 : 0.72) : 0;
+      // Resting opacity used to be 0.72 so the panel stepped out of the way. The
+      // surface is genuinely translucent now (74 % + blur), and dimming on top of
+      // that would leave the labels at ~53 % — text has to stay crisp, so the
+      // "inactive" hint is a much smaller step.
+      var panelOpacity = chatViewActive ? (hovered ? 1 : 0.92) : 0;
 
       // ---- toolbar buttons -----------------------------------------------------
       // ONE instance of each, placed either in the docked header row or in the
@@ -5845,7 +6334,7 @@ window.__ModuleLoader__.load({
           onMouseEnter: function (e) {
             if (disabled) return;
             e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-active, rgba(79,140,255,0.24))";
-            e.currentTarget.style.color = "var(--dsw-alias-brand-primary, #4f8cff)";
+            e.currentTarget.style.color = C.accent;
           },
           onMouseLeave: function (e) {
             e.currentTarget.style.background = active ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
@@ -5963,6 +6452,53 @@ window.__ModuleLoader__.load({
       // is what makes it read centred (the old character needed the same, plus a y nudge for
       // its line box, which a path does not have)
       var dockBtnEl = iconBtn(toggleDock, dockRight ? T("handle.dockLeft") : T("handle.dockRight"), dockTriEl, 12, dockRight ? { x: -1, y: 0 } : { x: 1, y: 0 });
+      // B: the bookmark button. Always present, between the two left-hand controls,
+      // and it is the way in and out of the bookmark view — a control that appeared
+      // and vanished with the count left the reader looking for it.
+      //
+      // The star is the whole face: no number inside it (there is no room in a
+      // twenty-pixel star, and a squeezed digit is worse than none). The count lives
+      // in the tooltip a moment later, where it has a line of its own.
+      var markCount = marks.length > 99 ? "99+" : String(marks.length);
+      var marksTip = onlyMarks
+        ? Tp("marks.tip.all", { n: markCount })
+        : Tp("marks.tip.only", { n: markCount });
+      var marksBtnEl = react_jsx_runtime.jsx("button", {
+        onClick: toggleOnlyMarks,
+        title: marksTip,
+        "aria-label": marksTip,
+        "data-dqt-marks": onlyMarks ? "only" : "all",
+        style: {
+          width: 24,
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "50%",
+          cornerShape: "round",
+          background: onlyMarks ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
+          border: "none",
+          color: C.muted,
+          cursor: "pointer",
+          flex: "none",
+          padding: 0,
+          transition: "background 0.18s ease, color 0.18s ease"
+        },
+        children: react_jsx_runtime.jsx("svg", {
+          key: "star",
+          width: 15, height: 15, viewBox: "0 0 24 24",
+          style: { display: "block" },
+          children: react_jsx_runtime.jsx("path", {
+            // rounded joins (a stroke in the same colour as the fill) soften the
+            // five points; without it the star reads as a spiky asterisk at this size
+            d: "M12 3.1l2.72 5.52 6.09.89-4.4 4.29 1.04 6.06L12 16.9l-5.45 2.86 1.04-6.06-4.4-4.29 6.09-.89z",
+            fill: "currentColor",
+            stroke: "currentColor",
+            strokeWidth: 2.4,
+            strokeLinejoin: "round"
+          })
+        })
+      }, "marks-btn");
       // the curtain keeps its own entry point: the water-drop handle on the top
       // edge (sheet.openHandle). The toolbar's curtain button is gone — the header
       // is four controls now.
@@ -6063,7 +6599,7 @@ window.__ModuleLoader__.load({
               // handle.
               react_jsx_runtime.jsx("div", {
                 style: { display: "flex", alignItems: "center", gap: 6, flex: "none" },
-                children: [settingsBtnEl, dockBtnEl]
+                children: [settingsBtnEl, marksBtnEl, dockBtnEl]
               }),
               // spacer: nothing here, it just pins the two pairs to the two ends —
               // and it is the first thing to give way when the panel narrows
@@ -6318,7 +6854,7 @@ window.__ModuleLoader__.load({
                   borderRadius: "50%",
                   cornerShape: "round",
                   fontSize: sheetOpen ? 13 : 11,
-                  color: searchScope !== "title" ? "var(--dsw-alias-brand-primary, #4f8cff)" : C.muted,
+                  color: searchScope !== "title" ? C.accent : C.muted,
                   background: searchScope !== "title" ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
                   border: "none",
                   cursor: "pointer",
@@ -6360,7 +6896,7 @@ window.__ModuleLoader__.load({
                   borderRadius: "50%",
                   cornerShape: "round",
                   fontSize: sheetOpen ? 13 : 11,
-                  color: fuzzy ? "var(--dsw-alias-brand-primary, #4f8cff)" : C.muted,
+                  color: fuzzy ? C.accent : C.muted,
                   background: fuzzy ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
                   border: "none",
                   cursor: searchScope === "cross" ? "default" : "pointer",
@@ -6405,14 +6941,136 @@ window.__ModuleLoader__.load({
         },
         children: hint === "oldest" ? T("search.hintOldest") : T("search.hintMore")
       }) : null;
+      // B: "only bookmarks". The rows come from the stored entries rather than from
+      // the outline tree — a bookmark may point at a turn that is not loaded right
+      // now, and it still has to be listed (it is a place the reader saved).
+      //
+      // These are DELIBERATELY plain rows, not the outline's own row renderer. That
+      // renderer registers data-jump-key / data-nav-row and wires the hover card,
+      // the end control and the preview pinning; reusing it here put a second set of
+      // rows into the DOM carrying the SAME keys as the live outline, which is a
+      // collision waiting to happen for anything that queries rows by key (the jump
+      // target lookup, the keyboard cursor, the follow). A saved place needs a label
+      // and a click — nothing else.
+      var markRowsEl = null;
+      if (onlyMarks && !resultsEl) {
+        // `dense` is a local of the row renderers, not of this component: read the
+        // preference here instead (referencing the other one threw and took the
+        // whole panel down with it).
+        var markDense = prefs.density === "compact";
+        markRowsEl = marks.length ? react_jsx_runtime.jsx("div", {
+          key: "marks",
+          style: { padding: "2px 0 8px" },
+          children: marks.map(function (e, i) {
+            var lvl = Math.min(6, Math.max(1, e.level || 1));
+            return react_jsx_runtime.jsx("div", {
+              "data-dqt-markrow": "1",
+              onClick: function () { jump(e.key, e.idx); },
+              title: e.title || "",
+              style: {
+                display: "flex", alignItems: "center", gap: 6,
+                padding: markDense ? "2px 8px 2px 7px" : "4px 8px 4px 7px",
+                borderRadius: 6, cursor: "pointer",
+                fontSize: 12.5, color: C.text,
+                transition: "background-color 0.15s ease"
+              },
+              onMouseEnter: function (ev) { ev.currentTarget.style.backgroundColor = C.hover; },
+              onMouseLeave: function (ev) { ev.currentTarget.style.backgroundColor = "transparent"; },
+              children: [
+                react_jsx_runtime.jsx("span", {
+                  key: "f", style: { color: C.accent, display: "flex", flex: "none" },
+                  children: react_jsx_runtime.jsx("svg", {
+                    width: 7, height: 9, viewBox: "0 0 7 9", fill: "currentColor",
+                    style: { display: "block" },
+                    children: react_jsx_runtime.jsx("path", { d: "M0 0h5.6L4.1 2.2l1.5 2.2H1.1V9H0z" })
+                  })
+                }),
+                react_jsx_runtime.jsx("span", {
+                  key: "l", style: { flex: "none", fontSize: 10, color: C.muted, width: 16 },
+                  children: "H" + lvl
+                }),
+                react_jsx_runtime.jsx("span", {
+                  key: "t", style: { flex: "1 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                  children: e.title || ""
+                })
+              ]
+            }, "mark-row-" + i);
+          })
+        }) : react_jsx_runtime.jsx("div", {
+          key: "marks-empty",
+          style: {
+            display: "flex", alignItems: "center", justifyContent: "center",
+            padding: "30px 16px", color: C.muted, fontSize: 11.5, lineHeight: "17px",
+            textAlign: "center"
+          },
+          children: T("marks.empty")
+        });
+      }
       var outlineEl = renderGroups(shownGroups, shownTrees, jump, C, Math.max(0, groups.length - visibleCount), activeGroup,
         questionsOnly ? Object.assign({}, renderExtra, { questionsOnly: true }) : renderExtra);
+      // M: an empty outline used to be a blank box, which reads as "this is broken"
+      // rather than "there is nothing here yet". One quiet line plus a faded glyph
+      // says which it is. A turn with no headings still becomes a group, so this
+      // only appears for a conversation that has nothing to outline AT ALL.
+      var emptyEl = !resultsEl && shownGroups.length === 0 ? react_jsx_runtime.jsx("div", {
+        key: "empty",
+        style: {
+          display: "flex", flexDirection: "column", alignItems: "center",
+          justifyContent: "center", gap: 8, padding: "34px 18px",
+          color: C.muted, textAlign: "center"
+        },
+        children: [
+          react_jsx_runtime.jsx("svg", {
+            key: "e-ico", width: 26, height: 26, viewBox: "0 0 24 24", fill: "none",
+            stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round",
+            style: { opacity: 0.5, display: "block" },
+            children: [
+              react_jsx_runtime.jsx("line", { key: "a", x1: 4, y1: 6, x2: 20, y2: 6 }),
+              react_jsx_runtime.jsx("line", { key: "b", x1: 4, y1: 12, x2: 15, y2: 12 }),
+              react_jsx_runtime.jsx("line", { key: "c", x1: 4, y1: 18, x2: 11, y2: 18 })
+            ]
+          }),
+          react_jsx_runtime.jsx("div", {
+            key: "e-txt",
+            style: { fontSize: 11.5, lineHeight: "17px", opacity: 0.85, maxWidth: 210 },
+            children: T("outline.empty")
+          })
+        ]
+      }) : null;
       // The curtain keeps the outline in the middle of the surface (its own column,
       // centred with room to spare at both sides) and pushes the search in from the
       // right; the docked panel keeps its original "results replace the list".
+      // The bookmark view rides ON TOP of the outline instead of replacing it, and
+      // the outline is only hidden (visibility, not display): it keeps its height,
+      // so the scroller keeps its offset and closing the view lands the reader
+      // exactly where they were. Replacing the content clamped the scroll to the top
+      // the moment the shorter list rendered, and putting the offset back afterwards
+      // was a race the browser usually won.
+      var marksOverlayEl = null;
+      if (onlyMarks && !resultsEl) {
+        marksOverlayEl = react_jsx_runtime.jsx("div", {
+          className: "dqt-marks-overlay",
+          style: {
+            position: "absolute",
+            left: 0,
+            // the curtain's search column keeps its own strip: the overlay covers the
+            // outline, not the hits
+            right: sheetOpen && sheetColW > 0 ? sheetColW : 0,
+            top: 0,
+            bottom: 0,
+            overflowY: "auto",
+            overflowAnchor: "none",
+            padding: sheetOpen ? "0 20px 8px" : "0 8px 6px",
+            direction: (sheetOpen || dockRight) ? "ltr" : "rtl"
+          },
+          children: react_jsx_runtime.jsx("div", { style: { direction: "ltr" }, children: markRowsEl })
+        });
+      }
+      // across the curtain the results live in their own column, so the outline stays
+      // where it is; only the docked panel swaps the list for the hits
       var listChildren = sheetOpen
-        ? [outlineEl, hintEl]
-        : (resultsEl ? [resultsEl, hintEl] : outlineEl);
+        ? [outlineEl || emptyEl, hintEl]
+        : (resultsEl ? [resultsEl, hintEl] : (outlineEl || emptyEl));
       var listEl = react_jsx_runtime.jsx("div", {
         ref: listRef,
         className: "dqt-list",
@@ -6422,6 +7080,9 @@ window.__ModuleLoader__.load({
         role: "group",
         "aria-label": T("a11y.list"),
         style: {
+          // hidden rather than unmounted while the bookmark view is up (see above):
+          // it keeps its height and therefore its scroll offset
+          visibility: onlyMarks && !resultsEl ? "hidden" : undefined,
           overflowY: "auto",
           // We are the only thing that holds the reader's place in this list (see the
           // paging block): the browser's own scroll anchoring would also adjust
@@ -6434,6 +7095,11 @@ window.__ModuleLoader__.load({
           // header that many pixels below the toolbar (a visible gap). Spacing
           // between groups comes from the per-group divider instead.
           padding: sheetOpen ? "0 20px 8px" : "0 8px 6px",
+          // the rows dissolve at BOTH edges instead of being cut by a hard line. The
+          // top fade is safe now that the day strip lives outside the scroller: it
+          // thins the rows approaching the strip, never the label itself.
+          maskImage: "linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 22px), transparent 100%)",
+          WebkitMaskImage: "linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 22px), transparent 100%)",
           flex: "1 1 auto",
           minHeight: 0,
           // across the curtain the list does not touch the edges: it is a centred
@@ -6499,10 +7165,36 @@ window.__ModuleLoader__.load({
       var showBack = awayFromRestore(listRef.current);
       // the outline and the search column share one row in BOTH layouts, so the list
       // is never moved between parents when the curtain opens or closes
+      var dayStripEl = react_jsx_runtime.jsx("div", {
+        "data-dqt-daystrip": "1",
+        style: {
+          flex: "none",
+          // the space is reserved even while empty, so the list never jumps when
+          // the first label scrolls under the edge. A STRING on purpose: the group
+          // header's own height is the number 18, and several checks use that to
+          // find header rows — the strip must not be mistaken for one.
+          height: "18px",
+          display: "flex",
+          alignItems: "center",
+          padding: sheetOpen ? "0 20px" : "0 10px",
+          fontSize: 11,
+          lineHeight: "14px",
+          color: C.muted,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          pointerEvents: "none"
+        },
+        // the bookmark view is a different list with its own scroll: the day label
+        // would go on showing the last day the outline was scrolled to
+        children: onlyMarks ? "" : dayStripText
+      });
       var bodyRowEl = react_jsx_runtime.jsx("div", {
         className: "dqt-body-row",
-        style: { flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "row", alignItems: "stretch" },
-        children: [listEl, sheetSearchColEl]
+        // `position: relative` is what lets the bookmark overlay cover the list
+        // without becoming part of its scrolled content
+        style: { position: "relative", flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "row", alignItems: "stretch" },
+        children: [listEl, marksOverlayEl, sheetSearchColEl]
       });
       // one geometry for the panel and its shadow twin, merged (never duplicated)
       var mergeStyle = function (base, extra) {
@@ -6520,7 +7212,7 @@ window.__ModuleLoader__.load({
         maxHeight: zLen(vMaxH),
         height: panelH > 0 ? zLen(panelH) : undefined,
         zoom: zoom === 1 ? undefined : zoom,
-        borderRadius: 12,
+        borderRadius: RADIUS_PANEL,
         transform: panelTransform,
         transition: viewFading ? "opacity 0.3s ease" : panelTransition,
         // held back while the edge handle slips home (see edgeLeaving): the panel is
@@ -6556,6 +7248,51 @@ window.__ModuleLoader__.load({
       var shadowClip = dockRight
         ? "inset(" + zLen(-SHADOW_BLEED) + " " + zLen(shadowWipe - SHADOW_REACH) + " " + zLen(-SHADOW_BLEED) + " " + zLen(geoOpen ? -SHADOW_BLEED : SHADOW_REACH) + ")"
         : "inset(" + zLen(-SHADOW_BLEED) + " " + zLen(geoOpen ? -SHADOW_BLEED : -SHADOW_REACH) + " " + zLen(-SHADOW_BLEED) + " " + zLen(shadowWipe - SHADOW_REACH) + ")";
+      // The panel's blur lives OUTSIDE the clipping wrapper (see the portal list):
+      // inside it, any backdrop-filter promotes a layer in that subtree and the
+      // panel drops beneath the conversation. As a body-level twin with the same
+      // geometry it samples the page normally, and the panel's own translucent
+      // fill is painted over it.
+      // A body-level blur twin was tried and removed: it composites as a SECOND
+      // pass, so the panel's own translucency showed the page straight through
+      // while the twin showed it blurred — the reader sees "one blurred layer and
+      // one clear layer" stacked. A surface can only read as ONE material when the
+      // blur and the fill are painted by the same element, and that is impossible
+      // for the docked panel where it currently lives (a backdrop-filter anywhere
+      // inside its clipping wrapper drops the panel under the conversation).
+      // The blur twin. It lives as a DIRECT child of the clipping shell — the same
+      // depth as the curtain, which is the only place in this subtree where a
+      // backdrop-filter has been observed to sample the page without dragging the
+      // panel under the conversation. The panel's own fill is painted over it, so
+      // a twin that fails costs the blur only.
+      var panelGlassTwinEl = (!sheetOpen && C.glassOn && panelBlurH > 0)
+        ? react_jsx_runtime.jsx("div", {
+          "data-dqt-panel-glass": "1",
+          style: mergeStyle(panelGeoStyle, {
+            zIndex: Z_PANEL - 1,
+            height: zLen(panelBlurH),
+            background: "transparent",
+            backdropFilter: C.panelBlur,
+            WebkitBackdropFilter: C.panelBlur,
+            opacity: panelOpacity,
+            pointerEvents: "none",
+            borderRadius: RADIUS_PANEL,
+            clipPath: panelClip
+          })
+        })
+        : null;
+      // NO live blur on the docked panel itself — settled by experiment, not preference.
+      // Every placement was tried in the real host: on the panel itself, on a
+      // child layer, and on a sibling twin behind it. All three made the panel
+      // disappear, and a child layer inside the panel's own `opacity` group
+      // produced no blur at all (an element with opacity is a backdrop root, so
+      // the filter sampled that element's own content). The panel lives inside a
+      // clipping, fixed wrapper that the host's compositor keeps below the
+      // conversation; anything that promotes a layer in there loses the stack.
+      // So the panel keeps a translucent FILL (which reads as glass on its own:
+      // the rim, the gutter shadow and the see-through body do the work) and the
+      // live blur stays on the curtain, the transient surface — exactly the split
+      // Windows makes between Mica (persistent) and Acrylic (transient).
       var panelShadowEl = react_jsx_runtime.jsx("div", {
         "data-dqt-panel-shadow": "1",
         style: mergeStyle(panelGeoStyle, {
@@ -6564,9 +7301,14 @@ window.__ModuleLoader__.load({
           opacity: panelOpacity,
           pointerEvents: "none",
           clipPath: shadowClip,
-          boxShadow: isDarkScheme()
+          // the halo is the panel's lift; the offset line adds the gutter shadow on
+          // the conversation side, so the sheet reads as hovering over the transcript
+          boxShadow: (isDarkScheme()
             ? "0 0 24px -4px rgba(255, 255, 255, 0.16), 0 0 10px -2px rgba(255, 255, 255, 0.10)"
-            : "0 0 24px -4px rgba(0, 0, 0, 0.38), 0 0 10px -2px rgba(0, 0, 0, 0.26)"
+            : "0 0 24px -4px rgba(0, 0, 0, 0.38), 0 0 10px -2px rgba(0, 0, 0, 0.26)")
+            + (dockRight
+              ? ", -12px 0 20px -14px rgba(0, 0, 0, 0.45)"
+              : ", 12px 0 20px -14px rgba(0, 0, 0, 0.45)")
         })
       });
       var panelEl = react_jsx_runtime.jsx("div", {
@@ -6593,7 +7335,9 @@ window.__ModuleLoader__.load({
           minHeight: 0,
           display: "flex",
           flexDirection: "column",
-          background: C.panelBg,
+          // transparent on purpose: inside the curtain the CURTAIN is the glass, and
+          // an opaque child would paint over it
+          background: "transparent",
           border: "none",
           borderRadius: 0,
           zIndex: Z_PANEL,
@@ -6606,12 +7350,17 @@ window.__ModuleLoader__.load({
         } : mergeStyle(panelGeoStyle, {
           display: "flex",
           flexDirection: "column",
-          background: C.panelBg,
+          // the filler colour is ALWAYS here (glassBg falls back to the opaque
+          // panel colour where blur is unavailable); the blur rides on the child
+          background: C.glassBg,
           border: "none",
           zIndex: Z_PANEL,
           overflow: "hidden",
           color: C.text,
           opacity: panelOpacity,
+          // makes this element a stacking context so the glass layer's z-index:-1
+          // stays inside it (behind the rows, in front of the page)
+          isolation: "isolate",
           clipPath: panelClip,
           pointerEvents: chatViewActive ? "auto" : "none"
         }),
@@ -6656,6 +7405,13 @@ window.__ModuleLoader__.load({
           // the docked panel keeps its search band under the header; across the
           // curtain the same row lives at the top of the pushed-in search column
           sheetOpen ? null : searchRowEl,
+          // the day strip: the "which day am I in" label, OUTSIDE the scroller.
+          // A sticky label would have to be opaque to hide the rows passing under
+          // it, and an opaque strip on a translucent surface is the band that reads
+          // as a cut. Out here it needs no fill at all — it is just text on the
+          // same material — while still staying put for as long as the reader
+          // scrolls, and the list fades its first rows out before they reach it.
+          dayStripEl,
           bodyRowEl,
           // "back to the newest row": floats over the list's lower-right corner and
           // fades in the moment the newest turns fall below the fold. Kept MOUNTED
@@ -7058,6 +7814,11 @@ window.__ModuleLoader__.load({
       // takes pointer events, so its text can be selected and its pin can be clicked);
       // the hover card stays click-through except for its pin button.
       var renderPreviewCard = function (card, opts) {
+        // the per-render palette (accent + glass) has to be handed in: this body
+        // closed over the module-level C, whose glass fields are undefined, so the
+        // card silently fell back to the opaque colour while everything else was
+        // translucent
+        var P = (opts && opts.palette) || C;
         var cardW = 264;
         var top = Math.max(8, Math.min(card.top - 4, window.innerHeight - 210));
         var left = dockRight
@@ -7088,7 +7849,7 @@ window.__ModuleLoader__.load({
             style: { display: "flex", alignItems: "flex-start", gap: 6 },
             children: [
               react_jsx_runtime.jsx("div", {
-                style: { flex: "1 1 auto", minWidth: 0, fontSize: 12, fontWeight: 600, color: C.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                style: { flex: "1 1 auto", minWidth: 0, fontSize: 12, fontWeight: 600, color: P.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
                 children: card.title
               }, "hc-t"),
               react_jsx_runtime.jsx("button", {
@@ -7111,8 +7872,8 @@ window.__ModuleLoader__.load({
                   justifyContent: "center",
                   border: "none",
                   borderRadius: 6,
-                  background: opts.pinned ? C.hover : "transparent",
-                  color: opts.pinned ? C.text : C.muted,
+                  background: opts.pinned ? P.hover : "transparent",
+                  color: opts.pinned ? P.text : P.muted,
                   cursor: "pointer",
                   // the hover card is click-through except for this button, so reaching
                   // for it does not depend on the row staying hovered
@@ -7128,17 +7889,17 @@ window.__ModuleLoader__.load({
         ];
         if (card.meta) {
           kids.push(react_jsx_runtime.jsx("div", {
-            style: { fontSize: 10, color: C.muted, opacity: 0.8, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+            style: { fontSize: 10, color: P.muted, opacity: 0.8, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
             children: card.meta
           }, "hc-m"));
         }
         kids.push(react_jsx_runtime.jsx("div", {
-          style: { fontSize: 11, lineHeight: "16px", color: C.text, opacity: 0.9, marginTop: 4, maxHeight: 116, overflow: "hidden" },
+          style: { fontSize: 11, lineHeight: "16px", color: P.text, opacity: 0.9, marginTop: 4, maxHeight: 116, overflow: "hidden" },
           children: body || (card.ghost ? T("turn.loadTip") : "")
         }, "hc-b"));
         if (card.ghost) {
           kids.push(react_jsx_runtime.jsx("div", {
-            style: { fontSize: 10, color: C.muted, opacity: 0.7, marginTop: 4 },
+            style: { fontSize: 10, color: P.muted, opacity: 0.7, marginTop: 4 },
             children: T("preview.truncated")
           }, "hc-n"));
         }
@@ -7159,12 +7920,18 @@ window.__ModuleLoader__.load({
             left: left,
             width: cardW,
             padding: "8px 10px",
-            borderRadius: 8,
+            borderRadius: 10,
             cornerShape: "round",
-            background: C.panelBg,
-            color: C.text,
-            border: "1px solid " + C.panelBorder,
-            boxShadow: "0 8px 24px rgba(0,0,0,0.28)",
+            // The same material as the panel: the same translucent fill, the same
+            // rim, and the same SMALL radius of blur — the card floats in this
+            // portal (no opacity group, nobody's parent), so its backdrop-filter
+            // samples the page exactly like the curtain's.
+            background: P.glassOn ? P.glassBg : P.panelBg,
+            backdropFilter: P.glassOn ? P.panelBlur : undefined,
+            WebkitBackdropFilter: P.glassOn ? P.panelBlur : undefined,
+            color: P.text,
+            border: "1px solid " + P.panelBorder,
+            boxShadow: P.glassOn ? rimInset() + ", 0 8px 24px rgba(0,0,0,0.28)" : "0 8px 24px rgba(0,0,0,0.28)",
             // above the panel and the curtain — it is a sibling of both in this
             // portal, and both sit below it in the layer band we claim
             zIndex: Z_HOVER + (opts.pinned ? 1 : 0),
@@ -7182,21 +7949,70 @@ window.__ModuleLoader__.load({
       // and it only leaves the screen through the same fade the hover card uses.
       var pinnedVisible = !!(pinnedCard && open);
       var pinnedEl = pinnedVisible
-        ? renderPreviewCard(pinnedCard, { pinned: true, closing: pinnedClosing })
+        ? renderPreviewCard(pinnedCard, { pinned: true, closing: pinnedClosing, palette: C })
         : null;
       var hoverEl = null;
-      if (hoverCard && open) hoverEl = renderPreviewCard(hoverCard, { pinned: false, closing: hoverClosing });
+      if (hoverCard && open) hoverEl = renderPreviewCard(hoverCard, { pinned: false, closing: hoverClosing, palette: C });
 
       // ---- the row menu ---------------------------------------------------------
       // Small, fixed-position, keyboard-reachable: ↑/↓ move, Enter runs, Esc closes.
       var rowMenuEl = null;
       if (rowMenu && open) {
         var menuW = 208;
-        var menuH = 76;
-        var menuLeft = Math.max(8, Math.min(rowMenu.x, window.innerWidth - menuW - 8));
-        var menuTop = Math.max(8, Math.min(rowMenu.y, window.innerHeight - menuH - 8));
+        var menuLeft;
+        var menuTop;
+        // NOTE: the height (and therefore the clamped top) can only be known once
+        // the item list exists — computing it above the list dereferenced a hoisted
+        // `var` and threw on every open.
+        // Two sources open this menu: an outline row and a time row (the group
+        // header). A time row has no preview to pin and no single heading to copy,
+        // so those two entries are absent there; everything else is identical.
+        var menuIsGroup = !!(rowMenu.info && rowMenu.info.kind === "group");
+        var menuCanCopySection = menuIsGroup
+          ? !!(rowMenu.info && rowMenu.info.canCopy)
+          : !!(rowMenu.info && rowMenu.info.hasKids);
         var menuItems = [
           {
+            id: "goto",
+            label: T("menu.goto"),
+            run: function () {
+              var key = rowMenu.key;
+              var idx = rowMenu.idx;
+              closeRowMenu();
+              jump(key, idx === undefined ? 0 : idx);
+            }
+          },
+          {
+            id: "mark",
+            label: isMarked(rowMenu.key, rowMenu.idx) ? T("menu.unmark") : T("menu.mark"),
+            run: function () {
+              toggleMark(rowMenu.key, rowMenu.idx, rowMenu.info && rowMenu.info.title,
+                menuIsGroup ? 0 : (rowMenu.info && rowMenu.info.level));
+              closeRowMenu();
+            }
+          },
+          { id: "sep1" },
+          menuIsGroup ? null : {
+            id: "copyTitle",
+            label: copiedId === "copyTitle" ? T("menu.copied") : T("menu.copyTitle"),
+            run: function () {
+              copyText((rowMenu.info && rowMenu.info.title) || "");
+              flashCopied("copyTitle");
+            }
+          },
+          // only when there really is an outline below it, so the entry never
+          // copies the same text the entry above it already copies
+          menuCanCopySection ? {
+            id: "copySection",
+            label: copiedId === "copySection" ? T("menu.copied") : T("menu.copySection"),
+            run: function () {
+              var info = rowMenu.info;
+              copyText(info && typeof info.mdOf === "function" ? info.mdOf() : ((info && info.title) || ""));
+              flashCopied("copySection");
+            }
+          } : null,
+          { id: "sep2" },
+          menuIsGroup ? null : {
             id: "pin",
             label: isPinned(rowMenu.key) ? T("menu.unpin") : T("menu.pin"),
             run: function () {
@@ -7226,7 +8042,23 @@ window.__ModuleLoader__.load({
               if (typeof endJumpRow === "function") endJumpRow(key, idx === undefined ? 0 : idx);
             }
           }
-        ];
+        ].filter(function (it, i, arr) {
+          // drop the entries this source does not offer, then collapse the
+          // separators that ended up adjacent or at either end
+          if (!it) return false;
+          if (it.id.indexOf("sep") !== 0) return true;
+          var prev = null;
+          for (var p = i - 1; p >= 0; p--) { if (arr[p]) { prev = arr[p]; break; } }
+          var next = null;
+          for (var q = i + 1; q < arr.length; q++) { if (arr[q]) { next = arr[q]; break; } }
+          if (!prev || !next) return false;
+          if (prev.id.indexOf("sep") === 0) return false;
+          return true;
+        });
+        // now that the list exists: keep the menu inside the viewport
+        var menuH = 12 + menuItems.length * 30;
+        menuLeft = Math.max(8, Math.min(rowMenu.x, window.innerWidth - menuW - 8));
+        menuTop = Math.max(8, Math.min(rowMenu.y, window.innerHeight - menuH - 8));
         rowMenuEl = react_jsx_runtime.jsx("div", {
           "data-dqt-menu": "on",
           className: "dqt-rowmenu" + (menuClosing ? " dqt-rowmenu-closing" : ""),
@@ -7247,6 +8079,12 @@ window.__ModuleLoader__.load({
             pointerEvents: menuClosing ? "none" : "auto"
           },
           children: menuItems.map(function (item) {
+            if (item.id.indexOf("sep") === 0) {
+              return react_jsx_runtime.jsx("div", {
+                "data-dqt-menu-sep": "1",
+                style: { height: 1, background: C.panelBorder, margin: "4px 6px", opacity: 0.7 }
+              }, "menu-" + item.id);
+            }
             return react_jsx_runtime.jsx("button", {
               role: "menuitem",
               "data-dqt-menu-item": item.id,
@@ -7283,6 +8121,30 @@ window.__ModuleLoader__.load({
       // bottom shadow lives (the clip would otherwise cut it off).
       var SHEET_SHADOW_ROOM = 24;
       var sheetUp = sheetOpen && chatViewActive;
+      // The curtain's resize edge: a 10px strip along its bottom, with the pill
+      // that says "this can be pulled". Only rendered while the curtain is up.
+      var sheetGripEl = react_jsx_runtime.jsx("div", {
+        "data-dqt-sheet-grip": "1",
+        onPointerDown: sheetResizeStart,
+        onPointerMove: sheetResizeMove,
+        onPointerUp: sheetResizeEnd,
+        onPointerCancel: sheetResizeEnd,
+        title: T("sheet.resize"),
+        style: {
+          flex: "none", height: 10, width: "100%", cursor: "row-resize",
+          touchAction: "none", display: "flex", alignItems: "center",
+          justifyContent: "center", background: "transparent"
+        },
+        children: react_jsx_runtime.jsx("span", {
+          style: {
+            display: "block", width: 42, height: 4, borderRadius: 999,
+            cornerShape: "round",
+            // the one decorative spot that follows the theme colour: the grip is
+            // the curtain's own control, and a neutral grey pill read as disabled
+            background: C.accent, opacity: 0.35
+          }
+        })
+      });
       var sheetShellEl = react_jsx_runtime.jsx("div", {
         key: "sheet-shell",
         className: "dqt-sheet-clip",
@@ -7333,21 +8195,37 @@ window.__ModuleLoader__.load({
           height: 0,
           overflow: "visible"
         },
-        children: react_jsx_runtime.jsx("div", {
+        // the panel's blur twin rides here, as a sibling of the curtain: the only
+        // depth in this subtree where a backdrop-filter has been seen to work
+        children: [panelGlassTwinEl, react_jsx_runtime.jsx("div", {
           ref: sheetRef,
           className: sheetUp ? "dqt-sheet dqt-sheet-open" : "dqt-sheet-idle",
           "data-sheet": sheetUp ? "on" : undefined,
           style: {
             width: sheetUp ? "100%" : 0,
-            // the bottom leaves the shadow room the clip box grew by
-            height: sheetUp ? "calc(100% - " + SHEET_SHADOW_ROOM + "px)" : 0,
+            // the bottom leaves the shadow room the clip box grew by; the fraction
+            // is the reader's own height (dragged from the bottom edge, remembered)
+            height: sheetUp
+              ? "calc((100% - " + SHEET_SHADOW_ROOM + "px) * " + (sheetDragFrac === null ? prefs.sheetHeight : sheetDragFrac) + ")"
+              : 0,
             // border-box so the 1px edges stay INSIDE the measured height: with the
             // old content-box the bottom pair sat below it and the clip cut them
             // away, which is why the bottom edge had no visible line
             boxSizing: "border-box",
             display: "flex",
             flexDirection: "column",
-            background: C.panelBg,
+            // The curtain is the transient surface (Windows' "Acrylic" case): the
+            // live blur belongs here, where it is dismissed rather than lived in.
+            // GATED ON sheetUp — this element is ALSO the docked panel's parent
+            // while the curtain is away (height 0, yet still an ancestor), and a
+            // backdrop-filter here promoted the whole subtree and dropped the
+            // panel beneath the conversation. That was the real "panel disappears"
+            // bug: the panel itself had no filter at all in that build.
+            background: sheetUp ? C.sheetBg : "transparent",
+            // L: a light/dark switch eases the material instead of snapping it
+            transition: "background-color 0.25s ease",
+            backdropFilter: sheetUp && C.glassOn ? C.sheetBlur : undefined,
+            WebkitBackdropFilter: sheetUp && C.glassOn ? C.sheetBlur : undefined,
             color: C.text,
             border: "none",
             borderTop: sheetUp ? "1px solid " + C.panelBorder : "none",
@@ -7358,17 +8236,25 @@ window.__ModuleLoader__.load({
             // no dimming layer — the conversation below stays legible and usable.
             // The outer shadow is the bottom edge's own: it follows the rounded
             // bottom corners and stops before the vertical seams.
-            borderRadius: "0 0 12px 12px",
-            boxShadow: sheetUp ? C.sheetShadow : "none",
+            borderRadius: "0 0 " + RADIUS_SHEET + "px " + RADIUS_SHEET + "px",
+            // the drop shadow lifts the sheet off the conversation; the inset pair
+            // is the rim that says "this is a surface, not a haze"
+            boxShadow: sheetUp ? (rimInset() + ", " + C.sheetShadow) : "none",
             overflow: "hidden"
           },
-          children: sheetOpen ? panelEl : [panelShadowEl, panelEl]
-        })
+          // inside the curtain the SHEET is the glass (it has no opacity of its own,
+          // so its backdrop-filter samples the page): no second twin here.
+          // The grip is the curtain's own bottom edge: drag it to set the height.
+          children: sheetOpen ? [panelEl, sheetGripEl] : [panelShadowEl, panelEl]
+        })]
       });
 
       return react_dom.createPortal(
         react_jsx_runtime.jsx(ErrorBoundary, {
-          children: [sheetShellEl, edgeEl, topHandleEl, pinnedEl, hoverEl, rowMenuEl]
+          // panelGlassTwinEl sits OUTSIDE the clipping wrapper on purpose: it is
+          // the only place a backdrop-filter can sample the page without dragging
+          // the docked panel under the conversation
+          children: [panelGlassTwinEl, sheetShellEl, edgeEl, topHandleEl, pinnedEl, hoverEl, rowMenuEl]
         }),
         document.body
       );
@@ -7463,7 +8349,16 @@ window.__ModuleLoader__.load({
         ghost: false,
         // what pinning and the row menu need to act on this very row
         key: n.key,
-        idx: n.idx
+        idx: n.idx,
+        level: n.level || 1,
+        kind: "row",
+        // "copy this section" is only offered when there IS a section below it:
+        // for a heading with no sub-headings the entry would copy nothing but the
+        // heading itself, which is what "copy heading" already does.
+        hasKids: !!(n.children && n.children.length),
+        // Built only if the reader actually picks "copy this section": walking a
+        // subtree on every row of every render would be wasted work on a long log.
+        mdOf: function () { return markdownOfNode(n).join("\n"); }
       };
       var rows;
       if (wide) {
@@ -7532,6 +8427,69 @@ window.__ModuleLoader__.load({
       // round backdrop appears, so the two boxes used to sit flush against each other
       // (and on a long row the highlight ran underneath the button). This layer stops
       // END_ZONE short of that edge, leaving a clear gap.
+      // G: a hairline guide at this row's own indent, so H2/H3 read as children
+      // without moving the text. Only rows below H1 carry one; the guide sits just
+      // left of where the row's text starts.
+      // The guide column depends on the LEVEL only. It must not share the text's
+      // base inset: that inset differs for rows with children (2/4px) and without
+      // (6/8px), which put rows of the same level 4px apart and made the lines
+      // visibly ragged.
+      var guideStep = wide ? 16 : 12;
+      var guideOrigin = (wide ? 8 : 6) + MARK_INSET;
+      if (n.level > 1) {
+        rows.unshift(react_jsx_runtime.jsx("div", {
+          "data-dqt-guide": "1",
+          style: {
+            position: "absolute",
+            left: guideOrigin + (n.level - 2) * guideStep,
+            top: 0,
+            bottom: 0,
+            width: 1,
+            background: C.panelBorder,
+            pointerEvents: "none",
+            // the row leans in on hover; the guide column must not, or the line
+            // visibly slides sideways every time the pointer crosses a row
+            transition: "transform 0.15s ease"
+          }
+        }, uid + "-gd"));
+      }
+      // B: the bookmark. A ribbon, not a dot: a tab whose left edge is flush with
+      // the row's left margin and whose right edge is cut inwards to a point — the
+      // shape of a marker sticking out of the page, so it reads as "saved" rather
+      // than as a bullet.
+      //
+      // ALWAYS RENDERED, faded by opacity: a layer that is created and destroyed pops
+      // in and out, and saving a place is exactly the kind of small action that should
+      // breathe (everything else in this panel fades).
+      //
+      // The colour is a concrete hex taken from the theme table, not a `var()`:
+      // an SVG fill attribute silently rejects a var and paints black, and a colour
+      // that has to be resolved by the compositor inside a clipped layer is one more
+      // chance for that to happen again.
+      var marked = !!(extra && extra.isMarked && extra.isMarked(n.key, n.idx));
+      rows.unshift(react_jsx_runtime.jsx("div", {
+        "data-dqt-mark": marked ? "1" : undefined,
+        style: {
+          position: "absolute",
+          // Inside the row's own box on purpose: the row clips its content (it
+          // needs `overflow: hidden` for the title's ellipsis), so a ribbon hung
+          // outside it was cut down to a sliver. The row itself is pulled left
+          // instead (see marginLeft below), which is what puts this at the panel
+          // edge while still being painted by the row.
+          left: 0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          width: MARK_W,
+          height: 12,
+          background: (extra && extra.markColor) || C.accent,
+          // flat on the panel side, a concave point cut into the other side
+          clipPath: "polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%)",
+          WebkitClipPath: "polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%)",
+          opacity: marked ? 1 : 0,
+          transition: "opacity 0.24s ease",
+          pointerEvents: "none"
+        }
+      }, uid + "-mk"));
       rows.unshift(react_jsx_runtime.jsx("div", {
         "data-dqt-hl": "1",
         style: {
@@ -7555,6 +8513,11 @@ window.__ModuleLoader__.load({
             if (hl) hl.style.background = C.hover;
             var b = e.currentTarget.querySelector("[data-dqt-end]");
             if (b) b.style.opacity = "1";
+            // I: the row leans in by one pixel — enough to feel alive, small enough
+            // that the text never looks like it jumped
+            e.currentTarget.style.transform = "translateX(1px)";
+            var gd = e.currentTarget.querySelector("[data-dqt-guide]");
+            if (gd) gd.style.transform = "translateX(-1px)";
             if (extra && extra.hoverStart) extra.hoverStart(hoverInfo, e.currentTarget);
           },
           onMouseLeave: function (e) {
@@ -7562,6 +8525,9 @@ window.__ModuleLoader__.load({
             if (hl) hl.style.background = "transparent";
             var b = e.currentTarget.querySelector("[data-dqt-end]");
             if (b) b.style.opacity = "0";
+            e.currentTarget.style.transform = "translateX(0)";
+            var gd2 = e.currentTarget.querySelector("[data-dqt-guide]");
+            if (gd2) gd2.style.transform = "translateX(0)";
             if (extra && extra.hoverEnd) extra.hoverEnd();
           },
           onContextMenu: function (e) {
@@ -7578,10 +8544,20 @@ window.__ModuleLoader__.load({
             position: "relative",
             padding: dense ? (wide ? "1px 8px" : "0px 6px") : wide ? "4px 8px" : "2px 6px",
             paddingRight: END_ZONE,
-            paddingLeft: (hasChildren ? (wide ? 4 : 2) : (wide ? 8 : 6)) + (n.level - 1) * (wide ? 16 : 12),
+            // the ribbon gutter is always reserved (see MARK_INSET): saving a row must
+            // never move the text of that row, or of every other row after it
+            paddingLeft: MARK_INSET + (hasChildren ? (wide ? 4 : 2) : (wide ? 8 : 6)) + (n.level - 1) * (wide ? 16 : 12),
             margin: dense ? "0 0" : "1px 0",
+            // Reach back over the group box's left padding so the ribbon gutter sits
+            // at the surface's edge. The group clips its contents, so this is as far
+            // left as anything on a row can go — and the row is still inside the
+            // group's box, so nothing is cut.
+            marginLeft: -(wide ? 8 : 7),
             borderRadius: 6,
             cursor: "pointer",
+            // I: a 1px nudge on hover (no reflow — transform only), plus the panel's
+            // own background transition so a light/dark switch eases instead of snapping
+            transition: "transform 0.15s ease, background-color 0.25s ease",
             fontSize: n.level <= 2 ? (wide ? 16.5 : 13) : (wide ? 15.5 : 12),
             color: n.level <= 2 ? C.text : C.muted,
             fontWeight: n.level <= 2 ? 600 : 400,
@@ -7858,6 +8834,10 @@ window.__ModuleLoader__.load({
       var lastKey = (g.msgs && g.msgs.length > 0) ? g.msgs[g.msgs.length - 1].key
         : (g.failure ? g.failure.key : "");
       return react_jsx_runtime.jsx("div", {
+        // the day strip above the list reads these two attributes on scroll: the
+        // label that has scrolled past the top edge is the one it shows
+        "data-dqt-grouplabel": "1",
+        "data-dqt-day": g.time !== undefined ? String(fmtStampOf(g.time)) : "",
         onMouseEnter: function (e) {
           var b = e.currentTarget.querySelector("[data-dqt-end]");
           if (b) b.style.opacity = "1";
@@ -7866,6 +8846,26 @@ window.__ModuleLoader__.load({
           var b = e.currentTarget.querySelector("[data-dqt-end]");
           if (b) b.style.opacity = "0";
         },
+        // The time row takes the same menu as an outline row, minus the two entries
+        // that need a single preview card / single heading (pin, copy heading).
+        // "Copy this section" here means every heading under this turn.
+        onContextMenu: function (e) {
+          if (!extra || !extra.rowMenu) return;
+          var anchorKey = replyKey || g.userKey || "";
+          extra.rowMenu(e, {
+            title: (g.time ? String(g.time) : "") + (g.userText ? "  ·  " + g.userText : ""),
+            sub: "",
+            preview: "",
+            meta: "",
+            ghost: false,
+            key: anchorKey,
+            idx: 0,
+            level: 0,
+            kind: "group",
+            canCopy: !!(g.headings && g.headings.length),
+            mdOf: function () { return markdownOfGroup(g); }
+          }, anchorKey, 0);
+        },
         style: {
           // ONE row geometry for every group header, whether or not the turn has
           // headings: same box, same 18px rhythm, same left inset, so the time
@@ -7883,15 +8883,20 @@ window.__ModuleLoader__.load({
           display: "flex",
           alignItems: "center",
           minWidth: 0,
-          // sticky: while you scroll the outline, the header of the group you are
-          // inside stays pinned at the top. It must be opaque to cover the rows
-          // scrolling underneath, so its base colour is the panel background in both
-          // states — the "current group" tint rides on its own layer inside, which
-          // can FADE (a background-image gradient cannot be transitioned).
-          position: "sticky",
-          top: 0,
-          zIndex: 2,
-          background: C.panelBg
+          // NOT sticky since the surface became translucent (0.10.0): a label that
+          // has to occlude the rows scrolling under it needs an opaque fill, and an
+          // opaque fill on a see-through panel is exactly the horizontal band that
+          // reads as a cut. Letting the label scroll away keeps ONE transparency
+          // across the whole list; the current date moved into the title bar (which
+          // is chrome, and therefore legitimately solid).
+          // The "current group" tint still rides on its own layer inside the row,
+          // which can FADE (a background-image gradient cannot be transitioned).
+          // RELATIVE, not static: that tint layer is `position:absolute; inset:0`,
+          // so it needs this row as its containing block. As a static row the tint
+          // resolved against the panel itself and washed the whole list in the
+          // accent colour for a frame (then the active group settled and it went).
+          position: "relative",
+          background: "transparent"
         },
         children: [
           react_jsx_runtime.jsx("div", {
@@ -8133,10 +9138,16 @@ window.__ModuleLoader__.load({
             borderTop: "1px solid " + (isActive ? C.groupEdgeSoft : "transparent"),
             borderRight: "1px solid " + (isActive ? C.groupEdgeSoft : "transparent"),
             borderBottom: "1px solid " + (isActive ? C.groupEdgeSoft : "transparent"),
-            borderLeft: "3px solid " + (isActive ? C.groupEdge : "transparent"),
+            // The accent bar is a LAYER, not a border: it needs to be a gradient and
+            // to fade with the rest of the box. It cannot sit in a transparent left
+            // border, though — this box carries `content-visibility: auto`, which
+            // implies `contain: paint`, and paint containment clips descendants to
+            // the PADDING box (the bar was clipped away entirely). So the 3px the
+            // border used to take is padding instead, and the bar lives inside it.
+            // Same content position: 5px bar + 2px padding == 7px padding.
+            paddingLeft: 7,
             borderRadius: 6,
             margin: dense ? "0 -5px" : "2px -5px",
-            paddingLeft: 2,
             // Long-session virtualization: every offscreen group is skipped by the
             // renderer (no layout, no paint) until it nears the viewport, while its
             // DOM stays in place — so the row queries the follow, the keyboard
@@ -8146,15 +9157,88 @@ window.__ModuleLoader__.load({
             // While a surface is ANIMATING the hold lifts the skip entirely:
             // a compositor-driven slide does not re-evaluate the skip state, so
             // an opening surface would otherwise stay blank until it lands.
+            position: "relative",
             contentVisibility: extra && extra.virtHold ? "visible" : "auto",
             containIntrinsicSize: "auto " + (dense ? 80 : 96) + "px"
           },
-          children: items
+          children: [
+            // H: the accent bar, as a layer so it can be a gradient AND fade with the
+            // rest of the box. It sits inside the 3px transparent left border, so the
+            // row geometry is identical in both states.
+            react_jsx_runtime.jsx("div", {
+              key: "g-bar",
+              style: {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                bottom: 0,
+                width: 5,
+                background: "linear-gradient(to bottom, " + C.groupEdge + ", " + C.groupEdgeSoft + ")",
+                opacity: isActive ? 1 : 0,
+                transition: "opacity 0.4s ease",
+                pointerEvents: "none"
+              }
+            })
+          ].concat(items)
         }, "g-" + gi));
       }
       return out;
     }
 
+    // A heading and everything under it, as Markdown. Only headings: this is the
+    // outline below this entry, not a transcript of the section's prose. The entry
+    // is offered only when there IS something below (see the row menu), so an empty
+    // result can never be pasted by accident.
+    function markdownOfNode(n) {
+      var out = [];
+      var lvl = Math.min(6, Math.max(1, n.level || 1));
+      var hashes = "";
+      for (var h = 0; h < lvl; h++) hashes += "#";
+      out.push(hashes + " " + (n.title || ""));
+      var kids = n.children || [];
+      for (var i = 0; i < kids.length; i++) {
+        out = out.concat(markdownOfNode(kids[i]));
+      }
+      return out;
+    }
+    // The same thing for a whole turn: every heading under one time row, in order.
+    function markdownOfGroup(g) {
+      var hs = (g && g.headings) || [];
+      var out = [];
+      for (var i = 0; i < hs.length; i++) {
+        var lvl = Math.min(6, Math.max(1, hs[i].level || 1));
+        var hashes = "";
+        for (var h = 0; h < lvl; h++) hashes += "#";
+        out.push(hashes + " " + (hs[i].title || ""));
+      }
+      return out.join("\n");
+    }
+    // Put text on the clipboard. The async API needs a secure context (the panel
+    // runs on the host page, which is loopback or https) and is unavailable on a
+    // plain-http remote visit, so the execCommand path is the fallback rather than
+    // an afterthought.
+    var copyText = function (text) {
+      try {
+        if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(String(text));
+          return true;
+        }
+      } catch (e) { /* fall through to the legacy path */ }
+      try {
+        var ta = document.createElement("textarea");
+        ta.value = String(text);
+        ta.setAttribute("readonly", "");
+        ta.style.position = "fixed";
+        ta.style.top = "-1000px";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        if (ta.select) ta.select();
+        var ok = typeof document.execCommand === "function" ? document.execCommand("copy") : false;
+        document.body.removeChild(ta);
+        return !!ok;
+      } catch (e) { return false; }
+    };
+
     // Host-facing locale namespace: the slot declares `locale: "dsh-quick-toc"`, and
     // registering BOTH tables under the same keys is what lets the panel follow the
     // host's language: `T` asks the host translation first and only falls back to the
@@ -8216,6 +9300,43 @@ window.__ModuleLoader__.load({
         return seg([["on", T("settings.on")], ["off", T("settings.off")]], on ? "on" : "off",
           function (v) { onToggle(v === "on"); });
       };
+      // Theme colour dots: the choice IS a colour, so it looks like one. Inline
+      // styles (no stylesheet dependency): a 22px dot per option, the selected
+      // one ringed. The dot shows the vivid hue; text roles use the readable
+      // solid from the same option (see ACCENTS). Labels are listed statically
+      // (like every seg row) so the dictionary check sees each key.
+      var accentDots = function (current, onPick) {
+        var pairs = [["blue", T("settings.accent.blue")], ["red", T("settings.accent.red")],
+          ["yellow", T("settings.accent.yellow")], ["green", T("settings.accent.green")],
+          ["purple", T("settings.accent.purple")], ["pink", T("settings.accent.pink")]];
+        return react_jsx_runtime.jsx("div", {
+          className: "dqt-dots",
+          role: "radiogroup",
+          "aria-label": T("settings.accent"),
+          style: { display: "flex", gap: "10px", alignItems: "center", padding: "2px" },
+          children: pairs.map(function (pair) {
+            var id = pair[0];
+            var on = current === id;
+            var dot = (ACCENTS[id] || ACCENTS.blue).dot;
+            return react_jsx_runtime.jsx("button", {
+              type: "button",
+              role: "radio",
+              "aria-checked": on,
+              title: pair[1],
+              "aria-label": pair[1],
+              disabled: !writable,
+              onClick: function () { onPick(id); },
+              className: "dqt-dot" + (on ? " dqt-dotOn" : ""),
+              style: {
+                width: "22px", height: "22px", borderRadius: "50%", padding: 0,
+                border: "none", cursor: writable ? "pointer" : "default",
+                background: dot, opacity: writable ? 1 : 0.4,
+                boxShadow: on ? "0 0 0 2px var(--dsw-alias-bg-base, #fff), 0 0 0 4px " + dot : "inset 0 0 0 1px rgba(128,128,128,0.35)"
+              }
+            }, id);
+          })
+        });
+      };
       // Percentage sliders (the panel scale and the handle position) — the same
       // control shape as the fonttune card's slider. Dragging only moves a LOCAL
       // value: the settings document is written once the pointer is released (a
@@ -8230,7 +9351,9 @@ window.__ModuleLoader__.load({
         sliderAwaiting.current[field] = pct;
         commit(field === "zoom" ? { zoom: pct / 100 }
           : field === "sheetZoom" ? { sheetZoom: pct / 100 }
-            : { handle: pct / 100 });
+            // this one is stored as the 0..100 it reads as, not as a ratio
+            : field === "glassStrength" ? { glassStrength: pct }
+              : { handle: pct / 100 });
       };
       react.useEffect(function () {
         var a = sliderAwaiting.current;
@@ -8238,8 +9361,9 @@ window.__ModuleLoader__.load({
         if (a.zoom !== undefined && Math.round(prefs.zoom * 100) === a.zoom) { delete a.zoom; settled = true; }
         if (a.sheetZoom !== undefined && Math.round(prefs.sheetZoom * 100) === a.sheetZoom) { delete a.sheetZoom; settled = true; }
         if (a.handle !== undefined && Math.round(prefs.handle * 100) === a.handle) { delete a.handle; settled = true; }
+        if (a.glassStrength !== undefined && Math.round(prefs.glassStrength) === a.glassStrength) { delete a.glassStrength; settled = true; }
         if (settled) setSliderDrag(null);
-      }, [prefs.zoom, prefs.sheetZoom, prefs.handle]);
+      }, [prefs.zoom, prefs.sheetZoom, prefs.handle, prefs.glassStrength]);
       react.useEffect(function () {
         if (sliderDrag === null) return undefined;
         var release = function () {
@@ -8291,6 +9415,7 @@ window.__ModuleLoader__.load({
       var zoomControl = sliderCtl("zoom", "settings.zoom", 50, 200, 5, Math.round(prefs.zoom * 100));
       var sheetZoomControl = sliderCtl("sheetZoom", "settings.sheetZoom", 50, 200, 5, Math.round(prefs.sheetZoom * 100));
       var handleControl = sliderCtl("handle", "settings.handle", 0, 100, 1, Math.round(prefs.handle * 100));
+      var glassStrengthControl = sliderCtl("glassStrength", "settings.glassStrength", 0, 100, 5, clampPct(prefs.glassStrength, 60));
       var field = function (key, label, hint, control, inline, last) {
         var overridden = Object.prototype.hasOwnProperty.call(user, key);
         var reset = overridden ? react_jsx_runtime.jsx("button", {
@@ -8353,6 +9478,12 @@ window.__ModuleLoader__.load({
         field("density", T("settings.density"), "",
           seg([["comfy", T("settings.density.comfy")], ["compact", T("settings.density.compact")]], prefs.density,
             function (v) { commit({ density: v }); }), true),
+        field("accent", T("settings.accent"), "",
+          accentDots(prefs.accent, function (v) { commit({ accent: v }); }), true),
+        field("glass", T("settings.glass"),
+          T("settings.glass.tip") + (autoGlassOff ? " " + T("settings.glass.autoOff") : ""),
+          onoff(prefs.glass, function (v) { commit({ glass: v }); }), true),
+        field("glassStrength", T("settings.glassStrength"), T("settings.glassStrength.tip"), glassStrengthControl, false),
         field("zoom", T("settings.zoom"), T("settings.zoom.tip"), zoomControl, false),
         field("sheetZoom", T("settings.sheetZoom"), T("settings.sheetZoom.tip"), sheetZoomControl, false),
         field("handle", T("settings.handle"), T("settings.handle.tip"), handleControl, false),
@@ -8697,6 +9828,10 @@ window.__ModuleLoader__.load({
     exports.name = "dsh-quick-toc"; // runner attributes slot entries to this registrant
     exports.apply = apply;
     exports.inject = inject;
+    // Which build the page actually loaded. A stale client bundle looks exactly
+    // like a broken feature, so this one string settles it in a single look:
+    // type __dqtBuild in the console.
+    try { if (typeof window !== "undefined") window.__dqtBuild = "0.10.0-glass-card"; } catch (e) {}
 
     // inject the small keyframe + panel-scrollbar stylesheet once
     (function () {
@@ -8716,7 +9851,9 @@ window.__ModuleLoader__.load({
         // card that is ADOPTED from the hover card (it is already on screen, so it must
         // not re-play the entrance and blink).
         ".dqt-hover{animation:dqt-fade-in 0.12s linear both}" +
-        ".dqt-hover-static{animation:none}" +
+        // the bookmark view is a different list riding on top of the outline: it eases
+        // in rather than appearing between two frames
+        ".dqt-marks-overlay{animation:dqt-fade-in 0.16s linear both}" +        ".dqt-hover-static{animation:none}" +
         ".dqt-hover-closing{animation:dqt-fade-out 0.16s cubic-bezier(0.2, 0.9, 0.3, 1) both;pointer-events:none}" +
         // the outline row menu: same vocabulary as the level picker (a small pop)
         ".dqt-rowmenu{animation:dqt-pop-in 0.14s cubic-bezier(0.22, 0.9, 0.3, 1) both;will-change:transform,opacity}" +
@@ -8734,9 +9871,25 @@ window.__ModuleLoader__.load({
         // on the way out — the same vocabulary as the docked panel sliding in from its
         // edge. The clip box it lives in (see the portal) is what keeps it from being
         // seen above that line, so it reads as emerging from under the view tabs.
-        "@keyframes dqt-sheet-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}" +
-        "@keyframes dqt-sheet-out{from{transform:translateY(0)}to{transform:translateY(-100%)}}" +
-        ".dqt-sheet-open{animation:dqt-sheet-in 0.46s cubic-bezier(0.22, 0.9, 0.3, 1) both;will-change:transform}" +
+        // K: the curtain drops a hair past its resting line and settles back, so it
+        // reads as a sheet landing rather than a panel arriving at a coordinate.
+        // The overshoot is small and late (88%) so the settle is a long, soft
+        // exhale — at 70%/6px it read as a hard snap.
+        // K: the curtain drops a hair past its resting line and settles back.
+        // The settle gets its OWN timing function and a long segment (62% -> 100%):
+        // with the overshoot at 88% the return lasted 55ms and, because the drop's
+        // ease-out is fast at a segment's start, it read as a snap back into place.
+        // At the turning point the velocity is zero, so that leg eases IN as well as
+        // out — that is what makes it a settle instead of a bounce.
+        "@keyframes dqt-sheet-in{from{transform:translateY(calc(-100% - 24px));animation-timing-function:cubic-bezier(0.22, 0.9, 0.3, 1)}62%{transform:translateY(4px);animation-timing-function:cubic-bezier(0.45, 0, 0.25, 1)}to{transform:translateY(0)}}" +
+        // The retract has to clear the shadow too, not just the sheet: the sheet is
+        // 24px shorter than its shell (that strip is where the drop shadow lands),
+        // so `translateY(-100%)` parked its own shadow exactly at the shell's top
+        // edge and the state flip 40ms later blinked that band away.
+        "@keyframes dqt-sheet-out{from{transform:translateY(0)}to{transform:translateY(calc(-100% - 24px))}}" +
+        // 0.5s: the drop is 62% of it and the settle the rest, so the settle is a
+        // readable ~190ms rather than a two-frame correction
+        ".dqt-sheet-open{animation:dqt-sheet-in 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;will-change:transform}" +
         ".dqt-sheet-closing{animation:dqt-sheet-out 0.3s cubic-bezier(0.4, 0, 1, 1) both;pointer-events:none;will-change:transform}" +
         // The curtain's own drop and retract are deliberately NOT gated on
         // `prefers-reduced-motion`: with the host system's animations switched off (Windows