Add hover/tap tooltip explaining what "limited" means in local AI mode

Hovering (desktop) or tapping (mobile) the word "limited" in the local-AI
banner now shows the 5 concrete capability gaps versus the server model:
smaller model, no images, no live data, no date awareness, and
device-dependent speed. Positioned via JS from the term's actual on-screen
rect and clamped to the viewport, rather than a fixed CSS offset, since
the term sits at an unpredictable horizontal spot in the sentence.

Fixed a real bug caught by testing on a touch-emulated device: the term
has tabindex=0, so a tap fires a native `focus` event before `click`,
which independently opened the tooltip — the click handler's toggle then
read "already open" and immediately closed it again on every tap. Fixed
by tracking the click-toggle's own open/closed state in a dedicated flag
instead of inferring it from the tooltip's current display state.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016b3u4n81zwJ6rpE9NeCokb

index.html

@@ -141,6 +141,17 @@
   .local-mode-link{background:none;border:none;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;padding:6px 0 0;font-family:inherit;text-decoration:underline;min-height:auto;display:block;}
   .local-progress-track{background:rgba(127,127,127,.25);border-radius:999px;height:8px;overflow:hidden;margin-top:8px;}
   .local-progress-fill{background:var(--accent);height:100%;width:0%;transition:width .25s;}
+  .info-term{position:relative;display:inline-block;border-bottom:1px dotted currentColor;cursor:help;}
+  /* Positioned via JS (left/top computed from the term's actual on-screen
+     rect, clamped to the viewport) rather than pure CSS anchoring — the
+     term sits at an unpredictable horizontal spot in the sentence (varies
+     by language, font size), so a fixed left:0 offset would overflow the
+     right edge on a narrow phone screen. See showLocalLimitedTooltip(). */
+  .tooltip-bubble{display:none;position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:0 12px 32px rgba(0,0,0,.4);z-index:1200;font-size:12px;line-height:1.5;font-weight:500;color:var(--text);white-space:normal;max-height:60vh;overflow-y:auto;}
+  .tooltip-bubble ol{margin:0;padding-left:18px;}
+  .tooltip-bubble li{margin-bottom:8px;}
+  .tooltip-bubble li:last-child{margin-bottom:0;}
+  .tooltip-bubble strong{color:var(--accent);}
   .local-mode-btn{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:12px;padding:0 20px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;min-height:40px;width:100%;margin-top:10px;}
   .local-mode-btn:hover{border-color:var(--accent);}
   .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:900;}
@@ -289,7 +300,15 @@
       <div class="local-progress-track"><div class="local-progress-fill" id="localProgressFill"></div></div>
     </div>
     <div class="cap-banner-active" id="capBannerActive" style="display:none;align-items:center;justify-content:space-between;gap:10px;">
-      <div class="cap-title">🖥️ Local AI mode — limited, runs on your device</div>
+      <div class="cap-title">🖥️ Local AI mode — <span class="info-term" id="localLimitedTerm" tabindex="0" role="button" aria-expanded="false" aria-describedby="localLimitedTooltip">limited<div class="tooltip-bubble" id="localLimitedTooltip" role="tooltip">
+        <ol>
+          <li><strong>Much smaller model</strong> — it's a 360-million-parameter model versus the 1B/3B/8B-class models Nox normally runs server-side. Noticeably less coherent, worse at reasoning, and more prone to getting facts wrong or losing the thread in longer replies.</li>
+          <li><strong>No images</strong> — it's text-only. Attaching a photo/document in local mode gets declined with a message telling you to switch back to the server.</li>
+          <li><strong>No live data</strong> — the server injects real-time weather, news, currency rates, holidays, and general web facts into its answers. Local mode has none of that — it's just the raw model guessing from its own training, so it'll be wrong or evasive on anything time-sensitive ("what's the weather," "who won yesterday," etc.).</li>
+          <li><strong>No date awareness</strong> — the server also tells the model today's actual date; local mode doesn't get that either, so it may not know what day it is.</li>
+          <li><strong>Speed/quality depend on your device</strong> — no server-grade GPU behind it, just whatever's in your laptop/phone.</li>
+        </ol>
+      </div></span>, runs on your device</div>
       <button type="button" class="local-mode-link" id="exitLocalModeBtn">Use server again</button>
     </div>
   </div>
