@sphoro/bugcatch-web-sdk 0.17.0 → 0.19.0

package/src/widget.js

@@ -1,21 +1,21 @@
-// The floating "Report a bug" button and its form. Rendered in a shadow root
-// so the host page's CSS can't leak in and break it (or vice versa).
+// The floating "Report a bug" button. Rendered in a shadow root so the host
+// page's CSS can't leak in and break it (or vice versa).
+//
+// Only the button is in the script every page loads: the dock, its theme
+// switch and the launcher. The panel the launcher opens is most of the widget's
+// code and nearly all of its CSS, most visitors never open it, and so it is
+// fetched the first time it is wanted — or a little before, once the page has
+// gone quiet or a pointer reaches the button (panel/, and lazy.js for how).
 //
 // Everything the panel needs is declared here as custom properties, which is
 // what makes theming a config option rather than a fork: the host element
-// carries the accent colour and the light/dark choice, and the rules below
-// only ever read variables.
+// carries the accent colour and the light/dark choice, and the rules below —
+// and the panel's own, which arrive with it — only ever read variables.
 
-import {
-  captureScreenshot, startRecording, screenshotSupported, captureSupported,
-  startVoiceNote, voiceSupported,
-  humanSize, humanDuration, normalizeMime, UPLOAD_MIMES, REPORT_MIMES,
-} from './capture.js';
-import { draftKey, draftOperation, readDraft } from './drafts.js';
-import { readSession } from './session.js';
-import { sendMessage } from './updates.js';
-import { readReferences, validateReference } from './references.js';
-import { SOLVED_PROMPT } from './agent-issues.js';
+import * as ICONS from './icons.js';
+import { loadPanel, loadCall } from './lazy.js';
+import { noticeNode } from './notice.js';
+import { readableOn } from './accent.js';
 
 const POSITIONS = {
   'bottom-right': 'bottom:20px;right:20px;',
@@ -24,56 +24,6 @@ const POSITIONS = {
   'top-left': 'top:20px;left:20px;',
 };
 
-const PRIORITIES = [
-  { value: 'LOW', label: 'Low' },
-  { value: 'MEDIUM', label: 'Medium' },
-  { value: 'HIGH', label: 'High' },
-  { value: 'CRITICAL', label: 'Critical' },
-];
-
-const ICONS = {
-  camera: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2a1 1 0 0 0 .83-.45l.94-1.4A1 1 0 0 1 9.3 4.7h5.4a1 1 0 0 1 .83.45l.94 1.4a1 1 0 0 0 .83.45h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z"/><circle cx="12" cy="13" r="3.4"/></svg>',
-  video: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="12.5" height="12" rx="2.2"/><path d="M15.5 10.8l4.2-2.6a.6.6 0 0 1 .92.5v6.6a.6.6 0 0 1-.92.5l-4.2-2.6z"/></svg>',
-  paperclip: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11.5l-7.6 7.6a4.6 4.6 0 0 1-6.5-6.5l8-8a3.2 3.2 0 0 1 4.5 4.5l-8 8a1.8 1.8 0 0 1-2.5-2.5l7.1-7.1"/></svg>',
-  close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>',
-  mic: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2.5" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6"/></svg>',
-  send: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l16-8-6 16-2.6-6.2L4 12Z"/></svg>',
-  stopSquare: '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>',
-  back: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5.5L8 12l6.5 6.5"/></svg>',
-  phone: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.2 3.5h3l1.5 3.7-2 1.4a11.5 11.5 0 0 0 5.7 5.7l1.4-2 3.7 1.5v3a1.8 1.8 0 0 1-2 1.8A15.6 15.6 0 0 1 4.4 5.5a1.8 1.8 0 0 1 1.8-2z"/></svg>',
-  phoneOff: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.2 3.5h3l1.5 3.7-2 1.4a11.5 11.5 0 0 0 5.7 5.7l1.4-2 3.7 1.5v3a1.8 1.8 0 0 1-2 1.8A15.6 15.6 0 0 1 4.4 5.5a1.8 1.8 0 0 1 1.8-2z"/><path d="M3 21L21 3"/></svg>',
-  bug: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6a4 4 0 0 1 8 0"/><rect x="7" y="7.5" width="10" height="12" rx="5"/><path d="M7 11H3.5M7 15.5H4M17 11h3.5M17 15.5h3M12 8v11.5"/></svg>',
-  check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.8l4.6 4.4L19 7"/></svg>',
-  retry: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.6-5.9M20 4v4.5h-4.5"/></svg>',
-  sun: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.4 5.4l1.6 1.6M17 17l1.6 1.6M18.6 5.4L17 7M7 17l-1.6 1.6"/></svg>',
-  moon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13.4A8.2 8.2 0 1 1 10.6 4a6.6 6.6 0 0 0 9.4 9.4z"/></svg>',
-  auto: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="2.8" y="4.4" width="18.4" height="12.6" rx="2.2"/><path d="M8.6 20.2h6.8"/><path d="M12 4.4v12.6"/><path d="M12 7.2a3.6 3.6 0 0 1 0 7.2z" fill="currentColor" stroke="none"/></svg>',
-  // The assistant's mark: a four-point spark, drawn wherever it speaks.
-  sparkle: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5c.5 4.6 2.9 7 7.5 7.5v.1c-4.6.5-7 2.9-7.5 7.5h-.1c-.5-4.6-2.9-7-7.5-7.5V10c4.6-.5 7-2.9 7.5-7.5z"/><path d="M18.6 15.2c.2 1.9 1.2 2.9 3.1 3.1v.1c-1.9.2-2.9 1.2-3.1 3.1h-.1c-.2-1.9-1.2-2.9-3.1-3.1v-.1c1.9-.2 2.9-1.2 3.1-3.1z" opacity=".7"/></svg>',
-  chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5a7.5 7 0 0 1 7.5-7h1a7.5 7 0 0 1 0 14H9l-4.2 2.6a.5.5 0 0 1-.76-.5l.5-3.1A7 7 0 0 1 4 11.5z"/><path d="M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01" stroke-width="2.6"/></svg>',
-  chevronDown: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9.5l6 6 6-6"/></svg>',
-  chevronRight: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 6l6 6-6 6"/></svg>',
-  alert: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.2M12 16.3h.01"/></svg>',
-  inbox: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5l2.6-7.2A1.5 1.5 0 0 1 7.5 5.3h9a1.5 1.5 0 0 1 1.4 1L20.5 13.5V18a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18z"/><path d="M3.5 13.5h4.8l1.2 2.2h5l1.2-2.2h4.8"/></svg>',
-};
-
-/* The assistant's avatar, wherever it appears. */
-const AVATAR = `<span class="avatar" aria-hidden="true">${ICONS.sparkle}</span>`;
-
-/* The sphoro lockup, as outlines rather than text.
- *
- * This SDK runs inside other people's pages, where Space Grotesk is not loaded
- * and cannot be assumed. Live <text> would render the mark in whatever the host
- * site happens to use — a different typeface on every customer. Outlines are
- * self-contained, so the mark is identical everywhere, at the cost of the path
- * data below.
- *
- * The BUGCATCH half reads --bc-brand-mark, not a bare --accent. Custom properties
- * are exempt from `all: initial`, so they cross the shadow boundary: a host page
- * that happens to define --accent would have repainted our mark in their brand
- * colour. The --bc- prefix is ours and no host is going to set it by accident. */
-const BRAND = '<svg class="bc-brand" viewBox="0 0 254 60" fill="none" role="img" aria-label="sphoro BugCatch"><g fill="currentColor"><path transform="translate(0.00 40.00) scale(0.04000 -0.04000)" d="M276.00 -14.00Q179.00 -14.00 117.00 28.00Q55.00 70.00 42.00 148.00L158.00 178.00Q165.00 143.00 181.50 123.00Q198.00 103.00 222.50 94.50Q247.00 86.00 276.00 86.00Q320.00 86.00 341.00 101.50Q362.00 117.00 362.00 140.00Q362.00 163.00 342.00 175.50Q322.00 188.00 278.00 196.00L250.00 201.00Q198.00 211.00 155.00 228.50Q112.00 246.00 86.00 277.00Q60.00 308.00 60.00 357.00Q60.00 431.00 114.00 470.50Q168.00 510.00 256.00 510.00Q339.00 510.00 394.00 473.00Q449.00 436.00 466.00 376.00L349.00 340.00Q341.00 378.00 316.50 394.00Q292.00 410.00 256.00 410.00Q220.00 410.00 201.00 397.50Q182.00 385.00 182.00 363.00Q182.00 339.00 202.00 327.50Q222.00 316.00 256.00 310.00L284.00 305.00Q340.00 295.00 385.50 278.50Q431.00 262.00 457.50 231.50Q484.00 201.00 484.00 149.00Q484.00 71.00 427.50 28.50Q371.00 -14.00 276.00 -14.00Z"/><path transform="translate(19.56 40.00) scale(0.04000 -0.04000)" d="M70.00 -200.00V496.00H194.00V436.00H212.00Q229.00 465.00 265.00 487.50Q301.00 510.00 368.00 510.00Q428.00 510.00 479.00 480.50Q530.00 451.00 561.00 394.00Q592.00 337.00 592.00 256.00V240.00Q592.00 159.00 561.00 102.00Q530.00 45.00 479.00 15.50Q428.00 -14.00 368.00 -14.00Q323.00 -14.00 292.50 -3.50Q262.00 7.00 243.50 23.50Q225.00 40.00 214.00 57.00H196.00V-200.00ZM330.00 96.00Q389.00 96.00 427.50 133.50Q466.00 171.00 466.00 243.00V253.00Q466.00 325.00 427.00 362.50Q388.00 400.00 330.00 400.00Q272.00 400.00 233.00 362.50Q194.00 325.00 194.00 253.00V243.00Q194.00 171.00 233.00 133.50Q272.00 96.00 330.00 96.00Z"/><path transform="translate(43.68 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V700.00H196.00V435.00H214.00Q222.00 451.00 239.00 467.00Q256.00 483.00 284.50 493.50Q313.00 504.00 357.00 504.00Q415.00 504.00 458.50 477.50Q502.00 451.00 526.00 404.50Q550.00 358.00 550.00 296.00V0.00H424.00V286.00Q424.00 342.00 396.50 370.00Q369.00 398.00 318.00 398.00Q260.00 398.00 228.00 359.50Q196.00 321.00 196.00 252.00V0.00Z"/><path transform="translate(66.92 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/><path transform="translate(90.00 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V496.00H194.00V440.00H212.00Q223.00 470.00 248.50 484.00Q274.00 498.00 308.00 498.00H368.00V386.00H306.00Q258.00 386.00 227.00 360.50Q196.00 335.00 196.00 282.00V0.00Z"/><path transform="translate(104.44 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/></g><rect x="139.52" y="16" width="1.6" height="26" rx="0.8" fill="var(--bc-brand-mark, #5647ee)" opacity="0.4"/><g fill="var(--bc-brand-mark, #5647ee)"><path transform="translate(154.52 35.00) scale(0.01400 -0.01400)" d="M46.35 0.00V105.85H139.75V594.15H46.35V700.00H404.08Q467.38 700.00 514.79 678.41Q562.20 656.83 588.70 617.33Q615.20 577.83 615.20 523.35V513.70Q615.20 465.52 597.03 434.76Q578.85 404.00 553.91 387.24Q528.98 370.48 506.28 363.30V346.35Q528.98 340.35 555.24 323.50Q581.50 306.65 600.00 275.48Q618.50 244.30 618.50 194.48V184.48Q618.50 126.65 591.41 85.24Q564.33 43.83 516.83 21.91Q469.33 0.00 406.85 0.00ZM259.85 109.15H392.60Q441.20 109.15 469.80 132.60Q498.40 156.05 498.40 198.55V208.20Q498.40 250.70 470.21 274.15Q442.02 297.60 392.60 297.60H259.85ZM259.85 406.75H391.65Q437.55 406.75 466.32 430.11Q495.10 453.48 495.10 493.80V503.80Q495.10 544.95 466.74 567.90Q438.37 590.85 391.65 590.85H259.85Z"/><path transform="translate(167.00 35.00) scale(0.01400 -0.01400)" d="M335.30 -14.00Q251.22 -14.00 190.60 16.63Q129.97 47.25 97.56 104.96Q65.15 162.68 65.15 243.03V700.00H185.25V239.73Q185.25 170.48 224.03 131.99Q262.80 93.50 335.30 93.50Q407.80 93.50 446.57 131.99Q485.35 170.48 485.35 239.73V700.00H605.45V243.03Q605.45 162.68 573.13 104.96Q540.80 47.25 480.09 16.63Q419.38 -14.00 335.30 -14.00Z"/><path transform="translate(179.60 35.00) scale(0.01400 -0.01400)" d="M311.85 -14.00Q238.45 -14.00 179.69 18.50Q120.92 51.00 86.69 113.67Q52.45 176.35 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.23 645.59Q598.33 577.17 598.33 460.87V456.70H479.87V464.52Q479.87 504.67 463.76 536.86Q447.65 569.05 414.99 587.77Q382.32 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 138.89Q257.63 91.85 334.00 91.85Q410.02 91.85 445.12 132.83Q480.22 173.80 480.22 237.92V249.67H302.85V351.88H598.33V0.00H487.52V69.10H470.57Q462.70 50.87 446.06 31.44Q429.42 12.00 397.64 -1.00Q365.85 -14.00 311.85 -14.00Z"/><path transform="translate(192.05 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(204.25 35.00) scale(0.01400 -0.01400)" d="M19.75 0.00 211.62 700.00H421.33L613.20 0.00H489.27L447.42 159.60H185.53L143.68 0.00ZM214.25 270.40H418.70L324.95 624.87H308.00Z"/><path transform="translate(216.31 35.00) scale(0.01400 -0.01400)" d="M233.95 0.00V590.85H24.70V700.00H563.30V590.85H354.05V0.00Z"/><path transform="translate(227.75 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(239.95 35.00) scale(0.01400 -0.01400)" d="M69.50 0.00V700.00H189.60V405.58H466.40V700.00H586.50V0.00H466.40V296.42H189.60V0.00Z"/></g></svg>';
-
 // 'auto' is the default and means "follow the visitor's system setting".
 const THEMES = [
   { value: 'light', label: 'Light', icon: ICONS.sun },
@@ -101,81 +51,119 @@ function writeStoredTheme(value) {
   } catch { /* storage denied — the choice just won't outlive the page */ }
 }
 
+// The dark palette, said once and applied twice: when the site or the visitor
+// picks dark, and when 'auto' meets a system set to dark.
+const DARK = `
+  --bc-bg: #151517;
+  --bc-elevated: #1c1c1f;
+  --bc-fg: #f3f2ef;
+  --bc-muted: #b3b0aa;
+  --bc-faint: #8f8c86;
+  --bc-border: #2c2c30;
+  --bc-subtle: #1f1f22;
+  --bc-stone: #26262a;
+  --bc-raised: #303035;
+  --bc-danger: #ff6b81;
+  --bc-ok: #4fd19a;
+  --bc-warn: #f2a54a;
+  --bc-info: #79a8ff;
+  --bc-brand-ink: #b3b0aa;
+  --bc-brand-mark: #a59cff;
+  --bc-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -20px rgba(0,0,0,.8), 0 8px 20px -8px rgba(0,0,0,.5);
+  --bc-shadow-sm: 0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.4);
+  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 14%, var(--bc-bg));`;
+
+// The launcher's stylesheet: the theme, the base rules, the dock. The panel's
+// arrives with the panel (panel/styles.js) and is added after this one.
+//
+// `accent` is the host's colour, or null for ink (accent.js). Ink is drawn
+// from the theme's own foreground, so it turns white on dark by itself; a
+// configured colour stays that colour in both.
 const css = (accent) => `
 :host { all: initial; }
 :host {
-  --bc-accent: ${accent};
-  --bc-on-accent: #fff;
-  --bc-bg: #fff;
-  --bc-elevated: #fff;
-  --bc-fg: #14161c;
-  --bc-muted: #5f6673;
-  --bc-faint: #9aa1ad;
-  --bc-border: #e6e8ee;
-  --bc-subtle: #f4f5f8;
-  --bc-raised: #fff;
-  --bc-danger: #dc2626;
-  --bc-ok: #059669;
+  --bc-accent: ${accent || 'var(--bc-fg)'};
+  --bc-on-accent: ${accent ? readableOn(accent) : 'var(--bc-bg)'};
+  /* The assistant's orb: BugCatch's own three colours, or the host's accent
+     with two lighter cuts of it, so the orb on their site is in their colour. */
+  --bc-o1: ${accent ? `color-mix(in srgb, ${accent} 32%, #fff)` : '#ffb3c9'};
+  --bc-o2: ${accent || '#6a5cff'};
+  --bc-o3: ${accent ? `color-mix(in srgb, ${accent} 22%, #ffe7d1)` : '#ffd6a0'};
+  --bc-bg: #ffffff;
+  --bc-elevated: #ffffff;
+  --bc-fg: #0e0e10;
+  --bc-muted: #57544e;
+  --bc-faint: #75726c;
+  --bc-border: #e9e7e3;
+  --bc-subtle: #f6f5f3;
+  /* Warm stone: fields, chips and the selected track. */
+  --bc-stone: #f0efec;
+  --bc-raised: #ffffff;
+  --bc-danger: #c8233d;
+  --bc-ok: #0b7a55;
+  --bc-warn: #a4570a;
+  --bc-info: #2459d1;
   /* The lockup's own two colours, kept off --bc-accent on purpose: that one is
      the customer's brand, and this mark is ours. Values are the light cut of
      brand/sphoro-bugcatch-primary.svg, pulled up from near-black so the mark
      identifies itself without out-shouting the host's page. */
-  --bc-brand-ink: #4b5563;
+  --bc-brand-ink: #57544e;
   --bc-brand-mark: #5647ee;
-  --bc-shadow: 0 24px 64px rgba(10,12,16,.22), 0 4px 14px rgba(10,12,16,.08);
-  --bc-shadow-sm: 0 1px 2px rgba(10,12,16,.06), 0 1px 1px rgba(10,12,16,.04);
-  --bc-dur: 240ms;
+  --bc-shadow: 0 0 0 1px rgba(20,18,14,.06), 0 30px 70px -24px rgba(20,18,14,.30), 0 8px 20px -8px rgba(20,18,14,.10);
+  --bc-shadow-sm: 0 0 0 1px rgba(20,18,14,.06), 0 1px 2px rgba(20,18,14,.05);
+  --bc-dur: 220ms;
   --bc-ease: cubic-bezier(.22,1,.36,1);
+  /* Film grain over the orb, so it reads as light rather than a gradient. */
+  --bc-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
   /* The system everything below is drawn from. Derived tokens are written in
      terms of the ones above, so a host that overrides --bc-accent or the
      palette gets a coherent result without touching these. */
-  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 10%, var(--bc-bg));
-  --bc-accent-line: color-mix(in srgb, var(--bc-accent) 32%, var(--bc-border));
-  --bc-ring: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 22%, transparent);
+  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 7%, var(--bc-bg));
+  --bc-accent-line: color-mix(in srgb, var(--bc-accent) 30%, var(--bc-border));
+  --bc-ring: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 16%, transparent);
   --bc-r-sm: 8px;
   --bc-r-md: 12px;
-  --bc-r-lg: 18px;
-  --bc-r-xl: 22px;
+  --bc-r-lg: 16px;
+  --bc-r-xl: 20px;
   --bc-fs-xs: 11.5px;
   --bc-fs-sm: 12.5px;
   --bc-fs-md: 14px;
-  --bc-fs-lg: 16px;
+  --bc-fs-lg: 15px;
   --bc-pad: 18px;
 }
-:host(.bc-dark) {
-  --bc-bg: #14161c;
-  --bc-elevated: #1c1f27;
-  --bc-fg: #eef0f4;
-  --bc-muted: #a3aab6;
-  --bc-faint: #6f7682;
-  --bc-border: #2a2e38;
-  --bc-subtle: #1f222a;
-  --bc-raised: #363d4b;
-  --bc-brand-ink: #9aa1ad;
-  --bc-brand-mark: #9b8fff;
-  --bc-shadow: 0 24px 64px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4);
-  --bc-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
-  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 18%, var(--bc-bg));
+:host(.bc-dark) {${DARK}
 }
 @media (prefers-color-scheme: dark) {
-  :host(.bc-auto) {
-    --bc-bg: #14161c;
-    --bc-elevated: #1c1f27;
-    --bc-fg: #eef0f4;
-    --bc-muted: #a3aab6;
-    --bc-faint: #6f7682;
-    --bc-border: #2a2e38;
-    --bc-subtle: #1f222a;
-    --bc-raised: #363d4b;
-    --bc-brand-ink: #9aa1ad;
-    --bc-brand-mark: #9b8fff;
-    --bc-shadow: 0 24px 64px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4);
-    --bc-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
-    --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 18%, var(--bc-bg));
+  :host(.bc-auto) {${DARK}
   }
 }
 
 * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
+
+/* ---------- the orb ----------
+   The assistant's face, on the launcher and at the top of every screen: three
+   blurred colour blobs turning slowly under a highlight and grain. Hue from
+   --bc-o1..3. Sized by whoever places it. */
+.orb {
+  position: relative; display: block; flex: none; aspect-ratio: 1; border-radius: 50%;
+  background: var(--bc-o2); overflow: hidden; isolation: isolate;
+  box-shadow: inset -3px -5px 10px rgba(0,0,0,.22), inset 2px 3px 7px rgba(255,255,255,.35);
+}
+.orb::before {
+  content: ''; position: absolute; inset: -20%; border-radius: 50%; z-index: -1;
+  background:
+    radial-gradient(circle at 70% 72%, var(--bc-o3) 0%, transparent 44%),
+    radial-gradient(circle at 26% 66%, var(--bc-o1) 0%, transparent 48%),
+    radial-gradient(circle at 58% 30%, var(--bc-o2) 0%, transparent 62%);
+  filter: blur(3px);
+  animation: bc-orb-turn 18s linear infinite;
+}
+.orb::after {
+  content: ''; position: absolute; inset: 0; border-radius: 50%;
+  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.85) 0 5%, rgba(255,255,255,0) 30%), var(--bc-grain);
+  mix-blend-mode: soft-light;
+}
+@keyframes bc-orb-turn { to { transform: rotate(360deg); } }
 svg { width: 1em; height: 1em; display: block; }
 /* The hidden attribute has to actually hide. Nearly every element in here is given a
    display by a rule below, and any of them beats the attribute's own UA style
@@ -203,422 +191,60 @@ button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-vi
   }
 }
 
-@keyframes bc-fade-in { from { opacity: 0 } to { opacity: 1 } }
-@keyframes bc-fade-out { to { opacity: 0 } }
-@keyframes bc-panel-in { from { opacity: 0; transform: translateY(14px) scale(.965) } to { opacity: 1; transform: none } }
-@keyframes bc-panel-out { to { opacity: 0; transform: translateY(10px) scale(.975) } }
-@keyframes bc-sheet-in { from { transform: translateY(100%) } to { transform: none } }
-@keyframes bc-sheet-out { to { transform: translateY(100%) } }
 @keyframes bc-launcher-in { from { opacity: 0; transform: translateY(12px) scale(.86) } to { opacity: 1; transform: none } }
 @keyframes bc-item-in { from { opacity: 0; transform: translateY(8px) scale(.96) } to { opacity: 1; transform: none } }
-@keyframes bc-rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
-@keyframes bc-pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .3; transform: scale(.78) } }
-@keyframes bc-spin { to { transform: rotate(360deg) } }
-@keyframes bc-pop { 0% { transform: scale(.5); opacity: 0 } 65% { transform: scale(1.1) } 100% { transform: scale(1); opacity: 1 } }
-@keyframes bc-nudge { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
-@keyframes bc-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-3px); opacity: 1 } }
-@keyframes bc-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
 
-/* ---------- dock: theme switch stacked above the launcher ---------- */
+/* ---------- dock: the launcher, and what is said beside it ---------- */
 .dock {
   position: fixed; z-index: 2147483000;
   display: flex; flex-direction: column; gap: 10px;
 }
 .dock[hidden] { display: none; }
