samagotchi 0.136.0 → 0.137.0

data/lib/samagotchi/web/public/details_motion.js

@@ -0,0 +1,74 @@
+// Collapsibles keep their shape: a steps block, a thinking block, the recap
+// and the answer fold are the same box open or closed (the bar, the border,
+// the width), and a click only changes the height. This module is the
+// motion: a click on one of their summaries animates the height between the
+// two states (Web Animations, MOTION_MS) instead of snapping, and the
+// answer fold borrows animateHeight for its bubble. Nothing moves when the
+// viewer prefers reduced motion or the element cannot animate (an old
+// engine, a spec's DOM): the click is the native toggle then.
+//
+// Only a hand's click animates: the page's own opens and closes (a turn's
+// end closing a block, a reload drawing the outline) stay instant, as they
+// are not a change the viewer watches.
+//
+// A module of its own: static JS is cached at unversioned URLs, and a new
+// export on an old module would blank the page.
+
+export const MOTION_MS = 220;
+
+// Whether +el+ can animate for this viewer.
+export function canAnimate(el) {
+  if (typeof el?.animate !== "function") return false;
+  const win = el.ownerDocument?.defaultView;
+  return !win?.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+}
+
+// Animates +el+'s height from +from+ to +to+ (px), its overflow clipped
+// meanwhile; +fade+ fades it with the height. Resolves when the animation
+// is over (or canceled).
+export async function animateHeight(el, from, to, { fade = false, ms = MOTION_MS } = {}) {
+  const at = (h, o) => (fade ? { height: `${h}px`, opacity: String(o) } : { height: `${h}px` });
+  const anim = el.animate([at(from, from ? 1 : 0), at(to, to ? 1 : 0)], { duration: ms, easing: "ease" });
+  el.style.overflow = "hidden";
+  try {
+    await anim.finished;
+  } catch {
+    // canceled: the element is where its class puts it
+  } finally {
+    el.style.overflow = "";
+  }
+}
+
+// A <details>' height closed: its summary and its own padding and borders.
+function closedHeight(details, summary) {
+  const win = details.ownerDocument?.defaultView;
+  const cs = win?.getComputedStyle?.(details);
+  const px = (v) => Number.parseFloat(v) || 0;
+  const frame = cs ? px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth) : 0;
+  return summary.offsetHeight + frame;
+}
+
+// Installs the motion on +root+ for the <details> matching +selector+ whose
+// own summary is clicked. +motion+: whether to animate +el+ (canAnimate).
+export function installDetailsMotion({ root, selector, motion = canAnimate }) {
+  const busy = new WeakSet();
+  root.addEventListener("click", (e) => {
+    const summary = e.target.closest?.("summary");
+    const details = summary?.parentElement;
+    if (!details || !details.matches?.(selector) || summary.parentElement !== details) return;
+    if (e.target.closest("a, button, input, label") !== null && e.target !== summary) return;
+    if (!motion(details)) return;
+    e.preventDefault();
+    if (busy.has(details)) return;
+    busy.add(details);
+    const done = () => busy.delete(details);
+    if (details.open) {
+      const from = details.offsetHeight;
+      animateHeight(details, from, closedHeight(details, summary)).then(() => { details.open = false; done(); });
+    } else {
+      const from = closedHeight(details, summary);
+      details.open = true;
+      animateHeight(details, from, details.offsetHeight).then(done);
+    }
+  });
+}

data/lib/samagotchi/web/public/families_view.js

@@ -8,6 +8,7 @@ import { ownerBadge, previewForCard, relativeTime } from "./format.js";
 import { familySummary, stoppedBadge, waitingBadge } from "./sessions_list.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
 import { keepFocus } from "./keep_focus.js";
+import { focusBack, modalDialog } from "./popover_modal.js";
 
 // The chip in a parent's meta row: "▸ 3 delegates · ● 1 live · 1 waiting"
 // (a waiting one in the attention colour), its tooltip the delegates by
