@khanglvm/relay 0.12.0 → 0.12.2

package/docs/AGENT.md

@@ -154,7 +154,7 @@ rly show --html-file prototype.html --title "Dashboard concept" --height 600
         { "value": "a", "label": "Approach A", "description": "fast, less flexible" },
         "Approach B"                                    // plain strings work too
       ],
-      "other": true },                                  // adds a free-text "Other" option
+      "other": false },                                 // single: "Other" (free-text textarea) is ON by default — set false to remove it
     { "id": "scope", "type": "multi", "label": "Include which parts?", "options": ["api", "ui", "docs"],
       "note": true },                                   // optional free-text under the question
                                                         //   → returned as result.notes.scope

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanglvm/relay",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "Question boards with rich blocks (markdown, charts, mermaid, tables, code, diffs, video, sandboxed HTML), clickable local file-links, and element-level annotations for AI coding agents (Claude Code, Codex, …): ask users structured questions, present interactive visuals, collect inline comments, read answers as JSON — in a local browser board OR rendered INLINE inside the Claude & Codex apps as an MCP App (SEP-1865).",
   "keywords": [
     "ai-agents",

package/src/mcp-ui/board.js

@@ -159,6 +159,25 @@
     }
   }
 
+  // Platform awareness: reflect the host's surface so the board (and CSS) can
+  // adapt — a data-platform hint, a touch flag, and the host's safe-area insets
+  // applied as padding so content clears notches / home indicators on mobile.
+  function applyHostEnv() {
+    const root = document.documentElement;
+    if (host.platform === 'web' || host.platform === 'desktop' || host.platform === 'mobile') {
+      root.dataset.platform = host.platform;
+    }
+    root.classList.toggle('mcp-touch', Boolean(host.deviceCapabilities && host.deviceCapabilities.touch));
+    const sai = host.safeAreaInsets;
+    if (sai && typeof sai === 'object') {
+      const px = (n) => (Number.isFinite(n) ? n : 0) + 'px';
+      root.style.setProperty('--mcp-safe-top', px(sai.top));
+      root.style.setProperty('--mcp-safe-right', px(sai.right));
+      root.style.setProperty('--mcp-safe-bottom', px(sai.bottom));
+      root.style.setProperty('--mcp-safe-left', px(sai.left));
+    }
+  }
+
   let sizeTimer = null;
   function measureHeight() {
     return Math.max(document.documentElement.scrollHeight, document.body ? document.body.scrollHeight : 0);
@@ -230,7 +249,7 @@
           }
           return { value: String(o), label: String(o) };
         });
-        q.other = rq.other === true;
+        q.other = type === 'single' ? rq.other !== false : rq.other === true;
       }
       if (type === 'scale') {
         q.min = Number.isFinite(rq.min) ? rq.min : 1;
@@ -496,7 +515,7 @@
     }
     if (q.other) {
       otherRadio = el('input', { type: 'radio', name: q.id });
-      const text = el('input', { type: 'text', placeholder: 'your own answer…' });
+      const text = el('textarea', { class: 'otherinput', rows: '2', placeholder: 'your own answer…' });
       text.value = (state.other[q.id] && state.other[q.id].text) || '';
       otherRadio.checked = otherOn();
       const ensureOther = () => state.other[q.id] || (state.other[q.id] = { on: false, text: text.value });
@@ -529,7 +548,7 @@
     if (q.other) {
       const oth = state.other[q.id];
       const box = el('input', { type: 'checkbox' });
-      const text = el('input', { type: 'text', placeholder: 'your own answer…' });
+      const text = el('textarea', { class: 'otherinput', rows: '2', placeholder: 'your own answer…' });
       box.checked = Boolean(oth && oth.on);
       text.value = (oth && oth.text) || '';
       const sync = () => { state.other[q.id] = { on: box.checked, text: text.value }; syncOptSel(group); clearErr(q.id); };
@@ -841,11 +860,15 @@
     if (p && typeof p === 'object') {
       if ('theme' in p) host.theme = p.theme;
       if ('styles' in p) host.styles = p.styles;
+      if ('platform' in p) host.platform = p.platform;
+      if ('safeAreaInsets' in p) host.safeAreaInsets = p.safeAreaInsets;
+      if ('deviceCapabilities' in p) host.deviceCapabilities = p.deviceCapabilities;
       if (p.displayMode === 'inline' || p.displayMode === 'fullscreen' || p.displayMode === 'pip') {
         displayMode = p.displayMode;
         applyDisplayMode();
       }
       adoptHostStyles();
+      applyHostEnv();
       applyTheme();
     }
   });
