@sphoro/bugcatch-web-sdk 0.13.1

package/src/widget.js

@@ -0,0 +1,2481 @@
+// 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).
+//
+// 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.
+
+import {
+  captureScreenshot, startRecording, screenshotSupported, captureSupported,
+  startVoiceNote, voiceSupported,
+  humanSize, humanDuration, normalizeMime, UPLOAD_MIMES, REPORT_MIMES,
+} from './capture.js';
+import { sendMessage } from './updates.js';
+
+const POSITIONS = {
+  'bottom-right': 'bottom:20px;right:20px;',
+  'bottom-left': 'bottom:20px;left:20px;',
+  'top-right': 'top:20px;right:20px;',
+  '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 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 },
+  { value: 'dark', label: 'Dark', icon: ICONS.moon },
+  { value: 'auto', label: 'System default', icon: ICONS.auto },
+];
+
+// The visitor's pick outlives the page. Storage is wrapped because a sandboxed
+// iframe or a locked-down privacy mode throws on access rather than returning
+// null, and a theme preference is never worth breaking the widget over.
+const THEME_KEY = 'bugcatch:theme';
+
+function readStoredTheme() {
+  try {
+    const value = localStorage.getItem(THEME_KEY);
+    return THEMES.some((t) => t.value === value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeStoredTheme(value) {
+  try {
+    localStorage.setItem(THEME_KEY, value);
+  } catch { /* storage denied — the choice just won't outlive the page */ }
+}
+
+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: #6b7280;
+  --bc-faint: #9aa1ad;
+  --bc-border: #e3e6ec;
+  --bc-subtle: #f5f6f8;
+  --bc-raised: #fff;
+  --bc-danger: #dc2626;
+  --bc-ok: #059669;
+  /* 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-mark: #5647ee;
+  --bc-shadow: 0 24px 60px rgba(10,12,16,.28), 0 2px 8px rgba(10,12,16,.08);
+  --bc-dur: 240ms;
+  --bc-ease: cubic-bezier(.22,1,.36,1);
+}
+:host(.bc-dark) {
+  --bc-bg: #14161c;
+  --bc-elevated: #1c1f27;
+  --bc-fg: #eef0f4;
+  --bc-muted: #9aa1ad;
+  --bc-faint: #6b7280;
+  --bc-border: #2b2f39;
+  --bc-subtle: #21242c;
+  --bc-raised: #363d4b;
+  --bc-brand-ink: #9aa1ad;
+  --bc-brand-mark: #9b8fff;
+  --bc-shadow: 0 24px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
+}
+@media (prefers-color-scheme: dark) {
+  :host(.bc-auto) {
+    --bc-bg: #14161c;
+    --bc-elevated: #1c1f27;
+    --bc-fg: #eef0f4;
+    --bc-muted: #9aa1ad;
+    --bc-faint: #6b7280;
+    --bc-border: #2b2f39;
+    --bc-subtle: #21242c;
+    --bc-raised: #363d4b;
+    --bc-brand-ink: #9aa1ad;
+    --bc-brand-mark: #9b8fff;
+    --bc-shadow: 0 24px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
+  }
+}
+
+* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
+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
+   — which is why .dock and .launcher each had to say so themselves. Said once,
+   for all of them, so the next element hidden from JavaScript works. */
+[hidden] { display: none !important; }
+
+/* Motion is decoration here — every animation below is an entrance or a state
+   hint, so switching them off costs nothing but the polish. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .01ms !important;
+  }
+}
+
+@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(16px) scale(.97) } to { opacity: 1; transform: none } }
+@keyframes bc-panel-out { to { opacity: 0; transform: translateY(8px) scale(.985) } }
+@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(.92) } 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) } }
+
+/* ---------- dock: theme switch stacked above the launcher ---------- */
+.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. */
+.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. */
+.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,.16), 0 1px 3px rgba(10,12,16,.10);
+  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); }
+.themer button:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; }
+
+/* ---------- launcher ---------- */
+.launcher {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 11px 17px; border: none; border-radius: 999px;
+  background: var(--bc-accent); color: var(--bc-on-accent);
+  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(10,12,16,.22), 0 1px 3px rgba(10,12,16,.16);
+  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;
+}
+.launcher svg { font-size: 17px; }
+.launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10,12,16,.26), 0 2px 6px rgba(10,12,16,.18); filter: brightness(1.06); }
+.launcher:active { transform: translateY(0) scale(.97); transition-duration: 90ms; }
+.launcher:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 3px; }
+.launcher[hidden] { display: none; }
+
+/* ---------- scrim + panel ---------- */
+.scrim {
+  position: fixed; inset: 0; z-index: 2147483001;
+  background: rgba(10,12,16,.5);
+  animation: bc-fade-in 200ms ease both;
+}
+.scrim.closing { animation: bc-fade-out 150ms 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. */
+.panel {
+  position: fixed;
+  width: calc(100vw - 40px); max-width: 440px;
+  max-height: calc(100vh - var(--bc-dock-h, 84px) - 52px);
+  overflow-y: auto; overscroll-behavior: contain;
+  background: var(--bc-bg); color: var(--bc-fg);
+  border-radius: 16px; box-shadow: var(--bc-shadow);
+  animation: bc-panel-in 320ms var(--bc-ease) both;
+}
+.scrim.at-right .panel { right: 20px; }
+.scrim.at-left .panel { left: 20px; }
+.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); }
+.scrim.closing .panel { animation: bc-panel-out 150ms ease both; }
+
+.head { display: flex; align-items: flex-start; gap: 11px; padding: 18px 18px 0; }
+.head .mark {
+  flex: none; display: grid; place-items: center;
+  width: 32px; height: 32px; border-radius: 9px;
+  background: color-mix(in srgb, var(--bc-accent) 13%, transparent);
+  color: var(--bc-accent); font-size: 18px;
+}
+.head .titles { flex: 1; min-width: 0; }
+.head h2 { margin: 1px 0 3px; font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
+.head p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--bc-muted); }
+.icon-btn {
+  flex: none; display: grid; place-items: center;
+  width: 28px; height: 28px; padding: 0; font-size: 15px;
+  border: none; border-radius: 8px; background: none; color: var(--bc-faint);
+  cursor: pointer; transition: background 160ms, color 160ms;
+}
+.icon-btn:hover { background: var(--bc-subtle); color: var(--bc-fg); }
+.icon-btn:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 1px; }
+
+.body { padding: 16px 18px 0; }
+
+
+label { display: block; font-size: 12px; font-weight: 600; color: var(--bc-fg); margin-bottom: 6px; }
+input[type=text], input[type=email], textarea {
+  width: 100%; padding: 10px 12px; font-size: 14px; line-height: 1.45;
+  color: var(--bc-fg); background: var(--bc-elevated);
+  border: 1px solid var(--bc-border); border-radius: 10px;
+  transition: border-color 160ms, box-shadow 160ms;
+}
+input[type=text]::placeholder, input[type=email]::placeholder, textarea::placeholder { color: var(--bc-faint); }
+input[type=text]:focus, input[type=email]:focus, textarea:focus {
+  outline: none; border-color: var(--bc-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 18%, transparent);
+}
+input.invalid { border-color: var(--bc-danger); animation: bc-nudge 240ms ease; }
+textarea { min-height: 84px; resize: vertical; }
+.field { margin-bottom: 14px; }
+
+/* ---------- 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: 14px; }
+.known .known-h {
+  margin: 0 0 8px; font-size: 12px; font-weight: 650; letter-spacing: .02em;
+  text-transform: uppercase; color: var(--bc-faint);
+}
+.known .issue {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 10px 12px; margin-bottom: 6px;
+  background: var(--bc-subtle); border: 1px solid transparent; border-radius: 10px;
+}
+.known .issue.is-joined { border-color: var(--bc-ok); }
+.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: 12px; line-height: 1.45; color: var(--bc-muted);
+}
+.known .issue .join {
+  flex: none; padding: 6px 10px; font-size: 12px; font-weight: 620;
+  color: var(--bc-accent); background: var(--bc-bg);
+  border: 1px solid var(--bc-border); border-radius: 8px; cursor: pointer;
+}
+.known .issue .join:hover { border-color: var(--bc-accent); }
+.known .issue .join:disabled { color: var(--bc-ok); border-color: var(--bc-border); cursor: default; }
+.known .issue .join:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; }
+.known .ask { display: flex; gap: 8px; margin-top: 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); }
+
+/* ---------- 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: 14px; padding: 10px 12px;
+  font-size: 12.5px; line-height: 1.45; color: var(--bc-muted);
+  background: var(--bc-subtle); border-radius: 10px;
+}
+.whoami.asking { display: block; }
+.whoami .who { flex: 1; min-width: 0; }
+.whoami .who strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
+.whoami .link {
+  padding: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45;
+  color: var(--bc-accent); background: none; border: none; cursor: pointer;
+}
+.whoami .link:hover { text-decoration: underline; }
+.whoami .link:disabled { color: var(--bc-faint); cursor: default; text-decoration: none; }
+.whoami .link:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; border-radius: 4px; }
+.whoami .why { margin: 0 0 10px; font-size: 12.5px; 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: 12px; align-items: center; margin-top: 9px; }
+.whoami .err { color: var(--bc-danger); }
+.whoami .code { letter-spacing: .28em; font-variant-numeric: tabular-nums; }
+
+/* ---------- severity ---------- */
+.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--bc-subtle); border-radius: 10px; }
+.seg button {
+  padding: 7px 4px; font-size: 12.5px; font-weight: 550; line-height: 1;
+  color: var(--bc-muted); background: none; border: none; border-radius: 7px;
+  cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms, font-weight 180ms;
+}
+.seg button:hover { color: var(--bc-fg); }
+.seg button[aria-pressed=true] {
+  background: var(--bc-raised); color: var(--bc-accent); font-weight: 680;
+  box-shadow: 0 1px 3px rgba(10,12,16,.14);
+}
+.seg button:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: -1px; }
+
+/* ---------- attachments ---------- */
+.tools { display: flex; flex-wrap: wrap; gap: 6px; }
+.tool {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 12px; font-size: 12.5px; font-weight: 550; line-height: 1;
+  color: var(--bc-fg); background: var(--bc-elevated);
+  border: 1px solid var(--bc-border); border-radius: 9px; cursor: pointer;
+  transition: border-color 160ms, background 160ms, transform 160ms var(--bc-ease);
+}
+.tool svg { font-size: 15px; color: var(--bc-muted); transition: color 160ms; }
+.tool:hover:not(:disabled) { border-color: var(--bc-accent); transform: translateY(-1px); }
+.tool:hover:not(:disabled) svg { color: var(--bc-accent); }
+.tool:active:not(:disabled) { transform: translateY(0) scale(.98); }
+.tool:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 1px; }
+.tool:disabled { opacity: .45; cursor: not-allowed; }
+
+.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.thumb {
+  position: relative; width: 74px; height: 74px; flex: none;
+  border-radius: 10px; overflow: hidden;
+  border: 1px solid var(--bc-border); background: var(--bc-subtle);
+  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: 3px; right: 3px;
+  width: 19px; height: 19px; font-size: 11px; border-radius: 6px;
+  background: rgba(10,12,16,.68); color: #fff; border: none;
+  display: grid; place-items: center; cursor: pointer;
+  opacity: 0; transition: opacity 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 ---------- */
+.msg {
+  display: flex; align-items: flex-start; gap: 7px;
+  font-size: 12.5px; line-height: 1.45; padding: 9px 11px; border-radius: 9px; margin-bottom: 12px;
+  animation: bc-item-in 240ms var(--bc-ease) both;
+}
+.msg.err { background: color-mix(in srgb, var(--bc-danger) 11%, transparent); color: var(--bc-danger); }
+.msg.info { background: var(--bc-subtle); color: var(--bc-muted); }
+
+/* ---------- footer ---------- */
+.foot {
+  display: flex; align-items: center; gap: 9px;
+  margin-top: 16px; padding: 14px 18px; border-top: 1px solid var(--bc-border);
+  background: var(--bc-subtle);
+}
+.foot .spacer { flex: 1; }
+.foot .note { font-size: 11.5px; color: var(--bc-faint); }
+/* 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. */
+.brand-credit { display: flex; align-items: center; transition: color 0.15s; }
+.bc-brand { height: 18px; width: auto; display: block; color: var(--bc-brand-ink); }
+.brand-credit:hover .bc-brand { color: var(--bc-fg); }
+.brand-credit:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 3px; border-radius: 4px; }
+button.ghost, button.primary {
+  padding: 9px 15px; font-size: 13px; font-weight: 600; line-height: 1;
+  border-radius: 9px; cursor: pointer;
+  transition: transform 160ms var(--bc-ease), filter 160ms, background 160ms, border-color 160ms;
+}
+button.ghost { background: none; border: 1px solid var(--bc-border); color: var(--bc-muted); }
+button.ghost:hover { color: var(--bc-fg); border-color: var(--bc-faint); }
+button.primary {
+  display: inline-flex; align-items: center; gap: 7px;
+  background: var(--bc-accent); border: 1px solid var(--bc-accent); color: var(--bc-on-accent);
+}
+button.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
+button.primary:active:not(:disabled) { transform: none; }
+button.ghost:focus-visible, button.primary:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; }
+button:disabled { opacity: .5; cursor: not-allowed; }
+button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; width: 13px; height: 13px; }
+
+/* ---------- success ---------- */
+/* ---------- your reports ---------- */
+.history { padding: 6px 20px 18px; max-height: 340px; overflow-y: auto; }
+/* 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 {
+  max-height: none; overflow: visible; display: flex; flex-direction: column;
+}
+.history .row {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 11px 0; 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: 13px; font-weight: 550; color: var(--bc-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.history .sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--bc-faint); }
+.history .empty { padding: 26px 0; text-align: center; font-size: 12.5px; color: var(--bc-muted); }
+/* 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; border-bottom: 1px solid var(--bc-border);
+  font: inherit; color: inherit; text-align: left; cursor: pointer;
+  border-radius: 8px; padding: 11px 8px; margin: 0 -8px; width: calc(100% + 16px);
+}
+.history button.row:hover { background: var(--bc-subtle); }
+.history button.row:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: -2px; }
+
+/* ---------- one report, and what happened to it ---------- */
+.report-head {
+  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
+  padding: 4px 0 14px; border-bottom: 1px solid var(--bc-border);
+}
+.report-head .ttl { font-size: 13.5px; font-weight: 600; color: var(--bc-fg); }
+.report-head .sub { font-size: 11.5px; color: var(--bc-faint); }
+.report-head .pill { grid-row: 1 / span 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 {
+  display: flex; flex-direction: column; gap: 10px;
+  padding: 14px 0 8px; overflow-y: auto; overscroll-behavior: contain;
+  max-height: min(46vh, 330px);
+}
+
+/* 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;
+  font-size: 11.5px; line-height: 1.45; color: var(--bc-faint);
+}
+.sys .dot {
+  display: inline-block; width: 6px; height: 6px; margin-right: 6px;
+  border-radius: 50%; background: var(--bc-muted); vertical-align: middle;
+}
+.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); }
+.icon-btn.back { margin-right: 2px; }
+
+/* ---------- 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 team's left and neutral —
+   the arrangement every chat has taught people to read without a legend. */
+.msgs { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 6px; }
+.msg-row { display: flex; flex-direction: column; max-width: 84%; gap: 4px; }
+.msg-row.mine { align-self: flex-end; align-items: flex-end; }
+.msg-row.theirs { align-self: flex-start; }
+.msg-who { font-size: 11px; font-weight: 600; color: var(--bc-faint); padding: 0 2px; }
+.bubble {
+  padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
+  background: var(--bc-subtle); color: var(--bc-fg);
+  border: 1px solid var(--bc-border);
+}
+/* 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 {
+  background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-on-accent);
+  border-bottom-right-radius: 4px;
+}
+.msg-row.theirs .bubble { border-bottom-left-radius: 4px; }
+/* A reply nobody wrote. Outlined rather than recoloured — it is still the
+   team's side of the conversation — with the label above carrying the meaning,
+   so it reads the same to someone who cannot see the border at all. */
+.msg-row.auto .bubble { border-style: dashed; }
+.msg-who.auto { color: var(--bc-accent); }
+/* 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; border: 0; }
+.msg-when { font-size: 10.5px; color: var(--bc-faint); padding: 0 2px; }
+.msg-row.pending { opacity: .55; }
+.msg-row.failed .bubble { border: 1px solid var(--bc-danger); }
+
+.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: 9px;
+  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: 9px; }
+.att .file {
+  display: flex; align-items: center; gap: 8px; text-decoration: none;
+  padding: 8px 10px; border-radius: 9px; 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 composer ---------- */
+.composer {
+  position: sticky; bottom: 0; margin-top: auto;
+  padding: 10px 0 2px;
+  /* 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);
+}
+.composer .row { display: flex; align-items: flex-end; gap: 8px; }
+.composer textarea {
+  flex: 1; min-height: 38px; max-height: 120px; resize: none; padding: 9px 11px;
+  font: inherit; font-size: 12.5px; line-height: 1.45;
+  color: var(--bc-fg); background: var(--bc-subtle);
+  border: 1px solid var(--bc-border); border-radius: 10px;
+}
+.composer textarea:focus { outline: none; border-color: var(--bc-accent); }
+.composer .tools { display: flex; gap: 4px; }
+.composer .tool {
+  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
+  border-radius: 9px; border: 1px solid transparent; background: none;
+  color: var(--bc-muted);
+}
+.composer .tool:hover { background: var(--bc-subtle); 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 .send {
+  width: 34px; height: 34px; flex: none; border-radius: 9px; cursor: pointer;
+  background: var(--bc-accent); border: 1px solid var(--bc-accent); color: #fff;
+  display: grid; place-items: center;
+}
+.composer .send:disabled { opacity: .4; cursor: default; }
+.composer .staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
+.composer .chip {
+  display: flex; align-items: center; gap: 6px; max-width: 190px;
+  padding: 5px 7px; border-radius: 8px; font-size: 11.5px;
+  background: var(--bc-subtle); border: 1px solid var(--bc-border); color: var(--bc-muted);
+}
+.composer .chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.composer .chip button {
+  flex: none; width: 16px; height: 16px; display: grid; place-items: center;
+  border: 0; border-radius: 4px; 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 2px 0; font-size: 11.5px; color: var(--bc-faint); }
+.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; font-size: 10.5px; font-weight: 650; letter-spacing: .03em;
+  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
+  border: 1px solid currentColor;
+}
+.pill.open { color: #e8912a; }
+.pill.in_progress { color: #4da3ff; }
+.pill.resolved { color: #35b87f; }
+.pill.closed { color: var(--bc-faint); }
+
+/* A call in progress, in place of the form.
+   ---------------------------------------------------------------------------
+   Deliberately not styled as a chat. What is on screen is a transcript of
+   something being said out loud, and bubbles would invite the reporter to type
+   into it — which is the one thing this surface cannot accept. */
+.call { padding: 20px 22px 14px; animation: bc-fade-in 240ms ease both; }
+.call-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.call-head strong { font-size: 14.5px; font-weight: 650; }
+.call-dot {
+  width: 8px; height: 8px; 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 before the first word is, because a voice answering is exactly when
+   somebody assumes they have reached a person. */
+.call-note { margin: 0 0 12px; font-size: 12px; color: var(--bc-muted); line-height: 1.5; }
+
+/* ---------- a call to a person, on top of the report it is about ---------- */
+/* A bar rather than its own screen, unlike the agent call. There is nothing to
+   read during this one — no transcript arrives, because nobody is transcribing
+   it — and 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 {
+  display: flex; align-items: center; gap: 9px;
+  margin: 12px 0 0; padding: 9px 11px;
+  border: 1px solid var(--bc-border); border-radius: 10px;
+  background: var(--bc-subtle); font-size: 12.5px; color: var(--bc-fg);
+}
+.livecall .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.livecall .secs { font-variant-numeric: tabular-nums; color: var(--bc-muted); }
+.livecall .act {
+  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--bc-border);
+  background: var(--bc-elevated); color: var(--bc-fg);
+  font: inherit; font-size: 12px; 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); }
+.call-note code { font-size: 11px; }
+.call-lines {
+  max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px;
+  padding: 10px 12px; border: 1px solid var(--bc-line); border-radius: 8px;
+  background: var(--bc-surface-2, transparent);
+}
+.call-line { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
+.call-line.agent { color: var(--bc-muted); }
+.call-line.you { color: var(--bc-ink); font-weight: 500; }
+.call-line.you::before { content: 'You: '; color: var(--bc-faint); font-weight: 400; }
+@media (prefers-reduced-motion: reduce) { .call-dot { animation: none; } }
+
+.done { padding: 34px 24px 38px; text-align: center; animation: bc-fade-in 240ms ease both; }
+.done .tick {
+  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
+  display: grid; place-items: center; font-size: 24px;
+  background: color-mix(in srgb, var(--bc-ok) 14%, transparent); color: var(--bc-ok);
+  animation: bc-pop 420ms var(--bc-ease) both;
+}
+.done h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 650; }
+.done p { margin: 0; font-size: 12.5px; color: var(--bc-muted); }
+.done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+/* 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: 12px auto 0;
+  padding-top: 11px;
+  border-top: 1px solid var(--bc-line);
+  max-width: 30ch;
+  line-height: 1.5;
+}
+.done .eta strong { color: var(--bc-ink); font-weight: 600; }
+/* 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: 11.5px;
+  color: var(--bc-muted);
+  margin-top: 2px;
+}
+
+/* ---------- recording bar ---------- */
+.recbar {
+  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
+  z-index: 2147483002;
+  display: flex; align-items: center; gap: 12px;
+  padding: 10px 12px 10px 15px; 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: 600; min-width: 38px; }
+.recbar .hint { font-size: 12px; color: var(--bc-muted); }
+.recbar button { padding: 7px 13px; font-size: 12.5px; font-weight: 600; 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); }
+
+@media (max-width: 520px) {
+  .panel { width: calc(100vw - 24px); max-width: none; }
+  .scrim.at-right .panel, .scrim.at-left .panel { left: 12px; right: 12px; }
+  .recbar .hint { display: none; }
+}
+
+/* ---------- 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); }
+}
+
+/* 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
+   the camera housing. env() is 0 everywhere else, so the offsets are unchanged
+   on hardware that has no insets. */
+.dock {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+}
+
+@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. */
+  .launcher { min-height: 48px; padding: 14px 20px; }
+  .seg button { min-height: 44px; padding: 12px 8px; }
+  .tool { min-height: 44px; padding: 12px 14px; }
+  button.primary, .foot button { min-height: 44px; padding: 12px 18px; }
+  textarea { min-height: 104px; }
+
+  /* The theme switch and the close button are 28px 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 .x, .brand-credit { position: relative; }
+  .themer button::after, .head .icon-btn::after, .thumb .x::after, .brand-credit::after {
+    content: '';
+    position: absolute;
+    inset: -9px;
+  }
+  /* The close button is the one people reach for in a hurry, and it sits in
+     the corner where a thumb is least accurate. */
+  .head .icon-btn::after { inset: -12px; }
+  /* 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; }
+
+  /* Thumb-sized controls make the form taller, which on a short phone pushed
+     "Send report" below the fold of a panel that scrolls — so the one button
+     the whole widget exists for was reachable only by scrolling past the
+     attachment row. It stays on screen instead. */
+  .foot {
+    position: sticky;
+    bottom: 0;
+    margin-top: 16px;
+    /* The panel scrolls under this, so the bar cannot be translucent. */
+    background: var(--bc-subtle);
+    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* 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; box-shadow: 0 6px 18px rgba(10,12,16,.22), 0 1px 3px rgba(10,12,16,.16); }
+  .tool:hover, .themer button:hover { border-color: var(--bc-border); }
+}
+`;
+
+export function mountWidget(client) {
+  const host = document.createElement('div');
+  host.setAttribute('data-bugcatch', 'widget');
+
+  // A visitor who has picked a theme outranks the site's init() default: the
+  // config says how the widget should look to someone who has never touched
+  // it, not how it should look to someone who has.
+  let theme = readStoredTheme() || themeValue(client.config.theme);
+  host.className = themeClass(theme);
+
+  const root = host.attachShadow({ mode: 'open' });
+  const style = document.createElement('style');
+  style.textContent = css(client.config.accent || '#4F46E5');
+  root.appendChild(style);
+
+  const position = POSITIONS[client.config.widgetPosition] ? client.config.widgetPosition : 'bottom-right';
+  const dock = document.createElement('div');
+  dock.className = `dock ${position.includes('right') ? 'at-right' : 'at-left'}`
+    + (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));
+    });
+  });
+
+  const launcher = document.createElement('button');
+  launcher.className = 'launcher';
+  launcher.type = 'button';
+  launcher.innerHTML = `${ICONS.bug}<span>Report a bug</span>`;
+  launcher.setAttribute('aria-haspopup', 'dialog');
+  launcher.setAttribute('aria-expanded', 'false');
+
+  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');
+      },
+    });
+  });
+
+  dock.append(themer, launcher);
+  root.appendChild(dock);
+
+  document.body.appendChild(host);
+  return () => { open?.destroy(); host.remove(); };
+}
+
+/** 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">
+      <div class="head">
+        <div class="mark">${ICONS.bug}</div>
+        <div class="titles">
+          <h2 id="bc-h">Report a bug</h2>
+          <p>We'll attach what the page was doing, so you don't have to explain it.</p>
+        </div>
+        <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
+      </div>
+      <div class="body">
+        <div class="slot"></div>
+        <div class="whoami" 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="Checkout button does nothing" autocomplete="off" />
+        </div>
+        <div class="field">
+          <label for="bc-desc">Any detail that helps <span style="font-weight:450;color:var(--bc-faint)">(optional)</span></label>
+          <textarea id="bc-desc" placeholder="I clicked Pay and nothing happened."></textarea>
+        </div>
+        <div class="field">
+          <label id="bc-prio-l">Severity</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">
+          <label>Attach <span style="font-weight:450;color:var(--bc-faint)">(optional)</span></label>
+          <div class="tools">
+            ${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</button>` : ''}
+            <button class="tool" type="button" data-act="file">${ICONS.paperclip}File</button>
+          </div>
+          <div class="thumbs"></div>
+          <input type="file" accept="${REPORT_MIMES.join(',')}" multiple hidden />
+        </div>` : ''}
+        </div>
+      </div>
+      <div class="foot">
+        <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${BRAND}</a>
+        <span class="note"></span>
+        <span class="spacer"></span>
+        ${client.hasReports() ? '<button class="ghost" type="button" data-act="history">Your reports</button>' : ''}
+        <button class="ghost" type="button" data-act="cancel">Cancel</button>
+        <!-- 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>Talk to us</button>
+        <button class="primary" type="button" data-act="send">Send report</button>
+      </div>
+    </div>`;
+
+  const $ = (sel) => scrim.querySelector(sel);
+  const titleInput = $('#bc-title');
+  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 known = $('.known');
+  const historyBtn = $('[data-act="history"]');
+
+  /* ---------- lifecycle ---------- */
+
+  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;
+    closed = true;
+    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 */ }
+  }
+
+  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(); }
+  }
+
+  document.addEventListener('keydown', onKeydown, true);
+  scrim.addEventListener('click', (e) => { if (e.target === scrim && !sending) close(); });
+  $('[data-act="close"]').addEventListener('click', close);
+  $('[data-act="cancel"]').addEventListener('click', close);
+
+  /* ---------- severity ---------- */
+
+  scrim.querySelectorAll('[data-prio]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      priority = btn.dataset.prio;
+      scrim.querySelectorAll('[data-prio]').forEach((b) => {
+        b.setAttribute('aria-pressed', String(b === btn));
+      });
+    });
+  });
+
+  /* ---------- attachments ---------- */
+
+  function say(text, kind = 'err') {
+    slot.innerHTML = text ? `<div class="msg ${kind}">${escapeHtml(text)}</div>` : '';
+  }
+
+  function refreshSendState() {
+    const busy = items.some((it) => it.status === 'uploading');
+    sendBtn.disabled = sending || busy;
+    note.textContent = busy ? 'Waiting for the upload to finish…' : '';
+    scrim.querySelectorAll('.tool').forEach((t) => {
+      t.disabled = sending || items.length >= (cfg.maxAttachments ?? 5);
+    });
+  }
+
+  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 removeItem(item) {
+    const i = items.indexOf(item);
+    if (i >= 0) items.splice(i, 1);
+    if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+    item.el.remove();
+    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();
+  }
+
+  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('');
+    upload(item);
+  }
+
+  /* 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 = '';
+    }
+  }
+
+  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 = '';
+  });
+
+  /* ---------- 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;
+    }
+
+    // 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;
+
+    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();
+  });
+
+  async function stopRecording({ keep }) {
+    const rec = recorder;
+    if (!rec) return;
+    recorder = null;
+    root.querySelector('.recbar')?.remove();
+    scrim.style.display = '';
+    dock.hidden = false;
+
+    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}`);
+    }
+    titleInput.focus();
+  }
+
+  /* ---------- send ---------- */
+
+  sendBtn.addEventListener('click', async () => {
+    const title = titleInput.value;
+    if (!title.trim()) {
+      say('Please describe what went wrong.');
+      titleInput.classList.add('invalid');
+      titleInput.focus();
+      setTimeout(() => titleInput.classList.remove('invalid'), 500);
+      return;
+    }
+
+    sending = true;
+    say('');
+    refreshSendState();
+    const original = sendBtn.innerHTML;
+    sendBtn.innerHTML = '<span class="spinner"></span>Sending…';
+
+    try {
+      const res = await client.report({
+        title,
+        description: $('#bc-desc').value,
+        priority,
+        attachments: items
+          .filter((it) => it.status === 'ready')
+          .map((it) => ({ type: it.kind, storageKey: it.storageKey, mime: it.mime })),
+      });
+      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));
+
+  /* ---------- talk to us ---------- */
+
+  // 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.
+  // Which kind, not merely whether. A deployment offers the triage agent or a
+  // person, never both, and the two are wholly different promises: one is a
+  // machine that answers instantly, the other rings a room and may go
+  // unanswered. The button says which, because a reporter told "talk to us" who
+  // gets a robot — or who waits through twenty seconds of ringing expecting an
+  // instant answer — has been misled by this widget rather than by the product.
+  let callKind = null;
+  function offerCall() {
+    client.callKind()
+      .then((kind) => {
+        if (!kind) return;
+        callKind = kind;
+        callBtn.textContent = kind === 'live' ? 'Talk to the team' : 'Talk to us';
+        // 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 (callKind) 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="tool" 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="tool" 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>${
+      callKind === 'live' ? 'Ringing…' : 'Connecting…'}`;
+
+    try {
+      // No id: this files the report from what the page was doing and calls
+      // about it, in one round trip.
+      const handle = await client.startCall();
+      showCall(handle);
+    } catch (err) {
+      sending = false;
+      callBtn.disabled = false;
+      callBtn.textContent = callKind === 'live' ? 'Talk to the team' : 'Talk to us';
+      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);
+      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 it is connected.
+   *
+   * 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;
+    // Read off the handle rather than off `callKind`: the handle is what actually
+    // happened, and it is the only one of the two that cannot be stale.
+    const live = Boolean(handle?.live);
+
+    panel.innerHTML = `
+      <div class="call">
+        <div class="call-head">
+          <span class="call-dot" aria-hidden="true"></span>
+          <strong class="call-state">${live ? 'Ringing…' : 'Connecting…'}</strong>
+        </div>
+        <p class="call-note">
+          ${live
+            ? `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.`
+            : `You're talking to our automated assistant, not a person. What you say is
+               added to your report${ref ? ` <code>${escapeHtml(ref)}</code>` : ''} for the team to read.`}
+        </p>
+        <div class="call-lines" role="log" aria-live="polite"></div>
+        <div class="foot">
+          <span class="spacer"></span>
+          <button class="primary" type="button" data-act="hangup">${live ? 'Cancel' : 'Hang up'}</button>
+        </div>
+      </div>`;
+
+    const stateEl = panel.querySelector('.call-state');
+    const linesEl = panel.querySelector('.call-lines');
+    const dot = panel.querySelector('.call-dot');
+
+    // Two vocabularies, because the two calls are two different experiences. An
+    // agent call is connected or it failed; a live one spends its first twenty
+    // seconds in a state the agent call has no equivalent for — ringing — and can
+    // end by nobody picking up, which is not a failure and must not read as one.
+    const WORDING = live ? {
+      ringing: 'Ringing the team…',
+      connecting: 'Someone answered — connecting…',
+      connected: 'Connected',
+      missed: 'Nobody was free',
+      ended: 'Call ended',
+      failed: 'The call dropped',
+    } : {
+      connecting: 'Connecting…',
+      listening: 'Listening',
+      speaking: 'Assistant is speaking',
+      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.';
+          }
+        }
+      }
+    });
+
+    // One element per turn, replaced while a turn is still being recognised —
+    // appending every partial would scroll the reporter's own half-sentence
+    // past them as they said it.
+    let pending = null;
+    const offLines = client.on('call-transcript', ({ role, text, final }) => {
+      if (!text && !final) return;
+      if (role === 'agent') {
+        // The agent arrives as deltas; they belong on one line.
+        if (!pending || pending.dataset.role !== 'agent') {
+          pending = document.createElement('div');
+          pending.className = 'call-line agent';
+          pending.dataset.role = 'agent';
+          linesEl.appendChild(pending);
+        }
+        if (text) pending.textContent += text;
+        if (final) pending = null;
+      } else {
+        if (!pending || pending.dataset.role !== 'reporter') {
+          pending = document.createElement('div');
+          pending.className = 'call-line you';
+          pending.dataset.role = 'reporter';
+          linesEl.appendChild(pending);
+        }
+        pending.textContent = text;
+        if (final) pending = null;
+      }
+      linesEl.scrollTop = linesEl.scrollHeight;
+    });
+
+    panel.querySelector('[data-act="hangup"]').addEventListener('click', () => {
+      offState();
+      offLines();
+      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) {
+    const ref = res?.id ? String(res.id).slice(0, 8) : null;
+    const eta = res?.estimate?.label ? String(res.estimate.label) : null;
+    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>
+        ${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, 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');
+    panel.innerHTML = `
+      <div class="head">
+        <div class="mark">${ICONS.bug}</div>
+        <div class="titles">
+          <h2>Your reports</h2>
+          <p>Everything you've reported, and where each one got to.</p>
+        </div>
+        <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
+      </div>
+      <div class="history"><div class="empty">Loading…</div></div>`;
+
+    panel.querySelector('[data-act="close"]').addEventListener('click', close);
+
+    let reports = [];
+    try {
+      ({ reports } = await client.myReports());
+    } catch {
+      panel.querySelector('.history').innerHTML =
+        '<div class="empty">Couldn\'t load your reports just now.</div>';
+      return;
+    }
+
+    // The panel can be closed while the request is in flight.
+    const list = panel.querySelector('.history');
+    if (!list) return;
+
+    list.innerHTML = reports.length
+      ? reports.map((r) => `
+        <button class="row" type="button" data-report="${escapeHtml(r.id)}">
+          <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>
+        </button>`).join('')
+      : '<div class="empty">You haven\'t reported anything yet.</div>';
+
+    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) {
+    const panel = scrim.querySelector('.panel');
+    panel.innerHTML = `
+      <div class="head">
+        <button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${ICONS.back}</button>
+        <div class="titles">
+          <h2>Your report</h2>
+          <p>Everything that has happened, and a way to answer.</p>
+        </div>
+        <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
+      </div>
+      <div class="history"><div class="empty">Loading…</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;
+
+    if (!report) {
+      body.innerHTML = '<div class="empty">Couldn\'t load that report just now.</div>';
+      return;
+    }
+
+    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);
+    body.classList.add('chatting');
+    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">${threadHtml(report.timeline)}</div>`;
+
+    const thread = body.querySelector('.thread');
+    scrollToLatest(thread);
+    if (report.canReply) mountComposer(body, thread, bugId);
+  }
+
+  /**
+   * 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.
+   */
+  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;
+
+    const pinned = atLatest(thread);
+    thread.innerHTML = threadHtml(report.timeline);
+    // 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">
+          <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();
+      }
+    });
+
+    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 (!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);
+
+    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);
+
+      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, which is the opposite of what the
+   * agent call does — and for a reason that only applies to this kind. An agent
+   * call has a transcript arriving line by line, which is worth a whole panel;
+   * this one has nothing to show, because nobody is listening to it but the
+   * person on the other end. What is worth looking at during a live call is the
+   * report, which is what 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>
+      <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, live }) => {
+      // The agent call emits on the same channel. Its own panel is listening.
+      if (!live) return;
+
+      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 '';
+  return entries.map((e) => (e.from ? messageHtml({
+    from: e.from,
+    author: e.reply?.author,
+    automated: e.reply?.automated,
+    body: e.reply?.body,
+    at: e.at,
+    attachments: e.reply?.attachments,
+  }) : systemHtml(e))).join('');
+}
+
+/**
+ * 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) {
+  return `
+    <div class="sys k-${escapeHtml(entry.kind)}">
+      <span class="dot" aria-hidden="true"></span>${escapeHtml(entry.summary || '')}
+      · ${escapeHtml(relativeDay(entry.at))}
+    </div>`;
+}
+
+/**
+ * One bubble. `state` marks a message that is still in flight, or failed.
+ *
+ * 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.
+  let who = '';
+  if (automated) who = '<span class="msg-who auto">Automatic reply</span>';
+  else if (!mine && message.author) who = `<span class="msg-who">${escapeHtml(message.author)}</span>`;
+
+  return `
+    <div class="msg-row ${mine ? 'mine' : 'theirs'} ${automated ? 'auto' : ''} ${state}">
+      ${who}
+      <div class="bubble ${body ? '' : 'silent'}">${text}${files}</div>
+      <span class="msg-when">${escapeHtml(relativeDay(message.at))}</span>
+    </div>`;
+}
+
+/**
+ * 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) {
+  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]
+  ));
+}