@@ -101,7 +102,11 @@ export function syncPulses(root) {
 // @param onPick (id) a row's click
 // @param onClose () after it closed (the strip's held order catches up)
 // @param id the element's id (a chain's popover, chains.js, is another one)
-export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor, onPick, onClose = () => {} }) {
+// @param label its accessible name
+// It behaves as every popover does (popover_modal.js): a modal dialog (Tab wraps in
+// its rows; a Tab from the chip goes in), the chip's aria-expanded, Esc
+// closes it and focus goes back to the chip.
+export function createFamilyPop({ id = "familyPop", label = "Delegates", doc, win, rowsFor, anchorFor, onPick, onClose = () => {} }) {
   let el = null;
   let headId = null;
 
@@ -111,6 +116,7 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     el.id = id;
     el.className = "family-pop";
     el.hidden = true;
+    modalDialog(el, { label, isOpen: () => headId != null, doc });
     el.addEventListener("click", (e) => {
       const row = e.target?.closest?.(".family-row[data-id]");
       if (row) onPick(row.dataset.id);
@@ -155,13 +161,18 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     draw();
   }
 
-  function close() {
+  // Focus that was in it (or +refocus+: Esc) goes back to the chip as
+  // drawn after onClose (a held strip catches up).
+  function close({ refocus = false } = {}) {
     if (!headId) return;
-    anchorFor(headId)?.setAttribute("aria-expanded", "false");
+    const back = focusBack(el, { refocus, doc });
+    const id = headId;
+    anchorFor(id)?.setAttribute("aria-expanded", "false");
     headId = null;
     el.hidden = true;
     render(nothing, el);
     onClose();
+    back(anchorFor(id));
   }
 
   return {
@@ -181,12 +192,10 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     // capture phase): true when it did.
     onKeydown(e) {
       if (!headId || e.key !== "Escape") return false;
-      const id = headId;
       e.preventDefault();
       e.stopImmediatePropagation();
       e.stopPropagation();
-      close();
-      anchorFor(id)?.focus(); // the chip as drawn after close() (a held strip catches up)
+      close({ refocus: true });
       return true;
     },
     // A pointer down outside it and its chip closes it.

data/lib/samagotchi/web/public/index.html

@@ -57,24 +57,25 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 /* A generation opens its answer bubble empty: hidden until text streams (the thinking box shows progress meanwhile). */
 .bubble.output.streaming:empty{display:none}
 /* The answer's pop: the promoted bubble is held at the narration box's height (inline max-height, scrolled to its tail) until the rendered markdown lands, then grows to its content while the content fades in; both classes go 400 ms later. */
-/* A long answer folded by hand (answer_fold.js): the row is the bubble's sibling just before it, styled as a closed turn's steps, reading the answer's first line and size; folded, the bubble is hidden; unfolded, the row is the bubble's header. */
+/* A long answer folded by hand (answer_fold.js): the row is the bubble's sibling just before it, in the bubble's own shape. Folded, the row is the answer's box closed ("▸ first line · N lines") and the bubble is hidden; unfolded, the row is that box's top edge ("▾ N lines") and the bubble its rest, the two one block. The shape never changes; a click changes the height (details_motion.js). */
 /* Folded: the bubble hidden, an answer or a delegate report (#history's: outranks .bubble.user's display). */
 #history>.bubble.folded{display:none}
-.answer-fold{display:flex;align-items:baseline;gap:0;align-self:flex-start;max-width:100%;min-width:0;margin:0;padding:3px 10px;font:inherit;font-size:12px;font-weight:500;line-height:1.4;color:var(--text-muted);text-align:left;cursor:pointer;user-select:none;background:transparent;border:1px solid transparent;border-left:3px solid var(--accent-strong);border-radius:6px;transition:background .12s ease}
-.answer-fold:hover{background:var(--bg-panel)}
+.answer-fold{display:flex;align-items:baseline;gap:0;align-self:stretch;max-width:100%;min-width:0;margin:0;padding:12px 14px;font:inherit;font-size:13px;font-weight:600;line-height:1.5;color:var(--text-muted);text-align:left;cursor:pointer;user-select:none;background:var(--bg-panel);border:1px solid var(--border);border-left:3px solid var(--accent-strong);border-radius:12px}
+.answer-fold:hover .answer-fold-size{color:var(--text-2)}
 .answer-fold:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
 .answer-fold::before{content:"▾\00a0";color:var(--accent);flex:none}
 .answer-fold.folded::before{content:"▸\00a0"}
-/* Open: the bubble's header, flush on top of it (-12px: #history's gap), its bar running on into the bubble's. */
-.answer-fold:not(.folded){margin-bottom:-12px;border-bottom-left-radius:0}
-/* A delegate report's row: where the report sits (right, the user accent; dashed when merged mid-turn). Open, the row and
-   the report share one width, so the row's bar runs on into the report's. */
-.answer-fold.report{align-self:flex-end;max-width:85%;border-left-color:var(--accent)}
+/* Open: the box's top edge (-12px: #history's gap), the bubble under it its rest. */
+.answer-fold:not(.folded){margin-bottom:-12px;padding-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
+.answer-fold:not(.folded)+.bubble{border-top:0;border-top-left-radius:0;border-top-right-radius:0;padding-top:8px}
+/* A delegate report's row: the report's box (right, its tint, the user accent; dashed when merged mid-turn), closed or
+   its top edge; a long prompt's (answer_fold.js PROMPTS, open by default) the same box. */
+.answer-fold:is(.report,.prompt){align-self:flex-end;width:85%;background:var(--accent-bg);border-left-color:var(--accent)}
 .answer-fold.report.steered{border-left-style:dashed}
-.answer-fold.report:not(.folded),.answer-fold.report:not(.folded)+.bubble.user{width:85%}
+.answer-fold:is(.report,.prompt):not(.folded)+.bubble.user{width:85%;align-items:flex-start}
 .answer-fold-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:13px}
 .answer-fold-label:empty{display:none}
-.answer-fold-size{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
+.answer-fold-size{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .12s ease}
 /* Revise stacks (revise_stack.js): a superseded version folds to its stub; the Revise row under a final answer
    (zero height: its button sits on the bubble's bottom edge, clear of the copy button, shown on hover) and a stack
    top's version chip. */
@@ -106,6 +107,17 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .stack-version:hover:not(:disabled){background:var(--bg-hover);filter:none}
 .stack-version.current{color:var(--text-muted);cursor:default}
 .stack-version-n{font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
+/* The ‹ N/M › switcher (revise_switch.js): an earlier version's answer read in the top one's place; its copy dashed, the top hidden. */
+.stack-switch{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}
+.stack-switch-btn{min-height:0;height:22px;min-width:24px;padding:0 6px;border-radius:6px;border:1px solid var(--border-strong);background:var(--bg-raised);color:var(--text-2);font:inherit;font-size:14px;line-height:20px;cursor:pointer}
+.stack-switch-btn:hover:not([aria-disabled="true"]){color:var(--text-bright);filter:none}
+.stack-switch-btn:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
+.stack-switch-btn[aria-disabled="true"]{opacity:.4;cursor:default}
+.stack-switch-n{min-width:2.6em;text-align:center}
+.stack-switch-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+@media (pointer:coarse){.stack-switch-btn{height:30px;min-width:34px;line-height:28px}}
+.bubble.output.stack-view{border-left-style:dashed}
+.stack-swapped{display:none!important}
 /* A gap divider (time_gaps.js): one centred dim line where a quiet stretch passed, never wrapped (a phone at 360 px keeps it on one line). Not a .bubble. */
 .time-gap{align-self:stretch;text-align:center;color:var(--time-gap);font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0;user-select:none}
 .turn-timing{margin-top:8px;color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums}
@@ -320,11 +332,10 @@ button.system-one-wrong:hover:not(:disabled){background:var(--bg-hover);color:va
   .activity-row>.activity-command{margin-left:0}
 }
 .bubble.thinking{border-left:3px solid var(--think);background:color-mix(in srgb,var(--think) 6%,var(--bg-panel));padding:8px 12px}
-.bubble.thinking:not([open]),.bubble.activity:not([open]){padding:3px 10px;background:transparent;border-color:transparent;align-self:flex-start;border-radius:6px;transition:background .12s ease}
-.bubble.thinking:not([open]){border-left-color:var(--think)}
+.bubble.activity:not([open]){padding:3px 10px;background:transparent;border-color:transparent;align-self:flex-start;border-radius:6px;transition:background .12s ease}
 .bubble.activity:not([open]){border-left-color:var(--accent)}
-.bubble.thinking:not([open]):hover,.bubble.activity:not([open]):hover{background:var(--bg-panel)}
-.bubble.thinking:not([open])>summary,.bubble.activity:not([open])>summary{font-size:12px;font-weight:500}
+.bubble.activity:not([open]):hover{background:var(--bg-panel)}
+.bubble.activity:not([open])>summary{font-size:12px;font-weight:500}
 .bubble.thinking>summary{cursor:pointer;color:var(--text-muted);font-size:13px;font-weight:600;font-style:italic;user-select:none;list-style:none}
 .bubble.thinking>summary::-webkit-details-marker{display:none}
 .bubble.thinking>summary::before{content:"▸ ";color:var(--think)}
@@ -336,9 +347,7 @@ button.system-one-wrong:hover:not(:disabled){background:var(--bg-hover);color:va
 .turn-work>summary::-webkit-details-marker{display:none}
 .turn-work>summary::before{content:"▸ ";color:var(--accent)}
 .turn-work[open]>summary::before{content:"▾ "}
-.turn-work:not([open]){padding:3px 10px;background:transparent;border-color:transparent;border-left-color:var(--accent);align-self:flex-start;border-radius:6px;transition:background .12s ease}
-.turn-work:not([open]):hover{background:var(--bg-panel)}
-.turn-work:not([open])>summary{font-size:12px;font-weight:500}
+/* Closed, a block keeps its box (the bar, the border, the width): a click changes its height only (details_motion.js); thinking and the recap the same. */
 /* A step's body (thinking, narration, rows, cards) sits --step-indent right of its summary, so the thinking
    chevron and the row marks share one column under the step's own chevron. The summary takes it back with a
    negative margin: a child's own margin shorthand can't undo the padding. */
@@ -621,6 +630,8 @@ button.system-one-wrong:hover:not(:disabled){background:var(--bg-hover);color:va
 .bubble.output.markdown .code-wrap>pre,.bubble.user>.user-message.markdown .code-wrap>pre{margin:0}
 .code-wrap>.copy-btn{top:5px;right:5px}
 @media (hover:none){.copy-btn{opacity:.55}}
+/* Where the code button always shows (touch) or a phone's narrow block, the code starts under it: a strip above the first line holds the button (a line as wide as the block, or one that scrolls, would run under it). */
+@media (max-width:600px),(hover:none){.bubble.output.markdown .code-wrap>pre,.bubble.user>.user-message.markdown .code-wrap>pre{padding-top:32px}}
 /* The dock is the composer card (composer.css .composer-card): the text field, a toolbar row, the info bar as its footer. */
 #dock{flex-shrink:0;margin:0 12px 12px}
 /* In a session the card floats over the history, so the glass blurs it; the history's bottom padding follows the card (--dock-h, set from dock_reserve.js). */
@@ -666,7 +677,7 @@ body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 32px)}
 body:not(.has-session) #composer .actions-col{flex-wrap:nowrap}
 body:not(.has-session) #composer .actions-col .model-pick{flex:0 100000 auto;min-width:min(84px,20vw)}
 body:not(.has-session) #composer .actions-col .llmctx-new{flex:0 1 auto;min-width:40px}
-#composer .actions-col .model-pick:hover,#composer .actions-col .model-pick[aria-expanded="true"]{filter:none;background:color-mix(in srgb,var(--bg-hover) 75%,transparent);color:var(--text-2)}
+#composer .actions-col .model-pick:hover{filter:none}#composer .actions-col .model-pick[aria-expanded="true"]{background:color-mix(in srgb,var(--bg-hover) 75%,transparent);color:var(--text-2)}@media(hover:hover){#composer .actions-col .model-pick:hover{background:color-mix(in srgb,var(--bg-hover) 75%,transparent);color:var(--text-2)}}
 #composer .actions-col .model-pick[hidden],body.has-session #composer .actions-col .model-pick{display:none}
 .model-pick-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #composer .actions-col .model-pick.unavailable .model-pick-name{color:var(--text-faint)}
@@ -677,7 +688,7 @@ body.has-session.fresh-link #composer .actions-col .model-pick:not([hidden]){dis
 @media(max-width:600px){body.has-session.fresh-link #composer .actions-col .model-pick:not([hidden]){max-width:100px}}
 /* The new session's override chips (start_page.js: what the ⚙ panel has set, only then), right of the key hint next to ⚙: accent; a click opens the panel. A phone has ⚙'s dot instead (below). */
 #composer .actions-col .llmctx-new{order:1;flex:0 1 auto;min-width:0;max-width:min(30%,220px);height:24px;min-height:24px;line-height:22px;padding:0 6px;border-radius:6px;border:1px solid var(--accent-border);background:transparent;color:var(--accent);font-size:11px;font-weight:400;overflow:hidden;text-overflow:ellipsis}
-#composer .actions-col .llmctx-new:hover{filter:none;color:var(--accent);background:var(--accent-bg)}
+#composer .actions-col .llmctx-new:hover{filter:none}#composer .actions-col .llmctx-new[aria-expanded="true"]{color:var(--accent);background:var(--accent-bg)}@media(hover:hover){#composer .actions-col .llmctx-new:hover{color:var(--accent);background:var(--accent-bg)}}
 #composer .actions-col .llmctx-new[hidden],body.has-session #composer .actions-col .llmctx-new{display:none}
 /* Phones (the key hint is gone there): still one row, with tighter gaps; the override chips go (⚙'s dot and label say what is set). */
 @media(max-width:600px){#composer .actions-col .model-pick{flex:0 1 auto;min-width:0;max-width:100%}body:not(.has-session) #composer .actions-col{gap:4px}body:not(.has-session) #composer .actions-col .model-pick{flex-shrink:20;min-width:min(84px,20vw)}#composer .actions-col .llmctx-new{display:none}}
@@ -827,6 +838,11 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 .ts-extras>.bubble.user{max-width:none;margin:0;padding:4px 10px;font-size:13px;line-height:1.45;background:transparent;color:var(--text-2)}
 .ts-extras>.bubble.user>.copy-btn{display:none}
 .ts-extras>.bubble.user .user-message{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal}
+/* A line's markdown (a delegate report's) reads as a plain row in the clamped rows: its blocks run inline at the
+   row's own size, a space between them, rules and copy buttons gone. The prompt line shown whole keeps it. */
+:is(.ts-extras>.bubble.user,.ts-prompt:not(.full)>.bubble.user)>.user-message.markdown :is(p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,pre,table,thead,tbody,tr,th,td,.code-wrap){display:inline;margin:0;padding:0;border:0;border-radius:0;background:transparent;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;white-space:normal}
+:is(.ts-extras>.bubble.user,.ts-prompt:not(.full)>.bubble.user)>.user-message.markdown :is(p,h1,h2,h3,h4,h5,h6,li,blockquote,pre,td,th)::after{content:" "}
+:is(.ts-extras>.bubble.user,.ts-prompt:not(.full)>.bubble.user)>.user-message.markdown :is(hr,img,.copy-btn){display:none}
 /* Inside the dock's own blur a second backdrop-filter sees nothing: the cards are opaque here (as #commandList is). */
 .turn-stage .bubble.question,.turn-stage .bubble.plugin-card{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
 .turn-stage .bubble.question{background:color-mix(in srgb,var(--warn) 7%,var(--bg-panel))}
@@ -882,7 +898,7 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 body.working-set .turn-stage{container-type:inline-size}
 body.working-set .ts-live{position:relative;padding-right:264px}
 .ts-ws{--ws-line:18px;position:absolute;top:0;right:0;bottom:0;width:248px;box-sizing:border-box;padding:0 4px 0 12px;border-left:1px solid var(--ws-rule);border-radius:0 6px 6px 0;display:flex;flex-direction:column;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:var(--ws-line);color:var(--text-2);cursor:pointer}
-.ts-ws:hover{background:var(--bg-hover)}
+@media(hover:hover){.ts-ws:hover{background:var(--bg-hover)}}
 .ts-ws:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
 .ws-head{flex:none;display:flex;align-items:center;gap:6px;min-width:0;height:var(--ws-line);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ws-muted);white-space:nowrap}
 .ws-count{margin-right:auto;font-weight:400;letter-spacing:0;color:var(--ws-faint);font-variant-numeric:tabular-nums}
@@ -949,7 +965,7 @@ body.working-set .turn-stage.waiting .ts-live{min-height:calc(var(--ts-live-h) +
 body.working-set .turn-stage.held-wait:not(.waiting) .ts-live{min-height:max(calc(var(--ts-live-h) + var(--ws-row-h,0px)),var(--live-held,0px))}
 /* A finished turn's footprint, under its closed block (working_set_view.js): one faint line; a click opens its list. */
 .ws-foot{display:block;width:fit-content;max-width:calc(100% - 13px);box-sizing:border-box;margin:-4px 0 0 13px;padding:0 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:18px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
-.ws-foot:hover{color:var(--text-muted);background:var(--bg-hover)}
+@media(hover:hover){.ws-foot:hover{color:var(--text-muted);background:var(--bg-hover)}}
 .ws-foot:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
 .ws-foot .w{font-family:ui-sans-serif,system-ui,sans-serif}
 .ws-foot .sep{color:var(--border-strong)}
@@ -961,25 +977,25 @@ body.working-set .turn-stage.held-wait:not(.waiting) .ts-live{min-height:max(cal
 .ws-step{display:inline-block;padding:0 4px;border:0;border-radius:4px;background:var(--badge-bg);font-family:ui-sans-serif,system-ui,sans-serif;font-size:10.5px;line-height:14px;font-weight:400;color:var(--ws-faint);font-variant-numeric:tabular-nums;vertical-align:1px}
 .ws-step.p{color:var(--think-text)}
 button.ws-step{cursor:pointer}
-button.ws-step:hover:not(:disabled){filter:none;background:var(--accent-bg);color:var(--accent)}
+button.ws-step:hover:not(:disabled){filter:none}@media(hover:hover){button.ws-step:hover:not(:disabled){background:var(--accent-bg);color:var(--accent)}}
 /* The expanded view (a chip popover; a bottom sheet on a phone). */
 .ws-popover{gap:0}
 .ws-popover .ctx-pop-head{align-items:center;flex-wrap:wrap;margin-bottom:4px}
 .ws-scope{display:inline-flex;gap:2px}
 .ws-scope button{padding:1px 8px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--text-muted);font-size:11px;line-height:16px}
 .ws-scope button.on{color:var(--text-2);border-color:var(--border-strong);background:var(--bg-raised)}
-.ws-scope button:hover:not(:disabled){filter:none;color:var(--text)}
+.ws-scope button:hover:not(:disabled){filter:none}@media(hover:hover){.ws-scope button:hover:not(:disabled){color:var(--text)}}
 .ws-popover .ctx-pop-meta{margin-top:6px;color:var(--ws-muted)}
 .ws-popover .ws-hint{margin-top:10px;color:var(--ws-faint)}
 .ws-row{display:flex;align-items:center;gap:8px;width:100%;min-width:0;height:28px;box-sizing:border-box;padding:0 6px;border:0;border-radius:6px;background:transparent;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:28px;color:var(--text-2);text-align:left}
-.ws-row:hover{background:var(--bg-hover)}
-button.ws-row:hover:not(:disabled){filter:none;background:var(--bg-hover)}
+@media(hover:hover){.ws-row:hover{background:var(--bg-hover)}}
+button.ws-row:hover:not(:disabled){filter:none}@media(hover:hover){button.ws-row:hover:not(:disabled){background:var(--bg-hover)}}
 .ws-row .k{flex:none;width:12px;text-align:center;color:var(--ws-faint)}
 .ws-row.memory .k{color:var(--think-text)}
 .ws-row.url .k{color:var(--accent)}
 .ws-row .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
 .ws-row a.t{text-decoration:none}
-.ws-row a.t:hover{text-decoration:underline}
+@media(hover:hover){.ws-row a.t:hover{text-decoration:underline}}
 .ws-row .e{flex:none;color:var(--accent);font-weight:600}
 .ws-row .n{flex:none;color:var(--ws-faint)}
 .ws-row .st{flex:0 4 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;color:var(--ws-faint)}
@@ -996,12 +1012,12 @@ button.ws-row:hover:not(:disabled){filter:none;background:var(--bg-hover)}
 .ws-row:hover .ws-act,.ws-row:focus-within .ws-act,.ws-ghead:hover .ws-act,.ws-ghead:focus-within .ws-act,.ws-row.pending .ws-act{opacity:1}
 @media (hover:none){.ws-act{opacity:1}}
 .ws-act-b{flex:none;padding:0 6px;border:1px solid var(--ws-act-border);border-radius:4px;background:transparent;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;font-weight:400;line-height:16px;color:var(--ws-muted);cursor:pointer}
-.ws-act-b:hover:not(:disabled){filter:none;color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}
+.ws-act-b:hover:not(:disabled){filter:none}@media(hover:hover){.ws-act-b:hover:not(:disabled){color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}}
 .ws-act-b:disabled{opacity:.5;cursor:default}
 .ws-ghead{display:flex;align-items:center;gap:4px}
 .ws-ghead>.ws-group-head{flex:1;min-width:0}
 .ws-row.pending{border:1px dashed var(--warn-border);background:var(--warn-bg)}
-.ws-row.pending:hover{background:var(--warn-bg)}
+@media(hover:hover){.ws-row.pending:hover{background:var(--warn-bg)}}
 /* A pending row: its pill and undo take the tokens' and the step tag's room, so the name stays readable. */
 .ws-row.pending .tk,.ws-row.pending .ws-step{display:none}
 .ws-pend{flex:none;padding:0 6px;border:1px solid var(--warn-border);border-radius:999px;background:var(--warn-bg);color:var(--warn-text);font-family:ui-sans-serif,system-ui,sans-serif;font-size:10.5px;line-height:15px;white-space:nowrap}
@@ -1030,7 +1046,7 @@ button.ws-row:hover:not(:disabled){filter:none;background:var(--bg-hover)}
 .ws-popover.sheet .ws-add .ws-act-b{line-height:32px;padding:0 14px;font-size:12.5px;border-radius:6px}
 /* The session bar's chip, in the mem chip's place: a dot (the accent: changed since its list was last opened) and the count. */
 #infoBar .meta .ws-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border:1px solid transparent;cursor:pointer;font-family:inherit;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
-#infoBar .meta .ws-chip:hover:not(:disabled){filter:none;color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#infoBar .meta .ws-chip:hover:not(:disabled){filter:none}#infoBar .meta .ws-chip[aria-expanded="true"]{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}@media(hover:hover){#infoBar .meta .ws-chip:hover:not(:disabled){color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}}
 .ws-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);opacity:.6}
 #infoBar .meta .ws-chip.empty{color:var(--text-muted);background:transparent;border-color:var(--border)}
 .ws-chip.changed .ws-dot{background:var(--accent);opacity:1;box-shadow:0 0 0 2px var(--accent-ring)}
@@ -1096,7 +1112,7 @@ button.ws-row:hover:not(:disabled){filter:none;background:var(--bg-hover)}
 #infoBar .meta .worker-restart:disabled{opacity:.7;cursor:default}
 #infoBar button{padding:4px 12px;border-radius:8px;font-size:12px;font-weight:600}
 #infoBar #infoStopBtn{background:var(--bg-raised);color:var(--warn-text);border:1px solid var(--border-strong)}
-#infoBar #infoStopBtn:hover{background:var(--warn-bg);border-color:var(--warn-border)}
+@media(hover:hover){#infoBar #infoStopBtn:hover{background:var(--warn-bg);border-color:var(--warn-border)}}
 #infoBar #infoArchiveBtn{background:transparent;color:var(--text-muted);border:1px solid var(--border-strong)}
 #infoBar #infoArchiveBtn:hover{color:var(--text);background:var(--bg-hover)}
 #infoBar #infoDeleteBtn{background:transparent;color:var(--text-muted);border:1px solid transparent}
@@ -1109,7 +1125,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 #infoBar #infoCancelBtn:hover:not(:disabled){color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
 /* The ⚙ chip (settings_chip.js): a model-like chip that opens the session's settings panel; accent when the session set its own (capped like the model chip in the min-width:601px rule above, the full text in its tooltip; a phone shows ⚙ with a dot). */
 #infoBar .meta .settings-chip{position:relative;padding:2px 6px;border-radius:6px;font-size:11px;font-weight:400;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
-#infoBar .meta .settings-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#infoBar .meta .settings-chip[aria-expanded="true"]{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}@media(hover:hover){#infoBar .meta .settings-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}}
 #infoBar .meta .settings-chip.own{color:var(--accent);border-color:var(--accent-border)}
 /* A chip's icon (⚙ here, the start page's own SVG from composer.css): the glyph stays the text, the mask draws it. */
 #infoBar .meta :is(.settings-chip,.tools-chip){display:inline-flex;align-items:center;gap:4px}
@@ -1134,7 +1150,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .ctx-add-input{width:100%;box-sizing:border-box;padding:6px 8px;border-radius:7px;border:1px solid var(--border-strong);background:var(--bg-inset);color:var(--text);font:inherit;font-size:13px;line-height:1.4}
 .ctx-add-input:focus{outline:none;border-color:var(--accent-border)}
 #infoBar .ctx-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font:600 11px/1.5 ui-monospace,monospace;background:color-mix(in srgb,var(--bg-hover) 55%,transparent);color:var(--text-3);border:1px solid var(--border-strong);white-space:nowrap}
-#infoBar .ctx-chip:hover,#infoBar .ctx-chip.open{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#infoBar .ctx-chip.open{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}@media(hover:hover){#infoBar .ctx-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}}
 #infoBar .ctx-chip.empty{color:var(--text-faint);border-style:dashed}
 #infoBar .ctx-chip.error{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 55%,transparent);background:var(--danger-bg-dim)}
 .ctx-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--accent-ring)}
@@ -1142,7 +1158,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .ctx-popover[hidden]{display:none}
 /* The participants chip (info bar) and its panel (participants_panel.js). */
 #infoBar .meta .participants-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border:1px solid transparent;cursor:pointer;font-family:inherit;font-weight:400;white-space:nowrap}
-#infoBar .meta .participants-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#infoBar .meta .participants-chip[aria-expanded="true"]{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}@media(hover:hover){#infoBar .meta .participants-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}}
 #infoBar .meta .participants-chip.none{color:var(--text-muted);background:transparent;border-color:var(--border)}
 #infoBar .meta .participants-chip.none .pc-dot{display:none}
 .participants-chip .pc-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint)}
@@ -1161,7 +1177,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .pp-capped{color:var(--warn-text);font-weight:600}
 .pp-actions{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:4px}
 .pp-actions button,.pp-invite button,.pp-link button,.pp-foot button{padding:3px 9px;border-radius:6px;font-size:12px;background:var(--bg-raised);color:var(--text-2);border:1px solid var(--border-strong);cursor:pointer}
-.pp-actions button:hover,.pp-invite button:hover,.pp-link button:hover,.pp-foot button:hover{color:var(--text-hover)}
+@media(hover:hover){.pp-actions button:hover,.pp-invite button:hover,.pp-link button:hover,.pp-foot button:hover{color:var(--text-hover)}}
 .pp-actions .pp-revoke{color:var(--danger-text)}
 .pp-cap-form{display:flex;gap:4px}
 .pp-cap-form input{width:58px}
@@ -1203,8 +1219,8 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .sset-back{margin:0 2px 0 -6px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:var(--text-muted);font-size:18px;line-height:1}
 .sset-back:hover{filter:none}
 .start-settings.sheet{border-radius:14px;padding:14px 16px}
-/* Tints only where a pointer hovers: on a touch screen a tapped control would keep it (the ⚙/🧰 panels' rows and links;
-   older popovers' :hover rules aren't gated yet). */
+/* Tints only where a pointer hovers: on a touch screen a tapped control would keep it. Every popover's (chip_popover.js)
+   controls and its opener's :hover tint sit in @media(hover:hover); an open opener shows it by aria-expanded instead. */
 @media(hover:hover){.sset-seg button:hover{color:var(--text);border-color:var(--accent-border)}.sset-link:hover{background:var(--accent-bg)}.sset-back:hover{color:var(--text);background:var(--bg-hover)}.st-row:hover{color:var(--text);background:var(--bg-hover)}}
 @media(max-width:400px){.sset-row{flex-direction:column;gap:4px}.sset-label{flex:none;line-height:1.4}.sset-ctx-more,.sset-ctx-form{margin-left:0}}
 @media(pointer:coarse){.sset-seg button{height:36px;min-height:36px;line-height:34px;padding:0 12px;font-size:13px}.sset-link,.sset-back{min-height:36px}.sset-label{line-height:36px}}
@@ -1232,7 +1248,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .participants-popover.sheet .pp-qr{display:none}
 .pp-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding-top:4px}
 .pp-view{font-size:12px;color:var(--accent);text-decoration:none}
-.pp-view:hover{text-decoration:underline}
+@media(hover:hover){.pp-view:hover{text-decoration:underline}}
 /* The Home Screen app's notifications sheet (push_devices.js): the bell opens it; a bottom sheet on a phone. */
 .push-devices .ctx-pop-head strong{font-family:inherit}
 .push-devices.sheet{border-radius:14px;padding:14px 16px;font-size:14px}
@@ -1246,7 +1262,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .pd-error{color:var(--danger-text)}
 .pd-done{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;padding-top:6px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3)}
 .pd-remove{padding:3px 10px;border-radius:7px;font-size:12px;background:var(--bg-raised);color:var(--danger-text);border:1px solid var(--border-strong);cursor:pointer}
-.pd-remove:hover{color:var(--text-hover)}
+@media(hover:hover){.pd-remove:hover{color:var(--text-hover)}}
 .pd-switch{appearance:none;-webkit-appearance:none;position:relative;flex-shrink:0;width:34px;height:20px;margin:0;border-radius:999px;background:var(--bg-raised);border:1px solid var(--border-strong);cursor:pointer;transition:background .15s}
 .pd-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-muted);transition:transform .15s,background .15s}
 .pd-switch:checked{background:var(--accent-strong);border-color:var(--accent-strong)}
@@ -1274,9 +1290,9 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .ss-note,.ss-more{font-size:11.5px;color:var(--text-muted)}
 .ss-acts{display:flex;gap:8px;flex-wrap:wrap}
 .ss-acts button{padding:8px 12px;border-radius:8px;font-size:13px;cursor:pointer;border:1px solid var(--border-strong);background:var(--bg-raised);color:var(--text-2)}
-.ss-acts button:hover{background:var(--bg-hover);color:var(--text-hover)}
+@media(hover:hover){.ss-acts button:hover{background:var(--bg-hover);color:var(--text-hover)}}
 .ss-stop-all{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}
-.ss-stop-all:hover{background:var(--warn-border);color:var(--text-hover)}
+@media(hover:hover){.ss-stop-all:hover{background:var(--warn-border);color:var(--text-hover)}}
 .ss-cancel{background:transparent}
 .stop-sheet.sheet .ss-acts button{flex:1 1 auto;font-size:14px;padding:10px 12px}
 .ss-foot{font-size:11.5px;color:var(--text-muted);margin-top:6px}
@@ -1301,7 +1317,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 @media(max-width:600px){#updateSheet{position:fixed;inset:auto 8px 8px;width:auto;max-width:none;max-height:min(80dvh,calc(100dvh - 16px));margin:0}}
 .ctx-pop-kind{font-size:11px;color:var(--text-muted)}
 .ctx-pop-close{margin-left:auto;padding:0 6px;border:none;background:transparent;color:var(--text-muted);font-size:16px;line-height:1}
-.ctx-pop-close:hover{color:var(--text)}
+@media(hover:hover){.ctx-pop-close:hover{color:var(--text)}}
 /* A finger's × (the other sheet controls are 36-40 px): the negative margins keep the head's height. */
 @media(pointer:coarse){.ctx-pop-close{min-width:36px;min-height:36px;margin:-10px -10px -10px auto;font-size:18px}}
 .ctx-pop-why{color:var(--text)}
@@ -1312,9 +1328,9 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .ctx-pop-text{margin:0;max-height:240px;overflow:auto;padding:8px;border-radius:8px;background:var(--bg-inset);font:12px/1.45 ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;color:var(--text-2)}
 .ctx-pop-actions{display:flex;gap:8px;justify-content:flex-end}
 .ctx-pop-actions button{padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600;background:var(--bg-raised);color:var(--text-2);border:1px solid var(--border-strong)}
-.ctx-pop-actions button:hover{color:var(--text-hover)}
+@media(hover:hover){.ctx-pop-actions button:hover{color:var(--text-hover)}}
 .ctx-pop-actions .ctx-pop-detach{color:var(--text-muted);background:transparent}
-.ctx-pop-actions .ctx-pop-detach:hover{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
+@media(hover:hover){.ctx-pop-actions .ctx-pop-detach:hover{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}}
 /* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable). */
 @media(max-width:600px){
   #infoBar{flex-wrap:nowrap;align-items:center;gap:6px;padding:6px 10px 8px}
@@ -1333,6 +1349,8 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
   #infoBar .meta .children-chip{order:-1}
   /* A chain's ← → links too: the way to the other days. */
   #infoBar .meta .chain-link{order:-1}
+  /* ⚙ too (an icon here): after the model chip a long model name would push it out of sight. */
+  #infoBar .meta .settings-chip{order:-1}
   /* The chips get a second line of their own (only when there are some), scrolling sideways. */
   #infoBar:has(#contextChips:not([hidden])){flex-wrap:wrap;row-gap:4px}
   #contextChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
@@ -1385,7 +1403,7 @@ body.has-session #newBtn .brand-new{display:inline}
 .project-picker .ctx-pop-head strong{font-family:inherit}
 .project-list{display:flex;flex-direction:column;gap:6px;margin:2px 0;padding:0}
 .project-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:var(--bg-inset);color:var(--text);text-decoration:none}
-.project-row:hover{background:var(--bg-hover);color:var(--text-hover)}
+@media(hover:hover){.project-row:hover{background:var(--bg-hover);color:var(--text-hover)}}
 .project-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 .project-row[aria-current="page"]{border-color:var(--accent-border);background:var(--accent-bg)}
 .project-main{display:flex;flex:1;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
@@ -1447,7 +1465,7 @@ body.has-session #scope .scope-where{display:none}
 }
 #notifyBtn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;min-height:0;background:transparent;border:1px solid transparent;border-radius:999px;color:var(--text-muted)}
 #notifyBtn[hidden]{display:none}
-#notifyBtn:hover{color:var(--text-2);border-color:var(--border)}
+@media(hover:hover){#notifyBtn:hover{color:var(--text-2);border-color:var(--border)}}
 #notifyBtn svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
 #notifyBtn .slash{display:none}
 #notifyBtn[data-state="on"]{color:var(--accent)}
@@ -1468,7 +1486,7 @@ body.no-glass :is(#familyPop,#chainPop){background:var(--bg-panel);-webkit-backd
 /* A chain's chip (chains.js): the card is the latest link of a session chain; a click lists the other links in a popover. */
 .card .meta:has(.chain-chip){flex-wrap:wrap;row-gap:4px}
 .card .chain-chip{font-family:ui-monospace,monospace;font-size:11px;line-height:1.4;white-space:nowrap;flex-shrink:0;padding:1px 7px;border-radius:999px;border:1px solid var(--accent-border);background:var(--accent-tint);color:var(--accent);cursor:pointer}
-.card .chain-chip:hover:not(:disabled){filter:none;border-color:var(--accent);background:var(--accent-bg)}
+.card .chain-chip:hover:not(:disabled){filter:none}@media(hover:hover){.card .chain-chip:hover:not(:disabled){border-color:var(--accent);background:var(--accent-bg)}}
 .card .chain-chip[aria-expanded="true"]{background:var(--accent-bg);border-color:var(--accent)}
 .card .chain-chip.waiting{color:var(--warn-text);background:var(--warn-bg);border-color:var(--warn-border)}
 .chain-chip .cc-arrow{display:inline-block;margin-right:4px}
@@ -1491,9 +1509,9 @@ body.no-glass :is(#familyPop,#chainPop){background:var(--bg-panel);-webkit-backd
 /* A card with a family chip lets its meta row wrap: the chip goes to a line of its own when the card is narrow. */
 .card .meta:has(.family-chip){flex-wrap:wrap;row-gap:4px}
 .card .family-chip{font-family:ui-monospace,monospace;font-size:11px;line-height:1.4;white-space:nowrap;flex-shrink:0;padding:1px 7px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--text-3);cursor:pointer}
-.card .family-chip:hover:not(:disabled){filter:none;color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg)}
+.card .family-chip:hover:not(:disabled){filter:none}@media(hover:hover){.card .family-chip:hover:not(:disabled){color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg)}}
 .card .family-chip.waiting{color:var(--warn-text);background:var(--warn-bg);border-color:var(--warn-border)}
-.card .family-chip.waiting:hover:not(:disabled){color:var(--warn-bright);border-color:var(--warn);background:var(--warn-bg)}
+@media(hover:hover){.card .family-chip.waiting:hover:not(:disabled){color:var(--warn-bright);border-color:var(--warn);background:var(--warn-bg)}}
 .family-chip .fc-arrow{display:inline-block;margin-right:4px;transition:transform .15s ease}
 .family-chip[aria-expanded="true"] .fc-arrow{transform:rotate(90deg)}
 .family-chip .live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:3px;vertical-align:1px}
@@ -1501,7 +1519,7 @@ body.no-glass :is(#familyPop,#chainPop){background:var(--bg-panel);-webkit-backd
 /* The family's list: one compact row per delegate, indented per depth. */
 .family-rows{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--border);margin:2px -6px 0;padding-top:4px;cursor:default}
 .family-row{display:flex;align-items:center;border-radius:6px;padding-left:calc((var(--depth,1) - 1) * 14px)}
-.family-row:hover{background:var(--bg-hover)}
+@media(hover:hover){.family-row:hover{background:var(--bg-hover)}}
 .family-row .fr-open{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:6px;background:transparent;color:var(--text-2);border-radius:6px;font-size:12px;line-height:1.3;text-align:left}
 .family-row .fr-open:hover:not(:disabled){filter:none}
 .family-row .fr-preview{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

data/lib/samagotchi/web/public/info_bar.js

@@ -71,7 +71,7 @@ export function workingSetChipTemplate(chip) {
   const what = chip.n ? `${chip.n} item${chip.n === 1 ? "" : "s"} this session brought into context` : "nothing this session brought into context yet";
   const title = `Working set: ${what} (files, memories, URLs)${chip.changed ? ", changed since you last looked" : ""}. Open the list.`;
   const cls = `model ws-chip${chip.changed ? " changed" : ""}${chip.n ? "" : " empty"}`;
-  return html`<button type="button" class=${cls} title=${title} aria-label=${title} aria-haspopup="dialog"><span class="ws-dot" aria-hidden="true"></span>set ${chip.n}</button>`;
+  return html`<button type="button" class=${cls} title=${title} aria-label=${title} aria-haspopup="dialog" aria-expanded="false"><span class="ws-dot" aria-hidden="true"></span>set ${chip.n}</button>`;
 }
 
 // The info line for +bar+, nothing without a session (the start page hides

data/lib/samagotchi/web/public/lists_view.js

@@ -373,6 +373,7 @@ export function createListsView(deps) {
   let chainFrom = null; // the list element the open popover's chip is in
   const chainPop = createFamilyPop({
     id: "chainPop",
+    label: "Chain links",
     doc,
     win,
     rowsFor: (id) => {

data/lib/samagotchi/web/public/participants_panel.js

@@ -99,7 +99,7 @@ export function chipModel(grants, now) {
 export function chipTemplate(chip) {
   if (!chip) return nothing;
   return html`<button type="button" class=${`model participants-chip${chip.count ? "" : " none"}${chip.present ? " present" : ""}`}
-    title=${chip.title} aria-label=${chip.title} aria-haspopup="dialog"><span class="pc-dot" aria-hidden="true"></span>${chip.text}</button>`;
+    title=${chip.title} aria-label=${chip.title} aria-haspopup="dialog" aria-expanded="false"><span class="pc-dot" aria-hidden="true"></span>${chip.text}</button>`;
 }
 
 // A cap field's dollars (a leading $ allowed): {value}, {value: null} when

data/lib/samagotchi/web/public/popover_modal.js

@@ -0,0 +1,57 @@
+// What every popover does alike (chip_popover.js' shell, and the ones that
+// place themselves: context_chips.js, families_view.js' family and chain
+// lists): a modal dialog (modalDialog: aria-modal, Tab and Shift+Tab wrap
+// inside it, a Tab from outside goes in), its opener's aria-expanded, Esc
+// closes it and focus goes back to the opener (focusBack). Their :hover
+// tints are gated on (hover:hover) in index.html, so a tap on a phone
+// leaves none behind. A module of its own: its exports are new (see
+// docs/internals/web-frontend.md, "New exports go in new modules").
+//
+// Not popovers in this sense, so not modal: model_picker.js and
+// command_list.js (a combobox's listbox: the focus stays in its input),
+// ref_menu.js (a menu: arrow keys, Tab leaves it), update_sheet.js (a
+// native <dialog> shown modal: the browser holds the focus).
+
+const FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])";
+
+// The elements Tab reaches in +root+, in order (none hidden or disabled).
+export function tabStops(root) {
+  return [...root.querySelectorAll(FOCUSABLE)].filter((e) => !e.disabled && !e.closest("[hidden]") && e.tabIndex >= 0);
+}
+
+// Tab past +root+'s last stop goes to its first, Shift+Tab before the first
+// to the last; a Tab from outside (the opener kept the focus, or a redraw
+// dropped it) goes in. +e+: the Tab's keydown.
+export function holdFocus(e, root, doc = document) {
+  const stops = tabStops(root);
+  if (!stops.length) return;
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  const at = doc.activeElement;
+  let to = null;
+  if (!root.contains(at)) to = e.shiftKey ? last : first;
+  else if (e.shiftKey && at === first) to = last;
+  else if (!e.shiftKey && at === last) to = first;
+  if (!to) return;
+  e.preventDefault();
+  to.focus();
+}
+
+// +pop+ as every popover is: a dialog (named +label+) that holds the focus
+// while +isOpen()+ and on the page (aria-modal; Tab and Shift+Tab wrap inside it).
+export function modalDialog(pop, { label = null, isOpen, doc = document }) {
+  pop.setAttribute("role", "dialog");
+  pop.setAttribute("aria-modal", "true");
+  if (label) pop.setAttribute("aria-label", label);
+  doc.addEventListener("keydown", (e) => {
+    if (e.key === "Tab" && isOpen() && pop.isConnected) holdFocus(e, pop, doc);
+  });
+}
+
+// Called before +pop+ closes: whether the focus was in it (or +refocus+:
+// an Esc), and so goes back(to) its opener once it has closed.
+// @return (to) => focuses +to+ when it should and still can
+export function focusBack(pop, { refocus = false, doc = document } = {}) {
+  const had = refocus || pop.contains(doc.activeElement);
+  return (to) => { if (had && to?.isConnected) to.focus?.(); };
+}