@@ -870,6 +893,7 @@
     if (host.displayMode === 'fullscreen' || host.displayMode === 'pip') displayMode = host.displayMode;
     notify('ui/notifications/initialized', {});
     adoptHostStyles();
+    applyHostEnv();
     applyTheme();
     setStatus('Waiting for the board…');
     reportSize();

package/src/mcp-ui/index.html

@@ -13,7 +13,12 @@
 :root{ color-scheme: light dark; }
 html,body{ background:transparent; }
 body{ margin:0; }
-.wrap{ max-width:none; margin:0; padding:14px 16px 18px; }
+.wrap{ max-width:none; margin:0;
+  padding:
+    calc(14px + var(--mcp-safe-top, 0px))
+    calc(16px + var(--mcp-safe-right, 0px))
+    calc(18px + var(--mcp-safe-bottom, 0px))
+    calc(16px + var(--mcp-safe-left, 0px)); }
 .mcp-status{ font:13px/1.5 var(--sans, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif); color:var(--muted,#8a8580); padding:18px 16px; }
 /* post-submit: a slim one-line confirmation so the iframe collapses small */
 .mcp-done{ display:flex; align-items:center; gap:8px; padding:11px 16px; font:14px/1.4 var(--sans, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif); color:var(--fg,#1c1b19); }

package/src/mcp.js

@@ -214,17 +214,42 @@ function callTool(params) {
     const msg = err instanceof CliError ? err.message : String((err && err.message) || err);
     return { content: [{ type: 'text', text: 'relay: invalid board spec — ' + msg }], isError: true };
   }
-  const nQ = spec.questions.length;
-  const summary = nQ
-    ? `Relay board "${spec.title}" is now displayed to the user (${nQ} question${nQ === 1 ? '' : 's'}). They will fill it in and submit; their answers will be delivered back to you. Do NOT re-ask these questions in plain text — wait for the submission.`
-    : `Relay board "${spec.title}" is now displayed to the user. They can review it and acknowledge; any feedback will be delivered back to you.`;
   return {
-    content: [{ type: 'text', text: summary }],
+    content: [{ type: 'text', text: boardText(spec) }],
     structuredContent: { spec, mode: name === 'relay_show' ? 'show' : 'ask' },
     _meta: { ui: { resourceUri: BOARD_URI }, [UI_EXT]: { resourceUri: BOARD_URI } },
   };
 }
 
+// The tool-result text. Beyond announcing the board, it carries a readable
+// rendering of the questions as a GRACEFUL FALLBACK: on a surface that can't show
+// the interactive board (some mobile/remote-control views), the user can still
+// answer in chat and the model has the questions to work from. The model should
+// PREFER the rendered board (wait for the submission) and only fall back to chat
+// when the board clearly didn't render for the user.
+function boardText(spec) {
+  const nQ = spec.questions.length;
+  if (!nQ) {
+    return `Relay board "${spec.title}" is now displayed to the user. They can review it and acknowledge; any feedback will be delivered back to you.`;
+  }
+  const lines = [];
+  lines.push(`Relay board "${spec.title}" is now displayed to the user (${nQ} question${nQ === 1 ? '' : 's'}). Prefer the interactive board — wait for their submission; do NOT re-ask in plain text.`);
+  lines.push('');
+  lines.push('If the board does NOT render on the user\'s surface (e.g. some mobile / remote views) they can answer in chat — the questions are:');
+  spec.questions.forEach((q, i) => {
+    let line = `${i + 1}. [${q.id}] ${q.label} (${q.type}`;
+    if (q.required || spec.allowPartial === false) line += ', required';
+    line += ')';
+    if (Array.isArray(q.options) && q.options.length) {
+      line += ' — options: ' + q.options.map((o) => o.label || o.value).join(' | ') + (q.other ? ' | Other (free text)' : '');
+    } else if (q.type === 'scale') {
+      line += ` — ${q.min}…${q.max}`;
+    }
+    lines.push(line);
+  });
+  return lines.join('\n');
+}
+
 // ---------- stdio loop ----------
 export function runMcp() {
   // The peer closing stdout (EPIPE) is the only reason to stop writing — NOT a

package/src/spec.js

@@ -510,7 +510,10 @@ export function normalizeSpec(raw, { cwd = process.cwd() } = {}) {
       if (q.options.length < 1) {
         throw new CliError(`${where}: type "${type}" needs at least 1 option.`);
       }
-      q.other = rq.other === true;
+      // Radio (single) questions include an "Other" free-text option by default so
+      // the user is never boxed into the listed choices; opt out with other:false.
+      // Multi stays opt-in (checkbox lists are usually exhaustive on purpose).
+      q.other = type === 'single' ? rq.other !== false : rq.other === true;
     }
 
     if (type === 'scale') {
@@ -667,7 +670,7 @@ export const SPEC_SCHEMA = {
               ],
             },
           },
-          other: { type: 'boolean', default: false, description: 'single/multi: add a free-text "Other" option. Its text is returned verbatim as the value.' },
+          other: { type: 'boolean', description: 'Add a free-text "Other" option (a multi-line textarea); its text is returned verbatim as the value. Defaults ON for "single" (radio) questions so the user is never boxed in — set other:false to remove it; "multi" stays opt-in (other:true).' },
           note: { type: 'boolean', description: 'Small optional free-text field under the question (to qualify an answer). Returned separately as result.notes[questionId]. Defaults to true for "single" (radio) questions so users can comment on their pick, false for other types; set note:false to hide it on a single question.' },
           placeholder: { type: 'string', description: 'For text/textarea.' },
           default: { description: 'Pre-selected value. Shape matches the answer shape for the type.' },

package/src/ui/annotate.css

@@ -274,11 +274,15 @@
 .ann-rail-list .ann-sum-row + .ann-sum-row { border-top: 1px solid var(--border); }
 .ann-rail-list .ann-sum-row:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
 
-/* Wide screens: dock the rail beside the content instead of overlaying it. */
-@media (min-width: 1180px) {
-  .ann-rail-scrim { display: none !important; }
-  body.ann-rail-open { padding-right: 340px; }
+/* The rail always overlays the board (scrim dims, content never moves) — opening
+   it must NOT shift layout, on any width. It's reached only via the floating
+   Comments button, which flashes when a new comment lands. */
+@keyframes ann-toggle-pulse {
+  0% { transform: scale(1); }
+  35% { transform: scale(1.12); box-shadow: 0 0 0 4px var(--accent-soft); }
+  100% { transform: scale(1); }
 }
+.ann-rail-toggle.pulse { animation: ann-toggle-pulse 600ms var(--ease); border-color: var(--accent); color: var(--accent); }
 
 /* ---------- jump-to flash ---------- */
 .ann-flash { animation: ann-flash 1s var(--ease); }

package/src/ui/annotate.js

@@ -107,6 +107,9 @@
   let popOpen = false;
   let popScrollY = 0;
   let popSave = null;
+  // Frozen by the host (e.g. relay's connection-lost block): suppress every way
+  // to START a comment, so the user can't type feedback that won't be saved.
+  let disabled = false;
   let badgeTimer = 0;
   let railOpen = false;
 
@@ -364,6 +367,14 @@
     if (railOpen) closeRail();
     else openRail();
   }
+  // Briefly flash the floating Comments button (used when a comment is added so
+  // the user sees it landed, without auto-opening the rail / shifting layout).
+  function pulseToggle() {
+    if (!dom || !dom.railToggle) return;
+    dom.railToggle.classList.remove('pulse');
+    void dom.railToggle.offsetWidth; // reflow so the animation restarts
+    dom.railToggle.classList.add('pulse');
+  }
   // Sync the toggle badge + rail count with the live list; hide the whole rail
   // affordance when there are no comments.
   function refreshRailChrome() {
@@ -377,6 +388,7 @@
 
   // ---------- hover pin ----------
   function showPin(entry) {
+    if (disabled) return;
     clearTimeout(pinTimer);
     pinEntry = entry;
     const rect = entry.el.getBoundingClientRect();
@@ -483,6 +495,7 @@
   }
 
   function openPopover(info, anchorEl) {
+    if (disabled) return;
     ensureDom();
     closePopover();
     hidePin();
@@ -596,7 +609,9 @@
       }
     }
     changed();
-    openRail(); // surface the new comment in the sidebar, Outline-style
+    // Don't auto-open the rail — that shifts the board layout. Just flash the
+    // floating Comments button so the user notices, and opens it when they want.
+    pulseToggle();
   }
 
   // Append a user reply to a top-level annotation's thread (cap 50, like the
@@ -641,6 +656,7 @@
   }
 
   function maybeShowSelBtn(rootEl, baseInfo) {
+    if (disabled) return hideSelBtn();
     const sel = window.getSelection();
     if (!sel || sel.isCollapsed || !sel.rangeCount) return hideSelBtn();
     if (!rootEl.contains(sel.anchorNode) || !rootEl.contains(sel.focusNode)) return hideSelBtn();
@@ -851,11 +867,28 @@
     return popOpen;
   }
 
+  // Commit a mid-typed comment (the open popover's "Add a comment" box) as a
+  // saved annotation, then close it — so freezing the board doesn't throw away
+  // text the user was in the middle of writing. ponytail: only the main comment
+  // box is flushed, not an in-progress thread reply (the rare case).
+  function flushOpen() {
+    if (popOpen && popSave) { try { popSave(); } catch { closePopover(); } }
+  }
+
+  // Freeze/unfreeze comment creation. While disabled, no pin, selection button,
+  // or popover appears, so the user can't start feedback that won't be saved.
+  function setDisabled(v) {
+    disabled = Boolean(v);
+    // Also close the rail flushOpen() may have just opened — otherwise it covers
+    // the host's top-right "connection lost" notice.
+    if (disabled) { closePopover(); hideSelBtn(); hidePin(); closeRail(); }
+  }
+
   function renderSummary(target) {
     ensureDom();
     summaryEls.add(target);
     renderSummaryInto(target);
   }
 
-  window.RelayAnnotate = { init, register, enableTextSelection, openExternal, list, renderSummary, onBadgeRefresh, teardown, isComposing };
+  window.RelayAnnotate = { init, register, enableTextSelection, openExternal, list, renderSummary, onBadgeRefresh, teardown, isComposing, flushOpen, setDisabled };
 })();