@@ -1514,6 +1533,77 @@ if (aiModeLocalBtn) aiModeLocalBtn.addEventListener('click', enableLocalMode);
 if (aiModeServerBtn) aiModeServerBtn.addEventListener('click', () => { if (localModeActive) exitLocalMode(); });
 if (aiModeRowEl && HAS_WEBGPU) aiModeRowEl.style.display = 'flex';
 
+// The ":hover"/":focus" CSS alone covers desktop and most keyboard nav,
+// but a tap on mobile doesn't reliably keep an element "hovered" long
+// enough to read a multi-paragraph tooltip — an explicit toggle (open on
+// tap, close on any tap elsewhere) makes it usable there too.
+const localLimitedTerm = document.getElementById('localLimitedTerm');
+const localLimitedTooltip = document.getElementById('localLimitedTooltip');
+// True hover only on devices that actually have a pointer capable of it —
+// on touch, "hover" fires on tap in a way that fights with the click
+// toggle below (tap would open-then-immediately-close), so touch relies
+// purely on the click handler instead.
+const supportsHover = !!(window.matchMedia && window.matchMedia('(hover: hover)').matches);
+
+function showLocalLimitedTooltip() {
+  if (!localLimitedTerm || !localLimitedTooltip) return;
+  const margin = 12;
+  const termRect = localLimitedTerm.getBoundingClientRect();
+  const width = Math.min(300, window.innerWidth - margin * 2);
+  localLimitedTooltip.style.width = width + 'px';
+  localLimitedTooltip.style.display = 'block';
+  const height = localLimitedTooltip.offsetHeight;
+  let left = termRect.left;
+  if (left + width > window.innerWidth - margin) left = window.innerWidth - margin - width;
+  if (left < margin) left = margin;
+  let top = termRect.top - height - 9;
+  if (top < margin) top = termRect.bottom + 9; // flip below if there's no room above
+  localLimitedTooltip.style.left = left + 'px';
+  localLimitedTooltip.style.top = top + 'px';
+}
+
+function hideLocalLimitedTooltip() {
+  if (localLimitedTooltip) localLimitedTooltip.style.display = 'none';
+  if (localLimitedTerm) localLimitedTerm.setAttribute('aria-expanded', 'false');
+}
+
+// Tracked separately from the tooltip's own display state, not inferred
+// from it — the term has tabindex="0", so a real click/tap ALSO fires a
+// native `focus` event first (browsers focus a focusable element before
+// dispatching its click), which independently shows the tooltip. Reading
+// "is it currently visible" inside the click handler was therefore always
+// true by the time click ran, making every tap open-then-immediately-close
+// it. A dedicated flag that only the click handler itself flips sidesteps
+// that ordering entirely — confirmed with a real Playwright touch tap
+// after this was still broken with the naive "toggle by reading display" approach.
+let localTooltipPinnedOpen = false;
+
+if (localLimitedTerm) {
+  if (supportsHover) {
+    localLimitedTerm.addEventListener('mouseenter', showLocalLimitedTooltip);
+    localLimitedTerm.addEventListener('mouseleave', () => { if (!localTooltipPinnedOpen) hideLocalLimitedTooltip(); });
+  }
+  localLimitedTerm.addEventListener('focus', showLocalLimitedTooltip);
+  localLimitedTerm.addEventListener('blur', () => { if (!localTooltipPinnedOpen) hideLocalLimitedTooltip(); });
+  localLimitedTerm.addEventListener('click', (e) => {
+    e.stopPropagation();
+    localTooltipPinnedOpen = !localTooltipPinnedOpen;
+    if (localTooltipPinnedOpen) {
+      showLocalLimitedTooltip();
+      localLimitedTerm.setAttribute('aria-expanded', 'true');
+    } else {
+      hideLocalLimitedTooltip();
+    }
+  });
+  document.addEventListener('click', () => {
+    localTooltipPinnedOpen = false;
+    hideLocalLimitedTooltip();
+  });
+  window.addEventListener('resize', () => {
+    if (localLimitedTooltip && localLimitedTooltip.style.display === 'block') showLocalLimitedTooltip();
+  });
+}
+
 // Single source of truth for both the inline composer banner and the
 // centered modal popup, for either reset cause. Both show the SAME
 // UTC-midnight countdown — for the message cap (this app's own counter)