-/* While the panel is open the switch rises above the scrim so it stays usable
-   — the panel shares the shadow root, so a change re-themes the open form. */
+/* While the panel is open the launcher rises above the scrim, so the button
+   that opened it is the button that closes it. */
 .dock.over { z-index: 2147483002; }
 .dock.at-right { align-items: flex-end; }
 .dock.at-left { align-items: flex-start; }
-/* Anchored to the top, "above the launcher" would be off-screen, so the
-   switch goes under it and the launcher stays the outermost thing. */
+/* Anchored to the top, "above the launcher" would be off-screen, so cards go
+   under it and the launcher stays the outermost thing. */
 .dock.at-top { flex-direction: column-reverse; }
 
-.themer {
-  display: inline-flex; align-items: center; gap: 2px;
-  padding: 3px; border-radius: 999px;
-  background: var(--bc-elevated); border: 1px solid var(--bc-border);
-  box-shadow: 0 6px 18px rgba(10,12,16,.14), 0 1px 3px rgba(10,12,16,.08);
-  animation: bc-launcher-in 420ms var(--bc-ease) both;
-}
-.themer button {
-  display: grid; place-items: center;
-  width: 28px; height: 28px; padding: 0;
-  border: none; border-radius: 999px; background: transparent;
-  color: var(--bc-muted); cursor: pointer;
-  transition: background var(--bc-dur) var(--bc-ease), color var(--bc-dur) var(--bc-ease), transform 140ms var(--bc-ease);
-}
-.themer button svg { font-size: 15px; }
-.themer button:hover { background: var(--bc-subtle); color: var(--bc-fg); }
-.themer button:active { transform: scale(.92); }
-.themer button[aria-pressed="true"] { background: var(--bc-accent); color: var(--bc-on-accent); }
-.themer button[aria-pressed="true"]:hover { background: var(--bc-accent); filter: brightness(1.06); }
-
-/* ---------- launcher ---------- */
+/* ---------- launcher ----------
+   A pill with the assistant's orb in it: ink by default, the host's colour when
+   they set one. The shadow is neutral, never tinted, so a bright brand colour
+   does not glow on somebody's checkout. */
 .launcher {
   position: relative;
-  display: inline-flex; align-items: center; gap: 9px;
-  height: 48px; padding: 0 20px 0 16px; border: none; border-radius: 999px;
+  display: inline-flex; align-items: center; gap: 10px;
+  height: 46px; padding: 0 18px 0 7px; border: none; border-radius: 999px;
   background: var(--bc-accent); color: var(--bc-on-accent);
-  font-size: var(--bc-fs-md); font-weight: 620; line-height: 1; letter-spacing: -.01em;
+  font-size: var(--bc-fs-md); font-weight: 560; line-height: 1; letter-spacing: -.01em;
   cursor: pointer;
-  box-shadow: 0 10px 28px color-mix(in srgb, var(--bc-accent) 34%, rgba(10,12,16,.2)), 0 2px 6px rgba(10,12,16,.16);
-  transition: transform var(--bc-dur) var(--bc-ease), box-shadow var(--bc-dur) var(--bc-ease), filter 160ms linear, padding var(--bc-dur) var(--bc-ease);
+  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 26px -8px rgba(0,0,0,.36);
+  transition: transform var(--bc-dur) var(--bc-ease), box-shadow var(--bc-dur) var(--bc-ease), filter 160ms linear;
   animation: bc-launcher-in 420ms var(--bc-ease) both;
 }
-/* Two glyphs in one box: the bubble when closed, a chevron when open, turned
+/* Two faces in one circle: the orb when closed, a chevron when open, turned
    into each other so the button reads as the panel's own handle. */
-.launcher .ico { position: relative; width: 20px; height: 20px; flex: none; }
+.launcher .ico { position: relative; width: 32px; height: 32px; flex: none; }
 .launcher .ico > span {
-  position: absolute; inset: 0;
+  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
   transition: transform 320ms var(--bc-ease), opacity 200ms ease;
 }
-.launcher .ico svg { width: 20px; height: 20px; }
+.launcher .ico .orb { width: 32px; }
+.launcher .ico .when-open { background: color-mix(in srgb, var(--bc-on-accent) 14%, transparent); }
+.launcher .ico svg { width: 18px; height: 18px; }
 .launcher .ico .when-open { opacity: 0; transform: rotate(-90deg) scale(.6); }
 .launcher[aria-expanded="true"] .ico .when-closed { opacity: 0; transform: rotate(90deg) scale(.6); }
 .launcher[aria-expanded="true"] .ico .when-open { opacity: 1; transform: none; }
-.launcher:hover { transform: translateY(-2px); filter: brightness(1.06); }
+.launcher:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 14px 30px -8px rgba(0,0,0,.42); }
 .launcher:active { transform: translateY(0) scale(.97); transition-duration: 90ms; }
 .launcher:focus-visible { outline-offset: 3px; }
 .launcher[hidden] { display: none; }
 
-/* ---------- scrim + panel ---------- */
-.scrim {
-  position: fixed; inset: 0; z-index: 2147483001;
-  background: rgba(10,12,16,.32);
-  animation: bc-fade-in 200ms ease both;
-}
-.scrim.closing { animation: bc-fade-out 170ms ease both; }
-
-/* The panel belongs to the launcher, so it opens out of that corner rather
-   than in the middle of the screen. --bc-dock-h is measured at open time
-   because the dock's height depends on whether the launcher is showing.
-   A column: the header and footer stay put and only the middle scrolls. */
-.panel {
-  position: fixed;
-  display: flex; flex-direction: column;
-  width: calc(100vw - 40px); max-width: 420px;
-  max-height: calc(100vh - var(--bc-dock-h, 84px) - 52px);
-  overflow: hidden;
-  background: var(--bc-bg); color: var(--bc-fg);
-  border-radius: var(--bc-r-xl); box-shadow: var(--bc-shadow);
-  border: 1px solid color-mix(in srgb, var(--bc-border) 70%, transparent);
-  animation: bc-panel-in 340ms var(--bc-ease) both;
-}
-/* A conversation wants a height of its own, so the thread fills the panel
-   rather than shrinking to its first two messages. */
-.panel.is-chat { height: 640px; }
-.scrim.at-right .panel { right: 20px; transform-origin: bottom right; }
-.scrim.at-left .panel { left: 20px; transform-origin: bottom left; }
-.scrim.at-bottom .panel { bottom: calc(20px + var(--bc-dock-h, 84px) + 12px); }
-.scrim.at-top .panel { top: calc(20px + var(--bc-dock-h, 84px) + 12px); transform-origin: top right; }
-.scrim.closing .panel { animation: bc-panel-out 170ms ease both; }
-
-/* ---------- header ---------- */
-.head {
-  flex: none; position: relative;
-  display: flex; align-items: center; gap: 12px;
-  padding: 16px 14px 14px var(--bc-pad);
-  background: linear-gradient(180deg, var(--bc-accent-soft), var(--bc-bg));
-  border-bottom: 1px solid var(--bc-border);
-}
-.head .mark, .avatar {
-  flex: none; display: grid; place-items: center; position: relative;
-  width: 38px; height: 38px; border-radius: 50%;
-  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
-  color: var(--bc-on-accent); font-size: 19px;
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
-}
-/* The little "online" dot says someone — or something — is on the other end. */
-.head .mark::after {
-  content: ''; position: absolute; right: -1px; bottom: -1px;
-  width: 11px; height: 11px; border-radius: 50%;
-  background: #22c55e; border: 2px solid var(--bc-bg);
-}
-.head .titles { flex: 1; min-width: 0; }
-.head h2 {
-  margin: 0 0 2px; font-size: var(--bc-fs-lg); font-weight: 680; letter-spacing: -.02em; line-height: 1.25;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.head p { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted); }
-.icon-btn {
-  flex: none; display: grid; place-items: center;
-  width: 32px; height: 32px; padding: 0; font-size: 16px;
-  border: none; border-radius: 10px; background: none; color: var(--bc-muted);
-  cursor: pointer; transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
-}
-.icon-btn:hover { background: color-mix(in srgb, var(--bc-fg) 7%, transparent); color: var(--bc-fg); }
-.icon-btn:active { transform: scale(.92); }
-.icon-btn.back { margin: 0 -6px 0 -8px; }
-
-.body {
-  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
-  padding: 16px var(--bc-pad) 6px;
-}
-
-label { display: block; font-size: var(--bc-fs-sm); font-weight: 620; color: var(--bc-fg); margin-bottom: 7px; }
-label .opt { font-weight: 450; color: var(--bc-faint); }
-input[type=text], input[type=email], textarea {
-  width: 100%; padding: 11px 13px; font-size: var(--bc-fs-md); line-height: 1.45;
-  color: var(--bc-fg); background: var(--bc-elevated);
-  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
-  transition: border-color 160ms, box-shadow 160ms, background 160ms;
-}
-input[type=text]::placeholder, input[type=email]::placeholder, textarea::placeholder { color: var(--bc-faint); }
-input[type=text]:hover, input[type=email]:hover, textarea:hover { border-color: color-mix(in srgb, var(--bc-fg) 18%, var(--bc-border)); }
-input[type=text]:focus, input[type=email]:focus, textarea:focus {
-  outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring);
-}
-input.invalid, input.invalid:focus, textarea.invalid {
-  border-color: var(--bc-danger); animation: bc-nudge 240ms ease;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-danger) 16%, transparent);
-}
-.field-err {
-  display: flex; align-items: center; gap: 6px;
-  margin: 7px 0 0; font-size: var(--bc-fs-xs); font-weight: 550; color: var(--bc-danger);
-  animation: bc-rise 200ms var(--bc-ease) both;
-}
-.field-err svg { font-size: 13px; flex: none; }
-textarea { min-height: 88px; resize: vertical; }
-.field { margin-bottom: 16px; }
-.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
-.field-head .count { font-size: var(--bc-fs-xs); color: var(--bc-faint); font-variant-numeric: tabular-nums; }
-
-/* The draft line: a quiet note, or a card offering to pick up where they left off. */
-.compose > .note { font-size: var(--bc-fs-xs); color: var(--bc-faint); margin: -4px 0 10px; }
-.compose > .note:empty { display: none; }
-.compose > .note:has(button) {
-  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
-  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--bc-r-md);
-  background: var(--bc-accent-soft); border: 1px solid var(--bc-accent-line);
-  font-size: var(--bc-fs-sm); color: var(--bc-fg);
-}
-.compose > .note button {
-  padding: 5px 11px; font: inherit; font-size: var(--bc-fs-xs); font-weight: 620;
-  border-radius: 999px; cursor: pointer;
-  border: 1px solid var(--bc-accent); background: var(--bc-accent); color: var(--bc-on-accent);
-}
-.compose > .note button[data-discard] { background: transparent; color: var(--bc-muted); border-color: var(--bc-border); }
-
-/* ---------- what is already known ----------
-   A help surface in front of the form, not a step in it. Everything here is
-   dismissible by ignoring it: the reporter can read what is already known and
-   leave, tap "this is happening to me too" and leave, or type straight past all
-   of it and file the report they came to file. Nothing is ever in their way,
-   because a reporter who feels handled rather than helped stops reporting. */
-.known { margin-bottom: 16px; }
-.known .known-h {
-  margin: 0 0 8px; font-size: 11px; font-weight: 680; letter-spacing: .06em;
-  text-transform: uppercase; color: var(--bc-faint);
-}
-.known .issue {
-  display: flex; align-items: center; gap: 10px;
-  padding: 10px 12px; margin-bottom: 6px;
-  background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
-  animation: bc-rise 240ms var(--bc-ease) both;
-}
-.known .issue.is-joined { border-color: color-mix(in srgb, var(--bc-ok) 55%, var(--bc-border)); }
-.known .issue .who { flex: 1; min-width: 0; }
-.known .issue .t {
-  display: block; font-size: 13px; font-weight: 620; line-height: 1.4;
-  color: var(--bc-fg); overflow-wrap: anywhere;
-}
-.known .issue .meta {
-  display: block; margin-top: 3px; font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
-}
-.known .issue .join {
-  flex: none; padding: 7px 12px; font-size: 12px; font-weight: 620;
-  color: var(--bc-accent); background: var(--bc-bg);
-  border: 1px solid var(--bc-accent-line); border-radius: 999px; cursor: pointer;
-  transition: background 160ms, border-color 160ms;
-}
-.known .issue .join:hover { border-color: var(--bc-accent); background: var(--bc-accent-soft); }
-.known .issue .join:disabled { color: var(--bc-ok); border-color: var(--bc-border); background: var(--bc-bg); cursor: default; opacity: 1; }
-.known .ask { display: flex; gap: 8px; margin: 2px 0 8px; }
-.known .ask input { flex: 1; min-width: 0; }
-.known .ask button { flex: none; }
-.known .err { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-danger); }
-
-/* ---------- questions the assistant answers by itself ---------- */
-.picks { margin-bottom: 16px; }
-.picks .picks-h {
-  margin: 0 0 8px; font-size: 11px; font-weight: 680; letter-spacing: .06em;
-  text-transform: uppercase; color: var(--bc-faint);
-}
-.picks .picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
-.picks .pick {
-  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
-  padding: 9px 11px; text-align: left; cursor: pointer; font: inherit;
-  color: var(--bc-fg); background: var(--bc-subtle);
-  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
-  transition: background 160ms, border-color 160ms, transform 160ms;
-  animation: bc-rise 240ms var(--bc-ease) both;
-}
-.picks .pick:hover { border-color: var(--bc-accent-line); background: var(--bc-accent-soft); }
-.picks .pick[aria-pressed="true"] { border-color: var(--bc-accent); background: var(--bc-accent-soft); }
-.picks .pick .t { font-size: 13px; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
-.picks .pick .h { font-size: var(--bc-fs-xs); line-height: 1.4; color: var(--bc-muted); }
-.picks .picks-note {
-  display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0;
-  font-size: 12px; line-height: 1.45; color: var(--bc-muted);
-}
-.picks .picks-note svg { flex: none; margin-top: 2px; color: var(--bc-ok); }
-
-/* ---------- who is reporting ----------
-   A strip above the form rather than a screen in front of it: where signing in
-   is optional this is a line the reporter may ignore, and it should read as
-   one. Where it is required the composer below is not rendered at all and this
-   strip is the whole panel. */
-.whoami {
-  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
-  margin-bottom: 16px; padding: 10px 12px;
-  font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
-  background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
-}
-.whoami.asking { display: block; padding: 14px; }
-.whoami .who { flex: 1; min-width: 0; }
-.whoami .who strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
-.link {
-  padding: 0; font: inherit; font-size: var(--bc-fs-sm); font-weight: 620; line-height: 1.45;
-  color: var(--bc-accent); background: none; border: none; cursor: pointer; border-radius: 4px;
-}
-.link:hover { text-decoration: underline; text-underline-offset: 2px; }
-.link:disabled { color: var(--bc-faint); cursor: default; text-decoration: none; }
-.whoami .why { margin: 0 0 10px; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
-.whoami .why strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
-.whoami .row { display: flex; gap: 8px; align-items: stretch; }
-.whoami .row input { flex: 1; min-width: 0; }
-.whoami .row button { flex: none; }
-.whoami .after { display: flex; gap: 14px; align-items: center; margin-top: 9px; }
-.whoami .err { color: var(--bc-danger); }
-.whoami .code { letter-spacing: .28em; font-variant-numeric: tabular-nums; }
-
-/* ---------- which record is this about ----------
-   Drawn only after Send has been pressed and only when what they wrote did not
-   already answer it, so most people never see this at all. Presented as the
-   assistant asking one friendly follow-up, not as a form field that appeared. */
-.refs {
-  position: relative;
-  margin-bottom: 16px; padding: 14px;
-  font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
-  background: var(--bc-accent-soft);
-  border: 1px solid var(--bc-accent-line); border-radius: var(--bc-r-lg);
-  animation: bc-item-in 280ms var(--bc-ease) both;
-}
-.refs .ask-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
-.refs .ask-head .avatar { width: 28px; height: 28px; font-size: 14px; box-shadow: none; }
-.refs .ask-head strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--bc-fg); margin-bottom: 1px; }
-.refs .why { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
-.refs .row { display: flex; gap: 8px; align-items: stretch; }
-.refs .row input { flex: 1; min-width: 0; background: var(--bc-bg); }
-.refs select {
-  flex: none; max-width: 45%; padding: 10px 10px; font-size: 13px;
-  color: var(--bc-fg); background: var(--bc-bg);
-  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
-}
-.refs select:focus { outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
-.refs .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
-.refs .chips button {
-  padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; cursor: pointer;
-  color: var(--bc-muted); background: var(--bc-bg); border: 1px solid var(--bc-border);
-  transition: background 160ms, color 160ms, border-color 160ms;
-}
-.refs .chips button[aria-pressed="true"] { color: var(--bc-on-accent); background: var(--bc-accent); border-color: var(--bc-accent); }
-.refs .hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-muted); }
-.refs .after { display: flex; gap: 12px; align-items: center; margin-top: 9px; }
-.refs .err { color: var(--bc-danger); font-weight: 550; }
-.refs .link { margin-top: 10px; font-size: 12px; color: var(--bc-muted); }
-.refs .link:hover { color: var(--bc-fg); }
-.refs .chips.cands button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 550; }
-/* "We read your ID" — under the description, while they type. */
-.ref-found {
-  display: flex; align-items: center; gap: 6px;
-  margin: -6px 0 14px; font-size: 12px; line-height: 1.45; color: var(--bc-muted);
-}
-.ref-found svg { width: 14px; height: 14px; flex: none; color: var(--bc-ok); }
-.ref-found b { font-weight: 600; color: var(--bc-fg); }
-
-/* ---------- severity ---------- */
-.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md); }
-.seg button {
-  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  padding: 8px 4px; font-size: var(--bc-fs-sm); font-weight: 550; line-height: 1;
-  color: var(--bc-muted); background: none; border: none; border-radius: 9px;
-  cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms;
-}
-.seg button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sev, var(--bc-faint)); opacity: .55; transition: opacity 180ms; }
-.seg button[data-prio="LOW"] { --sev: #94a3b8; }
-.seg button[data-prio="MEDIUM"] { --sev: #3b82f6; }
-.seg button[data-prio="HIGH"] { --sev: #f59e0b; }
-.seg button[data-prio="CRITICAL"] { --sev: #ef4444; }
-.seg button:hover { color: var(--bc-fg); }
-.seg button[aria-pressed=true] {
-  background: var(--bc-raised); color: var(--bc-fg); font-weight: 650;
-  box-shadow: 0 1px 3px rgba(10,12,16,.14), 0 0 0 1px color-mix(in srgb, var(--bc-border) 60%, transparent);
-}
-.seg button[aria-pressed=true]::before { opacity: 1; }
-.seg button:focus-visible { outline-offset: -2px; }
-
-/* ---------- attachments ---------- */
-.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
-.tool {
-  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
-  padding: 12px 8px; font-size: 12px; font-weight: 600; line-height: 1;
-  color: var(--bc-fg); background: var(--bc-elevated);
-  border: 1px dashed color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); border-radius: var(--bc-r-md); cursor: pointer;
-  transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--bc-ease);
-}
-.tool svg { font-size: 19px; color: var(--bc-muted); transition: color 160ms; }
-.tool:hover:not(:disabled) { border-color: var(--bc-accent); border-style: solid; background: var(--bc-accent-soft); transform: translateY(-1px); }
-.tool:hover:not(:disabled) svg { color: var(--bc-accent); }
-.tool:active:not(:disabled) { transform: translateY(0) scale(.98); }
-.tool:disabled { opacity: .45; cursor: not-allowed; }
-.attach-hint { margin: 8px 0 0; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
-
-.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
-.thumbs:empty { display: none; }
-.thumb {
-  position: relative; width: 76px; height: 76px; flex: none;
-  border-radius: var(--bc-r-md); overflow: hidden;
-  border: 1px solid var(--bc-border); background: var(--bc-subtle);
-  box-shadow: var(--bc-shadow-sm);
-  animation: bc-item-in 300ms var(--bc-ease) both;
-}
-.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
-.thumb .kind {
-  position: absolute; left: 4px; bottom: 4px;
-  display: inline-flex; align-items: center; gap: 3px;
-  padding: 2px 5px; border-radius: 5px;
-  background: rgba(10,12,16,.72); color: #fff; font-size: 9.5px; font-weight: 600; line-height: 1.3;
-}
-.thumb .drop {
-  position: absolute; top: 4px; right: 4px;
-  width: 20px; height: 20px; font-size: 11px; border-radius: 50%;
-  background: rgba(10,12,16,.7); color: #fff; border: none;
-  display: grid; place-items: center; cursor: pointer;
-  opacity: 0; transition: opacity 160ms, background 160ms;
-}
-.thumb:hover .drop, .thumb:focus-within .drop { opacity: 1; }
-.thumb .drop:hover { background: var(--bc-danger); }
-.thumb .veil {
-  position: absolute; inset: 0; display: grid; place-items: center; gap: 6px;
-  background: rgba(10,12,16,.62); color: #fff; font-size: 10.5px; font-weight: 600;
-  align-content: center;
-}
-.thumb .veil.err { background: color-mix(in srgb, var(--bc-danger) 82%, transparent); }
-.spinner {
-  width: 17px; height: 17px; border-radius: 50%;
-  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
-  animation: bc-spin 720ms linear infinite;
-}
-.bar { width: 46px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
-.bar i { display: block; height: 100%; width: 0; background: #fff; transition: width 180ms linear; }
-.veil button {
-  background: none; border: none; color: #fff; font-size: 14px; padding: 2px;
-  cursor: pointer; display: grid; place-items: center;
-}
-
-/* ---------- messages ---------- */
+/* ---------- messages ----------
+   The panel's banner, and the load-failure card below — which is drawn when
+   the panel's own sheet never arrived, so these rules live in this one. */
 .msg {
   display: flex; align-items: flex-start; gap: 8px;
   font-size: var(--bc-fs-sm); line-height: 1.45; padding: 10px 12px; border-radius: var(--bc-r-md); margin-bottom: 14px;
@@ -628,543 +254,66 @@ textarea { min-height: 88px; resize: vertical; }
 .msg.err { background: color-mix(in srgb, var(--bc-danger) 10%, var(--bc-bg)); color: var(--bc-danger); border: 1px solid color-mix(in srgb, var(--bc-danger) 30%, transparent); }
 .msg.info { background: var(--bc-subtle); color: var(--bc-muted); border: 1px solid var(--bc-border); }
 
-/* ---------- footer ---------- */
-.foot {
-  flex: none;
-  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
-  padding: 12px var(--bc-pad); border-top: 1px solid var(--bc-border);
-  background: var(--bc-bg);
-}
-.foot .spacer { flex: 1; }
-.foot .note { flex-basis: 100%; order: -1; font-size: var(--bc-fs-xs); color: var(--bc-muted); }
-.foot .note:empty { display: none; }
-/* Quiet, but still legible: this sits in someone else's product, so it identifies
-   where the report goes without competing with their interface. Quiet is bought
-   with colour (--bc-brand-ink sits a step below body text) rather than with a
-   blanket opacity — the BUGCATCH half is only about 3px of cap height at this
-   size, and dimming it on top of that left it as a smudge in both themes. */
-.powered {
-  flex: none; display: flex; align-items: center; justify-content: center; gap: 6px;
-  padding: 7px var(--bc-pad) 9px; font-size: 10.5px; color: var(--bc-faint);
-  background: var(--bc-subtle); border-top: 1px solid var(--bc-border);
-}
-.brand-credit { display: flex; align-items: center; transition: color 0.15s; border-radius: 4px; }
-.bc-brand { height: 16px; width: auto; display: block; color: var(--bc-brand-ink); }
-.brand-credit:hover .bc-brand { color: var(--bc-fg); }
-button.ghost, button.primary {
-  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
-  height: 38px; padding: 0 15px; font: inherit; font-size: 13px; font-weight: 620; line-height: 1;
-  border-radius: 999px; cursor: pointer; white-space: nowrap;
-  transition: transform 160ms var(--bc-ease), filter 160ms, background 160ms, border-color 160ms, color 160ms, box-shadow 160ms;
-}
-button.ghost { background: var(--bc-bg); border: 1px solid var(--bc-border); color: var(--bc-fg); }
-button.ghost:hover:not(:disabled) { background: var(--bc-subtle); border-color: color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); }
-button.ghost svg, button.primary svg { font-size: 15px; }
-button.primary {
-  padding: 0 18px;
-  background: var(--bc-accent); border: 1px solid var(--bc-accent); color: var(--bc-on-accent);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
-}
-button.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
-button.primary:active:not(:disabled) { transform: none; }
-button:disabled { opacity: .5; cursor: not-allowed; }
-button.primary:disabled { box-shadow: none; }
-button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; width: 14px; height: 14px; }
-button.quiet {
-  padding: 0 4px; height: 38px; font: inherit; font-size: 13px; font-weight: 600;
-  border: none; background: none; color: var(--bc-muted); cursor: pointer; border-radius: 8px;
-}
-button.quiet:hover { color: var(--bc-accent); }
-
-/* ---------- your reports ---------- */
-.history {
-  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
-  padding: 8px 12px 14px;
-}
-/* On the conversation screen the inner thread does the scrolling, so this
-   wrapper must not — two nested scrollers means the composer drifts out of
-   reach exactly when someone reaches for it. */
-.history.chatting {
-  overflow: hidden; display: flex; flex-direction: column; padding: 0;
-}
-.history .row {
-  display: flex; align-items: center; gap: 12px;
-  padding: 12px 10px; border-bottom: 1px solid var(--bc-border);
-}
-.history .row:last-child { border-bottom: 0; }
-.history .who { flex: 1; min-width: 0; }
-.history .ttl {
-  display: block; font-size: 13.5px; font-weight: 600; color: var(--bc-fg);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.history .sub { display: block; margin-top: 3px; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
-.history .row-ico {
-  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
-  background: var(--bc-subtle); color: var(--bc-muted); font-size: 16px;
-}
-.history .chev { flex: none; color: var(--bc-faint); font-size: 15px; transition: transform 160ms var(--bc-ease), color 160ms; }
-.empty {
-  display: flex; flex-direction: column; align-items: center; gap: 10px;
-  padding: 40px 16px; text-align: center; font-size: var(--bc-fs-sm); color: var(--bc-muted);
-}
-.empty .empty-ico {
-  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
-  background: var(--bc-accent-soft); color: var(--bc-accent); font-size: 20px;
-}
-.skel {
-  display: block; height: 12px; border-radius: 6px; margin: 6px 0;
-  background: linear-gradient(90deg, var(--bc-subtle) 25%, color-mix(in srgb, var(--bc-fg) 8%, var(--bc-subtle)) 50%, var(--bc-subtle) 75%);
-  background-size: 200% 100%; animation: bc-shimmer 1.4s linear infinite;
-}
-/* A history row is a button now — it opens the report — so the UA styling has
-   to go, and the hit area has to read as one. */
-.history button.row {
-  width: 100%; background: none; border: 0; margin-bottom: 2px;
-  font: inherit; color: inherit; text-align: left; cursor: pointer;
-  border-radius: var(--bc-r-md); transition: background 160ms;
-  animation: bc-rise 260ms var(--bc-ease) both;
-}
-.history button.row:hover { background: var(--bc-subtle); }
-.history button.row:hover .chev { transform: translateX(2px); color: var(--bc-accent); }
-.history button.row:focus-visible { outline-offset: -2px; }
-
-/* ---------- one report, and what happened to it ---------- */
-.report-head {
-  flex: none;
-  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
-  padding: 10px var(--bc-pad); border-bottom: 1px solid var(--bc-border);
-  background: var(--bc-bg);
-}
-.report-head .ttl { font-size: 13px; font-weight: 620; color: var(--bc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-.report-head .sub { font-size: var(--bc-fs-xs); color: var(--bc-faint); }
-.report-head .pill { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
-
-/* The thread scrolls; the composer under it does not. Both live inside the
-   panel, which stops scrolling as a whole on this screen — a composer that
-   scrolls away is a composer people think isn't there. */
-.thread {
-  flex: 1 1 auto; min-height: 140px;
-  display: flex; flex-direction: column; gap: 4px;
-  padding: 14px var(--bc-pad) 12px; overflow-y: auto; overscroll-behavior: contain;
-}
-
-/* The day a run of messages happened on, as a centred label on a rule. */
-.day-sep {
-  display: flex; align-items: center; gap: 10px; margin: 10px 0 6px;
-  font-size: 11px; font-weight: 620; letter-spacing: .02em; color: var(--bc-faint);
-}
-.day-sep::before, .day-sep::after { content: ''; flex: 1; height: 1px; background: var(--bc-border); }
-
-/* A status change is not a message and is not drawn as one: no side, no
-   bubble, no author. Centred and quiet, the way every chat marks the things
-   that happened rather than the things that were said. */
-.sys {
-  align-self: center; max-width: 90%; text-align: center; margin: 6px 0;
-  padding: 4px 10px; border-radius: 999px; background: var(--bc-subtle);
-  font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
-  animation: bc-fade-in 240ms ease both;
-}
-.sys .dot {
-  display: inline-block; width: 6px; height: 6px; margin-right: 6px;
-  border-radius: 50%; background: var(--bc-muted); vertical-align: middle;
-}
-.sys .t { color: var(--bc-faint); }
-.sys.k-status .dot { background: #4da3ff; }
-.sys.k-severity .dot { background: #e8912a; }
-.sys.k-assignment .dot { background: #8b7dff; }
-.sys.k-filed .dot { background: var(--bc-faint); }
-
-/* ---------- the conversation ----------
-
-   A status change and a message are different things and are drawn as such: a
-   change is a line on the rail above, a message is a bubble with a side. The
-   reporter's own words sit right and accented, the other side's left beside an
-   avatar that says who it is — the arrangement every chat has taught people to
-   read without a legend. */
-.msg-row, .typing-row {
-  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px;
-  max-width: 88%; margin-top: 10px;
-  animation: bc-rise 260ms var(--bc-ease) both;
-}
-.msg-row.cont { margin-top: 3px; }
-.msg-row > *, .typing-row > * { grid-column: 2; }
-/* Fixed rows, so the avatar lines up with the bubble whatever else the
-   message carries (a name above it, answers or a time below it). */
-.msg-row > .msg-who, .typing-row > .msg-who { grid-row: 1; }
-.msg-row > .bubble, .typing-row > .bubble { grid-row: 2; }
-.msg-row > .quick { grid-row: 3; }
-.msg-row > .msg-when { grid-row: 4; }
-.msg-row > .av, .typing-row > .av { grid-column: 1; grid-row: 2; align-self: end; }
-/* In a run of messages the avatar sits by the last bubble and the time under
-   it, the way a chat marks where one turn ends. */
-.msg-row:has(+ .msg-row.cont) > .av { visibility: hidden; }
-.msg-row:has(+ .msg-row.cont) > .msg-when { display: none; }
-.msg-row.theirs, .typing-row { align-self: flex-start; }
-.msg-row.mine { align-self: flex-end; grid-template-columns: minmax(0, 1fr); justify-items: end; }
-.msg-row.mine > * { grid-column: 1; }
-.av {
-  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
-  font-size: 11px; font-weight: 700; letter-spacing: .02em;
-  background: color-mix(in srgb, var(--bc-fg) 10%, var(--bc-bg)); color: var(--bc-fg);
-}
-.av.bot {
-  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
-  color: var(--bc-on-accent); font-size: 14px;
-}
-.msg-who { font-size: var(--bc-fs-xs); font-weight: 620; color: var(--bc-muted); padding: 0 4px 4px; }
-.msg-who.auto { color: var(--bc-accent); display: inline-flex; align-items: center; gap: 5px; }
-.msg-who .tag {
-  padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
-  text-transform: uppercase; background: var(--bc-accent-soft); color: var(--bc-accent);
-}
-.bubble {
-  justify-self: start; max-width: 100%;
-  padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.5;
-  background: var(--bc-subtle); color: var(--bc-fg);
-  border: 1px solid var(--bc-border);
-  border-bottom-left-radius: 6px;
-}
-/* pre-wrap belongs to the text, not the box — on the box it would also render
-   the markup's own indentation. */
-.msg-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
-.msg-row.mine .bubble {
-  justify-self: end;
-  background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-on-accent);
-  border-bottom-left-radius: 18px; border-bottom-right-radius: 6px;
-}
-.msg-row.cont.theirs .bubble { border-top-left-radius: 6px; }
-.msg-row.cont.mine .bubble { border-top-right-radius: 6px; }
-/* A reply nobody wrote: tinted with the accent and labelled "Assistant" above
-   it, so it reads the same to someone who cannot see the colour at all. */
-.msg-row.auto .bubble { background: var(--bc-accent-soft); border-color: var(--bc-accent-line); }
-/* An attachment-only message has no text to wrap, so the bubble would be an
-   empty coloured box around it. */
-.bubble.silent { padding: 0; background: none !important; border: 0; }
-.msg-when { font-size: 10.5px; color: var(--bc-faint); padding: 4px 4px 0; }
-.msg-row.pending { opacity: .6; }
-.msg-row.pending .msg-when::after { content: ' · Sending…'; }
-.msg-row.failed .bubble { border: 1px solid var(--bc-danger); }
-.msg-row.failed .msg-when { color: var(--bc-danger); }
-.msg-row.failed .msg-when::after { content: ' · Not sent'; }
-
-/* The assistant, thinking. Three dots in a bubble where its next message will be. */
-.typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; justify-self: start; }
-.typing i {
-  width: 7px; height: 7px; border-radius: 50%; background: var(--bc-accent); opacity: .45;
-  animation: bc-typing 1.2s ease-in-out infinite;
-}
-.typing i:nth-child(2) { animation-delay: .15s; }
-.typing i:nth-child(3) { animation-delay: .3s; }
-.typing-row .msg-when { padding-top: 4px; }
-
-.att { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
-.bubble.silent .att { margin-top: 0; }
-.att img {
-  display: block; max-width: 100%; max-height: 190px; border-radius: var(--bc-r-md);
-  border: 1px solid var(--bc-border); object-fit: cover; cursor: zoom-in;
-}
-.att audio { width: 232px; max-width: 100%; height: 34px; }
-.att video { max-width: 100%; max-height: 190px; border-radius: var(--bc-r-md); }
-.att .file {
-  display: flex; align-items: center; gap: 8px; text-decoration: none;
-  padding: 8px 10px; border-radius: 10px; font-size: 12px;
-  background: var(--bc-elevated); border: 1px solid var(--bc-border); color: var(--bc-fg);
-}
-.att .file:hover { border-color: var(--bc-accent); }
-.att .file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.att .file .sz { flex: none; color: var(--bc-faint); font-size: 11px; }
-
-/* ---------- the assistant's live card ----------
-   A status header pinned between the report and the conversation: where the
-   investigation is, as words and as a stepper. It does not scroll with the
-   thread, because "is anything happening?" is the question on screen the
-   whole time. */
-.assistant {
-  flex: none; position: relative; overflow: hidden;
-  margin: 10px 12px 0; padding: 12px 14px 12px;
-  border-radius: var(--bc-r-lg); border: 1px solid var(--bc-border);
+/* ---------- announcements ----------
+   What the project's team is telling visitors (notice.js): beside the launcher
+   for the ones written for that, and at the top of the panel for all of them.
+   In this sheet because the card beside the button exists before the panel's
+   does. The tone is a colour and an icon; the site's accent is the info one. */
+.notice {
+  --tone: var(--bc-info);
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 11px 10px 11px 12px; border-radius: var(--bc-r-md);
   background: var(--bc-subtle);
-  transition: background 400ms ease, border-color 400ms ease;
-}
-.assistant.analyzing, .assistant.confirming, .assistant.needs_info {
-  background: var(--bc-accent-soft); border-color: var(--bc-accent-line);
-}
-.assistant.resolved { background: color-mix(in srgb, var(--bc-ok) 9%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border)); }
-/* On a call: the call's own card is what they are watching. This one states
-   what is happening and stops moving — no spinner, no travelling bar. */
-.assistant.calling { background: var(--bc-bg); }
-.assistant.calling .as-progress i { transition: none; }
-.as-body.entering { animation: bc-rise 360ms var(--bc-ease) both; }
-.as-top { display: flex; gap: 11px; align-items: center; }
-.as-orb {
-  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
-  color: var(--bc-on-accent); font-size: 15px;
-  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
-}
-.assistant.resolved .as-orb { background: var(--bc-ok); }
-.assistant.reviewing .as-orb { background: color-mix(in srgb, var(--bc-fg) 55%, var(--bc-bg)); }
-.as-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: as-rot .8s linear infinite; }
-@keyframes as-rot { to { transform: rotate(360deg); } }
-.as-text { min-width: 0; flex: 1; }
-.as-title { font-weight: 650; font-size: 13.5px; letter-spacing: -.01em; color: var(--bc-fg); }
-.as-detail { font-size: 12px; line-height: 1.45; color: var(--bc-muted); margin-top: 2px; }
-.as-progress {
-  height: 4px; margin: 12px 0 0; border-radius: 999px; overflow: hidden;
-  background: color-mix(in srgb, var(--bc-fg) 9%, transparent);
-}
-.as-progress i {
-  display: block; height: 100%; border-radius: inherit; background: var(--bc-accent);
-  transition: width 700ms var(--bc-ease);
-}
-.assistant.resolved .as-progress i { background: var(--bc-ok); }
-.assistant.analyzing .as-progress i {
-  background: linear-gradient(90deg, var(--bc-accent) 0%, color-mix(in srgb, var(--bc-accent) 45%, #fff) 50%, var(--bc-accent) 100%);
-  background-size: 200% 100%; animation: bc-shimmer 1.6s linear infinite;
-}
-.as-steps {
-  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
-  margin: 8px 0 0; padding: 0; font-size: 10.5px; color: var(--bc-faint);
-}
-.as-steps li { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
-.as-steps li .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-.as-steps li .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
-.as-steps li.done { color: var(--bc-muted); }
-.as-steps li.done .dot { background: var(--bc-accent); border-color: var(--bc-accent); }
-.assistant.resolved .as-steps li.done .dot { background: var(--bc-ok); border-color: var(--bc-ok); }
-.as-steps li.active { color: var(--bc-fg); font-weight: 650; }
-.as-steps li.active .dot { border-color: var(--bc-accent); background: var(--bc-bg); animation: as-pulse 1.2s ease-in-out infinite; }
-@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent) 25%, transparent); } }
-@media (prefers-reduced-motion: reduce) { .as-spin, .as-steps li.active .dot, .assistant.analyzing .as-progress i, .typing i { animation: none; } }
-
-/* Quick answers under the confirm question — only on the latest message. */
-.msg-row .quick { display: none; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
-.msg-row:last-child .quick { display: flex; }
-.quick button {
-  display: inline-flex; align-items: center; gap: 6px;
-  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer;
-  border: 1px solid var(--bc-accent); background: var(--bc-bg); color: var(--bc-accent);
-  transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
-  animation: bc-item-in 300ms var(--bc-ease) both;
-}
-.quick button:first-child { background: var(--bc-accent); color: var(--bc-on-accent); }
-.quick button:nth-child(2) { animation-delay: 60ms; }
-.quick button svg { font-size: 13px; }
-.quick button:hover { transform: translateY(-1px); background: var(--bc-accent-soft); }
-.quick button:first-child:hover { background: var(--bc-accent); filter: brightness(1.07); }
-
-/* ---------- the composer ---------- */
-.composer {
-  flex: none; position: relative;
-  padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
-  /* The panel's own background, not --bc-elevated: the two are the same white
-     in light mode but differ in dark, where a raised composer reads as a band
-     laid over the panel rather than the foot of it. */
-  background: var(--bc-bg);
-  border-top: 1px solid var(--bc-border);
-}
-/* One rounded field holding the tools, the text and the send button — the
-   shape every chat box has, so nobody has to look for where to type. */
-.composer .row {
-  display: flex; align-items: flex-end; gap: 4px;
-  padding: 5px; border-radius: 22px;
-  background: var(--bc-subtle); border: 1px solid var(--bc-border);
-  transition: border-color 160ms, box-shadow 160ms;
-}
-.composer .row:focus-within { border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
-.composer textarea {
-  flex: 1; min-width: 0; min-height: 34px; max-height: 120px; resize: none; padding: 7px 6px;
-  font: inherit; font-size: 13.5px; line-height: 1.45;
-  color: var(--bc-fg); background: transparent; border: 0; border-radius: 0;
-}
-.composer textarea:hover, .composer textarea:focus { border: 0; box-shadow: none; outline: none; }
-.composer .tools { display: flex; gap: 0; grid-template-columns: none; }
-.composer .tool {
-  width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
-  border-radius: 50%; border: 0; background: none; font-size: 17px;
-  color: var(--bc-muted);
-}
-.composer .tool svg { font-size: 17px; }
-.composer .tool:hover:not(:disabled) { background: color-mix(in srgb, var(--bc-fg) 8%, transparent); color: var(--bc-fg); border: 0; transform: none; }
-.composer .tool:hover:not(:disabled) svg { color: var(--bc-fg); }
-.composer .tool:disabled { opacity: .4; cursor: default; }
-.composer .tool.recording { color: var(--bc-danger); background: color-mix(in srgb, var(--bc-danger) 12%, transparent); }
-.composer .tool.recording svg { color: var(--bc-danger); }
-.composer .send {
-  width: 34px; height: 34px; flex: none; border-radius: 50%; cursor: pointer; font-size: 16px;
-  background: var(--bc-accent); border: 0; color: var(--bc-on-accent);
-  display: grid; place-items: center;
-  transition: transform 160ms var(--bc-ease), opacity 160ms, filter 160ms;
-}
-.composer .send:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.05); }
-.composer .send:disabled { opacity: .35; cursor: default; background: var(--bc-faint); }
-.composer .staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
-.composer .chip {
-  display: flex; align-items: center; gap: 6px; max-width: 200px;
-  padding: 5px 7px 5px 10px; border-radius: 999px; font-size: var(--bc-fs-xs);
-  background: var(--bc-subtle); border: 1px solid var(--bc-border); color: var(--bc-muted);
+  border: 1px solid var(--bc-border);
+  color: var(--bc-fg);
+  font-size: var(--bc-fs-sm); line-height: 1.45; text-align: left;
   animation: bc-item-in 240ms var(--bc-ease) both;
 }
-.composer .chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bc-fg); }
-.composer .chip button {
-  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
-  border: 0; border-radius: 50%; background: none; color: var(--bc-faint); cursor: pointer;
-}
-.composer .chip button:hover { color: var(--bc-danger); }
-.composer .chip.uploading { border-style: dashed; }
-.composer .note { padding: 6px 6px 0; font-size: var(--bc-fs-xs); color: var(--bc-muted); }
-.composer .note.err { color: var(--bc-danger); }
-.reccount { font-variant-numeric: tabular-nums; }
-
-/* Status carries the only colour in this list, so it is the thing the eye
-   lands on — which is what someone opening this screen came to check. */
-.pill {
-  flex: none; display: inline-flex; align-items: center; gap: 5px;
-  font-size: 11px; font-weight: 650;
-  padding: 3px 9px; border-radius: 999px;
-  color: var(--bc-muted); background: var(--bc-subtle);
-}
-.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
-.pill.open { color: #c2410c; background: color-mix(in srgb, #f59e0b 14%, var(--bc-bg)); }
-.pill.in_progress { color: #1d6fd1; background: color-mix(in srgb, #3b82f6 14%, var(--bc-bg)); }
-.pill.resolved { color: #0f8a5a; background: color-mix(in srgb, #10b981 14%, var(--bc-bg)); }
-.pill.closed { color: var(--bc-muted); }
-:host(.bc-dark) .pill.open { color: #fbbf24; }
-:host(.bc-dark) .pill.in_progress { color: #7cb8ff; }
-:host(.bc-dark) .pill.resolved { color: #4ade9a; }
-@media (prefers-color-scheme: dark) {
-  :host(.bc-auto) .pill.open { color: #fbbf24; }
-  :host(.bc-auto) .pill.in_progress { color: #7cb8ff; }
-  :host(.bc-auto) .pill.resolved { color: #4ade9a; }
-}
-
-/* ---------- does the fix work ---------- */
-.fix-verification {
-  flex: none; margin: 10px 12px 0; padding: 12px 14px;
-  border-radius: var(--bc-r-lg); border: 1px solid color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border));
-  background: color-mix(in srgb, var(--bc-ok) 8%, var(--bc-bg));
-  font-size: var(--bc-fs-sm); color: var(--bc-fg);
-  animation: bc-rise 280ms var(--bc-ease) both;
-}
-.fix-verification p { margin: 0 0 8px; font-weight: 620; }
-.fix-verification textarea { min-height: 56px; margin-bottom: 8px; font-size: 13px; background: var(--bc-bg); }
-.fix-verification button {
-  padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer;
-  border: 1px solid var(--bc-border); background: var(--bc-bg); color: var(--bc-fg);
-}
-.fix-verification button[data-result="CONFIRMED"] { background: var(--bc-ok); border-color: var(--bc-ok); color: #fff; }
-.fix-verification .feedback-status { margin: 6px 0 0; font-weight: 450; color: var(--bc-danger); font-size: var(--bc-fs-xs); }
-.fix-verification .feedback-status:empty { display: none; }
-
-/* A call in progress, in place of the form.
-   ---------------------------------------------------------------------------
-   Deliberately not styled as a chat. Nothing arrives here to read — the
-   conversation is happening out loud — so this is a state, a line of
-   reassurance about the report, and a way to hang up. */
-.call { display: flex; flex-direction: column; padding: 26px 0 0; animation: bc-fade-in 240ms ease both; }
-.call-head, .call-note { padding: 0 var(--bc-pad); }
-.call-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
-.call-head strong { font-size: 15.5px; font-weight: 680; letter-spacing: -.01em; }
-.call-dot {
-  width: 9px; height: 9px; border-radius: 50%; background: var(--bc-accent);
-  animation: bc-call-pulse 1.6s ease-in-out infinite;
-}
-.call-dot.off { background: var(--bc-faint); animation: none; }
-@keyframes bc-call-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
-/* Said while it is still ringing, because that is when somebody is deciding
-   whether it is worth waiting. */
-.call-note { margin: 0 0 18px; font-size: 13px; color: var(--bc-muted); line-height: 1.55; }
-
-/* ---------- the same call, on top of the report it is about ---------- */
-/* A bar rather than its own screen, unlike the one the composer opens. The
-   thread underneath is exactly what both people are talking about, so taking it
-   off screen would be taking away the only shared reference. */
-.livecall {
-  flex: none;
-  display: flex; align-items: center; gap: 9px;
-  margin: 10px 12px 0; padding: 9px 11px;
-  border: 1px solid var(--bc-accent-line); border-radius: var(--bc-r-md);
-  background: var(--bc-accent-soft); font-size: var(--bc-fs-sm); color: var(--bc-fg);
-  animation: bc-rise 240ms var(--bc-ease) both;
-}
-.livecall .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.livecall .call-kept { font-size: 11px; opacity: .75; }
-.livecall .secs { font-variant-numeric: tabular-nums; color: var(--bc-muted); }
-.livecall .act {
-  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bc-border);
-  background: var(--bc-bg); color: var(--bc-fg);
-  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
-}
-.livecall .act:hover { background: var(--bc-subtle); }
-.livecall .act.danger { border-color: transparent; background: var(--bc-danger); color: #fff; }
-.livecall.over { color: var(--bc-muted); background: var(--bc-subtle); border-color: var(--bc-border); }
-.call-note code { font-size: 11px; }
-@media (prefers-reduced-motion: reduce) { .call-dot { animation: none; } }
-
-/* div.done, not .done: the assistant's stepper marks finished steps li.done,
-   and this screen's padding was landing on every one of them. */
-div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 240ms ease both; }
-.done .tick {
-  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
-  display: grid; place-items: center; font-size: 26px;
-  background: color-mix(in srgb, var(--bc-ok) 14%, transparent); color: var(--bc-ok);
-  box-shadow: 0 0 0 8px color-mix(in srgb, var(--bc-ok) 6%, transparent);
-  animation: bc-pop 420ms var(--bc-ease) both;
-}
-.done h3 { margin: 0 0 6px; font-size: 17px; font-weight: 680; letter-spacing: -.015em; }
-.done p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bc-muted); }
-.done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--bc-subtle); color: var(--bc-fg); }
-/* The likely wait. Set apart from the reference line above it by a rule rather
-   than by weight: one is bookkeeping and the other is the answer to the
-   question the reporter actually has, and they should not read as one
-   paragraph. */
-.done .eta {
-  margin: 14px auto 0;
-  padding-top: 12px;
-  border-top: 1px solid var(--bc-border);
-  max-width: 30ch;
-  line-height: 1.5;
-}
-.done .eta strong { color: var(--bc-fg); font-weight: 620; }
-/* The same figure on the report the reporter came back to. Sits under the
-   status pill in the header block, muted — it is context, not the headline the
-   status is. */
-.report-head .eta-line {
-  grid-column: 1 / -1;
-  font-size: var(--bc-fs-xs);
-  color: var(--bc-muted);
-  margin-top: 2px;
-}
-
-/* ---------- recording bar ---------- */
-.recbar {
-  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
-  z-index: 2147483002;
-  display: flex; align-items: center; gap: 12px;
-  padding: 8px 8px 8px 16px; border-radius: 999px;
-  background: var(--bc-elevated); color: var(--bc-fg);
-  border: 1px solid var(--bc-border); box-shadow: var(--bc-shadow);
-  animation: bc-item-in 300ms var(--bc-ease) both;
-}
-.recbar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bc-danger); animation: bc-pulse 1.4s ease-in-out infinite; }
-.recbar .time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 650; min-width: 38px; }
-.recbar .hint { font-size: 12px; color: var(--bc-muted); }
-.recbar button { height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer; }
-.recbar .stop { background: var(--bc-danger); border: 1px solid var(--bc-danger); color: #fff; }
-.recbar .stop:hover { filter: brightness(1.08); }
-
-/* ---------- phones ----------------------------------------------------------
-   This widget runs inside a shadow root on somebody else's site, so its own
-   stylesheet is the whole story: the host page cannot correct any of this, and
-   anything that goes wrong here goes wrong on their site, in front of their
-   visitor, at the moment that visitor is already annoyed enough to file a bug.
-   -------------------------------------------------------------------------- */
-
-/* 100vh on a phone is the viewport with the browser chrome hidden, so the
-   panel could be taller than the space it actually has and put "Send report"
-   under the address bar. */
-@supports (height: 100dvh) {
-  .panel { max-height: calc(100dvh - var(--bc-dock-h, 84px) - 52px); }
-}
+.notice.tone-success { --tone: var(--bc-ok); }
+.notice.tone-warning { --tone: var(--bc-warn); }
+.notice.tone-critical { --tone: var(--bc-danger); }
+/* The tone is the icon's colour and a wash behind it — enough to tell a delay
+   from a fix at a glance, without a coloured card shouting over the form. */
+.notice-ico {
+  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px;
+  border-radius: 7px; font-size: 14px;
+  color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent);
+}
+.notice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.notice-text strong { display: block; font-weight: 600; letter-spacing: -.005em; }
+.notice-text p { margin: 2px 0 0; color: var(--bc-muted); white-space: pre-line; }
+.notice-cta {
+  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
+  color: var(--bc-fg); font-weight: 600; text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--bc-fg) 30%, transparent); text-underline-offset: 3px;
+}
+.notice-cta:hover { text-decoration-color: currentColor; }
+.notice-x {
+  flex: none; display: grid; place-items: center;
+  width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0;
+  border: 0; border-radius: 999px; background: transparent;
+  color: var(--bc-faint); cursor: pointer;
+}
+.notice-x:hover { background: color-mix(in srgb, var(--bc-fg) 7%, transparent); color: var(--bc-fg); }
+.notice-x svg { font-size: 13px; }
+/* Beside the button it floats over somebody else's page: opaque, lifted, and
+   never taller than a glance. The whole text is in the panel. */
+.notice.at-launcher {
+  width: min(320px, calc(100vw - 40px));
+  background: var(--bc-elevated); border-color: transparent;
+  box-shadow: var(--bc-shadow);
+  padding: 13px 12px 13px 13px;
+}
+.notice.at-launcher .notice-text p {
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
+}
+/* In the panel they are a stack of short lines above the form, not a wall:
+   the body is held to two lines, and the whole of it was beside the button. */
+.notice.at-panel { margin-bottom: 8px; padding: 9px 8px 9px 10px; }
+.notice.at-panel .notice-text p {
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
+}
+.notice.at-panel .notice-cta { margin-top: 3px; }
 
 /* The dock sits in a corner of a page the widget does not own. On a notched
    phone that corner is under the home indicator, and in landscape it is under
@@ -1176,71 +325,44 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
   padding-left: env(safe-area-inset-left, 0px);
 }
 
-/* Short desktop windows: the chat height gives way to the space there is. */
-@media (max-height: 820px) { .panel.is-chat { height: calc(100vh - var(--bc-dock-h, 84px) - 52px); } }
-
-/* A phone gets the whole screen: a sheet that slides up from the bottom, with
-   the notch and the home indicator kept clear. The dock steps aside while it
-   is open — the sheet has its own close button, and a launcher floating over
-   the send button would be in the way of the one thing that matters. */
+/* The dock's own share of the phone and touch rules; the panel's sheet carries
+   the rest. */
 @media (max-width: 480px) {
-  .scrim { background: rgba(10,12,16,.4); }
-  .panel, .scrim.at-right .panel, .scrim.at-left .panel, .scrim.at-bottom .panel, .scrim.at-top .panel {
-    inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
-    border-radius: 0; border: 0;
-    animation: bc-sheet-in 380ms var(--bc-ease) both;
-  }
-  @supports (height: 100dvh) { .panel { height: 100dvh; max-height: none; } }
-  .panel.is-chat { height: 100%; }
-  .scrim.closing .panel { animation: bc-sheet-out 200ms ease both; }
-  .head { padding-top: max(14px, env(safe-area-inset-top, 0px)); padding-left: max(var(--bc-pad), env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
-  .foot, .powered { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
-  .foot + .powered { padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)); }
-  .foot:has(+ .powered) { padding-bottom: 12px; }
+  /* The panel is a full-screen sheet with its own close button, and a launcher
+     floating over its send button would be in the way. */
   .dock.over { display: none; }
-  .recbar .hint { display: none; }
-  .msg-row, .typing-row { max-width: 92%; }
 }
-
 @media (pointer: coarse) {
-  /* iOS zooms the whole page when a field it focuses is under 16px, and does
-     not zoom back out. On the host's site that is not the widget's page to
-     zoom — the visitor is left on a magnified checkout wondering what they
-     touched. !important because this is a property of the device, not a
-     preference about type. */
-  input, textarea, select { font-size: 16px !important; }
-
-  /* 44px is the floor a thumb hits reliably. Every control in this form was
-     under it, on the one surface in the product designed for someone who is
-     not an operator and gets no second attempt. */
-  .seg button { min-height: 44px; }
-  .tool { min-height: 56px; }
-  button.primary, button.ghost { height: 44px; }
-  .composer .send, .composer .tool { width: 40px; height: 40px; min-height: 0; }
-  textarea { min-height: 104px; }
-  .composer textarea { min-height: 40px; }
-
-  /* The theme switch and the close button are small glyphs whose boxes cannot
-     grow without moving the header text beside them, so each keeps its size
-     and gets an invisible target drawn around it instead. */
-  .themer button, .head .icon-btn, .thumb .drop, .brand-credit { position: relative; }
-  .thumb .drop { position: absolute; opacity: 1; }
-  .themer button::after, .head .icon-btn::after, .thumb .drop::after, .brand-credit::after {
-    content: '';
-    position: absolute;
-    inset: -8px;
-  }
-  /* The themer's three buttons sit side by side, so their expanders would
-     overlap each other without a gap to grow into. */
-  .themer { gap: 4px; }
+  .notice-x { width: 36px; height: 36px; margin: -9px -8px -6px 0; }
 }
-
 /* Hover is a lie on a touchscreen: it latches on tap and stays. The launcher's
    lift in particular was left applied after the panel closed. */
 @media (hover: none) {
   .launcher:hover { transform: none; filter: none; }
-  .tool:hover:not(:disabled), .themer button:hover { transform: none; }
 }
+
+/* ---------- while the panel's code is on its way ----------
+   Usually it is already here — it is fetched once the page is idle, and again
+   as a pointer reaches the button. On a slow first press the launcher says it
+   heard, rather than looking as though it did nothing. */
+.launcher[aria-busy="true"] { cursor: progress; }
+.launcher[aria-busy="true"] .ico { animation: bc-busy 700ms ease-in-out infinite alternate; }
+@keyframes bc-busy { to { opacity: .4; } }
+
+/* ---------- the panel's code would not load ----------
+   Said above the launcher, in the form's own error style, with the retry: the
+   network dropped, or a Content-Security-Policy refused the file. */
+.loadfail {
+  margin: 0; max-width: min(320px, calc(100vw - 40px));
+  align-items: center; box-shadow: var(--bc-shadow-sm);
+}
+.loadfail > span { flex: 1; }
+.loadfail button {
+  flex: none; padding: 2px 4px; border: 0; border-radius: 6px;
+  background: none; color: inherit; font: inherit; font-weight: 650; cursor: pointer;
+}
+.loadfail button[data-act="retry"] { text-decoration: underline; text-underline-offset: 2px; }
+.loadfail button svg { font-size: 13px; margin: 0; }
 `;
 
 export function mountWidget(client) {
@@ -1255,7 +377,7 @@ export function mountWidget(client) {
 
   const root = host.attachShadow({ mode: 'open' });
   const style = document.createElement('style');
-  style.textContent = css(client.config.accent || '#4F46E5');
+  style.textContent = css(client.config.accent || null);
   root.appendChild(style);
 
   const position = POSITIONS[client.config.widgetPosition] ? client.config.widgetPosition : 'bottom-right';
@@ -1264,2334 +386,221 @@ export function mountWidget(client) {
     + (position.startsWith('top') ? ' at-top' : '');
   dock.style.cssText = POSITIONS[position];
 
-  const themer = document.createElement('div');
-  themer.className = 'themer';
-  themer.setAttribute('role', 'group');
-  themer.setAttribute('aria-label', 'Report widget theme');
-  themer.innerHTML = THEMES.map((t) => `<button type="button" data-theme="${t.value}" `
-    + `title="${t.label}" aria-label="${t.label}" aria-pressed="${t.value === theme}">${t.icon}</button>`).join('');
-
-  themer.addEventListener('click', (e) => {
-    const btn = e.target.closest('button[data-theme]');
-    if (!btn || btn.dataset.theme === theme) return;
-    theme = btn.dataset.theme;
-    // The panel lives in the same shadow root, so an open form re-themes with
-    // it rather than waiting for the next open.
-    host.className = themeClass(theme);
-    writeStoredTheme(theme);
-    themer.querySelectorAll('button').forEach((b) => {
-      b.setAttribute('aria-pressed', String(b.dataset.theme === theme));
-    });
-  });
+  // The theme is chosen inside the panel, from its header (panel/render.js),
+  // not from a switch parked beside the button on every page of the host's
+  // site. Light, dark, then the system's own choice, and round again.
+  const themeControls = {
+    current: () => theme,
+    label: () => THEMES.find((t) => t.value === theme).label,
+    cycle() {
+      const next = THEMES[(THEMES.findIndex((t) => t.value === theme) + 1) % THEMES.length];
+      theme = next.value;
+      // The panel lives in the same shadow root, so an open form re-themes with
+      // it rather than waiting for the next open.
+      host.className = themeClass(theme);
+      writeStoredTheme(theme);
+      return next;
+    },
+  };
 
   const launcher = document.createElement('button');
   launcher.className = 'launcher';
   launcher.type = 'button';
-  launcher.innerHTML = `<span class="ico" aria-hidden="true"><span class="when-closed">${ICONS.chat}</span>`
+  launcher.innerHTML = `<span class="ico" aria-hidden="true"><span class="when-closed"><span class="orb"></span></span>`
     + `<span class="when-open">${ICONS.chevronDown}</span></span><span>Report a bug</span>`;
   launcher.setAttribute('aria-haspopup', 'dialog');
   launcher.setAttribute('aria-expanded', 'false');
 
+  // The panel on screen — or on its way, while its code is fetched. Set the
+  // moment the launcher is pressed, so a second press before it arrives means
+  // "never mind" exactly as it does on an open panel, and isOpen() already
+  // says yes: it has been asked for.
   let open = null;
   launcher.addEventListener('click', () => {
     // The launcher stays visible with the panel anchored just above it, so a
     // second click reads as "close that" rather than doing nothing.
     if (open) { open.close(); return; }
-    dock.classList.add('over');
-    launcher.setAttribute('aria-expanded', 'true');
-    open = openPanel({
-      root,
-      host,
-      dock,
-      client,
-      onClose: () => {
-        open = null;
-        dock.classList.remove('over');
-        launcher.setAttribute('aria-expanded', 'false');
-      },
-    });
+    open = openPanelWhenLoaded();
   });
 
-  dock.append(themer, launcher);
-  root.appendChild(dock);
-
-  document.body.appendChild(host);
-  // Integration hook: BugCatch.open() / close() / isOpen() drive the same
-  // launcher a person would press, so there is one way in to the panel.
-  client.widgetControls = {
-    open: () => { if (!open) launcher.click(); },
-    close: () => { open?.close(); },
-    isOpen: () => Boolean(open),
-  };
-  return () => { open?.destroy(); host.remove(); client.widgetControls = null; };
-}
-
-/** Normalises a configured theme to one of the three the switch offers. */
-function themeValue(theme) {
-  return theme === 'dark' || theme === 'light' ? theme : 'auto';
-}
-
-function themeClass(theme) {
-  if (theme === 'dark') return 'bc-dark';
-  if (theme === 'light') return 'bc-light';
-  return 'bc-auto';
-}
-
-function openPanel({ root, host, dock, client, onClose }) {
-  const cfg = client.config;
-  const canCapture = cfg.attachments !== false;
-  const canShoot = canCapture && screenshotSupported();
-  const canRecord = canCapture && captureSupported();
-
-  // Uploaded as they are added rather than on send: the upload is the slow
-  // part, and doing it while the reporter is still typing means Send is
-  // instant and a failure is visible next to the thing that failed.
-  const items = [];
-  let priority = 'MEDIUM';
-  let recorder = null;
-  let sending = false;
-
-  const scrim = document.createElement('div');
-  // The panel opens out of whichever corner the dock is in, clearing it by the
-  // dock's measured height rather than a guess at the launcher's size.
-  scrim.className = `scrim ${dock.classList.contains('at-left') ? 'at-left' : 'at-right'} `
-    + `${dock.classList.contains('at-top') ? 'at-top' : 'at-bottom'}`;
-  scrim.style.setProperty('--bc-dock-h', `${Math.round(dock.getBoundingClientRect().height)}px`);
-  scrim.innerHTML = `
-    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
-      ${headHtml({
-        id: 'bc-h',
-        title: 'Tell us what went wrong',
-        sub: "Our assistant starts looking right away. We attach the page details for you.",
-      })}
-      <div class="body">
-        <div class="slot" role="alert"></div>
-        <div class="whoami" hidden></div>
-        <!-- The questions the assistant can answer from their account and
-             close by itself. Drawn only when the project offers any. -->
-        <div class="picks" hidden></div>
-        <div class="known" hidden></div>
-        <div class="compose">
-        <div class="field">
-          <label for="bc-title">What went wrong?</label>
-          <input id="bc-title" type="text" placeholder="e.g. The checkout button does nothing" autocomplete="off"
-            aria-describedby="bc-title-err" />
-          <p class="field-err" id="bc-title-err" hidden></p>
-        </div>
-        <div class="field">
-          <label for="bc-desc">Anything else that helps <span class="opt">(optional)</span></label>
-          <textarea id="bc-desc" placeholder="What you were doing, what you expected, what happened instead."></textarea>
-        </div>
-        <!-- Drawn only when this project asks for an identifier and the report
-             does not already carry one. Between the description and the
-             severity because that is where it belongs in the reading order:
-             it is a question about what they just typed. -->
-        <div class="refs" hidden></div>
-        <div class="field">
-          <label id="bc-prio-l">How much is it getting in your way?</label>
-          <div class="seg" role="group" aria-labelledby="bc-prio-l">
-            ${PRIORITIES.map((p) => `
-              <button type="button" data-prio="${p.value}" aria-pressed="${p.value === priority}">${p.label}</button>
-            `).join('')}
-          </div>
-        </div>
-        ${canCapture ? `
-        <div class="field">
-          <div class="field-head">
-            <label id="bc-att-l">Show us <span class="opt">(optional)</span></label>
-            <span class="count" aria-live="polite"></span>
-          </div>
-          <div class="tools" role="group" aria-labelledby="bc-att-l">
-            ${canShoot ? `<button class="tool" type="button" data-act="shot">${ICONS.camera}Screenshot</button>` : ''}
-            ${canRecord ? `<button class="tool" type="button" data-act="rec">${ICONS.video}Record screen</button>` : ''}
-            <button class="tool" type="button" data-act="file">${ICONS.paperclip}Upload file</button>
-          </div>
-          <div class="thumbs"></div>
-          <input type="file" accept="${REPORT_MIMES.join(',')}" multiple hidden />
-        </div>` : ''}
-        </div>
-      </div>
-      <div class="foot">
-        <span class="note" aria-live="polite"></span>
-        ${client.hasReports() ? '<button class="quiet" type="button" data-act="history">Your reports</button>' : ''}
-        <span class="spacer"></span>
-        <!-- Hidden until the API confirms this project can take a call, which
-             most cannot. Drawn here rather than as a second launcher because it
-             is the same errand as Send report — the difference is only whether
-             the reporter would rather say it than type it. -->
-        <button class="ghost" type="button" data-act="call" hidden>${ICONS.phone}Talk to the team</button>
-        <button class="primary" type="button" data-act="send">Send report ${ICONS.send}</button>
-      </div>
-      <div class="powered">Powered by
-        <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${BRAND}</a>
-      </div>
-    </div>`;
-
-  const $ = (sel) => scrim.querySelector(sel);
-  const titleInput = $('#bc-title');
-  // Held, not looked up: the history and report screens replace the panel's
-  // markup, and a draft saved on the way out must still read what was typed.
-  const descInput = $('#bc-desc');
-  const slot = $('.slot');
-  const thumbs = $('.thumbs');
-  const filePicker = scrim.querySelector('input[type=file]');
-  const sendBtn = $('[data-act="send"]');
-  const callBtn = $('[data-act="call"]');
-  const note = $('.note');
-  const compose = $('.compose');
-  const whoami = $('.whoami');
-  const refsBox = $('.refs');
-  const known = $('.known');
-  const picks = $('.picks');
-  const historyBtn = $('[data-act="history"]');
+  function openPanelWhenLoaded() {
+    hideLoadFailure();
+    // The panel says it again, at the top, with the rest of what is live.
+    hideNotice();
+    let panel = null;
+    let cancelled = false;
+    const cancel = () => {
+      cancelled = true;
+      launcher.removeAttribute('aria-busy');
+      open = null;
+    };
+    const pending = {
+      close: () => (panel ? panel.close() : cancel()),
+      destroy: () => (panel ? panel.destroy() : cancel()),
+    };
 
-  const draftStatus = document.createElement('div');
-  draftStatus.setAttribute('role', 'status');
-  draftStatus.className = 'note';
-  compose.prepend(draftStatus);
-  const savedDraftKey = draftKey(cfg, readSession(cfg.projectId)?.email);
-  let draftLoaded = cfg.drafts === false;
-  let draftSubmitted = false;
-  let draftWrites = Promise.resolve();
-  let draftTimer;
-  function persistDraft() {
-    clearTimeout(draftTimer);
-    if (!draftLoaded || draftSubmitted || cfg.drafts === false) return draftWrites;
-    const value = titleInput.value || descInput.value || items.length ? {
-      title: titleInput.value, description: descInput.value, priority,
-      items: items.map(({ blob, mime, kind }) => ({ blob, mime, kind })),
-    } : null;
-    draftWrites = draftWrites.catch(() => {}).then(() => draftOperation(savedDraftKey, value))
-      .then(() => { draftStatus.textContent = value ? 'Draft saved on this device' : ''; })
-      .catch(() => { draftStatus.textContent = 'Draft could not be saved. Keep this tab open.'; });
-    return draftWrites;
-  }
-  function scheduleDraft() { clearTimeout(draftTimer); draftTimer = setTimeout(persistDraft, 250); }
-  compose.addEventListener('input', scheduleDraft);
-  compose.addEventListener('change', scheduleDraft);
-  const onPageHide = () => { void persistDraft(); };
-  window.addEventListener('pagehide', onPageHide);
-  function reconnectUploads() { items.filter((it) => it.status === 'failed').forEach(upload); }
-  window.addEventListener('online', reconnectUploads);
-  if (cfg.drafts !== false) {
-    // Disable composition briefly so a late storage read cannot replace new text.
-    compose.inert = true;
-    readDraft(savedDraftKey).then((draft) => {
-      if (closed || !draft) return;
-      draftStatus.innerHTML = '<span>You have an unfinished report on this device.</span> <button type="button" data-resume>Resume report</button> <button type="button" data-discard>Discard</button>';
-      draftStatus.querySelector('[data-resume]').onclick = () => {
-        titleInput.value = draft.title || '';
-        descInput.value = draft.description || '';
-        priority = PRIORITIES.some((p) => p.value === draft.priority) ? draft.priority : 'MEDIUM';
-        scrim.querySelectorAll('[data-prio]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.prio === priority)));
-        for (const item of (draft.items || []).slice(0, cfg.maxAttachments ?? 5)) addItem(item);
-        draftLoaded = true;
-        void persistDraft();
-      };
-      draftStatus.querySelector('[data-discard]').onclick = () => {
-        draftLoaded = true;
-        void persistDraft();
-      };
-    }).catch(() => { draftStatus.textContent = 'Draft storage is unavailable. Keep this tab open.'; })
-      .finally(() => { compose.inert = false; if (!draftStatus.querySelector('[data-resume]')) draftLoaded = true; });
+    launcher.setAttribute('aria-busy', 'true');
+    loadPanel(client.config.chunkBase).then(({ openPanel }) => {
+      if (cancelled) return;
+      launcher.removeAttribute('aria-busy');
+      dock.classList.add('over');
+      launcher.setAttribute('aria-expanded', 'true');
+      panel = openPanel({
+        root,
+        host,
+        dock,
+        client,
+        preloadCall,
+        themeControls,
+        onClose: () => {
+          open = null;
+          dock.classList.remove('over');
+          launcher.setAttribute('aria-expanded', 'false');
+        },
+      });
+    }, () => {
+      if (cancelled) return;
+      cancel();
+      showLoadFailure();
+    });
+    return pending;
   }
 
-  /* ---------- lifecycle ---------- */
+  /* ---------- fetched before it is asked for ---------- */
 
-  const previouslyFocused = document.activeElement;
-  const rootStyle = document.documentElement.style;
-  const previousOverflow = rootStyle.overflow;
-  rootStyle.overflow = 'hidden';
-
-  let closed = false;
-  // Assigned further down, once `showReport` exists to be called back into.
-  let stopListening = null;
-  function destroy() {
-    if (closed) return;
-    void persistDraft();
-    closed = true;
-    clearTimeout(draftTimer);
-    window.removeEventListener('pagehide', onPageHide);
-    window.removeEventListener('online', reconnectUploads);
-    recorder?.cancel();
-    // Stop listening before the DOM goes: a frame arriving after this would
-    // redraw a panel that is no longer on the page.
-    stopListening?.();
-    items.forEach((it) => it.previewUrl && URL.revokeObjectURL(it.previewUrl));
-    rootStyle.overflow = previousOverflow;
-    document.removeEventListener('keydown', onKeydown, true);
-    scrim.remove();
-    root.querySelector('.recbar')?.remove();
-    dock.hidden = false;
-    host.style.opacity = '';
-    onClose?.();
-  }
-
-  function close() {
-    if (closed) return;
-    // Let the exit animation play, but never wait on an event that a
-    // reduced-motion user's near-zero animation might deliver unpredictably.
-    scrim.classList.add('closing');
-    setTimeout(destroy, 160);
-    try { previouslyFocused?.focus?.(); } catch { /* element may be gone */ }
+  // The first press should open the panel, not wait on the network for it. So
+  // its code is fetched once the page has finished loading and gone quiet —
+  // never competing with the host's own first paint — and again, a no-op by
+  // then, the moment a pointer, a finger or the keyboard reaches the button.
+  // A failure is quiet here: the press that follows retries, and says so.
+  const preload = () => { loadPanel(client.config.chunkBase).catch(() => {}); };
+  for (const evt of ['pointerenter', 'touchstart', 'focus']) {
+    launcher.addEventListener(evt, preload, { once: true, passive: true });
   }
+  const cancelIdle = whenIdleAfterLoad(preload);
 
-  function onKeydown(e) {
-    if (e.key === 'Escape') {
-      e.stopPropagation();
-      if (recorder) { stopRecording({ keep: false }); return; }
-      if (!sending) close();
-      return;
-    }
-    if (e.key !== 'Tab' || recorder) return;
-    // Focus trap: the panel is modal, so Tab must not reach the host page.
-    const focusable = [...scrim.querySelectorAll(
-      'button:not(:disabled), input:not([hidden]), textarea, select, [href]',
-    )].filter((el) => el.offsetParent !== null || el === document.activeElement);
-    if (!focusable.length) return;
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    const active = scrim.getRootNode().activeElement;
-    if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
-    else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+  function preloadCall() {
+    loadCall(client.config.chunkBase).catch(() => {});
   }
 
-  document.addEventListener('keydown', onKeydown, true);
-  scrim.addEventListener('click', (e) => { if (e.target === scrim && !sending) close(); });
-  $('[data-act="close"]').addEventListener('click', close);
+  /* ---------- when the panel's code would not come ---------- */
 
-  /* ---------- severity ---------- */
-
-  scrim.querySelectorAll('[data-prio]').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      priority = btn.dataset.prio;
-      scheduleDraft();
-      scrim.querySelectorAll('[data-prio]').forEach((b) => {
-        b.setAttribute('aria-pressed', String(b === btn));
-      });
+  let failure = null;
+  function showLoadFailure() {
+    hideLoadFailure();
+    failure = document.createElement('div');
+    failure.className = 'msg err loadfail';
+    failure.setAttribute('role', 'alert');
+    failure.innerHTML = `${ICONS.alert}<span>The report form didn't load. Check your connection and try again.</span>`
+      + '<button type="button" data-act="retry">Try again</button>'
+      + `<button type="button" data-act="dismiss" aria-label="Dismiss">${ICONS.close}</button>`;
+    failure.querySelector('[data-act="retry"]').addEventListener('click', () => {
+      // Focus to the launcher first: the button pressed is about to go.
+      launcher.focus();
+      if (!open) open = openPanelWhenLoaded();
     });
-  });
-
-  /* ---------- attachments ---------- */
-
-  function say(text, kind = 'err') {
-    slot.innerHTML = text
-      ? `<div class="msg ${kind}">${kind === 'err' ? ICONS.alert : ''}<span>${escapeHtml(text)}</span></div>`
-      : '';
-  }
-
-  // The one required field says what is missing right under itself, rather
-  // than in a banner the reporter has to connect back to it.
-  const titleErr = $('#bc-title-err');
-  function flagTitle(text) {
-    titleErr.hidden = !text;
-    titleErr.innerHTML = text ? `${ICONS.alert}<span>${escapeHtml(text)}</span>` : '';
-    titleInput.classList.toggle('invalid', Boolean(text));
-    titleInput.setAttribute('aria-invalid', String(Boolean(text)));
-  }
-  titleInput.addEventListener('input', () => { if (titleInput.value.trim()) flagTitle(''); });
-
-  function refreshSendState() {
-    const busy = items.some((it) => it.status === 'uploading');
-    sendBtn.disabled = sending || busy || items.some((it) => it.status === 'failed');
-    note.textContent = busy ? 'Waiting for the upload to finish…' : items.some((it) => it.status === 'failed') ? 'Retry or remove failed attachments before sending.' : '';
-    const max = cfg.maxAttachments ?? 5;
-    scrim.querySelectorAll('.tool').forEach((t) => {
-      t.disabled = sending || items.length >= max;
+    failure.querySelector('[data-act="dismiss"]').addEventListener('click', () => {
+      launcher.focus();
+      hideLoadFailure();
     });
-    const count = $('.field-head .count');
-    if (count) count.textContent = items.length ? `${items.length} of ${max}` : '';
+    // First in the dock, so it sits furthest from the corner: above the
+    // launcher in a bottom dock, below it in a top one.
+    dock.prepend(failure);
   }
 
-  function drawThumb(item) {
-    const el = item.el;
-    const label = item.kind === 'VIDEO' ? 'Video' : 'Shot';
-    const preview = item.kind === 'VIDEO'
-      ? `<video src="${item.previewUrl}" muted playsinline preload="metadata"></video>`
-      : `<img src="${item.previewUrl}" alt="" />`;
-
-    let veil = '';
-    if (item.status === 'uploading') {
-      veil = `<div class="veil"><div class="spinner"></div><div class="bar"><i style="width:${Math.round(item.progress * 100)}%"></i></div></div>`;
-    } else if (item.status === 'failed') {
-      veil = `<div class="veil err"><button type="button" data-act="retry" aria-label="Retry upload">${ICONS.retry}</button>Failed</div>`;
-    }
-
-    el.innerHTML = `
-      ${preview}
-      <span class="kind">${label} · ${humanSize(item.size)}</span>
-      <button class="drop" type="button" data-act="drop" aria-label="Remove ${label.toLowerCase()}">${ICONS.close}</button>
-      ${veil}`;
-
-    el.querySelector('[data-act="drop"]').addEventListener('click', () => removeItem(item));
-    el.querySelector('[data-act="retry"]')?.addEventListener('click', () => upload(item));
+  function hideLoadFailure() {
+    failure?.remove();
+    failure = null;
   }
 
-  function removeItem(item) {
-    const i = items.indexOf(item);
-    if (i >= 0) items.splice(i, 1);
-    if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
-    item.el.remove();
-    void persistDraft();
-    refreshSendState();
-  }
 
-  async function upload(item) {
-    item.status = 'uploading';
-    item.progress = 0;
-    drawThumb(item);
-    refreshSendState();
-    try {
-      const { storageKey, mime } = await client.uploadAttachment(item.blob, item.mime, (p) => {
-        item.progress = p;
-        // Only the width changes while uploading — repainting the whole tile
-        // would restart the entrance animation on every progress event.
-        const fill = item.el.querySelector('.bar i');
-        if (fill) fill.style.width = `${Math.round(p * 100)}%`;
-      });
-      item.storageKey = storageKey;
-      item.mime = mime;
-      item.status = 'ready';
-    } catch (err) {
-      item.status = 'failed';
-      say(err.message.replace('[BugCatch] ', ''));
-    }
-    drawThumb(item);
-    refreshSendState();
-  }
+  /* ---------- what the project is telling visitors ---------- */
 
-  function addItem({ blob, mime, kind }) {
-    const max = cfg.maxAttachmentBytes ?? 25 * 1024 * 1024;
-    if (blob.size > max) {
-      say(`That file is ${humanSize(blob.size)} — the limit is ${humanSize(max)}.`);
-      return;
-    }
-    // Held to the report set, not the full upload set. A report's attachments
-    // are typed SCREENSHOT or VIDEO, so a document accepted here would be filed
-    // as a screenshot and render as a broken image. Documents and voice notes
-    // go on a message instead, where they keep their own type.
-    const normalized = normalizeMime(mime || blob.type, REPORT_MIMES);
-    if (!normalized) {
-      say('Only PNG, JPEG, WebP, WebM and MP4 files can be attached to a report.');
-      return;
-    }
-    const item = {
-      blob, kind, mime: normalized, size: blob.size,
-      previewUrl: URL.createObjectURL(blob),
-      status: 'uploading', progress: 0, storageKey: null,
-      el: document.createElement('div'),
-    };
-    item.el.className = 'thumb';
-    items.push(item);
-    thumbs.appendChild(item.el);
-    say('');
-    void persistDraft();
-    upload(item);
+  // An announcement written for beside the button, asked for once the page has
+  // gone quiet — like the panel's code, never competing with the host's first
+  // paint. The answer is kept a few minutes per browser (announcements.js), so
+  // this is not a request per page view. Shown until it is closed, the panel
+  // opens, or it is over.
+  let notice = null;
+  function showNotice(a) {
+    hideNotice();
+    notice = noticeNode(a, {
+      where: 'launcher',
+      onDismiss: (closed) => {
+        client.dismissAnnouncement(closed);
+        launcher.focus();
+        hideNotice();
+      },
+    });
+    // After the load-failure card if there is one, so that stays outermost.
+    if (failure) failure.after(notice);
+    else dock.prepend(notice);
   }
 
-  /* Hide our own UI so the capture shows the page, not this dialog. */
-  async function withWidgetHidden(fn) {
-    host.style.opacity = '0';
-    host.style.pointerEvents = 'none';
-    // One frame so the browser has actually painted the hidden state before
-    // the picker — and the frame we grab — is taken.
-    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
-    try {
-      return await fn();
-    } finally {
-      host.style.opacity = '';
-      host.style.pointerEvents = '';
-    }
+  function hideNotice() {
+    notice?.remove();
+    notice = null;
   }
 
-  scrim.querySelector('[data-act="shot"]')?.addEventListener('click', async () => {
-    try {
-      const shot = await withWidgetHidden(captureScreenshot);
-      addItem(shot);
-    } catch (err) {
-      // NotAllowedError is the user dismissing the picker — not a failure.
-      if (err?.name !== 'NotAllowedError') say(`Screenshot failed: ${err.message}`);
-    }
-  });
-
-  scrim.querySelector('[data-act="file"]')?.addEventListener('click', () => filePicker.click());
-  filePicker?.addEventListener('change', () => {
-    const room = (cfg.maxAttachments ?? 5) - items.length;
-    [...filePicker.files].slice(0, Math.max(room, 0)).forEach((file) => {
-      addItem({
-        blob: file,
-        mime: file.type,
-        kind: file.type.startsWith('video/') ? 'VIDEO' : 'SCREENSHOT',
-      });
-    });
-    filePicker.value = '';
+  const cancelNotice = client.config.announcements === false ? () => {} : whenIdleAfterLoad(() => {
+    client.announcements()
+      .then((list) => {
+        const beside = list.find((a) => a.placement === 'launcher');
+        if (beside && !open && host.isConnected) showNotice(beside);
+      })
+      .catch(() => { /* no card is the answer to every failure */ });
   });
 
-  /* ---------- recording ---------- */
-
-  scrim.querySelector('[data-act="rec"]')?.addEventListener('click', async () => {
-    const maxMs = cfg.maxRecordingMs ?? 120_000;
-    let bar;
-    try {
-      recorder = await startRecording({
-        maxMs,
-        onTick: (s) => { if (bar) bar.querySelector('.time').textContent = humanDuration(s); },
-        onAutoStop: () => { if (recorder) stopRecording({ keep: true }); },
-      });
-    } catch (err) {
-      if (err?.name !== 'NotAllowedError') say(`Recording failed: ${err.message}`);
-      return;
-    }
+  dock.append(launcher);
+  root.appendChild(dock);
 
-    // Step out of the way for the duration: a recording of this dialog sitting
-    // over the page is not what anyone means by "record the bug".
-    scrim.style.display = 'none';
-    dock.hidden = true;
+  document.body.appendChild(host);
+  // Integration hook: BugCatch.open() / close() / isOpen() drive the same
+  // launcher a person would press, so there is one way in to the panel.
+  client.widgetControls = {
+    open: () => { if (!open) launcher.click(); },
+    close: () => { open?.close(); },
+    isOpen: () => Boolean(open),
+  };
+  return () => {
+    cancelIdle(); cancelNotice(); open?.destroy(); host.remove(); client.widgetControls = null;
+  };
+}
 
-    bar = document.createElement('div');
-    bar.className = 'recbar';
-    bar.innerHTML = `
-      <span class="dot"></span>
-      <span class="time">0:00</span>
-      <span class="hint">Recording — up to ${humanDuration(Math.round(maxMs / 1000))}</span>
-      <button class="stop" type="button">Stop</button>
-      <button class="ghost" type="button">Discard</button>`;
-    bar.querySelector('.stop').addEventListener('click', () => stopRecording({ keep: true }));
-    bar.querySelector('.ghost').addEventListener('click', () => stopRecording({ keep: false }));
-    root.appendChild(bar);
-    bar.querySelector('.stop').focus();
-  });
+/** Normalises a configured theme to one of the three the switch offers. */
+function themeValue(theme) {
+  return theme === 'dark' || theme === 'light' ? theme : 'auto';
+}
 
-  async function stopRecording({ keep }) {
-    const rec = recorder;
-    if (!rec) return;
-    recorder = null;
-    root.querySelector('.recbar')?.remove();
-    scrim.style.display = '';
-    dock.hidden = false;
+function themeClass(theme) {
+  if (theme === 'dark') return 'bc-dark';
+  if (theme === 'light') return 'bc-light';
+  return 'bc-auto';
+}
 
-    if (!keep) { rec.cancel(); titleInput.focus(); return; }
-    try {
-      const clip = await rec.stop();
-      if (clip.blob.size) addItem(clip);
-      else say('That recording came back empty — nothing was captured.');
-    } catch (err) {
-      say(`Recording failed: ${err.message}`);
+/**
+ * Run `fn` once the page has loaded and the browser has a moment to spare.
+ * Returns a cancel, for a widget torn down before then.
+ */
+function whenIdleAfterLoad(fn) {
+  let cancel = () => {};
+  const idle = () => {
+    if (typeof requestIdleCallback === 'function') {
+      // The timeout is a ceiling, not a delay: a page that is never idle still
+      // gets its panel fetched, a few seconds in.
+      const id = requestIdleCallback(fn, { timeout: 5000 });
+      cancel = () => cancelIdleCallback(id);
+    } else {
+      // Safari before 18 has no idle callback; a short wait after load is the
+      // nearest thing.
+      const id = setTimeout(fn, 1500);
+      cancel = () => clearTimeout(id);
     }
-    titleInput.focus();
-  }
-
-  /* ---------- which record is this about ---------- */
-
-  // What this project asks for, and what the reporter has answered.
-  //
-  // The question is asked at Send and not before, which is the whole design of
-  // it. A form that opens with "loan number" above "what went wrong" tells
-  // somebody they have paperwork to do before they may complain, and most of
-  // them will not — while the same question, asked once, after they have said
-  // their piece, and only when what they said did not already contain the
-  // answer, is a reasonable thing to be asked. Most reporters never see it: the
-  // loan number was in the sentence.
-  let refConfig = { policy: 'off', fields: [] };
-  let refOpen = false;
-  let refChoice = null;   // which field they are answering; null = not picked yet
-  let refValue = '';
-  let refError = '';
-  // What we read in their text but could not place for sure, offered as taps:
-  // [{ value, kinds: [{ key, label }] }]. `refMode` says why the card is open —
-  // 'confirm' when the text had two answers, 'suggest' when it had an unlabelled
-  // one, 'ask' when it had none.
-  let refCandidates = [];
-  let refMode = 'ask';
-  // Set once they have answered or explicitly skipped, so Send stops asking.
-  let refSettled = false;
-  // Set once we have said "that does not look right" about the current value.
-  // Its own flag rather than reusing refSettled, which was the first attempt
-  // and was a loop: the warning returns early, the next press re-validates the
-  // same unchanged value, warns again, and the report can never be sent. One
-  // warning per value, and then it is their call.
-  let refWarned = false;
-
-  client.referenceFields()
-    .then((cfg) => { refConfig = cfg; showFound(); })
-    .catch(() => { /* off is the safe answer to every failure */ });
-
-  /** What the text says: found (sure), conflicts (ask which), loose (offer). */
-  function readText() {
-    if (refConfig.policy === 'off' || !refConfig.fields.length) return { found: [], conflicts: [], loose: [] };
-    return readReferences(refConfig.fields, [titleInput.value, descInput.value]);
-  }
-
-  /** Sure enough to send without a question: something found, nothing contested. */
-  function textAnswers(read = readText()) {
-    return read.found.length > 0 && read.conflicts.length === 0;
+  };
+  if (document.readyState === 'complete') idle();
+  else {
+    window.addEventListener('load', idle, { once: true });
+    cancel = () => window.removeEventListener('load', idle);
   }
-
-  /** The answer to send, or an empty list. */
-  function answeredReference() {
-    if (!refChoice || !refValue.trim()) return [];
-    return [{ key: refChoice, value: refValue.trim().slice(0, 120) }];
-  }
-
-  // A quiet line under the description while they type, so somebody who put
-  // their loan number in the sentence can see it was read and does not go
-  // looking for a box to type it into again.
-  const foundNote = document.createElement('p');
-  foundNote.className = 'ref-found';
-  foundNote.setAttribute('aria-live', 'polite');
-  foundNote.hidden = true;
-  descInput.closest('.field').after(foundNote);
-  let foundTimer;
-  function showFound() {
-    const read = readText();
-    if (textAnswers(read)) {
-      const list = read.found.slice(0, 2).map((r) => `${escapeHtml(r.label)} <b>${escapeHtml(shortId(r.value))}</b>`).join(', ');
-      foundNote.innerHTML = `${ICONS.check}<span>Found your ${list} — no need to add it again.</span>`;
-      foundNote.hidden = false;
-      // They have answered in the text; a card still asking would be not listening.
-      if (refOpen && !answeredReference().length) { refOpen = false; drawRefs(); }
-    } else {
-      foundNote.hidden = true;
-      foundNote.innerHTML = '';
-    }
-  }
-  const queueFound = () => { clearTimeout(foundTimer); foundTimer = setTimeout(showFound, 250); };
-  titleInput.addEventListener('input', queueFound);
-  descInput.addEventListener('input', queueFound);
-
-  /** A UUID is long; the chip shows its ends, the title shows all of it. */
-  function shortId(value) {
-    return value.length > 20 ? `${value.slice(0, 8)}…${value.slice(-4)}` : value;
-  }
-
-  function candidateFor(value) {
-    const v = value.trim().toLowerCase();
-    return refCandidates.find((c) => c.value.toLowerCase() === v) || null;
-  }
-
-  /** Pick a candidate: its value, and its kind when only one kind fits. */
-  function takeCandidate(c) {
-    refValue = c.value;
-    if (c.kinds.length === 1) refChoice = c.kinds[0].key;
-    else if (!c.kinds.some((k) => k.key === refChoice)) refChoice = null;
-    refError = '';
-    refWarned = false;
-  }
-
-  function drawRefs() {
-    if (!refOpen) { refsBox.hidden = true; refsBox.innerHTML = ''; return; }
-    const field = refConfig.fields.find((f) => f.key === refChoice) || null;
-    const optional = refConfig.policy !== 'required';
-    const current = candidateFor(refValue);
-    // Kinds worth offering: the ones the picked value could be, when we know;
-    // every kind otherwise. Never zero — a guess of ours must not lock out the
-    // right answer.
-    const kinds = current && current.kinds.length > 1
-      ? refConfig.fields.filter((f) => current.kinds.some((k) => k.key === f.key))
-      : refConfig.fields;
-    // Two loan numbers: the kind is not in question, only which one — so the
-    // kind chips would be a second question nobody needs to answer.
-    const sharedKind = refCandidates.length > 1
-      && refCandidates.every((c) => c.kinds.length === 1 && c.kinds[0].key === refCandidates[0].kinds[0].key);
-
-    const head = {
-      confirm: refCandidates.length > 1
-        ? ['Which one is this about?', 'We found more than one ID in your message. Pick the one this problem is about.']
-        : ['Is this the right ID?', 'This could be more than one kind of ID. Tell us which it is.'],
-      suggest: ['Is this your ID?', 'We spotted this in your message. Tell us what it is so we can find your record.'],
-      ask: optional
-        ? ['One more thing', 'So we can find your record — this helps us answer faster.']
-        : ['We need one detail', 'We need one of these to look this up.'],
-    }[refMode];
-
-    refsBox.hidden = false;
-    // A handful of kinds read best as chips to tap; a long list goes back to
-    // a select so the card does not turn into a wall of pills.
-    const many = kinds.length > 6;
-    refsBox.innerHTML = `
-      <div class="ask-head">
-        <span class="avatar" aria-hidden="true">${ICONS.sparkle}</span>
-        <div>
-          <strong>${escapeHtml(head[0])}</strong>
-          <p class="why">${escapeHtml(head[1])}</p>
-        </div>
-      </div>
-      ${refCandidates.length > 1 ? `
-      <div class="chips cands" role="group" aria-label="IDs found in your message">
-        ${refCandidates.map((c, i) => `
-          <button type="button" data-ref-cand="${i}" title="${escapeHtml(c.value)}"
-            aria-pressed="${!!current && current === c}">${escapeHtml(shortId(c.value))}</button>
-        `).join('')}
-      </div>` : ''}
-      ${kinds.length > 1 && !many && !sharedKind ? `
-      <div class="chips" role="group" aria-label="Which detail you are giving">
-        ${kinds.map((f) => `
-          <button type="button" data-ref-kind="${escapeHtml(f.key)}" aria-pressed="${!!field && f.key === field.key}">${escapeHtml(f.label)}</button>
-        `).join('')}
-      </div>` : ''}
-      <div class="row">
-        ${many ? `
-        <select class="ref-kind" aria-label="Which detail you are giving">
-          ${field ? '' : '<option value="" selected disabled>What is it?</option>'}
-          ${kinds.map((f) => `
-            <option value="${escapeHtml(f.key)}" ${field && f.key === field.key ? 'selected' : ''}>${escapeHtml(f.label)}</option>
-          `).join('')}
-        </select>` : ''}
-        <input class="ref-value${refError ? ' invalid' : ''}" type="${field?.inputMode === 'email' ? 'email' : 'text'}"
-          inputmode="${escapeHtml(field?.inputMode === 'numeric' || field?.inputMode === 'tel' ? 'numeric' : 'text')}"
-          value="${escapeHtml(refValue)}"
-          placeholder="${escapeHtml(field ? (field.placeholder || field.label) : 'Your ID')}"
-          aria-label="${escapeHtml(field ? field.label : 'Your ID')}" ${refError ? 'aria-invalid="true"' : ''} />
-      </div>
-      ${field?.hint ? `<p class="hint">${escapeHtml(field.hint)}</p>` : ''}
-      ${refError ? `<p class="field-err" role="alert">${ICONS.alert}<span>${escapeHtml(refError)}</span></p>` : ''}
-      ${optional ? `<button type="button" class="link" data-act="ref-skip">${
-        refMode === 'ask' ? 'I don\'t have this — send without it' : 'Not sure — send as it is'}</button>` : ''}`;
-
-    refsBox.querySelectorAll('[data-ref-cand]').forEach((chip) => {
-      chip.addEventListener('click', () => {
-        takeCandidate(refCandidates[Number(chip.dataset.refCand)]);
-        drawRefs();
-      });
-    });
-    refsBox.querySelectorAll('[data-ref-kind]').forEach((chip) => {
-      chip.addEventListener('click', () => {
-        refChoice = chip.dataset.refKind;
-        refError = '';
-        refWarned = false;
-        drawRefs();
-      });
-    });
-    const value = refsBox.querySelector('.ref-value');
-    value.addEventListener('input', () => {
-      refValue = value.value;
-      refError = '';
-      // A changed value has not been warned about yet.
-      refWarned = false;
-    });
-    // Enter in the box is the same gesture as pressing Send, which is what
-    // somebody who has just been asked one question expects it to be.
-    value.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') { e.preventDefault(); sendBtn.click(); }
-    });
-    refsBox.querySelector('.ref-kind')?.addEventListener('change', (e) => {
-      refChoice = e.target.value;
-      refError = '';
-      drawRefs();
-      refsBox.querySelector('.ref-value')?.focus();
-    });
-    refsBox.querySelector('[data-act="ref-skip"]')?.addEventListener('click', () => {
-      // Skipping is answering. Without this the panel asks again on the next
-      // press and the reporter is in a loop with a button that does nothing.
-      // The text still goes; the server reads it either way.
-      refSettled = true;
-      refOpen = false;
-      refChoice = null;
-      refValue = '';
-      refError = '';
-      refWarned = false;
-      drawRefs();
-      say('');
-    });
-
-    // Focus where the next decision is: the kind, when that is all that is
-    // missing; the box otherwise.
-    const next = !field && refValue ? refsBox.querySelector('[data-ref-kind], .ref-kind') : null;
-    (next || value).focus();
-  }
-
-  /**
-   * Open the question, pre-filled with the best of what the text offered.
-   *
-   * Conflicts first — the text said two things and only the reporter knows
-   * which — then loose IDs, which are probably the answer and only need a
-   * name. Nothing, and it is the plain question it always was.
-   */
-  function openRefs(read) {
-    refCandidates = read.conflicts.length ? read.conflicts : read.loose.slice(0, 4);
-    refMode = read.conflicts.length ? 'confirm' : read.loose.length ? 'suggest' : 'ask';
-    refOpen = true;
-    if (refCandidates.length) {
-      // One contested value: pre-fill it so they only choose what it is. Two
-      // or more: pick nothing, because picking is the question.
-      if (refCandidates.length === 1) takeCandidate(refCandidates[0]);
-      else {
-        refValue = '';
-        const [first] = refCandidates;
-        const same = refCandidates.every((c) => c.kinds.length === 1 && c.kinds[0].key === first.kinds[0].key);
-        refChoice = same ? first.kinds[0].key : null;
-      }
-    } else {
-      refChoice = refChoice || refConfig.fields[0].key;
-    }
-    drawRefs();
-  }
-
-  /**
-   * Whether Send should stop and ask.
-   *
-   * Never when the text answered it outright. Once when the text said two
-   * things or something unlabelled — on every policy, because sending the
-   * wrong record's id with confidence is worse than one extra tap. And the
-   * plain question on `optional`/`required` projects as before.
-   */
-  function needsReference() {
-    if (refConfig.policy === 'off' || !refConfig.fields.length) return false;
-    if (answeredReference().length) return false;
-    const read = readText();
-    if (textAnswers(read)) return false;
-    if (refSettled && refConfig.policy !== 'required') return false;
-    return read;
-  }
-
-  /* ---------- send ---------- */
-
-  sendBtn.addEventListener('click', async () => {
-    const title = titleInput.value;
-    if (!title.trim()) {
-      flagTitle('Add a few words about what went wrong — a short sentence is plenty.');
-      titleInput.focus();
-      return;
-    }
-
-    // Ask, if this project asks and nothing they wrote answered it. The first
-    // press opens the question rather than sending; the second sends. That
-    // costs one extra press on projects that want an identifier, and it is the
-    // only shape that does not put paperwork in front of a person who came here
-    // to say something is broken.
-    //
-    // First, though: a value in the box but no kind picked. Asked rather than
-    // guessed — a wrong kind joins on the wrong table.
-    if (refOpen && refValue.trim() && !refChoice) {
-      refError = 'Pick what this ID is.';
-      drawRefs();
-      return;
-    }
-
-    const read = needsReference();
-    if (read) {
-      if (!refOpen) openRefs(read); else drawRefs();
-      say('');
-      return;
-    }
-
-    // They chose a field and typed something that is not that shape. Advisory
-    // on the server — a value that fails is still what they believe identifies
-    // them, and it is kept — but worth one chance to fix a typo here, where the
-    // number is still on screen.
-    if (refChoice && refValue.trim()) {
-      const field = refConfig.fields.find((f) => f.key === refChoice);
-      if (!refWarned && field && !validateReference(field, refValue)) {
-        refError = `That does not look like a ${field.label.toLowerCase()}. Press Send again to use it anyway.`;
-        // Once, and then it is their call. Our idea of the shape of somebody's
-        // account number is not better than theirs, and refusing outright is
-        // how a genuine reference gets lost — so the second press sends it and
-        // the API keeps it, marked as not matching the expected format.
-        refWarned = true;
-        drawRefs();
-        return;
-      }
-    }
-
-    sending = true;
-    say('');
-    refreshSendState();
-    const original = sendBtn.innerHTML;
-    sendBtn.innerHTML = '<span class="spinner" aria-hidden="true"></span>Sending…';
-
-    try {
-      const res = await client.report({
-        title,
-        description: descInput.value,
-        priority,
-        references: answeredReference(),
-        issue: pickedIssue?.key || null,
-        attachments: items
-          .filter((it) => it.status === 'ready')
-          .map((it) => ({ type: it.kind, storageKey: it.storageKey, mime: it.mime })),
-      });
-      if (res?.cancelled) { sending = false; sendBtn.innerHTML = original; refreshSendState(); return; }
-      draftSubmitted = true;
-      clearTimeout(draftTimer);
-      await draftWrites;
-      if (cfg.drafts !== false) await draftOperation(savedDraftKey, null).catch(() => {});
-      succeed(res);
-    } catch (err) {
-      sending = false;
-      sendBtn.innerHTML = original;
-      say(err.message.replace('[BugCatch] ', ''));
-      refreshSendState();
-      // One reason a send fails is that this browser was signed out while the
-      // panel sat open — the same address signed in elsewhere. The message
-      // above already says so; this puts the panel back in step with it
-      // instead of leaving a Send button that will fail the same way again.
-      if (login.mode !== 'off') refreshLogin().catch(() => {});
-    }
-  });
-
-  scrim.querySelector('[data-act="history"]')?.addEventListener('click', showHistory);
-
-  /* ---------- what is already known ---------- */
-
-  // The list as it was last fetched, and who has said what about it. Held here
-  // rather than re-read from the DOM so a re-render after a join does not have
-  // to parse its own markup back out.
-  let issues = [];
-  let issueError = '';
-  let askingFor = null;
-  let matchAbort = null;
-
-  // Asked once when the dialog opens, like the call button above and for the
-  // same reason: it is one request per opened widget rather than one per page
-  // load of every site running this SDK, and most projects will answer with an
-  // empty list forever.
-  function loadKnownIssues() {
-    if (cfg.knownIssues === false) return;
-    client.knownIssues()
-      .then((rows) => { issues = rows; drawKnown(); })
-      .catch(() => { /* a help panel that cannot load is simply not drawn */ });
-  }
-
-  // Re-run as the title is typed, so the panel narrows to what they are
-  // actually describing. Debounced, and the previous request is aborted rather
-  // than left to land: a fast typist otherwise renders whichever response comes
-  // back last, which is not necessarily the one matching the box.
-  let matchTimer = null;
-  function matchKnown(query) {
-    if (cfg.knownIssues === false) return;
-    clearTimeout(matchTimer);
-    matchAbort?.abort();
-    const q = (query || '').trim();
-    if (q.length < 3) { loadKnownIssues(); return; }
-    matchTimer = setTimeout(() => {
-      matchAbort = new AbortController();
-      client.matchKnownIssues(q, { signal: matchAbort.signal })
-        .then((rows) => {
-          // An empty result means "nothing like this is known", which is not
-          // the same as "nothing is known" — fall back to the full list rather
-          // than blanking a panel the reporter was reading.
-          if (rows.length) { issues = rows; drawKnown(); }
-        })
-        .catch(() => {});
-    }, 250);
-  }
-
-  function drawKnown() {
-    if (!issues.length) { known.hidden = true; known.innerHTML = ''; return; }
-    known.hidden = false;
-    known.innerHTML = `
-      <p class="known-h">Already reported</p>
-      ${issues.map((issue) => `
-        <div class="issue ${issue.joined ? 'is-joined' : ''}">
-          <span class="who">
-            <span class="t">${escapeHtml(issue.title)}</span>
-            <span class="meta">${escapeHtml(knownMeta(issue))}</span>
-          </span>
-          <button class="join" type="button" data-join="${escapeHtml(issue.id)}"
-            ${issue.joined ? 'disabled' : ''}>${issue.joined ? 'Following' : 'Me too'}</button>
-        </div>
-        ${askingFor === issue.id ? `
-        <div class="ask">
-          <input type="email" class="join-email" placeholder="you@example.com"
-            aria-label="Your email, so we can tell you when this is fixed" />
-          <button class="ghost" type="button" data-join-confirm="${escapeHtml(issue.id)}">Follow</button>
-        </div>` : ''}
-      `).join('')}
-      ${issueError ? `<p class="err">${escapeHtml(issueError)}</p>` : ''}`;
-  }
-
-  // What a reporter is told about an issue beside its title. Deliberately not
-  // its severity: how bad the team thinks this is, published to everybody who
-  // opens the widget, is an internal judgement that reads as a promise.
-  function knownMeta(issue) {
-    const state = issue.status === 'IN_PROGRESS' ? 'Being worked on now' : 'Not fixed yet';
-    // The count is dropped entirely at zero rather than written as "0 people",
-    // or as a bare "Reported" that says nothing the heading above has not
-    // already said. Nobody having pressed the button yet is not a fact about
-    // this issue worth a reporter's attention.
-    const others = issue.affectedCount === 0
-      ? ''
-      : ` · ${issue.affectedCount} ${issue.affectedCount === 1 ? 'person has' : 'people have'} said this is happening to them`;
-    return `${state} · reported ${relativeDay(issue.since)}${others}`;
-  }
-
-  known.addEventListener('click', async (e) => {
-    const start = e.target.closest('[data-join]');
-    const confirm = e.target.closest('[data-join-confirm]');
-    if (!start && !confirm) return;
-
-    const bugId = (confirm || start).getAttribute(confirm ? 'data-join-confirm' : 'data-join');
-    issueError = '';
-
-    // An address is what joining buys them — being told when it is fixed — so
-    // ask for one when neither a sign-in nor identify() has supplied it, rather
-    // than recording somebody nobody can ever write to.
-    const email = known.querySelector('.join-email')?.value?.trim()
-      || client.signedInAs()?.email
-      || client.config.user?.email;
-    if (!email) {
-      askingFor = bugId;
-      drawKnown();
-      known.querySelector('.join-email')?.focus();
-      return;
-    }
-
-    try {
-      const result = await client.meToo(bugId, { email });
-      askingFor = null;
-      issues = issues.map((issue) => (issue.id === bugId
-        ? { ...issue, joined: true, affectedCount: result.affectedCount ?? issue.affectedCount }
-        : issue));
-      drawKnown();
-    } catch (err) {
-      issueError = err.message.replace('[BugCatch] ', '');
-      drawKnown();
-    }
-  });
-
-  loadKnownIssues();
-  titleInput.addEventListener('input', () => matchKnown(titleInput.value));
-
-  /* ---------- questions the assistant answers by itself ---------- */
-
-  // One tap instead of a sentence: the report's title becomes the question,
-  // and the assistant knows exactly what is being asked — it looks the
-  // reporter up, answers from their account, and asks whether that settled
-  // it. Tapping the chosen one again lets it go.
-  let agentIssues = [];
-  let pickedIssue = null;
-
-  function drawPicks() {
-    if (!agentIssues.length) { picks.hidden = true; picks.innerHTML = ''; return; }
-    picks.hidden = false;
-    picks.innerHTML = `
-      <p class="picks-h">Get an answer right away</p>
-      <div class="picks-grid" role="group" aria-label="Common questions">
-        ${agentIssues.map((issue) => `
-          <button type="button" class="pick" data-pick="${escapeHtml(issue.key)}"
-            aria-pressed="${pickedIssue?.key === issue.key}">
-            <span class="t">${escapeHtml(issue.title)}</span>
-            ${issue.hint ? `<span class="h">${escapeHtml(issue.hint)}</span>` : ''}
-          </button>`).join('')}
-      </div>
-      ${pickedIssue ? `<p class="picks-note">${ICONS.check}<span>Our assistant will check your account and reply here. Add anything else below, then send.</span></p>` : ''}`;
-  }
-
-  picks.addEventListener('click', (e) => {
-    const btn = e.target.closest('[data-pick]');
-    if (!btn) return;
-    const issue = agentIssues.find((i) => i.key === btn.dataset.pick);
-    if (!issue) return;
-    const titleWasPick = pickedIssue && titleInput.value.trim() === pickedIssue.title;
-    if (pickedIssue?.key === issue.key) {
-      pickedIssue = null;
-      if (titleWasPick) titleInput.value = '';
-    } else {
-      pickedIssue = issue;
-      // Their own words are never overwritten — only an empty title, or the
-      // one the previous tap put there.
-      if (!titleInput.value.trim() || titleWasPick) titleInput.value = issue.title;
-    }
-    titleInput.dispatchEvent(new Event('input', { bubbles: true }));
-    drawPicks();
-    if (pickedIssue) descInput.focus();
-  });
-
-  if (cfg.agentIssues !== false && typeof client.agentIssues === 'function') {
-    client.agentIssues()
-      .then((rows) => { agentIssues = rows; drawPicks(); })
-      .catch(() => { /* no tiles is the safe answer to every failure */ });
-  }
-
-  /* ---------- talk to the team ---------- */
-
-  // Asked once, when the dialog opens, and the button stays hidden unless the
-  // answer is yes. Doing it here rather than at init keeps one request off the
-  // page load of every site this SDK is on, for a button most of them will
-  // never show.
-  //
-  // The wording is fixed because there is one kind of call: it rings a room and
-  // may go unanswered. A button that said "talk to us" would have somebody
-  // expecting an instant answer sit through twenty seconds of ringing.
-  let callOffered = false;
-  function offerCall() {
-    client.callKind()
-      .then((kind) => {
-        if (!kind) return;
-        callOffered = true;
-        // Never over a panel that is still asking who this is: the call would
-        // file a report, and on a project that requires sign-in that is the one
-        // thing this panel is holding back.
-        callBtn.hidden = mustSignIn();
-      })
-      .catch(() => { /* not available is the safe answer to every failure */ });
-  }
-  offerCall();
-
-  /* ---------- who is reporting ---------- */
-
-  // Three states, and the project picks which: 'off' is every project that has
-  // not asked for this and draws nothing at all; 'optional' offers a sign-in
-  // above the form that the reporter may ignore; 'required' replaces the form
-  // with it until they have.
-  //
-  // Asked on every open rather than remembered for the page, because the answer
-  // includes whether this browser's session is still live — and it can end
-  // somewhere else, when the same address signs in on another device. A widget
-  // holding a cached "signed in as you" would find out at the moment the report
-  // failed, which is the worst moment to discover it.
-  let login = { mode: client.lastLoginMode || 'off', signedIn: null };
-  // 'idle' — showing who they are; 'email' / 'code' — the two steps of getting there.
-  let step = 'idle';
-  let pendingEmail = client.config.user?.email || '';
-  let pendingCode = '';
-  let signInBusy = false;
-  let signInError = '';
-
-  const mustSignIn = () => login.mode === 'required' && !login.signedIn;
-
-  /** Show or hide everything that only makes sense once we know who is filing. */
-  function applyGate() {
-    const shut = mustSignIn();
-    compose.hidden = shut;
-    sendBtn.hidden = shut;
-    if (historyBtn) historyBtn.hidden = shut;
-    // The call offer is the same errand as the form, so it goes with it — and
-    // comes back only if the API had already said this project can take one.
-    if (shut) callBtn.hidden = true;
-    else if (callOffered) callBtn.hidden = false;
-  }
-
-  function drawWhoami() {
-    if (login.mode === 'off') {
-      whoami.hidden = true;
-      whoami.innerHTML = '';
-      return;
-    }
-    whoami.hidden = false;
-    whoami.classList.toggle('asking', step !== 'idle');
-
-    const problem = signInError ? `<div class="after err">${escapeHtml(signInError)}</div>` : '';
-
-    if (step === 'idle') {
-      if (login.signedIn) {
-        whoami.innerHTML = `<span class="who">Signed in as <strong>${escapeHtml(login.signedIn.email)}</strong></span>`
-          + '<button type="button" class="link" data-act="signout">Sign out</button>';
-        return;
-      }
-      // An address the host application passed for its own signed-in user is
-      // not nothing — the report will carry it — so saying "anonymously" over
-      // the top of one would be untrue. It is simply not proved, which is what
-      // the offer beside it is for.
-      const claimed = client.config.user?.email;
-      whoami.innerHTML = `<span class="who">${login.mode === 'required'
-        ? 'Sign in to report a bug here.'
-        : claimed
-          ? `Reporting as <strong>${escapeHtml(claimed)}</strong>.`
-          : 'Reporting anonymously — sign in and we can tell you what happens next.'}</span>`
-        + '<button type="button" class="link" data-act="signin">Sign in</button>';
-      return;
-    }
-
-    if (step === 'email') {
-      whoami.innerHTML = `
-        <p class="why">Sign in with any email address — we'll send you a code.
-          It's how you hear back about this report${login.mode === 'required' ? ', and this project asks for it' : ''}.</p>
-        <div class="row">
-          <input type="email" data-fld="email" value="${escapeHtml(pendingEmail)}"
-            placeholder="you@example.com" autocomplete="email" spellcheck="false"
-            aria-label="Your email address" ${signInBusy ? 'disabled' : ''} />
-          <button type="button" class="primary" data-act="code" ${signInBusy ? 'disabled' : ''}>
-            ${signInBusy ? 'Sending…' : 'Send code'}
-          </button>
-        </div>
-        ${problem}
-        ${login.mode === 'optional'
-          ? '<div class="after"><button type="button" class="link" data-act="skip">Not now</button></div>'
-          : ''}`;
-      return;
-    }
-
-    whoami.innerHTML = `
-      <p class="why">We sent a code to <strong>${escapeHtml(pendingEmail)}</strong>. It expires in ten minutes.</p>
-      <div class="row">
-        <input type="text" class="code" data-fld="code" value="${escapeHtml(pendingCode)}"
-          placeholder="123456" inputmode="numeric" autocomplete="one-time-code"
-          maxlength="8" aria-label="The code we emailed you" ${signInBusy ? 'disabled' : ''} />
-        <button type="button" class="primary" data-act="confirm" ${signInBusy ? 'disabled' : ''}>
-          ${signInBusy ? 'Checking…' : 'Sign in'}
-        </button>
-      </div>
-      ${problem}
-      <div class="after">
-        <button type="button" class="link" data-act="resend" ${signInBusy ? 'disabled' : ''}>Send it again</button>
-        <button type="button" class="link" data-act="signin-back" ${signInBusy ? 'disabled' : ''}>Use another address</button>
-      </div>`;
-  }
-
-  /** Redraw, and put the cursor where the reporter is being asked to type. */
-  function drawSignIn({ focus = false } = {}) {
-    drawWhoami();
-    applyGate();
-    if (!focus || signInBusy) return;
-    const field = whoami.querySelector('[data-fld]');
-    if (field) { field.focus(); field.setSelectionRange?.(field.value.length, field.value.length); }
-  }
-
-  // Typed values survive a redraw because they are held here, not read back off
-  // a node that the next render replaces.
-  whoami.addEventListener('input', (e) => {
-    const field = e.target.closest('[data-fld]');
-    if (!field) return;
-    if (field.dataset.fld === 'email') pendingEmail = field.value;
-    else pendingCode = field.value;
-  });
-
-  whoami.addEventListener('keydown', (e) => {
-    if (e.key !== 'Enter' || !e.target.closest('[data-fld]')) return;
-    e.preventDefault();
-    if (step === 'email') requestCode();
-    else confirmCode();
-  });
-
-  async function requestCode({ resent = false } = {}) {
-    const email = pendingEmail.trim();
-    if (!email) { signInError = 'Enter the address to send the code to.'; drawSignIn({ focus: true }); return; }
-
-    signInBusy = true; signInError = ''; drawSignIn();
-    try {
-      await client.signIn(email);
-      pendingEmail = email;
-      if (!resent) pendingCode = '';
-      step = 'code';
-    } catch (err) {
-      signInError = err.message;
-    } finally {
-      signInBusy = false;
-      drawSignIn({ focus: true });
-    }
-  }
-
-  async function confirmCode() {
-    const code = pendingCode.trim();
-    if (!code) { signInError = 'Enter the code we emailed you.'; drawSignIn({ focus: true }); return; }
-
-    signInBusy = true; signInError = ''; drawSignIn();
-    try {
-      const who = await client.confirmSignIn(pendingEmail.trim(), code);
-      login.signedIn = who;
-      step = 'idle';
-      pendingCode = '';
-      say('');
-      // Signing in is what makes a call possible on most projects — there is
-      // now somebody to attribute it to — so the offer is asked for again
-      // rather than staying hidden until the panel is reopened.
-      offerCall();
-    } catch (err) {
-      signInError = err.message;
-    } finally {
-      signInBusy = false;
-      drawSignIn({ focus: step !== 'idle' });
-    }
-  }
-
-  whoami.addEventListener('click', async (e) => {
-    const btn = e.target.closest('button[data-act]');
-    if (!btn) return;
-    const act = btn.dataset.act;
-
-    if (act === 'signin') { step = 'email'; signInError = ''; drawSignIn({ focus: true }); return; }
-    if (act === 'skip') { step = 'idle'; signInError = ''; drawSignIn(); return; }
-    // Namespaced: the report screen has a back button of its own, and the two
-    // must not be one selector away from each other.
-    if (act === 'signin-back') { step = 'email'; signInError = ''; pendingCode = ''; drawSignIn({ focus: true }); return; }
-    if (act === 'code') { requestCode(); return; }
-    if (act === 'resend') { requestCode({ resent: true }); return; }
-    if (act === 'confirm') { confirmCode(); return; }
-    if (act === 'signout') {
-      signInBusy = true; drawSignIn();
-      try {
-        await client.signOut();
-      } finally {
-        login.signedIn = null;
-        signInBusy = false;
-        // On a project that requires it, signing out puts the form away again
-        // and asks — which is what applyGate does off the back of this.
-        step = login.mode === 'required' ? 'email' : 'idle';
-        drawSignIn({ focus: step !== 'idle' });
-      }
-    }
-  });
-
-  /** Re-read the project's setting and this browser's session, and redraw. */
-  async function refreshLogin({ announce = false } = {}) {
-    const state = await client.loginState();
-    login = { mode: state.mode, signedIn: state.signedIn };
-    client.lastLoginMode = state.mode;
-    // Nothing to type on a project that requires sign-in and has nobody in it.
-    if (mustSignIn() && step === 'idle') step = 'email';
-    if (login.signedIn) step = 'idle';
-    if (announce && state.signedOutReason) say(state.signedOutReason, 'info');
-    drawSignIn();
-  }
-
-  refreshLogin({ announce: true }).catch(() => { /* a widget that can't ask stays open */ });
-
-  callBtn.addEventListener('click', async () => {
-    sending = true;
-    say('');
-    refreshSendState();
-    callBtn.disabled = true;
-    callBtn.innerHTML = '<span class="spinner"></span>Ringing…';
-
-    try {
-      // No id: this files the report from what the page was doing and rings the
-      // team about it, in one round trip.
-      const handle = await client.startCall();
-      showCall(handle);
-    } catch (err) {
-      sending = false;
-      callBtn.disabled = false;
-      callBtn.innerHTML = `${ICONS.phone}Talk to the team`;
-      refreshSendState();
-      // A report filed with no call is still a report. Saying "the call
-      // failed" and nothing else would leave the reporter thinking their
-      // context went nowhere, and pressing Send again would file it twice.
-      if (err.filed) succeed(err.filed, { callFailed: err.reason || 'The call could not be started.' });
-      else {
-        say(err.message.replace('[BugCatch] ', ''));
-        // The same follow-up the Send button does, because a call can fail for
-        // the same reason a report can: this browser was signed out while the
-        // panel sat open. Without it the message says sign in while the row
-        // under it still names who signed in, which reads as a broken widget.
-        if (login.mode !== 'off') refreshLogin().catch(() => {});
-      }
-    }
-  });
-
-  /**
-   * The call, once the team is being rung.
-   *
-   * Replaces the panel for the same reason the history view does: it is the
-   * same dialog answering a different question, and the reporter got here from
-   * one launcher. There is no way back to the form — the report has already
-   * been filed, and a Cancel that implied otherwise would be a lie.
-   */
-  function showCall(handle) {
-    const panel = scrim.querySelector('.panel');
-    const ref = handle?.bugId ? String(handle.bugId).slice(0, 8) : null;
-
-    panel.innerHTML = `
-      <div class="call">
-        <div class="call-head">
-          <span class="call-dot" aria-hidden="true"></span>
-          <strong class="call-state">Ringing…</strong>
-        </div>
-        <p class="call-note">
-          We're ringing the team now. Someone will pick up if they're free — your report${
-            ref ? ` <code>${escapeHtml(ref)}</code>` : ''} is already filed either way, so nothing is lost if nobody answers.
-        </p>
-        <div class="foot">
-          <span class="spacer"></span>
-          <button class="primary" type="button" data-act="hangup">Cancel</button>
-        </div>
-      </div>`;
-
-    const stateEl = panel.querySelector('.call-state');
-    const dot = panel.querySelector('.call-dot');
-
-    // A call spends its first twenty seconds ringing, and can end by nobody
-    // picking up — which is not a failure and must not read as one.
-    const WORDING = {
-      ringing: 'Ringing the team…',
-      connecting: 'Someone answered — connecting…',
-      connected: 'Connected',
-      missed: 'Nobody was free',
-      ended: 'Call ended',
-      failed: 'The call dropped',
-    };
-
-    // `missed` is over too, and is the ordinary way a live call ends when the
-    // team is busy. Left out of this list it would leave the dialog showing
-    // "Nobody was free" above a Cancel button for a call that has already
-    // stopped.
-    const OVER = ['ended', 'failed', 'missed'];
-
-    const offState = client.on('call', ({ state }) => {
-      stateEl.textContent = WORDING[state] || state;
-      dot.classList.toggle('off', OVER.includes(state));
-      if (OVER.includes(state)) {
-        panel.querySelector('[data-act="hangup"]').textContent = 'Close';
-        if (state === 'missed') {
-          // Said plainly, and said as the non-event it is. The report is filed
-          // and the thread already says the call went unanswered, so the one
-          // thing left to tell them is that they have not lost anything.
-          const note = panel.querySelector('.call-note');
-          if (note) {
-            note.textContent = 'Nobody was free to pick up just now. Your report is filed '
-              + 'and the team will reply in the chat.';
-          }
-        }
-      }
-    });
-
-    panel.querySelector('[data-act="hangup"]').addEventListener('click', () => {
-      offState();
-      client.endCall();
-      close();
-    });
-  }
-
-  /**
-   * The confirmation, and the one answer somebody actually wants from it.
-   *
-   * "How long will this take" is the first thing anybody thinks after reporting
-   * a bug, and until now the answer was nothing at all — so the honest reading
-   * of a confirmation screen was "into the void". The API computes the figure
-   * on the same request that files the report, precisely so it can be said
-   * here: an estimate that needed a second call would arrive after this panel
-   * had closed itself.
-   *
-   * Absent whenever the project has decided not to tell reporters, or has
-   * nothing to base a figure on. Nothing is drawn in that case — no "unknown",
-   * no placeholder — because a confirmation that admits it cannot answer is
-   * worse than one that does not raise the question.
-   *
-   * The dwell is longer when there is something to read. Two seconds is right
-   * for one line and is not enough for two, and a panel that closes over the
-   * sentence somebody started reading is the reason they open it again.
-   */
-  function succeed(res, { callFailed = null } = {}) {
-    // The assistant: straight into the report's conversation, where the
-    // investigation shows itself working ("Analyzing the issue…") and asks
-    // what it needs. The plain "Thanks" below stays for when that view cannot
-    // load — a report filed without a way to follow it.
-    if (res?.id && !callFailed) {
-      showReport(res.id, { fresh: true }).then((ok) => { if (!ok) doneScreen(res, { callFailed }); });
-      return;
-    }
-    doneScreen(res, { callFailed });
-  }
-
-  function doneScreen(res, { callFailed = null } = {}) {
-    const ref = res?.id ? String(res.id).slice(0, 8) : null;
-    const eta = res?.estimate?.label ? String(res.estimate.label) : null;
-    // A press of Call that filed the report and then could not ring anybody.
-    // Shown as a plain "Thanks" it read as a call that had quietly worked, and
-    // the reporter sat waiting for a phone that was never going to ring.
-    const failed = callFailed
-      ? `<p class="eta">${escapeHtml(callFailed)} Your report is filed, and the team will reply in the chat.</p>`
-      : '';
-    scrim.querySelector('.panel').innerHTML = `
-      <div class="done">
-        <div class="tick">${ICONS.check}</div>
-        <h3>Thanks — that's on its way.</h3>
-        <p>${ref ? `Filed as <code>${escapeHtml(ref)}</code>.` : 'The team has what they need to reproduce it.'}</p>
-        ${failed}
-        ${eta ? `<p class="eta">Reports like this usually take <strong>${escapeHtml(eta)}</strong>. We'll let you know when it moves.</p>` : ''}
-      </div>`;
-    setTimeout(close, failed ? 6000 : eta ? 4000 : 2000);
-  }
-
-  /**
-   * The reporter's own history: what they have filed and where each one got to.
-   *
-   * Replaces the panel rather than opening a second surface — it is the same
-   * dialog answering a different question, and the reporter came here from one
-   * launcher.
-   */
-  async function showHistory() {
-    const panel = scrim.querySelector('.panel');
-    clearTimeout(assistantTimer);
-    openReportId = null;
-    panel.classList.remove('is-chat');
-    panel.innerHTML = `
-      ${headHtml({ title: 'Your reports', sub: "Everything you've reported, and where each one got to." })}
-      <div class="history" aria-busy="true">${skeletonRows(3)}</div>`;
-
-    panel.querySelector('[data-act="close"]').addEventListener('click', close);
-
-    let reports = [];
-    try {
-      ({ reports } = await client.myReports());
-    } catch {
-      const failed = panel.querySelector('.history');
-      if (failed) failed.innerHTML = emptyHtml('Couldn\'t load your reports just now.', ICONS.alert);
-      return;
-    }
-
-    // The panel can be closed while the request is in flight.
-    const list = panel.querySelector('.history');
-    if (!list) return;
-
-    list.removeAttribute('aria-busy');
-    list.innerHTML = reports.length
-      ? reports.map((r, i) => `
-        <button class="row" type="button" data-report="${escapeHtml(r.id)}" style="animation-delay:${Math.min(i, 8) * 30}ms">
-          <span class="row-ico" aria-hidden="true">${ICONS.chat}</span>
-          <span class="who">
-            <span class="ttl">${escapeHtml(r.title)}</span>
-            <span class="sub">${escapeHtml(r.reference)} · ${escapeHtml(relativeDay(r.createdAt))}</span>
-          </span>
-          <span class="pill ${escapeHtml(String(r.status).toLowerCase())}">${escapeHtml(statusWord(r.status))}</span>
-          <span class="chev" aria-hidden="true">${ICONS.chevronRight}</span>
-        </button>`).join('')
-      : emptyHtml('You haven\'t reported anything yet.', ICONS.inbox);
-
-    for (const row of list.querySelectorAll('[data-report]')) {
-      row.addEventListener('click', () => showReport(row.dataset.report));
-    }
-  }
-
-  /**
-   * One report as a conversation.
-   *
-   * This screen used to be a timeline: everything that had happened, read-only,
-   * newest first. It answered "what happened to my report" and nothing else —
-   * so when the team's reply was a question ("which browser?"), the person best
-   * placed to answer it was looking straight at it with no way to.
-   *
-   * Now it is a thread. Status changes still appear, as the quiet centred lines
-   * that mark events in any chat; the messages between the two sides are
-   * bubbles either side of them; and there is a box at the bottom. Oldest at
-   * the top, because that is the direction a conversation is read.
-   */
-  async function showReport(bugId, { fresh = false } = {}) {
-    const panel = scrim.querySelector('.panel');
-    clearTimeout(assistantTimer);
-    panel.classList.add('is-chat');
-    panel.innerHTML = `
-      ${headHtml({
-        back: true,
-        title: fresh ? 'Looking into it' : 'Your report',
-        sub: fresh ? 'Our assistant is on it — it may ask you a question here.' : 'Everything that has happened, and a way to answer.',
-      })}
-      <div class="history chatting" aria-busy="true"><div class="thread">${skeletonBubbles()}</div></div>`;
-
-    panel.querySelector('[data-act="close"]').addEventListener('click', close);
-    panel.querySelector('[data-act="back"]').addEventListener('click', showHistory);
-
-    let report = null;
-    try {
-      report = await client.myReport(bugId);
-    } catch {
-      report = null;
-    }
-
-    const body = panel.querySelector('.history');
-    // The panel can be closed, or navigated away from, while this is in flight.
-    if (!body || !panel.querySelector('[data-act="back"]')) return false;
-
-    if (!report) {
-      if (fresh) { panel.classList.remove('is-chat'); return false; }
-      body.removeAttribute('aria-busy');
-      body.innerHTML = emptyHtml('Couldn\'t load that report just now.', ICONS.alert);
-      return false;
-    }
-
-    openReportId = bugId;
-    // Reading the report is reading its updates. Leaving a "your report was
-    // fixed" card up over the screen where they are reading that it was fixed
-    // would be the notification arguing with itself.
-    client.markReportRead(bugId);
-    const drawn = threadHtml(report.timeline);
-    body.classList.add('chatting');
-    body.removeAttribute('aria-busy');
-    body.innerHTML = `
-      <div class="report-head">
-        <span class="ttl">${escapeHtml(report.title)}</span>
-        <span class="sub">${escapeHtml(report.reference)} · ${escapeHtml(report.project || '')}</span>
-        <span class="pill ${escapeHtml(String(report.status).toLowerCase())}">${escapeHtml(statusWord(report.status))}</span>
-        ${report.estimate?.label
-          // The same figure they were given when they filed it, so coming back
-          // to check is not a worse experience than not checking. Absent on a
-          // report that has already been settled — the API stops sending it —
-          // because a prediction beside a finished report is either redundant
-          // or an argument.
-          ? `<span class="eta-line">Usually takes ${escapeHtml(String(report.estimate.label))}</span>`
-          : ''}
-      </div>
-      <div class="thread" role="log" aria-live="polite" aria-label="Conversation">${drawn}</div>`;
-
-    const thread = body.querySelector('.thread');
-    threadDrawn.set(thread, drawn);
-    scrollToLatest(thread);
-    mountVerification(body, report);
-    if (report.canReply) mountComposer(body, thread, bugId);
-    mountAssistant(body, report, bugId);
-    // Again, now the cards above it have taken their share of the height: the
-    // latest message — and any quick answers under it — is what they came for.
-    scrollToLatest(thread);
-    return true;
-  }
-
-  /**
-   * The assistant's live card: where the investigation is, and a gentle
-   * refresh while it works. Analyzing polls every few seconds until the
-   * outcome lands — a question, a found cause, or a hand-off — so the
-   * reporter watches it happen rather than wondering whether anything is.
-   */
-  let assistantTimer = null;
-  function mountAssistant(body, report, bugId) {
-    clearTimeout(assistantTimer);
-    const a = report.assistant;
-    const thread = body.querySelector('.thread');
-    let card = body.querySelector('.assistant');
-    if (!a) {
-      card?.remove();
-      thread?.querySelector('.typing-row')?.remove();
-      return;
-    }
-
-    // Updated in place rather than rebuilt: the card is polled every few
-    // seconds while the assistant works, and a card that re-entered on every
-    // poll would flicker — and re-announce itself to a screen reader — for
-    // nothing. It only animates when the phase actually moves.
-    const previous = card?.dataset.phase || null;
-    if (!card) {
-      card = document.createElement('div');
-      card.setAttribute('role', 'status');
-      card.setAttribute('aria-live', 'polite');
-      body.querySelector('.report-head')?.after(card);
-    }
-    card.className = `assistant ${escapeHtml(a.phase)}`;
-    card.dataset.phase = a.phase;
-
-    const steps = a.steps || [];
-    const done = steps.filter((st) => st.state === 'done').length;
-    const active = steps.some((st) => st.state === 'active') ? 0.5 : 0;
-    const pct = steps.length ? Math.round(((done + active) / steps.length) * 100) : 0;
-    const content = `
-      <div class="as-body${previous && previous !== a.phase ? ' entering' : ''}">
-        <div class="as-top">
-          <span class="as-orb" aria-hidden="true">${a.phase === 'analyzing' ? '<span class="as-spin"></span>'
-            : a.phase === 'calling' ? ICONS.phone
-              : a.phase === 'resolved' ? ICONS.check : ICONS.sparkle}</span>
-          <div class="as-text">
-            <div class="as-title">${escapeHtml(a.title)}</div>
-            <div class="as-detail">${escapeHtml(a.detail)}</div>
-          </div>
-        </div>
-      </div>
-      ${steps.length ? `
-      <div class="as-progress" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${pct}"><i style="width:${pct}%"></i></div>
-      <ol class="as-steps">${steps.map((st) => `<li class="${escapeHtml(st.state)}"${st.state === 'active' ? ' aria-current="step"' : ''}><span class="dot"></span><span class="lbl">${escapeHtml(st.label)}</span></li>`).join('')}</ol>` : ''}`;
-    const key = JSON.stringify([a.phase, a.title, a.detail, steps]);
-    if (card.dataset.key !== key) {
-      const bar = card.querySelector('.as-progress i');
-      const from = bar?.style.width;
-      card.innerHTML = content;
-      card.dataset.key = key;
-      // Let the bar travel from where it was to where it is now.
-      const next = card.querySelector('.as-progress i');
-      if (next && from) {
-        next.style.width = from;
-        requestAnimationFrame(() => { next.style.width = `${pct}%`; });
-      }
-    }
-
-    // While it works, a "thinking" bubble sits where its next message will land.
-    // Never during a call: somebody is on the phone about this report, nothing
-    // is being analysed (the analysis waits for the transcript), and a bubble
-    // typing away underneath a live call is the assistant talking over them.
-    if (thread) {
-      const pinned = atLatest(thread);
-      const typing = thread.querySelector('.typing-row');
-      if (a.phase !== 'analyzing') typing?.remove();
-      else if (!typing || typing !== thread.lastElementChild) {
-        typing?.remove();
-        thread.insertAdjacentHTML('beforeend', typingHtml());
-        if (pinned) scrollToLatest(thread);
-      }
-    }
-
-    if (a.phase === 'analyzing') {
-      assistantTimer = setTimeout(() => refreshThread(bugId), 3000);
-    } else if (a.phase === 'calling') {
-      // Slower: the call's own card is what the reporter is watching, and this
-      // only has to notice when the call ends and the analysis begins.
-      assistantTimer = setTimeout(() => refreshThread(bugId), 10000);
-    } else if (a.phase === 'needs_info' && previous !== 'needs_info') {
-      body.querySelector('.composer textarea')?.focus();
-    }
-  }
-
-  /**
-   * Redraw the open thread in place, keeping whatever is half-typed.
-   *
-   * Rebuilding the whole screen on every incoming message would be simpler and
-   * would also throw away a draft, a staged file and the scroll position — for
-   * someone mid-sentence, a reply arriving would look like the widget crashed.
-   */
-  function mountVerification(body, report) {
-    body.querySelector('.fix-verification')?.remove();
-    if (!report.resolvedAt || !['RESOLVED', 'CLOSED'].includes(report.status)) return;
-    const box = document.createElement('div'); box.className = 'fix-verification';
-    if (report.verification) { box.textContent = report.verification === 'CONFIRMED' ? 'You confirmed that this fix works.' : 'Your feedback was recorded.'; }
-    else {
-      box.innerHTML = '<p>Does the fix work for you?</p><textarea maxlength="4000" aria-label="Fix feedback" placeholder="What happens when you try again? (optional)"></textarea><button type="button" data-result="CONFIRMED">It works now</button> <button type="button" data-result="STILL_HAPPENING">Still happening</button><p class="feedback-status" role="status"></p>';
-      box.querySelectorAll('[data-result]').forEach((btn) => { btn.onclick = async () => {
-        box.querySelectorAll('button').forEach((b) => { b.disabled = true; });
-        try { await client.verifyFix(report.id, { result: btn.dataset.result, resolvedAt: report.resolvedAt, note: box.querySelector('textarea').value }); await showReport(report.id); }
-        catch (err) { box.querySelector('.feedback-status').textContent = err.message; box.querySelectorAll('button').forEach((b) => { b.disabled = false; }); }
-      }; });
-    }
-    body.querySelector('.report-head')?.after(box);
-  }
-
-  async function refreshThread(bugId) {
-    const body = scrim.querySelector('.history.chatting');
-    const thread = body?.querySelector('.thread');
-    if (!thread || openReportId !== bugId) return;
-
-    let report = null;
-    try {
-      report = await client.myReport(bugId);
-    } catch { /* a failed refresh leaves what is on screen, which is not wrong */ }
-    if (!report || openReportId !== bugId) return;
-
-    mountVerification(body, report);
-    const pinned = atLatest(thread);
-    const html = threadHtml(report.timeline);
-    // Only rewritten when something changed, so a poll that brings nothing new
-    // does not replay every bubble's entrance or re-announce the log.
-    if (threadDrawn.get(thread) !== html) {
-      thread.innerHTML = html;
-      threadDrawn.set(thread, html);
-    }
-    mountAssistant(body, report, bugId);
-    // Only follow the conversation down if they were already at the bottom.
-    // Yanking someone back from something they scrolled up to read is worse
-    // than making them scroll.
-    if (pinned) scrollToLatest(thread);
-
-    const pill = body.querySelector('.report-head .pill');
-    if (pill) {
-      pill.className = `pill ${String(report.status).toLowerCase()}`;
-      pill.textContent = statusWord(report.status);
-    }
-  }
-
-  /**
-   * The box at the bottom: text, files, and a voice note.
-   *
-   * Files are uploaded as they are picked, not on send, so the wait happens
-   * while the person is still writing rather than after they have pressed the
-   * button — and so a failed upload is visible as a failed chip instead of a
-   * message that never went.
-   */
-  function mountComposer(body, thread, bugId) {
-    const composer = document.createElement('div');
-    composer.className = 'composer';
-    composer.innerHTML = `
-      <div class="staged" hidden></div>
-      <div class="row">
-        <div class="tools">
-          ${cfg.attachments === false ? '' : `
-          <button class="tool" type="button" data-act="attach" title="Attach a file" aria-label="Attach a file">${ICONS.paperclip}</button>
-          <button class="tool" type="button" data-act="voice" title="Record a voice note" aria-label="Record a voice note">${ICONS.mic}</button>`}
-          <button class="tool" type="button" data-act="livecall" title="Call the team" aria-label="Call the team" hidden>${ICONS.phone}</button>
-        </div>
-        <textarea rows="1" placeholder="Write a reply…" aria-label="Write a reply"></textarea>
-        <button class="send" type="button" data-act="send" title="Send" aria-label="Send" disabled>${ICONS.send}</button>
-      </div>
-      <div class="note" hidden></div>
-      <input type="file" hidden multiple accept="${UPLOAD_MIMES.join(',')}">`;
-    body.appendChild(composer);
-
-    const staged = composer.querySelector('.staged');
-    const input = composer.querySelector('textarea');
-    const sendBtn = composer.querySelector('[data-act="send"]');
-    const voiceBtn = composer.querySelector('[data-act="voice"]');
-    const liveBtn = composer.querySelector('[data-act="livecall"]');
-    const picker = composer.querySelector('input[type=file]');
-    const note = composer.querySelector('.note');
-
-    // Uploaded files waiting to ride on the next message.
-    const files = [];
-    let recorder = null;
-    let sending = false;
-
-    function say(text, kind = '') {
-      note.hidden = !text;
-      note.className = `note ${kind}`;
-      note.textContent = text || '';
-    }
-
-    function refresh() {
-      const ready = files.filter((f) => f.storageKey);
-      sendBtn.disabled = sending || (!input.value.trim() && !ready.length);
-      staged.hidden = !files.length;
-      staged.innerHTML = files.map((f, i) => `
-        <span class="chip ${f.storageKey ? '' : 'uploading'}">
-          <span class="nm">${escapeHtml(f.name)}</span>
-          <span class="sz">${f.storageKey ? humanSize(f.size) : 'sending…'}</span>
-          <button type="button" data-drop="${i}" aria-label="Remove ${escapeHtml(f.name)}">${ICONS.close}</button>
-        </span>`).join('');
-      for (const btn of staged.querySelectorAll('[data-drop]')) {
-        btn.addEventListener('click', () => {
-          files.splice(Number(btn.dataset.drop), 1);
-          refresh();
-        });
-      }
-    }
-
-    /** Upload one blob and stage it. Its chip is on screen for the whole trip. */
-    async function stage(blob, mime, name) {
-      const entry = { name, size: blob.size, storageKey: null };
-      files.push(entry);
-      refresh();
-      try {
-        const { storageKey, mime: stored } = await client.uploadAttachment(blob, mime);
-        entry.storageKey = storageKey;
-        entry.mime = stored;
-      } catch (err) {
-        files.splice(files.indexOf(entry), 1);
-        say(err.message || 'That file could not be sent.', 'err');
-      }
-      refresh();
-    }
-
-    input.addEventListener('input', () => {
-      // Grow with the text, up to the CSS cap. A reply about a bug is often
-      // three lines, and a one-line box makes people write one line.
-      input.style.height = 'auto';
-      input.style.height = `${Math.min(input.scrollHeight, 120)}px`;
-      refresh();
-    });
-
-    // Enter sends, Shift+Enter breaks the line — the chat convention. Anyone
-    // who wants a paragraph gets it; nobody has to hunt for the button.
-    input.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
-        e.preventDefault();
-        send();
-      }
-    });
-
-    // Absent when the host set `attachments: false` — which the report form
-    // has always honoured and this composer did not, so a host keeping files
-    // and microphone audio outside its compliance perimeter still had both
-    // offered in the follow-up thread.
-    composer.querySelector('[data-act="attach"]')?.addEventListener('click', () => picker.click());
-    picker.addEventListener('change', () => {
-      say('');
-      for (const file of picker.files) {
-        if (file.size > client.config.maxAttachmentBytes) {
-          say(`${file.name} is larger than ${humanSize(client.config.maxAttachmentBytes)}.`, 'err');
-          continue;
-        }
-        stage(file, file.type, file.name);
-      }
-      picker.value = '';
-    });
-
-    if (voiceBtn && !voiceSupported()) {
-      voiceBtn.disabled = true;
-      voiceBtn.title = 'This browser cannot record audio';
-    }
-
-    voiceBtn?.addEventListener('click', async () => {
-      if (recorder) {
-        const handle = recorder;
-        recorder = null;
-        voiceBtn.classList.remove('recording');
-        voiceBtn.innerHTML = ICONS.mic;
-        say('');
-        const { blob, mime } = await handle.stop();
-        if (blob.size) stage(blob, mime, 'Voice note');
-        return;
-      }
-      try {
-        say('');
-        recorder = await startVoiceNote({
-          maxMs: client.config.maxRecordingMs,
-          onTick: (s) => say(`Recording — ${humanDuration(s)}. Tap the mic to stop.`),
-          onAutoStop: () => voiceBtn.click(),
-        });
-        voiceBtn.classList.add('recording');
-        voiceBtn.innerHTML = ICONS.stopSquare;
-      } catch {
-        recorder = null;
-        say('The microphone is not available — check the browser permission.', 'err');
-      }
-    });
-
-    /* ---------- calling the team ---------- */
-
-    // Asked once, when a report is opened, and the button stays hidden unless
-    // the answer is yes. Most workspaces have live calling off, and a phone
-    // icon that apologises on press is worse than no phone icon.
-    client.canCallTeam(bugId)
-      .then((available) => { if (available) liveBtn.hidden = false; })
-      .catch(() => { /* not available is the safe answer to every failure */ });
-
-    liveBtn.addEventListener('click', async () => {
-      liveBtn.disabled = true;
-      say('');
-      try {
-        const handle = await client.startLiveCall(bugId);
-        showLiveCall(body, thread, handle);
-      } catch (err) {
-        say(err.message.replace('[BugCatch] ', ''), 'err');
-      } finally {
-        liveBtn.disabled = false;
-      }
-    });
-
-    sendBtn.addEventListener('click', send);
-
-    // The confirm question's quick answers: the same as typing and sending.
-    thread.addEventListener('click', (e) => {
-      const quick = e.target.closest?.('[data-quick]');
-      if (!quick || sending) return;
-      input.value = quick.dataset.quick;
-      send();
-    });
-
-    async function send() {
-      const text = input.value.trim();
-      const ready = files.filter((f) => f.storageKey);
-      if (sending || (!text && !ready.length)) return;
-
-      sending = true;
-      refresh();
-      say('');
-
-      // Shown immediately, greyed, and replaced by the refresh below. Waiting
-      // for the round trip before anything appears makes a slow network look
-      // like a dropped message, which is when people send it twice.
-      thread.insertAdjacentHTML('beforeend', messageHtml({
-        from: 'reporter',
-        body: text,
-        at: new Date().toISOString(),
-        attachments: ready.map((f) => ({ type: 'FILE', name: f.name, size: f.size })),
-      }, 'pending'));
-      scrollToLatest(thread, { smooth: true });
-
-      try {
-        await sendMessage({
-          apiBase: client.config.apiBase,
-          bugId,
-          body: text,
-          attachments: ready.map((f) => ({
-            storageKey: f.storageKey, mime: f.mime, name: f.name, size: f.size,
-          })),
-        });
-        input.value = '';
-        input.style.height = 'auto';
-        files.length = 0;
-        await refreshThread(bugId);
-      } catch (err) {
-        thread.querySelector('.msg-row.pending')?.classList.replace('pending', 'failed');
-        say(err.message || 'That could not be sent — try again.', 'err');
-      } finally {
-        sending = false;
-        refresh();
-      }
-    }
-
-    refresh();
-  }
-
-  /**
-   * The call, on top of the report it is about.
-   *
-   * A bar rather than a screen of its own, unlike the one the composer's button
-   * opens — and for a reason that only applies here. A call has nothing to show
-   * while it runs, because nobody is listening to it but the person on the
-   * other end, so what is worth looking at is the report both people are
-   * talking about.
-   */
-  function showLiveCall(body, thread, handle) {
-    const bar = document.createElement('div');
-    bar.className = 'livecall';
-    bar.innerHTML = `
-      <span class="call-dot" aria-hidden="true"></span>
-      <span class="who" role="status" aria-live="polite">Calling the team…</span>
-      <span class="secs" hidden></span>
-      ${handle?.recorded ? '<span class="call-kept">This call is recorded.</span>' : ''}
-      <button class="act" type="button" data-act="mute" hidden>Mute</button>
-      <button class="act danger" type="button" data-act="hangup">Cancel</button>`;
-    body.insertBefore(bar, thread);
-
-    const who = bar.querySelector('.who');
-    const secs = bar.querySelector('.secs');
-    const dot = bar.querySelector('.call-dot');
-    const muteBtn = bar.querySelector('[data-act="mute"]');
-    const hangBtn = bar.querySelector('[data-act="hangup"]');
-
-    let ticker = null;
-    const stopTicking = () => { if (ticker) { clearInterval(ticker); ticker = null; } };
-
-    /** Left up rather than removed, so somebody who looked away can see how it
-     *  ended — and dismissed by hand, or by the next call replacing it. */
-    const settle = (text) => {
-      stopTicking();
-      dot.classList.add('off');
-      bar.classList.add('over');
-      who.textContent = text;
-      secs.hidden = true;
-      muteBtn.hidden = true;
-      hangBtn.textContent = 'Dismiss';
-      hangBtn.classList.remove('danger');
-    };
-
-    const off = client.on('call', ({ state }) => {
-      if (state === 'ringing') who.textContent = 'Calling the team…';
-
-      if (state === 'connecting') {
-        who.textContent = 'Someone answered — connecting…';
-      }
-
-      if (state === 'connected') {
-        who.textContent = "You're on a call with the team";
-        muteBtn.hidden = false;
-        secs.hidden = false;
-        const from = Date.now();
-        stopTicking();
-        // Started on connect rather than on answer: the seconds a person is
-        // charged for looking at are the ones they could hear.
-        ticker = setInterval(() => {
-          secs.textContent = humanDuration(Math.floor((Date.now() - from) / 1000));
-        }, 1000);
-        secs.textContent = '0s';
-      }
-
-      if (state === 'missed') {
-        settle('Nobody was free. Send a message instead and the team will pick it up.');
-      }
-      if (state === 'ended') settle('Call ended.');
-      if (state === 'failed') settle('The call dropped.');
-    });
-
-    muteBtn.addEventListener('click', () => {
-      const muted = handle.setMuted(!handle.isMuted());
-      muteBtn.textContent = muted ? 'Unmute' : 'Mute';
-      // Announced rather than only shown: somebody who muted by accident finds
-      // out when the other person stops replying, which is a long way in.
-      who.textContent = muted ? "You're muted" : "You're on a call with the team";
-    });
-
-    hangBtn.addEventListener('click', () => {
-      off();
-      stopTicking();
-      client.endCall();
-      bar.remove();
-      // The note about the call lands in the thread a moment after it ends, and
-      // the reporter is looking straight at where it goes.
-      refreshThread(openReportId);
-    });
-  }
-
-  // The report currently open, if any. A live update for a different report
-  // must not redraw the one being read.
-  let openReportId = null;
-
-  // Re-read the open thread when something happens to it. Without this the
-  // reader is looking at a conversation that stopped being true while they read
-  // it — the very screen where a stale view is most obvious, and now the screen
-  // where the other side may be typing.
-  stopListening = client.on('update', (event) => {
-    if (!openReportId || event?.bugId !== openReportId) return;
-    // Already on screen, so already read — and marking it here, before the
-    // client draws its notifications, is what keeps a card from appearing over
-    // the thread that is about to show the same thing.
-    client.markReportRead(openReportId);
-    refreshThread(openReportId);
-  });
-
-  root.appendChild(scrim);
-  refreshSendState();
-  titleInput.focus();
-
-  return { destroy, close };
-}
-
-/**
- * The whole thread, oldest first.
- *
- * The API hands back one ordered list holding both kinds of entry, which is
- * what keeps a reply sitting under the status change that prompted it. Entries
- * carrying `from` are messages; the rest are things that happened.
- */
-function threadHtml(timeline) {
-  const entries = timeline || [];
-  if (!entries.length) return '';
-  let day = null;
-  let prev = null;
-  return entries.map((e) => {
-    // A rule with the date on it whenever the calendar day turns, the way a
-    // chat marks that the next message came later.
-    const d = dayKey(e.at);
-    const sep = d && d !== day ? `<div class="day-sep" role="separator">${escapeHtml(dayLabel(e.at))}</div>` : '';
-    if (sep) { day = d; prev = null; }
-    if (!e.from) { prev = null; return sep + systemHtml(e); }
-    const message = {
-      from: e.from,
-      author: e.reply?.author,
-      automated: e.reply?.automated,
-      body: e.reply?.body,
-      at: e.at,
-      attachments: e.reply?.attachments,
-    };
-    // Consecutive messages from the same voice within a few minutes are one
-    // turn: one avatar, one name, the bubbles stacked under it.
-    const who = speakerOf(message);
-    const cont = prev && prev.who === who
-      && Math.abs(new Date(e.at).getTime() - new Date(prev.at).getTime()) < 5 * 60_000;
-    prev = { who, at: e.at };
-    return sep + messageHtml(message, cont ? 'cont' : '');
-  }).join('');
-}
-
-/** Which voice a message is in, for grouping: the reporter, the assistant, or a named person. */
-function speakerOf(message) {
-  if (message.from === 'reporter') return 'me';
-  if (message.automated) return 'assistant';
-  return `team:${message.author || ''}`;
-}
-
-/**
- * Something that happened, rather than something someone said.
- *
- * `summary` is written by the API, which knows what changed and phrases it for
- * the person who reported it — so the wording here matches the toast and the
- * portal exactly rather than being a third attempt at the same sentence.
- */
-function systemHtml(entry) {
-  const when = clockTime(entry.at);
-  return `
-    <div class="sys k-${escapeHtml(entry.kind)}">
-      <span class="dot" aria-hidden="true"></span>${escapeHtml(entry.summary || '')}${when ? `
-      <span class="t">· ${escapeHtml(when)}</span>` : ''}
-    </div>`;
-}
-
-/**
- * One bubble. `state` marks a message that is still in flight, or failed, or
- * one that continues the turn above it.
- *
- * A reply that was sent automatically says so, above the words rather than
- * after them. The person reading it is deciding whether their problem has been
- * understood, and that decision is different when nobody has read the report —
- * so it is not a footnote, and it is not left to be inferred from the tone.
- */
-function messageHtml(message, state = '') {
-  const mine = message.from === 'reporter';
-  const body = message.body || '';
-  const attachments = message.attachments || [];
-  const automated = !mine && Boolean(message.automated);
-
-  // The text goes in its own element rather than as a bare child of .bubble:
-  // it is the only part that wants `white-space: pre-wrap`, and with that rule
-  // on the bubble the template's own newlines and indentation render as a
-  // blank line above and below every message.
-  const text = body ? `<span class="msg-text">${escapeHtml(body)}</span>` : '';
-  const files = attachments.length
-    ? `<div class="att">${attachments.map(attachmentHtml).join('')}</div>`
-    : '';
-
-  // Named, or labelled, never both and never neither: an automated message has
-  // no author to name, and naming one would be the lie the label exists to
-  // prevent. The avatar says the same thing at a glance.
-  let who = '';
-  let avatar = '';
-  if (automated) {
-    who = '<span class="msg-who auto">Assistant <span class="tag">AI</span></span>';
-    avatar = `<span class="av bot" aria-hidden="true">${ICONS.sparkle}</span>`;
-  } else if (!mine) {
-    const name = message.author || 'Support team';
-    who = `<span class="msg-who">${escapeHtml(name)}</span>`;
-    avatar = `<span class="av" aria-hidden="true">${escapeHtml(initials(name))}</span>`;
-  }
-  if (state.includes('cont')) who = '';
-
-  // The assistant's one answer ends by inviting a correction (check-rules
-  // confirmMessage). One tap sends it, and what comes back goes to the person
-  // who now owns the report rather than to another automated round — so the
-  // wording is "that's right" and "that's not it", not a yes/no question.
-  // The Sphoro Agent's answer ends by asking whether it settled things
-  // (SOLVED_PROMPT). Yes closes the report; No puts it in front of a person.
-  const confirm = automated && /it goes to the same person/i.test(body)
-    ? `<div class="quick" role="group" aria-label="Answer">
-        <button type="button" data-quick="Yes, this is the problem">${ICONS.check}That's right</button>
-        <button type="button" data-quick="No, that is not the problem">That's not it</button>
-      </div>`
-    : automated && SOLVED_PROMPT.test(body)
-      ? `<div class="quick" role="group" aria-label="Did this answer your question?">
-          <button type="button" data-quick="Yes, that answers it">${ICONS.check}Yes, that answers it</button>
-          <button type="button" data-quick="No, I still need help">No, I still need help</button>
-        </div>`
-      : '';
-
-  return `
-    <div class="msg-row ${mine ? 'mine' : 'theirs'} ${automated ? 'auto' : ''} ${state}">
-      ${avatar}
-      ${who}
-      <div class="bubble ${body ? '' : 'silent'}">${text}${files}</div>
-      ${confirm}
-      <span class="msg-when">${escapeHtml(clockTime(message.at) || relativeDay(message.at))}</span>
-    </div>`;
-}
-
-/** The assistant, thinking: where its next message will appear. */
-function typingHtml() {
-  return `
-    <div class="typing-row">
-      <span class="av bot" aria-hidden="true">${ICONS.sparkle}</span>
-      <span class="msg-who auto">Assistant <span class="tag">AI</span></span>
-      <div class="bubble typing" role="img" aria-label="The assistant is working on it"><i></i><i></i><i></i></div>
-    </div>`;
-}
-
-/**
- * The panel's header, on every screen. The assistant's avatar carries the
- * identity; `back` adds the way out of a report to the list of them.
- */
-function headHtml({ title, sub, id = '', back = false }) {
-  return `
-    <div class="head">
-      ${back ? `<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${ICONS.back}</button>` : ''}
-      <div class="mark" aria-hidden="true">${ICONS.sparkle}</div>
-      <div class="titles">
-        <h2${id ? ` id="${id}"` : ''}>${escapeHtml(title)}</h2>
-        <p>${escapeHtml(sub)}</p>
-      </div>
-      <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
-    </div>`;
-}
-
-function emptyHtml(text, icon) {
-  return `<div class="empty"><span class="empty-ico" aria-hidden="true">${icon}</span>${escapeHtml(text)}</div>`;
-}
-
-/** Placeholder rows while the list loads — the shape of what is coming. */
-function skeletonRows(n) {
-  return Array.from({ length: n }, () => `
-    <div class="row" aria-hidden="true">
-      <span class="row-ico"></span>
-      <span class="who"><span class="skel" style="width:70%"></span><span class="skel" style="width:40%;height:9px"></span></span>
-    </div>`).join('') + '<span class="sr-only">Loading…</span>';
-}
-
-function skeletonBubbles() {
-  return `
-    <div aria-hidden="true" style="display:flex;flex-direction:column;gap:10px;padding-top:6px">
-      <span class="skel" style="width:42%;height:34px;border-radius:16px;align-self:center"></span>
-      <span class="skel" style="width:66%;height:52px;border-radius:18px"></span>
-      <span class="skel" style="width:48%;height:38px;border-radius:18px;align-self:flex-end"></span>
-    </div>
-    <span class="sr-only">Loading…</span>`;
-}
-
-// What each open thread was last drawn from, so a poll that brings nothing new
-// leaves the DOM (and the reader's place in it) alone.
-const threadDrawn = new WeakMap();
-
-function initials(name) {
-  const parts = String(name).trim().split(/\s+/).filter(Boolean);
-  if (!parts.length) return '?';
-  return (parts[0][0] + (parts.length > 1 ? parts[parts.length - 1][0] : '')).toUpperCase();
-}
-
-function dayKey(iso) {
-  const d = new Date(iso);
-  return Number.isFinite(d.getTime()) ? `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}` : null;
-}
-
-/** "Today" / "Yesterday" / "Mon, 14 Sep" — the label on a day separator. */
-function dayLabel(iso) {
-  const d = new Date(iso);
-  const today = new Date();
-  const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
-  if (dayKey(d) === dayKey(today)) return 'Today';
-  if (dayKey(d) === dayKey(yesterday)) return 'Yesterday';
-  try {
-    return d.toLocaleDateString(undefined, {
-      weekday: 'short', day: 'numeric', month: 'short',
-      ...(d.getFullYear() !== today.getFullYear() ? { year: 'numeric' } : {}),
-    });
-  } catch {
-    return relativeDay(iso);
-  }
-}
-
-/** "14:05" or "2:05 PM", in the reader's own convention. */
-function clockTime(iso) {
-  const d = new Date(iso);
-  if (!Number.isFinite(d.getTime())) return '';
-  try {
-    return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
-  } catch {
-    return '';
-  }
-}
-
-/**
- * One attachment, rendered as what it is.
- *
- * An image people can see, a voice note they can play and a document they can
- * download are three different things, and collapsing them all to a link is
- * how a chat stops feeling like one. A pending upload has no URL yet, so it
- * falls through to the file row with nothing to click.
- */
-function attachmentHtml(a) {
-  const name = escapeHtml(a.name || 'attachment');
-  if (!a.url) return `<span class="file"><span class="nm">${name}</span></span>`;
-  const url = escapeHtml(a.url);
-
-  if (a.type === 'SCREENSHOT') {
-    return `<a href="${url}" target="_blank" rel="noopener noreferrer"><img src="${url}" alt="${name}" loading="lazy"></a>`;
-  }
-  if (a.type === 'AUDIO') {
-    return `<audio controls preload="metadata" src="${url}"></audio>`;
-  }
-  if (a.type === 'VIDEO') {
-    return `<video controls preload="metadata" src="${url}"></video>`;
-  }
-  return `
-    <a class="file" href="${url}" target="_blank" rel="noopener noreferrer" download>
-      <span class="nm">${name}</span>
-      ${a.size ? `<span class="sz">${escapeHtml(humanSize(a.size))}</span>` : ''}
-    </a>`;
-}
-
-/** Whether the reader is at the foot of the thread, within a line or two. */
-function atLatest(thread) {
-  return thread.scrollHeight - thread.scrollTop - thread.clientHeight < 40;
-}
-
-function scrollToLatest(thread, { smooth = false } = {}) {
-  const calm = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
-  if (smooth && !calm && thread.scrollTo) thread.scrollTo({ top: thread.scrollHeight, behavior: 'smooth' });
-  else thread.scrollTop = thread.scrollHeight;
-}
-
-/** Status as a word a reporter would use, not the enum the database stores. */
-function statusWord(status) {
-  return {
-    OPEN: 'Open',
-    IN_PROGRESS: 'In progress',
-    RESOLVED: 'Fixed',
-    CLOSED: 'Closed',
-  }[status] || String(status || '').toLowerCase();
-}
-
-/** "today" / "3 days ago" — enough for a history list, no library. */
-function relativeDay(iso) {
-  const then = new Date(iso).getTime();
-  if (!Number.isFinite(then)) return '';
-  const days = Math.floor((Date.now() - then) / 86400000);
-  if (days <= 0) return 'today';
-  if (days === 1) return 'yesterday';
-  if (days < 30) return `${days} days ago`;
-  const months = Math.floor(days / 30);
-  return months === 1 ? 'a month ago' : `${months} months ago`;
-}
-
-function escapeHtml(s) {
-  return String(s).replace(/[&<>"']/g, (c) => (
-    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
-  ));
+  return () => cancel();
 }