@sphoro/bugcatch-web-sdk 0.17.0 → 0.18.0

package/dist/bugcatch-panel.umd.js

@@ -0,0 +1,1240 @@
+(function(){"use strict";const qe='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5a7.5 7 0 0 1 7.5-7h1a7.5 7 0 0 1 0 14H9l-4.2 2.6a.5.5 0 0 1-.76-.5l.5-3.1A7 7 0 0 1 4 11.5z"/><path d="M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01" stroke-width="2.6"/></svg>',_='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.2M12 16.3h.01"/></svg>',J='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>',O='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.8l4.6 4.4L19 7"/></svg>',ue='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5.5M12 7.7h.01"/></svg>',He='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 4.2a2 2 0 0 1 3.4 0l7.6 13.1a2 2 0 0 1-1.7 3H4.4a2 2 0 0 1-1.7-3z"/><path d="M12 9.5v4.2M12 17h.01"/></svg>',Ie='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2a1 1 0 0 0 .83-.45l.94-1.4A1 1 0 0 1 9.3 4.7h5.4a1 1 0 0 1 .83.45l.94 1.4a1 1 0 0 0 .83.45h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z"/><circle cx="12" cy="13" r="3.4"/></svg>',Re='<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>',he='<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>',be='<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>',fe='<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>',Ae='<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>',De='<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>',ee='<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>',Ve='<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>',F='<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5c.5 4.6 2.9 7 7.5 7.5v.1c-4.6.5-7 2.9-7.5 7.5h-.1c-.5-4.6-2.9-7-7.5-7.5V10c4.6-.5 7-2.9 7.5-7.5z"/><path d="M18.6 15.2c.2 1.9 1.2 2.9 3.1 3.1v.1c-1.9.2-2.9 1.2-3.1 3.1h-.1c-.2-1.9-1.2-2.9-3.1-3.1v-.1c1.9-.2 2.9-1.2 3.1-3.1z" opacity=".7"/></svg>',je='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 6l6 6-6 6"/></svg>',Oe='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5l2.6-7.2A1.5 1.5 0 0 1 7.5 5.3h9a1.5 1.5 0 0 1 1.4 1L20.5 13.5V18a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18z"/><path d="M3.5 13.5h4.8l1.2 2.2h5l1.2-2.2h4.8"/></svg>',Be='<svg class="bc-brand" viewBox="0 0 254 60" fill="none" role="img" aria-label="sphoro BugCatch"><g fill="currentColor"><path transform="translate(0.00 40.00) scale(0.04000 -0.04000)" d="M276.00 -14.00Q179.00 -14.00 117.00 28.00Q55.00 70.00 42.00 148.00L158.00 178.00Q165.00 143.00 181.50 123.00Q198.00 103.00 222.50 94.50Q247.00 86.00 276.00 86.00Q320.00 86.00 341.00 101.50Q362.00 117.00 362.00 140.00Q362.00 163.00 342.00 175.50Q322.00 188.00 278.00 196.00L250.00 201.00Q198.00 211.00 155.00 228.50Q112.00 246.00 86.00 277.00Q60.00 308.00 60.00 357.00Q60.00 431.00 114.00 470.50Q168.00 510.00 256.00 510.00Q339.00 510.00 394.00 473.00Q449.00 436.00 466.00 376.00L349.00 340.00Q341.00 378.00 316.50 394.00Q292.00 410.00 256.00 410.00Q220.00 410.00 201.00 397.50Q182.00 385.00 182.00 363.00Q182.00 339.00 202.00 327.50Q222.00 316.00 256.00 310.00L284.00 305.00Q340.00 295.00 385.50 278.50Q431.00 262.00 457.50 231.50Q484.00 201.00 484.00 149.00Q484.00 71.00 427.50 28.50Q371.00 -14.00 276.00 -14.00Z"/><path transform="translate(19.56 40.00) scale(0.04000 -0.04000)" d="M70.00 -200.00V496.00H194.00V436.00H212.00Q229.00 465.00 265.00 487.50Q301.00 510.00 368.00 510.00Q428.00 510.00 479.00 480.50Q530.00 451.00 561.00 394.00Q592.00 337.00 592.00 256.00V240.00Q592.00 159.00 561.00 102.00Q530.00 45.00 479.00 15.50Q428.00 -14.00 368.00 -14.00Q323.00 -14.00 292.50 -3.50Q262.00 7.00 243.50 23.50Q225.00 40.00 214.00 57.00H196.00V-200.00ZM330.00 96.00Q389.00 96.00 427.50 133.50Q466.00 171.00 466.00 243.00V253.00Q466.00 325.00 427.00 362.50Q388.00 400.00 330.00 400.00Q272.00 400.00 233.00 362.50Q194.00 325.00 194.00 253.00V243.00Q194.00 171.00 233.00 133.50Q272.00 96.00 330.00 96.00Z"/><path transform="translate(43.68 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V700.00H196.00V435.00H214.00Q222.00 451.00 239.00 467.00Q256.00 483.00 284.50 493.50Q313.00 504.00 357.00 504.00Q415.00 504.00 458.50 477.50Q502.00 451.00 526.00 404.50Q550.00 358.00 550.00 296.00V0.00H424.00V286.00Q424.00 342.00 396.50 370.00Q369.00 398.00 318.00 398.00Q260.00 398.00 228.00 359.50Q196.00 321.00 196.00 252.00V0.00Z"/><path transform="translate(66.92 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/><path transform="translate(90.00 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V496.00H194.00V440.00H212.00Q223.00 470.00 248.50 484.00Q274.00 498.00 308.00 498.00H368.00V386.00H306.00Q258.00 386.00 227.00 360.50Q196.00 335.00 196.00 282.00V0.00Z"/><path transform="translate(104.44 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/></g><rect x="139.52" y="16" width="1.6" height="26" rx="0.8" fill="var(--bc-brand-mark, #5647ee)" opacity="0.4"/><g fill="var(--bc-brand-mark, #5647ee)"><path transform="translate(154.52 35.00) scale(0.01400 -0.01400)" d="M46.35 0.00V105.85H139.75V594.15H46.35V700.00H404.08Q467.38 700.00 514.79 678.41Q562.20 656.83 588.70 617.33Q615.20 577.83 615.20 523.35V513.70Q615.20 465.52 597.03 434.76Q578.85 404.00 553.91 387.24Q528.98 370.48 506.28 363.30V346.35Q528.98 340.35 555.24 323.50Q581.50 306.65 600.00 275.48Q618.50 244.30 618.50 194.48V184.48Q618.50 126.65 591.41 85.24Q564.33 43.83 516.83 21.91Q469.33 0.00 406.85 0.00ZM259.85 109.15H392.60Q441.20 109.15 469.80 132.60Q498.40 156.05 498.40 198.55V208.20Q498.40 250.70 470.21 274.15Q442.02 297.60 392.60 297.60H259.85ZM259.85 406.75H391.65Q437.55 406.75 466.32 430.11Q495.10 453.48 495.10 493.80V503.80Q495.10 544.95 466.74 567.90Q438.37 590.85 391.65 590.85H259.85Z"/><path transform="translate(167.00 35.00) scale(0.01400 -0.01400)" d="M335.30 -14.00Q251.22 -14.00 190.60 16.63Q129.97 47.25 97.56 104.96Q65.15 162.68 65.15 243.03V700.00H185.25V239.73Q185.25 170.48 224.03 131.99Q262.80 93.50 335.30 93.50Q407.80 93.50 446.57 131.99Q485.35 170.48 485.35 239.73V700.00H605.45V243.03Q605.45 162.68 573.13 104.96Q540.80 47.25 480.09 16.63Q419.38 -14.00 335.30 -14.00Z"/><path transform="translate(179.60 35.00) scale(0.01400 -0.01400)" d="M311.85 -14.00Q238.45 -14.00 179.69 18.50Q120.92 51.00 86.69 113.67Q52.45 176.35 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.23 645.59Q598.33 577.17 598.33 460.87V456.70H479.87V464.52Q479.87 504.67 463.76 536.86Q447.65 569.05 414.99 587.77Q382.32 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 138.89Q257.63 91.85 334.00 91.85Q410.02 91.85 445.12 132.83Q480.22 173.80 480.22 237.92V249.67H302.85V351.88H598.33V0.00H487.52V69.10H470.57Q462.70 50.87 446.06 31.44Q429.42 12.00 397.64 -1.00Q365.85 -14.00 311.85 -14.00Z"/><path transform="translate(192.05 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(204.25 35.00) scale(0.01400 -0.01400)" d="M19.75 0.00 211.62 700.00H421.33L613.20 0.00H489.27L447.42 159.60H185.53L143.68 0.00ZM214.25 270.40H418.70L324.95 624.87H308.00Z"/><path transform="translate(216.31 35.00) scale(0.01400 -0.01400)" d="M233.95 0.00V590.85H24.70V700.00H563.30V590.85H354.05V0.00Z"/><path transform="translate(227.75 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(239.95 35.00) scale(0.01400 -0.01400)" d="M69.50 0.00V700.00H189.60V405.58H466.40V700.00H586.50V0.00H466.40V296.42H189.60V0.00Z"/></g></svg>',Ne=`
+@keyframes bc-fade-in { from { opacity: 0 } to { opacity: 1 } }
+@keyframes bc-fade-out { to { opacity: 0 } }
+@keyframes bc-panel-in { from { opacity: 0; transform: translateY(14px) scale(.965) } to { opacity: 1; transform: none } }
+@keyframes bc-panel-out { to { opacity: 0; transform: translateY(10px) scale(.975) } }
+@keyframes bc-sheet-in { from { transform: translateY(100%) } to { transform: none } }
+@keyframes bc-sheet-out { to { transform: translateY(100%) } }
+@keyframes bc-rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
+@keyframes bc-pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .3; transform: scale(.78) } }
+@keyframes bc-spin { to { transform: rotate(360deg) } }
+@keyframes bc-pop { 0% { transform: scale(.5); opacity: 0 } 65% { transform: scale(1.1) } 100% { transform: scale(1); opacity: 1 } }
+@keyframes bc-nudge { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
+@keyframes bc-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-3px); opacity: 1 } }
+@keyframes bc-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
+
+/* ---------- scrim + panel ---------- */
+.scrim {
+  position: fixed; inset: 0; z-index: 2147483001;
+  background: rgba(10,12,16,.32);
+  animation: bc-fade-in 200ms ease both;
+}
+.scrim.closing { animation: bc-fade-out 170ms ease both; }
+
+/* The panel belongs to the launcher, so it opens out of that corner rather
+   than in the middle of the screen. --bc-dock-h is measured at open time
+   because the dock's height depends on whether the launcher is showing.
+   A column: the header and footer stay put and only the middle scrolls. */
+.panel {
+  position: fixed;
+  display: flex; flex-direction: column;
+  width: calc(100vw - 40px); max-width: 420px;
+  max-height: calc(100vh - var(--bc-dock-h, 84px) - 52px);
+  overflow: hidden;
+  background: var(--bc-bg); color: var(--bc-fg);
+  border-radius: var(--bc-r-xl); box-shadow: var(--bc-shadow);
+  border: 1px solid color-mix(in srgb, var(--bc-border) 70%, transparent);
+  animation: bc-panel-in 340ms var(--bc-ease) both;
+}
+/* A conversation wants a height of its own, so the thread fills the panel
+   rather than shrinking to its first two messages. */
+.panel.is-chat { height: 640px; }
+.scrim.at-right .panel { right: 20px; transform-origin: bottom right; }
+.scrim.at-left .panel { left: 20px; transform-origin: bottom left; }
+.scrim.at-bottom .panel { bottom: calc(20px + var(--bc-dock-h, 84px) + 12px); }
+.scrim.at-top .panel { top: calc(20px + var(--bc-dock-h, 84px) + 12px); transform-origin: top right; }
+.scrim.closing .panel { animation: bc-panel-out 170ms ease both; }
+
+/* ---------- header ---------- */
+.head {
+  flex: none; position: relative;
+  display: flex; align-items: center; gap: 12px;
+  padding: 16px 14px 14px var(--bc-pad);
+  background: linear-gradient(180deg, var(--bc-accent-soft), var(--bc-bg));
+  border-bottom: 1px solid var(--bc-border);
+}
+.head .mark, .avatar {
+  flex: none; display: grid; place-items: center; position: relative;
+  width: 38px; height: 38px; border-radius: 50%;
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+  color: var(--bc-on-accent); font-size: 19px;
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
+}
+/* The little "online" dot says someone — or something — is on the other end. */
+.head .mark::after {
+  content: ''; position: absolute; right: -1px; bottom: -1px;
+  width: 11px; height: 11px; border-radius: 50%;
+  background: #22c55e; border: 2px solid var(--bc-bg);
+}
+.head .titles { flex: 1; min-width: 0; }
+.head h2 {
+  margin: 0 0 2px; font-size: var(--bc-fs-lg); font-weight: 680; letter-spacing: -.02em; line-height: 1.25;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.head p { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted); }
+.icon-btn {
+  flex: none; display: grid; place-items: center;
+  width: 32px; height: 32px; padding: 0; font-size: 16px;
+  border: none; border-radius: 10px; background: none; color: var(--bc-muted);
+  cursor: pointer; transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
+}
+.icon-btn:hover { background: color-mix(in srgb, var(--bc-fg) 7%, transparent); color: var(--bc-fg); }
+.icon-btn:active { transform: scale(.92); }
+.icon-btn.back { margin: 0 -6px 0 -8px; }
+
+.body {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  padding: 16px var(--bc-pad) 6px;
+}
+
+label { display: block; font-size: var(--bc-fs-sm); font-weight: 620; color: var(--bc-fg); margin-bottom: 7px; }
+label .opt { font-weight: 450; color: var(--bc-faint); }
+input[type=text], input[type=email], textarea {
+  width: 100%; padding: 11px 13px; font-size: var(--bc-fs-md); line-height: 1.45;
+  color: var(--bc-fg); background: var(--bc-elevated);
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  transition: border-color 160ms, box-shadow 160ms, background 160ms;
+}
+input[type=text]::placeholder, input[type=email]::placeholder, textarea::placeholder { color: var(--bc-faint); }
+input[type=text]:hover, input[type=email]:hover, textarea:hover { border-color: color-mix(in srgb, var(--bc-fg) 18%, var(--bc-border)); }
+input[type=text]:focus, input[type=email]:focus, textarea:focus {
+  outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring);
+}
+input.invalid, input.invalid:focus, textarea.invalid {
+  border-color: var(--bc-danger); animation: bc-nudge 240ms ease;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-danger) 16%, transparent);
+}
+.field-err {
+  display: flex; align-items: center; gap: 6px;
+  margin: 7px 0 0; font-size: var(--bc-fs-xs); font-weight: 550; color: var(--bc-danger);
+  animation: bc-rise 200ms var(--bc-ease) both;
+}
+.field-err svg { font-size: 13px; flex: none; }
+textarea { min-height: 88px; resize: vertical; }
+.field { margin-bottom: 16px; }
+.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.field-head .count { font-size: var(--bc-fs-xs); color: var(--bc-faint); font-variant-numeric: tabular-nums; }
+
+/* The draft line: a quiet note, or a card offering to pick up where they left off. */
+.compose > .note { font-size: var(--bc-fs-xs); color: var(--bc-faint); margin: -4px 0 10px; }
+.compose > .note:empty { display: none; }
+.compose > .note:has(button) {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
+  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--bc-r-md);
+  background: var(--bc-accent-soft); border: 1px solid var(--bc-accent-line);
+  font-size: var(--bc-fs-sm); color: var(--bc-fg);
+}
+.compose > .note button {
+  padding: 5px 11px; font: inherit; font-size: var(--bc-fs-xs); font-weight: 620;
+  border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-accent); background: var(--bc-accent); color: var(--bc-on-accent);
+}
+.compose > .note button[data-discard] { background: transparent; color: var(--bc-muted); border-color: var(--bc-border); }
+
+/* ---------- what is already known ----------
+   A help surface in front of the form, not a step in it. Everything here is
+   dismissible by ignoring it: the reporter can read what is already known and
+   leave, tap "this is happening to me too" and leave, or type straight past all
+   of it and file the report they came to file. Nothing is ever in their way,
+   because a reporter who feels handled rather than helped stops reporting. */
+.known { margin-bottom: 16px; }
+.known .known-h {
+  margin: 0 0 8px; font-size: 11px; font-weight: 680; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--bc-faint);
+}
+.known .issue {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 12px; margin-bottom: 6px;
+  background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  animation: bc-rise 240ms var(--bc-ease) both;
+}
+.known .issue.is-joined { border-color: color-mix(in srgb, var(--bc-ok) 55%, var(--bc-border)); }
+.known .issue .who { flex: 1; min-width: 0; }
+.known .issue .t {
+  display: block; font-size: 13px; font-weight: 620; line-height: 1.4;
+  color: var(--bc-fg); overflow-wrap: anywhere;
+}
+.known .issue .meta {
+  display: block; margin-top: 3px; font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
+}
+.known .issue .join {
+  flex: none; padding: 7px 12px; font-size: 12px; font-weight: 620;
+  color: var(--bc-accent); background: var(--bc-bg);
+  border: 1px solid var(--bc-accent-line); border-radius: 999px; cursor: pointer;
+  transition: background 160ms, border-color 160ms;
+}
+.known .issue .join:hover { border-color: var(--bc-accent); background: var(--bc-accent-soft); }
+.known .issue .join:disabled { color: var(--bc-ok); border-color: var(--bc-border); background: var(--bc-bg); cursor: default; opacity: 1; }
+.known .ask { display: flex; gap: 8px; margin: 2px 0 8px; }
+.known .ask input { flex: 1; min-width: 0; }
+.known .ask button { flex: none; }
+.known .err { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-danger); }
+
+/* ---------- questions the assistant answers by itself ---------- */
+.picks { margin-bottom: 16px; }
+.picks .picks-h {
+  margin: 0 0 8px; font-size: 11px; font-weight: 680; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--bc-faint);
+}
+.picks .picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
+.picks .pick {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
+  padding: 9px 11px; text-align: left; cursor: pointer; font: inherit;
+  color: var(--bc-fg); background: var(--bc-subtle);
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  transition: background 160ms, border-color 160ms, transform 160ms;
+  animation: bc-rise 240ms var(--bc-ease) both;
+}
+.picks .pick:hover { border-color: var(--bc-accent-line); background: var(--bc-accent-soft); }
+.picks .pick[aria-pressed="true"] { border-color: var(--bc-accent); background: var(--bc-accent-soft); }
+.picks .pick .t { font-size: 13px; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
+.picks .pick .h { font-size: var(--bc-fs-xs); line-height: 1.4; color: var(--bc-muted); }
+.picks .picks-note {
+  display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0;
+  font-size: 12px; line-height: 1.45; color: var(--bc-muted);
+}
+.picks .picks-note svg { flex: none; margin-top: 2px; color: var(--bc-ok); }
+
+/* ---------- who is reporting ----------
+   A strip above the form rather than a screen in front of it: where signing in
+   is optional this is a line the reporter may ignore, and it should read as
+   one. Where it is required the composer below is not rendered at all and this
+   strip is the whole panel. */
+.whoami {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
+  margin-bottom: 16px; padding: 10px 12px;
+  font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
+  background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+}
+.whoami.asking { display: block; padding: 14px; }
+.whoami .who { flex: 1; min-width: 0; }
+.whoami .who strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
+.link {
+  padding: 0; font: inherit; font-size: var(--bc-fs-sm); font-weight: 620; line-height: 1.45;
+  color: var(--bc-accent); background: none; border: none; cursor: pointer; border-radius: 4px;
+}
+.link:hover { text-decoration: underline; text-underline-offset: 2px; }
+.link:disabled { color: var(--bc-faint); cursor: default; text-decoration: none; }
+.whoami .why { margin: 0 0 10px; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
+.whoami .why strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
+.whoami .row { display: flex; gap: 8px; align-items: stretch; }
+.whoami .row input { flex: 1; min-width: 0; }
+.whoami .row button { flex: none; }
+.whoami .after { display: flex; gap: 14px; align-items: center; margin-top: 9px; }
+.whoami .err { color: var(--bc-danger); }
+.whoami .code { letter-spacing: .28em; font-variant-numeric: tabular-nums; }
+
+/* ---------- which record is this about ----------
+   Drawn only after Send has been pressed and only when what they wrote did not
+   already answer it, so most people never see this at all. Presented as the
+   assistant asking one friendly follow-up, not as a form field that appeared. */
+.refs {
+  position: relative;
+  margin-bottom: 16px; padding: 14px;
+  font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
+  background: var(--bc-accent-soft);
+  border: 1px solid var(--bc-accent-line); border-radius: var(--bc-r-lg);
+  animation: bc-item-in 280ms var(--bc-ease) both;
+}
+.refs .ask-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
+.refs .ask-head .avatar { width: 28px; height: 28px; font-size: 14px; box-shadow: none; }
+.refs .ask-head strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--bc-fg); margin-bottom: 1px; }
+.refs .why { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
+.refs .row { display: flex; gap: 8px; align-items: stretch; }
+.refs .row input { flex: 1; min-width: 0; background: var(--bc-bg); }
+.refs select {
+  flex: none; max-width: 45%; padding: 10px 10px; font-size: 13px;
+  color: var(--bc-fg); background: var(--bc-bg);
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+}
+.refs select:focus { outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
+.refs .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
+.refs .chips button {
+  padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; cursor: pointer;
+  color: var(--bc-muted); background: var(--bc-bg); border: 1px solid var(--bc-border);
+  transition: background 160ms, color 160ms, border-color 160ms;
+}
+.refs .chips button[aria-pressed="true"] { color: var(--bc-on-accent); background: var(--bc-accent); border-color: var(--bc-accent); }
+.refs .hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-muted); }
+.refs .after { display: flex; gap: 12px; align-items: center; margin-top: 9px; }
+.refs .err { color: var(--bc-danger); font-weight: 550; }
+.refs .link { margin-top: 10px; font-size: 12px; color: var(--bc-muted); }
+.refs .link:hover { color: var(--bc-fg); }
+.refs .chips.cands button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 550; }
+/* "We read your ID" — under the description, while they type. */
+.ref-found {
+  display: flex; align-items: center; gap: 6px;
+  margin: -6px 0 14px; font-size: 12px; line-height: 1.45; color: var(--bc-muted);
+}
+.ref-found svg { width: 14px; height: 14px; flex: none; color: var(--bc-ok); }
+.ref-found b { font-weight: 600; color: var(--bc-fg); }
+
+/* ---------- severity ---------- */
+.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md); }
+.seg button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 8px 4px; font-size: var(--bc-fs-sm); font-weight: 550; line-height: 1;
+  color: var(--bc-muted); background: none; border: none; border-radius: 9px;
+  cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms;
+}
+.seg button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sev, var(--bc-faint)); opacity: .55; transition: opacity 180ms; }
+.seg button[data-prio="LOW"] { --sev: #94a3b8; }
+.seg button[data-prio="MEDIUM"] { --sev: #3b82f6; }
+.seg button[data-prio="HIGH"] { --sev: #f59e0b; }
+.seg button[data-prio="CRITICAL"] { --sev: #ef4444; }
+.seg button:hover { color: var(--bc-fg); }
+.seg button[aria-pressed=true] {
+  background: var(--bc-raised); color: var(--bc-fg); font-weight: 650;
+  box-shadow: 0 1px 3px rgba(10,12,16,.14), 0 0 0 1px color-mix(in srgb, var(--bc-border) 60%, transparent);
+}
+.seg button[aria-pressed=true]::before { opacity: 1; }
+.seg button:focus-visible { outline-offset: -2px; }
+
+/* ---------- attachments ---------- */
+.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
+.tool {
+  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+  padding: 12px 8px; font-size: 12px; font-weight: 600; line-height: 1;
+  color: var(--bc-fg); background: var(--bc-elevated);
+  border: 1px dashed color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); border-radius: var(--bc-r-md); cursor: pointer;
+  transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--bc-ease);
+}
+.tool svg { font-size: 19px; color: var(--bc-muted); transition: color 160ms; }
+.tool:hover:not(:disabled) { border-color: var(--bc-accent); border-style: solid; background: var(--bc-accent-soft); transform: translateY(-1px); }
+.tool:hover:not(:disabled) svg { color: var(--bc-accent); }
+.tool:active:not(:disabled) { transform: translateY(0) scale(.98); }
+.tool:disabled { opacity: .45; cursor: not-allowed; }
+.attach-hint { margin: 8px 0 0; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+
+.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.thumbs:empty { display: none; }
+.thumb {
+  position: relative; width: 76px; height: 76px; flex: none;
+  border-radius: var(--bc-r-md); overflow: hidden;
+  border: 1px solid var(--bc-border); background: var(--bc-subtle);
+  box-shadow: var(--bc-shadow-sm);
+  animation: bc-item-in 300ms var(--bc-ease) both;
+}
+.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.thumb .kind {
+  position: absolute; left: 4px; bottom: 4px;
+  display: inline-flex; align-items: center; gap: 3px;
+  padding: 2px 5px; border-radius: 5px;
+  background: rgba(10,12,16,.72); color: #fff; font-size: 9.5px; font-weight: 600; line-height: 1.3;
+}
+.thumb .drop {
+  position: absolute; top: 4px; right: 4px;
+  width: 20px; height: 20px; font-size: 11px; border-radius: 50%;
+  background: rgba(10,12,16,.7); color: #fff; border: none;
+  display: grid; place-items: center; cursor: pointer;
+  opacity: 0; transition: opacity 160ms, background 160ms;
+}
+.thumb:hover .drop, .thumb:focus-within .drop { opacity: 1; }
+.thumb .drop:hover { background: var(--bc-danger); }
+.thumb .veil {
+  position: absolute; inset: 0; display: grid; place-items: center; gap: 6px;
+  background: rgba(10,12,16,.62); color: #fff; font-size: 10.5px; font-weight: 600;
+  align-content: center;
+}
+.thumb .veil.err { background: color-mix(in srgb, var(--bc-danger) 82%, transparent); }
+.spinner {
+  width: 17px; height: 17px; border-radius: 50%;
+  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
+  animation: bc-spin 720ms linear infinite;
+}
+.bar { width: 46px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
+.bar i { display: block; height: 100%; width: 0; background: #fff; transition: width 180ms linear; }
+.veil button {
+  background: none; border: none; color: #fff; font-size: 14px; padding: 2px;
+  cursor: pointer; display: grid; place-items: center;
+}
+
+/* ---------- footer ---------- */
+.foot {
+  flex: none;
+  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
+  padding: 12px var(--bc-pad); border-top: 1px solid var(--bc-border);
+  background: var(--bc-bg);
+}
+.foot .spacer { flex: 1; }
+.foot .note { flex-basis: 100%; order: -1; font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+.foot .note:empty { display: none; }
+/* Quiet, but still legible: this sits in someone else's product, so it identifies
+   where the report goes without competing with their interface. Quiet is bought
+   with colour (--bc-brand-ink sits a step below body text) rather than with a
+   blanket opacity — the BUGCATCH half is only about 3px of cap height at this
+   size, and dimming it on top of that left it as a smudge in both themes. */
+.powered {
+  flex: none; display: flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 7px var(--bc-pad) 9px; font-size: 10.5px; color: var(--bc-faint);
+  background: var(--bc-subtle); border-top: 1px solid var(--bc-border);
+}
+.brand-credit { display: flex; align-items: center; transition: color 0.15s; border-radius: 4px; }
+.bc-brand { height: 16px; width: auto; display: block; color: var(--bc-brand-ink); }
+.brand-credit:hover .bc-brand { color: var(--bc-fg); }
+button.ghost, button.primary {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  height: 38px; padding: 0 15px; font: inherit; font-size: 13px; font-weight: 620; line-height: 1;
+  border-radius: 999px; cursor: pointer; white-space: nowrap;
+  transition: transform 160ms var(--bc-ease), filter 160ms, background 160ms, border-color 160ms, color 160ms, box-shadow 160ms;
+}
+button.ghost { background: var(--bc-bg); border: 1px solid var(--bc-border); color: var(--bc-fg); }
+button.ghost:hover:not(:disabled) { background: var(--bc-subtle); border-color: color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); }
+button.ghost svg, button.primary svg { font-size: 15px; }
+button.primary {
+  padding: 0 18px;
+  background: var(--bc-accent); border: 1px solid var(--bc-accent); color: var(--bc-on-accent);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
+}
+button.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
+button.primary:active:not(:disabled) { transform: none; }
+button:disabled { opacity: .5; cursor: not-allowed; }
+button.primary:disabled { box-shadow: none; }
+button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; width: 14px; height: 14px; }
+button.quiet {
+  padding: 0 4px; height: 38px; font: inherit; font-size: 13px; font-weight: 600;
+  border: none; background: none; color: var(--bc-muted); cursor: pointer; border-radius: 8px;
+}
+button.quiet:hover { color: var(--bc-accent); }
+
+/* ---------- your reports ---------- */
+.history {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  padding: 8px 12px 14px;
+}
+/* On the conversation screen the inner thread does the scrolling, so this
+   wrapper must not — two nested scrollers means the composer drifts out of
+   reach exactly when someone reaches for it. */
+.history.chatting {
+  overflow: hidden; display: flex; flex-direction: column; padding: 0;
+}
+.history .row {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 10px; border-bottom: 1px solid var(--bc-border);
+}
+.history .row:last-child { border-bottom: 0; }
+.history .who { flex: 1; min-width: 0; }
+.history .ttl {
+  display: block; font-size: 13.5px; font-weight: 600; color: var(--bc-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.history .sub { display: block; margin-top: 3px; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+.history .row-ico {
+  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
+  background: var(--bc-subtle); color: var(--bc-muted); font-size: 16px;
+}
+.history .chev { flex: none; color: var(--bc-faint); font-size: 15px; transition: transform 160ms var(--bc-ease), color 160ms; }
+.empty {
+  display: flex; flex-direction: column; align-items: center; gap: 10px;
+  padding: 40px 16px; text-align: center; font-size: var(--bc-fs-sm); color: var(--bc-muted);
+}
+.empty .empty-ico {
+  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
+  background: var(--bc-accent-soft); color: var(--bc-accent); font-size: 20px;
+}
+.skel {
+  display: block; height: 12px; border-radius: 6px; margin: 6px 0;
+  background: linear-gradient(90deg, var(--bc-subtle) 25%, color-mix(in srgb, var(--bc-fg) 8%, var(--bc-subtle)) 50%, var(--bc-subtle) 75%);
+  background-size: 200% 100%; animation: bc-shimmer 1.4s linear infinite;
+}
+/* A history row is a button now — it opens the report — so the UA styling has
+   to go, and the hit area has to read as one. */
+.history button.row {
+  width: 100%; background: none; border: 0; margin-bottom: 2px;
+  font: inherit; color: inherit; text-align: left; cursor: pointer;
+  border-radius: var(--bc-r-md); transition: background 160ms;
+  animation: bc-rise 260ms var(--bc-ease) both;
+}
+.history button.row:hover { background: var(--bc-subtle); }
+.history button.row:hover .chev { transform: translateX(2px); color: var(--bc-accent); }
+.history button.row:focus-visible { outline-offset: -2px; }
+
+/* ---------- one report, and what happened to it ---------- */
+.report-head {
+  flex: none;
+  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
+  padding: 10px var(--bc-pad); border-bottom: 1px solid var(--bc-border);
+  background: var(--bc-bg);
+}
+.report-head .ttl { font-size: 13px; font-weight: 620; color: var(--bc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.report-head .sub { font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+.report-head .pill { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
+
+/* The thread scrolls; the composer under it does not. Both live inside the
+   panel, which stops scrolling as a whole on this screen — a composer that
+   scrolls away is a composer people think isn't there. */
+.thread {
+  flex: 1 1 auto; min-height: 140px;
+  display: flex; flex-direction: column; gap: 4px;
+  padding: 14px var(--bc-pad) 12px; overflow-y: auto; overscroll-behavior: contain;
+}
+
+/* The day a run of messages happened on, as a centred label on a rule. */
+.day-sep {
+  display: flex; align-items: center; gap: 10px; margin: 10px 0 6px;
+  font-size: 11px; font-weight: 620; letter-spacing: .02em; color: var(--bc-faint);
+}
+.day-sep::before, .day-sep::after { content: ''; flex: 1; height: 1px; background: var(--bc-border); }
+
+/* A status change is not a message and is not drawn as one: no side, no
+   bubble, no author. Centred and quiet, the way every chat marks the things
+   that happened rather than the things that were said. */
+.sys {
+  align-self: center; max-width: 90%; text-align: center; margin: 6px 0;
+  padding: 4px 10px; border-radius: 999px; background: var(--bc-subtle);
+  font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
+  animation: bc-fade-in 240ms ease both;
+}
+.sys .dot {
+  display: inline-block; width: 6px; height: 6px; margin-right: 6px;
+  border-radius: 50%; background: var(--bc-muted); vertical-align: middle;
+}
+.sys .t { color: var(--bc-faint); }
+.sys.k-status .dot { background: #4da3ff; }
+.sys.k-severity .dot { background: #e8912a; }
+.sys.k-assignment .dot { background: #8b7dff; }
+.sys.k-filed .dot { background: var(--bc-faint); }
+
+/* ---------- the conversation ----------
+
+   A status change and a message are different things and are drawn as such: a
+   change is a line on the rail above, a message is a bubble with a side. The
+   reporter's own words sit right and accented, the other side's left beside an
+   avatar that says who it is — the arrangement every chat has taught people to
+   read without a legend. */
+.msg-row, .typing-row {
+  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px;
+  max-width: 88%; margin-top: 10px;
+  animation: bc-rise 260ms var(--bc-ease) both;
+}
+.msg-row.cont { margin-top: 3px; }
+.msg-row > *, .typing-row > * { grid-column: 2; }
+/* Fixed rows, so the avatar lines up with the bubble whatever else the
+   message carries (a name above it, answers or a time below it). */
+.msg-row > .msg-who, .typing-row > .msg-who { grid-row: 1; }
+.msg-row > .bubble, .typing-row > .bubble { grid-row: 2; }
+.msg-row > .quick { grid-row: 3; }
+.msg-row > .msg-when { grid-row: 4; }
+.msg-row > .av, .typing-row > .av { grid-column: 1; grid-row: 2; align-self: end; }
+/* In a run of messages the avatar sits by the last bubble and the time under
+   it, the way a chat marks where one turn ends. */
+.msg-row:has(+ .msg-row.cont) > .av { visibility: hidden; }
+.msg-row:has(+ .msg-row.cont) > .msg-when { display: none; }
+.msg-row.theirs, .typing-row { align-self: flex-start; }
+.msg-row.mine { align-self: flex-end; grid-template-columns: minmax(0, 1fr); justify-items: end; }
+.msg-row.mine > * { grid-column: 1; }
+.av {
+  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
+  font-size: 11px; font-weight: 700; letter-spacing: .02em;
+  background: color-mix(in srgb, var(--bc-fg) 10%, var(--bc-bg)); color: var(--bc-fg);
+}
+.av.bot {
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+  color: var(--bc-on-accent); font-size: 14px;
+}
+.msg-who { font-size: var(--bc-fs-xs); font-weight: 620; color: var(--bc-muted); padding: 0 4px 4px; }
+.msg-who.auto { color: var(--bc-accent); display: inline-flex; align-items: center; gap: 5px; }
+.msg-who .tag {
+  padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
+  text-transform: uppercase; background: var(--bc-accent-soft); color: var(--bc-accent);
+}
+.bubble {
+  justify-self: start; max-width: 100%;
+  padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.5;
+  background: var(--bc-subtle); color: var(--bc-fg);
+  border: 1px solid var(--bc-border);
+  border-bottom-left-radius: 6px;
+}
+/* pre-wrap belongs to the text, not the box — on the box it would also render
+   the markup's own indentation. */
+.msg-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
+.msg-row.mine .bubble {
+  justify-self: end;
+  background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-on-accent);
+  border-bottom-left-radius: 18px; border-bottom-right-radius: 6px;
+}
+.msg-row.cont.theirs .bubble { border-top-left-radius: 6px; }
+.msg-row.cont.mine .bubble { border-top-right-radius: 6px; }
+/* A reply nobody wrote: tinted with the accent and labelled "Assistant" above
+   it, so it reads the same to someone who cannot see the colour at all. */
+.msg-row.auto .bubble { background: var(--bc-accent-soft); border-color: var(--bc-accent-line); }
+/* An attachment-only message has no text to wrap, so the bubble would be an
+   empty coloured box around it. */
+.bubble.silent { padding: 0; background: none !important; border: 0; }
+.msg-when { font-size: 10.5px; color: var(--bc-faint); padding: 4px 4px 0; }
+.msg-row.pending { opacity: .6; }
+.msg-row.pending .msg-when::after { content: ' · Sending…'; }
+.msg-row.failed .bubble { border: 1px solid var(--bc-danger); }
+.msg-row.failed .msg-when { color: var(--bc-danger); }
+.msg-row.failed .msg-when::after { content: ' · Not sent'; }
+
+/* The assistant, thinking. Three dots in a bubble where its next message will be. */
+.typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; justify-self: start; }
+.typing i {
+  width: 7px; height: 7px; border-radius: 50%; background: var(--bc-accent); opacity: .45;
+  animation: bc-typing 1.2s ease-in-out infinite;
+}
+.typing i:nth-child(2) { animation-delay: .15s; }
+.typing i:nth-child(3) { animation-delay: .3s; }
+.typing-row .msg-when { padding-top: 4px; }
+
+.att { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
+.bubble.silent .att { margin-top: 0; }
+.att img {
+  display: block; max-width: 100%; max-height: 190px; border-radius: var(--bc-r-md);
+  border: 1px solid var(--bc-border); object-fit: cover; cursor: zoom-in;
+}
+.att audio { width: 232px; max-width: 100%; height: 34px; }
+.att video { max-width: 100%; max-height: 190px; border-radius: var(--bc-r-md); }
+.att .file {
+  display: flex; align-items: center; gap: 8px; text-decoration: none;
+  padding: 8px 10px; border-radius: 10px; font-size: 12px;
+  background: var(--bc-elevated); border: 1px solid var(--bc-border); color: var(--bc-fg);
+}
+.att .file:hover { border-color: var(--bc-accent); }
+.att .file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.att .file .sz { flex: none; color: var(--bc-faint); font-size: 11px; }
+
+/* ---------- the assistant's live card ----------
+   A status header pinned between the report and the conversation: where the
+   investigation is, as words and as a stepper. It does not scroll with the
+   thread, because "is anything happening?" is the question on screen the
+   whole time. */
+.assistant {
+  flex: none; position: relative; overflow: hidden;
+  margin: 10px 12px 0; padding: 12px 14px 12px;
+  border-radius: var(--bc-r-lg); border: 1px solid var(--bc-border);
+  background: var(--bc-subtle);
+  transition: background 400ms ease, border-color 400ms ease;
+}
+.assistant.analyzing, .assistant.confirming, .assistant.needs_info {
+  background: var(--bc-accent-soft); border-color: var(--bc-accent-line);
+}
+.assistant.resolved { background: color-mix(in srgb, var(--bc-ok) 9%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border)); }
+/* On a call: the call's own card is what they are watching. This one states
+   what is happening and stops moving — no spinner, no travelling bar. */
+.assistant.calling { background: var(--bc-bg); }
+.assistant.calling .as-progress i { transition: none; }
+.as-body.entering { animation: bc-rise 360ms var(--bc-ease) both; }
+.as-top { display: flex; gap: 11px; align-items: center; }
+.as-orb {
+  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
+  color: var(--bc-on-accent); font-size: 15px;
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+}
+.assistant.resolved .as-orb { background: var(--bc-ok); }
+.assistant.reviewing .as-orb { background: color-mix(in srgb, var(--bc-fg) 55%, var(--bc-bg)); }
+.as-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: as-rot .8s linear infinite; }
+@keyframes as-rot { to { transform: rotate(360deg); } }
+.as-text { min-width: 0; flex: 1; }
+.as-title { font-weight: 650; font-size: 13.5px; letter-spacing: -.01em; color: var(--bc-fg); }
+.as-detail { font-size: 12px; line-height: 1.45; color: var(--bc-muted); margin-top: 2px; }
+.as-progress {
+  height: 4px; margin: 12px 0 0; border-radius: 999px; overflow: hidden;
+  background: color-mix(in srgb, var(--bc-fg) 9%, transparent);
+}
+.as-progress i {
+  display: block; height: 100%; border-radius: inherit; background: var(--bc-accent);
+  transition: width 700ms var(--bc-ease);
+}
+.assistant.resolved .as-progress i { background: var(--bc-ok); }
+.assistant.analyzing .as-progress i {
+  background: linear-gradient(90deg, var(--bc-accent) 0%, color-mix(in srgb, var(--bc-accent) 45%, #fff) 50%, var(--bc-accent) 100%);
+  background-size: 200% 100%; animation: bc-shimmer 1.6s linear infinite;
+}
+.as-steps {
+  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
+  margin: 8px 0 0; padding: 0; font-size: 10.5px; color: var(--bc-faint);
+}
+.as-steps li { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
+.as-steps li .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.as-steps li .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
+.as-steps li.done { color: var(--bc-muted); }
+.as-steps li.done .dot { background: var(--bc-accent); border-color: var(--bc-accent); }
+.assistant.resolved .as-steps li.done .dot { background: var(--bc-ok); border-color: var(--bc-ok); }
+.as-steps li.active { color: var(--bc-fg); font-weight: 650; }
+.as-steps li.active .dot { border-color: var(--bc-accent); background: var(--bc-bg); animation: as-pulse 1.2s ease-in-out infinite; }
+@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent) 25%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .as-spin, .as-steps li.active .dot, .assistant.analyzing .as-progress i, .typing i { animation: none; } }
+
+/* Quick answers under the confirm question — only on the latest message. */
+.msg-row .quick { display: none; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
+.msg-row:last-child .quick { display: flex; }
+.quick button {
+  display: inline-flex; align-items: center; gap: 6px;
+  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-accent); background: var(--bc-bg); color: var(--bc-accent);
+  transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
+  animation: bc-item-in 300ms var(--bc-ease) both;
+}
+.quick button:first-child { background: var(--bc-accent); color: var(--bc-on-accent); }
+.quick button:nth-child(2) { animation-delay: 60ms; }
+.quick button svg { font-size: 13px; }
+.quick button:hover { transform: translateY(-1px); background: var(--bc-accent-soft); }
+.quick button:first-child:hover { background: var(--bc-accent); filter: brightness(1.07); }
+
+/* ---------- the composer ---------- */
+.composer {
+  flex: none; position: relative;
+  padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
+  /* The panel's own background, not --bc-elevated: the two are the same white
+     in light mode but differ in dark, where a raised composer reads as a band
+     laid over the panel rather than the foot of it. */
+  background: var(--bc-bg);
+  border-top: 1px solid var(--bc-border);
+}
+/* One rounded field holding the tools, the text and the send button — the
+   shape every chat box has, so nobody has to look for where to type. */
+.composer .row {
+  display: flex; align-items: flex-end; gap: 4px;
+  padding: 5px; border-radius: 22px;
+  background: var(--bc-subtle); border: 1px solid var(--bc-border);
+  transition: border-color 160ms, box-shadow 160ms;
+}
+.composer .row:focus-within { border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
+.composer textarea {
+  flex: 1; min-width: 0; min-height: 34px; max-height: 120px; resize: none; padding: 7px 6px;
+  font: inherit; font-size: 13.5px; line-height: 1.45;
+  color: var(--bc-fg); background: transparent; border: 0; border-radius: 0;
+}
+.composer textarea:hover, .composer textarea:focus { border: 0; box-shadow: none; outline: none; }
+.composer .tools { display: flex; gap: 0; grid-template-columns: none; }
+.composer .tool {
+  width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
+  border-radius: 50%; border: 0; background: none; font-size: 17px;
+  color: var(--bc-muted);
+}
+.composer .tool svg { font-size: 17px; }
+.composer .tool:hover:not(:disabled) { background: color-mix(in srgb, var(--bc-fg) 8%, transparent); color: var(--bc-fg); border: 0; transform: none; }
+.composer .tool:hover:not(:disabled) svg { color: var(--bc-fg); }
+.composer .tool:disabled { opacity: .4; cursor: default; }
+.composer .tool.recording { color: var(--bc-danger); background: color-mix(in srgb, var(--bc-danger) 12%, transparent); }
+.composer .tool.recording svg { color: var(--bc-danger); }
+.composer .send {
+  width: 34px; height: 34px; flex: none; border-radius: 50%; cursor: pointer; font-size: 16px;
+  background: var(--bc-accent); border: 0; color: var(--bc-on-accent);
+  display: grid; place-items: center;
+  transition: transform 160ms var(--bc-ease), opacity 160ms, filter 160ms;
+}
+.composer .send:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.05); }
+.composer .send:disabled { opacity: .35; cursor: default; background: var(--bc-faint); }
+.composer .staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
+.composer .chip {
+  display: flex; align-items: center; gap: 6px; max-width: 200px;
+  padding: 5px 7px 5px 10px; border-radius: 999px; font-size: var(--bc-fs-xs);
+  background: var(--bc-subtle); border: 1px solid var(--bc-border); color: var(--bc-muted);
+  animation: bc-item-in 240ms var(--bc-ease) both;
+}
+.composer .chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bc-fg); }
+.composer .chip button {
+  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
+  border: 0; border-radius: 50%; background: none; color: var(--bc-faint); cursor: pointer;
+}
+.composer .chip button:hover { color: var(--bc-danger); }
+.composer .chip.uploading { border-style: dashed; }
+.composer .note { padding: 6px 6px 0; font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+.composer .note.err { color: var(--bc-danger); }
+.reccount { font-variant-numeric: tabular-nums; }
+
+/* Status carries the only colour in this list, so it is the thing the eye
+   lands on — which is what someone opening this screen came to check. */
+.pill {
+  flex: none; display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11px; font-weight: 650;
+  padding: 3px 9px; border-radius: 999px;
+  color: var(--bc-muted); background: var(--bc-subtle);
+}
+.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.pill.open { color: #c2410c; background: color-mix(in srgb, #f59e0b 14%, var(--bc-bg)); }
+.pill.in_progress { color: #1d6fd1; background: color-mix(in srgb, #3b82f6 14%, var(--bc-bg)); }
+.pill.resolved { color: #0f8a5a; background: color-mix(in srgb, #10b981 14%, var(--bc-bg)); }
+.pill.closed { color: var(--bc-muted); }
+:host(.bc-dark) .pill.open { color: #fbbf24; }
+:host(.bc-dark) .pill.in_progress { color: #7cb8ff; }
+:host(.bc-dark) .pill.resolved { color: #4ade9a; }
+@media (prefers-color-scheme: dark) {
+  :host(.bc-auto) .pill.open { color: #fbbf24; }
+  :host(.bc-auto) .pill.in_progress { color: #7cb8ff; }
+  :host(.bc-auto) .pill.resolved { color: #4ade9a; }
+}
+
+/* ---------- does the fix work ---------- */
+.fix-verification {
+  flex: none; margin: 10px 12px 0; padding: 12px 14px;
+  border-radius: var(--bc-r-lg); border: 1px solid color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border));
+  background: color-mix(in srgb, var(--bc-ok) 8%, var(--bc-bg));
+  font-size: var(--bc-fs-sm); color: var(--bc-fg);
+  animation: bc-rise 280ms var(--bc-ease) both;
+}
+.fix-verification p { margin: 0 0 8px; font-weight: 620; }
+.fix-verification textarea { min-height: 56px; margin-bottom: 8px; font-size: 13px; background: var(--bc-bg); }
+.fix-verification button {
+  padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-border); background: var(--bc-bg); color: var(--bc-fg);
+}
+.fix-verification button[data-result="CONFIRMED"] { background: var(--bc-ok); border-color: var(--bc-ok); color: #fff; }
+.fix-verification .feedback-status { margin: 6px 0 0; font-weight: 450; color: var(--bc-danger); font-size: var(--bc-fs-xs); }
+.fix-verification .feedback-status:empty { display: none; }
+
+/* A call in progress, in place of the form.
+   ---------------------------------------------------------------------------
+   Deliberately not styled as a chat. Nothing arrives here to read — the
+   conversation is happening out loud — so this is a state, a line of
+   reassurance about the report, and a way to hang up. */
+.call { display: flex; flex-direction: column; padding: 26px 0 0; animation: bc-fade-in 240ms ease both; }
+.call-head, .call-note { padding: 0 var(--bc-pad); }
+.call-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
+.call-head strong { font-size: 15.5px; font-weight: 680; letter-spacing: -.01em; }
+.call-dot {
+  width: 9px; height: 9px; border-radius: 50%; background: var(--bc-accent);
+  animation: bc-call-pulse 1.6s ease-in-out infinite;
+}
+.call-dot.off { background: var(--bc-faint); animation: none; }
+@keyframes bc-call-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
+/* Said while it is still ringing, because that is when somebody is deciding
+   whether it is worth waiting. */
+.call-note { margin: 0 0 18px; font-size: 13px; color: var(--bc-muted); line-height: 1.55; }
+
+/* ---------- the same call, on top of the report it is about ---------- */
+/* A bar rather than its own screen, unlike the one the composer opens. The
+   thread underneath is exactly what both people are talking about, so taking it
+   off screen would be taking away the only shared reference. */
+.livecall {
+  flex: none;
+  display: flex; align-items: center; gap: 9px;
+  margin: 10px 12px 0; padding: 9px 11px;
+  border: 1px solid var(--bc-accent-line); border-radius: var(--bc-r-md);
+  background: var(--bc-accent-soft); font-size: var(--bc-fs-sm); color: var(--bc-fg);
+  animation: bc-rise 240ms var(--bc-ease) both;
+}
+.livecall .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.livecall .call-kept { font-size: 11px; opacity: .75; }
+.livecall .secs { font-variant-numeric: tabular-nums; color: var(--bc-muted); }
+.livecall .act {
+  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bc-border);
+  background: var(--bc-bg); color: var(--bc-fg);
+  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
+}
+.livecall .act:hover { background: var(--bc-subtle); }
+.livecall .act.danger { border-color: transparent; background: var(--bc-danger); color: #fff; }
+.livecall.over { color: var(--bc-muted); background: var(--bc-subtle); border-color: var(--bc-border); }
+.call-note code { font-size: 11px; }
+@media (prefers-reduced-motion: reduce) { .call-dot { animation: none; } }
+
+/* div.done, not .done: the assistant's stepper marks finished steps li.done,
+   and this screen's padding was landing on every one of them. */
+div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 240ms ease both; }
+.done .tick {
+  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
+  display: grid; place-items: center; font-size: 26px;
+  background: color-mix(in srgb, var(--bc-ok) 14%, transparent); color: var(--bc-ok);
+  box-shadow: 0 0 0 8px color-mix(in srgb, var(--bc-ok) 6%, transparent);
+  animation: bc-pop 420ms var(--bc-ease) both;
+}
+.done h3 { margin: 0 0 6px; font-size: 17px; font-weight: 680; letter-spacing: -.015em; }
+.done p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bc-muted); }
+.done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--bc-subtle); color: var(--bc-fg); }
+/* The likely wait. Set apart from the reference line above it by a rule rather
+   than by weight: one is bookkeeping and the other is the answer to the
+   question the reporter actually has, and they should not read as one
+   paragraph. */
+.done .eta {
+  margin: 14px auto 0;
+  padding-top: 12px;
+  border-top: 1px solid var(--bc-border);
+  max-width: 30ch;
+  line-height: 1.5;
+}
+.done .eta strong { color: var(--bc-fg); font-weight: 620; }
+/* The same figure on the report the reporter came back to. Sits under the
+   status pill in the header block, muted — it is context, not the headline the
+   status is. */
+.report-head .eta-line {
+  grid-column: 1 / -1;
+  font-size: var(--bc-fs-xs);
+  color: var(--bc-muted);
+  margin-top: 2px;
+}
+
+/* ---------- recording bar ---------- */
+.recbar {
+  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
+  z-index: 2147483002;
+  display: flex; align-items: center; gap: 12px;
+  padding: 8px 8px 8px 16px; border-radius: 999px;
+  background: var(--bc-elevated); color: var(--bc-fg);
+  border: 1px solid var(--bc-border); box-shadow: var(--bc-shadow);
+  animation: bc-item-in 300ms var(--bc-ease) both;
+}
+.recbar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bc-danger); animation: bc-pulse 1.4s ease-in-out infinite; }
+.recbar .time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 650; min-width: 38px; }
+.recbar .hint { font-size: 12px; color: var(--bc-muted); }
+.recbar button { height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer; }
+.recbar .stop { background: var(--bc-danger); border: 1px solid var(--bc-danger); color: #fff; }
+.recbar .stop:hover { filter: brightness(1.08); }
+
+/* ---------- phones ----------------------------------------------------------
+   This widget runs inside a shadow root on somebody else's site, so its own
+   stylesheet is the whole story: the host page cannot correct any of this, and
+   anything that goes wrong here goes wrong on their site, in front of their
+   visitor, at the moment that visitor is already annoyed enough to file a bug.
+   -------------------------------------------------------------------------- */
+
+/* 100vh on a phone is the viewport with the browser chrome hidden, so the
+   panel could be taller than the space it actually has and put "Send report"
+   under the address bar. */
+@supports (height: 100dvh) {
+  .panel { max-height: calc(100dvh - var(--bc-dock-h, 84px) - 52px); }
+}
+
+/* Short desktop windows: the chat height gives way to the space there is. */
+@media (max-height: 820px) { .panel.is-chat { height: calc(100vh - var(--bc-dock-h, 84px) - 52px); } }
+
+/* A phone gets the whole screen: a sheet that slides up from the bottom, with
+   the notch and the home indicator kept clear. The dock steps aside while it
+   is open — the sheet has its own close button, and a launcher floating over
+   the send button would be in the way of the one thing that matters. */
+@media (max-width: 480px) {
+  .scrim { background: rgba(10,12,16,.4); }
+  .panel, .scrim.at-right .panel, .scrim.at-left .panel, .scrim.at-bottom .panel, .scrim.at-top .panel {
+    inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
+    border-radius: 0; border: 0;
+    animation: bc-sheet-in 380ms var(--bc-ease) both;
+  }
+  @supports (height: 100dvh) { .panel { height: 100dvh; max-height: none; } }
+  .panel.is-chat { height: 100%; }
+  .scrim.closing .panel { animation: bc-sheet-out 200ms ease both; }
+  .head { padding-top: max(14px, env(safe-area-inset-top, 0px)); padding-left: max(var(--bc-pad), env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
+  .foot, .powered { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
+  .foot + .powered { padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)); }
+  .foot:has(+ .powered) { padding-bottom: 12px; }
+  .recbar .hint { display: none; }
+  .msg-row, .typing-row { max-width: 92%; }
+}
+
+@media (pointer: coarse) {
+  /* iOS zooms the whole page when a field it focuses is under 16px, and does
+     not zoom back out. On the host's site that is not the widget's page to
+     zoom — the visitor is left on a magnified checkout wondering what they
+     touched. !important because this is a property of the device, not a
+     preference about type. */
+  input, textarea, select { font-size: 16px !important; }
+
+  /* 44px is the floor a thumb hits reliably. Every control in this form was
+     under it, on the one surface in the product designed for someone who is
+     not an operator and gets no second attempt. */
+  .seg button { min-height: 44px; }
+  .tool { min-height: 56px; }
+  button.primary, button.ghost { height: 44px; }
+  .composer .send, .composer .tool { width: 40px; height: 40px; min-height: 0; }
+  textarea { min-height: 104px; }
+  .composer textarea { min-height: 40px; }
+
+  /* The close button and the thumbnails' remove buttons are small glyphs whose
+     boxes cannot grow without moving what is beside them, so each keeps its
+     size and gets an invisible target drawn around it instead. The theme
+     switch gets the same in the launcher's own sheet (widget.js). */
+  .head .icon-btn, .thumb .drop, .brand-credit { position: relative; }
+  .thumb .drop { position: absolute; opacity: 1; }
+  .head .icon-btn::after, .thumb .drop::after, .brand-credit::after {
+    content: '';
+    position: absolute;
+    inset: -8px;
+  }
+}
+
+/* Hover is a lie on a touchscreen: it latches on tap and stays. */
+@media (hover: none) {
+  .tool:hover:not(:disabled) { transform: none; }
+}
+`;function ie({title:e,sub:t,id:a="",back:l=!1}){return`
+    <div class="head">
+      ${l?`<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${De}</button>`:""}
+      <div class="mark" aria-hidden="true">${F}</div>
+      <div class="titles">
+        <h2${a?` id="${a}"`:""}>${k(e)}</h2>
+        <p>${k(t)}</p>
+      </div>
+      <button class="icon-btn" type="button" data-act="close" aria-label="Close">${J}</button>
+    </div>`}function se(e,t){return`<div class="empty"><span class="empty-ico" aria-hidden="true">${t}</span>${k(e)}</div>`}function Pe(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 We(){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 _e(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 K(e){const t=new Date(e);return Number.isFinite(t.getTime())?`${t.getFullYear()}-${t.getMonth()}-${t.getDate()}`:null}function Ye(e){const t=new Date(e),a=new Date,l=new Date(a.getFullYear(),a.getMonth(),a.getDate()-1);if(K(t)===K(a))return"Today";if(K(t)===K(l))return"Yesterday";try{return t.toLocaleDateString(void 0,{weekday:"short",day:"numeric",month:"short",...t.getFullYear()!==a.getFullYear()?{year:"numeric"}:{}})}catch{return te(e)}}function ge(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 me(e){return e.scrollHeight-e.scrollTop-e.clientHeight<40}function U(e,{smooth:t=!1}={}){const a=typeof matchMedia=="function"&&matchMedia("(prefers-reduced-motion: reduce)").matches;t&&!a&&e.scrollTo?e.scrollTo({top:e.scrollHeight,behavior:"smooth"}):e.scrollTop=e.scrollHeight}function ce(e){return{OPEN:"Open",IN_PROGRESS:"In progress",RESOLVED:"Fixed",CLOSED:"Closed"}[e]||String(e||"").toLowerCase()}function te(e){const t=new Date(e).getTime();if(!Number.isFinite(t))return"";const a=Math.floor((Date.now()-t)/864e5);if(a<=0)return"today";if(a===1)return"yesterday";if(a<30)return`${a} days ago`;const l=Math.floor(a/30);return l===1?"a month ago":`${l} months ago`}function k(e){return String(e).replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[t])}typeof window<"u"&&window.fetch&&window.fetch.bind(window);const ve=["image/png","image/jpeg","image/webp","image/gif","video/webm","video/mp4","audio/webm","audio/ogg","audio/mpeg","audio/mp4","audio/wav","application/pdf","text/plain","text/csv","application/json","application/zip","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/vnd.ms-excel","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],xe=["image/png","image/jpeg","image/webp","video/webm","video/mp4"],Fe=()=>{var e;return!!((e=navigator==null?void 0:navigator.mediaDevices)!=null&&e.getUserMedia&&typeof MediaRecorder<"u")},Ke=()=>{var e;return!!((e=navigator==null?void 0:navigator.mediaDevices)!=null&&e.getDisplayMedia&&typeof MediaRecorder<"u")},Ue=()=>{var e;return!!((e=navigator==null?void 0:navigator.mediaDevices)!=null&&e.getDisplayMedia)};function Ze(e,t=ve){const a=String(e||"").split(";")[0].trim().toLowerCase();return t.includes(a)?a:null}async function Ge(){const e=await navigator.mediaDevices.getDisplayMedia({video:{frameRate:1},audio:!1});try{const t=e.getVideoTracks()[0],a=document.createElement("video");a.srcObject=e,a.muted=!0,a.playsInline=!0,await a.play(),await new Promise(o=>requestAnimationFrame(()=>requestAnimationFrame(o)));const{width:l,height:i}=t.getSettings(),f=document.createElement("canvas");f.width=l||a.videoWidth,f.height=i||a.videoHeight,f.getContext("2d").drawImage(a,0,0,f.width,f.height);const m=await new Promise(o=>f.toBlob(o,"image/png"));if(!m)throw new Error("The browser returned an empty screenshot.");return{blob:m,mime:"image/png",kind:"SCREENSHOT"}}finally{e.getTracks().forEach(t=>t.stop())}}async function Xe({maxMs:e=12e4,onTick:t,onAutoStop:a}={}){const l=await navigator.mediaDevices.getDisplayMedia({video:{frameRate:15},audio:!1}),i=["video/webm;codecs=vp9","video/webm;codecs=vp8","video/webm"].find(u=>MediaRecorder.isTypeSupported(u))||"video/webm",f=new MediaRecorder(l,{mimeType:i,videoBitsPerSecond:25e5}),m=[];f.ondataavailable=u=>{u.data.size&&m.push(u.data)},f.start(1e3);const o=Date.now(),d=setInterval(()=>t==null?void 0:t(Math.floor((Date.now()-o)/1e3)),500),g=()=>{clearInterval(d),clearTimeout(n),l.getTracks().forEach(u=>u.stop())},y=new Promise(u=>{f.onstop=()=>{g(),u(new Blob(m,{type:i}))}}),x=()=>{f.state!=="inactive"&&f.stop(),a==null||a()};l.getVideoTracks()[0].addEventListener("ended",x);const n=setTimeout(x,e);return{mime:i,maxMs:e,async stop(){return clearTimeout(n),f.state!=="inactive"&&f.stop(),{blob:await y,mime:i,kind:"VIDEO"}},cancel(){g(),f.state!=="inactive"&&f.stop()}}}async function Je({maxMs:e=12e4,onTick:t,onAutoStop:a}={}){const l=await navigator.mediaDevices.getUserMedia({audio:!0}),i=["audio/webm;codecs=opus","audio/webm","audio/mp4","audio/ogg"].find(u=>MediaRecorder.isTypeSupported(u))||"",f=new MediaRecorder(l,i?{mimeType:i}:void 0),m=[];f.ondataavailable=u=>{u.data.size&&m.push(u.data)},f.start(1e3);const o=Date.now(),d=setInterval(()=>t==null?void 0:t(Math.floor((Date.now()-o)/1e3)),500),g=()=>{clearInterval(d),clearTimeout(n),l.getTracks().forEach(u=>u.stop())},y=new Promise(u=>{f.onstop=()=>{g(),u(new Blob(m,{type:f.mimeType||i}))}}),n=setTimeout(()=>{f.state!=="inactive"&&f.stop(),a==null||a()},e);return{mime:f.mimeType||i,maxMs:e,async stop(){clearTimeout(n),f.state!=="inactive"&&f.stop();const u=await y;return{blob:u,mime:u.type||f.mimeType||i,kind:"AUDIO"}},cancel(){g(),f.state!=="inactive"&&f.stop()}}}function Y(e){return e<1024?`${e} B`:e<1024*1024?`${(e/1024).toFixed(0)} KB`:`${(e/1024/1024).toFixed(1)} MB`}function ae(e){const t=Math.floor(e/60),a=e%60;return`${t}:${String(a).padStart(2,"0")}`}const et=7*24*60*60*1e3;let ne;function tt(){return ne||(ne=new Promise((e,t)=>{const a=indexedDB.open("bugcatch-drafts",1);a.onupgradeneeded=()=>a.result.createObjectStore("drafts"),a.onsuccess=()=>e(a.result),a.onerror=()=>t(a.error),a.onblocked=()=>t(new Error("Draft storage is blocked."))}).catch(e=>{throw ne=null,e})),ne}function at(e,t){var a,l;return JSON.stringify([e.apiBase,e.projectId,t||((a=e.user)==null?void 0:a.email)||((l=e.user)==null?void 0:l.id)||"anonymous"])}async function oe(e,t){const a=await tt();return new Promise((l,i)=>{const f=a.transaction("drafts",t===void 0?"readonly":"readwrite"),m=f.objectStore("drafts"),o=t===void 0?m.get(e):t===null?m.delete(e):m.put({...t,savedAt:Date.now()},e);f.oncomplete=()=>l(o.result),f.onerror=()=>i(f.error),f.onabort=()=>i(f.error||new Error("Draft was not saved."))})}async function nt(e){const t=await oe(e);return t&&Date.now()-t.savedAt>et?(await oe(e,null),null):t||null}const ye=[{value:"LOW",label:"Low"},{value:"MEDIUM",label:"Medium"},{value:"HIGH",label:"High"},{value:"CRITICAL",label:"Critical"}],we="MEDIUM";function ot(e){const t=e.attachments!==!1,a=t&&Ue(),l=t&&Ke();return`
+        <div class="compose">
+        <div class="field">
+          <label for="bc-title">What went wrong?</label>
+          <input id="bc-title" type="text" placeholder="e.g. The checkout button does nothing" autocomplete="off"
+            aria-describedby="bc-title-err" />
+          <p class="field-err" id="bc-title-err" hidden></p>
+        </div>
+        <div class="field">
+          <label for="bc-desc">Anything else that helps <span class="opt">(optional)</span></label>
+          <textarea id="bc-desc" placeholder="What you were doing, what you expected, what happened instead."></textarea>
+        </div>
+        <!-- Drawn only when this project asks for an identifier and the report
+             does not already carry one. Between the description and the
+             severity because that is where it belongs in the reading order:
+             it is a question about what they just typed. -->
+        <div class="refs" hidden></div>
+        <div class="field">
+          <label id="bc-prio-l">How much is it getting in your way?</label>
+          <div class="seg" role="group" aria-labelledby="bc-prio-l">
+            ${ye.map(i=>`
+              <button type="button" data-prio="${i.value}" aria-pressed="${i.value===we}">${i.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">
+            ${a?`<button class="tool" type="button" data-act="shot">${Ie}Screenshot</button>`:""}
+            ${l?`<button class="tool" type="button" data-act="rec">${Re}Record screen</button>`:""}
+            <button class="tool" type="button" data-act="file">${he}Upload file</button>
+          </div>
+          <div class="thumbs"></div>
+          <input type="file" accept="${xe.join(",")}" multiple hidden />
+        </div>`:""}
+        </div>`}function rt(e){var pe,G,X,C;const{client:t,cfg:a,root:l,host:i,dock:f,scrim:m,$:o,say:d,titleInput:g,descInput:y,compose:x,sendBtn:n,note:u}=e,$=o(".thumbs"),h=m.querySelector("input[type=file]"),p=[];let s=we,r=null;const c=document.createElement("div");c.setAttribute("role","status"),c.className="note",x.prepend(c);const S=at(a,(pe=t.signedInAs())==null?void 0:pe.email);let T=a.drafts===!1,w=!1,v=Promise.resolve(),L;function Q(){if(clearTimeout(L),!T||w||a.drafts===!1)return v;const b=g.value||y.value||p.length?{title:g.value,description:y.value,priority:s,items:p.map(({blob:M,mime:I,kind:q})=>({blob:M,mime:I,kind:q}))}:null;return v=v.catch(()=>{}).then(()=>oe(S,b)).then(()=>{c.textContent=b?"Draft saved on this device":""}).catch(()=>{c.textContent="Draft could not be saved. Keep this tab open."}),v}function R(){clearTimeout(L),L=setTimeout(Q,250)}x.addEventListener("input",R),x.addEventListener("change",R);const V=()=>{Q()};window.addEventListener("pagehide",V);function B(){p.filter(b=>b.status==="failed").forEach(Z)}window.addEventListener("online",B),a.drafts!==!1&&(x.inert=!0,nt(S).then(b=>{e.closed||!b||(c.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>',c.querySelector("[data-resume]").onclick=()=>{g.value=b.title||"",y.value=b.description||"",s=ye.some(M=>M.value===b.priority)?b.priority:"MEDIUM",m.querySelectorAll("[data-prio]").forEach(M=>M.setAttribute("aria-pressed",String(M.dataset.prio===s)));for(const M of(b.items||[]).slice(0,a.maxAttachments??5))P(M);T=!0,Q()},c.querySelector("[data-discard]").onclick=()=>{T=!0,Q()})}).catch(()=>{c.textContent="Draft storage is unavailable. Keep this tab open."}).finally(()=>{x.inert=!1,c.querySelector("[data-resume]")||(T=!0)})),e.onDestroy(()=>{var b;Q(),clearTimeout(L),window.removeEventListener("pagehide",V),window.removeEventListener("online",B),r==null||r.cancel(),p.forEach(M=>M.previewUrl&&URL.revokeObjectURL(M.previewUrl)),(b=l.querySelector(".recbar"))==null||b.remove()}),m.querySelectorAll("[data-prio]").forEach(b=>{b.addEventListener("click",()=>{s=b.dataset.prio,R(),m.querySelectorAll("[data-prio]").forEach(M=>{M.setAttribute("aria-pressed",String(M===b))})})});const N=o("#bc-title-err");function E(b){N.hidden=!b,N.innerHTML=b?`${_}<span>${k(b)}</span>`:"",g.classList.toggle("invalid",!!b),g.setAttribute("aria-invalid",String(!!b))}g.addEventListener("input",()=>{g.value.trim()&&E("")});function z(){const b=p.some(q=>q.status==="uploading");n.disabled=e.sending||b||p.some(q=>q.status==="failed"),u.textContent=b?"Waiting for the upload to finish…":p.some(q=>q.status==="failed")?"Retry or remove failed attachments before sending.":"";const M=a.maxAttachments??5;m.querySelectorAll(".tool").forEach(q=>{q.disabled=e.sending||p.length>=M});const I=o(".field-head .count");I&&(I.textContent=p.length?`${p.length} of ${M}`:"")}e.refreshSendState=z;function H(b){var W;const M=b.el,I=b.kind==="VIDEO"?"Video":"Shot",q=b.kind==="VIDEO"?`<video src="${b.previewUrl}" muted playsinline preload="metadata"></video>`:`<img src="${b.previewUrl}" alt="" />`;let A="";b.status==="uploading"?A=`<div class="veil"><div class="spinner"></div><div class="bar"><i style="width:${Math.round(b.progress*100)}%"></i></div></div>`:b.status==="failed"&&(A=`<div class="veil err"><button type="button" data-act="retry" aria-label="Retry upload">${Ve}</button>Failed</div>`),M.innerHTML=`
+      ${q}
+      <span class="kind">${I} · ${Y(b.size)}</span>
+      <button class="drop" type="button" data-act="drop" aria-label="Remove ${I.toLowerCase()}">${J}</button>
+      ${A}`,M.querySelector('[data-act="drop"]').addEventListener("click",()=>D(b)),(W=M.querySelector('[data-act="retry"]'))==null||W.addEventListener("click",()=>Z(b))}function D(b){const M=p.indexOf(b);M>=0&&p.splice(M,1),b.previewUrl&&URL.revokeObjectURL(b.previewUrl),b.el.remove(),Q(),z()}async function Z(b){b.status="uploading",b.progress=0,H(b),z();try{const{storageKey:M,mime:I}=await t.uploadAttachment(b.blob,b.mime,q=>{b.progress=q;const A=b.el.querySelector(".bar i");A&&(A.style.width=`${Math.round(q*100)}%`)});b.storageKey=M,b.mime=I,b.status="ready"}catch(M){b.status="failed",d(M.message.replace("[BugCatch] ",""))}H(b),z()}function P({blob:b,mime:M,kind:I}){const q=a.maxAttachmentBytes??26214400;if(b.size>q){d(`That file is ${Y(b.size)} — the limit is ${Y(q)}.`);return}const A=Ze(M||b.type,xe);if(!A){d("Only PNG, JPEG, WebP, WebM and MP4 files can be attached to a report.");return}const W={blob:b,kind:I,mime:A,size:b.size,previewUrl:URL.createObjectURL(b),status:"uploading",progress:0,storageKey:null,el:document.createElement("div")};W.el.className="thumb",p.push(W),$.appendChild(W.el),d(""),Q(),Z(W)}async function re(b){i.style.opacity="0",i.style.pointerEvents="none",await new Promise(M=>requestAnimationFrame(()=>requestAnimationFrame(M)));try{return await b()}finally{i.style.opacity="",i.style.pointerEvents=""}}(G=m.querySelector('[data-act="shot"]'))==null||G.addEventListener("click",async()=>{try{const b=await re(Ge);P(b)}catch(b){(b==null?void 0:b.name)!=="NotAllowedError"&&d(`Screenshot failed: ${b.message}`)}}),(X=m.querySelector('[data-act="file"]'))==null||X.addEventListener("click",()=>h.click()),h==null||h.addEventListener("change",()=>{const b=(a.maxAttachments??5)-p.length;[...h.files].slice(0,Math.max(b,0)).forEach(M=>{P({blob:M,mime:M.type,kind:M.type.startsWith("video/")?"VIDEO":"SCREENSHOT"})}),h.value=""}),(C=m.querySelector('[data-act="rec"]'))==null||C.addEventListener("click",async()=>{const b=a.maxRecordingMs??12e4;let M;try{r=await Xe({maxMs:b,onTick:I=>{M&&(M.querySelector(".time").textContent=ae(I))},onAutoStop:()=>{r&&j({keep:!0})}})}catch(I){(I==null?void 0:I.name)!=="NotAllowedError"&&d(`Recording failed: ${I.message}`);return}m.style.display="none",f.hidden=!0,M=document.createElement("div"),M.className="recbar",M.innerHTML=`
+      <span class="dot"></span>
+      <span class="time">0:00</span>
+      <span class="hint">Recording — up to ${ae(Math.round(b/1e3))}</span>
+      <button class="stop" type="button">Stop</button>
+      <button class="ghost" type="button">Discard</button>`,M.querySelector(".stop").addEventListener("click",()=>j({keep:!0})),M.querySelector(".ghost").addEventListener("click",()=>j({keep:!1})),l.appendChild(M),M.querySelector(".stop").focus()});async function j({keep:b}){var I;const M=r;if(M){if(r=null,(I=l.querySelector(".recbar"))==null||I.remove(),m.style.display="",f.hidden=!1,!b){M.cancel(),g.focus();return}try{const q=await M.stop();q.blob.size?P(q):d("That recording came back empty — nothing was captured.")}catch(q){d(`Recording failed: ${q.message}`)}g.focus()}}e.isRecording=()=>!!r,e.stopRecording=j,n.addEventListener("click",async()=>{var I;const b=g.value;if(!b.trim()){E("Add a few words about what went wrong — a short sentence is plenty."),g.focus();return}if(e.holdForReference())return;e.sending=!0,d(""),z();const M=n.innerHTML;n.innerHTML='<span class="spinner" aria-hidden="true"></span>Sending…';try{const q=await t.report({title:b,description:y.value,priority:s,references:e.answeredReference(),issue:((I=e.pickedIssue())==null?void 0:I.key)||null,attachments:p.filter(A=>A.status==="ready").map(A=>({type:A.kind,storageKey:A.storageKey,mime:A.mime}))});if(q!=null&&q.cancelled){e.sending=!1,n.innerHTML=M,z();return}w=!0,clearTimeout(L),await v,a.drafts!==!1&&await oe(S,null).catch(()=>{}),e.succeed(q)}catch(q){e.sending=!1,n.innerHTML=M,d(q.message.replace("[BugCatch] ","")),z(),e.recheckSignIn()}})}const it=2e4,ke=120,le=200;function $e(e){if(typeof e!="string"||!e.trim()||e.length>400)return null;try{return new RegExp(e.trim(),"gi")}catch{return null}}const Se=e=>String(e).replace(/\s+/g," ").trim().slice(0,ke);function Le(e,t){const a=e&&e.normalize;if(a==="phone"){const l=t.replace(/\D/g,"");return l.length===10?l:l.length===12&&l.startsWith("91")?l.slice(2):l.length===11&&l.startsWith("0")?l.slice(1):t}return a==="upper"?t.toUpperCase():t}function Qe(e){const t=e.length>1&&e[1]!==void 0?e[1]:e[0];return typeof t!="string"||!t.trim()?null:{value:Se(t),start:e.index,end:e.index+e[0].length}}function st(e,t){return((e.slice(t.start,t.valueStart)+e.slice(t.valueEnd,t.end)).match(/[a-z]/gi)||[]).length}const ct=/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|[A-Za-z0-9][\w-]{5,40}/gi,Ee=/[\w-]/;function lt(e,t){const a=(e||[]).filter(n=>n&&n.scan!==!1&&n.pattern),l=[],i=[],f=(t||[]).map(n=>typeof n=="string"?n.slice(0,it):"");f.forEach((n,u)=>{n&&a.forEach(($,h)=>{const p=$e($.pattern);if(!p)return;let s,r=0;for(p.lastIndex=0;(s=p.exec(n))!==null&&!(++r>le);){if(s[0]===""){p.lastIndex+=1;continue}const c=Qe(s);if(!c)continue;const S=s.length>1&&s[1]!==void 0?s[1]:s[0],T=s.index+Math.max(0,s[0].indexOf(S)),w={block:u,order:h,key:$.key,label:$.label,value:Le($,c.value),start:c.start,end:c.end,valueStart:T,valueEnd:T+S.length};w.weight=st(n,w),l.push(w)}})});const m=l.filter(n=>!l.some(u=>u!==n&&u.block===n.block&&u.key!==n.key&&u.valueStart<=n.valueStart&&u.valueEnd>=n.valueEnd&&u.weight>n.weight)),o=new Map;for(const n of m){const u=n.value.toLowerCase();o.has(u)||o.set(u,{value:n.value,keys:new Map});const $=o.get(u);$.keys.has(n.key)||$.keys.set(n.key,{key:n.key,label:n.label,order:n.order})}const d=[],g=[],y=new Map;for(const n of o.values()){const u=[...n.keys.values()].sort((p,s)=>p.order-s.order);if(u.length>1){g.push({value:n.value,kinds:u.map(({key:p,label:s})=>({key:p,label:s}))});continue}const[{key:$,label:h}]=u;y.has($)||y.set($,[]),y.get($).push({key:$,label:h,value:n.value})}for(const n of y.values())if(n.length===1)d.push(n[0]);else for(const u of n)g.push({value:u.value,kinds:[{key:u.key,label:u.label}]});const x=new Set(o.keys());return f.forEach((n,u)=>{if(!n)return;const $=l.filter(r=>r.block===u),h=new RegExp(ct.source,"gi");let p,s=0;for(;(p=h.exec(n))!==null&&++s<=le;){const r=p.index,c=r+p[0].length;if($.some(Q=>r<Q.end&&c>Q.start))continue;const S=n[r-1]||"",T=n[c]||"";if(Ee.test(S)||Ee.test(T)||S==="/"||S==="@"||T==="@"||S==="."||T==="."&&/\w/.test(n[c+1]||"")||!/\d/.test(p[0]))continue;const w=Se(p[0]),v=w.toLowerCase();if(x.has(v))continue;const L=(e||[]).filter(Q=>Q&&Me(Q,w)).map(({key:Q,label:R})=>({key:Q,label:R}));L.length&&(x.add(v),i.push({value:w,kinds:L}))}}),{found:d,conflicts:g,loose:i}}function Me(e,t){const a=typeof t=="string"?t.trim():"";if(!a||a.length>ke)return null;const l=$e(e&&(e.valuePattern||e.pattern));if(!l)return null;let i,f=0;for(l.lastIndex=0;(i=l.exec(a))!==null&&!(++f>le);){if(i[0]===""){l.lastIndex+=1;continue}const m=i.index+i[0].length===a.length,o=i.index===0||i.index===1;if(m&&o){const d=Qe(i);if(d)return Le(e,d.value)}}return null}function dt(e){const{client:t,say:a,titleInput:l,descInput:i,sendBtn:f,refsBox:m}=e;let o={policy:"off",fields:[]},d=!1,g=null,y="",x="",n=[],u="ask",$=!1,h=!1;t.referenceFields().then(E=>{o=E,T()}).catch(()=>{});function p(){return o.policy==="off"||!o.fields.length?{found:[],conflicts:[],loose:[]}:lt(o.fields,[l.value,i.value])}function s(E=p()){return E.found.length>0&&E.conflicts.length===0}function r(){return!g||!y.trim()?[]:[{key:g,value:y.trim().slice(0,120)}]}const c=document.createElement("p");c.className="ref-found",c.setAttribute("aria-live","polite"),c.hidden=!0,i.closest(".field").after(c);let S;function T(){const E=p();if(s(E)){const z=E.found.slice(0,2).map(H=>`${k(H.label)} <b>${k(v(H.value))}</b>`).join(", ");c.innerHTML=`${O}<span>Found your ${z} — no need to add it again.</span>`,c.hidden=!1,d&&!r().length&&(d=!1,R())}else c.hidden=!0,c.innerHTML=""}const w=()=>{clearTimeout(S),S=setTimeout(T,250)};l.addEventListener("input",w),i.addEventListener("input",w);function v(E){return E.length>20?`${E.slice(0,8)}…${E.slice(-4)}`:E}function L(E){const z=E.trim().toLowerCase();return n.find(H=>H.value.toLowerCase()===z)||null}function Q(E){y=E.value,E.kinds.length===1?g=E.kinds[0].key:E.kinds.some(z=>z.key===g)||(g=null),x="",h=!1}function R(){var G,X;if(!d){m.hidden=!0,m.innerHTML="";return}const E=o.fields.find(C=>C.key===g)||null,z=o.policy!=="required",H=L(y),D=H&&H.kinds.length>1?o.fields.filter(C=>H.kinds.some(b=>b.key===C.key)):o.fields,Z=n.length>1&&n.every(C=>C.kinds.length===1&&C.kinds[0].key===n[0].kinds[0].key),P={confirm:n.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."]}[u];m.hidden=!1;const re=D.length>6;m.innerHTML=`
+      <div class="ask-head">
+        <span class="avatar" aria-hidden="true">${F}</span>
+        <div>
+          <strong>${k(P[0])}</strong>
+          <p class="why">${k(P[1])}</p>
+        </div>
+      </div>
+      ${n.length>1?`
+      <div class="chips cands" role="group" aria-label="IDs found in your message">
+        ${n.map((C,b)=>`
+          <button type="button" data-ref-cand="${b}" title="${k(C.value)}"
+            aria-pressed="${!!H&&H===C}">${k(v(C.value))}</button>
+        `).join("")}
+      </div>`:""}
+      ${D.length>1&&!re&&!Z?`
+      <div class="chips" role="group" aria-label="Which detail you are giving">
+        ${D.map(C=>`
+          <button type="button" data-ref-kind="${k(C.key)}" aria-pressed="${!!E&&C.key===E.key}">${k(C.label)}</button>
+        `).join("")}
+      </div>`:""}
+      <div class="row">
+        ${re?`
+        <select class="ref-kind" aria-label="Which detail you are giving">
+          ${E?"":'<option value="" selected disabled>What is it?</option>'}
+          ${D.map(C=>`
+            <option value="${k(C.key)}" ${E&&C.key===E.key?"selected":""}>${k(C.label)}</option>
+          `).join("")}
+        </select>`:""}
+        <input class="ref-value${x?" invalid":""}" type="${(E==null?void 0:E.inputMode)==="email"?"email":"text"}"
+          inputmode="${k((E==null?void 0:E.inputMode)==="numeric"||(E==null?void 0:E.inputMode)==="tel"?"numeric":"text")}"
+          value="${k(y)}"
+          placeholder="${k(E?E.placeholder||E.label:"Your ID")}"
+          aria-label="${k(E?E.label:"Your ID")}" ${x?'aria-invalid="true"':""} />
+      </div>
+      ${E!=null&&E.hint?`<p class="hint">${k(E.hint)}</p>`:""}
+      ${x?`<p class="field-err" role="alert">${_}<span>${k(x)}</span></p>`:""}
+      ${z?`<button type="button" class="link" data-act="ref-skip">${u==="ask"?"I don't have this — send without it":"Not sure — send as it is"}</button>`:""}`,m.querySelectorAll("[data-ref-cand]").forEach(C=>{C.addEventListener("click",()=>{Q(n[Number(C.dataset.refCand)]),R()})}),m.querySelectorAll("[data-ref-kind]").forEach(C=>{C.addEventListener("click",()=>{g=C.dataset.refKind,x="",h=!1,R()})});const j=m.querySelector(".ref-value");j.addEventListener("input",()=>{y=j.value,x="",h=!1}),j.addEventListener("keydown",C=>{C.key==="Enter"&&(C.preventDefault(),f.click())}),(G=m.querySelector(".ref-kind"))==null||G.addEventListener("change",C=>{var b;g=C.target.value,x="",R(),(b=m.querySelector(".ref-value"))==null||b.focus()}),(X=m.querySelector('[data-act="ref-skip"]'))==null||X.addEventListener("click",()=>{$=!0,d=!1,g=null,y="",x="",h=!1,R(),a("")}),((!E&&y?m.querySelector("[data-ref-kind], .ref-kind"):null)||j).focus()}function V(E){if(n=E.conflicts.length?E.conflicts:E.loose.slice(0,4),u=E.conflicts.length?"confirm":E.loose.length?"suggest":"ask",d=!0,n.length)if(n.length===1)Q(n[0]);else{y="";const[z]=n;g=n.every(D=>D.kinds.length===1&&D.kinds[0].key===z.kinds[0].key)?z.kinds[0].key:null}else g=g||o.fields[0].key;R()}function B(){if(o.policy==="off"||!o.fields.length||r().length)return!1;const E=p();return s(E)||$&&o.policy!=="required"?!1:E}function N(){if(d&&y.trim()&&!g)return x="Pick what this ID is.",R(),!0;const E=B();if(E)return d?R():V(E),a(""),!0;if(g&&y.trim()){const z=o.fields.find(H=>H.key===g);if(!h&&z&&!Me(z,y))return x=`That does not look like a ${z.label.toLowerCase()}. Press Send again to use it anyway.`,h=!0,R(),!0}return!1}e.holdForReference=N,e.answeredReference=r}const pt={info:ue,success:O,warning:He,critical:_};function ut(e,{where:t,onDismiss:a}){const l=document.createElement("div");l.className=`notice tone-${e.tone} at-${t}`,l.setAttribute("role","status");const i=document.createElement("span");i.className="notice-ico",i.setAttribute("aria-hidden","true"),i.innerHTML=pt[e.tone]||ue;const f=document.createElement("div");f.className="notice-text";const m=document.createElement("strong");if(m.textContent=e.title,f.append(m),e.body){const o=document.createElement("p");o.textContent=e.body,f.append(o)}if(e.ctaHref&&e.ctaLabel){const o=document.createElement("a");o.className="notice-cta",o.href=e.ctaHref,o.textContent=e.ctaLabel,/^https?:/i.test(e.ctaHref)&&(o.target="_blank",o.rel="noopener noreferrer"),f.append(o)}if(l.append(i,f),e.dismissible&&a){const o=document.createElement("button");o.type="button",o.className="notice-x",o.setAttribute("aria-label","Dismiss this notice"),o.innerHTML=J,o.addEventListener("click",()=>a(e)),l.append(o)}return l}const ht=3;function bt(e){const{client:t,cfg:a,notices:l}=e;let i=[];function f(){const o=i.slice(0,ht);l.replaceChildren(...o.map(d=>ut(d,{where:"panel",onDismiss:m}))),l.hidden=o.length===0}function m(o){t.dismissAnnouncement(o),i=i.filter(d=>d!==o),f(),e.titleInput.focus()}a.announcements!==!1&&typeof t.announcements=="function"&&t.announcements().then(o=>{e.closed||(i=o,f())}).catch(()=>{})}function ft(e){const{client:t,cfg:a,titleInput:l,known:i}=e;let f=[],m="",o=null,d=null;function g(){a.knownIssues!==!1&&t.knownIssues().then($=>{f=$,n()}).catch(()=>{})}let y=null;function x($){if(a.knownIssues===!1)return;clearTimeout(y),d==null||d.abort();const h=($||"").trim();if(h.length<3){g();return}y=setTimeout(()=>{d=new AbortController,t.matchKnownIssues(h,{signal:d.signal}).then(p=>{p.length&&(f=p,n())}).catch(()=>{})},250)}function n(){if(!f.length){i.hidden=!0,i.innerHTML="";return}i.hidden=!1,i.innerHTML=`
+      <p class="known-h">Already reported</p>
+      ${f.map($=>`
+        <div class="issue ${$.joined?"is-joined":""}">
+          <span class="who">
+            <span class="t">${k($.title)}</span>
+            <span class="meta">${k(u($))}</span>
+          </span>
+          <button class="join" type="button" data-join="${k($.id)}"
+            ${$.joined?"disabled":""}>${$.joined?"Following":"Me too"}</button>
+        </div>
+        ${o===$.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="${k($.id)}">Follow</button>
+        </div>`:""}
+      `).join("")}
+      ${m?`<p class="err">${k(m)}</p>`:""}`}function u($){const h=$.status==="IN_PROGRESS"?"Being worked on now":"Not fixed yet",p=$.affectedCount===0?"":` · ${$.affectedCount} ${$.affectedCount===1?"person has":"people have"} said this is happening to them`;return`${h} · reported ${te($.since)}${p}`}i.addEventListener("click",async $=>{var c,S,T,w,v;const h=$.target.closest("[data-join]"),p=$.target.closest("[data-join-confirm]");if(!h&&!p)return;const s=(p||h).getAttribute(p?"data-join-confirm":"data-join");m="";const r=((S=(c=i.querySelector(".join-email"))==null?void 0:c.value)==null?void 0:S.trim())||((T=t.signedInAs())==null?void 0:T.email)||((w=t.config.user)==null?void 0:w.email);if(!r){o=s,n(),(v=i.querySelector(".join-email"))==null||v.focus();return}try{const L=await t.meToo(s,{email:r});o=null,f=f.map(Q=>Q.id===s?{...Q,joined:!0,affectedCount:L.affectedCount??Q.affectedCount}:Q),n()}catch(L){m=L.message.replace("[BugCatch] ",""),n()}}),g(),l.addEventListener("input",()=>x(l.value))}function gt(e){const{client:t,cfg:a,titleInput:l,descInput:i,picks:f}=e;let m=[],o=null;function d(){if(!m.length){f.hidden=!0,f.innerHTML="";return}f.hidden=!1,f.innerHTML=`
+      <p class="picks-h">Get an answer right away</p>
+      <div class="picks-grid" role="group" aria-label="Common questions">
+        ${m.map(g=>`
+          <button type="button" class="pick" data-pick="${k(g.key)}"
+            aria-pressed="${(o==null?void 0:o.key)===g.key}">
+            <span class="t">${k(g.title)}</span>
+            ${g.hint?`<span class="h">${k(g.hint)}</span>`:""}
+          </button>`).join("")}
+      </div>
+      ${o?`<p class="picks-note">${O}<span>Our assistant will check your account and reply here. Add anything else below, then send.</span></p>`:""}`}f.addEventListener("click",g=>{const y=g.target.closest("[data-pick]");if(!y)return;const x=m.find(u=>u.key===y.dataset.pick);if(!x)return;const n=o&&l.value.trim()===o.title;(o==null?void 0:o.key)===x.key?(o=null,n&&(l.value="")):(o=x,(!l.value.trim()||n)&&(l.value=x.title)),l.dispatchEvent(new Event("input",{bubbles:!0})),d(),o&&i.focus()}),a.agentIssues!==!1&&typeof t.agentIssues=="function"&&t.agentIssues().then(g=>{m=g,d()}).catch(()=>{}),e.pickedIssue=()=>o}function mt(e){const{client:t,scrim:a,say:l,callBtn:i,close:f}=e;let m=!1;function o(){t.callKind().then(y=>{y&&(m=!0,e.preloadCall(),i.hidden=e.mustSignIn())}).catch(()=>{})}o(),i.addEventListener("click",async()=>{e.sending=!0,l(""),e.refreshSendState(),i.disabled=!0,i.innerHTML='<span class="spinner"></span>Ringing…';try{const y=await t.startCall();d(y)}catch(y){e.sending=!1,i.disabled=!1,i.innerHTML=`${ee}Talk to the team`,e.refreshSendState(),y.filed?e.succeed(y.filed,{callFailed:y.reason||"The call could not be started."}):(l(y.message.replace("[BugCatch] ","")),e.recheckSignIn())}});function d(y){const x=a.querySelector(".panel"),n=y!=null&&y.bugId?String(y.bugId).slice(0,8):null;x.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${n?` <code>${k(n)}</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 u=x.querySelector(".call-state"),$=x.querySelector(".call-dot"),h={ringing:"Ringing the team…",connecting:"Someone answered — connecting…",connected:"Connected",missed:"Nobody was free",ended:"Call ended",failed:"The call dropped"},p=["ended","failed","missed"],s=t.on("call",({state:r})=>{if(u.textContent=h[r]||r,$.classList.toggle("off",p.includes(r)),p.includes(r)&&(x.querySelector('[data-act="hangup"]').textContent="Close",r==="missed")){const c=x.querySelector(".call-note");c&&(c.textContent="Nobody was free to pick up just now. Your report is filed and the team will reply in the chat.")}});x.querySelector('[data-act="hangup"]').addEventListener("click",()=>{s(),t.endCall(),f()})}function g(y,x,n){const u=document.createElement("div");u.className="livecall",u.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>
+      ${n!=null&&n.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>`,y.insertBefore(u,x);const $=u.querySelector(".who"),h=u.querySelector(".secs"),p=u.querySelector(".call-dot"),s=u.querySelector('[data-act="mute"]'),r=u.querySelector('[data-act="hangup"]');let c=null;const S=()=>{c&&(clearInterval(c),c=null)},T=v=>{S(),p.classList.add("off"),u.classList.add("over"),$.textContent=v,h.hidden=!0,s.hidden=!0,r.textContent="Dismiss",r.classList.remove("danger")},w=t.on("call",({state:v})=>{if(v==="ringing"&&($.textContent="Calling the team…"),v==="connecting"&&($.textContent="Someone answered — connecting…"),v==="connected"){$.textContent="You're on a call with the team",s.hidden=!1,h.hidden=!1;const L=Date.now();S(),c=setInterval(()=>{h.textContent=ae(Math.floor((Date.now()-L)/1e3))},1e3),h.textContent="0s"}v==="missed"&&T("Nobody was free. Send a message instead and the team will pick it up."),v==="ended"&&T("Call ended."),v==="failed"&&T("The call dropped.")});s.addEventListener("click",()=>{const v=n.setMuted(!n.isMuted());s.textContent=v?"Unmute":"Mute",$.textContent=v?"You're muted":"You're on a call with the team"}),r.addEventListener("click",()=>{w(),S(),t.endCall(),u.remove(),e.refreshThread(e.openReportId())})}e.offerCall=o,e.callOffered=()=>m,e.showLiveCall=g}function vt(e){var w;const{client:t,say:a,compose:l,sendBtn:i,historyBtn:f,callBtn:m,whoami:o}=e;let d={mode:t.lastLoginMode||"off",signedIn:null},g="idle",y=((w=t.config.user)==null?void 0:w.email)||"",x="",n=!1,u="";const $=()=>d.mode==="required"&&!d.signedIn;function h(){const v=$();l.hidden=v,i.hidden=v,f&&(f.hidden=v),v?m.hidden=!0:e.callOffered()&&(m.hidden=!1)}function p(){var L;if(d.mode==="off"){o.hidden=!0,o.innerHTML="";return}o.hidden=!1,o.classList.toggle("asking",g!=="idle");const v=u?`<div class="after err">${k(u)}</div>`:"";if(g==="idle"){if(d.signedIn){o.innerHTML=`<span class="who">Signed in as <strong>${k(d.signedIn.email)}</strong></span><button type="button" class="link" data-act="signout">Sign out</button>`;return}const Q=(L=t.config.user)==null?void 0:L.email;o.innerHTML=`<span class="who">${d.mode==="required"?"Sign in to report a bug here.":Q?`Reporting as <strong>${k(Q)}</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(g==="email"){o.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${d.mode==="required"?", and this project asks for it":""}.</p>
+        <div class="row">
+          <input type="email" data-fld="email" value="${k(y)}"
+            placeholder="you@example.com" autocomplete="email" spellcheck="false"
+            aria-label="Your email address" ${n?"disabled":""} />
+          <button type="button" class="primary" data-act="code" ${n?"disabled":""}>
+            ${n?"Sending…":"Send code"}
+          </button>
+        </div>
+        ${v}
+        ${d.mode==="optional"?'<div class="after"><button type="button" class="link" data-act="skip">Not now</button></div>':""}`;return}o.innerHTML=`
+      <p class="why">We sent a code to <strong>${k(y)}</strong>. It expires in ten minutes.</p>
+      <div class="row">
+        <input type="text" class="code" data-fld="code" value="${k(x)}"
+          placeholder="123456" inputmode="numeric" autocomplete="one-time-code"
+          maxlength="8" aria-label="The code we emailed you" ${n?"disabled":""} />
+        <button type="button" class="primary" data-act="confirm" ${n?"disabled":""}>
+          ${n?"Checking…":"Sign in"}
+        </button>
+      </div>
+      ${v}
+      <div class="after">
+        <button type="button" class="link" data-act="resend" ${n?"disabled":""}>Send it again</button>
+        <button type="button" class="link" data-act="signin-back" ${n?"disabled":""}>Use another address</button>
+      </div>`}function s({focus:v=!1}={}){var Q;if(p(),h(),!v||n)return;const L=o.querySelector("[data-fld]");L&&(L.focus(),(Q=L.setSelectionRange)==null||Q.call(L,L.value.length,L.value.length))}o.addEventListener("input",v=>{const L=v.target.closest("[data-fld]");L&&(L.dataset.fld==="email"?y=L.value:x=L.value)}),o.addEventListener("keydown",v=>{v.key!=="Enter"||!v.target.closest("[data-fld]")||(v.preventDefault(),g==="email"?r():c())});async function r({resent:v=!1}={}){const L=y.trim();if(!L){u="Enter the address to send the code to.",s({focus:!0});return}n=!0,u="",s();try{await t.signIn(L),y=L,v||(x=""),g="code"}catch(Q){u=Q.message}finally{n=!1,s({focus:!0})}}async function c(){const v=x.trim();if(!v){u="Enter the code we emailed you.",s({focus:!0});return}n=!0,u="",s();try{const L=await t.confirmSignIn(y.trim(),v);d.signedIn=L,g="idle",x="",a(""),e.offerCall()}catch(L){u=L.message}finally{n=!1,s({focus:g!=="idle"})}}o.addEventListener("click",async v=>{const L=v.target.closest("button[data-act]");if(!L)return;const Q=L.dataset.act;if(Q==="signin"){g="email",u="",s({focus:!0});return}if(Q==="skip"){g="idle",u="",s();return}if(Q==="signin-back"){g="email",u="",x="",s({focus:!0});return}if(Q==="code"){r();return}if(Q==="resend"){r({resent:!0});return}if(Q==="confirm"){c();return}if(Q==="signout"){n=!0,s();try{await t.signOut()}finally{d.signedIn=null,n=!1,g=d.mode==="required"?"email":"idle",s({focus:g!=="idle"})}}});async function S({announce:v=!1}={}){const L=await t.loginState();d={mode:L.mode,signedIn:L.signedIn},t.lastLoginMode=L.mode,$()&&g==="idle"&&(g="email"),d.signedIn&&(g="idle"),v&&L.signedOutReason&&a(L.signedOutReason,"info"),s()}S({announce:!0}).catch(()=>{});function T(){d.mode!=="off"&&S().catch(()=>{})}e.mustSignIn=$,e.recheckSignIn=T}const xt=/Did this answer your question\?/i;function Te(e){const t=e||[];if(!t.length)return"";let a=null,l=null;return t.map(i=>{var y,x,n,u;const f=K(i.at),m=f&&f!==a?`<div class="day-sep" role="separator">${k(Ye(i.at))}</div>`:"";if(m&&(a=f,l=null),!i.from)return l=null,m+wt(i);const o={from:i.from,author:(y=i.reply)==null?void 0:y.author,automated:(x=i.reply)==null?void 0:x.automated,body:(n=i.reply)==null?void 0:n.body,at:i.at,attachments:(u=i.reply)==null?void 0:u.attachments},d=yt(o),g=l&&l.who===d&&Math.abs(new Date(i.at).getTime()-new Date(l.at).getTime())<5*6e4;return l={who:d,at:i.at},m+ze(o,g?"cont":"")}).join("")}function yt(e){return e.from==="reporter"?"me":e.automated?"assistant":`team:${e.author||""}`}function wt(e){const t=ge(e.at);return`
+    <div class="sys k-${k(e.kind)}">
+      <span class="dot" aria-hidden="true"></span>${k(e.summary||"")}${t?`
+      <span class="t">· ${k(t)}</span>`:""}
+    </div>`}function ze(e,t=""){const a=e.from==="reporter",l=e.body||"",i=e.attachments||[],f=!a&&!!e.automated,m=l?`<span class="msg-text">${k(l)}</span>`:"",o=i.length?`<div class="att">${i.map($t).join("")}</div>`:"";let d="",g="";if(f)d='<span class="msg-who auto">Assistant <span class="tag">AI</span></span>',g=`<span class="av bot" aria-hidden="true">${F}</span>`;else if(!a){const x=e.author||"Support team";d=`<span class="msg-who">${k(x)}</span>`,g=`<span class="av" aria-hidden="true">${k(_e(x))}</span>`}t.includes("cont")&&(d="");const y=f&&/it goes to the same person/i.test(l)?`<div class="quick" role="group" aria-label="Answer">
+        <button type="button" data-quick="Yes, this is the problem">${O}That's right</button>
+        <button type="button" data-quick="No, that is not the problem">That's not it</button>
+      </div>`:f&&xt.test(l)?`<div class="quick" role="group" aria-label="Did this answer your question?">
+          <button type="button" data-quick="Yes, that answers it">${O}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 ${a?"mine":"theirs"} ${f?"auto":""} ${t}">
+      ${g}
+      ${d}
+      <div class="bubble ${l?"":"silent"}">${m}${o}</div>
+      ${y}
+      <span class="msg-when">${k(ge(e.at)||te(e.at))}</span>
+    </div>`}function kt(){return`
+    <div class="typing-row">
+      <span class="av bot" aria-hidden="true">${F}</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 $t(e){const t=k(e.name||"attachment");if(!e.url)return`<span class="file"><span class="nm">${t}</span></span>`;const a=k(e.url);return e.type==="SCREENSHOT"?`<a href="${a}" target="_blank" rel="noopener noreferrer"><img src="${a}" alt="${t}" loading="lazy"></a>`:e.type==="AUDIO"?`<audio controls preload="metadata" src="${a}"></audio>`:e.type==="VIDEO"?`<video controls preload="metadata" src="${a}"></video>`:`
+    <a class="file" href="${a}" target="_blank" rel="noopener noreferrer" download>
+      <span class="nm">${t}</span>
+      ${e.size?`<span class="sz">${k(Y(e.size))}</span>`:""}
+    </a>`}function St(e,t,a,l){var T;const{client:i,cfg:f}=e,m=document.createElement("div");m.className="composer",m.innerHTML=`
+    <div class="staged" hidden></div>
+    <div class="row">
+      <div class="tools">
+        ${f.attachments===!1?"":`
+        <button class="tool" type="button" data-act="attach" title="Attach a file" aria-label="Attach a file">${he}</button>
+        <button class="tool" type="button" data-act="voice" title="Record a voice note" aria-label="Record a voice note">${be}</button>`}
+        <button class="tool" type="button" data-act="livecall" title="Call the team" aria-label="Call the team" hidden>${ee}</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>${fe}</button>
+    </div>
+    <div class="note" hidden></div>
+    <input type="file" hidden multiple accept="${ve.join(",")}">`,t.appendChild(m);const o=m.querySelector(".staged"),d=m.querySelector("textarea"),g=m.querySelector('[data-act="send"]'),y=m.querySelector('[data-act="voice"]'),x=m.querySelector('[data-act="livecall"]'),n=m.querySelector("input[type=file]"),u=m.querySelector(".note"),$=[];let h=null,p=!1;function s(w,v=""){u.hidden=!w,u.className=`note ${v}`,u.textContent=w||""}function r(){const w=$.filter(v=>v.storageKey);g.disabled=p||!d.value.trim()&&!w.length,o.hidden=!$.length,o.innerHTML=$.map((v,L)=>`
+      <span class="chip ${v.storageKey?"":"uploading"}">
+        <span class="nm">${k(v.name)}</span>
+        <span class="sz">${v.storageKey?Y(v.size):"sending…"}</span>
+        <button type="button" data-drop="${L}" aria-label="Remove ${k(v.name)}">${J}</button>
+      </span>`).join("");for(const v of o.querySelectorAll("[data-drop]"))v.addEventListener("click",()=>{$.splice(Number(v.dataset.drop),1),r()})}async function c(w,v,L){const Q={name:L,size:w.size,storageKey:null};$.push(Q),r();try{const{storageKey:R,mime:V}=await i.uploadAttachment(w,v);Q.storageKey=R,Q.mime=V}catch(R){$.splice($.indexOf(Q),1),s(R.message||"That file could not be sent.","err")}r()}d.addEventListener("input",()=>{d.style.height="auto",d.style.height=`${Math.min(d.scrollHeight,120)}px`,r()}),d.addEventListener("keydown",w=>{w.key==="Enter"&&!w.shiftKey&&!w.isComposing&&(w.preventDefault(),S())}),(T=m.querySelector('[data-act="attach"]'))==null||T.addEventListener("click",()=>n.click()),n.addEventListener("change",()=>{s("");for(const w of n.files){if(w.size>i.config.maxAttachmentBytes){s(`${w.name} is larger than ${Y(i.config.maxAttachmentBytes)}.`,"err");continue}c(w,w.type,w.name)}n.value=""}),y&&!Fe()&&(y.disabled=!0,y.title="This browser cannot record audio"),y==null||y.addEventListener("click",async()=>{if(h){const w=h;h=null,y.classList.remove("recording"),y.innerHTML=be,s("");const{blob:v,mime:L}=await w.stop();v.size&&c(v,L,"Voice note");return}try{s(""),h=await Je({maxMs:i.config.maxRecordingMs,onTick:w=>s(`Recording — ${ae(w)}. Tap the mic to stop.`),onAutoStop:()=>y.click()}),y.classList.add("recording"),y.innerHTML=Ae}catch{h=null,s("The microphone is not available — check the browser permission.","err")}}),i.canCallTeam(l).then(w=>{w&&(x.hidden=!1,e.preloadCall())}).catch(()=>{}),x.addEventListener("click",async()=>{x.disabled=!0,s("");try{const w=await i.startLiveCall(l);e.showLiveCall(t,a,w)}catch(w){s(w.message.replace("[BugCatch] ",""),"err")}finally{x.disabled=!1}}),g.addEventListener("click",S),a.addEventListener("click",w=>{var L,Q;const v=(Q=(L=w.target).closest)==null?void 0:Q.call(L,"[data-quick]");!v||p||(d.value=v.dataset.quick,S())});async function S(){var L;const w=d.value.trim(),v=$.filter(Q=>Q.storageKey);if(!(p||!w&&!v.length)){p=!0,r(),s(""),a.insertAdjacentHTML("beforeend",ze({from:"reporter",body:w,at:new Date().toISOString(),attachments:v.map(Q=>({type:"FILE",name:Q.name,size:Q.size}))},"pending")),U(a,{smooth:!0});try{await i.replyToReport(l,{body:w,attachments:v.map(Q=>({storageKey:Q.storageKey,mime:Q.mime,name:Q.name,size:Q.size}))}),d.value="",d.style.height="auto",$.length=0,await e.refreshThread(l)}catch(Q){(L=a.querySelector(".msg-row.pending"))==null||L.classList.replace("pending","failed"),s(Q.message||"That could not be sent — try again.","err")}finally{p=!1,r()}}}r()}const de=new WeakMap;function Lt(e){var $;const{client:t,scrim:a,close:l}=e;let i=null;function f(h,{callFailed:p=null}={}){if(h!=null&&h.id&&!p){d(h.id,{fresh:!0}).then(s=>{s||m(h,{callFailed:p})});return}m(h,{callFailed:p})}function m(h,{callFailed:p=null}={}){var S;const s=h!=null&&h.id?String(h.id).slice(0,8):null,r=(S=h==null?void 0:h.estimate)!=null&&S.label?String(h.estimate.label):null,c=p?`<p class="eta">${k(p)} Your report is filed, and the team will reply in the chat.</p>`:"";a.querySelector(".panel").innerHTML=`
+      <div class="done">
+        <div class="tick">${O}</div>
+        <h3>Thanks — that's on its way.</h3>
+        <p>${s?`Filed as <code>${k(s)}</code>.`:"The team has what they need to reproduce it."}</p>
+        ${c}
+        ${r?`<p class="eta">Reports like this usually take <strong>${k(r)}</strong>. We'll let you know when it moves.</p>`:""}
+      </div>`,setTimeout(l,c?6e3:r?4e3:2e3)}async function o(){const h=a.querySelector(".panel");clearTimeout(g),i=null,h.classList.remove("is-chat"),h.innerHTML=`
+      ${ie({title:"Your reports",sub:"Everything you've reported, and where each one got to."})}
+      <div class="history" aria-busy="true">${Pe(3)}</div>`,h.querySelector('[data-act="close"]').addEventListener("click",l);let p=[];try{({reports:p}=await t.myReports())}catch{const r=h.querySelector(".history");r&&(r.innerHTML=se("Couldn't load your reports just now.",_));return}const s=h.querySelector(".history");if(s){s.removeAttribute("aria-busy"),s.innerHTML=p.length?p.map((r,c)=>`
+        <button class="row" type="button" data-report="${k(r.id)}" style="animation-delay:${Math.min(c,8)*30}ms">
+          <span class="row-ico" aria-hidden="true">${qe}</span>
+          <span class="who">
+            <span class="ttl">${k(r.title)}</span>
+            <span class="sub">${k(r.reference)} · ${k(te(r.createdAt))}</span>
+          </span>
+          <span class="pill ${k(String(r.status).toLowerCase())}">${k(ce(r.status))}</span>
+          <span class="chev" aria-hidden="true">${je}</span>
+        </button>`).join(""):se("You haven't reported anything yet.",Oe);for(const r of s.querySelectorAll("[data-report]"))r.addEventListener("click",()=>d(r.dataset.report))}}async function d(h,{fresh:p=!1}={}){var w;const s=a.querySelector(".panel");clearTimeout(g),s.classList.add("is-chat"),s.innerHTML=`
+      ${ie({back:!0,title:p?"Looking into it":"Your report",sub:p?"Our assistant is on it — it may ask you a question here.":"Everything that has happened, and a way to answer."})}
+      <div class="history chatting" aria-busy="true"><div class="thread">${We()}</div></div>`,s.querySelector('[data-act="close"]').addEventListener("click",l),s.querySelector('[data-act="back"]').addEventListener("click",o);let r=null;try{r=await t.myReport(h)}catch{r=null}const c=s.querySelector(".history");if(!c||!s.querySelector('[data-act="back"]'))return!1;if(!r)return p?(s.classList.remove("is-chat"),!1):(c.removeAttribute("aria-busy"),c.innerHTML=se("Couldn't load that report just now.",_),!1);i=h,t.markReportRead(h);const S=Te(r.timeline);c.classList.add("chatting"),c.removeAttribute("aria-busy"),c.innerHTML=`
+      <div class="report-head">
+        <span class="ttl">${k(r.title)}</span>
+        <span class="sub">${k(r.reference)} · ${k(r.project||"")}</span>
+        <span class="pill ${k(String(r.status).toLowerCase())}">${k(ce(r.status))}</span>
+        ${(w=r.estimate)!=null&&w.label?`<span class="eta-line">Usually takes ${k(String(r.estimate.label))}</span>`:""}
+      </div>
+      <div class="thread" role="log" aria-live="polite" aria-label="Conversation">${S}</div>`;const T=c.querySelector(".thread");return de.set(T,S),U(T),x(c,r),r.canReply&&St(e,c,T,h),y(c,r,h),U(T),!0}let g=null;function y(h,p,s){var B,N,E;clearTimeout(g);const r=p.assistant,c=h.querySelector(".thread");let S=h.querySelector(".assistant");if(!r){S==null||S.remove(),(B=c==null?void 0:c.querySelector(".typing-row"))==null||B.remove();return}const T=(S==null?void 0:S.dataset.phase)||null;S||(S=document.createElement("div"),S.setAttribute("role","status"),S.setAttribute("aria-live","polite"),(N=h.querySelector(".report-head"))==null||N.after(S)),S.className=`assistant ${k(r.phase)}`,S.dataset.phase=r.phase;const w=r.steps||[],v=w.filter(z=>z.state==="done").length,L=w.some(z=>z.state==="active")?.5:0,Q=w.length?Math.round((v+L)/w.length*100):0,R=`
+      <div class="as-body${T&&T!==r.phase?" entering":""}">
+        <div class="as-top">
+          <span class="as-orb" aria-hidden="true">${r.phase==="analyzing"?'<span class="as-spin"></span>':r.phase==="calling"?ee:r.phase==="resolved"?O:F}</span>
+          <div class="as-text">
+            <div class="as-title">${k(r.title)}</div>
+            <div class="as-detail">${k(r.detail)}</div>
+          </div>
+        </div>
+      </div>
+      ${w.length?`
+      <div class="as-progress" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Q}"><i style="width:${Q}%"></i></div>
+      <ol class="as-steps">${w.map(z=>`<li class="${k(z.state)}"${z.state==="active"?' aria-current="step"':""}><span class="dot"></span><span class="lbl">${k(z.label)}</span></li>`).join("")}</ol>`:""}`,V=JSON.stringify([r.phase,r.title,r.detail,w]);if(S.dataset.key!==V){const z=S.querySelector(".as-progress i"),H=z==null?void 0:z.style.width;S.innerHTML=R,S.dataset.key=V;const D=S.querySelector(".as-progress i");D&&H&&(D.style.width=H,requestAnimationFrame(()=>{D.style.width=`${Q}%`}))}if(c){const z=me(c),H=c.querySelector(".typing-row");r.phase!=="analyzing"?H==null||H.remove():(!H||H!==c.lastElementChild)&&(H==null||H.remove(),c.insertAdjacentHTML("beforeend",kt()),z&&U(c))}r.phase==="analyzing"?g=setTimeout(()=>n(s),3e3):r.phase==="calling"?g=setTimeout(()=>n(s),1e4):r.phase==="needs_info"&&T!=="needs_info"&&((E=h.querySelector(".composer textarea"))==null||E.focus())}function x(h,p){var r,c;if((r=h.querySelector(".fix-verification"))==null||r.remove(),!p.resolvedAt||!["RESOLVED","CLOSED"].includes(p.status))return;const s=document.createElement("div");s.className="fix-verification",p.verification?s.textContent=p.verification==="CONFIRMED"?"You confirmed that this fix works.":"Your feedback was recorded.":(s.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>',s.querySelectorAll("[data-result]").forEach(S=>{S.onclick=async()=>{s.querySelectorAll("button").forEach(T=>{T.disabled=!0});try{await t.verifyFix(p.id,{result:S.dataset.result,resolvedAt:p.resolvedAt,note:s.querySelector("textarea").value}),await d(p.id)}catch(T){s.querySelector(".feedback-status").textContent=T.message,s.querySelectorAll("button").forEach(w=>{w.disabled=!1})}}})),(c=h.querySelector(".report-head"))==null||c.after(s)}async function n(h){const p=a.querySelector(".history.chatting"),s=p==null?void 0:p.querySelector(".thread");if(!s||i!==h)return;let r=null;try{r=await t.myReport(h)}catch{}if(e.closed||!r||i!==h)return;x(p,r);const c=me(s),S=Te(r.timeline);de.get(s)!==S&&(s.innerHTML=S,de.set(s,S)),y(p,r,h),c&&U(s);const T=p.querySelector(".report-head .pill");T&&(T.className=`pill ${String(r.status).toLowerCase()}`,T.textContent=ce(r.status))}const u=t.on("update",h=>{!i||(h==null?void 0:h.bugId)!==i||(t.markReportRead(i),n(i))});e.onDestroy(()=>{u(),clearTimeout(g)}),($=a.querySelector('[data-act="history"]'))==null||$.addEventListener("click",o),e.succeed=f,e.refreshThread=n,e.openReportId=()=>i}function Qt({root:e,host:t,dock:a,client:l,onClose:i,preloadCall:f=()=>{}}){Et(e);const m=l.config,o=document.createElement("div");o.className=`scrim ${a.classList.contains("at-left")?"at-left":"at-right"} ${a.classList.contains("at-top")?"at-top":"at-bottom"}`,o.style.setProperty("--bc-dock-h",`${Math.round(a.getBoundingClientRect().height)}px`),o.innerHTML=`
+    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
+      ${ie({id:"bc-h",title:"Tell us what went wrong",sub:"Our assistant starts looking right away. We attach the page details for you."})}
+      <div class="body">
+        <div class="slot" role="alert"></div>
+        <!-- What the project's team is telling visitors. Drawn only when it
+             has published something. -->
+        <div class="notices" hidden></div>
+        <div class="whoami" hidden></div>
+        <!-- The questions the assistant can answer from their account and
+             close by itself. Drawn only when the project offers any. -->
+        <div class="picks" hidden></div>
+        <div class="known" hidden></div>
+        ${ot(m)}
+      </div>
+      <div class="foot">
+        <span class="note" aria-live="polite"></span>
+        ${l.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>${ee}Talk to the team</button>
+        <button class="primary" type="button" data-act="send">Send report ${fe}</button>
+      </div>
+      <div class="powered">Powered by
+        <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${Be}</a>
+      </div>
+    </div>`;const d=c=>o.querySelector(c),g=d(".slot"),y=[],x={client:l,cfg:m,root:e,host:t,dock:a,scrim:o,$: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"),sending:!1,closed:!1,say:r,close:p,preloadCall:f,onDestroy:c=>{y.push(c)},refreshSendState:null,isRecording:null,stopRecording:null,holdForReference:null,answeredReference:null,pickedIssue:null,offerCall:null,callOffered:null,showLiveCall:null,mustSignIn:null,recheckSignIn:null,succeed:null,refreshThread:null,openReportId:null};rt(x),dt(x),bt(x),ft(x),gt(x),mt(x),vt(x),Lt(x);const n=document.activeElement,u=document.documentElement.style,$=u.overflow;u.overflow="hidden";function h(){x.closed||(y.forEach(c=>c()),x.closed=!0,u.overflow=$,document.removeEventListener("keydown",s,!0),o.remove(),a.hidden=!1,t.style.opacity="",i==null||i())}function p(){var c;if(!x.closed){o.classList.add("closing"),setTimeout(h,160);try{(c=n==null?void 0:n.focus)==null||c.call(n)}catch{}}}function s(c){if(c.key==="Escape"){if(c.stopPropagation(),x.isRecording()){x.stopRecording({keep:!1});return}x.sending||p();return}if(c.key!=="Tab"||x.isRecording())return;const S=[...o.querySelectorAll("button:not(:disabled), input:not([hidden]), textarea, select, [href]")].filter(L=>L.offsetParent!==null||L===document.activeElement);if(!S.length)return;const T=S[0],w=S[S.length-1],v=o.getRootNode().activeElement;c.shiftKey&&v===T?(c.preventDefault(),w.focus()):!c.shiftKey&&v===w&&(c.preventDefault(),T.focus())}document.addEventListener("keydown",s,!0),o.addEventListener("click",c=>{c.target===o&&!x.sending&&p()}),d('[data-act="close"]').addEventListener("click",p);function r(c,S="err"){g.innerHTML=c?`<div class="msg ${S}">${S==="err"?_:""}<span>${k(c)}</span></div>`:""}return e.appendChild(o),x.refreshSendState(),x.titleInput.focus(),{destroy:h,close:p}}function Et(e){if(e.querySelector("style[data-panel]"))return;const t=document.createElement("style");t.setAttribute("data-panel",""),t.textContent=Ne;const a=e.querySelector("style");a?a.after(t):e.prepend(t)}const Mt=Object.freeze(Object.defineProperty({__proto__:null,openPanel:Qt},Symbol.toStringTag,{value:"Module"})),Tt="0.18.0",Ce="__bugcatchChunks",zt=e=>`${e}@${Tt}`;function Ct(e,t){const a=window[Ce]||(window[Ce]={});a[zt(e)]=t}Ct("panel",Mt)})();
+//# sourceMappingURL=bugcatch-panel.umd.js.map