@sphoro/bugcatch-web-sdk 0.17.0 → 0.19.0

package/dist/bugcatch-panel.es.js

@@ -0,0 +1,2531 @@
+import { s as ke, m as $e, a as Se, c as ce, b as Le, d as Qe, R as be, h as P, n as Te, e as Ee, f as qe, g as ee, i as G, j as F, r as ze, v as Me, k as Ce, S as He, U as Ae, l as Ie, o as Re, p as De } from "./bugcatch-core.es.js";
+const Ve = '<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>', je = '<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>', de = '<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>', Oe = '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>', Ne = '<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>', ae = '<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>', Be = '<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>', We = '<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>', me = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.9l2.75 5.82 6.37.76-4.7 4.37 1.24 6.3L12 17.03l-5.66 3.12 1.24-6.3-4.7-4.37 6.37-.76z"/></svg>', Ye = '<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>', Pe = '<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>', Fe = `
+@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 ---------- */
+/* Still modal — focus stays in the panel and a click outside closes it — but
+   the host's page only dims enough to say so. It is their product, and the
+   visitor is reporting something about what is on it. */
+.scrim {
+  position: fixed; inset: 0; z-index: 2147483001;
+  background: rgba(14,14,16,.14);
+  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: 400px;
+  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);
+  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: 11px;
+  padding: 14px 10px 13px var(--bc-pad);
+  background: var(--bc-bg);
+  border-bottom: 1px solid var(--bc-border);
+}
+.head .mark { width: 32px; }
+/* The assistant asking its one follow-up wears the same orb, smaller. */
+.avatar.orb { width: 26px; }
+.head .titles { flex: 1; min-width: 0; }
+.head h2 {
+  margin: 0 0 1px; font-size: var(--bc-fs-lg); font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.head p {
+  margin: 0; font-size: var(--bc-fs-sm); line-height: 1.4; color: var(--bc-muted);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.icon-btn {
+  flex: none; display: grid; place-items: center;
+  width: 32px; height: 32px; padding: 0; font-size: 16px;
+  border: none; border-radius: 999px; 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; }
+/* The theme button holds all three glyphs; the host's class picks one. */
+.icon-btn.theme { font-size: 15px; margin-right: -4px; }
+.icon-btn.theme > span { display: none; }
+:host(.bc-light) .icon-btn.theme .m-light,
+:host(.bc-dark) .icon-btn.theme .m-dark,
+:host(.bc-auto) .icon-btn.theme .m-auto { display: block; }
+
+.body {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  padding: 14px var(--bc-pad) 4px;
+}
+
+label { display: block; font-size: 13px; font-weight: 560; color: var(--bc-fg); margin-bottom: 6px; letter-spacing: -.005em; }
+label .opt { font-weight: 450; color: var(--bc-faint); }
+/* Fields are stone wells that turn white when you are in them, the way the
+   rest of the product's forms do. */
+input[type=text], input[type=email], textarea {
+  width: 100%; padding: 10px 12px; font-size: var(--bc-fs-md); line-height: 1.45;
+  color: var(--bc-fg); background: var(--bc-stone);
+  border: 1px solid transparent; 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: var(--bc-border); }
+input[type=text]:focus, input[type=email]:focus, textarea:focus {
+  outline: none; background: var(--bc-bg); 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: 76px; resize: vertical; }
+.field { margin-bottom: 14px; }
+.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-subtle); border: 1px solid var(--bc-border);
+  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: 600;
+  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: var(--bc-bg); color: var(--bc-fg); 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. */
+/* One small eyebrow style for every group above the form. */
+.known .known-h, .picks .picks-h {
+  margin: 0 0 7px; font-size: 11px; font-weight: 600; letter-spacing: .07em;
+  text-transform: uppercase; color: var(--bc-faint);
+}
+.known { margin-bottom: 14px; }
+/* Hairline rows on the panel's own white, so they read as a list to scan
+   rather than more coloured cards to wade through. */
+.known .issue {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 8px 8px 12px; margin-bottom: 6px;
+  background: var(--bc-bg); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  animation: bc-rise 240ms var(--bc-ease) both;
+}
+.known .issue.is-joined { background: color-mix(in srgb, var(--bc-ok) 6%, var(--bc-bg)); }
+.known .issue .who { flex: 1; min-width: 0; }
+.known .issue .t {
+  display: block; font-size: 13px; font-weight: 560; line-height: 1.4;
+  color: var(--bc-fg); overflow-wrap: anywhere;
+}
+.known .issue .meta {
+  display: block; margin-top: 2px; font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
+}
+.known .issue .join {
+  flex: none; height: 30px; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 560;
+  color: var(--bc-fg); background: var(--bc-stone);
+  border: 0; border-radius: 999px; cursor: pointer;
+  transition: background 160ms, color 160ms;
+}
+.known .issue .join:hover { background: color-mix(in srgb, var(--bc-fg) 12%, var(--bc-stone)); }
+.known .issue .join:disabled { color: var(--bc-ok); background: transparent; 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: 14px; }
+.picks .picks-grid { display: flex; flex-wrap: wrap; gap: 6px; }
+.picks .pick {
+  display: inline-flex; align-items: center; max-width: 100%;
+  min-height: 32px; padding: 6px 13px; text-align: left; cursor: pointer; font: inherit;
+  color: var(--bc-fg); background: var(--bc-stone);
+  border: 1px solid transparent; border-radius: 999px;
+  transition: background 160ms, border-color 160ms, color 160ms, transform 160ms var(--bc-ease);
+  animation: bc-rise 240ms var(--bc-ease) both;
+}
+.picks .pick:hover { background: color-mix(in srgb, var(--bc-fg) 10%, var(--bc-stone)); }
+.picks .pick:active { transform: scale(.97); }
+.picks .pick[aria-pressed="true"] { background: var(--bc-accent); color: var(--bc-on-accent); }
+.picks .pick .t { font-size: 13px; font-weight: 520; line-height: 1.35; overflow-wrap: anywhere; }
+.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: 14px; padding: 9px 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.asking .row input { background: var(--bc-bg); border-color: var(--bc-border); }
+.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: 560; line-height: 1.45;
+  color: var(--bc-fg); background: none; border: none; cursor: pointer; border-radius: 4px;
+  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bc-fg) 30%, transparent);
+  text-underline-offset: 3px;
+}
+.link:hover { text-decoration-color: currentColor; }
+.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: 14px; padding: 14px;
+  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-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 strong { display: block; font-size: 13.5px; font-weight: 600; 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); border-color: var(--bc-border); }
+.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 ----------
+   The segmented control from the product: a stone track, the choice lifted out
+   of it on white. */
+.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; background: var(--bc-stone); border-radius: 999px; }
+.seg button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 30px; padding: 0 4px; font: inherit; font-size: var(--bc-fs-sm); font-weight: 520; line-height: 1;
+  color: var(--bc-muted); background: none; border: none; border-radius: 999px;
+  cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms;
+}
+.seg button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sev, var(--bc-faint)); opacity: .5; transition: opacity 180ms; }
+.seg button[data-prio="LOW"] { --sev: var(--bc-ok); }
+.seg button[data-prio="MEDIUM"] { --sev: var(--bc-info); }
+.seg button[data-prio="HIGH"] { --sev: var(--bc-warn); }
+.seg button[data-prio="CRITICAL"] { --sev: var(--bc-danger); }
+.seg button:hover { color: var(--bc-fg); }
+.seg button[aria-pressed=true] {
+  background: var(--bc-raised); color: var(--bc-fg); font-weight: 600;
+  box-shadow: 0 1px 2px rgba(20,18,14,.10), 0 0 0 .5px rgba(20,18,14,.08);
+}
+.seg button[aria-pressed=true]::before { opacity: 1; }
+.seg button:focus-visible { outline-offset: -2px; }
+
+/* ---------- attachments ----------
+   Three ring pills in a row: optional, so they take one line, not a band of
+   dashed drop zones. */
+.tools { display: flex; flex-wrap: wrap; gap: 6px; }
+.tool {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 32px; padding: 0 11px 0 9px; font: inherit; font-size: 12.5px; font-weight: 520; line-height: 1; white-space: nowrap;
+  color: var(--bc-fg); background: var(--bc-bg);
+  border: 1px solid var(--bc-border); border-radius: 999px; cursor: pointer;
+  transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--bc-ease);
+}
+.tool svg { font-size: 15px; color: var(--bc-muted); transition: color 160ms; }
+.tool:hover:not(:disabled) { background: var(--bc-subtle); border-color: color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); }
+.tool:hover:not(:disabled) svg { color: var(--bc-fg); }
+.tool:active:not(:disabled) { transform: scale(.97); }
+.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 14px 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: 0 var(--bc-pad) 10px; font-size: 10.5px; color: var(--bc-faint);
+  background: var(--bc-bg);
+}
+.brand-credit { display: flex; align-items: center; transition: color 0.15s; border-radius: 4px; }
+.bc-brand { height: 15px; width: auto; display: block; color: var(--bc-brand-ink); }
+.brand-credit:hover .bc-brand { color: var(--bc-fg); }
+/* The product's two pills: ink for the one thing to do, a white ring for the
+   alternative. Flat — no glow, no lift. */
+button.ghost, button.primary {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  height: 38px; padding: 0 15px; font: inherit; font-size: 13.5px; font-weight: 560; 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: 0; color: var(--bc-fg); box-shadow: 0 0 0 1px var(--bc-border), 0 1px 2px rgba(20,18,14,.05); }
+button.ghost:hover:not(:disabled) { background: var(--bc-subtle); }
+button.ghost svg, button.primary svg { font-size: 15px; }
+button.primary {
+  padding: 0 18px;
+  background: var(--bc-accent); border: 0; color: var(--bc-on-accent);
+  box-shadow: 0 1px 2px rgba(0,0,0,.14);
+}
+button.primary:hover:not(:disabled) { filter: brightness(1.12) contrast(.96); }
+button.primary:active:not(:disabled) { transform: scale(.98); }
+button:disabled { opacity: .45; cursor: not-allowed; }
+button.primary:disabled { box-shadow: none; }
+button.primary .spinner { border-color: color-mix(in srgb, var(--bc-on-accent) 40%, transparent); border-top-color: var(--bc-on-accent); width: 14px; height: 14px; }
+button.quiet {
+  padding: 0 4px; height: 38px; font: inherit; font-size: 13px; font-weight: 520;
+  border: none; background: none; color: var(--bc-muted); cursor: pointer; border-radius: 8px;
+  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
+}
+button.quiet:hover { color: var(--bc-fg); text-decoration-color: color-mix(in srgb, var(--bc-fg) 35%, transparent); }
+
+/* ---------- 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: 560; 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-stone); 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-stone); color: var(--bc-fg); 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-fg); }
+.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: 13.5px; font-weight: 600; 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: var(--bc-info); }
+.sys.k-severity .dot { background: var(--bc-warn); }
+.sys.k-assignment .dot { background: var(--bc-brand-mark); }
+.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: 650; letter-spacing: .02em;
+  background: var(--bc-stone); color: var(--bc-fg);
+}
+.av.bot { width: 28px; }
+.msg-who { font-size: var(--bc-fs-xs); font-weight: 560; color: var(--bc-muted); padding: 0 4px 4px; }
+.msg-who.auto { color: var(--bc-fg); display: inline-flex; align-items: center; gap: 5px; }
+.msg-who .tag {
+  padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 650; letter-spacing: .05em;
+  text-transform: uppercase; background: var(--bc-stone); color: var(--bc-muted);
+}
+.bubble {
+  justify-self: start; max-width: 100%;
+  padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.5;
+  background: var(--bc-stone); color: var(--bc-fg);
+  border: 1px solid transparent;
+  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: drawn on white with a hairline, beside the orb and
+   labelled "Assistant" above it, so it reads the same to someone who cannot
+   see the difference at all. */
+.msg-row.auto .bubble { background: var(--bc-bg); border-color: var(--bc-border); }
+/* 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: 6px; height: 6px; border-radius: 50%; background: var(--bc-muted); 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.resolved { background: color-mix(in srgb, var(--bc-ok) 7%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 30%, 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 breathing orb, 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; }
+/* The orb, while the assistant is at work; a plain disc with a glyph once it
+   is on a call or has finished. */
+.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: var(--bc-accent);
+}
+.as-orb.orb { background: var(--bc-o2); }
+.assistant.analyzing .as-orb.orb { animation: as-breathe 2.4s ease-in-out infinite; }
+@keyframes as-breathe { 50% { transform: scale(.88); } }
+.assistant.resolved .as-orb { background: var(--bc-ok); color: #fff; }
+.assistant.reviewing .as-orb.orb { filter: saturate(.35); }
+.as-text { min-width: 0; flex: 1; }
+.as-title { font-weight: 600; 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: 3px; 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) 35%, var(--bc-bg)) 50%, var(--bc-accent) 100%);
+  background-size: 200% 100%; animation: bc-shimmer 1.6s linear infinite;
+}
+/* Four short labels under the bar. Allowed to wrap rather than be cut: at this
+   width "Report received" ellipsised to "Report recei…". */
+.as-steps {
+  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 6px;
+  margin: 8px 0 0; padding: 0; font-size: 10.5px; line-height: 1.3; color: var(--bc-faint);
+}
+.as-steps li { display: flex; align-items: flex-start; gap: 5px; min-width: 0; }
+.as-steps li .lbl { min-width: 0; overflow-wrap: anywhere; }
+.as-steps li .dot { flex: none; width: 7px; height: 7px; margin-top: 3px; 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: 600; }
+.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) 18%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .as-orb, .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: 560; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
+  border: 0; background: var(--bc-bg); color: var(--bc-fg); box-shadow: 0 0 0 1px var(--bc-border);
+  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); box-shadow: none; }
+.quick button:nth-child(2) { animation-delay: 60ms; }
+.quick button svg { font-size: 13px; }
+.quick button:hover { background: var(--bc-subtle); }
+.quick button:first-child:hover { background: var(--bc-accent); filter: brightness(1.12) contrast(.96); }
+.quick button:active { transform: scale(.97); }
+
+/* ---------- 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-stone); border: 1px solid transparent;
+  transition: border-color 160ms, box-shadow 160ms, background 160ms;
+}
+.composer .row:focus-within { background: var(--bc-bg); 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.12) contrast(.96); transform: scale(1.04); }
+.composer .send:disabled { opacity: .3; 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: 600;
+  padding: 3px 9px; border-radius: 999px;
+  color: var(--bc-muted); background: var(--bc-stone);
+}
+.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+/* The theme's own status colours, which already have a dark cut. */
+.pill.open { color: var(--bc-warn); background: color-mix(in srgb, var(--bc-warn) 12%, var(--bc-bg)); }
+.pill.in_progress { color: var(--bc-info); background: color-mix(in srgb, var(--bc-info) 12%, var(--bc-bg)); }
+.pill.resolved { color: var(--bc-ok); background: color-mix(in srgb, var(--bc-ok) 12%, var(--bc-bg)); }
+.pill.closed { color: var(--bc-muted); }
+
+/* ---------- 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; }
+
+/* ---------- how did we do ----------
+   Quieter than the card above it: that one asks whether the fix works, which
+   the team acts on; this asks how it felt, which they learn from. The stars
+   carry the only colour, so the one thing to do here is the thing you see. */
+.fix-rating {
+  --bc-star: #f0a81c;
+  flex: none; margin: 10px 12px 0; padding: 12px 14px;
+  border-radius: var(--bc-r-lg); border: 1px solid var(--bc-border); background: var(--bc-bg);
+  font-size: var(--bc-fs-sm); color: var(--bc-fg);
+  animation: bc-rise 280ms var(--bc-ease) both;
+}
+.fix-rating .fr-q { margin: 0 0 6px; font-weight: 620; }
+.fix-rating .stars { display: flex; gap: 2px; margin: 0 0 2px -4px; }
+.fix-rating .stars button {
+  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
+  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
+  color: color-mix(in srgb, var(--bc-fg) 18%, transparent);
+  transition: color 120ms ease, transform 120ms var(--bc-ease);
+}
+.fix-rating .stars button svg { width: 24px; height: 24px; }
+.fix-rating .stars button.on { color: var(--bc-star); }
+.fix-rating .stars button:hover:not(:disabled) { transform: scale(1.08); }
+.fix-rating .stars button:focus-visible { outline: none; box-shadow: var(--bc-ring); }
+.fix-rating .stars button:disabled { cursor: default; }
+.fix-rating .fr-hint { margin: 2px 0 0; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+.fix-rating .fr-said { margin: 6px 0 0; font-size: 13px; color: var(--bc-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
+.fix-rating .fr-note { margin-top: 8px; }
+.fix-rating .fr-note textarea { min-height: 52px; margin-bottom: 8px; font-size: 13px; }
+.fix-rating .fr-note 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-rating .feedback-status { margin: 6px 0 0; color: var(--bc-danger); font-size: var(--bc-fs-xs); }
+.fix-rating .feedback-status:empty { display: none; }
+@media (prefers-reduced-motion: reduce) { .fix-rating .stars button { transition: none; } .fix-rating .stars button:hover { transform: none; } }
+
+/* The rating on a history row: the score given, or a nudge to give one. */
+.history .sub .rated { display: inline-flex; align-items: center; gap: 2px; color: var(--bc-muted); font-weight: 600; }
+.history .sub .rated svg { width: 11px; height: 11px; color: #f0a81c; }
+.history .sub .rate-ask { color: var(--bc-fg); font-weight: 600; }
+
+/* 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: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
+  display: grid; place-items: center; font-size: 24px;
+  background: var(--bc-ok); color: #fff;
+  box-shadow: 0 0 0 7px color-mix(in srgb, var(--bc-ok) 12%, transparent);
+  animation: bc-pop 420ms var(--bc-ease) both;
+}
+.done h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
+.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(14,14,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%; }
+  /* The question chips are one row that scrolls sideways, edge to edge, rather
+     than three stacked rows pushing the form down the screen. */
+  .picks .picks-grid {
+    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
+    margin: 0 calc(var(--bc-pad) * -1); padding: 0 var(--bc-pad) 2px;
+    scroll-snap-type: x proximity; scroll-padding: 0 var(--bc-pad);
+  }
+  .picks .picks-grid::-webkit-scrollbar { display: none; }
+  .picks .pick { flex: none; scroll-snap-align: start; }
+  .picks .pick .t { white-space: nowrap; }
+}
+
+@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, .known .issue .join { min-height: 44px; }
+  .picks .pick { min-height: 40px; }
+  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
+     button in the header is one of these. */
+  .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 le({ title: e, sub: t, id: i = "", back: w = !1, theme: b = "" }) {
+  return `
+    <div class="head">
+      ${w ? `<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${Ne}</button>` : ""}
+      <span class="orb mark" aria-hidden="true"></span>
+      <div class="titles">
+        <h2${i ? ` id="${i}"` : ""}>${v(e)}</h2>
+        <p>${v(t)}</p>
+      </div>
+      ${b ? `<button class="icon-btn theme" type="button" data-act="theme" title="Theme: ${v(b)}"
+        aria-label="Theme: ${v(b)}. Change theme"><span class="m-light">${ke}</span><span class="m-dark">${$e}</span><span class="m-auto">${Se}</span></button>` : ""}
+      <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ce}</button>
+    </div>`;
+}
+function re(e, t) {
+  return `<div class="empty"><span class="empty-ico" aria-hidden="true">${t}</span>${v(e)}</div>`;
+}
+function Ke(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 Ue() {
+  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 Ze(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 _e(e) {
+  const t = new Date(e), i = /* @__PURE__ */ new Date(), w = new Date(i.getFullYear(), i.getMonth(), i.getDate() - 1);
+  if (Z(t) === Z(i)) return "Today";
+  if (Z(t) === Z(w)) return "Yesterday";
+  try {
+    return t.toLocaleDateString(void 0, {
+      weekday: "short",
+      day: "numeric",
+      month: "short",
+      ...t.getFullYear() !== i.getFullYear() ? { year: "numeric" } : {}
+    });
+  } catch {
+    return ne(e);
+  }
+}
+function ve(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 pe(e) {
+  return e.scrollHeight - e.scrollTop - e.clientHeight < 40;
+}
+function _(e, { smooth: t = !1 } = {}) {
+  const i = typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  t && !i && e.scrollTo ? e.scrollTo({ top: e.scrollHeight, behavior: "smooth" }) : e.scrollTop = e.scrollHeight;
+}
+function ie(e) {
+  return {
+    OPEN: "Open",
+    IN_PROGRESS: "In progress",
+    RESOLVED: "Fixed",
+    CLOSED: "Closed"
+  }[e] || String(e || "").toLowerCase();
+}
+function ne(e) {
+  const t = new Date(e).getTime();
+  if (!Number.isFinite(t)) return "";
+  const i = Math.floor((Date.now() - t) / 864e5);
+  if (i <= 0) return "today";
+  if (i === 1) return "yesterday";
+  if (i < 30) return `${i} days ago`;
+  const w = Math.floor(i / 30);
+  return w === 1 ? "a month ago" : `${w} months ago`;
+}
+function v(e) {
+  return String(e).replace(/[&<>"']/g, (t) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[t]);
+}
+const Ge = 7 * 24 * 60 * 60 * 1e3;
+let J;
+function Xe() {
+  return J || (J = new Promise((e, t) => {
+    const i = indexedDB.open("bugcatch-drafts", 1);
+    i.onupgradeneeded = () => i.result.createObjectStore("drafts"), i.onsuccess = () => e(i.result), i.onerror = () => t(i.error), i.onblocked = () => t(new Error("Draft storage is blocked."));
+  }).catch((e) => {
+    throw J = null, e;
+  })), J;
+}
+function Je(e, t) {
+  var i, w;
+  return JSON.stringify([e.apiBase, e.projectId, t || ((i = e.user) == null ? void 0 : i.email) || ((w = e.user) == null ? void 0 : w.id) || "anonymous"]);
+}
+async function te(e, t) {
+  const i = await Xe();
+  return new Promise((w, b) => {
+    const T = i.transaction("drafts", t === void 0 ? "readonly" : "readwrite"), x = T.objectStore("drafts"), g = t === void 0 ? x.get(e) : t === null ? x.delete(e) : x.put({ ...t, savedAt: Date.now() }, e);
+    T.oncomplete = () => w(g.result), T.onerror = () => b(T.error), T.onabort = () => b(T.error || new Error("Draft was not saved."));
+  });
+}
+async function et(e) {
+  const t = await te(e);
+  return t && Date.now() - t.savedAt > Ge ? (await te(e, null), null) : t || null;
+}
+const xe = [
+  { value: "LOW", label: "Low" },
+  { value: "MEDIUM", label: "Medium" },
+  { value: "HIGH", label: "High" },
+  { value: "CRITICAL", label: "Critical" }
+], ye = "MEDIUM";
+function tt(e) {
+  const t = e.attachments !== !1, i = t && Le(), w = t && Qe();
+  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">
+            ${xe.map((b) => `
+              <button type="button" data-prio="${b.value}" aria-pressed="${b.value === ye}">${b.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">
+            ${i ? `<button class="tool" type="button" data-act="shot">${Ve}Screenshot</button>` : ""}
+            ${w ? `<button class="tool" type="button" data-act="rec">${je}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 at(e) {
+  var oe, K, U, M;
+  const {
+    client: t,
+    cfg: i,
+    root: w,
+    host: b,
+    dock: T,
+    scrim: x,
+    $: g,
+    say: m,
+    titleInput: l,
+    descInput: d,
+    compose: L,
+    sendBtn: y,
+    note: k
+  } = e, S = g(".thumbs"), q = x.querySelector("input[type=file]"), E = [];
+  let n = ye, p = null;
+  const a = document.createElement("div");
+  a.setAttribute("role", "status"), a.className = "note", L.prepend(a);
+  const s = Je(i, (oe = t.signedInAs()) == null ? void 0 : oe.email);
+  let u = i.drafts === !1, r = !1, o = Promise.resolve(), f;
+  function $() {
+    if (clearTimeout(f), !u || r || i.drafts === !1) return o;
+    const c = l.value || d.value || E.length ? {
+      title: l.value,
+      description: d.value,
+      priority: n,
+      items: E.map(({ blob: Q, mime: I, kind: C }) => ({ blob: Q, mime: I, kind: C }))
+    } : null;
+    return o = o.catch(() => {
+    }).then(() => te(s, c)).then(() => {
+      a.textContent = c ? "Draft saved on this device" : "";
+    }).catch(() => {
+      a.textContent = "Draft could not be saved. Keep this tab open.";
+    }), o;
+  }
+  function A() {
+    clearTimeout(f), f = setTimeout($, 250);
+  }
+  L.addEventListener("input", A), L.addEventListener("change", A);
+  const j = () => {
+    $();
+  };
+  window.addEventListener("pagehide", j);
+  function B() {
+    E.filter((c) => c.status === "failed").forEach(D);
+  }
+  window.addEventListener("online", B), i.drafts !== !1 && (L.inert = !0, et(s).then((c) => {
+    e.closed || !c || (a.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>', a.querySelector("[data-resume]").onclick = () => {
+      l.value = c.title || "", d.value = c.description || "", n = xe.some((Q) => Q.value === c.priority) ? c.priority : "MEDIUM", x.querySelectorAll("[data-prio]").forEach((Q) => Q.setAttribute("aria-pressed", String(Q.dataset.prio === n)));
+      for (const Q of (c.items || []).slice(0, i.maxAttachments ?? 5)) O(Q);
+      u = !0, $();
+    }, a.querySelector("[data-discard]").onclick = () => {
+      u = !0, $();
+    });
+  }).catch(() => {
+    a.textContent = "Draft storage is unavailable. Keep this tab open.";
+  }).finally(() => {
+    L.inert = !1, a.querySelector("[data-resume]") || (u = !0);
+  })), e.onDestroy(() => {
+    var c;
+    $(), clearTimeout(f), window.removeEventListener("pagehide", j), window.removeEventListener("online", B), p == null || p.cancel(), E.forEach((Q) => Q.previewUrl && URL.revokeObjectURL(Q.previewUrl)), (c = w.querySelector(".recbar")) == null || c.remove();
+  }), x.querySelectorAll("[data-prio]").forEach((c) => {
+    c.addEventListener("click", () => {
+      n = c.dataset.prio, A(), x.querySelectorAll("[data-prio]").forEach((Q) => {
+        Q.setAttribute("aria-pressed", String(Q === c));
+      });
+    });
+  });
+  const N = g("#bc-title-err");
+  function h(c) {
+    N.hidden = !c, N.innerHTML = c ? `${G}<span>${v(c)}</span>` : "", l.classList.toggle("invalid", !!c), l.setAttribute("aria-invalid", String(!!c));
+  }
+  l.addEventListener("input", () => {
+    l.value.trim() && h("");
+  });
+  function z() {
+    const c = E.some((C) => C.status === "uploading");
+    y.disabled = e.sending || c || E.some((C) => C.status === "failed"), k.textContent = c ? "Waiting for the upload to finish…" : E.some((C) => C.status === "failed") ? "Retry or remove failed attachments before sending." : "";
+    const Q = i.maxAttachments ?? 5;
+    x.querySelectorAll(".tool").forEach((C) => {
+      C.disabled = e.sending || E.length >= Q;
+    });
+    const I = g(".field-head .count");
+    I && (I.textContent = E.length ? `${E.length} of ${Q}` : "");
+  }
+  e.refreshSendState = z;
+  function R(c) {
+    var Y;
+    const Q = c.el, I = c.kind === "VIDEO" ? "Video" : "Shot", C = c.kind === "VIDEO" ? `<video src="${c.previewUrl}" muted playsinline preload="metadata"></video>` : `<img src="${c.previewUrl}" alt="" />`;
+    let V = "";
+    c.status === "uploading" ? V = `<div class="veil"><div class="spinner"></div><div class="bar"><i style="width:${Math.round(c.progress * 100)}%"></i></div></div>` : c.status === "failed" && (V = `<div class="veil err"><button type="button" data-act="retry" aria-label="Retry upload">${Be}</button>Failed</div>`), Q.innerHTML = `
+      ${C}
+      <span class="kind">${I} · ${P(c.size)}</span>
+      <button class="drop" type="button" data-act="drop" aria-label="Remove ${I.toLowerCase()}">${ce}</button>
+      ${V}`, Q.querySelector('[data-act="drop"]').addEventListener("click", () => H(c)), (Y = Q.querySelector('[data-act="retry"]')) == null || Y.addEventListener("click", () => D(c));
+  }
+  function H(c) {
+    const Q = E.indexOf(c);
+    Q >= 0 && E.splice(Q, 1), c.previewUrl && URL.revokeObjectURL(c.previewUrl), c.el.remove(), $(), z();
+  }
+  async function D(c) {
+    c.status = "uploading", c.progress = 0, R(c), z();
+    try {
+      const { storageKey: Q, mime: I } = await t.uploadAttachment(c.blob, c.mime, (C) => {
+        c.progress = C;
+        const V = c.el.querySelector(".bar i");
+        V && (V.style.width = `${Math.round(C * 100)}%`);
+      });
+      c.storageKey = Q, c.mime = I, c.status = "ready";
+    } catch (Q) {
+      c.status = "failed", m(Q.message.replace("[BugCatch] ", ""));
+    }
+    R(c), z();
+  }
+  function O({ blob: c, mime: Q, kind: I }) {
+    const C = i.maxAttachmentBytes ?? 26214400;
+    if (c.size > C) {
+      m(`That file is ${P(c.size)} — the limit is ${P(C)}.`);
+      return;
+    }
+    const V = Te(Q || c.type, be);
+    if (!V) {
+      m("Only PNG, JPEG, WebP, WebM and MP4 files can be attached to a report.");
+      return;
+    }
+    const Y = {
+      blob: c,
+      kind: I,
+      mime: V,
+      size: c.size,
+      previewUrl: URL.createObjectURL(c),
+      status: "uploading",
+      progress: 0,
+      storageKey: null,
+      el: document.createElement("div")
+    };
+    Y.el.className = "thumb", E.push(Y), S.appendChild(Y.el), m(""), $(), D(Y);
+  }
+  async function X(c) {
+    b.style.opacity = "0", b.style.pointerEvents = "none", await new Promise((Q) => requestAnimationFrame(() => requestAnimationFrame(Q)));
+    try {
+      return await c();
+    } finally {
+      b.style.opacity = "", b.style.pointerEvents = "";
+    }
+  }
+  (K = x.querySelector('[data-act="shot"]')) == null || K.addEventListener("click", async () => {
+    try {
+      const c = await X(Ee);
+      O(c);
+    } catch (c) {
+      (c == null ? void 0 : c.name) !== "NotAllowedError" && m(`Screenshot failed: ${c.message}`);
+    }
+  }), (U = x.querySelector('[data-act="file"]')) == null || U.addEventListener("click", () => q.click()), q == null || q.addEventListener("change", () => {
+    const c = (i.maxAttachments ?? 5) - E.length;
+    [...q.files].slice(0, Math.max(c, 0)).forEach((Q) => {
+      O({
+        blob: Q,
+        mime: Q.type,
+        kind: Q.type.startsWith("video/") ? "VIDEO" : "SCREENSHOT"
+      });
+    }), q.value = "";
+  }), (M = x.querySelector('[data-act="rec"]')) == null || M.addEventListener("click", async () => {
+    const c = i.maxRecordingMs ?? 12e4;
+    let Q;
+    try {
+      p = await qe({
+        maxMs: c,
+        onTick: (I) => {
+          Q && (Q.querySelector(".time").textContent = ee(I));
+        },
+        onAutoStop: () => {
+          p && W({ keep: !0 });
+        }
+      });
+    } catch (I) {
+      (I == null ? void 0 : I.name) !== "NotAllowedError" && m(`Recording failed: ${I.message}`);
+      return;
+    }
+    x.style.display = "none", T.hidden = !0, Q = document.createElement("div"), Q.className = "recbar", Q.innerHTML = `
+      <span class="dot"></span>
+      <span class="time">0:00</span>
+      <span class="hint">Recording — up to ${ee(Math.round(c / 1e3))}</span>
+      <button class="stop" type="button">Stop</button>
+      <button class="ghost" type="button">Discard</button>`, Q.querySelector(".stop").addEventListener("click", () => W({ keep: !0 })), Q.querySelector(".ghost").addEventListener("click", () => W({ keep: !1 })), w.appendChild(Q), Q.querySelector(".stop").focus();
+  });
+  async function W({ keep: c }) {
+    var I;
+    const Q = p;
+    if (Q) {
+      if (p = null, (I = w.querySelector(".recbar")) == null || I.remove(), x.style.display = "", T.hidden = !1, !c) {
+        Q.cancel(), l.focus();
+        return;
+      }
+      try {
+        const C = await Q.stop();
+        C.blob.size ? O(C) : m("That recording came back empty — nothing was captured.");
+      } catch (C) {
+        m(`Recording failed: ${C.message}`);
+      }
+      l.focus();
+    }
+  }
+  e.isRecording = () => !!p, e.stopRecording = W, y.addEventListener("click", async () => {
+    var I;
+    const c = l.value;
+    if (!c.trim()) {
+      h("Add a few words about what went wrong — a short sentence is plenty."), l.focus();
+      return;
+    }
+    if (e.holdForReference()) return;
+    e.sending = !0, m(""), z();
+    const Q = y.innerHTML;
+    y.innerHTML = '<span class="spinner" aria-hidden="true"></span>Sending…';
+    try {
+      const C = await t.report({
+        title: c,
+        description: d.value,
+        priority: n,
+        references: e.answeredReference(),
+        issue: ((I = e.pickedIssue()) == null ? void 0 : I.key) || null,
+        attachments: E.filter((V) => V.status === "ready").map((V) => ({ type: V.kind, storageKey: V.storageKey, mime: V.mime }))
+      });
+      if (C != null && C.cancelled) {
+        e.sending = !1, y.innerHTML = Q, z();
+        return;
+      }
+      r = !0, clearTimeout(f), await o, i.drafts !== !1 && await te(s, null).catch(() => {
+      }), e.succeed(C);
+    } catch (C) {
+      e.sending = !1, y.innerHTML = Q, m(C.message.replace("[BugCatch] ", "")), z(), e.recheckSignIn();
+    }
+  });
+}
+function nt(e) {
+  const {
+    client: t,
+    say: i,
+    titleInput: w,
+    descInput: b,
+    sendBtn: T,
+    refsBox: x
+  } = e;
+  let g = { policy: "off", fields: [] }, m = !1, l = null, d = "", L = "", y = [], k = "ask", S = !1, q = !1;
+  t.referenceFields().then((h) => {
+    g = h, u();
+  }).catch(() => {
+  });
+  function E() {
+    return g.policy === "off" || !g.fields.length ? { found: [], conflicts: [], loose: [] } : ze(g.fields, [w.value, b.value]);
+  }
+  function n(h = E()) {
+    return h.found.length > 0 && h.conflicts.length === 0;
+  }
+  function p() {
+    return !l || !d.trim() ? [] : [{ key: l, value: d.trim().slice(0, 120) }];
+  }
+  const a = document.createElement("p");
+  a.className = "ref-found", a.setAttribute("aria-live", "polite"), a.hidden = !0, b.closest(".field").after(a);
+  let s;
+  function u() {
+    const h = E();
+    if (n(h)) {
+      const z = h.found.slice(0, 2).map((R) => `${v(R.label)} <b>${v(o(R.value))}</b>`).join(", ");
+      a.innerHTML = `${F}<span>Found your ${z} — no need to add it again.</span>`, a.hidden = !1, m && !p().length && (m = !1, A());
+    } else
+      a.hidden = !0, a.innerHTML = "";
+  }
+  const r = () => {
+    clearTimeout(s), s = setTimeout(u, 250);
+  };
+  w.addEventListener("input", r), b.addEventListener("input", r);
+  function o(h) {
+    return h.length > 20 ? `${h.slice(0, 8)}…${h.slice(-4)}` : h;
+  }
+  function f(h) {
+    const z = h.trim().toLowerCase();
+    return y.find((R) => R.value.toLowerCase() === z) || null;
+  }
+  function $(h) {
+    d = h.value, h.kinds.length === 1 ? l = h.kinds[0].key : h.kinds.some((z) => z.key === l) || (l = null), L = "", q = !1;
+  }
+  function A() {
+    var K, U;
+    if (!m) {
+      x.hidden = !0, x.innerHTML = "";
+      return;
+    }
+    const h = g.fields.find((M) => M.key === l) || null, z = g.policy !== "required", R = f(d), H = R && R.kinds.length > 1 ? g.fields.filter((M) => R.kinds.some((c) => c.key === M.key)) : g.fields, D = y.length > 1 && y.every((M) => M.kinds.length === 1 && M.kinds[0].key === y[0].kinds[0].key), O = {
+      confirm: y.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: z ? ["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."]
+    }[k];
+    x.hidden = !1;
+    const X = H.length > 6;
+    x.innerHTML = `
+      <div class="ask-head">
+        <span class="avatar orb" aria-hidden="true"></span>
+        <div>
+          <strong>${v(O[0])}</strong>
+          <p class="why">${v(O[1])}</p>
+        </div>
+      </div>
+      ${y.length > 1 ? `
+      <div class="chips cands" role="group" aria-label="IDs found in your message">
+        ${y.map((M, c) => `
+          <button type="button" data-ref-cand="${c}" title="${v(M.value)}"
+            aria-pressed="${!!R && R === M}">${v(o(M.value))}</button>
+        `).join("")}
+      </div>` : ""}
+      ${H.length > 1 && !X && !D ? `
+      <div class="chips" role="group" aria-label="Which detail you are giving">
+        ${H.map((M) => `
+          <button type="button" data-ref-kind="${v(M.key)}" aria-pressed="${!!h && M.key === h.key}">${v(M.label)}</button>
+        `).join("")}
+      </div>` : ""}
+      <div class="row">
+        ${X ? `
+        <select class="ref-kind" aria-label="Which detail you are giving">
+          ${h ? "" : '<option value="" selected disabled>What is it?</option>'}
+          ${H.map((M) => `
+            <option value="${v(M.key)}" ${h && M.key === h.key ? "selected" : ""}>${v(M.label)}</option>
+          `).join("")}
+        </select>` : ""}
+        <input class="ref-value${L ? " invalid" : ""}" type="${(h == null ? void 0 : h.inputMode) === "email" ? "email" : "text"}"
+          inputmode="${v((h == null ? void 0 : h.inputMode) === "numeric" || (h == null ? void 0 : h.inputMode) === "tel" ? "numeric" : "text")}"
+          value="${v(d)}"
+          placeholder="${v(h ? h.placeholder || h.label : "Your ID")}"
+          aria-label="${v(h ? h.label : "Your ID")}" ${L ? 'aria-invalid="true"' : ""} />
+      </div>
+      ${h != null && h.hint ? `<p class="hint">${v(h.hint)}</p>` : ""}
+      ${L ? `<p class="field-err" role="alert">${G}<span>${v(L)}</span></p>` : ""}
+      ${z ? `<button type="button" class="link" data-act="ref-skip">${k === "ask" ? "I don't have this — send without it" : "Not sure — send as it is"}</button>` : ""}`, x.querySelectorAll("[data-ref-cand]").forEach((M) => {
+      M.addEventListener("click", () => {
+        $(y[Number(M.dataset.refCand)]), A();
+      });
+    }), x.querySelectorAll("[data-ref-kind]").forEach((M) => {
+      M.addEventListener("click", () => {
+        l = M.dataset.refKind, L = "", q = !1, A();
+      });
+    });
+    const W = x.querySelector(".ref-value");
+    W.addEventListener("input", () => {
+      d = W.value, L = "", q = !1;
+    }), W.addEventListener("keydown", (M) => {
+      M.key === "Enter" && (M.preventDefault(), T.click());
+    }), (K = x.querySelector(".ref-kind")) == null || K.addEventListener("change", (M) => {
+      var c;
+      l = M.target.value, L = "", A(), (c = x.querySelector(".ref-value")) == null || c.focus();
+    }), (U = x.querySelector('[data-act="ref-skip"]')) == null || U.addEventListener("click", () => {
+      S = !0, m = !1, l = null, d = "", L = "", q = !1, A(), i("");
+    }), ((!h && d ? x.querySelector("[data-ref-kind], .ref-kind") : null) || W).focus();
+  }
+  function j(h) {
+    if (y = h.conflicts.length ? h.conflicts : h.loose.slice(0, 4), k = h.conflicts.length ? "confirm" : h.loose.length ? "suggest" : "ask", m = !0, y.length)
+      if (y.length === 1) $(y[0]);
+      else {
+        d = "";
+        const [z] = y;
+        l = y.every((H) => H.kinds.length === 1 && H.kinds[0].key === z.kinds[0].key) ? z.kinds[0].key : null;
+      }
+    else
+      l = l || g.fields[0].key;
+    A();
+  }
+  function B() {
+    if (g.policy === "off" || !g.fields.length || p().length) return !1;
+    const h = E();
+    return n(h) || S && g.policy !== "required" ? !1 : h;
+  }
+  function N() {
+    if (m && d.trim() && !l)
+      return L = "Pick what this ID is.", A(), !0;
+    const h = B();
+    if (h)
+      return m ? A() : j(h), i(""), !0;
+    if (l && d.trim()) {
+      const z = g.fields.find((R) => R.key === l);
+      if (!q && z && !Me(z, d))
+        return L = `That does not look like a ${z.label.toLowerCase()}. Press Send again to use it anyway.`, q = !0, A(), !0;
+    }
+    return !1;
+  }
+  e.holdForReference = N, e.answeredReference = p;
+}
+const ot = 3;
+function rt(e) {
+  const { client: t, cfg: i, notices: w } = e;
+  let b = [];
+  function T() {
+    const g = b.slice(0, ot);
+    w.replaceChildren(...g.map((m) => Ce(m, { where: "panel", onDismiss: x }))), w.hidden = g.length === 0;
+  }
+  function x(g) {
+    t.dismissAnnouncement(g), b = b.filter((m) => m !== g), T(), e.titleInput.focus();
+  }
+  i.announcements !== !1 && typeof t.announcements == "function" && t.announcements().then((g) => {
+    e.closed || (b = g, T());
+  }).catch(() => {
+  });
+}
+function it(e) {
+  const {
+    client: t,
+    cfg: i,
+    titleInput: w,
+    known: b
+  } = e;
+  let T = [], x = "", g = null, m = null;
+  function l() {
+    i.knownIssues !== !1 && t.knownIssues().then((S) => {
+      T = S, y();
+    }).catch(() => {
+    });
+  }
+  let d = null;
+  function L(S) {
+    if (i.knownIssues === !1) return;
+    clearTimeout(d), m == null || m.abort();
+    const q = (S || "").trim();
+    if (q.length < 3) {
+      l();
+      return;
+    }
+    d = setTimeout(() => {
+      m = new AbortController(), t.matchKnownIssues(q, { signal: m.signal }).then((E) => {
+        E.length && (T = E, y());
+      }).catch(() => {
+      });
+    }, 250);
+  }
+  function y() {
+    if (!T.length) {
+      b.hidden = !0, b.innerHTML = "";
+      return;
+    }
+    b.hidden = !1, b.innerHTML = `
+      <p class="known-h">Already reported</p>
+      ${T.map((S) => `
+        <div class="issue ${S.joined ? "is-joined" : ""}">
+          <span class="who">
+            <span class="t">${v(S.title)}</span>
+            <span class="meta">${v(k(S))}</span>
+          </span>
+          <button class="join" type="button" data-join="${v(S.id)}"
+            ${S.joined ? "disabled" : ""}>${S.joined ? "Following" : "Me too"}</button>
+        </div>
+        ${g === S.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="${v(S.id)}">Follow</button>
+        </div>` : ""}
+      `).join("")}
+      ${x ? `<p class="err">${v(x)}</p>` : ""}`;
+  }
+  function k(S) {
+    const q = S.status === "IN_PROGRESS" ? "Being worked on now" : "Not fixed yet", E = S.affectedCount === 0 ? "" : ` · ${S.affectedCount} ${S.affectedCount === 1 ? "person has" : "people have"} said this is happening to them`;
+    return `${q} · reported ${ne(S.since)}${E}`;
+  }
+  b.addEventListener("click", async (S) => {
+    var a, s, u, r, o;
+    const q = S.target.closest("[data-join]"), E = S.target.closest("[data-join-confirm]");
+    if (!q && !E) return;
+    const n = (E || q).getAttribute(E ? "data-join-confirm" : "data-join");
+    x = "";
+    const p = ((s = (a = b.querySelector(".join-email")) == null ? void 0 : a.value) == null ? void 0 : s.trim()) || ((u = t.signedInAs()) == null ? void 0 : u.email) || ((r = t.config.user) == null ? void 0 : r.email);
+    if (!p) {
+      g = n, y(), (o = b.querySelector(".join-email")) == null || o.focus();
+      return;
+    }
+    try {
+      const f = await t.meToo(n, { email: p });
+      g = null, T = T.map(($) => $.id === n ? { ...$, joined: !0, affectedCount: f.affectedCount ?? $.affectedCount } : $), y();
+    } catch (f) {
+      x = f.message.replace("[BugCatch] ", ""), y();
+    }
+  }), l(), w.addEventListener("input", () => L(w.value));
+}
+function st(e) {
+  const {
+    client: t,
+    cfg: i,
+    titleInput: w,
+    descInput: b,
+    picks: T
+  } = e;
+  let x = [], g = null;
+  function m() {
+    if (!x.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">
+        ${x.map((l, d) => `
+          <button type="button" class="pick" data-pick="${v(l.key)}"
+            ${l.hint ? `title="${v(l.hint)}" aria-describedby="bc-pick-h${d}"` : ""}
+            aria-pressed="${(g == null ? void 0 : g.key) === l.key}">
+            <span class="t">${v(l.title)}</span>
+            ${l.hint ? `<span class="h sr-only" id="bc-pick-h${d}">${v(l.hint)}</span>` : ""}
+          </button>`).join("")}
+      </div>
+      ${g ? `<p class="picks-note">${F}<span>Our assistant will check your account and reply here. Add anything else below, then send.</span></p>` : ""}`;
+  }
+  T.addEventListener("click", (l) => {
+    const d = l.target.closest("[data-pick]");
+    if (!d) return;
+    const L = x.find((k) => k.key === d.dataset.pick);
+    if (!L) return;
+    const y = g && w.value.trim() === g.title;
+    (g == null ? void 0 : g.key) === L.key ? (g = null, y && (w.value = "")) : (g = L, (!w.value.trim() || y) && (w.value = L.title)), w.dispatchEvent(new Event("input", { bubbles: !0 })), m(), g && b.focus();
+  }), i.agentIssues !== !1 && typeof t.agentIssues == "function" && t.agentIssues().then((l) => {
+    x = l, m();
+  }).catch(() => {
+  }), e.pickedIssue = () => g;
+}
+function lt(e) {
+  const {
+    client: t,
+    scrim: i,
+    say: w,
+    callBtn: b,
+    close: T
+  } = e;
+  let x = !1;
+  function g() {
+    t.callKind().then((d) => {
+      d && (x = !0, e.preloadCall(), b.hidden = e.mustSignIn());
+    }).catch(() => {
+    });
+  }
+  g(), b.addEventListener("click", async () => {
+    e.sending = !0, w(""), e.refreshSendState(), b.disabled = !0, b.innerHTML = '<span class="spinner"></span>Ringing…';
+    try {
+      const d = await t.startCall();
+      m(d);
+    } catch (d) {
+      e.sending = !1, b.disabled = !1, b.innerHTML = `${ae}Talk to the team`, e.refreshSendState(), d.filed ? e.succeed(d.filed, { callFailed: d.reason || "The call could not be started." }) : (w(d.message.replace("[BugCatch] ", "")), e.recheckSignIn());
+    }
+  });
+  function m(d) {
+    const L = i.querySelector(".panel"), y = d != null && d.bugId ? String(d.bugId).slice(0, 8) : null;
+    L.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${y ? ` <code>${v(y)}</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 k = L.querySelector(".call-state"), S = L.querySelector(".call-dot"), q = {
+      ringing: "Ringing the team…",
+      connecting: "Someone answered — connecting…",
+      connected: "Connected",
+      missed: "Nobody was free",
+      ended: "Call ended",
+      failed: "The call dropped"
+    }, E = ["ended", "failed", "missed"], n = t.on("call", ({ state: p }) => {
+      if (k.textContent = q[p] || p, S.classList.toggle("off", E.includes(p)), E.includes(p) && (L.querySelector('[data-act="hangup"]').textContent = "Close", p === "missed")) {
+        const a = L.querySelector(".call-note");
+        a && (a.textContent = "Nobody was free to pick up just now. Your report is filed and the team will reply in the chat.");
+      }
+    });
+    L.querySelector('[data-act="hangup"]').addEventListener("click", () => {
+      n(), t.endCall(), T();
+    });
+  }
+  function l(d, L, y) {
+    const k = document.createElement("div");
+    k.className = "livecall", k.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>
+      ${y != null && y.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>`, d.insertBefore(k, L);
+    const S = k.querySelector(".who"), q = k.querySelector(".secs"), E = k.querySelector(".call-dot"), n = k.querySelector('[data-act="mute"]'), p = k.querySelector('[data-act="hangup"]');
+    let a = null;
+    const s = () => {
+      a && (clearInterval(a), a = null);
+    }, u = (o) => {
+      s(), E.classList.add("off"), k.classList.add("over"), S.textContent = o, q.hidden = !0, n.hidden = !0, p.textContent = "Dismiss", p.classList.remove("danger");
+    }, r = t.on("call", ({ state: o }) => {
+      if (o === "ringing" && (S.textContent = "Calling the team…"), o === "connecting" && (S.textContent = "Someone answered — connecting…"), o === "connected") {
+        S.textContent = "You're on a call with the team", n.hidden = !1, q.hidden = !1;
+        const f = Date.now();
+        s(), a = setInterval(() => {
+          q.textContent = ee(Math.floor((Date.now() - f) / 1e3));
+        }, 1e3), q.textContent = "0s";
+      }
+      o === "missed" && u("Nobody was free. Send a message instead and the team will pick it up."), o === "ended" && u("Call ended."), o === "failed" && u("The call dropped.");
+    });
+    n.addEventListener("click", () => {
+      const o = y.setMuted(!y.isMuted());
+      n.textContent = o ? "Unmute" : "Mute", S.textContent = o ? "You're muted" : "You're on a call with the team";
+    }), p.addEventListener("click", () => {
+      r(), s(), t.endCall(), k.remove(), e.refreshThread(e.openReportId());
+    });
+  }
+  e.offerCall = g, e.callOffered = () => x, e.showLiveCall = l;
+}
+function ct(e) {
+  var r;
+  const {
+    client: t,
+    say: i,
+    compose: w,
+    sendBtn: b,
+    historyBtn: T,
+    callBtn: x,
+    whoami: g
+  } = e;
+  let m = { mode: t.lastLoginMode || "off", signedIn: null }, l = "idle", d = ((r = t.config.user) == null ? void 0 : r.email) || "", L = "", y = !1, k = "";
+  const S = () => m.mode === "required" && !m.signedIn;
+  function q() {
+    const o = S();
+    w.hidden = o, b.hidden = o, T && (T.hidden = o), o ? x.hidden = !0 : e.callOffered() && (x.hidden = !1);
+  }
+  function E() {
+    var f;
+    if (m.mode === "off") {
+      g.hidden = !0, g.innerHTML = "";
+      return;
+    }
+    g.hidden = !1, g.classList.toggle("asking", l !== "idle");
+    const o = k ? `<div class="after err">${v(k)}</div>` : "";
+    if (l === "idle") {
+      if (m.signedIn) {
+        g.innerHTML = `<span class="who">Signed in as <strong>${v(m.signedIn.email)}</strong></span><button type="button" class="link" data-act="signout">Sign out</button>`;
+        return;
+      }
+      const $ = (f = t.config.user) == null ? void 0 : f.email;
+      g.innerHTML = `<span class="who">${m.mode === "required" ? "Sign in to report a bug here." : $ ? `Reporting as <strong>${v($)}</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 (l === "email") {
+      g.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${m.mode === "required" ? ", and this project asks for it" : ""}.</p>
+        <div class="row">
+          <input type="email" data-fld="email" value="${v(d)}"
+            placeholder="you@example.com" autocomplete="email" spellcheck="false"
+            aria-label="Your email address" ${y ? "disabled" : ""} />
+          <button type="button" class="primary" data-act="code" ${y ? "disabled" : ""}>
+            ${y ? "Sending…" : "Send code"}
+          </button>
+        </div>
+        ${o}
+        ${m.mode === "optional" ? '<div class="after"><button type="button" class="link" data-act="skip">Not now</button></div>' : ""}`;
+      return;
+    }
+    g.innerHTML = `
+      <p class="why">We sent a code to <strong>${v(d)}</strong>. It expires in ten minutes.</p>
+      <div class="row">
+        <input type="text" class="code" data-fld="code" value="${v(L)}"
+          placeholder="123456" inputmode="numeric" autocomplete="one-time-code"
+          maxlength="8" aria-label="The code we emailed you" ${y ? "disabled" : ""} />
+        <button type="button" class="primary" data-act="confirm" ${y ? "disabled" : ""}>
+          ${y ? "Checking…" : "Sign in"}
+        </button>
+      </div>
+      ${o}
+      <div class="after">
+        <button type="button" class="link" data-act="resend" ${y ? "disabled" : ""}>Send it again</button>
+        <button type="button" class="link" data-act="signin-back" ${y ? "disabled" : ""}>Use another address</button>
+      </div>`;
+  }
+  function n({ focus: o = !1 } = {}) {
+    var $;
+    if (E(), q(), !o || y) return;
+    const f = g.querySelector("[data-fld]");
+    f && (f.focus(), ($ = f.setSelectionRange) == null || $.call(f, f.value.length, f.value.length));
+  }
+  g.addEventListener("input", (o) => {
+    const f = o.target.closest("[data-fld]");
+    f && (f.dataset.fld === "email" ? d = f.value : L = f.value);
+  }), g.addEventListener("keydown", (o) => {
+    o.key !== "Enter" || !o.target.closest("[data-fld]") || (o.preventDefault(), l === "email" ? p() : a());
+  });
+  async function p({ resent: o = !1 } = {}) {
+    const f = d.trim();
+    if (!f) {
+      k = "Enter the address to send the code to.", n({ focus: !0 });
+      return;
+    }
+    y = !0, k = "", n();
+    try {
+      await t.signIn(f), d = f, o || (L = ""), l = "code";
+    } catch ($) {
+      k = $.message;
+    } finally {
+      y = !1, n({ focus: !0 });
+    }
+  }
+  async function a() {
+    const o = L.trim();
+    if (!o) {
+      k = "Enter the code we emailed you.", n({ focus: !0 });
+      return;
+    }
+    y = !0, k = "", n();
+    try {
+      const f = await t.confirmSignIn(d.trim(), o);
+      m.signedIn = f, l = "idle", L = "", i(""), e.offerCall();
+    } catch (f) {
+      k = f.message;
+    } finally {
+      y = !1, n({ focus: l !== "idle" });
+    }
+  }
+  g.addEventListener("click", async (o) => {
+    const f = o.target.closest("button[data-act]");
+    if (!f) return;
+    const $ = f.dataset.act;
+    if ($ === "signin") {
+      l = "email", k = "", n({ focus: !0 });
+      return;
+    }
+    if ($ === "skip") {
+      l = "idle", k = "", n();
+      return;
+    }
+    if ($ === "signin-back") {
+      l = "email", k = "", L = "", n({ focus: !0 });
+      return;
+    }
+    if ($ === "code") {
+      p();
+      return;
+    }
+    if ($ === "resend") {
+      p({ resent: !0 });
+      return;
+    }
+    if ($ === "confirm") {
+      a();
+      return;
+    }
+    if ($ === "signout") {
+      y = !0, n();
+      try {
+        await t.signOut();
+      } finally {
+        m.signedIn = null, y = !1, l = m.mode === "required" ? "email" : "idle", n({ focus: l !== "idle" });
+      }
+    }
+  });
+  async function s({ announce: o = !1 } = {}) {
+    const f = await t.loginState();
+    m = { mode: f.mode, signedIn: f.signedIn }, t.lastLoginMode = f.mode, S() && l === "idle" && (l = "email"), m.signedIn && (l = "idle"), o && f.signedOutReason && i(f.signedOutReason, "info"), n();
+  }
+  s({ announce: !0 }).catch(() => {
+  });
+  function u() {
+    m.mode !== "off" && s().catch(() => {
+    });
+  }
+  e.mustSignIn = S, e.recheckSignIn = u;
+}
+function ue(e) {
+  const t = e || [];
+  if (!t.length) return "";
+  let i = null, w = null;
+  return t.map((b) => {
+    var d, L, y, k;
+    const T = Z(b.at), x = T && T !== i ? `<div class="day-sep" role="separator">${v(_e(b.at))}</div>` : "";
+    if (x && (i = T, w = null), !b.from)
+      return w = null, x + pt(b);
+    const g = {
+      from: b.from,
+      author: (d = b.reply) == null ? void 0 : d.author,
+      automated: (L = b.reply) == null ? void 0 : L.automated,
+      body: (y = b.reply) == null ? void 0 : y.body,
+      at: b.at,
+      attachments: (k = b.reply) == null ? void 0 : k.attachments
+    }, m = dt(g), l = w && w.who === m && Math.abs(new Date(b.at).getTime() - new Date(w.at).getTime()) < 5 * 6e4;
+    return w = { who: m, at: b.at }, x + we(g, l ? "cont" : "");
+  }).join("");
+}
+function dt(e) {
+  return e.from === "reporter" ? "me" : e.automated ? "assistant" : `team:${e.author || ""}`;
+}
+function pt(e) {
+  const t = ve(e.at);
+  return `
+    <div class="sys k-${v(e.kind)}">
+      <span class="dot" aria-hidden="true"></span>${v(e.summary || "")}${t ? `
+      <span class="t">· ${v(t)}</span>` : ""}
+    </div>`;
+}
+function we(e, t = "") {
+  const i = e.from === "reporter", w = e.body || "", b = e.attachments || [], T = !i && !!e.automated, x = w ? `<span class="msg-text">${v(w)}</span>` : "", g = b.length ? `<div class="att">${b.map(ht).join("")}</div>` : "";
+  let m = "", l = "";
+  if (T)
+    m = '<span class="msg-who auto">Assistant <span class="tag">AI</span></span>', l = '<span class="av bot orb" aria-hidden="true"></span>';
+  else if (!i) {
+    const L = e.author || "Support team";
+    m = `<span class="msg-who">${v(L)}</span>`, l = `<span class="av" aria-hidden="true">${v(Ze(L))}</span>`;
+  }
+  t.includes("cont") && (m = "");
+  const d = T && /it goes to the same person/i.test(w) ? `<div class="quick" role="group" aria-label="Answer">
+        <button type="button" data-quick="Yes, this is the problem">${F}That's right</button>
+        <button type="button" data-quick="No, that is not the problem">That's not it</button>
+      </div>` : T && He.test(w) ? `<div class="quick" role="group" aria-label="Did this answer your question?">
+          <button type="button" data-quick="Yes, that answers it">${F}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 ${i ? "mine" : "theirs"} ${T ? "auto" : ""} ${t}">
+      ${l}
+      ${m}
+      <div class="bubble ${w ? "" : "silent"}">${x}${g}</div>
+      ${d}
+      <span class="msg-when">${v(ve(e.at) || ne(e.at))}</span>
+    </div>`;
+}
+function ut() {
+  return `
+    <div class="typing-row">
+      <span class="av bot orb" aria-hidden="true"></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 ht(e) {
+  const t = v(e.name || "attachment");
+  if (!e.url) return `<span class="file"><span class="nm">${t}</span></span>`;
+  const i = v(e.url);
+  return e.type === "SCREENSHOT" ? `<a href="${i}" target="_blank" rel="noopener noreferrer"><img src="${i}" alt="${t}" loading="lazy"></a>` : e.type === "AUDIO" ? `<audio controls preload="metadata" src="${i}"></audio>` : e.type === "VIDEO" ? `<video controls preload="metadata" src="${i}"></video>` : `
+    <a class="file" href="${i}" target="_blank" rel="noopener noreferrer" download>
+      <span class="nm">${t}</span>
+      ${e.size ? `<span class="sz">${v(P(e.size))}</span>` : ""}
+    </a>`;
+}
+function bt(e, t, i, w) {
+  var u;
+  const { client: b, cfg: T } = e, x = document.createElement("div");
+  x.className = "composer", x.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">${de}</button>`}
+        <button class="tool" type="button" data-act="livecall" title="Call the team" aria-label="Call the team" hidden>${ae}</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="${Ae.join(",")}">`, t.appendChild(x);
+  const g = x.querySelector(".staged"), m = x.querySelector("textarea"), l = x.querySelector('[data-act="send"]'), d = x.querySelector('[data-act="voice"]'), L = x.querySelector('[data-act="livecall"]'), y = x.querySelector("input[type=file]"), k = x.querySelector(".note"), S = [];
+  let q = null, E = !1;
+  function n(r, o = "") {
+    k.hidden = !r, k.className = `note ${o}`, k.textContent = r || "";
+  }
+  function p() {
+    const r = S.filter((o) => o.storageKey);
+    l.disabled = E || !m.value.trim() && !r.length, g.hidden = !S.length, g.innerHTML = S.map((o, f) => `
+      <span class="chip ${o.storageKey ? "" : "uploading"}">
+        <span class="nm">${v(o.name)}</span>
+        <span class="sz">${o.storageKey ? P(o.size) : "sending…"}</span>
+        <button type="button" data-drop="${f}" aria-label="Remove ${v(o.name)}">${ce}</button>
+      </span>`).join("");
+    for (const o of g.querySelectorAll("[data-drop]"))
+      o.addEventListener("click", () => {
+        S.splice(Number(o.dataset.drop), 1), p();
+      });
+  }
+  async function a(r, o, f) {
+    const $ = { name: f, size: r.size, storageKey: null };
+    S.push($), p();
+    try {
+      const { storageKey: A, mime: j } = await b.uploadAttachment(r, o);
+      $.storageKey = A, $.mime = j;
+    } catch (A) {
+      S.splice(S.indexOf($), 1), n(A.message || "That file could not be sent.", "err");
+    }
+    p();
+  }
+  m.addEventListener("input", () => {
+    m.style.height = "auto", m.style.height = `${Math.min(m.scrollHeight, 120)}px`, p();
+  }), m.addEventListener("keydown", (r) => {
+    r.key === "Enter" && !r.shiftKey && !r.isComposing && (r.preventDefault(), s());
+  }), (u = x.querySelector('[data-act="attach"]')) == null || u.addEventListener("click", () => y.click()), y.addEventListener("change", () => {
+    n("");
+    for (const r of y.files) {
+      if (r.size > b.config.maxAttachmentBytes) {
+        n(`${r.name} is larger than ${P(b.config.maxAttachmentBytes)}.`, "err");
+        continue;
+      }
+      a(r, r.type, r.name);
+    }
+    y.value = "";
+  }), d && !Ie() && (d.disabled = !0, d.title = "This browser cannot record audio"), d == null || d.addEventListener("click", async () => {
+    if (q) {
+      const r = q;
+      q = null, d.classList.remove("recording"), d.innerHTML = de, n("");
+      const { blob: o, mime: f } = await r.stop();
+      o.size && a(o, f, "Voice note");
+      return;
+    }
+    try {
+      n(""), q = await Re({
+        maxMs: b.config.maxRecordingMs,
+        onTick: (r) => n(`Recording — ${ee(r)}. Tap the mic to stop.`),
+        onAutoStop: () => d.click()
+      }), d.classList.add("recording"), d.innerHTML = Oe;
+    } catch {
+      q = null, n("The microphone is not available — check the browser permission.", "err");
+    }
+  }), b.canCallTeam(w).then((r) => {
+    r && (L.hidden = !1, e.preloadCall());
+  }).catch(() => {
+  }), L.addEventListener("click", async () => {
+    L.disabled = !0, n("");
+    try {
+      const r = await b.startLiveCall(w);
+      e.showLiveCall(t, i, r);
+    } catch (r) {
+      n(r.message.replace("[BugCatch] ", ""), "err");
+    } finally {
+      L.disabled = !1;
+    }
+  }), l.addEventListener("click", s), i.addEventListener("click", (r) => {
+    var f, $;
+    const o = ($ = (f = r.target).closest) == null ? void 0 : $.call(f, "[data-quick]");
+    !o || E || (m.value = o.dataset.quick, s());
+  });
+  async function s() {
+    var f;
+    const r = m.value.trim(), o = S.filter(($) => $.storageKey);
+    if (!(E || !r && !o.length)) {
+      E = !0, p(), n(""), i.insertAdjacentHTML("beforeend", we({
+        from: "reporter",
+        body: r,
+        at: (/* @__PURE__ */ new Date()).toISOString(),
+        attachments: o.map(($) => ({ type: "FILE", name: $.name, size: $.size }))
+      }, "pending")), _(i, { smooth: !0 });
+      try {
+        await b.replyToReport(w, {
+          body: r,
+          attachments: o.map(($) => ({
+            storageKey: $.storageKey,
+            mime: $.mime,
+            name: $.name,
+            size: $.size
+          }))
+        }), m.value = "", m.style.height = "auto", S.length = 0, await e.refreshThread(w);
+      } catch ($) {
+        (f = i.querySelector(".msg-row.pending")) == null || f.classList.replace("pending", "failed"), n($.message || "That could not be sent — try again.", "err");
+      } finally {
+        E = !1, p();
+      }
+    }
+  }
+  p();
+}
+const se = /* @__PURE__ */ new WeakMap();
+function he(e) {
+  return JSON.stringify(e ? [e.score, e.current, e.comment || null] : null);
+}
+function ft(e) {
+  return e.rating ? ` · <span class="rated" aria-label="You rated this ${Number(e.rating)} out of 5">${me}${Number(e.rating)}</span>` : e.ratingAsked ? ' · <span class="rate-ask">Rate it</span>' : "";
+}
+function gt(e) {
+  var E;
+  const {
+    client: t,
+    scrim: i,
+    close: w
+  } = e;
+  let b = null;
+  function T(n, { callFailed: p = null } = {}) {
+    if (n != null && n.id && !p) {
+      m(n.id, { fresh: !0 }).then((a) => {
+        a || x(n, { callFailed: p });
+      });
+      return;
+    }
+    x(n, { callFailed: p });
+  }
+  function x(n, { callFailed: p = null } = {}) {
+    var r;
+    const a = n != null && n.id ? String(n.id).slice(0, 8) : null, s = (r = n == null ? void 0 : n.estimate) != null && r.label ? String(n.estimate.label) : null, u = p ? `<p class="eta">${v(p)} Your report is filed, and the team will reply in the chat.</p>` : "";
+    i.querySelector(".panel").innerHTML = `
+      <div class="done">
+        <div class="tick">${F}</div>
+        <h3>Thanks — that's on its way.</h3>
+        <p>${a ? `Filed as <code>${v(a)}</code>.` : "The team has what they need to reproduce it."}</p>
+        ${u}
+        ${s ? `<p class="eta">Reports like this usually take <strong>${v(s)}</strong>. We'll let you know when it moves.</p>` : ""}
+      </div>`, setTimeout(w, u ? 6e3 : s ? 4e3 : 2e3);
+  }
+  async function g() {
+    const n = i.querySelector(".panel");
+    clearTimeout(l), b = null, n.classList.remove("is-chat"), n.innerHTML = `
+      ${le({ title: "Your reports", sub: "Where each one has got to.", theme: e.themeLabel() })}
+      <div class="history" aria-busy="true">${Ke(3)}</div>`, n.querySelector('[data-act="close"]').addEventListener("click", w);
+    let p = [];
+    try {
+      ({ reports: p } = await t.myReports());
+    } catch {
+      const s = n.querySelector(".history");
+      s && (s.innerHTML = re("Couldn't load your reports just now.", G));
+      return;
+    }
+    const a = n.querySelector(".history");
+    if (a) {
+      a.removeAttribute("aria-busy"), a.innerHTML = p.length ? p.map((s, u) => `
+        <button class="row" type="button" data-report="${v(s.id)}" style="animation-delay:${Math.min(u, 8) * 30}ms">
+          <span class="row-ico" aria-hidden="true">${De}</span>
+          <span class="who">
+            <span class="ttl">${v(s.title)}</span>
+            <span class="sub">${v(s.reference)} · ${v(ne(s.createdAt))}${ft(s)}</span>
+          </span>
+          <span class="pill ${v(String(s.status).toLowerCase())}">${v(ie(s.status))}</span>
+          <span class="chev" aria-hidden="true">${We}</span>
+        </button>`).join("") : re("You haven't reported anything yet.", Ye);
+      for (const s of a.querySelectorAll("[data-report]"))
+        s.addEventListener("click", () => m(s.dataset.report));
+    }
+  }
+  async function m(n, { fresh: p = !1 } = {}) {
+    var f;
+    const a = i.querySelector(".panel");
+    clearTimeout(l), a.classList.add("is-chat"), a.innerHTML = `
+      ${le({
+      back: !0,
+      title: p ? "Looking into it" : "Your report",
+      sub: p ? "It may ask you a question here." : "Updates, and a way to reply.",
+      theme: e.themeLabel()
+    })}
+      <div class="history chatting" aria-busy="true"><div class="thread">${Ue()}</div></div>`, a.querySelector('[data-act="close"]').addEventListener("click", w), a.querySelector('[data-act="back"]').addEventListener("click", g);
+    let s = null;
+    try {
+      s = await t.myReport(n);
+    } catch {
+      s = null;
+    }
+    const u = a.querySelector(".history");
+    if (!u || !a.querySelector('[data-act="back"]')) return !1;
+    if (!s)
+      return p ? (a.classList.remove("is-chat"), !1) : (u.removeAttribute("aria-busy"), u.innerHTML = re("Couldn't load that report just now.", G), !1);
+    b = n, t.markReportRead(n);
+    const r = ue(s.timeline);
+    u.classList.add("chatting"), u.removeAttribute("aria-busy"), u.innerHTML = `
+      <div class="report-head">
+        <span class="ttl">${v(s.title)}</span>
+        <span class="sub">${v(s.reference)} · ${v(s.project || "")}</span>
+        <span class="pill ${v(String(s.status).toLowerCase())}">${v(ie(s.status))}</span>
+        ${(f = s.estimate) != null && f.label ? `<span class="eta-line">Usually takes ${v(String(s.estimate.label))}</span>` : ""}
+      </div>
+      <div class="thread" role="log" aria-live="polite" aria-label="Conversation">${r}</div>`;
+    const o = u.querySelector(".thread");
+    return se.set(o, r), _(o), L(u, s), y(u, s), s.canReply && bt(e, u, o, n), d(u, s, n), _(o), !0;
+  }
+  let l = null;
+  function d(n, p, a) {
+    var h, z, R;
+    clearTimeout(l);
+    const s = p.assistant, u = n.querySelector(".thread");
+    let r = n.querySelector(".assistant");
+    if (!s) {
+      r == null || r.remove(), (h = u == null ? void 0 : u.querySelector(".typing-row")) == null || h.remove();
+      return;
+    }
+    const o = (r == null ? void 0 : r.dataset.phase) || null;
+    r || (r = document.createElement("div"), r.setAttribute("role", "status"), r.setAttribute("aria-live", "polite"), (z = n.querySelector(".report-head")) == null || z.after(r)), r.className = `assistant ${v(s.phase)}`, r.dataset.phase = s.phase;
+    const f = s.steps || [], $ = f.filter((H) => H.state === "done").length, A = f.some((H) => H.state === "active") ? 0.5 : 0, j = f.length ? Math.round(($ + A) / f.length * 100) : 0, B = `
+      <div class="as-body${o && o !== s.phase ? " entering" : ""}">
+        <div class="as-top">
+          <span class="as-orb${s.phase === "calling" || s.phase === "resolved" ? "" : " orb"}" aria-hidden="true">${s.phase === "calling" ? ae : s.phase === "resolved" ? F : ""}</span>
+          <div class="as-text">
+            <div class="as-title">${v(s.title)}</div>
+            <div class="as-detail">${v(s.detail)}</div>
+          </div>
+        </div>
+      </div>
+      ${f.length ? `
+      <div class="as-progress" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${j}"><i style="width:${j}%"></i></div>
+      <ol class="as-steps">${f.map((H) => `<li class="${v(H.state)}"${H.state === "active" ? ' aria-current="step"' : ""}><span class="dot"></span><span class="lbl">${v(H.label)}</span></li>`).join("")}</ol>` : ""}`, N = JSON.stringify([s.phase, s.title, s.detail, f]);
+    if (r.dataset.key !== N) {
+      const H = r.querySelector(".as-progress i"), D = H == null ? void 0 : H.style.width;
+      r.innerHTML = B, r.dataset.key = N;
+      const O = r.querySelector(".as-progress i");
+      O && D && (O.style.width = D, requestAnimationFrame(() => {
+        O.style.width = `${j}%`;
+      }));
+    }
+    if (u) {
+      const H = pe(u), D = u.querySelector(".typing-row");
+      s.phase !== "analyzing" ? D == null || D.remove() : (!D || D !== u.lastElementChild) && (D == null || D.remove(), u.insertAdjacentHTML("beforeend", ut()), H && _(u));
+    }
+    s.phase === "analyzing" ? l = setTimeout(() => S(a), 3e3) : s.phase === "calling" ? l = setTimeout(() => S(a), 1e4) : s.phase === "needs_info" && o !== "needs_info" && ((R = n.querySelector(".composer textarea")) == null || R.focus());
+  }
+  function L(n, p) {
+    var s, u;
+    if ((s = n.querySelector(".fix-verification")) == null || s.remove(), !p.resolvedAt || !["RESOLVED", "CLOSED"].includes(p.status)) return;
+    const a = document.createElement("div");
+    a.className = "fix-verification", p.verification ? a.textContent = p.verification === "CONFIRMED" ? "You confirmed that this fix works." : "Your feedback was recorded." : (a.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>', a.querySelectorAll("[data-result]").forEach((r) => {
+      r.onclick = async () => {
+        a.querySelectorAll("button").forEach((o) => {
+          o.disabled = !0;
+        });
+        try {
+          await t.verifyFix(p.id, { result: r.dataset.result, resolvedAt: p.resolvedAt, note: a.querySelector("textarea").value }), await m(p.id);
+        } catch (o) {
+          a.querySelector(".feedback-status").textContent = o.message, a.querySelectorAll("button").forEach((f) => {
+            f.disabled = !1;
+          });
+        }
+      };
+    })), (u = n.querySelector(".report-head")) == null || u.after(a);
+  }
+  function y(n, p) {
+    var u;
+    let a = n.querySelector(".fix-rating");
+    if (!["RESOLVED", "CLOSED"].includes(p.status) || !p.ratingAsked) {
+      a == null || a.remove();
+      return;
+    }
+    a && a.dataset.key === he(p.rating) || (a || (a = document.createElement("div"), a.className = "fix-rating", (u = n.querySelector(".fix-verification") || n.querySelector(".report-head")) == null || u.after(a)), k(a, p, p.rating || null));
+  }
+  function k(n, p, a, { justRated: s = !1 } = {}) {
+    var N;
+    n.dataset.key = he(a);
+    const u = a != null && a.current ? a.score : 0, r = a ? a.current ? s ? "Thanks — the team will see that." : `You rated this ${a.score} out of 5.` : `You rated an earlier fix ${a.score} out of 5. How did this one go?` : "How did we do?", o = s && (a == null ? void 0 : a.current) && !a.comment;
+    n.innerHTML = `
+      <p class="fr-q">${v(r)}</p>
+      <div class="stars" role="group" aria-label="Rate how this was handled, 1 to 5">${[1, 2, 3, 4, 5].map((h) => `
+        <button type="button" data-score="${h}" aria-pressed="${h === u}" aria-label="${h} out of 5${h === 1 ? ", poor" : h === 5 ? ", great" : ""}" class="${h <= u ? "on" : ""}">${me}</button>`).join("")}
+      </div>
+      ${a != null && a.current && a.comment ? `<p class="fr-said">“${v(a.comment)}”</p>` : ""}
+      ${o ? `
+      <div class="fr-note">
+        <textarea maxlength="2000" aria-label="Add a note to your rating" placeholder="${a.score <= 2 ? "What went wrong? (optional)" : "Anything to add? (optional)"}"></textarea>
+        <button type="button" data-act="rating-note">Add note</button>
+      </div>` : ""}
+      ${a ? "" : '<p class="fr-hint">1 is poor, 5 is great.</p>'}
+      <p class="feedback-status" role="status"></p>`;
+    const f = [...n.querySelectorAll("[data-score]")], $ = (h) => f.forEach((z) => z.classList.toggle("on", Number(z.dataset.score) <= h)), A = (h) => n.querySelectorAll("button, textarea").forEach((z) => {
+      z.disabled = h;
+    }), j = n.querySelector(".feedback-status");
+    async function B(h, z) {
+      var R;
+      A(!0), j.textContent = "";
+      try {
+        const H = await t.rate(p.id, { score: h, comment: z });
+        k(n, p, H, { justRated: !0 }), (R = n.querySelector(".fr-note textarea")) == null || R.focus();
+      } catch (H) {
+        j.textContent = H.message, A(!1), $(u);
+      }
+    }
+    for (const h of f) {
+      const z = Number(h.dataset.score);
+      h.addEventListener("mouseenter", () => $(z)), h.addEventListener("focus", () => $(z)), h.addEventListener("blur", () => $(u)), h.addEventListener("click", () => B(z));
+    }
+    n.querySelector(".stars").addEventListener("mouseleave", () => $(u)), (N = n.querySelector('[data-act="rating-note"]')) == null || N.addEventListener("click", () => {
+      var z;
+      const h = n.querySelector(".fr-note textarea").value.trim();
+      if (!h) {
+        (z = n.querySelector(".fr-note")) == null || z.remove();
+        return;
+      }
+      B(a.score, h);
+    });
+  }
+  async function S(n) {
+    const p = i.querySelector(".history.chatting"), a = p == null ? void 0 : p.querySelector(".thread");
+    if (!a || b !== n) return;
+    let s = null;
+    try {
+      s = await t.myReport(n);
+    } catch {
+    }
+    if (e.closed || !s || b !== n) return;
+    L(p, s), y(p, s);
+    const u = pe(a), r = ue(s.timeline);
+    se.get(a) !== r && (a.innerHTML = r, se.set(a, r)), d(p, s, n), u && _(a);
+    const o = p.querySelector(".report-head .pill");
+    o && (o.className = `pill ${String(s.status).toLowerCase()}`, o.textContent = ie(s.status));
+  }
+  const q = t.on("update", (n) => {
+    !b || (n == null ? void 0 : n.bugId) !== b || (t.markReportRead(b), S(b));
+  });
+  e.onDestroy(() => {
+    q(), clearTimeout(l);
+  }), (E = i.querySelector('[data-act="history"]')) == null || E.addEventListener("click", g), e.succeed = T, e.refreshThread = S, e.openReportId = () => b;
+}
+function xt({
+  root: e,
+  host: t,
+  dock: i,
+  client: w,
+  onClose: b,
+  preloadCall: T = () => {
+  },
+  themeControls: x = null
+}) {
+  mt(e);
+  const g = w.config, m = () => (x == null ? void 0 : x.label()) || "", l = document.createElement("div");
+  l.className = `scrim ${i.classList.contains("at-left") ? "at-left" : "at-right"} ${i.classList.contains("at-top") ? "at-top" : "at-bottom"}`, l.style.setProperty("--bc-dock-h", `${Math.round(i.getBoundingClientRect().height)}px`), l.innerHTML = `
+    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
+      ${le({
+    id: "bc-h",
+    // Not "Tell us what went wrong": that is the first field's own label,
+    // a few pixels below. The header names the errand the launcher named.
+    title: "Report a bug",
+    sub: "We attach the page details for you.",
+    theme: m()
+  })}
+      <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>
+        ${tt(g)}
+      </div>
+      <div class="foot">
+        <span class="note" aria-live="polite"></span>
+        ${w.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>${ae}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">${Pe}</a>
+      </div>
+    </div>`;
+  const d = (u) => l.querySelector(u), L = d(".slot"), y = [], k = {
+    client: w,
+    cfg: g,
+    root: e,
+    host: t,
+    dock: i,
+    scrim: l,
+    $: d,
+    titleInput: d("#bc-title"),
+    descInput: d("#bc-desc"),
+    compose: d(".compose"),
+    sendBtn: d('[data-act="send"]'),
+    callBtn: d('[data-act="call"]'),
+    historyBtn: d('[data-act="history"]'),
+    note: d(".foot .note"),
+    whoami: d(".whoami"),
+    refsBox: d(".refs"),
+    notices: d(".notices"),
+    known: d(".known"),
+    picks: d(".picks"),
+    // A report or a call is on its way. Escape and a click outside wait for it.
+    sending: !1,
+    closed: !1,
+    say: s,
+    close: p,
+    preloadCall: T,
+    themeLabel: m,
+    onDestroy: (u) => {
+      y.push(u);
+    },
+    // 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
+  };
+  at(k), nt(k), rt(k), it(k), st(k), lt(k), ct(k), gt(k);
+  const S = document.activeElement, q = document.documentElement.style, E = q.overflow;
+  q.overflow = "hidden";
+  function n() {
+    k.closed || (y.forEach((u) => u()), k.closed = !0, q.overflow = E, document.removeEventListener("keydown", a, !0), l.remove(), i.hidden = !1, t.style.opacity = "", b == null || b());
+  }
+  function p() {
+    var u;
+    if (!k.closed) {
+      l.classList.add("closing"), setTimeout(n, 160);
+      try {
+        (u = S == null ? void 0 : S.focus) == null || u.call(S);
+      } catch {
+      }
+    }
+  }
+  function a(u) {
+    if (u.key === "Escape") {
+      if (u.stopPropagation(), k.isRecording()) {
+        k.stopRecording({ keep: !1 });
+        return;
+      }
+      k.sending || p();
+      return;
+    }
+    if (u.key !== "Tab" || k.isRecording()) return;
+    const r = [...l.querySelectorAll(
+      "button:not(:disabled), input:not([hidden]), textarea, select, [href]"
+    )].filter((A) => A.offsetParent !== null || A === document.activeElement);
+    if (!r.length) return;
+    const o = r[0], f = r[r.length - 1], $ = l.getRootNode().activeElement;
+    u.shiftKey && $ === o ? (u.preventDefault(), f.focus()) : !u.shiftKey && $ === f && (u.preventDefault(), o.focus());
+  }
+  document.addEventListener("keydown", a, !0), l.addEventListener("click", (u) => {
+    u.target === l && !k.sending && p();
+  }), d('[data-act="close"]').addEventListener("click", p), l.addEventListener("click", (u) => {
+    const r = u.target.closest('[data-act="theme"]');
+    if (!r || !x) return;
+    const o = x.cycle();
+    r.title = `Theme: ${o.label}`, r.setAttribute("aria-label", `Theme: ${o.label}. Change theme`);
+  });
+  function s(u, r = "err") {
+    L.innerHTML = u ? `<div class="msg ${r}">${r === "err" ? G : ""}<span>${v(u)}</span></div>` : "";
+  }
+  return e.appendChild(l), k.refreshSendState(), k.titleInput.focus(), { destroy: n, close: p };
+}
+function mt(e) {
+  if (e.querySelector("style[data-panel]")) return;
+  const t = document.createElement("style");
+  t.setAttribute("data-panel", ""), t.textContent = Fe;
+  const i = e.querySelector("style");
+  i ? i.after(t) : e.prepend(t);
+}
+export {
+  xt as openPanel
+};
+//# sourceMappingURL=bugcatch-panel.es.js.map