package/src/ui/app.js

@@ -271,13 +271,15 @@
   // board's local HTTP server (server gone, port taken over, socket dropped,
   // machine slept). Autosaves then fail silently and the user keeps typing
   // answers/comments that are never persisted, then Submit fails too — all of it
-  // thrown away. When persistence is CONFIRMED lost we hard-block: disable every
-  // control and overlay an unmissable scrim with a Retry. Local `state` is never
-  // touched, so the moment the connection recovers we flush it and unblock —
-  // nothing the user typed during the outage is lost.
+  // thrown away. When persistence is CONFIRMED lost we DISABLE every control (and
+  // freeze new comments) and show a small, non-dismissable top-right notice with
+  // a Reconnect button — without blocking the page, so the user can still read
+  // and scroll. Local `state` is never touched, and a mid-typed comment is saved
+  // before the freeze, so nothing the user entered during the outage is lost; the
+  // moment the connection recovers we flush state and re-enable everything.
   let persistenceLost = false;
   let probing = false;
-  let lostOverlay = null;
+  let lostNote = null;
   let lostRetryBtn = null;
 
   // A direct, side-effect-free reachability probe. Resolves true when the local
@@ -293,46 +295,55 @@
     }
   }
 
-  function buildLostOverlay() {
-    if (lostOverlay) return lostOverlay;
-    lostRetryBtn = el('button', { class: 'lost-retry', type: 'button' }, 'Retry connection');
+  function buildLostNote() {
+    if (lostNote) return lostNote;
+    lostRetryBtn = el('button', { class: 'lost-retry', type: 'button' }, 'Reconnect');
     lostRetryBtn.addEventListener('click', retryConnection);
-    lostOverlay = el('div', { class: 'lost-overlay', role: 'alertdialog', 'aria-modal': 'true', 'aria-label': 'Connection lost' },
-      el('div', { class: 'lost-card' },
-        el('div', { class: 'lost-mark' }, '⚠'),
-        el('h2', {}, 'Connection lost — input isn’t being saved'),
-        el('p', {}, 'This board can no longer reach your agent’s session, so anything you type now won’t be saved. Editing is paused to keep you from losing work.'),
-        el('p', { class: 'lost-sub' }, 'Your input up to this point is kept in this tab. Click Retry once the agent’s session is back, or prompt the agent to reopen this board — your draft and unsaved edits will be restored.'),
-        lostRetryBtn
-      )
+    lostNote = el('div', { class: 'lost-note', role: 'status', 'aria-live': 'polite' },
+      el('span', { class: 'lost-note-dot', 'aria-hidden': 'true' }),
+      el('div', { class: 'lost-note-body' },
+        el('div', { class: 'lost-note-title' }, 'Connection lost'),
+        el('div', { class: 'lost-note-sub' }, 'Editing paused — your input is kept.')
+      ),
+      lostRetryBtn
     );
-    return lostOverlay;
+    return lostNote;
   }
 
-  // Enter the blocked state: disable controls, mount the overlay. Idempotent.
+  // Enter the blocked state: save a mid-typed comment, freeze comments, disable
+  // controls, and pin the small notice. Idempotent. Does NOT block the page —
+  // the user can still read and scroll; only editing is paused.
   function blockForLostPersistence() {
     if (persistenceLost || submitted) return;
     persistenceLost = true;
     document.documentElement.classList.add('relay-blocked');
-    // Disable every interactive control inside the form (inputs the user could
-    // otherwise keep typing into) plus Submit.
+    // Save whatever the user was typing into the comment popover BEFORE freezing
+    // it, so the in-progress comment is kept (in `state` + localStorage) instead
+    // of discarded; then stop any new comment from being started.
+    if (Annotate) {
+      if (typeof Annotate.flushOpen === 'function') { try { Annotate.flushOpen(); } catch { /* non-fatal */ } }
+      if (typeof Annotate.setDisabled === 'function') { try { Annotate.setDisabled(true); } catch { /* non-fatal */ } }
+    }
+    // Disable every interactive control inside the form. Values already entered
+    // stay in the DOM (and in `state`), so nothing typed so far is lost.
     for (const node of app.querySelectorAll('input, textarea, button, select')) {
       node.disabled = true;
     }
-    document.body.append(buildLostOverlay());
+    document.body.append(buildLostNote());
     if (saveEl) saveEl.textContent = 'connection lost — not saving';
   }
 
-  // Leave the blocked state: re-enable controls, remove the overlay, and flush
-  // whatever the user typed during the outage so it's persisted right away.
+  // Leave the blocked state: re-enable controls + comments, drop the notice, and
+  // flush whatever the user typed during the outage so it's persisted right away.
   function unblockAfterRecovery() {
     if (!persistenceLost) return;
     persistenceLost = false;
     document.documentElement.classList.remove('relay-blocked');
+    if (Annotate && typeof Annotate.setDisabled === 'function') { try { Annotate.setDisabled(false); } catch { /* non-fatal */ } }
     for (const node of app.querySelectorAll('input, textarea, button, select')) {
       node.disabled = false;
     }
-    if (lostOverlay) lostOverlay.remove();
+    if (lostNote) lostNote.remove();
     // Re-arm the heartbeat (it stops itself when it confirms loss) and persist
     // everything typed during the outage. saveDraft() updates the save label.
     startHeartbeat();
@@ -586,7 +597,7 @@
     }
     if (q.other) {
       otherRadio = el('input', { type: 'radio', name: q.id });
-      const text = el('input', { type: 'text', placeholder: 'your own answer…' });
+      const text = el('textarea', { class: 'otherinput', rows: '2', placeholder: 'your own answer…' });
       text.value = (state.other[q.id] && state.other[q.id].text) || '';
       otherRadio.checked = otherOn();
       const ensureOther = () => state.other[q.id] || (state.other[q.id] = { on: false, text: text.value });
@@ -655,7 +666,7 @@
     if (q.other) {
       const oth = state.other[q.id];
       const box = el('input', { type: 'checkbox' });
-      const text = el('input', { type: 'text', placeholder: 'your own answer…' });
+      const text = el('textarea', { class: 'otherinput', rows: '2', placeholder: 'your own answer…' });
       box.checked = Boolean(oth && oth.on);
       text.value = (oth && oth.text) || '';
       const sync = () => {

package/src/ui/style.css

@@ -211,6 +211,8 @@ input[type="text"]:focus, textarea:focus {
   box-shadow: 0 0 0 3px var(--accent-soft);
 }
 textarea { min-height: 90px; resize: vertical; }
+/* the inline "Other" free-text is a compact 2-row textarea, not a tall one */
+.otherbox .otherinput { min-height: 2.6em; padding: 8px 12px; }
 
 .qnotewrap { margin-top: 10px; }
 .qnotewrap .qnote { font-size: 0.88rem; padding: 8px 12px; min-height: 52px; resize: vertical; }
@@ -282,46 +284,35 @@ textarea { min-height: 90px; resize: vertical; }
   .scale button { width: 40px; height: 40px; }
 }
 
-/* Persistence-lost block: when the board can no longer save the user's input
+/* Persistence-lost notice: when the board can no longer save the user's input
    (server gone / port taken / machine slept) AND recovery probes have failed,
-   we disable every control and overlay this unmissable scrim so the user is
-   physically prevented from typing feedback that would be silently discarded.
-   Sits above everything (full-screen overlay z 49 / popover / rail / toast). */
-.relay-blocked #app { filter: grayscale(0.4) blur(1px); pointer-events: none; user-select: none; }
-.lost-overlay {
-  position: fixed; inset: 0; z-index: 60;
-  display: flex; align-items: center; justify-content: center;
-  padding: 24px;
-  background: color-mix(in srgb, var(--bg) 78%, transparent);
-  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
-}
-.lost-card {
-  max-width: 460px; width: 100%;
+   we disable every control (and freeze new comments) and pin this SMALL,
+   non-dismissable note top-right with a Reconnect button. It does NOT block the
+   page — the user can still read and scroll; only editing is paused. Recovery
+   re-enables everything and removes the note. */
+.lost-note {
+  position: fixed; top: 12px; right: 12px; z-index: 60;
+  display: flex; align-items: center; gap: 10px;
+  max-width: min(320px, calc(100vw - 24px));
   background: var(--card); color: var(--fg);
-  border: 1px solid var(--border-strong); border-radius: 14px;
+  border: 1px solid var(--danger); border-radius: 11px;
   box-shadow: var(--shadow-lift);
-  padding: 28px 26px; text-align: center;
-}
-.lost-card .lost-mark {
-  width: 52px; height: 52px; border-radius: 50%;
-  background: var(--danger); color: var(--danger-fg);
-  font-size: 1.6rem; line-height: 52px; margin: 0 auto 16px;
+  padding: 9px 11px;
 }
-.lost-card h2 {
-  font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em;
-  font-size: 1.3rem; margin: 0 0 10px;
-}
-.lost-card p { color: var(--fg-2); font-size: 0.92rem; line-height: 1.55; margin: 0 0 8px; }
-.lost-card .lost-sub { color: var(--muted); font-size: 0.82rem; margin: 12px 0 18px; }
-.lost-card .lost-retry {
+.lost-note-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
+.lost-note-body { flex: 1; min-width: 0; line-height: 1.3; }
+.lost-note-title { font-size: 0.82rem; font-weight: 600; }
+.lost-note-sub { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
+.lost-note .lost-retry {
+  flex: none;
   background: var(--accent); color: var(--accent-fg);
-  border: none; border-radius: 10px;
-  padding: 11px 26px; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
+  border: none; border-radius: 8px;
+  padding: 6px 12px; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
   transition: background 150ms var(--ease);
 }
-.lost-card .lost-retry:hover { background: var(--accent-hover); }
-.lost-card .lost-retry:disabled { opacity: 0.6; cursor: default; }
-.lost-card .lost-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.lost-note .lost-retry:hover { background: var(--accent-hover); }
+.lost-note .lost-retry:disabled { opacity: 0.6; cursor: default; }
+.lost-note .lost-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }