@sphoro/bugcatch-web-sdk 0.17.0 → 0.18.0

package/dist/bugcatch-panel.es.js

@@ -0,0 +1,2402 @@
+import { c as de, s as we, a as ke, R as be, h as P, n as $e, b as Se, d as Qe, e as te, f as G, g as W, r as Le, v as Te, i as ze, S as Ee, U as Me, j as qe, k as Ce, l as He } from "./bugcatch-core.es.js";
+const Ie = '<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>', Ae = '<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>', fe = '<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>', pe = '<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>', ge = '<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>', Re = '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>', Ve = '<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>', ne = '<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>', De = '<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>', X = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5c.5 4.6 2.9 7 7.5 7.5v.1c-4.6.5-7 2.9-7.5 7.5h-.1c-.5-4.6-2.9-7-7.5-7.5V10c4.6-.5 7-2.9 7.5-7.5z"/><path d="M18.6 15.2c.2 1.9 1.2 2.9 3.1 3.1v.1c-1.9.2-2.9 1.2-3.1 3.1h-.1c-.2-1.9-1.2-2.9-3.1-3.1v-.1c1.9-.2 2.9-1.2 3.1-3.1z" opacity=".7"/></svg>', je = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 6l6 6-6 6"/></svg>', Oe = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5l2.6-7.2A1.5 1.5 0 0 1 7.5 5.3h9a1.5 1.5 0 0 1 1.4 1L20.5 13.5V18a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18z"/><path d="M3.5 13.5h4.8l1.2 2.2h5l1.2-2.2h4.8"/></svg>', Be = '<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>', Ne = `
+@keyframes bc-fade-in { from { opacity: 0 } to { opacity: 1 } }
+@keyframes bc-fade-out { to { opacity: 0 } }
+@keyframes bc-panel-in { from { opacity: 0; transform: translateY(14px) scale(.965) } to { opacity: 1; transform: none } }
+@keyframes bc-panel-out { to { opacity: 0; transform: translateY(10px) scale(.975) } }
+@keyframes bc-sheet-in { from { transform: translateY(100%) } to { transform: none } }
+@keyframes bc-sheet-out { to { transform: translateY(100%) } }
+@keyframes bc-rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
+@keyframes bc-pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .3; transform: scale(.78) } }
+@keyframes bc-spin { to { transform: rotate(360deg) } }
+@keyframes bc-pop { 0% { transform: scale(.5); opacity: 0 } 65% { transform: scale(1.1) } 100% { transform: scale(1); opacity: 1 } }
+@keyframes bc-nudge { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
+@keyframes bc-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-3px); opacity: 1 } }
+@keyframes bc-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
+
+/* ---------- scrim + panel ---------- */
+.scrim {
+  position: fixed; inset: 0; z-index: 2147483001;
+  background: rgba(10,12,16,.32);
+  animation: bc-fade-in 200ms ease both;
+}
+.scrim.closing { animation: bc-fade-out 170ms ease both; }
+
+/* The panel belongs to the launcher, so it opens out of that corner rather
+   than in the middle of the screen. --bc-dock-h is measured at open time
+   because the dock's height depends on whether the launcher is showing.
+   A column: the header and footer stay put and only the middle scrolls. */
+.panel {
+  position: fixed;
+  display: flex; flex-direction: column;
+  width: calc(100vw - 40px); max-width: 420px;
+  max-height: calc(100vh - var(--bc-dock-h, 84px) - 52px);
+  overflow: hidden;
+  background: var(--bc-bg); color: var(--bc-fg);
+  border-radius: var(--bc-r-xl); box-shadow: var(--bc-shadow);
+  border: 1px solid color-mix(in srgb, var(--bc-border) 70%, transparent);
+  animation: bc-panel-in 340ms var(--bc-ease) both;
+}
+/* A conversation wants a height of its own, so the thread fills the panel
+   rather than shrinking to its first two messages. */
+.panel.is-chat { height: 640px; }
+.scrim.at-right .panel { right: 20px; transform-origin: bottom right; }
+.scrim.at-left .panel { left: 20px; transform-origin: bottom left; }
+.scrim.at-bottom .panel { bottom: calc(20px + var(--bc-dock-h, 84px) + 12px); }
+.scrim.at-top .panel { top: calc(20px + var(--bc-dock-h, 84px) + 12px); transform-origin: top right; }
+.scrim.closing .panel { animation: bc-panel-out 170ms ease both; }
+
+/* ---------- header ---------- */
+.head {
+  flex: none; position: relative;
+  display: flex; align-items: center; gap: 12px;
+  padding: 16px 14px 14px var(--bc-pad);
+  background: linear-gradient(180deg, var(--bc-accent-soft), var(--bc-bg));
+  border-bottom: 1px solid var(--bc-border);
+}
+.head .mark, .avatar {
+  flex: none; display: grid; place-items: center; position: relative;
+  width: 38px; height: 38px; border-radius: 50%;
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+  color: var(--bc-on-accent); font-size: 19px;
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
+}
+/* The little "online" dot says someone — or something — is on the other end. */
+.head .mark::after {
+  content: ''; position: absolute; right: -1px; bottom: -1px;
+  width: 11px; height: 11px; border-radius: 50%;
+  background: #22c55e; border: 2px solid var(--bc-bg);
+}
+.head .titles { flex: 1; min-width: 0; }
+.head h2 {
+  margin: 0 0 2px; font-size: var(--bc-fs-lg); font-weight: 680; letter-spacing: -.02em; line-height: 1.25;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.head p { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted); }
+.icon-btn {
+  flex: none; display: grid; place-items: center;
+  width: 32px; height: 32px; padding: 0; font-size: 16px;
+  border: none; border-radius: 10px; background: none; color: var(--bc-muted);
+  cursor: pointer; transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
+}
+.icon-btn:hover { background: color-mix(in srgb, var(--bc-fg) 7%, transparent); color: var(--bc-fg); }
+.icon-btn:active { transform: scale(.92); }
+.icon-btn.back { margin: 0 -6px 0 -8px; }
+
+.body {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  padding: 16px var(--bc-pad) 6px;
+}
+
+label { display: block; font-size: var(--bc-fs-sm); font-weight: 620; color: var(--bc-fg); margin-bottom: 7px; }
+label .opt { font-weight: 450; color: var(--bc-faint); }
+input[type=text], input[type=email], textarea {
+  width: 100%; padding: 11px 13px; font-size: var(--bc-fs-md); line-height: 1.45;
+  color: var(--bc-fg); background: var(--bc-elevated);
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  transition: border-color 160ms, box-shadow 160ms, background 160ms;
+}
+input[type=text]::placeholder, input[type=email]::placeholder, textarea::placeholder { color: var(--bc-faint); }
+input[type=text]:hover, input[type=email]:hover, textarea:hover { border-color: color-mix(in srgb, var(--bc-fg) 18%, var(--bc-border)); }
+input[type=text]:focus, input[type=email]:focus, textarea:focus {
+  outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring);
+}
+input.invalid, input.invalid:focus, textarea.invalid {
+  border-color: var(--bc-danger); animation: bc-nudge 240ms ease;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-danger) 16%, transparent);
+}
+.field-err {
+  display: flex; align-items: center; gap: 6px;
+  margin: 7px 0 0; font-size: var(--bc-fs-xs); font-weight: 550; color: var(--bc-danger);
+  animation: bc-rise 200ms var(--bc-ease) both;
+}
+.field-err svg { font-size: 13px; flex: none; }
+textarea { min-height: 88px; resize: vertical; }
+.field { margin-bottom: 16px; }
+.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.field-head .count { font-size: var(--bc-fs-xs); color: var(--bc-faint); font-variant-numeric: tabular-nums; }
+
+/* The draft line: a quiet note, or a card offering to pick up where they left off. */
+.compose > .note { font-size: var(--bc-fs-xs); color: var(--bc-faint); margin: -4px 0 10px; }
+.compose > .note:empty { display: none; }
+.compose > .note:has(button) {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
+  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--bc-r-md);
+  background: var(--bc-accent-soft); border: 1px solid var(--bc-accent-line);
+  font-size: var(--bc-fs-sm); color: var(--bc-fg);
+}
+.compose > .note button {
+  padding: 5px 11px; font: inherit; font-size: var(--bc-fs-xs); font-weight: 620;
+  border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-accent); background: var(--bc-accent); color: var(--bc-on-accent);
+}
+.compose > .note button[data-discard] { background: transparent; color: var(--bc-muted); border-color: var(--bc-border); }
+
+/* ---------- what is already known ----------
+   A help surface in front of the form, not a step in it. Everything here is
+   dismissible by ignoring it: the reporter can read what is already known and
+   leave, tap "this is happening to me too" and leave, or type straight past all
+   of it and file the report they came to file. Nothing is ever in their way,
+   because a reporter who feels handled rather than helped stops reporting. */
+.known { margin-bottom: 16px; }
+.known .known-h {
+  margin: 0 0 8px; font-size: 11px; font-weight: 680; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--bc-faint);
+}
+.known .issue {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 12px; margin-bottom: 6px;
+  background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  animation: bc-rise 240ms var(--bc-ease) both;
+}
+.known .issue.is-joined { border-color: color-mix(in srgb, var(--bc-ok) 55%, var(--bc-border)); }
+.known .issue .who { flex: 1; min-width: 0; }
+.known .issue .t {
+  display: block; font-size: 13px; font-weight: 620; line-height: 1.4;
+  color: var(--bc-fg); overflow-wrap: anywhere;
+}
+.known .issue .meta {
+  display: block; margin-top: 3px; font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
+}
+.known .issue .join {
+  flex: none; padding: 7px 12px; font-size: 12px; font-weight: 620;
+  color: var(--bc-accent); background: var(--bc-bg);
+  border: 1px solid var(--bc-accent-line); border-radius: 999px; cursor: pointer;
+  transition: background 160ms, border-color 160ms;
+}
+.known .issue .join:hover { border-color: var(--bc-accent); background: var(--bc-accent-soft); }
+.known .issue .join:disabled { color: var(--bc-ok); border-color: var(--bc-border); background: var(--bc-bg); cursor: default; opacity: 1; }
+.known .ask { display: flex; gap: 8px; margin: 2px 0 8px; }
+.known .ask input { flex: 1; min-width: 0; }
+.known .ask button { flex: none; }
+.known .err { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-danger); }
+
+/* ---------- questions the assistant answers by itself ---------- */
+.picks { margin-bottom: 16px; }
+.picks .picks-h {
+  margin: 0 0 8px; font-size: 11px; font-weight: 680; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--bc-faint);
+}
+.picks .picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
+.picks .pick {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
+  padding: 9px 11px; text-align: left; cursor: pointer; font: inherit;
+  color: var(--bc-fg); background: var(--bc-subtle);
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  transition: background 160ms, border-color 160ms, transform 160ms;
+  animation: bc-rise 240ms var(--bc-ease) both;
+}
+.picks .pick:hover { border-color: var(--bc-accent-line); background: var(--bc-accent-soft); }
+.picks .pick[aria-pressed="true"] { border-color: var(--bc-accent); background: var(--bc-accent-soft); }
+.picks .pick .t { font-size: 13px; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
+.picks .pick .h { font-size: var(--bc-fs-xs); line-height: 1.4; color: var(--bc-muted); }
+.picks .picks-note {
+  display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0;
+  font-size: 12px; line-height: 1.45; color: var(--bc-muted);
+}
+.picks .picks-note svg { flex: none; margin-top: 2px; color: var(--bc-ok); }
+
+/* ---------- who is reporting ----------
+   A strip above the form rather than a screen in front of it: where signing in
+   is optional this is a line the reporter may ignore, and it should read as
+   one. Where it is required the composer below is not rendered at all and this
+   strip is the whole panel. */
+.whoami {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
+  margin-bottom: 16px; padding: 10px 12px;
+  font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
+  background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+}
+.whoami.asking { display: block; padding: 14px; }
+.whoami .who { flex: 1; min-width: 0; }
+.whoami .who strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
+.link {
+  padding: 0; font: inherit; font-size: var(--bc-fs-sm); font-weight: 620; line-height: 1.45;
+  color: var(--bc-accent); background: none; border: none; cursor: pointer; border-radius: 4px;
+}
+.link:hover { text-decoration: underline; text-underline-offset: 2px; }
+.link:disabled { color: var(--bc-faint); cursor: default; text-decoration: none; }
+.whoami .why { margin: 0 0 10px; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
+.whoami .why strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
+.whoami .row { display: flex; gap: 8px; align-items: stretch; }
+.whoami .row input { flex: 1; min-width: 0; }
+.whoami .row button { flex: none; }
+.whoami .after { display: flex; gap: 14px; align-items: center; margin-top: 9px; }
+.whoami .err { color: var(--bc-danger); }
+.whoami .code { letter-spacing: .28em; font-variant-numeric: tabular-nums; }
+
+/* ---------- which record is this about ----------
+   Drawn only after Send has been pressed and only when what they wrote did not
+   already answer it, so most people never see this at all. Presented as the
+   assistant asking one friendly follow-up, not as a form field that appeared. */
+.refs {
+  position: relative;
+  margin-bottom: 16px; padding: 14px;
+  font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
+  background: var(--bc-accent-soft);
+  border: 1px solid var(--bc-accent-line); border-radius: var(--bc-r-lg);
+  animation: bc-item-in 280ms var(--bc-ease) both;
+}
+.refs .ask-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
+.refs .ask-head .avatar { width: 28px; height: 28px; font-size: 14px; box-shadow: none; }
+.refs .ask-head strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--bc-fg); margin-bottom: 1px; }
+.refs .why { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
+.refs .row { display: flex; gap: 8px; align-items: stretch; }
+.refs .row input { flex: 1; min-width: 0; background: var(--bc-bg); }
+.refs select {
+  flex: none; max-width: 45%; padding: 10px 10px; font-size: 13px;
+  color: var(--bc-fg); background: var(--bc-bg);
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+}
+.refs select:focus { outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
+.refs .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
+.refs .chips button {
+  padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; cursor: pointer;
+  color: var(--bc-muted); background: var(--bc-bg); border: 1px solid var(--bc-border);
+  transition: background 160ms, color 160ms, border-color 160ms;
+}
+.refs .chips button[aria-pressed="true"] { color: var(--bc-on-accent); background: var(--bc-accent); border-color: var(--bc-accent); }
+.refs .hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-muted); }
+.refs .after { display: flex; gap: 12px; align-items: center; margin-top: 9px; }
+.refs .err { color: var(--bc-danger); font-weight: 550; }
+.refs .link { margin-top: 10px; font-size: 12px; color: var(--bc-muted); }
+.refs .link:hover { color: var(--bc-fg); }
+.refs .chips.cands button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 550; }
+/* "We read your ID" — under the description, while they type. */
+.ref-found {
+  display: flex; align-items: center; gap: 6px;
+  margin: -6px 0 14px; font-size: 12px; line-height: 1.45; color: var(--bc-muted);
+}
+.ref-found svg { width: 14px; height: 14px; flex: none; color: var(--bc-ok); }
+.ref-found b { font-weight: 600; color: var(--bc-fg); }
+
+/* ---------- severity ---------- */
+.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md); }
+.seg button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 8px 4px; font-size: var(--bc-fs-sm); font-weight: 550; line-height: 1;
+  color: var(--bc-muted); background: none; border: none; border-radius: 9px;
+  cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms;
+}
+.seg button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sev, var(--bc-faint)); opacity: .55; transition: opacity 180ms; }
+.seg button[data-prio="LOW"] { --sev: #94a3b8; }
+.seg button[data-prio="MEDIUM"] { --sev: #3b82f6; }
+.seg button[data-prio="HIGH"] { --sev: #f59e0b; }
+.seg button[data-prio="CRITICAL"] { --sev: #ef4444; }
+.seg button:hover { color: var(--bc-fg); }
+.seg button[aria-pressed=true] {
+  background: var(--bc-raised); color: var(--bc-fg); font-weight: 650;
+  box-shadow: 0 1px 3px rgba(10,12,16,.14), 0 0 0 1px color-mix(in srgb, var(--bc-border) 60%, transparent);
+}
+.seg button[aria-pressed=true]::before { opacity: 1; }
+.seg button:focus-visible { outline-offset: -2px; }
+
+/* ---------- attachments ---------- */
+.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
+.tool {
+  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+  padding: 12px 8px; font-size: 12px; font-weight: 600; line-height: 1;
+  color: var(--bc-fg); background: var(--bc-elevated);
+  border: 1px dashed color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); border-radius: var(--bc-r-md); cursor: pointer;
+  transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--bc-ease);
+}
+.tool svg { font-size: 19px; color: var(--bc-muted); transition: color 160ms; }
+.tool:hover:not(:disabled) { border-color: var(--bc-accent); border-style: solid; background: var(--bc-accent-soft); transform: translateY(-1px); }
+.tool:hover:not(:disabled) svg { color: var(--bc-accent); }
+.tool:active:not(:disabled) { transform: translateY(0) scale(.98); }
+.tool:disabled { opacity: .45; cursor: not-allowed; }
+.attach-hint { margin: 8px 0 0; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+
+.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.thumbs:empty { display: none; }
+.thumb {
+  position: relative; width: 76px; height: 76px; flex: none;
+  border-radius: var(--bc-r-md); overflow: hidden;
+  border: 1px solid var(--bc-border); background: var(--bc-subtle);
+  box-shadow: var(--bc-shadow-sm);
+  animation: bc-item-in 300ms var(--bc-ease) both;
+}
+.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.thumb .kind {
+  position: absolute; left: 4px; bottom: 4px;
+  display: inline-flex; align-items: center; gap: 3px;
+  padding: 2px 5px; border-radius: 5px;
+  background: rgba(10,12,16,.72); color: #fff; font-size: 9.5px; font-weight: 600; line-height: 1.3;
+}
+.thumb .drop {
+  position: absolute; top: 4px; right: 4px;
+  width: 20px; height: 20px; font-size: 11px; border-radius: 50%;
+  background: rgba(10,12,16,.7); color: #fff; border: none;
+  display: grid; place-items: center; cursor: pointer;
+  opacity: 0; transition: opacity 160ms, background 160ms;
+}
+.thumb:hover .drop, .thumb:focus-within .drop { opacity: 1; }
+.thumb .drop:hover { background: var(--bc-danger); }
+.thumb .veil {
+  position: absolute; inset: 0; display: grid; place-items: center; gap: 6px;
+  background: rgba(10,12,16,.62); color: #fff; font-size: 10.5px; font-weight: 600;
+  align-content: center;
+}
+.thumb .veil.err { background: color-mix(in srgb, var(--bc-danger) 82%, transparent); }
+.spinner {
+  width: 17px; height: 17px; border-radius: 50%;
+  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
+  animation: bc-spin 720ms linear infinite;
+}
+.bar { width: 46px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
+.bar i { display: block; height: 100%; width: 0; background: #fff; transition: width 180ms linear; }
+.veil button {
+  background: none; border: none; color: #fff; font-size: 14px; padding: 2px;
+  cursor: pointer; display: grid; place-items: center;
+}
+
+/* ---------- footer ---------- */
+.foot {
+  flex: none;
+  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
+  padding: 12px var(--bc-pad); border-top: 1px solid var(--bc-border);
+  background: var(--bc-bg);
+}
+.foot .spacer { flex: 1; }
+.foot .note { flex-basis: 100%; order: -1; font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+.foot .note:empty { display: none; }
+/* Quiet, but still legible: this sits in someone else's product, so it identifies
+   where the report goes without competing with their interface. Quiet is bought
+   with colour (--bc-brand-ink sits a step below body text) rather than with a
+   blanket opacity — the BUGCATCH half is only about 3px of cap height at this
+   size, and dimming it on top of that left it as a smudge in both themes. */
+.powered {
+  flex: none; display: flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 7px var(--bc-pad) 9px; font-size: 10.5px; color: var(--bc-faint);
+  background: var(--bc-subtle); border-top: 1px solid var(--bc-border);
+}
+.brand-credit { display: flex; align-items: center; transition: color 0.15s; border-radius: 4px; }
+.bc-brand { height: 16px; width: auto; display: block; color: var(--bc-brand-ink); }
+.brand-credit:hover .bc-brand { color: var(--bc-fg); }
+button.ghost, button.primary {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  height: 38px; padding: 0 15px; font: inherit; font-size: 13px; font-weight: 620; line-height: 1;
+  border-radius: 999px; cursor: pointer; white-space: nowrap;
+  transition: transform 160ms var(--bc-ease), filter 160ms, background 160ms, border-color 160ms, color 160ms, box-shadow 160ms;
+}
+button.ghost { background: var(--bc-bg); border: 1px solid var(--bc-border); color: var(--bc-fg); }
+button.ghost:hover:not(:disabled) { background: var(--bc-subtle); border-color: color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); }
+button.ghost svg, button.primary svg { font-size: 15px; }
+button.primary {
+  padding: 0 18px;
+  background: var(--bc-accent); border: 1px solid var(--bc-accent); color: var(--bc-on-accent);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
+}
+button.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
+button.primary:active:not(:disabled) { transform: none; }
+button:disabled { opacity: .5; cursor: not-allowed; }
+button.primary:disabled { box-shadow: none; }
+button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; width: 14px; height: 14px; }
+button.quiet {
+  padding: 0 4px; height: 38px; font: inherit; font-size: 13px; font-weight: 600;
+  border: none; background: none; color: var(--bc-muted); cursor: pointer; border-radius: 8px;
+}
+button.quiet:hover { color: var(--bc-accent); }
+
+/* ---------- your reports ---------- */
+.history {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  padding: 8px 12px 14px;
+}
+/* On the conversation screen the inner thread does the scrolling, so this
+   wrapper must not — two nested scrollers means the composer drifts out of
+   reach exactly when someone reaches for it. */
+.history.chatting {
+  overflow: hidden; display: flex; flex-direction: column; padding: 0;
+}
+.history .row {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 10px; border-bottom: 1px solid var(--bc-border);
+}
+.history .row:last-child { border-bottom: 0; }
+.history .who { flex: 1; min-width: 0; }
+.history .ttl {
+  display: block; font-size: 13.5px; font-weight: 600; color: var(--bc-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.history .sub { display: block; margin-top: 3px; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+.history .row-ico {
+  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
+  background: var(--bc-subtle); color: var(--bc-muted); font-size: 16px;
+}
+.history .chev { flex: none; color: var(--bc-faint); font-size: 15px; transition: transform 160ms var(--bc-ease), color 160ms; }
+.empty {
+  display: flex; flex-direction: column; align-items: center; gap: 10px;
+  padding: 40px 16px; text-align: center; font-size: var(--bc-fs-sm); color: var(--bc-muted);
+}
+.empty .empty-ico {
+  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
+  background: var(--bc-accent-soft); color: var(--bc-accent); font-size: 20px;
+}
+.skel {
+  display: block; height: 12px; border-radius: 6px; margin: 6px 0;
+  background: linear-gradient(90deg, var(--bc-subtle) 25%, color-mix(in srgb, var(--bc-fg) 8%, var(--bc-subtle)) 50%, var(--bc-subtle) 75%);
+  background-size: 200% 100%; animation: bc-shimmer 1.4s linear infinite;
+}
+/* A history row is a button now — it opens the report — so the UA styling has
+   to go, and the hit area has to read as one. */
+.history button.row {
+  width: 100%; background: none; border: 0; margin-bottom: 2px;
+  font: inherit; color: inherit; text-align: left; cursor: pointer;
+  border-radius: var(--bc-r-md); transition: background 160ms;
+  animation: bc-rise 260ms var(--bc-ease) both;
+}
+.history button.row:hover { background: var(--bc-subtle); }
+.history button.row:hover .chev { transform: translateX(2px); color: var(--bc-accent); }
+.history button.row:focus-visible { outline-offset: -2px; }
+
+/* ---------- one report, and what happened to it ---------- */
+.report-head {
+  flex: none;
+  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
+  padding: 10px var(--bc-pad); border-bottom: 1px solid var(--bc-border);
+  background: var(--bc-bg);
+}
+.report-head .ttl { font-size: 13px; font-weight: 620; color: var(--bc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.report-head .sub { font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+.report-head .pill { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
+
+/* The thread scrolls; the composer under it does not. Both live inside the
+   panel, which stops scrolling as a whole on this screen — a composer that
+   scrolls away is a composer people think isn't there. */
+.thread {
+  flex: 1 1 auto; min-height: 140px;
+  display: flex; flex-direction: column; gap: 4px;
+  padding: 14px var(--bc-pad) 12px; overflow-y: auto; overscroll-behavior: contain;
+}
+
+/* The day a run of messages happened on, as a centred label on a rule. */
+.day-sep {
+  display: flex; align-items: center; gap: 10px; margin: 10px 0 6px;
+  font-size: 11px; font-weight: 620; letter-spacing: .02em; color: var(--bc-faint);
+}
+.day-sep::before, .day-sep::after { content: ''; flex: 1; height: 1px; background: var(--bc-border); }
+
+/* A status change is not a message and is not drawn as one: no side, no
+   bubble, no author. Centred and quiet, the way every chat marks the things
+   that happened rather than the things that were said. */
+.sys {
+  align-self: center; max-width: 90%; text-align: center; margin: 6px 0;
+  padding: 4px 10px; border-radius: 999px; background: var(--bc-subtle);
+  font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
+  animation: bc-fade-in 240ms ease both;
+}
+.sys .dot {
+  display: inline-block; width: 6px; height: 6px; margin-right: 6px;
+  border-radius: 50%; background: var(--bc-muted); vertical-align: middle;
+}
+.sys .t { color: var(--bc-faint); }
+.sys.k-status .dot { background: #4da3ff; }
+.sys.k-severity .dot { background: #e8912a; }
+.sys.k-assignment .dot { background: #8b7dff; }
+.sys.k-filed .dot { background: var(--bc-faint); }
+
+/* ---------- the conversation ----------
+
+   A status change and a message are different things and are drawn as such: a
+   change is a line on the rail above, a message is a bubble with a side. The
+   reporter's own words sit right and accented, the other side's left beside an
+   avatar that says who it is — the arrangement every chat has taught people to
+   read without a legend. */
+.msg-row, .typing-row {
+  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px;
+  max-width: 88%; margin-top: 10px;
+  animation: bc-rise 260ms var(--bc-ease) both;
+}
+.msg-row.cont { margin-top: 3px; }
+.msg-row > *, .typing-row > * { grid-column: 2; }
+/* Fixed rows, so the avatar lines up with the bubble whatever else the
+   message carries (a name above it, answers or a time below it). */
+.msg-row > .msg-who, .typing-row > .msg-who { grid-row: 1; }
+.msg-row > .bubble, .typing-row > .bubble { grid-row: 2; }
+.msg-row > .quick { grid-row: 3; }
+.msg-row > .msg-when { grid-row: 4; }
+.msg-row > .av, .typing-row > .av { grid-column: 1; grid-row: 2; align-self: end; }
+/* In a run of messages the avatar sits by the last bubble and the time under
+   it, the way a chat marks where one turn ends. */
+.msg-row:has(+ .msg-row.cont) > .av { visibility: hidden; }
+.msg-row:has(+ .msg-row.cont) > .msg-when { display: none; }
+.msg-row.theirs, .typing-row { align-self: flex-start; }
+.msg-row.mine { align-self: flex-end; grid-template-columns: minmax(0, 1fr); justify-items: end; }
+.msg-row.mine > * { grid-column: 1; }
+.av {
+  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
+  font-size: 11px; font-weight: 700; letter-spacing: .02em;
+  background: color-mix(in srgb, var(--bc-fg) 10%, var(--bc-bg)); color: var(--bc-fg);
+}
+.av.bot {
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+  color: var(--bc-on-accent); font-size: 14px;
+}
+.msg-who { font-size: var(--bc-fs-xs); font-weight: 620; color: var(--bc-muted); padding: 0 4px 4px; }
+.msg-who.auto { color: var(--bc-accent); display: inline-flex; align-items: center; gap: 5px; }
+.msg-who .tag {
+  padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
+  text-transform: uppercase; background: var(--bc-accent-soft); color: var(--bc-accent);
+}
+.bubble {
+  justify-self: start; max-width: 100%;
+  padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.5;
+  background: var(--bc-subtle); color: var(--bc-fg);
+  border: 1px solid var(--bc-border);
+  border-bottom-left-radius: 6px;
+}
+/* pre-wrap belongs to the text, not the box — on the box it would also render
+   the markup's own indentation. */
+.msg-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
+.msg-row.mine .bubble {
+  justify-self: end;
+  background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-on-accent);
+  border-bottom-left-radius: 18px; border-bottom-right-radius: 6px;
+}
+.msg-row.cont.theirs .bubble { border-top-left-radius: 6px; }
+.msg-row.cont.mine .bubble { border-top-right-radius: 6px; }
+/* A reply nobody wrote: tinted with the accent and labelled "Assistant" above
+   it, so it reads the same to someone who cannot see the colour at all. */
+.msg-row.auto .bubble { background: var(--bc-accent-soft); border-color: var(--bc-accent-line); }
+/* An attachment-only message has no text to wrap, so the bubble would be an
+   empty coloured box around it. */
+.bubble.silent { padding: 0; background: none !important; border: 0; }
+.msg-when { font-size: 10.5px; color: var(--bc-faint); padding: 4px 4px 0; }
+.msg-row.pending { opacity: .6; }
+.msg-row.pending .msg-when::after { content: ' · Sending…'; }
+.msg-row.failed .bubble { border: 1px solid var(--bc-danger); }
+.msg-row.failed .msg-when { color: var(--bc-danger); }
+.msg-row.failed .msg-when::after { content: ' · Not sent'; }
+
+/* The assistant, thinking. Three dots in a bubble where its next message will be. */
+.typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; justify-self: start; }
+.typing i {
+  width: 7px; height: 7px; border-radius: 50%; background: var(--bc-accent); opacity: .45;
+  animation: bc-typing 1.2s ease-in-out infinite;
+}
+.typing i:nth-child(2) { animation-delay: .15s; }
+.typing i:nth-child(3) { animation-delay: .3s; }
+.typing-row .msg-when { padding-top: 4px; }
+
+.att { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
+.bubble.silent .att { margin-top: 0; }
+.att img {
+  display: block; max-width: 100%; max-height: 190px; border-radius: var(--bc-r-md);
+  border: 1px solid var(--bc-border); object-fit: cover; cursor: zoom-in;
+}
+.att audio { width: 232px; max-width: 100%; height: 34px; }
+.att video { max-width: 100%; max-height: 190px; border-radius: var(--bc-r-md); }
+.att .file {
+  display: flex; align-items: center; gap: 8px; text-decoration: none;
+  padding: 8px 10px; border-radius: 10px; font-size: 12px;
+  background: var(--bc-elevated); border: 1px solid var(--bc-border); color: var(--bc-fg);
+}
+.att .file:hover { border-color: var(--bc-accent); }
+.att .file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.att .file .sz { flex: none; color: var(--bc-faint); font-size: 11px; }
+
+/* ---------- the assistant's live card ----------
+   A status header pinned between the report and the conversation: where the
+   investigation is, as words and as a stepper. It does not scroll with the
+   thread, because "is anything happening?" is the question on screen the
+   whole time. */
+.assistant {
+  flex: none; position: relative; overflow: hidden;
+  margin: 10px 12px 0; padding: 12px 14px 12px;
+  border-radius: var(--bc-r-lg); border: 1px solid var(--bc-border);
+  background: var(--bc-subtle);
+  transition: background 400ms ease, border-color 400ms ease;
+}
+.assistant.analyzing, .assistant.confirming, .assistant.needs_info {
+  background: var(--bc-accent-soft); border-color: var(--bc-accent-line);
+}
+.assistant.resolved { background: color-mix(in srgb, var(--bc-ok) 9%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border)); }
+/* On a call: the call's own card is what they are watching. This one states
+   what is happening and stops moving — no spinner, no travelling bar. */
+.assistant.calling { background: var(--bc-bg); }
+.assistant.calling .as-progress i { transition: none; }
+.as-body.entering { animation: bc-rise 360ms var(--bc-ease) both; }
+.as-top { display: flex; gap: 11px; align-items: center; }
+.as-orb {
+  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
+  color: var(--bc-on-accent); font-size: 15px;
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+}
+.assistant.resolved .as-orb { background: var(--bc-ok); }
+.assistant.reviewing .as-orb { background: color-mix(in srgb, var(--bc-fg) 55%, var(--bc-bg)); }
+.as-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: as-rot .8s linear infinite; }
+@keyframes as-rot { to { transform: rotate(360deg); } }
+.as-text { min-width: 0; flex: 1; }
+.as-title { font-weight: 650; font-size: 13.5px; letter-spacing: -.01em; color: var(--bc-fg); }
+.as-detail { font-size: 12px; line-height: 1.45; color: var(--bc-muted); margin-top: 2px; }
+.as-progress {
+  height: 4px; margin: 12px 0 0; border-radius: 999px; overflow: hidden;
+  background: color-mix(in srgb, var(--bc-fg) 9%, transparent);
+}
+.as-progress i {
+  display: block; height: 100%; border-radius: inherit; background: var(--bc-accent);
+  transition: width 700ms var(--bc-ease);
+}
+.assistant.resolved .as-progress i { background: var(--bc-ok); }
+.assistant.analyzing .as-progress i {
+  background: linear-gradient(90deg, var(--bc-accent) 0%, color-mix(in srgb, var(--bc-accent) 45%, #fff) 50%, var(--bc-accent) 100%);
+  background-size: 200% 100%; animation: bc-shimmer 1.6s linear infinite;
+}
+.as-steps {
+  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
+  margin: 8px 0 0; padding: 0; font-size: 10.5px; color: var(--bc-faint);
+}
+.as-steps li { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
+.as-steps li .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.as-steps li .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
+.as-steps li.done { color: var(--bc-muted); }
+.as-steps li.done .dot { background: var(--bc-accent); border-color: var(--bc-accent); }
+.assistant.resolved .as-steps li.done .dot { background: var(--bc-ok); border-color: var(--bc-ok); }
+.as-steps li.active { color: var(--bc-fg); font-weight: 650; }
+.as-steps li.active .dot { border-color: var(--bc-accent); background: var(--bc-bg); animation: as-pulse 1.2s ease-in-out infinite; }
+@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent) 25%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .as-spin, .as-steps li.active .dot, .assistant.analyzing .as-progress i, .typing i { animation: none; } }
+
+/* Quick answers under the confirm question — only on the latest message. */
+.msg-row .quick { display: none; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
+.msg-row:last-child .quick { display: flex; }
+.quick button {
+  display: inline-flex; align-items: center; gap: 6px;
+  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-accent); background: var(--bc-bg); color: var(--bc-accent);
+  transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
+  animation: bc-item-in 300ms var(--bc-ease) both;
+}
+.quick button:first-child { background: var(--bc-accent); color: var(--bc-on-accent); }
+.quick button:nth-child(2) { animation-delay: 60ms; }
+.quick button svg { font-size: 13px; }
+.quick button:hover { transform: translateY(-1px); background: var(--bc-accent-soft); }
+.quick button:first-child:hover { background: var(--bc-accent); filter: brightness(1.07); }
+
+/* ---------- the composer ---------- */
+.composer {
+  flex: none; position: relative;
+  padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
+  /* The panel's own background, not --bc-elevated: the two are the same white
+     in light mode but differ in dark, where a raised composer reads as a band
+     laid over the panel rather than the foot of it. */
+  background: var(--bc-bg);
+  border-top: 1px solid var(--bc-border);
+}
+/* One rounded field holding the tools, the text and the send button — the
+   shape every chat box has, so nobody has to look for where to type. */
+.composer .row {
+  display: flex; align-items: flex-end; gap: 4px;
+  padding: 5px; border-radius: 22px;
+  background: var(--bc-subtle); border: 1px solid var(--bc-border);
+  transition: border-color 160ms, box-shadow 160ms;
+}
+.composer .row:focus-within { border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
+.composer textarea {
+  flex: 1; min-width: 0; min-height: 34px; max-height: 120px; resize: none; padding: 7px 6px;
+  font: inherit; font-size: 13.5px; line-height: 1.45;
+  color: var(--bc-fg); background: transparent; border: 0; border-radius: 0;
+}
+.composer textarea:hover, .composer textarea:focus { border: 0; box-shadow: none; outline: none; }
+.composer .tools { display: flex; gap: 0; grid-template-columns: none; }
+.composer .tool {
+  width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
+  border-radius: 50%; border: 0; background: none; font-size: 17px;
+  color: var(--bc-muted);
+}
+.composer .tool svg { font-size: 17px; }
+.composer .tool:hover:not(:disabled) { background: color-mix(in srgb, var(--bc-fg) 8%, transparent); color: var(--bc-fg); border: 0; transform: none; }
+.composer .tool:hover:not(:disabled) svg { color: var(--bc-fg); }
+.composer .tool:disabled { opacity: .4; cursor: default; }
+.composer .tool.recording { color: var(--bc-danger); background: color-mix(in srgb, var(--bc-danger) 12%, transparent); }
+.composer .tool.recording svg { color: var(--bc-danger); }
+.composer .send {
+  width: 34px; height: 34px; flex: none; border-radius: 50%; cursor: pointer; font-size: 16px;
+  background: var(--bc-accent); border: 0; color: var(--bc-on-accent);
+  display: grid; place-items: center;
+  transition: transform 160ms var(--bc-ease), opacity 160ms, filter 160ms;
+}
+.composer .send:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.05); }
+.composer .send:disabled { opacity: .35; cursor: default; background: var(--bc-faint); }
+.composer .staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
+.composer .chip {
+  display: flex; align-items: center; gap: 6px; max-width: 200px;
+  padding: 5px 7px 5px 10px; border-radius: 999px; font-size: var(--bc-fs-xs);
+  background: var(--bc-subtle); border: 1px solid var(--bc-border); color: var(--bc-muted);
+  animation: bc-item-in 240ms var(--bc-ease) both;
+}
+.composer .chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bc-fg); }
+.composer .chip button {
+  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
+  border: 0; border-radius: 50%; background: none; color: var(--bc-faint); cursor: pointer;
+}
+.composer .chip button:hover { color: var(--bc-danger); }
+.composer .chip.uploading { border-style: dashed; }
+.composer .note { padding: 6px 6px 0; font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+.composer .note.err { color: var(--bc-danger); }
+.reccount { font-variant-numeric: tabular-nums; }
+
+/* Status carries the only colour in this list, so it is the thing the eye
+   lands on — which is what someone opening this screen came to check. */
+.pill {
+  flex: none; display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11px; font-weight: 650;
+  padding: 3px 9px; border-radius: 999px;
+  color: var(--bc-muted); background: var(--bc-subtle);
+}
+.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.pill.open { color: #c2410c; background: color-mix(in srgb, #f59e0b 14%, var(--bc-bg)); }
+.pill.in_progress { color: #1d6fd1; background: color-mix(in srgb, #3b82f6 14%, var(--bc-bg)); }
+.pill.resolved { color: #0f8a5a; background: color-mix(in srgb, #10b981 14%, var(--bc-bg)); }
+.pill.closed { color: var(--bc-muted); }
+:host(.bc-dark) .pill.open { color: #fbbf24; }
+:host(.bc-dark) .pill.in_progress { color: #7cb8ff; }
+:host(.bc-dark) .pill.resolved { color: #4ade9a; }
+@media (prefers-color-scheme: dark) {
+  :host(.bc-auto) .pill.open { color: #fbbf24; }
+  :host(.bc-auto) .pill.in_progress { color: #7cb8ff; }
+  :host(.bc-auto) .pill.resolved { color: #4ade9a; }
+}
+
+/* ---------- does the fix work ---------- */
+.fix-verification {
+  flex: none; margin: 10px 12px 0; padding: 12px 14px;
+  border-radius: var(--bc-r-lg); border: 1px solid color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border));
+  background: color-mix(in srgb, var(--bc-ok) 8%, var(--bc-bg));
+  font-size: var(--bc-fs-sm); color: var(--bc-fg);
+  animation: bc-rise 280ms var(--bc-ease) both;
+}
+.fix-verification p { margin: 0 0 8px; font-weight: 620; }
+.fix-verification textarea { min-height: 56px; margin-bottom: 8px; font-size: 13px; background: var(--bc-bg); }
+.fix-verification button {
+  padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-border); background: var(--bc-bg); color: var(--bc-fg);
+}
+.fix-verification button[data-result="CONFIRMED"] { background: var(--bc-ok); border-color: var(--bc-ok); color: #fff; }
+.fix-verification .feedback-status { margin: 6px 0 0; font-weight: 450; color: var(--bc-danger); font-size: var(--bc-fs-xs); }
+.fix-verification .feedback-status:empty { display: none; }
+
+/* A call in progress, in place of the form.
+   ---------------------------------------------------------------------------
+   Deliberately not styled as a chat. Nothing arrives here to read — the
+   conversation is happening out loud — so this is a state, a line of
+   reassurance about the report, and a way to hang up. */
+.call { display: flex; flex-direction: column; padding: 26px 0 0; animation: bc-fade-in 240ms ease both; }
+.call-head, .call-note { padding: 0 var(--bc-pad); }
+.call-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
+.call-head strong { font-size: 15.5px; font-weight: 680; letter-spacing: -.01em; }
+.call-dot {
+  width: 9px; height: 9px; border-radius: 50%; background: var(--bc-accent);
+  animation: bc-call-pulse 1.6s ease-in-out infinite;
+}
+.call-dot.off { background: var(--bc-faint); animation: none; }
+@keyframes bc-call-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
+/* Said while it is still ringing, because that is when somebody is deciding
+   whether it is worth waiting. */
+.call-note { margin: 0 0 18px; font-size: 13px; color: var(--bc-muted); line-height: 1.55; }
+
+/* ---------- the same call, on top of the report it is about ---------- */
+/* A bar rather than its own screen, unlike the one the composer opens. The
+   thread underneath is exactly what both people are talking about, so taking it
+   off screen would be taking away the only shared reference. */
+.livecall {
+  flex: none;
+  display: flex; align-items: center; gap: 9px;
+  margin: 10px 12px 0; padding: 9px 11px;
+  border: 1px solid var(--bc-accent-line); border-radius: var(--bc-r-md);
+  background: var(--bc-accent-soft); font-size: var(--bc-fs-sm); color: var(--bc-fg);
+  animation: bc-rise 240ms var(--bc-ease) both;
+}
+.livecall .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.livecall .call-kept { font-size: 11px; opacity: .75; }
+.livecall .secs { font-variant-numeric: tabular-nums; color: var(--bc-muted); }
+.livecall .act {
+  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bc-border);
+  background: var(--bc-bg); color: var(--bc-fg);
+  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
+}
+.livecall .act:hover { background: var(--bc-subtle); }
+.livecall .act.danger { border-color: transparent; background: var(--bc-danger); color: #fff; }
+.livecall.over { color: var(--bc-muted); background: var(--bc-subtle); border-color: var(--bc-border); }
+.call-note code { font-size: 11px; }
+@media (prefers-reduced-motion: reduce) { .call-dot { animation: none; } }
+
+/* div.done, not .done: the assistant's stepper marks finished steps li.done,
+   and this screen's padding was landing on every one of them. */
+div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 240ms ease both; }
+.done .tick {
+  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
+  display: grid; place-items: center; font-size: 26px;
+  background: color-mix(in srgb, var(--bc-ok) 14%, transparent); color: var(--bc-ok);
+  box-shadow: 0 0 0 8px color-mix(in srgb, var(--bc-ok) 6%, transparent);
+  animation: bc-pop 420ms var(--bc-ease) both;
+}
+.done h3 { margin: 0 0 6px; font-size: 17px; font-weight: 680; letter-spacing: -.015em; }
+.done p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bc-muted); }
+.done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--bc-subtle); color: var(--bc-fg); }
+/* The likely wait. Set apart from the reference line above it by a rule rather
+   than by weight: one is bookkeeping and the other is the answer to the
+   question the reporter actually has, and they should not read as one
+   paragraph. */
+.done .eta {
+  margin: 14px auto 0;
+  padding-top: 12px;
+  border-top: 1px solid var(--bc-border);
+  max-width: 30ch;
+  line-height: 1.5;
+}
+.done .eta strong { color: var(--bc-fg); font-weight: 620; }
+/* The same figure on the report the reporter came back to. Sits under the
+   status pill in the header block, muted — it is context, not the headline the
+   status is. */
+.report-head .eta-line {
+  grid-column: 1 / -1;
+  font-size: var(--bc-fs-xs);
+  color: var(--bc-muted);
+  margin-top: 2px;
+}
+
+/* ---------- recording bar ---------- */
+.recbar {
+  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
+  z-index: 2147483002;
+  display: flex; align-items: center; gap: 12px;
+  padding: 8px 8px 8px 16px; border-radius: 999px;
+  background: var(--bc-elevated); color: var(--bc-fg);
+  border: 1px solid var(--bc-border); box-shadow: var(--bc-shadow);
+  animation: bc-item-in 300ms var(--bc-ease) both;
+}
+.recbar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bc-danger); animation: bc-pulse 1.4s ease-in-out infinite; }
+.recbar .time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 650; min-width: 38px; }
+.recbar .hint { font-size: 12px; color: var(--bc-muted); }
+.recbar button { height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer; }
+.recbar .stop { background: var(--bc-danger); border: 1px solid var(--bc-danger); color: #fff; }
+.recbar .stop:hover { filter: brightness(1.08); }
+
+/* ---------- phones ----------------------------------------------------------
+   This widget runs inside a shadow root on somebody else's site, so its own
+   stylesheet is the whole story: the host page cannot correct any of this, and
+   anything that goes wrong here goes wrong on their site, in front of their
+   visitor, at the moment that visitor is already annoyed enough to file a bug.
+   -------------------------------------------------------------------------- */
+
+/* 100vh on a phone is the viewport with the browser chrome hidden, so the
+   panel could be taller than the space it actually has and put "Send report"
+   under the address bar. */
+@supports (height: 100dvh) {
+  .panel { max-height: calc(100dvh - var(--bc-dock-h, 84px) - 52px); }
+}
+
+/* Short desktop windows: the chat height gives way to the space there is. */
+@media (max-height: 820px) { .panel.is-chat { height: calc(100vh - var(--bc-dock-h, 84px) - 52px); } }
+
+/* A phone gets the whole screen: a sheet that slides up from the bottom, with
+   the notch and the home indicator kept clear. The dock steps aside while it
+   is open — the sheet has its own close button, and a launcher floating over
+   the send button would be in the way of the one thing that matters. */
+@media (max-width: 480px) {
+  .scrim { background: rgba(10,12,16,.4); }
+  .panel, .scrim.at-right .panel, .scrim.at-left .panel, .scrim.at-bottom .panel, .scrim.at-top .panel {
+    inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
+    border-radius: 0; border: 0;
+    animation: bc-sheet-in 380ms var(--bc-ease) both;
+  }
+  @supports (height: 100dvh) { .panel { height: 100dvh; max-height: none; } }
+  .panel.is-chat { height: 100%; }
+  .scrim.closing .panel { animation: bc-sheet-out 200ms ease both; }
+  .head { padding-top: max(14px, env(safe-area-inset-top, 0px)); padding-left: max(var(--bc-pad), env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
+  .foot, .powered { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
+  .foot + .powered { padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)); }
+  .foot:has(+ .powered) { padding-bottom: 12px; }
+  .recbar .hint { display: none; }
+  .msg-row, .typing-row { max-width: 92%; }
+}
+
+@media (pointer: coarse) {
+  /* iOS zooms the whole page when a field it focuses is under 16px, and does
+     not zoom back out. On the host's site that is not the widget's page to
+     zoom — the visitor is left on a magnified checkout wondering what they
+     touched. !important because this is a property of the device, not a
+     preference about type. */
+  input, textarea, select { font-size: 16px !important; }
+
+  /* 44px is the floor a thumb hits reliably. Every control in this form was
+     under it, on the one surface in the product designed for someone who is
+     not an operator and gets no second attempt. */
+  .seg button { min-height: 44px; }
+  .tool { min-height: 56px; }
+  button.primary, button.ghost { height: 44px; }
+  .composer .send, .composer .tool { width: 40px; height: 40px; min-height: 0; }
+  textarea { min-height: 104px; }
+  .composer textarea { min-height: 40px; }
+
+  /* The close button and the thumbnails' remove buttons are small glyphs whose
+     boxes cannot grow without moving what is beside them, so each keeps its
+     size and gets an invisible target drawn around it instead. The theme
+     switch gets the same in the launcher's own sheet (widget.js). */
+  .head .icon-btn, .thumb .drop, .brand-credit { position: relative; }
+  .thumb .drop { position: absolute; opacity: 1; }
+  .head .icon-btn::after, .thumb .drop::after, .brand-credit::after {
+    content: '';
+    position: absolute;
+    inset: -8px;
+  }
+}
+
+/* Hover is a lie on a touchscreen: it latches on tap and stays. */
+@media (hover: none) {
+  .tool:hover:not(:disabled) { transform: none; }
+}
+`;
+function ce({ title: e, sub: t, id: n = "", back: y = !1 }) {
+  return `
+    <div class="head">
+      ${y ? `<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${Ve}</button>` : ""}
+      <div class="mark" aria-hidden="true">${X}</div>
+      <div class="titles">
+        <h2${n ? ` id="${n}"` : ""}>${m(e)}</h2>
+        <p>${m(t)}</p>
+      </div>
+      <button class="icon-btn" type="button" data-act="close" aria-label="Close">${de}</button>
+    </div>`;
+}
+function ie(e, t) {
+  return `<div class="empty"><span class="empty-ico" aria-hidden="true">${t}</span>${m(e)}</div>`;
+}
+function Ye(e) {
+  return Array.from({ length: e }, () => `
+    <div class="row" aria-hidden="true">
+      <span class="row-ico"></span>
+      <span class="who"><span class="skel" style="width:70%"></span><span class="skel" style="width:40%;height:9px"></span></span>
+    </div>`).join("") + '<span class="sr-only">Loading…</span>';
+}
+function Pe() {
+  return `
+    <div aria-hidden="true" style="display:flex;flex-direction:column;gap:10px;padding-top:6px">
+      <span class="skel" style="width:42%;height:34px;border-radius:16px;align-self:center"></span>
+      <span class="skel" style="width:66%;height:52px;border-radius:18px"></span>
+      <span class="skel" style="width:48%;height:38px;border-radius:18px;align-self:flex-end"></span>
+    </div>
+    <span class="sr-only">Loading…</span>`;
+}
+function We(e) {
+  const t = String(e).trim().split(/\s+/).filter(Boolean);
+  return t.length ? (t[0][0] + (t.length > 1 ? t[t.length - 1][0] : "")).toUpperCase() : "?";
+}
+function Z(e) {
+  const t = new Date(e);
+  return Number.isFinite(t.getTime()) ? `${t.getFullYear()}-${t.getMonth()}-${t.getDate()}` : null;
+}
+function Ke(e) {
+  const t = new Date(e), n = /* @__PURE__ */ new Date(), y = new Date(n.getFullYear(), n.getMonth(), n.getDate() - 1);
+  if (Z(t) === Z(n)) return "Today";
+  if (Z(t) === Z(y)) return "Yesterday";
+  try {
+    return t.toLocaleDateString(void 0, {
+      weekday: "short",
+      day: "numeric",
+      month: "short",
+      ...t.getFullYear() !== n.getFullYear() ? { year: "numeric" } : {}
+    });
+  } catch {
+    return oe(e);
+  }
+}
+function me(e) {
+  const t = new Date(e);
+  if (!Number.isFinite(t.getTime())) return "";
+  try {
+    return t.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+  } catch {
+    return "";
+  }
+}
+function ue(e) {
+  return e.scrollHeight - e.scrollTop - e.clientHeight < 40;
+}
+function _(e, { smooth: t = !1 } = {}) {
+  const n = typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  t && !n && e.scrollTo ? e.scrollTo({ top: e.scrollHeight, behavior: "smooth" }) : e.scrollTop = e.scrollHeight;
+}
+function se(e) {
+  return {
+    OPEN: "Open",
+    IN_PROGRESS: "In progress",
+    RESOLVED: "Fixed",
+    CLOSED: "Closed"
+  }[e] || String(e || "").toLowerCase();
+}
+function oe(e) {
+  const t = new Date(e).getTime();
+  if (!Number.isFinite(t)) return "";
+  const n = Math.floor((Date.now() - t) / 864e5);
+  if (n <= 0) return "today";
+  if (n === 1) return "yesterday";
+  if (n < 30) return `${n} days ago`;
+  const y = Math.floor(n / 30);
+  return y === 1 ? "a month ago" : `${y} months ago`;
+}
+function m(e) {
+  return String(e).replace(/[&<>"']/g, (t) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[t]);
+}
+const Fe = 7 * 24 * 60 * 60 * 1e3;
+let ee;
+function Ue() {
+  return ee || (ee = new Promise((e, t) => {
+    const n = indexedDB.open("bugcatch-drafts", 1);
+    n.onupgradeneeded = () => n.result.createObjectStore("drafts"), n.onsuccess = () => e(n.result), n.onerror = () => t(n.error), n.onblocked = () => t(new Error("Draft storage is blocked."));
+  }).catch((e) => {
+    throw ee = null, e;
+  })), ee;
+}
+function Ze(e, t) {
+  var n, y;
+  return JSON.stringify([e.apiBase, e.projectId, t || ((n = e.user) == null ? void 0 : n.email) || ((y = e.user) == null ? void 0 : y.id) || "anonymous"]);
+}
+async function ae(e, t) {
+  const n = await Ue();
+  return new Promise((y, u) => {
+    const T = n.transaction("drafts", t === void 0 ? "readonly" : "readwrite"), v = T.objectStore("drafts"), s = t === void 0 ? v.get(e) : t === null ? v.delete(e) : v.put({ ...t, savedAt: Date.now() }, e);
+    T.oncomplete = () => y(s.result), T.onerror = () => u(T.error), T.onabort = () => u(T.error || new Error("Draft was not saved."));
+  });
+}
+async function _e(e) {
+  const t = await ae(e);
+  return t && Date.now() - t.savedAt > Fe ? (await ae(e, null), null) : t || null;
+}
+const ve = [
+  { value: "LOW", label: "Low" },
+  { value: "MEDIUM", label: "Medium" },
+  { value: "HIGH", label: "High" },
+  { value: "CRITICAL", label: "Critical" }
+], xe = "MEDIUM";
+function Ge(e) {
+  const t = e.attachments !== !1, n = t && we(), y = t && ke();
+  return `
+        <div class="compose">
+        <div class="field">
+          <label for="bc-title">What went wrong?</label>
+          <input id="bc-title" type="text" placeholder="e.g. The checkout button does nothing" autocomplete="off"
+            aria-describedby="bc-title-err" />
+          <p class="field-err" id="bc-title-err" hidden></p>
+        </div>
+        <div class="field">
+          <label for="bc-desc">Anything else that helps <span class="opt">(optional)</span></label>
+          <textarea id="bc-desc" placeholder="What you were doing, what you expected, what happened instead."></textarea>
+        </div>
+        <!-- Drawn only when this project asks for an identifier and the report
+             does not already carry one. Between the description and the
+             severity because that is where it belongs in the reading order:
+             it is a question about what they just typed. -->
+        <div class="refs" hidden></div>
+        <div class="field">
+          <label id="bc-prio-l">How much is it getting in your way?</label>
+          <div class="seg" role="group" aria-labelledby="bc-prio-l">
+            ${ve.map((u) => `
+              <button type="button" data-prio="${u.value}" aria-pressed="${u.value === xe}">${u.label}</button>
+            `).join("")}
+          </div>
+        </div>
+        ${t ? `
+        <div class="field">
+          <div class="field-head">
+            <label id="bc-att-l">Show us <span class="opt">(optional)</span></label>
+            <span class="count" aria-live="polite"></span>
+          </div>
+          <div class="tools" role="group" aria-labelledby="bc-att-l">
+            ${n ? `<button class="tool" type="button" data-act="shot">${Ie}Screenshot</button>` : ""}
+            ${y ? `<button class="tool" type="button" data-act="rec">${Ae}Record screen</button>` : ""}
+            <button class="tool" type="button" data-act="file">${fe}Upload file</button>
+          </div>
+          <div class="thumbs"></div>
+          <input type="file" accept="${be.join(",")}" multiple hidden />
+        </div>` : ""}
+        </div>`;
+}
+function Xe(e) {
+  var re, F, U, q;
+  const {
+    client: t,
+    cfg: n,
+    root: y,
+    host: u,
+    dock: T,
+    scrim: v,
+    $: s,
+    say: i,
+    titleInput: h,
+    descInput: g,
+    compose: f,
+    sendBtn: b,
+    note: z
+  } = e, Q = s(".thumbs"), c = v.querySelector("input[type=file]"), d = [];
+  let l = xe, a = null;
+  const r = document.createElement("div");
+  r.setAttribute("role", "status"), r.className = "note", f.prepend(r);
+  const $ = Ze(n, (re = t.signedInAs()) == null ? void 0 : re.email);
+  let E = n.drafts === !1, x = !1, p = Promise.resolve(), w;
+  function S() {
+    if (clearTimeout(w), !E || x || n.drafts === !1) return p;
+    const o = h.value || g.value || d.length ? {
+      title: h.value,
+      description: g.value,
+      priority: l,
+      items: d.map(({ blob: L, mime: I, kind: C }) => ({ blob: L, mime: I, kind: C }))
+    } : null;
+    return p = p.catch(() => {
+    }).then(() => ae($, o)).then(() => {
+      r.textContent = o ? "Draft saved on this device" : "";
+    }).catch(() => {
+      r.textContent = "Draft could not be saved. Keep this tab open.";
+    }), p;
+  }
+  function A() {
+    clearTimeout(w), w = setTimeout(S, 250);
+  }
+  f.addEventListener("input", A), f.addEventListener("change", A);
+  const D = () => {
+    S();
+  };
+  window.addEventListener("pagehide", D);
+  function O() {
+    d.filter((o) => o.status === "failed").forEach(K);
+  }
+  window.addEventListener("online", O), n.drafts !== !1 && (f.inert = !0, _e($).then((o) => {
+    e.closed || !o || (r.innerHTML = '<span>You have an unfinished report on this device.</span> <button type="button" data-resume>Resume report</button> <button type="button" data-discard>Discard</button>', r.querySelector("[data-resume]").onclick = () => {
+      h.value = o.title || "", g.value = o.description || "", l = ve.some((L) => L.value === o.priority) ? o.priority : "MEDIUM", v.querySelectorAll("[data-prio]").forEach((L) => L.setAttribute("aria-pressed", String(L.dataset.prio === l)));
+      for (const L of (o.items || []).slice(0, n.maxAttachments ?? 5)) N(L);
+      E = !0, S();
+    }, r.querySelector("[data-discard]").onclick = () => {
+      E = !0, S();
+    });
+  }).catch(() => {
+    r.textContent = "Draft storage is unavailable. Keep this tab open.";
+  }).finally(() => {
+    f.inert = !1, r.querySelector("[data-resume]") || (E = !0);
+  })), e.onDestroy(() => {
+    var o;
+    S(), clearTimeout(w), window.removeEventListener("pagehide", D), window.removeEventListener("online", O), a == null || a.cancel(), d.forEach((L) => L.previewUrl && URL.revokeObjectURL(L.previewUrl)), (o = y.querySelector(".recbar")) == null || o.remove();
+  }), v.querySelectorAll("[data-prio]").forEach((o) => {
+    o.addEventListener("click", () => {
+      l = o.dataset.prio, A(), v.querySelectorAll("[data-prio]").forEach((L) => {
+        L.setAttribute("aria-pressed", String(L === o));
+      });
+    });
+  });
+  const B = s("#bc-title-err");
+  function k(o) {
+    B.hidden = !o, B.innerHTML = o ? `${G}<span>${m(o)}</span>` : "", h.classList.toggle("invalid", !!o), h.setAttribute("aria-invalid", String(!!o));
+  }
+  h.addEventListener("input", () => {
+    h.value.trim() && k("");
+  });
+  function M() {
+    const o = d.some((C) => C.status === "uploading");
+    b.disabled = e.sending || o || d.some((C) => C.status === "failed"), z.textContent = o ? "Waiting for the upload to finish…" : d.some((C) => C.status === "failed") ? "Retry or remove failed attachments before sending." : "";
+    const L = n.maxAttachments ?? 5;
+    v.querySelectorAll(".tool").forEach((C) => {
+      C.disabled = e.sending || d.length >= L;
+    });
+    const I = s(".field-head .count");
+    I && (I.textContent = d.length ? `${d.length} of ${L}` : "");
+  }
+  e.refreshSendState = M;
+  function H(o) {
+    var Y;
+    const L = o.el, I = o.kind === "VIDEO" ? "Video" : "Shot", C = o.kind === "VIDEO" ? `<video src="${o.previewUrl}" muted playsinline preload="metadata"></video>` : `<img src="${o.previewUrl}" alt="" />`;
+    let R = "";
+    o.status === "uploading" ? R = `<div class="veil"><div class="spinner"></div><div class="bar"><i style="width:${Math.round(o.progress * 100)}%"></i></div></div>` : o.status === "failed" && (R = `<div class="veil err"><button type="button" data-act="retry" aria-label="Retry upload">${De}</button>Failed</div>`), L.innerHTML = `
+      ${C}
+      <span class="kind">${I} · ${P(o.size)}</span>
+      <button class="drop" type="button" data-act="drop" aria-label="Remove ${I.toLowerCase()}">${de}</button>
+      ${R}`, L.querySelector('[data-act="drop"]').addEventListener("click", () => V(o)), (Y = L.querySelector('[data-act="retry"]')) == null || Y.addEventListener("click", () => K(o));
+  }
+  function V(o) {
+    const L = d.indexOf(o);
+    L >= 0 && d.splice(L, 1), o.previewUrl && URL.revokeObjectURL(o.previewUrl), o.el.remove(), S(), M();
+  }
+  async function K(o) {
+    o.status = "uploading", o.progress = 0, H(o), M();
+    try {
+      const { storageKey: L, mime: I } = await t.uploadAttachment(o.blob, o.mime, (C) => {
+        o.progress = C;
+        const R = o.el.querySelector(".bar i");
+        R && (R.style.width = `${Math.round(C * 100)}%`);
+      });
+      o.storageKey = L, o.mime = I, o.status = "ready";
+    } catch (L) {
+      o.status = "failed", i(L.message.replace("[BugCatch] ", ""));
+    }
+    H(o), M();
+  }
+  function N({ blob: o, mime: L, kind: I }) {
+    const C = n.maxAttachmentBytes ?? 26214400;
+    if (o.size > C) {
+      i(`That file is ${P(o.size)} — the limit is ${P(C)}.`);
+      return;
+    }
+    const R = $e(L || o.type, be);
+    if (!R) {
+      i("Only PNG, JPEG, WebP, WebM and MP4 files can be attached to a report.");
+      return;
+    }
+    const Y = {
+      blob: o,
+      kind: I,
+      mime: R,
+      size: o.size,
+      previewUrl: URL.createObjectURL(o),
+      status: "uploading",
+      progress: 0,
+      storageKey: null,
+      el: document.createElement("div")
+    };
+    Y.el.className = "thumb", d.push(Y), Q.appendChild(Y.el), i(""), S(), K(Y);
+  }
+  async function J(o) {
+    u.style.opacity = "0", u.style.pointerEvents = "none", await new Promise((L) => requestAnimationFrame(() => requestAnimationFrame(L)));
+    try {
+      return await o();
+    } finally {
+      u.style.opacity = "", u.style.pointerEvents = "";
+    }
+  }
+  (F = v.querySelector('[data-act="shot"]')) == null || F.addEventListener("click", async () => {
+    try {
+      const o = await J(Se);
+      N(o);
+    } catch (o) {
+      (o == null ? void 0 : o.name) !== "NotAllowedError" && i(`Screenshot failed: ${o.message}`);
+    }
+  }), (U = v.querySelector('[data-act="file"]')) == null || U.addEventListener("click", () => c.click()), c == null || c.addEventListener("change", () => {
+    const o = (n.maxAttachments ?? 5) - d.length;
+    [...c.files].slice(0, Math.max(o, 0)).forEach((L) => {
+      N({
+        blob: L,
+        mime: L.type,
+        kind: L.type.startsWith("video/") ? "VIDEO" : "SCREENSHOT"
+      });
+    }), c.value = "";
+  }), (q = v.querySelector('[data-act="rec"]')) == null || q.addEventListener("click", async () => {
+    const o = n.maxRecordingMs ?? 12e4;
+    let L;
+    try {
+      a = await Qe({
+        maxMs: o,
+        onTick: (I) => {
+          L && (L.querySelector(".time").textContent = te(I));
+        },
+        onAutoStop: () => {
+          a && j({ keep: !0 });
+        }
+      });
+    } catch (I) {
+      (I == null ? void 0 : I.name) !== "NotAllowedError" && i(`Recording failed: ${I.message}`);
+      return;
+    }
+    v.style.display = "none", T.hidden = !0, L = document.createElement("div"), L.className = "recbar", L.innerHTML = `
+      <span class="dot"></span>
+      <span class="time">0:00</span>
+      <span class="hint">Recording — up to ${te(Math.round(o / 1e3))}</span>
+      <button class="stop" type="button">Stop</button>
+      <button class="ghost" type="button">Discard</button>`, L.querySelector(".stop").addEventListener("click", () => j({ keep: !0 })), L.querySelector(".ghost").addEventListener("click", () => j({ keep: !1 })), y.appendChild(L), L.querySelector(".stop").focus();
+  });
+  async function j({ keep: o }) {
+    var I;
+    const L = a;
+    if (L) {
+      if (a = null, (I = y.querySelector(".recbar")) == null || I.remove(), v.style.display = "", T.hidden = !1, !o) {
+        L.cancel(), h.focus();
+        return;
+      }
+      try {
+        const C = await L.stop();
+        C.blob.size ? N(C) : i("That recording came back empty — nothing was captured.");
+      } catch (C) {
+        i(`Recording failed: ${C.message}`);
+      }
+      h.focus();
+    }
+  }
+  e.isRecording = () => !!a, e.stopRecording = j, b.addEventListener("click", async () => {
+    var I;
+    const o = h.value;
+    if (!o.trim()) {
+      k("Add a few words about what went wrong — a short sentence is plenty."), h.focus();
+      return;
+    }
+    if (e.holdForReference()) return;
+    e.sending = !0, i(""), M();
+    const L = b.innerHTML;
+    b.innerHTML = '<span class="spinner" aria-hidden="true"></span>Sending…';
+    try {
+      const C = await t.report({
+        title: o,
+        description: g.value,
+        priority: l,
+        references: e.answeredReference(),
+        issue: ((I = e.pickedIssue()) == null ? void 0 : I.key) || null,
+        attachments: d.filter((R) => R.status === "ready").map((R) => ({ type: R.kind, storageKey: R.storageKey, mime: R.mime }))
+      });
+      if (C != null && C.cancelled) {
+        e.sending = !1, b.innerHTML = L, M();
+        return;
+      }
+      x = !0, clearTimeout(w), await p, n.drafts !== !1 && await ae($, null).catch(() => {
+      }), e.succeed(C);
+    } catch (C) {
+      e.sending = !1, b.innerHTML = L, i(C.message.replace("[BugCatch] ", "")), M(), e.recheckSignIn();
+    }
+  });
+}
+function Je(e) {
+  const {
+    client: t,
+    say: n,
+    titleInput: y,
+    descInput: u,
+    sendBtn: T,
+    refsBox: v
+  } = e;
+  let s = { policy: "off", fields: [] }, i = !1, h = null, g = "", f = "", b = [], z = "ask", Q = !1, c = !1;
+  t.referenceFields().then((k) => {
+    s = k, E();
+  }).catch(() => {
+  });
+  function d() {
+    return s.policy === "off" || !s.fields.length ? { found: [], conflicts: [], loose: [] } : Le(s.fields, [y.value, u.value]);
+  }
+  function l(k = d()) {
+    return k.found.length > 0 && k.conflicts.length === 0;
+  }
+  function a() {
+    return !h || !g.trim() ? [] : [{ key: h, value: g.trim().slice(0, 120) }];
+  }
+  const r = document.createElement("p");
+  r.className = "ref-found", r.setAttribute("aria-live", "polite"), r.hidden = !0, u.closest(".field").after(r);
+  let $;
+  function E() {
+    const k = d();
+    if (l(k)) {
+      const M = k.found.slice(0, 2).map((H) => `${m(H.label)} <b>${m(p(H.value))}</b>`).join(", ");
+      r.innerHTML = `${W}<span>Found your ${M} — no need to add it again.</span>`, r.hidden = !1, i && !a().length && (i = !1, A());
+    } else
+      r.hidden = !0, r.innerHTML = "";
+  }
+  const x = () => {
+    clearTimeout($), $ = setTimeout(E, 250);
+  };
+  y.addEventListener("input", x), u.addEventListener("input", x);
+  function p(k) {
+    return k.length > 20 ? `${k.slice(0, 8)}…${k.slice(-4)}` : k;
+  }
+  function w(k) {
+    const M = k.trim().toLowerCase();
+    return b.find((H) => H.value.toLowerCase() === M) || null;
+  }
+  function S(k) {
+    g = k.value, k.kinds.length === 1 ? h = k.kinds[0].key : k.kinds.some((M) => M.key === h) || (h = null), f = "", c = !1;
+  }
+  function A() {
+    var F, U;
+    if (!i) {
+      v.hidden = !0, v.innerHTML = "";
+      return;
+    }
+    const k = s.fields.find((q) => q.key === h) || null, M = s.policy !== "required", H = w(g), V = H && H.kinds.length > 1 ? s.fields.filter((q) => H.kinds.some((o) => o.key === q.key)) : s.fields, K = b.length > 1 && b.every((q) => q.kinds.length === 1 && q.kinds[0].key === b[0].kinds[0].key), N = {
+      confirm: b.length > 1 ? ["Which one is this about?", "We found more than one ID in your message. Pick the one this problem is about."] : ["Is this the right ID?", "This could be more than one kind of ID. Tell us which it is."],
+      suggest: ["Is this your ID?", "We spotted this in your message. Tell us what it is so we can find your record."],
+      ask: M ? ["One more thing", "So we can find your record — this helps us answer faster."] : ["We need one detail", "We need one of these to look this up."]
+    }[z];
+    v.hidden = !1;
+    const J = V.length > 6;
+    v.innerHTML = `
+      <div class="ask-head">
+        <span class="avatar" aria-hidden="true">${X}</span>
+        <div>
+          <strong>${m(N[0])}</strong>
+          <p class="why">${m(N[1])}</p>
+        </div>
+      </div>
+      ${b.length > 1 ? `
+      <div class="chips cands" role="group" aria-label="IDs found in your message">
+        ${b.map((q, o) => `
+          <button type="button" data-ref-cand="${o}" title="${m(q.value)}"
+            aria-pressed="${!!H && H === q}">${m(p(q.value))}</button>
+        `).join("")}
+      </div>` : ""}
+      ${V.length > 1 && !J && !K ? `
+      <div class="chips" role="group" aria-label="Which detail you are giving">
+        ${V.map((q) => `
+          <button type="button" data-ref-kind="${m(q.key)}" aria-pressed="${!!k && q.key === k.key}">${m(q.label)}</button>
+        `).join("")}
+      </div>` : ""}
+      <div class="row">
+        ${J ? `
+        <select class="ref-kind" aria-label="Which detail you are giving">
+          ${k ? "" : '<option value="" selected disabled>What is it?</option>'}
+          ${V.map((q) => `
+            <option value="${m(q.key)}" ${k && q.key === k.key ? "selected" : ""}>${m(q.label)}</option>
+          `).join("")}
+        </select>` : ""}
+        <input class="ref-value${f ? " invalid" : ""}" type="${(k == null ? void 0 : k.inputMode) === "email" ? "email" : "text"}"
+          inputmode="${m((k == null ? void 0 : k.inputMode) === "numeric" || (k == null ? void 0 : k.inputMode) === "tel" ? "numeric" : "text")}"
+          value="${m(g)}"
+          placeholder="${m(k ? k.placeholder || k.label : "Your ID")}"
+          aria-label="${m(k ? k.label : "Your ID")}" ${f ? 'aria-invalid="true"' : ""} />
+      </div>
+      ${k != null && k.hint ? `<p class="hint">${m(k.hint)}</p>` : ""}
+      ${f ? `<p class="field-err" role="alert">${G}<span>${m(f)}</span></p>` : ""}
+      ${M ? `<button type="button" class="link" data-act="ref-skip">${z === "ask" ? "I don't have this — send without it" : "Not sure — send as it is"}</button>` : ""}`, v.querySelectorAll("[data-ref-cand]").forEach((q) => {
+      q.addEventListener("click", () => {
+        S(b[Number(q.dataset.refCand)]), A();
+      });
+    }), v.querySelectorAll("[data-ref-kind]").forEach((q) => {
+      q.addEventListener("click", () => {
+        h = q.dataset.refKind, f = "", c = !1, A();
+      });
+    });
+    const j = v.querySelector(".ref-value");
+    j.addEventListener("input", () => {
+      g = j.value, f = "", c = !1;
+    }), j.addEventListener("keydown", (q) => {
+      q.key === "Enter" && (q.preventDefault(), T.click());
+    }), (F = v.querySelector(".ref-kind")) == null || F.addEventListener("change", (q) => {
+      var o;
+      h = q.target.value, f = "", A(), (o = v.querySelector(".ref-value")) == null || o.focus();
+    }), (U = v.querySelector('[data-act="ref-skip"]')) == null || U.addEventListener("click", () => {
+      Q = !0, i = !1, h = null, g = "", f = "", c = !1, A(), n("");
+    }), ((!k && g ? v.querySelector("[data-ref-kind], .ref-kind") : null) || j).focus();
+  }
+  function D(k) {
+    if (b = k.conflicts.length ? k.conflicts : k.loose.slice(0, 4), z = k.conflicts.length ? "confirm" : k.loose.length ? "suggest" : "ask", i = !0, b.length)
+      if (b.length === 1) S(b[0]);
+      else {
+        g = "";
+        const [M] = b;
+        h = b.every((V) => V.kinds.length === 1 && V.kinds[0].key === M.kinds[0].key) ? M.kinds[0].key : null;
+      }
+    else
+      h = h || s.fields[0].key;
+    A();
+  }
+  function O() {
+    if (s.policy === "off" || !s.fields.length || a().length) return !1;
+    const k = d();
+    return l(k) || Q && s.policy !== "required" ? !1 : k;
+  }
+  function B() {
+    if (i && g.trim() && !h)
+      return f = "Pick what this ID is.", A(), !0;
+    const k = O();
+    if (k)
+      return i ? A() : D(k), n(""), !0;
+    if (h && g.trim()) {
+      const M = s.fields.find((H) => H.key === h);
+      if (!c && M && !Te(M, g))
+        return f = `That does not look like a ${M.label.toLowerCase()}. Press Send again to use it anyway.`, c = !0, A(), !0;
+    }
+    return !1;
+  }
+  e.holdForReference = B, e.answeredReference = a;
+}
+const et = 3;
+function tt(e) {
+  const { client: t, cfg: n, notices: y } = e;
+  let u = [];
+  function T() {
+    const s = u.slice(0, et);
+    y.replaceChildren(...s.map((i) => ze(i, { where: "panel", onDismiss: v }))), y.hidden = s.length === 0;
+  }
+  function v(s) {
+    t.dismissAnnouncement(s), u = u.filter((i) => i !== s), T(), e.titleInput.focus();
+  }
+  n.announcements !== !1 && typeof t.announcements == "function" && t.announcements().then((s) => {
+    e.closed || (u = s, T());
+  }).catch(() => {
+  });
+}
+function at(e) {
+  const {
+    client: t,
+    cfg: n,
+    titleInput: y,
+    known: u
+  } = e;
+  let T = [], v = "", s = null, i = null;
+  function h() {
+    n.knownIssues !== !1 && t.knownIssues().then((Q) => {
+      T = Q, b();
+    }).catch(() => {
+    });
+  }
+  let g = null;
+  function f(Q) {
+    if (n.knownIssues === !1) return;
+    clearTimeout(g), i == null || i.abort();
+    const c = (Q || "").trim();
+    if (c.length < 3) {
+      h();
+      return;
+    }
+    g = setTimeout(() => {
+      i = new AbortController(), t.matchKnownIssues(c, { signal: i.signal }).then((d) => {
+        d.length && (T = d, b());
+      }).catch(() => {
+      });
+    }, 250);
+  }
+  function b() {
+    if (!T.length) {
+      u.hidden = !0, u.innerHTML = "";
+      return;
+    }
+    u.hidden = !1, u.innerHTML = `
+      <p class="known-h">Already reported</p>
+      ${T.map((Q) => `
+        <div class="issue ${Q.joined ? "is-joined" : ""}">
+          <span class="who">
+            <span class="t">${m(Q.title)}</span>
+            <span class="meta">${m(z(Q))}</span>
+          </span>
+          <button class="join" type="button" data-join="${m(Q.id)}"
+            ${Q.joined ? "disabled" : ""}>${Q.joined ? "Following" : "Me too"}</button>
+        </div>
+        ${s === Q.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="${m(Q.id)}">Follow</button>
+        </div>` : ""}
+      `).join("")}
+      ${v ? `<p class="err">${m(v)}</p>` : ""}`;
+  }
+  function z(Q) {
+    const c = Q.status === "IN_PROGRESS" ? "Being worked on now" : "Not fixed yet", d = Q.affectedCount === 0 ? "" : ` · ${Q.affectedCount} ${Q.affectedCount === 1 ? "person has" : "people have"} said this is happening to them`;
+    return `${c} · reported ${oe(Q.since)}${d}`;
+  }
+  u.addEventListener("click", async (Q) => {
+    var r, $, E, x, p;
+    const c = Q.target.closest("[data-join]"), d = Q.target.closest("[data-join-confirm]");
+    if (!c && !d) return;
+    const l = (d || c).getAttribute(d ? "data-join-confirm" : "data-join");
+    v = "";
+    const a = (($ = (r = u.querySelector(".join-email")) == null ? void 0 : r.value) == null ? void 0 : $.trim()) || ((E = t.signedInAs()) == null ? void 0 : E.email) || ((x = t.config.user) == null ? void 0 : x.email);
+    if (!a) {
+      s = l, b(), (p = u.querySelector(".join-email")) == null || p.focus();
+      return;
+    }
+    try {
+      const w = await t.meToo(l, { email: a });
+      s = null, T = T.map((S) => S.id === l ? { ...S, joined: !0, affectedCount: w.affectedCount ?? S.affectedCount } : S), b();
+    } catch (w) {
+      v = w.message.replace("[BugCatch] ", ""), b();
+    }
+  }), h(), y.addEventListener("input", () => f(y.value));
+}
+function nt(e) {
+  const {
+    client: t,
+    cfg: n,
+    titleInput: y,
+    descInput: u,
+    picks: T
+  } = e;
+  let v = [], s = null;
+  function i() {
+    if (!v.length) {
+      T.hidden = !0, T.innerHTML = "";
+      return;
+    }
+    T.hidden = !1, T.innerHTML = `
+      <p class="picks-h">Get an answer right away</p>
+      <div class="picks-grid" role="group" aria-label="Common questions">
+        ${v.map((h) => `
+          <button type="button" class="pick" data-pick="${m(h.key)}"
+            aria-pressed="${(s == null ? void 0 : s.key) === h.key}">
+            <span class="t">${m(h.title)}</span>
+            ${h.hint ? `<span class="h">${m(h.hint)}</span>` : ""}
+          </button>`).join("")}
+      </div>
+      ${s ? `<p class="picks-note">${W}<span>Our assistant will check your account and reply here. Add anything else below, then send.</span></p>` : ""}`;
+  }
+  T.addEventListener("click", (h) => {
+    const g = h.target.closest("[data-pick]");
+    if (!g) return;
+    const f = v.find((z) => z.key === g.dataset.pick);
+    if (!f) return;
+    const b = s && y.value.trim() === s.title;
+    (s == null ? void 0 : s.key) === f.key ? (s = null, b && (y.value = "")) : (s = f, (!y.value.trim() || b) && (y.value = f.title)), y.dispatchEvent(new Event("input", { bubbles: !0 })), i(), s && u.focus();
+  }), n.agentIssues !== !1 && typeof t.agentIssues == "function" && t.agentIssues().then((h) => {
+    v = h, i();
+  }).catch(() => {
+  }), e.pickedIssue = () => s;
+}
+function ot(e) {
+  const {
+    client: t,
+    scrim: n,
+    say: y,
+    callBtn: u,
+    close: T
+  } = e;
+  let v = !1;
+  function s() {
+    t.callKind().then((g) => {
+      g && (v = !0, e.preloadCall(), u.hidden = e.mustSignIn());
+    }).catch(() => {
+    });
+  }
+  s(), u.addEventListener("click", async () => {
+    e.sending = !0, y(""), e.refreshSendState(), u.disabled = !0, u.innerHTML = '<span class="spinner"></span>Ringing…';
+    try {
+      const g = await t.startCall();
+      i(g);
+    } catch (g) {
+      e.sending = !1, u.disabled = !1, u.innerHTML = `${ne}Talk to the team`, e.refreshSendState(), g.filed ? e.succeed(g.filed, { callFailed: g.reason || "The call could not be started." }) : (y(g.message.replace("[BugCatch] ", "")), e.recheckSignIn());
+    }
+  });
+  function i(g) {
+    const f = n.querySelector(".panel"), b = g != null && g.bugId ? String(g.bugId).slice(0, 8) : null;
+    f.innerHTML = `
+      <div class="call">
+        <div class="call-head">
+          <span class="call-dot" aria-hidden="true"></span>
+          <strong class="call-state">Ringing…</strong>
+        </div>
+        <p class="call-note">
+          We're ringing the team now. Someone will pick up if they're free — your report${b ? ` <code>${m(b)}</code>` : ""} is already filed either way, so nothing is lost if nobody answers.
+        </p>
+        <div class="foot">
+          <span class="spacer"></span>
+          <button class="primary" type="button" data-act="hangup">Cancel</button>
+        </div>
+      </div>`;
+    const z = f.querySelector(".call-state"), Q = f.querySelector(".call-dot"), c = {
+      ringing: "Ringing the team…",
+      connecting: "Someone answered — connecting…",
+      connected: "Connected",
+      missed: "Nobody was free",
+      ended: "Call ended",
+      failed: "The call dropped"
+    }, d = ["ended", "failed", "missed"], l = t.on("call", ({ state: a }) => {
+      if (z.textContent = c[a] || a, Q.classList.toggle("off", d.includes(a)), d.includes(a) && (f.querySelector('[data-act="hangup"]').textContent = "Close", a === "missed")) {
+        const r = f.querySelector(".call-note");
+        r && (r.textContent = "Nobody was free to pick up just now. Your report is filed and the team will reply in the chat.");
+      }
+    });
+    f.querySelector('[data-act="hangup"]').addEventListener("click", () => {
+      l(), t.endCall(), T();
+    });
+  }
+  function h(g, f, b) {
+    const z = document.createElement("div");
+    z.className = "livecall", z.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>
+      ${b != null && b.recorded ? '<span class="call-kept">This call is recorded.</span>' : ""}
+      <button class="act" type="button" data-act="mute" hidden>Mute</button>
+      <button class="act danger" type="button" data-act="hangup">Cancel</button>`, g.insertBefore(z, f);
+    const Q = z.querySelector(".who"), c = z.querySelector(".secs"), d = z.querySelector(".call-dot"), l = z.querySelector('[data-act="mute"]'), a = z.querySelector('[data-act="hangup"]');
+    let r = null;
+    const $ = () => {
+      r && (clearInterval(r), r = null);
+    }, E = (p) => {
+      $(), d.classList.add("off"), z.classList.add("over"), Q.textContent = p, c.hidden = !0, l.hidden = !0, a.textContent = "Dismiss", a.classList.remove("danger");
+    }, x = t.on("call", ({ state: p }) => {
+      if (p === "ringing" && (Q.textContent = "Calling the team…"), p === "connecting" && (Q.textContent = "Someone answered — connecting…"), p === "connected") {
+        Q.textContent = "You're on a call with the team", l.hidden = !1, c.hidden = !1;
+        const w = Date.now();
+        $(), r = setInterval(() => {
+          c.textContent = te(Math.floor((Date.now() - w) / 1e3));
+        }, 1e3), c.textContent = "0s";
+      }
+      p === "missed" && E("Nobody was free. Send a message instead and the team will pick it up."), p === "ended" && E("Call ended."), p === "failed" && E("The call dropped.");
+    });
+    l.addEventListener("click", () => {
+      const p = b.setMuted(!b.isMuted());
+      l.textContent = p ? "Unmute" : "Mute", Q.textContent = p ? "You're muted" : "You're on a call with the team";
+    }), a.addEventListener("click", () => {
+      x(), $(), t.endCall(), z.remove(), e.refreshThread(e.openReportId());
+    });
+  }
+  e.offerCall = s, e.callOffered = () => v, e.showLiveCall = h;
+}
+function rt(e) {
+  var x;
+  const {
+    client: t,
+    say: n,
+    compose: y,
+    sendBtn: u,
+    historyBtn: T,
+    callBtn: v,
+    whoami: s
+  } = e;
+  let i = { mode: t.lastLoginMode || "off", signedIn: null }, h = "idle", g = ((x = t.config.user) == null ? void 0 : x.email) || "", f = "", b = !1, z = "";
+  const Q = () => i.mode === "required" && !i.signedIn;
+  function c() {
+    const p = Q();
+    y.hidden = p, u.hidden = p, T && (T.hidden = p), p ? v.hidden = !0 : e.callOffered() && (v.hidden = !1);
+  }
+  function d() {
+    var w;
+    if (i.mode === "off") {
+      s.hidden = !0, s.innerHTML = "";
+      return;
+    }
+    s.hidden = !1, s.classList.toggle("asking", h !== "idle");
+    const p = z ? `<div class="after err">${m(z)}</div>` : "";
+    if (h === "idle") {
+      if (i.signedIn) {
+        s.innerHTML = `<span class="who">Signed in as <strong>${m(i.signedIn.email)}</strong></span><button type="button" class="link" data-act="signout">Sign out</button>`;
+        return;
+      }
+      const S = (w = t.config.user) == null ? void 0 : w.email;
+      s.innerHTML = `<span class="who">${i.mode === "required" ? "Sign in to report a bug here." : S ? `Reporting as <strong>${m(S)}</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 (h === "email") {
+      s.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${i.mode === "required" ? ", and this project asks for it" : ""}.</p>
+        <div class="row">
+          <input type="email" data-fld="email" value="${m(g)}"
+            placeholder="you@example.com" autocomplete="email" spellcheck="false"
+            aria-label="Your email address" ${b ? "disabled" : ""} />
+          <button type="button" class="primary" data-act="code" ${b ? "disabled" : ""}>
+            ${b ? "Sending…" : "Send code"}
+          </button>
+        </div>
+        ${p}
+        ${i.mode === "optional" ? '<div class="after"><button type="button" class="link" data-act="skip">Not now</button></div>' : ""}`;
+      return;
+    }
+    s.innerHTML = `
+      <p class="why">We sent a code to <strong>${m(g)}</strong>. It expires in ten minutes.</p>
+      <div class="row">
+        <input type="text" class="code" data-fld="code" value="${m(f)}"
+          placeholder="123456" inputmode="numeric" autocomplete="one-time-code"
+          maxlength="8" aria-label="The code we emailed you" ${b ? "disabled" : ""} />
+        <button type="button" class="primary" data-act="confirm" ${b ? "disabled" : ""}>
+          ${b ? "Checking…" : "Sign in"}
+        </button>
+      </div>
+      ${p}
+      <div class="after">
+        <button type="button" class="link" data-act="resend" ${b ? "disabled" : ""}>Send it again</button>
+        <button type="button" class="link" data-act="signin-back" ${b ? "disabled" : ""}>Use another address</button>
+      </div>`;
+  }
+  function l({ focus: p = !1 } = {}) {
+    var S;
+    if (d(), c(), !p || b) return;
+    const w = s.querySelector("[data-fld]");
+    w && (w.focus(), (S = w.setSelectionRange) == null || S.call(w, w.value.length, w.value.length));
+  }
+  s.addEventListener("input", (p) => {
+    const w = p.target.closest("[data-fld]");
+    w && (w.dataset.fld === "email" ? g = w.value : f = w.value);
+  }), s.addEventListener("keydown", (p) => {
+    p.key !== "Enter" || !p.target.closest("[data-fld]") || (p.preventDefault(), h === "email" ? a() : r());
+  });
+  async function a({ resent: p = !1 } = {}) {
+    const w = g.trim();
+    if (!w) {
+      z = "Enter the address to send the code to.", l({ focus: !0 });
+      return;
+    }
+    b = !0, z = "", l();
+    try {
+      await t.signIn(w), g = w, p || (f = ""), h = "code";
+    } catch (S) {
+      z = S.message;
+    } finally {
+      b = !1, l({ focus: !0 });
+    }
+  }
+  async function r() {
+    const p = f.trim();
+    if (!p) {
+      z = "Enter the code we emailed you.", l({ focus: !0 });
+      return;
+    }
+    b = !0, z = "", l();
+    try {
+      const w = await t.confirmSignIn(g.trim(), p);
+      i.signedIn = w, h = "idle", f = "", n(""), e.offerCall();
+    } catch (w) {
+      z = w.message;
+    } finally {
+      b = !1, l({ focus: h !== "idle" });
+    }
+  }
+  s.addEventListener("click", async (p) => {
+    const w = p.target.closest("button[data-act]");
+    if (!w) return;
+    const S = w.dataset.act;
+    if (S === "signin") {
+      h = "email", z = "", l({ focus: !0 });
+      return;
+    }
+    if (S === "skip") {
+      h = "idle", z = "", l();
+      return;
+    }
+    if (S === "signin-back") {
+      h = "email", z = "", f = "", l({ focus: !0 });
+      return;
+    }
+    if (S === "code") {
+      a();
+      return;
+    }
+    if (S === "resend") {
+      a({ resent: !0 });
+      return;
+    }
+    if (S === "confirm") {
+      r();
+      return;
+    }
+    if (S === "signout") {
+      b = !0, l();
+      try {
+        await t.signOut();
+      } finally {
+        i.signedIn = null, b = !1, h = i.mode === "required" ? "email" : "idle", l({ focus: h !== "idle" });
+      }
+    }
+  });
+  async function $({ announce: p = !1 } = {}) {
+    const w = await t.loginState();
+    i = { mode: w.mode, signedIn: w.signedIn }, t.lastLoginMode = w.mode, Q() && h === "idle" && (h = "email"), i.signedIn && (h = "idle"), p && w.signedOutReason && n(w.signedOutReason, "info"), l();
+  }
+  $({ announce: !0 }).catch(() => {
+  });
+  function E() {
+    i.mode !== "off" && $().catch(() => {
+    });
+  }
+  e.mustSignIn = Q, e.recheckSignIn = E;
+}
+function he(e) {
+  const t = e || [];
+  if (!t.length) return "";
+  let n = null, y = null;
+  return t.map((u) => {
+    var g, f, b, z;
+    const T = Z(u.at), v = T && T !== n ? `<div class="day-sep" role="separator">${m(Ke(u.at))}</div>` : "";
+    if (v && (n = T, y = null), !u.from)
+      return y = null, v + st(u);
+    const s = {
+      from: u.from,
+      author: (g = u.reply) == null ? void 0 : g.author,
+      automated: (f = u.reply) == null ? void 0 : f.automated,
+      body: (b = u.reply) == null ? void 0 : b.body,
+      at: u.at,
+      attachments: (z = u.reply) == null ? void 0 : z.attachments
+    }, i = it(s), h = y && y.who === i && Math.abs(new Date(u.at).getTime() - new Date(y.at).getTime()) < 5 * 6e4;
+    return y = { who: i, at: u.at }, v + ye(s, h ? "cont" : "");
+  }).join("");
+}
+function it(e) {
+  return e.from === "reporter" ? "me" : e.automated ? "assistant" : `team:${e.author || ""}`;
+}
+function st(e) {
+  const t = me(e.at);
+  return `
+    <div class="sys k-${m(e.kind)}">
+      <span class="dot" aria-hidden="true"></span>${m(e.summary || "")}${t ? `
+      <span class="t">· ${m(t)}</span>` : ""}
+    </div>`;
+}
+function ye(e, t = "") {
+  const n = e.from === "reporter", y = e.body || "", u = e.attachments || [], T = !n && !!e.automated, v = y ? `<span class="msg-text">${m(y)}</span>` : "", s = u.length ? `<div class="att">${u.map(ct).join("")}</div>` : "";
+  let i = "", h = "";
+  if (T)
+    i = '<span class="msg-who auto">Assistant <span class="tag">AI</span></span>', h = `<span class="av bot" aria-hidden="true">${X}</span>`;
+  else if (!n) {
+    const f = e.author || "Support team";
+    i = `<span class="msg-who">${m(f)}</span>`, h = `<span class="av" aria-hidden="true">${m(We(f))}</span>`;
+  }
+  t.includes("cont") && (i = "");
+  const g = T && /it goes to the same person/i.test(y) ? `<div class="quick" role="group" aria-label="Answer">
+        <button type="button" data-quick="Yes, this is the problem">${W}That's right</button>
+        <button type="button" data-quick="No, that is not the problem">That's not it</button>
+      </div>` : T && Ee.test(y) ? `<div class="quick" role="group" aria-label="Did this answer your question?">
+          <button type="button" data-quick="Yes, that answers it">${W}Yes, that answers it</button>
+          <button type="button" data-quick="No, I still need help">No, I still need help</button>
+        </div>` : "";
+  return `
+    <div class="msg-row ${n ? "mine" : "theirs"} ${T ? "auto" : ""} ${t}">
+      ${h}
+      ${i}
+      <div class="bubble ${y ? "" : "silent"}">${v}${s}</div>
+      ${g}
+      <span class="msg-when">${m(me(e.at) || oe(e.at))}</span>
+    </div>`;
+}
+function lt() {
+  return `
+    <div class="typing-row">
+      <span class="av bot" aria-hidden="true">${X}</span>
+      <span class="msg-who auto">Assistant <span class="tag">AI</span></span>
+      <div class="bubble typing" role="img" aria-label="The assistant is working on it"><i></i><i></i><i></i></div>
+    </div>`;
+}
+function ct(e) {
+  const t = m(e.name || "attachment");
+  if (!e.url) return `<span class="file"><span class="nm">${t}</span></span>`;
+  const n = m(e.url);
+  return e.type === "SCREENSHOT" ? `<a href="${n}" target="_blank" rel="noopener noreferrer"><img src="${n}" alt="${t}" loading="lazy"></a>` : e.type === "AUDIO" ? `<audio controls preload="metadata" src="${n}"></audio>` : e.type === "VIDEO" ? `<video controls preload="metadata" src="${n}"></video>` : `
+    <a class="file" href="${n}" target="_blank" rel="noopener noreferrer" download>
+      <span class="nm">${t}</span>
+      ${e.size ? `<span class="sz">${m(P(e.size))}</span>` : ""}
+    </a>`;
+}
+function dt(e, t, n, y) {
+  var E;
+  const { client: u, cfg: T } = e, v = document.createElement("div");
+  v.className = "composer", v.innerHTML = `
+    <div class="staged" hidden></div>
+    <div class="row">
+      <div class="tools">
+        ${T.attachments === !1 ? "" : `
+        <button class="tool" type="button" data-act="attach" title="Attach a file" aria-label="Attach a file">${fe}</button>
+        <button class="tool" type="button" data-act="voice" title="Record a voice note" aria-label="Record a voice note">${pe}</button>`}
+        <button class="tool" type="button" data-act="livecall" title="Call the team" aria-label="Call the team" hidden>${ne}</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>${ge}</button>
+    </div>
+    <div class="note" hidden></div>
+    <input type="file" hidden multiple accept="${Me.join(",")}">`, t.appendChild(v);
+  const s = v.querySelector(".staged"), i = v.querySelector("textarea"), h = v.querySelector('[data-act="send"]'), g = v.querySelector('[data-act="voice"]'), f = v.querySelector('[data-act="livecall"]'), b = v.querySelector("input[type=file]"), z = v.querySelector(".note"), Q = [];
+  let c = null, d = !1;
+  function l(x, p = "") {
+    z.hidden = !x, z.className = `note ${p}`, z.textContent = x || "";
+  }
+  function a() {
+    const x = Q.filter((p) => p.storageKey);
+    h.disabled = d || !i.value.trim() && !x.length, s.hidden = !Q.length, s.innerHTML = Q.map((p, w) => `
+      <span class="chip ${p.storageKey ? "" : "uploading"}">
+        <span class="nm">${m(p.name)}</span>
+        <span class="sz">${p.storageKey ? P(p.size) : "sending…"}</span>
+        <button type="button" data-drop="${w}" aria-label="Remove ${m(p.name)}">${de}</button>
+      </span>`).join("");
+    for (const p of s.querySelectorAll("[data-drop]"))
+      p.addEventListener("click", () => {
+        Q.splice(Number(p.dataset.drop), 1), a();
+      });
+  }
+  async function r(x, p, w) {
+    const S = { name: w, size: x.size, storageKey: null };
+    Q.push(S), a();
+    try {
+      const { storageKey: A, mime: D } = await u.uploadAttachment(x, p);
+      S.storageKey = A, S.mime = D;
+    } catch (A) {
+      Q.splice(Q.indexOf(S), 1), l(A.message || "That file could not be sent.", "err");
+    }
+    a();
+  }
+  i.addEventListener("input", () => {
+    i.style.height = "auto", i.style.height = `${Math.min(i.scrollHeight, 120)}px`, a();
+  }), i.addEventListener("keydown", (x) => {
+    x.key === "Enter" && !x.shiftKey && !x.isComposing && (x.preventDefault(), $());
+  }), (E = v.querySelector('[data-act="attach"]')) == null || E.addEventListener("click", () => b.click()), b.addEventListener("change", () => {
+    l("");
+    for (const x of b.files) {
+      if (x.size > u.config.maxAttachmentBytes) {
+        l(`${x.name} is larger than ${P(u.config.maxAttachmentBytes)}.`, "err");
+        continue;
+      }
+      r(x, x.type, x.name);
+    }
+    b.value = "";
+  }), g && !qe() && (g.disabled = !0, g.title = "This browser cannot record audio"), g == null || g.addEventListener("click", async () => {
+    if (c) {
+      const x = c;
+      c = null, g.classList.remove("recording"), g.innerHTML = pe, l("");
+      const { blob: p, mime: w } = await x.stop();
+      p.size && r(p, w, "Voice note");
+      return;
+    }
+    try {
+      l(""), c = await Ce({
+        maxMs: u.config.maxRecordingMs,
+        onTick: (x) => l(`Recording — ${te(x)}. Tap the mic to stop.`),
+        onAutoStop: () => g.click()
+      }), g.classList.add("recording"), g.innerHTML = Re;
+    } catch {
+      c = null, l("The microphone is not available — check the browser permission.", "err");
+    }
+  }), u.canCallTeam(y).then((x) => {
+    x && (f.hidden = !1, e.preloadCall());
+  }).catch(() => {
+  }), f.addEventListener("click", async () => {
+    f.disabled = !0, l("");
+    try {
+      const x = await u.startLiveCall(y);
+      e.showLiveCall(t, n, x);
+    } catch (x) {
+      l(x.message.replace("[BugCatch] ", ""), "err");
+    } finally {
+      f.disabled = !1;
+    }
+  }), h.addEventListener("click", $), n.addEventListener("click", (x) => {
+    var w, S;
+    const p = (S = (w = x.target).closest) == null ? void 0 : S.call(w, "[data-quick]");
+    !p || d || (i.value = p.dataset.quick, $());
+  });
+  async function $() {
+    var w;
+    const x = i.value.trim(), p = Q.filter((S) => S.storageKey);
+    if (!(d || !x && !p.length)) {
+      d = !0, a(), l(""), n.insertAdjacentHTML("beforeend", ye({
+        from: "reporter",
+        body: x,
+        at: (/* @__PURE__ */ new Date()).toISOString(),
+        attachments: p.map((S) => ({ type: "FILE", name: S.name, size: S.size }))
+      }, "pending")), _(n, { smooth: !0 });
+      try {
+        await u.replyToReport(y, {
+          body: x,
+          attachments: p.map((S) => ({
+            storageKey: S.storageKey,
+            mime: S.mime,
+            name: S.name,
+            size: S.size
+          }))
+        }), i.value = "", i.style.height = "auto", Q.length = 0, await e.refreshThread(y);
+      } catch (S) {
+        (w = n.querySelector(".msg-row.pending")) == null || w.classList.replace("pending", "failed"), l(S.message || "That could not be sent — try again.", "err");
+      } finally {
+        d = !1, a();
+      }
+    }
+  }
+  a();
+}
+const le = /* @__PURE__ */ new WeakMap();
+function pt(e) {
+  var Q;
+  const {
+    client: t,
+    scrim: n,
+    close: y
+  } = e;
+  let u = null;
+  function T(c, { callFailed: d = null } = {}) {
+    if (c != null && c.id && !d) {
+      i(c.id, { fresh: !0 }).then((l) => {
+        l || v(c, { callFailed: d });
+      });
+      return;
+    }
+    v(c, { callFailed: d });
+  }
+  function v(c, { callFailed: d = null } = {}) {
+    var $;
+    const l = c != null && c.id ? String(c.id).slice(0, 8) : null, a = ($ = c == null ? void 0 : c.estimate) != null && $.label ? String(c.estimate.label) : null, r = d ? `<p class="eta">${m(d)} Your report is filed, and the team will reply in the chat.</p>` : "";
+    n.querySelector(".panel").innerHTML = `
+      <div class="done">
+        <div class="tick">${W}</div>
+        <h3>Thanks — that's on its way.</h3>
+        <p>${l ? `Filed as <code>${m(l)}</code>.` : "The team has what they need to reproduce it."}</p>
+        ${r}
+        ${a ? `<p class="eta">Reports like this usually take <strong>${m(a)}</strong>. We'll let you know when it moves.</p>` : ""}
+      </div>`, setTimeout(y, r ? 6e3 : a ? 4e3 : 2e3);
+  }
+  async function s() {
+    const c = n.querySelector(".panel");
+    clearTimeout(h), u = null, c.classList.remove("is-chat"), c.innerHTML = `
+      ${ce({ title: "Your reports", sub: "Everything you've reported, and where each one got to." })}
+      <div class="history" aria-busy="true">${Ye(3)}</div>`, c.querySelector('[data-act="close"]').addEventListener("click", y);
+    let d = [];
+    try {
+      ({ reports: d } = await t.myReports());
+    } catch {
+      const a = c.querySelector(".history");
+      a && (a.innerHTML = ie("Couldn't load your reports just now.", G));
+      return;
+    }
+    const l = c.querySelector(".history");
+    if (l) {
+      l.removeAttribute("aria-busy"), l.innerHTML = d.length ? d.map((a, r) => `
+        <button class="row" type="button" data-report="${m(a.id)}" style="animation-delay:${Math.min(r, 8) * 30}ms">
+          <span class="row-ico" aria-hidden="true">${He}</span>
+          <span class="who">
+            <span class="ttl">${m(a.title)}</span>
+            <span class="sub">${m(a.reference)} · ${m(oe(a.createdAt))}</span>
+          </span>
+          <span class="pill ${m(String(a.status).toLowerCase())}">${m(se(a.status))}</span>
+          <span class="chev" aria-hidden="true">${je}</span>
+        </button>`).join("") : ie("You haven't reported anything yet.", Oe);
+      for (const a of l.querySelectorAll("[data-report]"))
+        a.addEventListener("click", () => i(a.dataset.report));
+    }
+  }
+  async function i(c, { fresh: d = !1 } = {}) {
+    var x;
+    const l = n.querySelector(".panel");
+    clearTimeout(h), l.classList.add("is-chat"), l.innerHTML = `
+      ${ce({
+      back: !0,
+      title: d ? "Looking into it" : "Your report",
+      sub: d ? "Our assistant is on it — it may ask you a question here." : "Everything that has happened, and a way to answer."
+    })}
+      <div class="history chatting" aria-busy="true"><div class="thread">${Pe()}</div></div>`, l.querySelector('[data-act="close"]').addEventListener("click", y), l.querySelector('[data-act="back"]').addEventListener("click", s);
+    let a = null;
+    try {
+      a = await t.myReport(c);
+    } catch {
+      a = null;
+    }
+    const r = l.querySelector(".history");
+    if (!r || !l.querySelector('[data-act="back"]')) return !1;
+    if (!a)
+      return d ? (l.classList.remove("is-chat"), !1) : (r.removeAttribute("aria-busy"), r.innerHTML = ie("Couldn't load that report just now.", G), !1);
+    u = c, t.markReportRead(c);
+    const $ = he(a.timeline);
+    r.classList.add("chatting"), r.removeAttribute("aria-busy"), r.innerHTML = `
+      <div class="report-head">
+        <span class="ttl">${m(a.title)}</span>
+        <span class="sub">${m(a.reference)} · ${m(a.project || "")}</span>
+        <span class="pill ${m(String(a.status).toLowerCase())}">${m(se(a.status))}</span>
+        ${(x = a.estimate) != null && x.label ? `<span class="eta-line">Usually takes ${m(String(a.estimate.label))}</span>` : ""}
+      </div>
+      <div class="thread" role="log" aria-live="polite" aria-label="Conversation">${$}</div>`;
+    const E = r.querySelector(".thread");
+    return le.set(E, $), _(E), f(r, a), a.canReply && dt(e, r, E, c), g(r, a, c), _(E), !0;
+  }
+  let h = null;
+  function g(c, d, l) {
+    var O, B, k;
+    clearTimeout(h);
+    const a = d.assistant, r = c.querySelector(".thread");
+    let $ = c.querySelector(".assistant");
+    if (!a) {
+      $ == null || $.remove(), (O = r == null ? void 0 : r.querySelector(".typing-row")) == null || O.remove();
+      return;
+    }
+    const E = ($ == null ? void 0 : $.dataset.phase) || null;
+    $ || ($ = document.createElement("div"), $.setAttribute("role", "status"), $.setAttribute("aria-live", "polite"), (B = c.querySelector(".report-head")) == null || B.after($)), $.className = `assistant ${m(a.phase)}`, $.dataset.phase = a.phase;
+    const x = a.steps || [], p = x.filter((M) => M.state === "done").length, w = x.some((M) => M.state === "active") ? 0.5 : 0, S = x.length ? Math.round((p + w) / x.length * 100) : 0, A = `
+      <div class="as-body${E && E !== a.phase ? " entering" : ""}">
+        <div class="as-top">
+          <span class="as-orb" aria-hidden="true">${a.phase === "analyzing" ? '<span class="as-spin"></span>' : a.phase === "calling" ? ne : a.phase === "resolved" ? W : X}</span>
+          <div class="as-text">
+            <div class="as-title">${m(a.title)}</div>
+            <div class="as-detail">${m(a.detail)}</div>
+          </div>
+        </div>
+      </div>
+      ${x.length ? `
+      <div class="as-progress" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${S}"><i style="width:${S}%"></i></div>
+      <ol class="as-steps">${x.map((M) => `<li class="${m(M.state)}"${M.state === "active" ? ' aria-current="step"' : ""}><span class="dot"></span><span class="lbl">${m(M.label)}</span></li>`).join("")}</ol>` : ""}`, D = JSON.stringify([a.phase, a.title, a.detail, x]);
+    if ($.dataset.key !== D) {
+      const M = $.querySelector(".as-progress i"), H = M == null ? void 0 : M.style.width;
+      $.innerHTML = A, $.dataset.key = D;
+      const V = $.querySelector(".as-progress i");
+      V && H && (V.style.width = H, requestAnimationFrame(() => {
+        V.style.width = `${S}%`;
+      }));
+    }
+    if (r) {
+      const M = ue(r), H = r.querySelector(".typing-row");
+      a.phase !== "analyzing" ? H == null || H.remove() : (!H || H !== r.lastElementChild) && (H == null || H.remove(), r.insertAdjacentHTML("beforeend", lt()), M && _(r));
+    }
+    a.phase === "analyzing" ? h = setTimeout(() => b(l), 3e3) : a.phase === "calling" ? h = setTimeout(() => b(l), 1e4) : a.phase === "needs_info" && E !== "needs_info" && ((k = c.querySelector(".composer textarea")) == null || k.focus());
+  }
+  function f(c, d) {
+    var a, r;
+    if ((a = c.querySelector(".fix-verification")) == null || a.remove(), !d.resolvedAt || !["RESOLVED", "CLOSED"].includes(d.status)) return;
+    const l = document.createElement("div");
+    l.className = "fix-verification", d.verification ? l.textContent = d.verification === "CONFIRMED" ? "You confirmed that this fix works." : "Your feedback was recorded." : (l.innerHTML = '<p>Does the fix work for you?</p><textarea maxlength="4000" aria-label="Fix feedback" placeholder="What happens when you try again? (optional)"></textarea><button type="button" data-result="CONFIRMED">It works now</button> <button type="button" data-result="STILL_HAPPENING">Still happening</button><p class="feedback-status" role="status"></p>', l.querySelectorAll("[data-result]").forEach(($) => {
+      $.onclick = async () => {
+        l.querySelectorAll("button").forEach((E) => {
+          E.disabled = !0;
+        });
+        try {
+          await t.verifyFix(d.id, { result: $.dataset.result, resolvedAt: d.resolvedAt, note: l.querySelector("textarea").value }), await i(d.id);
+        } catch (E) {
+          l.querySelector(".feedback-status").textContent = E.message, l.querySelectorAll("button").forEach((x) => {
+            x.disabled = !1;
+          });
+        }
+      };
+    })), (r = c.querySelector(".report-head")) == null || r.after(l);
+  }
+  async function b(c) {
+    const d = n.querySelector(".history.chatting"), l = d == null ? void 0 : d.querySelector(".thread");
+    if (!l || u !== c) return;
+    let a = null;
+    try {
+      a = await t.myReport(c);
+    } catch {
+    }
+    if (e.closed || !a || u !== c) return;
+    f(d, a);
+    const r = ue(l), $ = he(a.timeline);
+    le.get(l) !== $ && (l.innerHTML = $, le.set(l, $)), g(d, a, c), r && _(l);
+    const E = d.querySelector(".report-head .pill");
+    E && (E.className = `pill ${String(a.status).toLowerCase()}`, E.textContent = se(a.status));
+  }
+  const z = t.on("update", (c) => {
+    !u || (c == null ? void 0 : c.bugId) !== u || (t.markReportRead(u), b(u));
+  });
+  e.onDestroy(() => {
+    z(), clearTimeout(h);
+  }), (Q = n.querySelector('[data-act="history"]')) == null || Q.addEventListener("click", s), e.succeed = T, e.refreshThread = b, e.openReportId = () => u;
+}
+function bt({
+  root: e,
+  host: t,
+  dock: n,
+  client: y,
+  onClose: u,
+  preloadCall: T = () => {
+  }
+}) {
+  ut(e);
+  const v = y.config, s = document.createElement("div");
+  s.className = `scrim ${n.classList.contains("at-left") ? "at-left" : "at-right"} ${n.classList.contains("at-top") ? "at-top" : "at-bottom"}`, s.style.setProperty("--bc-dock-h", `${Math.round(n.getBoundingClientRect().height)}px`), s.innerHTML = `
+    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
+      ${ce({
+    id: "bc-h",
+    title: "Tell us what went wrong",
+    sub: "Our assistant starts looking right away. We attach the page details for you."
+  })}
+      <div class="body">
+        <div class="slot" role="alert"></div>
+        <!-- What the project's team is telling visitors. Drawn only when it
+             has published something. -->
+        <div class="notices" hidden></div>
+        <div class="whoami" hidden></div>
+        <!-- The questions the assistant can answer from their account and
+             close by itself. Drawn only when the project offers any. -->
+        <div class="picks" hidden></div>
+        <div class="known" hidden></div>
+        ${Ge(v)}
+      </div>
+      <div class="foot">
+        <span class="note" aria-live="polite"></span>
+        ${y.hasReports() ? '<button class="quiet" type="button" data-act="history">Your reports</button>' : ""}
+        <span class="spacer"></span>
+        <!-- Hidden until the API confirms this project can take a call, which
+             most cannot. Drawn here rather than as a second launcher because it
+             is the same errand as Send report — the difference is only whether
+             the reporter would rather say it than type it. -->
+        <button class="ghost" type="button" data-act="call" hidden>${ne}Talk to the team</button>
+        <button class="primary" type="button" data-act="send">Send report ${ge}</button>
+      </div>
+      <div class="powered">Powered by
+        <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${Be}</a>
+      </div>
+    </div>`;
+  const i = (r) => s.querySelector(r), h = i(".slot"), g = [], f = {
+    client: y,
+    cfg: v,
+    root: e,
+    host: t,
+    dock: n,
+    scrim: s,
+    $: i,
+    titleInput: i("#bc-title"),
+    descInput: i("#bc-desc"),
+    compose: i(".compose"),
+    sendBtn: i('[data-act="send"]'),
+    callBtn: i('[data-act="call"]'),
+    historyBtn: i('[data-act="history"]'),
+    note: i(".foot .note"),
+    whoami: i(".whoami"),
+    refsBox: i(".refs"),
+    notices: i(".notices"),
+    known: i(".known"),
+    picks: i(".picks"),
+    // A report or a call is on its way. Escape and a click outside wait for it.
+    sending: !1,
+    closed: !1,
+    say: a,
+    close: d,
+    preloadCall: T,
+    onDestroy: (r) => {
+      g.push(r);
+    },
+    // compose.js
+    refreshSendState: null,
+    isRecording: null,
+    stopRecording: null,
+    // refs.js
+    holdForReference: null,
+    answeredReference: null,
+    // picks.js
+    pickedIssue: null,
+    // call.js
+    offerCall: null,
+    callOffered: null,
+    showLiveCall: null,
+    // signin.js
+    mustSignIn: null,
+    recheckSignIn: null,
+    // thread.js
+    succeed: null,
+    refreshThread: null,
+    openReportId: null
+  };
+  Xe(f), Je(f), tt(f), at(f), nt(f), ot(f), rt(f), pt(f);
+  const b = document.activeElement, z = document.documentElement.style, Q = z.overflow;
+  z.overflow = "hidden";
+  function c() {
+    f.closed || (g.forEach((r) => r()), f.closed = !0, z.overflow = Q, document.removeEventListener("keydown", l, !0), s.remove(), n.hidden = !1, t.style.opacity = "", u == null || u());
+  }
+  function d() {
+    var r;
+    if (!f.closed) {
+      s.classList.add("closing"), setTimeout(c, 160);
+      try {
+        (r = b == null ? void 0 : b.focus) == null || r.call(b);
+      } catch {
+      }
+    }
+  }
+  function l(r) {
+    if (r.key === "Escape") {
+      if (r.stopPropagation(), f.isRecording()) {
+        f.stopRecording({ keep: !1 });
+        return;
+      }
+      f.sending || d();
+      return;
+    }
+    if (r.key !== "Tab" || f.isRecording()) return;
+    const $ = [...s.querySelectorAll(
+      "button:not(:disabled), input:not([hidden]), textarea, select, [href]"
+    )].filter((w) => w.offsetParent !== null || w === document.activeElement);
+    if (!$.length) return;
+    const E = $[0], x = $[$.length - 1], p = s.getRootNode().activeElement;
+    r.shiftKey && p === E ? (r.preventDefault(), x.focus()) : !r.shiftKey && p === x && (r.preventDefault(), E.focus());
+  }
+  document.addEventListener("keydown", l, !0), s.addEventListener("click", (r) => {
+    r.target === s && !f.sending && d();
+  }), i('[data-act="close"]').addEventListener("click", d);
+  function a(r, $ = "err") {
+    h.innerHTML = r ? `<div class="msg ${$}">${$ === "err" ? G : ""}<span>${m(r)}</span></div>` : "";
+  }
+  return e.appendChild(s), f.refreshSendState(), f.titleInput.focus(), { destroy: c, close: d };
+}
+function ut(e) {
+  if (e.querySelector("style[data-panel]")) return;
+  const t = document.createElement("style");
+  t.setAttribute("data-panel", ""), t.textContent = Ne;
+  const n = e.querySelector("style");
+  n ? n.after(t) : e.prepend(t);
+}
+export {
+  bt as openPanel
+};
+//# sourceMappingURL=bugcatch-panel.es.js.map