@sphoro/bugcatch-web-sdk 0.18.0 → 0.20.0

package/dist/bugcatch-panel.es.js

@@ -1,5 +1,5 @@
-import { c as de, s as we, a as ke, R as be, h as P, n as $e, b as Se, d as Qe, e as te, f as G, g as W, r as Le, v as Te, i as ze, S as Ee, U as Me, j as qe, k as Ce, l as He } from "./bugcatch-core.es.js";
-const Ie = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2a1 1 0 0 0 .83-.45l.94-1.4A1 1 0 0 1 9.3 4.7h5.4a1 1 0 0 1 .83.45l.94 1.4a1 1 0 0 0 .83.45h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z"/><circle cx="12" cy="13" r="3.4"/></svg>', Ae = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="12.5" height="12" rx="2.2"/><path d="M15.5 10.8l4.2-2.6a.6.6 0 0 1 .92.5v6.6a.6.6 0 0 1-.92.5l-4.2-2.6z"/></svg>', fe = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11.5l-7.6 7.6a4.6 4.6 0 0 1-6.5-6.5l8-8a3.2 3.2 0 0 1 4.5 4.5l-8 8a1.8 1.8 0 0 1-2.5-2.5l7.1-7.1"/></svg>', pe = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2.5" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6"/></svg>', ge = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l16-8-6 16-2.6-6.2L4 12Z"/></svg>', Re = '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>', Ve = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5.5L8 12l6.5 6.5"/></svg>', ne = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.2 3.5h3l1.5 3.7-2 1.4a11.5 11.5 0 0 0 5.7 5.7l1.4-2 3.7 1.5v3a1.8 1.8 0 0 1-2 1.8A15.6 15.6 0 0 1 4.4 5.5a1.8 1.8 0 0 1 1.8-2z"/></svg>', De = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.6-5.9M20 4v4.5h-4.5"/></svg>', X = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5c.5 4.6 2.9 7 7.5 7.5v.1c-4.6.5-7 2.9-7.5 7.5h-.1c-.5-4.6-2.9-7-7.5-7.5V10c4.6-.5 7-2.9 7.5-7.5z"/><path d="M18.6 15.2c.2 1.9 1.2 2.9 3.1 3.1v.1c-1.9.2-2.9 1.2-3.1 3.1h-.1c-.2-1.9-1.2-2.9-3.1-3.1v-.1c1.9-.2 2.9-1.2 3.1-3.1z" opacity=".7"/></svg>', je = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 6l6 6-6 6"/></svg>', Oe = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5l2.6-7.2A1.5 1.5 0 0 1 7.5 5.3h9a1.5 1.5 0 0 1 1.4 1L20.5 13.5V18a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18z"/><path d="M3.5 13.5h4.8l1.2 2.2h5l1.2-2.2h4.8"/></svg>', Be = '<svg class="bc-brand" viewBox="0 0 254 60" fill="none" role="img" aria-label="sphoro BugCatch"><g fill="currentColor"><path transform="translate(0.00 40.00) scale(0.04000 -0.04000)" d="M276.00 -14.00Q179.00 -14.00 117.00 28.00Q55.00 70.00 42.00 148.00L158.00 178.00Q165.00 143.00 181.50 123.00Q198.00 103.00 222.50 94.50Q247.00 86.00 276.00 86.00Q320.00 86.00 341.00 101.50Q362.00 117.00 362.00 140.00Q362.00 163.00 342.00 175.50Q322.00 188.00 278.00 196.00L250.00 201.00Q198.00 211.00 155.00 228.50Q112.00 246.00 86.00 277.00Q60.00 308.00 60.00 357.00Q60.00 431.00 114.00 470.50Q168.00 510.00 256.00 510.00Q339.00 510.00 394.00 473.00Q449.00 436.00 466.00 376.00L349.00 340.00Q341.00 378.00 316.50 394.00Q292.00 410.00 256.00 410.00Q220.00 410.00 201.00 397.50Q182.00 385.00 182.00 363.00Q182.00 339.00 202.00 327.50Q222.00 316.00 256.00 310.00L284.00 305.00Q340.00 295.00 385.50 278.50Q431.00 262.00 457.50 231.50Q484.00 201.00 484.00 149.00Q484.00 71.00 427.50 28.50Q371.00 -14.00 276.00 -14.00Z"/><path transform="translate(19.56 40.00) scale(0.04000 -0.04000)" d="M70.00 -200.00V496.00H194.00V436.00H212.00Q229.00 465.00 265.00 487.50Q301.00 510.00 368.00 510.00Q428.00 510.00 479.00 480.50Q530.00 451.00 561.00 394.00Q592.00 337.00 592.00 256.00V240.00Q592.00 159.00 561.00 102.00Q530.00 45.00 479.00 15.50Q428.00 -14.00 368.00 -14.00Q323.00 -14.00 292.50 -3.50Q262.00 7.00 243.50 23.50Q225.00 40.00 214.00 57.00H196.00V-200.00ZM330.00 96.00Q389.00 96.00 427.50 133.50Q466.00 171.00 466.00 243.00V253.00Q466.00 325.00 427.00 362.50Q388.00 400.00 330.00 400.00Q272.00 400.00 233.00 362.50Q194.00 325.00 194.00 253.00V243.00Q194.00 171.00 233.00 133.50Q272.00 96.00 330.00 96.00Z"/><path transform="translate(43.68 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V700.00H196.00V435.00H214.00Q222.00 451.00 239.00 467.00Q256.00 483.00 284.50 493.50Q313.00 504.00 357.00 504.00Q415.00 504.00 458.50 477.50Q502.00 451.00 526.00 404.50Q550.00 358.00 550.00 296.00V0.00H424.00V286.00Q424.00 342.00 396.50 370.00Q369.00 398.00 318.00 398.00Q260.00 398.00 228.00 359.50Q196.00 321.00 196.00 252.00V0.00Z"/><path transform="translate(66.92 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/><path transform="translate(90.00 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V496.00H194.00V440.00H212.00Q223.00 470.00 248.50 484.00Q274.00 498.00 308.00 498.00H368.00V386.00H306.00Q258.00 386.00 227.00 360.50Q196.00 335.00 196.00 282.00V0.00Z"/><path transform="translate(104.44 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/></g><rect x="139.52" y="16" width="1.6" height="26" rx="0.8" fill="var(--bc-brand-mark, #5647ee)" opacity="0.4"/><g fill="var(--bc-brand-mark, #5647ee)"><path transform="translate(154.52 35.00) scale(0.01400 -0.01400)" d="M46.35 0.00V105.85H139.75V594.15H46.35V700.00H404.08Q467.38 700.00 514.79 678.41Q562.20 656.83 588.70 617.33Q615.20 577.83 615.20 523.35V513.70Q615.20 465.52 597.03 434.76Q578.85 404.00 553.91 387.24Q528.98 370.48 506.28 363.30V346.35Q528.98 340.35 555.24 323.50Q581.50 306.65 600.00 275.48Q618.50 244.30 618.50 194.48V184.48Q618.50 126.65 591.41 85.24Q564.33 43.83 516.83 21.91Q469.33 0.00 406.85 0.00ZM259.85 109.15H392.60Q441.20 109.15 469.80 132.60Q498.40 156.05 498.40 198.55V208.20Q498.40 250.70 470.21 274.15Q442.02 297.60 392.60 297.60H259.85ZM259.85 406.75H391.65Q437.55 406.75 466.32 430.11Q495.10 453.48 495.10 493.80V503.80Q495.10 544.95 466.74 567.90Q438.37 590.85 391.65 590.85H259.85Z"/><path transform="translate(167.00 35.00) scale(0.01400 -0.01400)" d="M335.30 -14.00Q251.22 -14.00 190.60 16.63Q129.97 47.25 97.56 104.96Q65.15 162.68 65.15 243.03V700.00H185.25V239.73Q185.25 170.48 224.03 131.99Q262.80 93.50 335.30 93.50Q407.80 93.50 446.57 131.99Q485.35 170.48 485.35 239.73V700.00H605.45V243.03Q605.45 162.68 573.13 104.96Q540.80 47.25 480.09 16.63Q419.38 -14.00 335.30 -14.00Z"/><path transform="translate(179.60 35.00) scale(0.01400 -0.01400)" d="M311.85 -14.00Q238.45 -14.00 179.69 18.50Q120.92 51.00 86.69 113.67Q52.45 176.35 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.23 645.59Q598.33 577.17 598.33 460.87V456.70H479.87V464.52Q479.87 504.67 463.76 536.86Q447.65 569.05 414.99 587.77Q382.32 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 138.89Q257.63 91.85 334.00 91.85Q410.02 91.85 445.12 132.83Q480.22 173.80 480.22 237.92V249.67H302.85V351.88H598.33V0.00H487.52V69.10H470.57Q462.70 50.87 446.06 31.44Q429.42 12.00 397.64 -1.00Q365.85 -14.00 311.85 -14.00Z"/><path transform="translate(192.05 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(204.25 35.00) scale(0.01400 -0.01400)" d="M19.75 0.00 211.62 700.00H421.33L613.20 0.00H489.27L447.42 159.60H185.53L143.68 0.00ZM214.25 270.40H418.70L324.95 624.87H308.00Z"/><path transform="translate(216.31 35.00) scale(0.01400 -0.01400)" d="M233.95 0.00V590.85H24.70V700.00H563.30V590.85H354.05V0.00Z"/><path transform="translate(227.75 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(239.95 35.00) scale(0.01400 -0.01400)" d="M69.50 0.00V700.00H189.60V405.58H466.40V700.00H586.50V0.00H466.40V296.42H189.60V0.00Z"/></g></svg>', Ne = `
+import { s as Le, m as Qe, a as Te, c as ce, b as qe, d as Ee, R as be, h as F, n as ze, e as Me, f as Ce, g as te, i as G, j as P, r as He, v as Ae, k as Re, S as Ie, U as De, l as Ve, o as je, p as Oe } from "./bugcatch-core.es.js";
+const Ne = '<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>', Be = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="12.5" height="12" rx="2.2"/><path d="M15.5 10.8l4.2-2.6a.6.6 0 0 1 .92.5v6.6a.6.6 0 0 1-.92.5l-4.2-2.6z"/></svg>', fe = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11.5l-7.6 7.6a4.6 4.6 0 0 1-6.5-6.5l8-8a3.2 3.2 0 0 1 4.5 4.5l-8 8a1.8 1.8 0 0 1-2.5-2.5l7.1-7.1"/></svg>', pe = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2.5" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6"/></svg>', ge = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l16-8-6 16-2.6-6.2L4 12Z"/></svg>', Ye = '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>', We = '<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>', re = '<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>', Pe = '<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>', Fe = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 6l6 6-6 6"/></svg>', me = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.9l2.75 5.82 6.37.76-4.7 4.37 1.24 6.3L12 17.03l-5.66 3.12 1.24-6.3-4.7-4.37 6.37-.76z"/></svg>', Ke = '<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>', Ue = '<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>', Ze = `
 @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 } }
@@ -15,9 +15,12 @@ const Ie = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-wi
 @keyframes bc-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
 
 /* ---------- scrim + panel ---------- */
+/* Still modal — focus stays in the panel and a click outside closes it — but
+   the host's page only dims enough to say so. It is their product, and the
+   visitor is reporting something about what is on it. */
 .scrim {
   position: fixed; inset: 0; z-index: 2147483001;
-  background: rgba(10,12,16,.32);
+  background: rgba(14,14,16,.14);
   animation: bc-fade-in 200ms ease both;
 }
 .scrim.closing { animation: bc-fade-out 170ms ease both; }
@@ -29,12 +32,11 @@ const Ie = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-wi
 .panel {
   position: fixed;
   display: flex; flex-direction: column;
-  width: calc(100vw - 40px); max-width: 420px;
+  width: calc(100vw - 40px); max-width: 400px;
   max-height: calc(100vh - var(--bc-dock-h, 84px) - 52px);
   overflow: hidden;
   background: var(--bc-bg); color: var(--bc-fg);
   border-radius: var(--bc-r-xl); box-shadow: var(--bc-shadow);
-  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
@@ -49,57 +51,58 @@ const Ie = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-wi
 /* ---------- 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));
+  display: flex; align-items: center; gap: 11px;
+  padding: 14px 10px 13px var(--bc-pad);
+  background: var(--bc-bg);
   border-bottom: 1px solid var(--bc-border);
 }
-.head .mark, .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 .mark { width: 32px; }
+/* The assistant asking its one follow-up wears the same orb, smaller. */
+.avatar.orb { width: 26px; }
 .head .titles { flex: 1; min-width: 0; }
 .head h2 {
-  margin: 0 0 2px; font-size: var(--bc-fs-lg); font-weight: 680; letter-spacing: -.02em; line-height: 1.25;
+  margin: 0 0 1px; font-size: var(--bc-fs-lg); font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.head p {
+  margin: 0; font-size: var(--bc-fs-sm); line-height: 1.4; color: var(--bc-muted);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.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);
+  border: none; border-radius: 999px; background: none; color: var(--bc-muted);
   cursor: pointer; transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
 }
 .icon-btn:hover { background: color-mix(in srgb, var(--bc-fg) 7%, transparent); color: var(--bc-fg); }
 .icon-btn:active { transform: scale(.92); }
 .icon-btn.back { margin: 0 -6px 0 -8px; }
+/* The theme button holds all three glyphs; the host's class picks one. */
+.icon-btn.theme { font-size: 15px; margin-right: -4px; }
+.icon-btn.theme > span { display: none; }
+:host(.bc-light) .icon-btn.theme .m-light,
+:host(.bc-dark) .icon-btn.theme .m-dark,
+:host(.bc-auto) .icon-btn.theme .m-auto { display: block; }
 
 .body {
   flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
-  padding: 16px var(--bc-pad) 6px;
+  padding: 14px var(--bc-pad) 4px;
 }
 
-label { display: block; font-size: var(--bc-fs-sm); font-weight: 620; color: var(--bc-fg); margin-bottom: 7px; }
+label { display: block; font-size: 13px; font-weight: 560; color: var(--bc-fg); margin-bottom: 6px; letter-spacing: -.005em; }
 label .opt { font-weight: 450; color: var(--bc-faint); }
+/* Fields are stone wells that turn white when you are in them, the way the
+   rest of the product's forms do. */
 input[type=text], input[type=email], textarea {
-  width: 100%; padding: 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);
+  width: 100%; padding: 10px 12px; font-size: var(--bc-fs-md); line-height: 1.45;
+  color: var(--bc-fg); background: var(--bc-stone);
+  border: 1px solid transparent; border-radius: var(--bc-r-md);
   transition: border-color 160ms, box-shadow 160ms, background 160ms;
 }
 input[type=text]::placeholder, input[type=email]::placeholder, textarea::placeholder { color: var(--bc-faint); }
-input[type=text]:hover, input[type=email]:hover, textarea:hover { border-color: color-mix(in srgb, var(--bc-fg) 18%, var(--bc-border)); }
+input[type=text]:hover, input[type=email]:hover, textarea:hover { border-color: var(--bc-border); }
 input[type=text]:focus, input[type=email]:focus, textarea:focus {
-  outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring);
+  outline: none; background: var(--bc-bg); border-color: var(--bc-accent); box-shadow: var(--bc-ring);
 }
 input.invalid, input.invalid:focus, textarea.invalid {
   border-color: var(--bc-danger); animation: bc-nudge 240ms ease;
@@ -111,8 +114,8 @@ input.invalid, input.invalid:focus, textarea.invalid {
   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; }
+textarea { min-height: 76px; resize: vertical; }
+.field { margin-bottom: 14px; }
 .field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
 .field-head .count { font-size: var(--bc-fs-xs); color: var(--bc-faint); font-variant-numeric: tabular-nums; }
 
@@ -122,15 +125,15 @@ textarea { min-height: 88px; resize: vertical; }
 .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);
+  background: var(--bc-subtle); border: 1px solid var(--bc-border);
   font-size: var(--bc-fs-sm); color: var(--bc-fg);
 }
 .compose > .note button {
-  padding: 5px 11px; font: inherit; font-size: var(--bc-fs-xs); font-weight: 620;
+  padding: 5px 11px; font: inherit; font-size: var(--bc-fs-xs); font-weight: 600;
   border-radius: 999px; cursor: pointer;
   border: 1px solid var(--bc-accent); background: var(--bc-accent); color: var(--bc-on-accent);
 }
-.compose > .note button[data-discard] { background: transparent; color: var(--bc-muted); border-color: var(--bc-border); }
+.compose > .note button[data-discard] { background: var(--bc-bg); color: var(--bc-fg); border-color: var(--bc-border); }
 
 /* ---------- what is already known ----------
    A help surface in front of the form, not a step in it. Everything here is
@@ -138,58 +141,57 @@ textarea { min-height: 88px; resize: vertical; }
    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;
+/* One small eyebrow style for every group above the form. */
+.known .known-h, .picks .picks-h {
+  margin: 0 0 7px; font-size: 11px; font-weight: 600; letter-spacing: .07em;
   text-transform: uppercase; color: var(--bc-faint);
 }
+.known { margin-bottom: 14px; }
+/* Hairline rows on the panel's own white, so they read as a list to scan
+   rather than more coloured cards to wade through. */
 .known .issue {
   display: flex; align-items: center; gap: 10px;
-  padding: 10px 12px; margin-bottom: 6px;
-  background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  padding: 8px 8px 8px 12px; margin-bottom: 6px;
+  background: var(--bc-bg); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
   animation: bc-rise 240ms var(--bc-ease) both;
 }
-.known .issue.is-joined { border-color: color-mix(in srgb, var(--bc-ok) 55%, var(--bc-border)); }
+.known .issue.is-joined { background: color-mix(in srgb, var(--bc-ok) 6%, var(--bc-bg)); }
 .known .issue .who { flex: 1; min-width: 0; }
 .known .issue .t {
-  display: block; font-size: 13px; font-weight: 620; line-height: 1.4;
+  display: block; font-size: 13px; font-weight: 560; line-height: 1.4;
   color: var(--bc-fg); overflow-wrap: anywhere;
 }
 .known .issue .meta {
-  display: block; margin-top: 3px; font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
+  display: block; margin-top: 2px; 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;
+  flex: none; height: 30px; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 560;
+  color: var(--bc-fg); background: var(--bc-stone);
+  border: 0; border-radius: 999px; cursor: pointer;
+  transition: background 160ms, color 160ms;
 }
-.known .issue .join:hover { 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 .issue .join:hover { background: color-mix(in srgb, var(--bc-fg) 12%, var(--bc-stone)); }
+.known .issue .join:disabled { color: var(--bc-ok); background: transparent; cursor: default; opacity: 1; }
 .known .ask { display: flex; gap: 8px; margin: 2px 0 8px; }
 .known .ask input { flex: 1; min-width: 0; }
 .known .ask button { flex: none; }
 .known .err { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-danger); }
 
 /* ---------- questions the assistant answers by itself ---------- */
-.picks { margin-bottom: 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 { margin-bottom: 14px; }
+.picks .picks-grid { display: flex; flex-wrap: wrap; 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;
+  display: inline-flex; align-items: center; max-width: 100%;
+  min-height: 32px; padding: 6px 13px; text-align: left; cursor: pointer; font: inherit;
+  color: var(--bc-fg); background: var(--bc-stone);
+  border: 1px solid transparent; border-radius: 999px;
+  transition: background 160ms, border-color 160ms, color 160ms, transform 160ms var(--bc-ease);
   animation: bc-rise 240ms var(--bc-ease) both;
 }
-.picks .pick:hover { 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 .pick:hover { background: color-mix(in srgb, var(--bc-fg) 10%, var(--bc-stone)); }
+.picks .pick:active { transform: scale(.97); }
+.picks .pick[aria-pressed="true"] { background: var(--bc-accent); color: var(--bc-on-accent); }
+.picks .pick .t { font-size: 13px; font-weight: 520; line-height: 1.35; overflow-wrap: anywhere; }
 .picks .picks-note {
   display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0;
   font-size: 12px; line-height: 1.45; color: var(--bc-muted);
@@ -203,18 +205,21 @@ textarea { min-height: 88px; resize: vertical; }
    strip is the whole panel. */
 .whoami {
   display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
-  margin-bottom: 16px; padding: 10px 12px;
+  margin-bottom: 14px; padding: 9px 12px;
   font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
   background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
 }
 .whoami.asking { display: block; padding: 14px; }
+.whoami.asking .row input { background: var(--bc-bg); border-color: var(--bc-border); }
 .whoami .who { flex: 1; min-width: 0; }
 .whoami .who strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
 .link {
-  padding: 0; font: inherit; font-size: var(--bc-fs-sm); font-weight: 620; line-height: 1.45;
-  color: var(--bc-accent); background: none; border: none; cursor: pointer; border-radius: 4px;
+  padding: 0; font: inherit; font-size: var(--bc-fs-sm); font-weight: 560; line-height: 1.45;
+  color: var(--bc-fg); background: none; border: none; cursor: pointer; border-radius: 4px;
+  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bc-fg) 30%, transparent);
+  text-underline-offset: 3px;
 }
-.link:hover { text-decoration: underline; text-underline-offset: 2px; }
+.link:hover { text-decoration-color: currentColor; }
 .link:disabled { color: var(--bc-faint); cursor: default; text-decoration: none; }
 .whoami .why { margin: 0 0 10px; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
 .whoami .why strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
@@ -231,18 +236,17 @@ textarea { min-height: 88px; resize: vertical; }
    assistant asking one friendly follow-up, not as a form field that appeared. */
 .refs {
   position: relative;
-  margin-bottom: 16px; padding: 14px;
+  margin-bottom: 14px; 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);
+  background: var(--bc-subtle);
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-lg);
   animation: bc-item-in 280ms var(--bc-ease) both;
 }
 .refs .ask-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
-.refs .ask-head .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 .ask-head strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--bc-fg); margin-bottom: 1px; }
 .refs .why { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
 .refs .row { display: flex; gap: 8px; align-items: stretch; }
-.refs .row input { flex: 1; min-width: 0; background: var(--bc-bg); }
+.refs .row input { flex: 1; min-width: 0; background: var(--bc-bg); border-color: var(--bc-border); }
 .refs select {
   flex: none; max-width: 45%; padding: 10px 10px; font-size: 13px;
   color: var(--bc-fg); background: var(--bc-bg);
@@ -270,40 +274,44 @@ textarea { min-height: 88px; resize: vertical; }
 .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); }
+/* ---------- severity ----------
+   The segmented control from the product: a stone track, the choice lifted out
+   of it on white. */
+.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; background: var(--bc-stone); border-radius: 999px; }
 .seg button {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  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;
+  height: 30px; padding: 0 4px; font: inherit; font-size: var(--bc-fs-sm); font-weight: 520; line-height: 1;
+  color: var(--bc-muted); background: none; border: none; border-radius: 999px;
   cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms;
 }
-.seg button::before { content: ''; width: 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::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sev, var(--bc-faint)); opacity: .5; transition: opacity 180ms; }
+.seg button[data-prio="LOW"] { --sev: var(--bc-ok); }
+.seg button[data-prio="MEDIUM"] { --sev: var(--bc-info); }
+.seg button[data-prio="HIGH"] { --sev: var(--bc-warn); }
+.seg button[data-prio="CRITICAL"] { --sev: var(--bc-danger); }
 .seg button:hover { color: var(--bc-fg); }
 .seg button[aria-pressed=true] {
-  background: var(--bc-raised); color: var(--bc-fg); font-weight: 650;
-  box-shadow: 0 1px 3px rgba(10,12,16,.14), 0 0 0 1px color-mix(in srgb, var(--bc-border) 60%, transparent);
+  background: var(--bc-raised); color: var(--bc-fg); font-weight: 600;
+  box-shadow: 0 1px 2px rgba(20,18,14,.10), 0 0 0 .5px rgba(20,18,14,.08);
 }
 .seg button[aria-pressed=true]::before { opacity: 1; }
 .seg button:focus-visible { outline-offset: -2px; }
 
-/* ---------- attachments ---------- */
-.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
+/* ---------- attachments ----------
+   Three ring pills in a row: optional, so they take one line, not a band of
+   dashed drop zones. */
+.tools { display: flex; flex-wrap: wrap; gap: 6px; }
 .tool {
-  display: inline-flex; 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;
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 32px; padding: 0 11px 0 9px; font: inherit; font-size: 12.5px; font-weight: 520; line-height: 1; white-space: nowrap;
+  color: var(--bc-fg); background: var(--bc-bg);
+  border: 1px solid var(--bc-border); border-radius: 999px; cursor: pointer;
   transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--bc-ease);
 }
-.tool svg { font-size: 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 svg { font-size: 15px; color: var(--bc-muted); transition: color 160ms; }
+.tool:hover:not(:disabled) { background: var(--bc-subtle); border-color: color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); }
+.tool:hover:not(:disabled) svg { color: var(--bc-fg); }
+.tool:active:not(:disabled) { transform: scale(.97); }
 .tool:disabled { opacity: .45; cursor: not-allowed; }
 .attach-hint { margin: 8px 0 0; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
 
@@ -354,7 +362,7 @@ textarea { min-height: 88px; resize: vertical; }
 .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);
+  padding: 12px 14px 12px var(--bc-pad); border-top: 1px solid var(--bc-border);
   background: var(--bc-bg);
 }
 .foot .spacer { flex: 1; }
@@ -367,36 +375,39 @@ textarea { min-height: 88px; resize: vertical; }
    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);
+  padding: 0 var(--bc-pad) 10px; font-size: 10.5px; color: var(--bc-faint);
+  background: var(--bc-bg);
 }
 .brand-credit { display: flex; align-items: center; transition: color 0.15s; border-radius: 4px; }
-.bc-brand { height: 16px; width: auto; display: block; color: var(--bc-brand-ink); }
+.bc-brand { height: 15px; width: auto; display: block; color: var(--bc-brand-ink); }
 .brand-credit:hover .bc-brand { color: var(--bc-fg); }
+/* The product's two pills: ink for the one thing to do, a white ring for the
+   alternative. Flat — no glow, no lift. */
 button.ghost, button.primary {
   display: inline-flex; align-items: center; justify-content: center; gap: 7px;
-  height: 38px; padding: 0 15px; font: inherit; font-size: 13px; font-weight: 620; line-height: 1;
+  height: 38px; padding: 0 15px; font: inherit; font-size: 13.5px; font-weight: 560; line-height: 1;
   border-radius: 999px; cursor: pointer; white-space: nowrap;
   transition: transform 160ms var(--bc-ease), filter 160ms, background 160ms, border-color 160ms, color 160ms, box-shadow 160ms;
 }
-button.ghost { background: var(--bc-bg); border: 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 { background: var(--bc-bg); border: 0; color: var(--bc-fg); box-shadow: 0 0 0 1px var(--bc-border), 0 1px 2px rgba(20,18,14,.05); }
+button.ghost:hover:not(:disabled) { background: var(--bc-subtle); }
 button.ghost svg, button.primary svg { font-size: 15px; }
 button.primary {
   padding: 0 18px;
-  background: var(--bc-accent); border: 1px solid var(--bc-accent); color: var(--bc-on-accent);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
+  background: var(--bc-accent); border: 0; color: var(--bc-on-accent);
+  box-shadow: 0 1px 2px rgba(0,0,0,.14);
 }
-button.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
-button.primary:active:not(:disabled) { transform: none; }
-button:disabled { opacity: .5; cursor: not-allowed; }
+button.primary:hover:not(:disabled) { filter: brightness(1.12) contrast(.96); }
+button.primary:active:not(:disabled) { transform: scale(.98); }
+button:disabled { opacity: .45; cursor: not-allowed; }
 button.primary:disabled { box-shadow: none; }
-button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; width: 14px; height: 14px; }
+button.primary .spinner { border-color: color-mix(in srgb, var(--bc-on-accent) 40%, transparent); border-top-color: var(--bc-on-accent); width: 14px; height: 14px; }
 button.quiet {
-  padding: 0 4px; height: 38px; font: inherit; font-size: 13px; font-weight: 600;
+  padding: 0 4px; height: 38px; font: inherit; font-size: 13px; font-weight: 520;
   border: none; background: none; color: var(--bc-muted); cursor: pointer; border-radius: 8px;
+  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
 }
-button.quiet:hover { color: var(--bc-accent); }
+button.quiet:hover { color: var(--bc-fg); text-decoration-color: color-mix(in srgb, var(--bc-fg) 35%, transparent); }
 
 /* ---------- your reports ---------- */
 .history {
@@ -416,13 +427,13 @@ button.quiet:hover { color: var(--bc-accent); }
 .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);
+  display: block; font-size: 13.5px; font-weight: 560; color: var(--bc-fg);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .history .sub { display: block; margin-top: 3px; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
 .history .row-ico {
   flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
-  background: var(--bc-subtle); color: var(--bc-muted); font-size: 16px;
+  background: var(--bc-stone); color: var(--bc-muted); font-size: 16px;
 }
 .history .chev { flex: none; color: var(--bc-faint); font-size: 15px; transition: transform 160ms var(--bc-ease), color 160ms; }
 .empty {
@@ -431,7 +442,7 @@ button.quiet:hover { color: var(--bc-accent); }
 }
 .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;
+  background: var(--bc-stone); color: var(--bc-fg); font-size: 20px;
 }
 .skel {
   display: block; height: 12px; border-radius: 6px; margin: 6px 0;
@@ -447,7 +458,7 @@ button.quiet:hover { color: var(--bc-accent); }
   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:hover .chev { transform: translateX(2px); color: var(--bc-fg); }
 .history button.row:focus-visible { outline-offset: -2px; }
 
 /* ---------- one report, and what happened to it ---------- */
@@ -457,7 +468,7 @@ button.quiet:hover { color: var(--bc-accent); }
   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 .ttl { font-size: 13.5px; font-weight: 600; color: var(--bc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .report-head .sub { font-size: var(--bc-fs-xs); color: var(--bc-faint); }
 .report-head .pill { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
 
@@ -491,9 +502,9 @@ button.quiet:hover { color: var(--bc-accent); }
   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-status .dot { background: var(--bc-info); }
+.sys.k-severity .dot { background: var(--bc-warn); }
+.sys.k-assignment .dot { background: var(--bc-brand-mark); }
 .sys.k-filed .dot { background: var(--bc-faint); }
 
 /* ---------- the conversation ----------
@@ -526,24 +537,21 @@ button.quiet:hover { color: var(--bc-accent); }
 .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;
+  font-size: 11px; font-weight: 650; letter-spacing: .02em;
+  background: var(--bc-stone); color: var(--bc-fg);
 }
-.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; }
+.av.bot { width: 28px; }
+.msg-who { font-size: var(--bc-fs-xs); font-weight: 560; color: var(--bc-muted); padding: 0 4px 4px; }
+.msg-who.auto { color: var(--bc-fg); display: inline-flex; align-items: center; gap: 5px; }
 .msg-who .tag {
-  padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
-  text-transform: uppercase; background: var(--bc-accent-soft); color: var(--bc-accent);
+  padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 650; letter-spacing: .05em;
+  text-transform: uppercase; background: var(--bc-stone); color: var(--bc-muted);
 }
 .bubble {
   justify-self: start; max-width: 100%;
   padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.5;
-  background: var(--bc-subtle); color: var(--bc-fg);
-  border: 1px solid var(--bc-border);
+  background: var(--bc-stone); color: var(--bc-fg);
+  border: 1px solid transparent;
   border-bottom-left-radius: 6px;
 }
 /* pre-wrap belongs to the text, not the box — on the box it would also render
@@ -556,9 +564,10 @@ button.quiet:hover { color: var(--bc-accent); }
 }
 .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); }
+/* A reply nobody wrote: drawn on white with a hairline, beside the orb and
+   labelled "Assistant" above it, so it reads the same to someone who cannot
+   see the difference at all. */
+.msg-row.auto .bubble { background: var(--bc-bg); border-color: var(--bc-border); }
 /* An attachment-only message has no text to wrap, so the bubble would be an
    empty coloured box around it. */
 .bubble.silent { padding: 0; background: none !important; border: 0; }
@@ -572,7 +581,7 @@ button.quiet:hover { color: var(--bc-accent); }
 /* 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;
+  width: 6px; height: 6px; border-radius: 50%; background: var(--bc-muted); opacity: .45;
   animation: bc-typing 1.2s ease-in-out infinite;
 }
 .typing i:nth-child(2) { animation-delay: .15s; }
@@ -608,30 +617,29 @@ button.quiet:hover { color: var(--bc-accent); }
   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)); }
+.assistant.resolved { background: color-mix(in srgb, var(--bc-ok) 7%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 30%, var(--bc-border)); }
 /* On a call: the call's own card is what they are watching. This one states
-   what is happening and stops moving — no spinner, no travelling bar. */
+   what is happening and stops moving — no breathing orb, no travelling bar. */
 .assistant.calling { background: var(--bc-bg); }
 .assistant.calling .as-progress i { transition: none; }
 .as-body.entering { animation: bc-rise 360ms var(--bc-ease) both; }
 .as-top { display: flex; gap: 11px; align-items: center; }
+/* The orb, while the assistant is at work; a plain disc with a glyph once it
+   is on a call or has finished. */
 .as-orb {
   flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
-  color: var(--bc-on-accent); font-size: 15px;
-  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+  color: var(--bc-on-accent); font-size: 15px; background: var(--bc-accent);
 }
-.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-orb.orb { background: var(--bc-o2); }
+.assistant.analyzing .as-orb.orb { animation: as-breathe 2.4s ease-in-out infinite; }
+@keyframes as-breathe { 50% { transform: scale(.88); } }
+.assistant.resolved .as-orb { background: var(--bc-ok); color: #fff; }
+.assistant.reviewing .as-orb.orb { filter: saturate(.35); }
 .as-text { min-width: 0; flex: 1; }
-.as-title { font-weight: 650; font-size: 13.5px; letter-spacing: -.01em; color: var(--bc-fg); }
+.as-title { font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; color: var(--bc-fg); }
 .as-detail { font-size: 12px; line-height: 1.45; color: var(--bc-muted); margin-top: 2px; }
 .as-progress {
-  height: 4px; margin: 12px 0 0; border-radius: 999px; overflow: hidden;
+  height: 3px; margin: 12px 0 0; border-radius: 999px; overflow: hidden;
   background: color-mix(in srgb, var(--bc-fg) 9%, transparent);
 }
 .as-progress i {
@@ -640,39 +648,42 @@ button.quiet:hover { color: var(--bc-accent); }
 }
 .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: linear-gradient(90deg, var(--bc-accent) 0%, color-mix(in srgb, var(--bc-accent) 35%, var(--bc-bg)) 50%, var(--bc-accent) 100%);
   background-size: 200% 100%; animation: bc-shimmer 1.6s linear infinite;
 }
+/* Four short labels under the bar. Allowed to wrap rather than be cut: at this
+   width "Report received" ellipsised to "Report recei…". */
 .as-steps {
-  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
-  margin: 8px 0 0; padding: 0; font-size: 10.5px; color: var(--bc-faint);
+  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 6px;
+  margin: 8px 0 0; padding: 0; font-size: 10.5px; line-height: 1.3; color: var(--bc-faint);
 }
-.as-steps li { display: flex; align-items: 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 { display: flex; align-items: flex-start; gap: 5px; min-width: 0; }
+.as-steps li .lbl { min-width: 0; overflow-wrap: anywhere; }
+.as-steps li .dot { flex: none; width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; border: 1.5px solid currentColor; }
 .as-steps li.done { color: var(--bc-muted); }
 .as-steps li.done .dot { background: var(--bc-accent); border-color: var(--bc-accent); }
 .assistant.resolved .as-steps li.done .dot { background: var(--bc-ok); border-color: var(--bc-ok); }
-.as-steps li.active { color: var(--bc-fg); font-weight: 650; }
+.as-steps li.active { color: var(--bc-fg); font-weight: 600; }
 .as-steps li.active .dot { border-color: var(--bc-accent); background: var(--bc-bg); animation: as-pulse 1.2s ease-in-out infinite; }
-@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent) 25%, transparent); } }
-@media (prefers-reduced-motion: reduce) { .as-spin, .as-steps li.active .dot, .assistant.analyzing .as-progress i, .typing i { animation: none; } }
+@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent) 18%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .as-orb, .as-steps li.active .dot, .assistant.analyzing .as-progress i, .typing i { animation: none; } }
 
 /* Quick answers under the confirm question — only on the latest message. */
 .msg-row .quick { display: none; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
 .msg-row:last-child .quick { display: flex; }
 .quick button {
   display: inline-flex; align-items: center; gap: 6px;
-  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer;
-  border: 1px solid var(--bc-accent); background: var(--bc-bg); color: var(--bc-accent);
+  font: inherit; font-size: 13px; font-weight: 560; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
+  border: 0; background: var(--bc-bg); color: var(--bc-fg); box-shadow: 0 0 0 1px var(--bc-border);
   transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
   animation: bc-item-in 300ms var(--bc-ease) both;
 }
-.quick button:first-child { background: var(--bc-accent); color: var(--bc-on-accent); }
+.quick button:first-child { background: var(--bc-accent); color: var(--bc-on-accent); box-shadow: none; }
 .quick button:nth-child(2) { animation-delay: 60ms; }
 .quick button svg { font-size: 13px; }
-.quick button:hover { transform: translateY(-1px); background: var(--bc-accent-soft); }
-.quick button:first-child:hover { background: var(--bc-accent); filter: brightness(1.07); }
+.quick button:hover { background: var(--bc-subtle); }
+.quick button:first-child:hover { background: var(--bc-accent); filter: brightness(1.12) contrast(.96); }
+.quick button:active { transform: scale(.97); }
 
 /* ---------- the composer ---------- */
 .composer {
@@ -689,10 +700,10 @@ button.quiet:hover { color: var(--bc-accent); }
 .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;
+  background: var(--bc-stone); border: 1px solid transparent;
+  transition: border-color 160ms, box-shadow 160ms, background 160ms;
 }
-.composer .row:focus-within { border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
+.composer .row:focus-within { background: var(--bc-bg); border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
 .composer textarea {
   flex: 1; min-width: 0; min-height: 34px; max-height: 120px; resize: none; padding: 7px 6px;
   font: inherit; font-size: 13.5px; line-height: 1.45;
@@ -717,8 +728,8 @@ button.quiet:hover { color: var(--bc-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 .send:hover:not(:disabled) { filter: brightness(1.12) contrast(.96); transform: scale(1.04); }
+.composer .send:disabled { opacity: .3; cursor: default; background: var(--bc-faint); }
 .composer .staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
 .composer .chip {
   display: flex; align-items: center; gap: 6px; max-width: 200px;
@@ -741,23 +752,16 @@ button.quiet:hover { color: var(--bc-accent); }
    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;
+  font-size: 11px; font-weight: 600;
   padding: 3px 9px; border-radius: 999px;
-  color: var(--bc-muted); background: var(--bc-subtle);
+  color: var(--bc-muted); background: var(--bc-stone);
 }
 .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)); }
+/* The theme's own status colours, which already have a dark cut. */
+.pill.open { color: var(--bc-warn); background: color-mix(in srgb, var(--bc-warn) 12%, var(--bc-bg)); }
+.pill.in_progress { color: var(--bc-info); background: color-mix(in srgb, var(--bc-info) 12%, var(--bc-bg)); }
+.pill.resolved { color: var(--bc-ok); background: color-mix(in srgb, var(--bc-ok) 12%, var(--bc-bg)); }
 .pill.closed { color: var(--bc-muted); }
-: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 {
@@ -777,6 +781,75 @@ button.quiet:hover { color: var(--bc-accent); }
 .fix-verification .feedback-status { margin: 6px 0 0; font-weight: 450; color: var(--bc-danger); font-size: var(--bc-fs-xs); }
 .fix-verification .feedback-status:empty { display: none; }
 
+/* ---------- how did we do ----------
+   Quieter than the card above it: that one asks whether the fix works, which
+   the team acts on; this asks how it felt, which they learn from. The stars
+   carry the only colour, so the one thing to do here is the thing you see. */
+.fix-rating {
+  --bc-star: #f0a81c;
+  flex: none; margin: 10px 12px 0; padding: 12px 14px;
+  border-radius: var(--bc-r-lg); border: 1px solid var(--bc-border); background: var(--bc-bg);
+  font-size: var(--bc-fs-sm); color: var(--bc-fg);
+  animation: bc-rise 280ms var(--bc-ease) both;
+}
+.fix-rating .fr-q { margin: 0 0 6px; font-weight: 620; }
+.fix-rating .stars { display: flex; gap: 2px; margin: 0 0 2px -4px; }
+.fix-rating .stars button {
+  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
+  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
+  color: color-mix(in srgb, var(--bc-fg) 18%, transparent);
+  transition: color 120ms ease, transform 120ms var(--bc-ease);
+}
+.fix-rating .stars button svg { width: 24px; height: 24px; }
+.fix-rating .stars button.on { color: var(--bc-star); }
+.fix-rating .stars button:hover:not(:disabled) { transform: scale(1.08); }
+.fix-rating .stars button:focus-visible { outline: none; box-shadow: var(--bc-ring); }
+.fix-rating .stars button:disabled { cursor: default; }
+.fix-rating .fr-hint { margin: 2px 0 0; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+.fix-rating .fr-said { margin: 6px 0 0; font-size: 13px; color: var(--bc-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
+.fix-rating .fr-note { margin-top: 8px; }
+.fix-rating .fr-note textarea { min-height: 52px; margin-bottom: 8px; font-size: 13px; }
+.fix-rating .fr-note button {
+  padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-border); background: var(--bc-bg); color: var(--bc-fg);
+}
+.fix-rating .feedback-status { margin: 6px 0 0; color: var(--bc-danger); font-size: var(--bc-fs-xs); }
+.fix-rating .feedback-status:empty { display: none; }
+@media (prefers-reduced-motion: reduce) { .fix-rating .stars button { transition: none; } .fix-rating .stars button:hover { transform: none; } }
+
+/* The rating on a history row: the score given, or a nudge to give one. */
+.history .sub .rated { display: inline-flex; align-items: center; gap: 2px; color: var(--bc-muted); font-weight: 600; }
+.history .sub .rated svg { width: 11px; height: 11px; color: #f0a81c; }
+.history .sub .rate-ask { color: var(--bc-fg); font-weight: 600; }
+
+/* ---------- a settled report waiting for its rating ----------
+   Above the form on the first screen: the same stars as under a report's
+   conversation, with the report they are about named on top. */
+.rate-due { margin: 0 0 14px; }
+.rate-due:focus { outline: none; }
+.rate-due:focus-visible { box-shadow: var(--bc-ring); }
+.rate-due .rd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
+.rate-due .rd-eyebrow {
+  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--bc-faint);
+}
+.rate-due.is-required .rd-eyebrow { color: var(--bc-fg); }
+.rate-due .rd-later { font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+.rate-due .rd-report {
+  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center;
+  margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--bc-border);
+}
+.rate-due .rd-ico {
+  grid-row: span 2; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
+  background: color-mix(in srgb, var(--bc-ok) 14%, transparent); color: var(--bc-ok);
+}
+.rate-due .rd-ico svg { width: 13px; height: 13px; }
+.rate-due .rd-ttl { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rate-due .rd-sub { font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+
+/* What a required rating is holding: still in sight, plainly not yet. */
+.held { opacity: .42; transition: opacity 200ms ease; }
+@media (prefers-reduced-motion: reduce) { .held { transition: none; } }
+
 /* A call in progress, in place of the form.
    ---------------------------------------------------------------------------
    Deliberately not styled as a chat. Nothing arrives here to read — the
@@ -826,13 +899,13 @@ button.quiet:hover { color: var(--bc-accent); }
    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);
+  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
+  display: grid; place-items: center; font-size: 24px;
+  background: var(--bc-ok); color: #fff;
+  box-shadow: 0 0 0 7px color-mix(in srgb, var(--bc-ok) 12%, transparent);
   animation: bc-pop 420ms var(--bc-ease) both;
 }
-.done h3 { margin: 0 0 6px; font-size: 17px; font-weight: 680; letter-spacing: -.015em; }
+.done h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
 .done p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bc-muted); }
 .done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--bc-subtle); color: var(--bc-fg); }
 /* The likely wait. Set apart from the reference line above it by a rule rather
@@ -896,7 +969,7 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
    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); }
+  .scrim { background: rgba(14,14,16,.4); }
   .panel, .scrim.at-right .panel, .scrim.at-left .panel, .scrim.at-bottom .panel, .scrim.at-top .panel {
     inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
     border-radius: 0; border: 0;
@@ -911,6 +984,16 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
   .foot:has(+ .powered) { padding-bottom: 12px; }
   .recbar .hint { display: none; }
   .msg-row, .typing-row { max-width: 92%; }
+  /* The question chips are one row that scrolls sideways, edge to edge, rather
+     than three stacked rows pushing the form down the screen. */
+  .picks .picks-grid {
+    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
+    margin: 0 calc(var(--bc-pad) * -1); padding: 0 var(--bc-pad) 2px;
+    scroll-snap-type: x proximity; scroll-padding: 0 var(--bc-pad);
+  }
+  .picks .picks-grid::-webkit-scrollbar { display: none; }
+  .picks .pick { flex: none; scroll-snap-align: start; }
+  .picks .pick .t { white-space: nowrap; }
 }
 
 @media (pointer: coarse) {
@@ -925,7 +1008,8 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
      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; }
+  .tool, .known .issue .join { min-height: 44px; }
+  .picks .pick { min-height: 40px; }
   button.primary, button.ghost { height: 44px; }
   .composer .send, .composer .tool { width: 40px; height: 40px; min-height: 0; }
   textarea { min-height: 104px; }
@@ -934,7 +1018,7 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
   /* 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). */
+     button in the header is one of these. */
   .head .icon-btn, .thumb .drop, .brand-credit { position: relative; }
   .thumb .drop { position: absolute; opacity: 1; }
   .head .icon-btn::after, .thumb .drop::after, .brand-credit::after {
@@ -949,29 +1033,31 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
   .tool:hover:not(:disabled) { transform: none; }
 }
 `;
-function ce({ title: e, sub: t, id: n = "", back: y = !1 }) {
+function le({ title: e, sub: t, id: r = "", back: d = !1, theme: u = "" }) {
   return `
     <div class="head">
-      ${y ? `<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${Ve}</button>` : ""}
-      <div class="mark" aria-hidden="true">${X}</div>
+      ${d ? `<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${We}</button>` : ""}
+      <span class="orb mark" aria-hidden="true"></span>
       <div class="titles">
-        <h2${n ? ` id="${n}"` : ""}>${m(e)}</h2>
-        <p>${m(t)}</p>
+        <h2${r ? ` id="${r}"` : ""}>${v(e)}</h2>
+        <p>${v(t)}</p>
       </div>
-      <button class="icon-btn" type="button" data-act="close" aria-label="Close">${de}</button>
+      ${u ? `<button class="icon-btn theme" type="button" data-act="theme" title="Theme: ${v(u)}"
+        aria-label="Theme: ${v(u)}. Change theme"><span class="m-light">${Le}</span><span class="m-dark">${Qe}</span><span class="m-auto">${Te}</span></button>` : ""}
+      <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ce}</button>
     </div>`;
 }
-function ie(e, t) {
-  return `<div class="empty"><span class="empty-ico" aria-hidden="true">${t}</span>${m(e)}</div>`;
+function oe(e, t) {
+  return `<div class="empty"><span class="empty-ico" aria-hidden="true">${t}</span>${v(e)}</div>`;
 }
-function Ye(e) {
+function _e(e) {
   return Array.from({ length: e }, () => `
     <div class="row" aria-hidden="true">
       <span class="row-ico"></span>
       <span class="who"><span class="skel" style="width:70%"></span><span class="skel" style="width:40%;height:9px"></span></span>
     </div>`).join("") + '<span class="sr-only">Loading…</span>';
 }
-function Pe() {
+function Ge() {
   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>
@@ -980,7 +1066,7 @@ function Pe() {
     </div>
     <span class="sr-only">Loading…</span>`;
 }
-function We(e) {
+function Je(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() : "?";
 }
@@ -988,22 +1074,22 @@ function Z(e) {
   const t = new Date(e);
   return Number.isFinite(t.getTime()) ? `${t.getFullYear()}-${t.getMonth()}-${t.getDate()}` : null;
 }
-function Ke(e) {
-  const t = new Date(e), n = /* @__PURE__ */ new Date(), y = new Date(n.getFullYear(), n.getMonth(), n.getDate() - 1);
-  if (Z(t) === Z(n)) return "Today";
-  if (Z(t) === Z(y)) return "Yesterday";
+function Xe(e) {
+  const t = new Date(e), r = /* @__PURE__ */ new Date(), d = new Date(r.getFullYear(), r.getMonth(), r.getDate() - 1);
+  if (Z(t) === Z(r)) return "Today";
+  if (Z(t) === Z(d)) return "Yesterday";
   try {
     return t.toLocaleDateString(void 0, {
       weekday: "short",
       day: "numeric",
       month: "short",
-      ...t.getFullYear() !== n.getFullYear() ? { year: "numeric" } : {}
+      ...t.getFullYear() !== r.getFullYear() ? { year: "numeric" } : {}
     });
   } catch {
-    return oe(e);
+    return J(e);
   }
 }
-function me(e) {
+function ve(e) {
   const t = new Date(e);
   if (!Number.isFinite(t.getTime())) return "";
   try {
@@ -1016,10 +1102,10 @@ function ue(e) {
   return e.scrollHeight - e.scrollTop - e.clientHeight < 40;
 }
 function _(e, { smooth: t = !1 } = {}) {
-  const n = typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
-  t && !n && e.scrollTo ? e.scrollTo({ top: e.scrollHeight, behavior: "smooth" }) : e.scrollTop = e.scrollHeight;
+  const r = typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  t && !r && e.scrollTo ? e.scrollTo({ top: e.scrollHeight, behavior: "smooth" }) : e.scrollTop = e.scrollHeight;
 }
-function se(e) {
+function ie(e) {
   return {
     OPEN: "Open",
     IN_PROGRESS: "In progress",
@@ -1027,52 +1113,52 @@ function se(e) {
     CLOSED: "Closed"
   }[e] || String(e || "").toLowerCase();
 }
-function oe(e) {
+function J(e) {
   const t = new Date(e).getTime();
   if (!Number.isFinite(t)) return "";
-  const n = Math.floor((Date.now() - t) / 864e5);
-  if (n <= 0) return "today";
-  if (n === 1) return "yesterday";
-  if (n < 30) return `${n} days ago`;
-  const y = Math.floor(n / 30);
-  return y === 1 ? "a month ago" : `${y} months ago`;
-}
-function m(e) {
+  const r = Math.floor((Date.now() - t) / 864e5);
+  if (r <= 0) return "today";
+  if (r === 1) return "yesterday";
+  if (r < 30) return `${r} days ago`;
+  const d = Math.floor(r / 30);
+  return d === 1 ? "a month ago" : `${d} months ago`;
+}
+function v(e) {
   return String(e).replace(/[&<>"']/g, (t) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[t]);
 }
-const Fe = 7 * 24 * 60 * 60 * 1e3;
+const et = 7 * 24 * 60 * 60 * 1e3;
 let ee;
-function Ue() {
+function tt() {
   return ee || (ee = new Promise((e, t) => {
-    const n = indexedDB.open("bugcatch-drafts", 1);
-    n.onupgradeneeded = () => n.result.createObjectStore("drafts"), n.onsuccess = () => e(n.result), n.onerror = () => t(n.error), n.onblocked = () => t(new Error("Draft storage is blocked."));
+    const r = indexedDB.open("bugcatch-drafts", 1);
+    r.onupgradeneeded = () => r.result.createObjectStore("drafts"), r.onsuccess = () => e(r.result), r.onerror = () => t(r.error), r.onblocked = () => t(new Error("Draft storage is blocked."));
   }).catch((e) => {
     throw ee = null, e;
   })), ee;
 }
-function Ze(e, t) {
-  var n, y;
-  return JSON.stringify([e.apiBase, e.projectId, t || ((n = e.user) == null ? void 0 : n.email) || ((y = e.user) == null ? void 0 : y.id) || "anonymous"]);
+function at(e, t) {
+  var r, d;
+  return JSON.stringify([e.apiBase, e.projectId, t || ((r = e.user) == null ? void 0 : r.email) || ((d = e.user) == null ? void 0 : d.id) || "anonymous"]);
 }
 async function ae(e, t) {
-  const n = await Ue();
-  return new Promise((y, u) => {
-    const T = n.transaction("drafts", t === void 0 ? "readonly" : "readwrite"), v = T.objectStore("drafts"), s = t === void 0 ? v.get(e) : t === null ? v.delete(e) : v.put({ ...t, savedAt: Date.now() }, e);
-    T.oncomplete = () => y(s.result), T.onerror = () => u(T.error), T.onabort = () => u(T.error || new Error("Draft was not saved."));
+  const r = await tt();
+  return new Promise((d, u) => {
+    const S = r.transaction("drafts", t === void 0 ? "readonly" : "readwrite"), b = S.objectStore("drafts"), h = t === void 0 ? b.get(e) : t === null ? b.delete(e) : b.put({ ...t, savedAt: Date.now() }, e);
+    S.oncomplete = () => d(h.result), S.onerror = () => u(S.error), S.onabort = () => u(S.error || new Error("Draft was not saved."));
   });
 }
-async function _e(e) {
+async function rt(e) {
   const t = await ae(e);
-  return t && Date.now() - t.savedAt > Fe ? (await ae(e, null), null) : t || null;
+  return t && Date.now() - t.savedAt > et ? (await ae(e, null), null) : t || null;
 }
-const ve = [
+const xe = [
   { value: "LOW", label: "Low" },
   { value: "MEDIUM", label: "Medium" },
   { value: "HIGH", label: "High" },
   { value: "CRITICAL", label: "Critical" }
-], xe = "MEDIUM";
-function Ge(e) {
-  const t = e.attachments !== !1, n = t && we(), y = t && ke();
+], ye = "MEDIUM";
+function nt(e) {
+  const t = e.attachments !== !1, r = t && qe(), d = t && Ee();
   return `
         <div class="compose">
         <div class="field">
@@ -1093,8 +1179,8 @@ function Ge(e) {
         <div class="field">
           <label id="bc-prio-l">How much is it getting in your way?</label>
           <div class="seg" role="group" aria-labelledby="bc-prio-l">
-            ${ve.map((u) => `
-              <button type="button" data-prio="${u.value}" aria-pressed="${u.value === xe}">${u.label}</button>
+            ${xe.map((u) => `
+              <button type="button" data-prio="${u.value}" aria-pressed="${u.value === ye}">${u.label}</button>
             `).join("")}
           </div>
         </div>
@@ -1105,8 +1191,8 @@ function Ge(e) {
             <span class="count" aria-live="polite"></span>
           </div>
           <div class="tools" role="group" aria-labelledby="bc-att-l">
-            ${n ? `<button class="tool" type="button" data-act="shot">${Ie}Screenshot</button>` : ""}
-            ${y ? `<button class="tool" type="button" data-act="rec">${Ae}Record screen</button>` : ""}
+            ${r ? `<button class="tool" type="button" data-act="shot">${Ne}Screenshot</button>` : ""}
+            ${d ? `<button class="tool" type="button" data-act="rec">${Be}Record screen</button>` : ""}
             <button class="tool" type="button" data-act="file">${fe}Upload file</button>
           </div>
           <div class="thumbs"></div>
@@ -1114,1165 +1200,1340 @@ function Ge(e) {
         </div>` : ""}
         </div>`;
 }
-function Xe(e) {
-  var re, F, U, q;
+function ot(e) {
+  var ne, K, U, z;
   const {
     client: t,
-    cfg: n,
-    root: y,
+    cfg: r,
+    root: d,
     host: u,
-    dock: T,
-    scrim: v,
-    $: s,
-    say: i,
-    titleInput: h,
-    descInput: g,
-    compose: f,
-    sendBtn: b,
-    note: z
-  } = e, Q = s(".thumbs"), c = v.querySelector("input[type=file]"), d = [];
-  let l = xe, a = null;
-  const r = document.createElement("div");
-  r.setAttribute("role", "status"), r.className = "note", f.prepend(r);
-  const $ = Ze(n, (re = t.signedInAs()) == null ? void 0 : re.email);
-  let E = n.drafts === !1, x = !1, p = Promise.resolve(), w;
-  function S() {
-    if (clearTimeout(w), !E || x || n.drafts === !1) return p;
-    const o = h.value || g.value || d.length ? {
-      title: h.value,
-      description: g.value,
-      priority: l,
-      items: d.map(({ blob: L, mime: I, kind: C }) => ({ blob: L, mime: I, kind: C }))
+    dock: S,
+    scrim: b,
+    $: h,
+    say: f,
+    titleInput: s,
+    descInput: c,
+    compose: L,
+    sendBtn: g,
+    note: w
+  } = e, x = h(".thumbs"), T = b.querySelector("input[type=file]"), i = [];
+  let n = ye, o = null;
+  const a = document.createElement("div");
+  a.setAttribute("role", "status"), a.className = "note", L.prepend(a);
+  const k = at(r, (ne = t.signedInAs()) == null ? void 0 : ne.email);
+  let y = r.drafts === !1, m = !1, l = Promise.resolve(), $;
+  function q() {
+    if (clearTimeout($), !y || m || r.drafts === !1) return l;
+    const p = s.value || c.value || i.length ? {
+      title: s.value,
+      description: c.value,
+      priority: n,
+      items: i.map(({ blob: E, mime: A, kind: R }) => ({ blob: E, mime: A, kind: R }))
     } : null;
-    return p = p.catch(() => {
-    }).then(() => ae($, o)).then(() => {
-      r.textContent = o ? "Draft saved on this device" : "";
+    return l = l.catch(() => {
+    }).then(() => ae(k, p)).then(() => {
+      a.textContent = p ? "Draft saved on this device" : "";
     }).catch(() => {
-      r.textContent = "Draft could not be saved. Keep this tab open.";
-    }), p;
+      a.textContent = "Draft could not be saved. Keep this tab open.";
+    }), l;
   }
-  function A() {
-    clearTimeout(w), w = setTimeout(S, 250);
+  function H() {
+    clearTimeout($), $ = setTimeout(q, 250);
   }
-  f.addEventListener("input", A), f.addEventListener("change", A);
-  const D = () => {
-    S();
+  L.addEventListener("input", H), L.addEventListener("change", H);
+  const O = () => {
+    q();
   };
-  window.addEventListener("pagehide", D);
-  function O() {
-    d.filter((o) => o.status === "failed").forEach(K);
-  }
-  window.addEventListener("online", O), n.drafts !== !1 && (f.inert = !0, _e($).then((o) => {
-    e.closed || !o || (r.innerHTML = '<span>You have an unfinished report on this device.</span> <button type="button" data-resume>Resume report</button> <button type="button" data-discard>Discard</button>', r.querySelector("[data-resume]").onclick = () => {
-      h.value = o.title || "", g.value = o.description || "", l = ve.some((L) => L.value === o.priority) ? o.priority : "MEDIUM", v.querySelectorAll("[data-prio]").forEach((L) => L.setAttribute("aria-pressed", String(L.dataset.prio === l)));
-      for (const L of (o.items || []).slice(0, n.maxAttachments ?? 5)) N(L);
-      E = !0, S();
-    }, r.querySelector("[data-discard]").onclick = () => {
-      E = !0, S();
+  window.addEventListener("pagehide", O);
+  function N() {
+    i.filter((p) => p.status === "failed").forEach(V);
+  }
+  window.addEventListener("online", N), r.drafts !== !1 && (L.inert = !0, rt(k).then((p) => {
+    e.closed || !p || (a.innerHTML = '<span>You have an unfinished report on this device.</span> <button type="button" data-resume>Resume report</button> <button type="button" data-discard>Discard</button>', a.querySelector("[data-resume]").onclick = () => {
+      s.value = p.title || "", c.value = p.description || "", n = xe.some((E) => E.value === p.priority) ? p.priority : "MEDIUM", b.querySelectorAll("[data-prio]").forEach((E) => E.setAttribute("aria-pressed", String(E.dataset.prio === n)));
+      for (const E of (p.items || []).slice(0, r.maxAttachments ?? 5)) Y(E);
+      y = !0, q();
+    }, a.querySelector("[data-discard]").onclick = () => {
+      y = !0, q();
     });
   }).catch(() => {
-    r.textContent = "Draft storage is unavailable. Keep this tab open.";
+    a.textContent = "Draft storage is unavailable. Keep this tab open.";
   }).finally(() => {
-    f.inert = !1, r.querySelector("[data-resume]") || (E = !0);
+    L.inert = e.mustRate(), a.querySelector("[data-resume]") || (y = !0);
   })), e.onDestroy(() => {
-    var o;
-    S(), clearTimeout(w), window.removeEventListener("pagehide", D), window.removeEventListener("online", O), a == null || a.cancel(), d.forEach((L) => L.previewUrl && URL.revokeObjectURL(L.previewUrl)), (o = y.querySelector(".recbar")) == null || o.remove();
-  }), v.querySelectorAll("[data-prio]").forEach((o) => {
-    o.addEventListener("click", () => {
-      l = o.dataset.prio, A(), v.querySelectorAll("[data-prio]").forEach((L) => {
-        L.setAttribute("aria-pressed", String(L === o));
+    var p;
+    q(), clearTimeout($), window.removeEventListener("pagehide", O), window.removeEventListener("online", N), o == null || o.cancel(), i.forEach((E) => E.previewUrl && URL.revokeObjectURL(E.previewUrl)), (p = d.querySelector(".recbar")) == null || p.remove();
+  }), b.querySelectorAll("[data-prio]").forEach((p) => {
+    p.addEventListener("click", () => {
+      n = p.dataset.prio, H(), b.querySelectorAll("[data-prio]").forEach((E) => {
+        E.setAttribute("aria-pressed", String(E === p));
       });
     });
   });
-  const B = s("#bc-title-err");
-  function k(o) {
-    B.hidden = !o, B.innerHTML = o ? `${G}<span>${m(o)}</span>` : "", h.classList.toggle("invalid", !!o), h.setAttribute("aria-invalid", String(!!o));
+  const B = h("#bc-title-err");
+  function Q(p) {
+    B.hidden = !p, B.innerHTML = p ? `${G}<span>${v(p)}</span>` : "", s.classList.toggle("invalid", !!p), s.setAttribute("aria-invalid", String(!!p));
   }
-  h.addEventListener("input", () => {
-    h.value.trim() && k("");
+  s.addEventListener("input", () => {
+    s.value.trim() && Q("");
   });
-  function M() {
-    const o = d.some((C) => C.status === "uploading");
-    b.disabled = e.sending || o || d.some((C) => C.status === "failed"), z.textContent = o ? "Waiting for the upload to finish…" : d.some((C) => C.status === "failed") ? "Retry or remove failed attachments before sending." : "";
-    const L = n.maxAttachments ?? 5;
-    v.querySelectorAll(".tool").forEach((C) => {
-      C.disabled = e.sending || d.length >= L;
+  function C() {
+    const p = i.some((I) => I.status === "uploading"), E = e.mustRate();
+    g.disabled = e.sending || p || E || i.some((I) => I.status === "failed"), w.textContent = E ? "Rate your last report to send a new one." : p ? "Waiting for the upload to finish…" : i.some((I) => I.status === "failed") ? "Retry or remove failed attachments before sending." : "";
+    const A = r.maxAttachments ?? 5;
+    b.querySelectorAll(".tool").forEach((I) => {
+      I.disabled = e.sending || i.length >= A;
     });
-    const I = s(".field-head .count");
-    I && (I.textContent = d.length ? `${d.length} of ${L}` : "");
-  }
-  e.refreshSendState = M;
-  function H(o) {
-    var Y;
-    const L = o.el, I = o.kind === "VIDEO" ? "Video" : "Shot", C = o.kind === "VIDEO" ? `<video src="${o.previewUrl}" muted playsinline preload="metadata"></video>` : `<img src="${o.previewUrl}" alt="" />`;
-    let R = "";
-    o.status === "uploading" ? R = `<div class="veil"><div class="spinner"></div><div class="bar"><i style="width:${Math.round(o.progress * 100)}%"></i></div></div>` : o.status === "failed" && (R = `<div class="veil err"><button type="button" data-act="retry" aria-label="Retry upload">${De}</button>Failed</div>`), L.innerHTML = `
-      ${C}
-      <span class="kind">${I} · ${P(o.size)}</span>
-      <button class="drop" type="button" data-act="drop" aria-label="Remove ${I.toLowerCase()}">${de}</button>
-      ${R}`, L.querySelector('[data-act="drop"]').addEventListener("click", () => V(o)), (Y = L.querySelector('[data-act="retry"]')) == null || Y.addEventListener("click", () => K(o));
-  }
-  function V(o) {
-    const L = d.indexOf(o);
-    L >= 0 && d.splice(L, 1), o.previewUrl && URL.revokeObjectURL(o.previewUrl), o.el.remove(), S(), M();
-  }
-  async function K(o) {
-    o.status = "uploading", o.progress = 0, H(o), M();
+    const R = h(".field-head .count");
+    R && (R.textContent = i.length ? `${i.length} of ${A}` : "");
+  }
+  e.refreshSendState = C;
+  function M(p) {
+    var W;
+    const E = p.el, A = p.kind === "VIDEO" ? "Video" : "Shot", R = p.kind === "VIDEO" ? `<video src="${p.previewUrl}" muted playsinline preload="metadata"></video>` : `<img src="${p.previewUrl}" alt="" />`;
+    let I = "";
+    p.status === "uploading" ? I = `<div class="veil"><div class="spinner"></div><div class="bar"><i style="width:${Math.round(p.progress * 100)}%"></i></div></div>` : p.status === "failed" && (I = `<div class="veil err"><button type="button" data-act="retry" aria-label="Retry upload">${Pe}</button>Failed</div>`), E.innerHTML = `
+      ${R}
+      <span class="kind">${A} · ${F(p.size)}</span>
+      <button class="drop" type="button" data-act="drop" aria-label="Remove ${A.toLowerCase()}">${ce}</button>
+      ${I}`, E.querySelector('[data-act="drop"]').addEventListener("click", () => D(p)), (W = E.querySelector('[data-act="retry"]')) == null || W.addEventListener("click", () => V(p));
+  }
+  function D(p) {
+    const E = i.indexOf(p);
+    E >= 0 && i.splice(E, 1), p.previewUrl && URL.revokeObjectURL(p.previewUrl), p.el.remove(), q(), C();
+  }
+  async function V(p) {
+    p.status = "uploading", p.progress = 0, M(p), C();
     try {
-      const { storageKey: L, mime: I } = await t.uploadAttachment(o.blob, o.mime, (C) => {
-        o.progress = C;
-        const R = o.el.querySelector(".bar i");
-        R && (R.style.width = `${Math.round(C * 100)}%`);
+      const { storageKey: E, mime: A } = await t.uploadAttachment(p.blob, p.mime, (R) => {
+        p.progress = R;
+        const I = p.el.querySelector(".bar i");
+        I && (I.style.width = `${Math.round(R * 100)}%`);
       });
-      o.storageKey = L, o.mime = I, o.status = "ready";
-    } catch (L) {
-      o.status = "failed", i(L.message.replace("[BugCatch] ", ""));
+      p.storageKey = E, p.mime = A, p.status = "ready";
+    } catch (E) {
+      p.status = "failed", f(E.message.replace("[BugCatch] ", ""));
     }
-    H(o), M();
+    M(p), C();
   }
-  function N({ blob: o, mime: L, kind: I }) {
-    const C = n.maxAttachmentBytes ?? 26214400;
-    if (o.size > C) {
-      i(`That file is ${P(o.size)} — the limit is ${P(C)}.`);
+  function Y({ blob: p, mime: E, kind: A }) {
+    const R = r.maxAttachmentBytes ?? 26214400;
+    if (p.size > R) {
+      f(`That file is ${F(p.size)} — the limit is ${F(R)}.`);
       return;
     }
-    const R = $e(L || o.type, be);
-    if (!R) {
-      i("Only PNG, JPEG, WebP, WebM and MP4 files can be attached to a report.");
+    const I = ze(E || p.type, be);
+    if (!I) {
+      f("Only PNG, JPEG, WebP, WebM and MP4 files can be attached to a report.");
       return;
     }
-    const Y = {
-      blob: o,
-      kind: I,
-      mime: R,
-      size: o.size,
-      previewUrl: URL.createObjectURL(o),
+    const W = {
+      blob: p,
+      kind: A,
+      mime: I,
+      size: p.size,
+      previewUrl: URL.createObjectURL(p),
       status: "uploading",
       progress: 0,
       storageKey: null,
       el: document.createElement("div")
     };
-    Y.el.className = "thumb", d.push(Y), Q.appendChild(Y.el), i(""), S(), K(Y);
+    W.el.className = "thumb", i.push(W), x.appendChild(W.el), f(""), q(), V(W);
   }
-  async function J(o) {
-    u.style.opacity = "0", u.style.pointerEvents = "none", await new Promise((L) => requestAnimationFrame(() => requestAnimationFrame(L)));
+  async function X(p) {
+    u.style.opacity = "0", u.style.pointerEvents = "none", await new Promise((E) => requestAnimationFrame(() => requestAnimationFrame(E)));
     try {
-      return await o();
+      return await p();
     } finally {
       u.style.opacity = "", u.style.pointerEvents = "";
     }
   }
-  (F = v.querySelector('[data-act="shot"]')) == null || F.addEventListener("click", async () => {
+  (K = b.querySelector('[data-act="shot"]')) == null || K.addEventListener("click", async () => {
     try {
-      const o = await J(Se);
-      N(o);
-    } catch (o) {
-      (o == null ? void 0 : o.name) !== "NotAllowedError" && i(`Screenshot failed: ${o.message}`);
+      const p = await X(Me);
+      Y(p);
+    } catch (p) {
+      (p == null ? void 0 : p.name) !== "NotAllowedError" && f(`Screenshot failed: ${p.message}`);
     }
-  }), (U = v.querySelector('[data-act="file"]')) == null || U.addEventListener("click", () => c.click()), c == null || c.addEventListener("change", () => {
-    const o = (n.maxAttachments ?? 5) - d.length;
-    [...c.files].slice(0, Math.max(o, 0)).forEach((L) => {
-      N({
-        blob: L,
-        mime: L.type,
-        kind: L.type.startsWith("video/") ? "VIDEO" : "SCREENSHOT"
+  }), (U = b.querySelector('[data-act="file"]')) == null || U.addEventListener("click", () => T.click()), T == null || T.addEventListener("change", () => {
+    const p = (r.maxAttachments ?? 5) - i.length;
+    [...T.files].slice(0, Math.max(p, 0)).forEach((E) => {
+      Y({
+        blob: E,
+        mime: E.type,
+        kind: E.type.startsWith("video/") ? "VIDEO" : "SCREENSHOT"
       });
-    }), c.value = "";
-  }), (q = v.querySelector('[data-act="rec"]')) == null || q.addEventListener("click", async () => {
-    const o = n.maxRecordingMs ?? 12e4;
-    let L;
+    }), T.value = "";
+  }), (z = b.querySelector('[data-act="rec"]')) == null || z.addEventListener("click", async () => {
+    const p = r.maxRecordingMs ?? 12e4;
+    let E;
     try {
-      a = await Qe({
-        maxMs: o,
-        onTick: (I) => {
-          L && (L.querySelector(".time").textContent = te(I));
+      o = await Ce({
+        maxMs: p,
+        onTick: (A) => {
+          E && (E.querySelector(".time").textContent = te(A));
         },
         onAutoStop: () => {
-          a && j({ keep: !0 });
+          o && j({ keep: !0 });
         }
       });
-    } catch (I) {
-      (I == null ? void 0 : I.name) !== "NotAllowedError" && i(`Recording failed: ${I.message}`);
+    } catch (A) {
+      (A == null ? void 0 : A.name) !== "NotAllowedError" && f(`Recording failed: ${A.message}`);
       return;
     }
-    v.style.display = "none", T.hidden = !0, L = document.createElement("div"), L.className = "recbar", L.innerHTML = `
+    b.style.display = "none", S.hidden = !0, E = document.createElement("div"), E.className = "recbar", E.innerHTML = `
       <span class="dot"></span>
       <span class="time">0:00</span>
-      <span class="hint">Recording — up to ${te(Math.round(o / 1e3))}</span>
+      <span class="hint">Recording — up to ${te(Math.round(p / 1e3))}</span>
       <button class="stop" type="button">Stop</button>
-      <button class="ghost" type="button">Discard</button>`, L.querySelector(".stop").addEventListener("click", () => j({ keep: !0 })), L.querySelector(".ghost").addEventListener("click", () => j({ keep: !1 })), y.appendChild(L), L.querySelector(".stop").focus();
+      <button class="ghost" type="button">Discard</button>`, E.querySelector(".stop").addEventListener("click", () => j({ keep: !0 })), E.querySelector(".ghost").addEventListener("click", () => j({ keep: !1 })), d.appendChild(E), E.querySelector(".stop").focus();
   });
-  async function j({ keep: o }) {
-    var I;
-    const L = a;
-    if (L) {
-      if (a = null, (I = y.querySelector(".recbar")) == null || I.remove(), v.style.display = "", T.hidden = !1, !o) {
-        L.cancel(), h.focus();
+  async function j({ keep: p }) {
+    var A;
+    const E = o;
+    if (E) {
+      if (o = null, (A = d.querySelector(".recbar")) == null || A.remove(), b.style.display = "", S.hidden = !1, !p) {
+        E.cancel(), s.focus();
         return;
       }
       try {
-        const C = await L.stop();
-        C.blob.size ? N(C) : i("That recording came back empty — nothing was captured.");
-      } catch (C) {
-        i(`Recording failed: ${C.message}`);
+        const R = await E.stop();
+        R.blob.size ? Y(R) : f("That recording came back empty — nothing was captured.");
+      } catch (R) {
+        f(`Recording failed: ${R.message}`);
       }
-      h.focus();
+      s.focus();
     }
   }
-  e.isRecording = () => !!a, e.stopRecording = j, b.addEventListener("click", async () => {
-    var I;
-    const o = h.value;
-    if (!o.trim()) {
-      k("Add a few words about what went wrong — a short sentence is plenty."), h.focus();
+  e.isRecording = () => !!o, e.stopRecording = j, g.addEventListener("click", async () => {
+    var A;
+    const p = s.value;
+    if (!p.trim()) {
+      Q("Add a few words about what went wrong — a short sentence is plenty."), s.focus();
       return;
     }
     if (e.holdForReference()) return;
-    e.sending = !0, i(""), M();
-    const L = b.innerHTML;
-    b.innerHTML = '<span class="spinner" aria-hidden="true"></span>Sending…';
+    e.sending = !0, f(""), C();
+    const E = g.innerHTML;
+    g.innerHTML = '<span class="spinner" aria-hidden="true"></span>Sending…';
     try {
-      const C = await t.report({
-        title: o,
-        description: g.value,
-        priority: l,
+      const R = await t.report({
+        title: p,
+        description: c.value,
+        priority: n,
         references: e.answeredReference(),
-        issue: ((I = e.pickedIssue()) == null ? void 0 : I.key) || null,
-        attachments: d.filter((R) => R.status === "ready").map((R) => ({ type: R.kind, storageKey: R.storageKey, mime: R.mime }))
+        issue: ((A = e.pickedIssue()) == null ? void 0 : A.key) || null,
+        attachments: i.filter((I) => I.status === "ready").map((I) => ({ type: I.kind, storageKey: I.storageKey, mime: I.mime }))
       });
-      if (C != null && C.cancelled) {
-        e.sending = !1, b.innerHTML = L, M();
+      if (R != null && R.cancelled) {
+        e.sending = !1, g.innerHTML = E, C();
         return;
       }
-      x = !0, clearTimeout(w), await p, n.drafts !== !1 && await ae($, null).catch(() => {
-      }), e.succeed(C);
-    } catch (C) {
-      e.sending = !1, b.innerHTML = L, i(C.message.replace("[BugCatch] ", "")), M(), e.recheckSignIn();
+      m = !0, clearTimeout($), await l, r.drafts !== !1 && await ae(k, null).catch(() => {
+      }), e.succeed(R);
+    } catch (R) {
+      e.sending = !1, g.innerHTML = E, f(R.message.replace("[BugCatch] ", "")), C(), e.recheckSignIn();
     }
   });
 }
-function Je(e) {
+function it(e) {
   const {
     client: t,
-    say: n,
-    titleInput: y,
+    say: r,
+    titleInput: d,
     descInput: u,
-    sendBtn: T,
-    refsBox: v
+    sendBtn: S,
+    refsBox: b
   } = e;
-  let s = { policy: "off", fields: [] }, i = !1, h = null, g = "", f = "", b = [], z = "ask", Q = !1, c = !1;
-  t.referenceFields().then((k) => {
-    s = k, E();
+  let h = { policy: "off", fields: [] }, f = !1, s = null, c = "", L = "", g = [], w = "ask", x = !1, T = !1;
+  t.referenceFields().then((Q) => {
+    h = Q, y();
   }).catch(() => {
   });
-  function d() {
-    return s.policy === "off" || !s.fields.length ? { found: [], conflicts: [], loose: [] } : Le(s.fields, [y.value, u.value]);
-  }
-  function l(k = d()) {
-    return k.found.length > 0 && k.conflicts.length === 0;
-  }
-  function a() {
-    return !h || !g.trim() ? [] : [{ key: h, value: g.trim().slice(0, 120) }];
-  }
-  const r = document.createElement("p");
-  r.className = "ref-found", r.setAttribute("aria-live", "polite"), r.hidden = !0, u.closest(".field").after(r);
-  let $;
-  function E() {
-    const k = d();
-    if (l(k)) {
-      const M = k.found.slice(0, 2).map((H) => `${m(H.label)} <b>${m(p(H.value))}</b>`).join(", ");
-      r.innerHTML = `${W}<span>Found your ${M} — no need to add it again.</span>`, r.hidden = !1, i && !a().length && (i = !1, A());
+  function i() {
+    return h.policy === "off" || !h.fields.length ? { found: [], conflicts: [], loose: [] } : He(h.fields, [d.value, u.value]);
+  }
+  function n(Q = i()) {
+    return Q.found.length > 0 && Q.conflicts.length === 0;
+  }
+  function o() {
+    return !s || !c.trim() ? [] : [{ key: s, value: c.trim().slice(0, 120) }];
+  }
+  const a = document.createElement("p");
+  a.className = "ref-found", a.setAttribute("aria-live", "polite"), a.hidden = !0, u.closest(".field").after(a);
+  let k;
+  function y() {
+    const Q = i();
+    if (n(Q)) {
+      const C = Q.found.slice(0, 2).map((M) => `${v(M.label)} <b>${v(l(M.value))}</b>`).join(", ");
+      a.innerHTML = `${P}<span>Found your ${C} — no need to add it again.</span>`, a.hidden = !1, f && !o().length && (f = !1, H());
     } else
-      r.hidden = !0, r.innerHTML = "";
+      a.hidden = !0, a.innerHTML = "";
   }
-  const x = () => {
-    clearTimeout($), $ = setTimeout(E, 250);
+  const m = () => {
+    clearTimeout(k), k = setTimeout(y, 250);
   };
-  y.addEventListener("input", x), u.addEventListener("input", x);
-  function p(k) {
-    return k.length > 20 ? `${k.slice(0, 8)}…${k.slice(-4)}` : k;
+  d.addEventListener("input", m), u.addEventListener("input", m);
+  function l(Q) {
+    return Q.length > 20 ? `${Q.slice(0, 8)}…${Q.slice(-4)}` : Q;
   }
-  function w(k) {
-    const M = k.trim().toLowerCase();
-    return b.find((H) => H.value.toLowerCase() === M) || null;
+  function $(Q) {
+    const C = Q.trim().toLowerCase();
+    return g.find((M) => M.value.toLowerCase() === C) || null;
   }
-  function S(k) {
-    g = k.value, k.kinds.length === 1 ? h = k.kinds[0].key : k.kinds.some((M) => M.key === h) || (h = null), f = "", c = !1;
+  function q(Q) {
+    c = Q.value, Q.kinds.length === 1 ? s = Q.kinds[0].key : Q.kinds.some((C) => C.key === s) || (s = null), L = "", T = !1;
   }
-  function A() {
-    var F, U;
-    if (!i) {
-      v.hidden = !0, v.innerHTML = "";
+  function H() {
+    var K, U;
+    if (!f) {
+      b.hidden = !0, b.innerHTML = "";
       return;
     }
-    const k = s.fields.find((q) => q.key === h) || null, M = s.policy !== "required", H = w(g), V = H && H.kinds.length > 1 ? s.fields.filter((q) => H.kinds.some((o) => o.key === q.key)) : s.fields, K = b.length > 1 && b.every((q) => q.kinds.length === 1 && q.kinds[0].key === b[0].kinds[0].key), N = {
-      confirm: b.length > 1 ? ["Which one is this about?", "We found more than one ID in your message. Pick the one this problem is about."] : ["Is this the right ID?", "This could be more than one kind of ID. Tell us which it is."],
+    const Q = h.fields.find((z) => z.key === s) || null, C = h.policy !== "required", M = $(c), D = M && M.kinds.length > 1 ? h.fields.filter((z) => M.kinds.some((p) => p.key === z.key)) : h.fields, V = g.length > 1 && g.every((z) => z.kinds.length === 1 && z.kinds[0].key === g[0].kinds[0].key), Y = {
+      confirm: g.length > 1 ? ["Which one is this about?", "We found more than one ID in your message. Pick the one this problem is about."] : ["Is this the right ID?", "This could be more than one kind of ID. Tell us which it is."],
       suggest: ["Is this your ID?", "We spotted this in your message. Tell us what it is so we can find your record."],
-      ask: M ? ["One more thing", "So we can find your record — this helps us answer faster."] : ["We need one detail", "We need one of these to look this up."]
-    }[z];
-    v.hidden = !1;
-    const J = V.length > 6;
-    v.innerHTML = `
+      ask: C ? ["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."]
+    }[w];
+    b.hidden = !1;
+    const X = D.length > 6;
+    b.innerHTML = `
       <div class="ask-head">
-        <span class="avatar" aria-hidden="true">${X}</span>
+        <span class="avatar orb" aria-hidden="true"></span>
         <div>
-          <strong>${m(N[0])}</strong>
-          <p class="why">${m(N[1])}</p>
+          <strong>${v(Y[0])}</strong>
+          <p class="why">${v(Y[1])}</p>
         </div>
       </div>
-      ${b.length > 1 ? `
+      ${g.length > 1 ? `
       <div class="chips cands" role="group" aria-label="IDs found in your message">
-        ${b.map((q, o) => `
-          <button type="button" data-ref-cand="${o}" title="${m(q.value)}"
-            aria-pressed="${!!H && H === q}">${m(p(q.value))}</button>
+        ${g.map((z, p) => `
+          <button type="button" data-ref-cand="${p}" title="${v(z.value)}"
+            aria-pressed="${!!M && M === z}">${v(l(z.value))}</button>
         `).join("")}
       </div>` : ""}
-      ${V.length > 1 && !J && !K ? `
+      ${D.length > 1 && !X && !V ? `
       <div class="chips" role="group" aria-label="Which detail you are giving">
-        ${V.map((q) => `
-          <button type="button" data-ref-kind="${m(q.key)}" aria-pressed="${!!k && q.key === k.key}">${m(q.label)}</button>
+        ${D.map((z) => `
+          <button type="button" data-ref-kind="${v(z.key)}" aria-pressed="${!!Q && z.key === Q.key}">${v(z.label)}</button>
         `).join("")}
       </div>` : ""}
       <div class="row">
-        ${J ? `
+        ${X ? `
         <select class="ref-kind" aria-label="Which detail you are giving">
-          ${k ? "" : '<option value="" selected disabled>What is it?</option>'}
-          ${V.map((q) => `
-            <option value="${m(q.key)}" ${k && q.key === k.key ? "selected" : ""}>${m(q.label)}</option>
+          ${Q ? "" : '<option value="" selected disabled>What is it?</option>'}
+          ${D.map((z) => `
+            <option value="${v(z.key)}" ${Q && z.key === Q.key ? "selected" : ""}>${v(z.label)}</option>
           `).join("")}
         </select>` : ""}
-        <input class="ref-value${f ? " invalid" : ""}" type="${(k == null ? void 0 : k.inputMode) === "email" ? "email" : "text"}"
-          inputmode="${m((k == null ? void 0 : k.inputMode) === "numeric" || (k == null ? void 0 : k.inputMode) === "tel" ? "numeric" : "text")}"
-          value="${m(g)}"
-          placeholder="${m(k ? k.placeholder || k.label : "Your ID")}"
-          aria-label="${m(k ? k.label : "Your ID")}" ${f ? 'aria-invalid="true"' : ""} />
+        <input class="ref-value${L ? " invalid" : ""}" type="${(Q == null ? void 0 : Q.inputMode) === "email" ? "email" : "text"}"
+          inputmode="${v((Q == null ? void 0 : Q.inputMode) === "numeric" || (Q == null ? void 0 : Q.inputMode) === "tel" ? "numeric" : "text")}"
+          value="${v(c)}"
+          placeholder="${v(Q ? Q.placeholder || Q.label : "Your ID")}"
+          aria-label="${v(Q ? Q.label : "Your ID")}" ${L ? 'aria-invalid="true"' : ""} />
       </div>
-      ${k != null && k.hint ? `<p class="hint">${m(k.hint)}</p>` : ""}
-      ${f ? `<p class="field-err" role="alert">${G}<span>${m(f)}</span></p>` : ""}
-      ${M ? `<button type="button" class="link" data-act="ref-skip">${z === "ask" ? "I don't have this — send without it" : "Not sure — send as it is"}</button>` : ""}`, v.querySelectorAll("[data-ref-cand]").forEach((q) => {
-      q.addEventListener("click", () => {
-        S(b[Number(q.dataset.refCand)]), A();
+      ${Q != null && Q.hint ? `<p class="hint">${v(Q.hint)}</p>` : ""}
+      ${L ? `<p class="field-err" role="alert">${G}<span>${v(L)}</span></p>` : ""}
+      ${C ? `<button type="button" class="link" data-act="ref-skip">${w === "ask" ? "I don't have this — send without it" : "Not sure — send as it is"}</button>` : ""}`, b.querySelectorAll("[data-ref-cand]").forEach((z) => {
+      z.addEventListener("click", () => {
+        q(g[Number(z.dataset.refCand)]), H();
       });
-    }), v.querySelectorAll("[data-ref-kind]").forEach((q) => {
-      q.addEventListener("click", () => {
-        h = q.dataset.refKind, f = "", c = !1, A();
+    }), b.querySelectorAll("[data-ref-kind]").forEach((z) => {
+      z.addEventListener("click", () => {
+        s = z.dataset.refKind, L = "", T = !1, H();
       });
     });
-    const j = v.querySelector(".ref-value");
+    const j = b.querySelector(".ref-value");
     j.addEventListener("input", () => {
-      g = j.value, f = "", c = !1;
-    }), j.addEventListener("keydown", (q) => {
-      q.key === "Enter" && (q.preventDefault(), T.click());
-    }), (F = v.querySelector(".ref-kind")) == null || F.addEventListener("change", (q) => {
-      var o;
-      h = q.target.value, f = "", A(), (o = v.querySelector(".ref-value")) == null || o.focus();
-    }), (U = v.querySelector('[data-act="ref-skip"]')) == null || U.addEventListener("click", () => {
-      Q = !0, i = !1, h = null, g = "", f = "", c = !1, A(), n("");
-    }), ((!k && g ? v.querySelector("[data-ref-kind], .ref-kind") : null) || j).focus();
-  }
-  function D(k) {
-    if (b = k.conflicts.length ? k.conflicts : k.loose.slice(0, 4), z = k.conflicts.length ? "confirm" : k.loose.length ? "suggest" : "ask", i = !0, b.length)
-      if (b.length === 1) S(b[0]);
+      c = j.value, L = "", T = !1;
+    }), j.addEventListener("keydown", (z) => {
+      z.key === "Enter" && (z.preventDefault(), S.click());
+    }), (K = b.querySelector(".ref-kind")) == null || K.addEventListener("change", (z) => {
+      var p;
+      s = z.target.value, L = "", H(), (p = b.querySelector(".ref-value")) == null || p.focus();
+    }), (U = b.querySelector('[data-act="ref-skip"]')) == null || U.addEventListener("click", () => {
+      x = !0, f = !1, s = null, c = "", L = "", T = !1, H(), r("");
+    }), ((!Q && c ? b.querySelector("[data-ref-kind], .ref-kind") : null) || j).focus();
+  }
+  function O(Q) {
+    if (g = Q.conflicts.length ? Q.conflicts : Q.loose.slice(0, 4), w = Q.conflicts.length ? "confirm" : Q.loose.length ? "suggest" : "ask", f = !0, g.length)
+      if (g.length === 1) q(g[0]);
       else {
-        g = "";
-        const [M] = b;
-        h = b.every((V) => V.kinds.length === 1 && V.kinds[0].key === M.kinds[0].key) ? M.kinds[0].key : null;
+        c = "";
+        const [C] = g;
+        s = g.every((D) => D.kinds.length === 1 && D.kinds[0].key === C.kinds[0].key) ? C.kinds[0].key : null;
       }
     else
-      h = h || s.fields[0].key;
-    A();
+      s = s || h.fields[0].key;
+    H();
   }
-  function O() {
-    if (s.policy === "off" || !s.fields.length || a().length) return !1;
-    const k = d();
-    return l(k) || Q && s.policy !== "required" ? !1 : k;
+  function N() {
+    if (h.policy === "off" || !h.fields.length || o().length) return !1;
+    const Q = i();
+    return n(Q) || x && h.policy !== "required" ? !1 : Q;
   }
   function B() {
-    if (i && g.trim() && !h)
-      return f = "Pick what this ID is.", A(), !0;
-    const k = O();
-    if (k)
-      return i ? A() : D(k), n(""), !0;
-    if (h && g.trim()) {
-      const M = s.fields.find((H) => H.key === h);
-      if (!c && M && !Te(M, g))
-        return f = `That does not look like a ${M.label.toLowerCase()}. Press Send again to use it anyway.`, c = !0, A(), !0;
+    if (f && c.trim() && !s)
+      return L = "Pick what this ID is.", H(), !0;
+    const Q = N();
+    if (Q)
+      return f ? H() : O(Q), r(""), !0;
+    if (s && c.trim()) {
+      const C = h.fields.find((M) => M.key === s);
+      if (!T && C && !Ae(C, c))
+        return L = `That does not look like a ${C.label.toLowerCase()}. Press Send again to use it anyway.`, T = !0, H(), !0;
     }
     return !1;
   }
-  e.holdForReference = B, e.answeredReference = a;
+  e.holdForReference = B, e.answeredReference = o;
 }
-const et = 3;
-function tt(e) {
-  const { client: t, cfg: n, notices: y } = e;
+const st = 3;
+function lt(e) {
+  const { client: t, cfg: r, notices: d } = e;
   let u = [];
-  function T() {
-    const s = u.slice(0, et);
-    y.replaceChildren(...s.map((i) => ze(i, { where: "panel", onDismiss: v }))), y.hidden = s.length === 0;
+  function S() {
+    const h = u.slice(0, st);
+    d.replaceChildren(...h.map((f) => Re(f, { where: "panel", onDismiss: b }))), d.hidden = h.length === 0;
   }
-  function v(s) {
-    t.dismissAnnouncement(s), u = u.filter((i) => i !== s), T(), e.titleInput.focus();
+  function b(h) {
+    t.dismissAnnouncement(h), u = u.filter((f) => f !== h), S(), e.titleInput.focus();
   }
-  n.announcements !== !1 && typeof t.announcements == "function" && t.announcements().then((s) => {
-    e.closed || (u = s, T());
+  r.announcements !== !1 && typeof t.announcements == "function" && t.announcements().then((h) => {
+    e.closed || (u = h, S());
   }).catch(() => {
   });
 }
-function at(e) {
+function ct(e) {
   const {
     client: t,
-    cfg: n,
-    titleInput: y,
+    cfg: r,
+    titleInput: d,
     known: u
   } = e;
-  let T = [], v = "", s = null, i = null;
-  function h() {
-    n.knownIssues !== !1 && t.knownIssues().then((Q) => {
-      T = Q, b();
+  let S = [], b = "", h = null, f = null;
+  function s() {
+    r.knownIssues !== !1 && t.knownIssues().then((x) => {
+      S = x, g();
     }).catch(() => {
     });
   }
-  let g = null;
-  function f(Q) {
-    if (n.knownIssues === !1) return;
-    clearTimeout(g), i == null || i.abort();
-    const c = (Q || "").trim();
-    if (c.length < 3) {
-      h();
+  let c = null;
+  function L(x) {
+    if (r.knownIssues === !1) return;
+    clearTimeout(c), f == null || f.abort();
+    const T = (x || "").trim();
+    if (T.length < 3) {
+      s();
       return;
     }
-    g = setTimeout(() => {
-      i = new AbortController(), t.matchKnownIssues(c, { signal: i.signal }).then((d) => {
-        d.length && (T = d, b());
+    c = setTimeout(() => {
+      f = new AbortController(), t.matchKnownIssues(T, { signal: f.signal }).then((i) => {
+        i.length && (S = i, g());
       }).catch(() => {
       });
     }, 250);
   }
-  function b() {
-    if (!T.length) {
+  function g() {
+    if (!S.length) {
       u.hidden = !0, u.innerHTML = "";
       return;
     }
     u.hidden = !1, u.innerHTML = `
       <p class="known-h">Already reported</p>
-      ${T.map((Q) => `
-        <div class="issue ${Q.joined ? "is-joined" : ""}">
+      ${S.map((x) => `
+        <div class="issue ${x.joined ? "is-joined" : ""}">
           <span class="who">
-            <span class="t">${m(Q.title)}</span>
-            <span class="meta">${m(z(Q))}</span>
+            <span class="t">${v(x.title)}</span>
+            <span class="meta">${v(w(x))}</span>
           </span>
-          <button class="join" type="button" data-join="${m(Q.id)}"
-            ${Q.joined ? "disabled" : ""}>${Q.joined ? "Following" : "Me too"}</button>
+          <button class="join" type="button" data-join="${v(x.id)}"
+            ${x.joined ? "disabled" : ""}>${x.joined ? "Following" : "Me too"}</button>
         </div>
-        ${s === Q.id ? `
+        ${h === x.id ? `
         <div class="ask">
           <input type="email" class="join-email" placeholder="you@example.com"
             aria-label="Your email, so we can tell you when this is fixed" />
-          <button class="ghost" type="button" data-join-confirm="${m(Q.id)}">Follow</button>
+          <button class="ghost" type="button" data-join-confirm="${v(x.id)}">Follow</button>
         </div>` : ""}
       `).join("")}
-      ${v ? `<p class="err">${m(v)}</p>` : ""}`;
-  }
-  function z(Q) {
-    const c = Q.status === "IN_PROGRESS" ? "Being worked on now" : "Not fixed yet", d = Q.affectedCount === 0 ? "" : ` · ${Q.affectedCount} ${Q.affectedCount === 1 ? "person has" : "people have"} said this is happening to them`;
-    return `${c} · reported ${oe(Q.since)}${d}`;
-  }
-  u.addEventListener("click", async (Q) => {
-    var r, $, E, x, p;
-    const c = Q.target.closest("[data-join]"), d = Q.target.closest("[data-join-confirm]");
-    if (!c && !d) return;
-    const l = (d || c).getAttribute(d ? "data-join-confirm" : "data-join");
-    v = "";
-    const a = (($ = (r = u.querySelector(".join-email")) == null ? void 0 : r.value) == null ? void 0 : $.trim()) || ((E = t.signedInAs()) == null ? void 0 : E.email) || ((x = t.config.user) == null ? void 0 : x.email);
-    if (!a) {
-      s = l, b(), (p = u.querySelector(".join-email")) == null || p.focus();
+      ${b ? `<p class="err">${v(b)}</p>` : ""}`;
+  }
+  function w(x) {
+    const T = x.status === "IN_PROGRESS" ? "Being worked on now" : "Not fixed yet", i = x.affectedCount === 0 ? "" : ` · ${x.affectedCount} ${x.affectedCount === 1 ? "person has" : "people have"} said this is happening to them`;
+    return `${T} · reported ${J(x.since)}${i}`;
+  }
+  u.addEventListener("click", async (x) => {
+    var a, k, y, m, l;
+    const T = x.target.closest("[data-join]"), i = x.target.closest("[data-join-confirm]");
+    if (!T && !i) return;
+    const n = (i || T).getAttribute(i ? "data-join-confirm" : "data-join");
+    b = "";
+    const o = ((k = (a = u.querySelector(".join-email")) == null ? void 0 : a.value) == null ? void 0 : k.trim()) || ((y = t.signedInAs()) == null ? void 0 : y.email) || ((m = t.config.user) == null ? void 0 : m.email);
+    if (!o) {
+      h = n, g(), (l = u.querySelector(".join-email")) == null || l.focus();
       return;
     }
     try {
-      const w = await t.meToo(l, { email: a });
-      s = null, T = T.map((S) => S.id === l ? { ...S, joined: !0, affectedCount: w.affectedCount ?? S.affectedCount } : S), b();
-    } catch (w) {
-      v = w.message.replace("[BugCatch] ", ""), b();
+      const $ = await t.meToo(n, { email: o });
+      h = null, S = S.map((q) => q.id === n ? { ...q, joined: !0, affectedCount: $.affectedCount ?? q.affectedCount } : q), g();
+    } catch ($) {
+      b = $.message.replace("[BugCatch] ", ""), g();
     }
-  }), h(), y.addEventListener("input", () => f(y.value));
+  }), s(), d.addEventListener("input", () => L(d.value));
 }
-function nt(e) {
+function dt(e) {
   const {
     client: t,
-    cfg: n,
-    titleInput: y,
+    cfg: r,
+    titleInput: d,
     descInput: u,
-    picks: T
+    picks: S
   } = e;
-  let v = [], s = null;
-  function i() {
-    if (!v.length) {
-      T.hidden = !0, T.innerHTML = "";
+  let b = [], h = null;
+  function f() {
+    if (!b.length) {
+      S.hidden = !0, S.innerHTML = "";
       return;
     }
-    T.hidden = !1, T.innerHTML = `
+    S.hidden = !1, S.innerHTML = `
       <p class="picks-h">Get an answer right away</p>
       <div class="picks-grid" role="group" aria-label="Common questions">
-        ${v.map((h) => `
-          <button type="button" class="pick" data-pick="${m(h.key)}"
-            aria-pressed="${(s == null ? void 0 : s.key) === h.key}">
-            <span class="t">${m(h.title)}</span>
-            ${h.hint ? `<span class="h">${m(h.hint)}</span>` : ""}
+        ${b.map((s, c) => `
+          <button type="button" class="pick" data-pick="${v(s.key)}"
+            ${s.hint ? `title="${v(s.hint)}" aria-describedby="bc-pick-h${c}"` : ""}
+            aria-pressed="${(h == null ? void 0 : h.key) === s.key}">
+            <span class="t">${v(s.title)}</span>
+            ${s.hint ? `<span class="h sr-only" id="bc-pick-h${c}">${v(s.hint)}</span>` : ""}
           </button>`).join("")}
       </div>
-      ${s ? `<p class="picks-note">${W}<span>Our assistant will check your account and reply here. Add anything else below, then send.</span></p>` : ""}`;
-  }
-  T.addEventListener("click", (h) => {
-    const g = h.target.closest("[data-pick]");
-    if (!g) return;
-    const f = v.find((z) => z.key === g.dataset.pick);
-    if (!f) return;
-    const b = s && y.value.trim() === s.title;
-    (s == null ? void 0 : s.key) === f.key ? (s = null, b && (y.value = "")) : (s = f, (!y.value.trim() || b) && (y.value = f.title)), y.dispatchEvent(new Event("input", { bubbles: !0 })), i(), s && u.focus();
-  }), n.agentIssues !== !1 && typeof t.agentIssues == "function" && t.agentIssues().then((h) => {
-    v = h, i();
+      ${h ? `<p class="picks-note">${P}<span>Our assistant will check your account and reply here. Add anything else below, then send.</span></p>` : ""}`;
+  }
+  S.addEventListener("click", (s) => {
+    const c = s.target.closest("[data-pick]");
+    if (!c) return;
+    const L = b.find((w) => w.key === c.dataset.pick);
+    if (!L) return;
+    const g = h && d.value.trim() === h.title;
+    (h == null ? void 0 : h.key) === L.key ? (h = null, g && (d.value = "")) : (h = L, (!d.value.trim() || g) && (d.value = L.title)), d.dispatchEvent(new Event("input", { bubbles: !0 })), f(), h && u.focus();
+  }), r.agentIssues !== !1 && typeof t.agentIssues == "function" && t.agentIssues().then((s) => {
+    b = s, f();
   }).catch(() => {
-  }), e.pickedIssue = () => s;
+  }), e.pickedIssue = () => h;
 }
-function ot(e) {
+function pt(e) {
   const {
     client: t,
-    scrim: n,
-    say: y,
+    scrim: r,
+    say: d,
     callBtn: u,
-    close: T
+    close: S
   } = e;
-  let v = !1;
-  function s() {
-    t.callKind().then((g) => {
-      g && (v = !0, e.preloadCall(), u.hidden = e.mustSignIn());
+  let b = !1;
+  function h() {
+    t.callKind().then((c) => {
+      c && (b = !0, e.preloadCall(), u.hidden = e.mustSignIn() || e.mustRate());
     }).catch(() => {
     });
   }
-  s(), u.addEventListener("click", async () => {
-    e.sending = !0, y(""), e.refreshSendState(), u.disabled = !0, u.innerHTML = '<span class="spinner"></span>Ringing…';
+  h(), u.addEventListener("click", async () => {
+    e.sending = !0, d(""), e.refreshSendState(), u.disabled = !0, u.innerHTML = '<span class="spinner"></span>Ringing…';
     try {
-      const g = await t.startCall();
-      i(g);
-    } catch (g) {
-      e.sending = !1, u.disabled = !1, u.innerHTML = `${ne}Talk to the team`, e.refreshSendState(), g.filed ? e.succeed(g.filed, { callFailed: g.reason || "The call could not be started." }) : (y(g.message.replace("[BugCatch] ", "")), e.recheckSignIn());
+      const c = await t.startCall();
+      f(c);
+    } catch (c) {
+      e.sending = !1, u.disabled = !1, u.innerHTML = `${re}Talk to the team`, e.refreshSendState(), c.filed ? e.succeed(c.filed, { callFailed: c.reason || "The call could not be started." }) : (d(c.message.replace("[BugCatch] ", "")), e.recheckSignIn());
     }
   });
-  function i(g) {
-    const f = n.querySelector(".panel"), b = g != null && g.bugId ? String(g.bugId).slice(0, 8) : null;
-    f.innerHTML = `
+  function f(c) {
+    const L = r.querySelector(".panel"), g = c != null && c.bugId ? String(c.bugId).slice(0, 8) : null;
+    L.innerHTML = `
       <div class="call">
         <div class="call-head">
           <span class="call-dot" aria-hidden="true"></span>
           <strong class="call-state">Ringing…</strong>
         </div>
         <p class="call-note">
-          We're ringing the team now. Someone will pick up if they're free — your report${b ? ` <code>${m(b)}</code>` : ""} is already filed either way, so nothing is lost if nobody answers.
+          We're ringing the team now. Someone will pick up if they're free — your report${g ? ` <code>${v(g)}</code>` : ""} is already filed either way, so nothing is lost if nobody answers.
         </p>
         <div class="foot">
           <span class="spacer"></span>
           <button class="primary" type="button" data-act="hangup">Cancel</button>
         </div>
       </div>`;
-    const z = f.querySelector(".call-state"), Q = f.querySelector(".call-dot"), c = {
+    const w = L.querySelector(".call-state"), x = L.querySelector(".call-dot"), T = {
       ringing: "Ringing the team…",
       connecting: "Someone answered — connecting…",
       connected: "Connected",
       missed: "Nobody was free",
       ended: "Call ended",
       failed: "The call dropped"
-    }, d = ["ended", "failed", "missed"], l = t.on("call", ({ state: a }) => {
-      if (z.textContent = c[a] || a, Q.classList.toggle("off", d.includes(a)), d.includes(a) && (f.querySelector('[data-act="hangup"]').textContent = "Close", a === "missed")) {
-        const r = f.querySelector(".call-note");
-        r && (r.textContent = "Nobody was free to pick up just now. Your report is filed and the team will reply in the chat.");
+    }, i = ["ended", "failed", "missed"], n = t.on("call", ({ state: o }) => {
+      if (w.textContent = T[o] || o, x.classList.toggle("off", i.includes(o)), i.includes(o) && (L.querySelector('[data-act="hangup"]').textContent = "Close", o === "missed")) {
+        const a = L.querySelector(".call-note");
+        a && (a.textContent = "Nobody was free to pick up just now. Your report is filed and the team will reply in the chat.");
       }
     });
-    f.querySelector('[data-act="hangup"]').addEventListener("click", () => {
-      l(), t.endCall(), T();
+    L.querySelector('[data-act="hangup"]').addEventListener("click", () => {
+      n(), t.endCall(), S();
     });
   }
-  function h(g, f, b) {
-    const z = document.createElement("div");
-    z.className = "livecall", z.innerHTML = `
+  function s(c, L, g) {
+    const w = document.createElement("div");
+    w.className = "livecall", w.innerHTML = `
       <span class="call-dot" aria-hidden="true"></span>
       <span class="who" role="status" aria-live="polite">Calling the team…</span>
       <span class="secs" hidden></span>
-      ${b != null && b.recorded ? '<span class="call-kept">This call is recorded.</span>' : ""}
+      ${g != null && g.recorded ? '<span class="call-kept">This call is recorded.</span>' : ""}
       <button class="act" type="button" data-act="mute" hidden>Mute</button>
-      <button class="act danger" type="button" data-act="hangup">Cancel</button>`, g.insertBefore(z, f);
-    const Q = z.querySelector(".who"), c = z.querySelector(".secs"), d = z.querySelector(".call-dot"), l = z.querySelector('[data-act="mute"]'), a = z.querySelector('[data-act="hangup"]');
-    let r = null;
-    const $ = () => {
-      r && (clearInterval(r), r = null);
-    }, E = (p) => {
-      $(), d.classList.add("off"), z.classList.add("over"), Q.textContent = p, c.hidden = !0, l.hidden = !0, a.textContent = "Dismiss", a.classList.remove("danger");
-    }, x = t.on("call", ({ state: p }) => {
-      if (p === "ringing" && (Q.textContent = "Calling the team…"), p === "connecting" && (Q.textContent = "Someone answered — connecting…"), p === "connected") {
-        Q.textContent = "You're on a call with the team", l.hidden = !1, c.hidden = !1;
-        const w = Date.now();
-        $(), r = setInterval(() => {
-          c.textContent = te(Math.floor((Date.now() - w) / 1e3));
-        }, 1e3), c.textContent = "0s";
+      <button class="act danger" type="button" data-act="hangup">Cancel</button>`, c.insertBefore(w, L);
+    const x = w.querySelector(".who"), T = w.querySelector(".secs"), i = w.querySelector(".call-dot"), n = w.querySelector('[data-act="mute"]'), o = w.querySelector('[data-act="hangup"]');
+    let a = null;
+    const k = () => {
+      a && (clearInterval(a), a = null);
+    }, y = (l) => {
+      k(), i.classList.add("off"), w.classList.add("over"), x.textContent = l, T.hidden = !0, n.hidden = !0, o.textContent = "Dismiss", o.classList.remove("danger");
+    }, m = t.on("call", ({ state: l }) => {
+      if (l === "ringing" && (x.textContent = "Calling the team…"), l === "connecting" && (x.textContent = "Someone answered — connecting…"), l === "connected") {
+        x.textContent = "You're on a call with the team", n.hidden = !1, T.hidden = !1;
+        const $ = Date.now();
+        k(), a = setInterval(() => {
+          T.textContent = te(Math.floor((Date.now() - $) / 1e3));
+        }, 1e3), T.textContent = "0s";
       }
-      p === "missed" && E("Nobody was free. Send a message instead and the team will pick it up."), p === "ended" && E("Call ended."), p === "failed" && E("The call dropped.");
+      l === "missed" && y("Nobody was free. Send a message instead and the team will pick it up."), l === "ended" && y("Call ended."), l === "failed" && y("The call dropped.");
     });
-    l.addEventListener("click", () => {
-      const p = b.setMuted(!b.isMuted());
-      l.textContent = p ? "Unmute" : "Mute", Q.textContent = p ? "You're muted" : "You're on a call with the team";
-    }), a.addEventListener("click", () => {
-      x(), $(), t.endCall(), z.remove(), e.refreshThread(e.openReportId());
+    n.addEventListener("click", () => {
+      const l = g.setMuted(!g.isMuted());
+      n.textContent = l ? "Unmute" : "Mute", x.textContent = l ? "You're muted" : "You're on a call with the team";
+    }), o.addEventListener("click", () => {
+      m(), k(), t.endCall(), w.remove(), e.refreshThread(e.openReportId());
     });
   }
-  e.offerCall = s, e.callOffered = () => v, e.showLiveCall = h;
+  e.offerCall = h, e.callOffered = () => b, e.showLiveCall = s;
 }
-function rt(e) {
-  var x;
+function ut(e) {
+  var m;
   const {
     client: t,
-    say: n,
-    compose: y,
+    say: r,
+    compose: d,
     sendBtn: u,
-    historyBtn: T,
-    callBtn: v,
-    whoami: s
+    historyBtn: S,
+    callBtn: b,
+    whoami: h
   } = e;
-  let i = { mode: t.lastLoginMode || "off", signedIn: null }, h = "idle", g = ((x = t.config.user) == null ? void 0 : x.email) || "", f = "", b = !1, z = "";
-  const Q = () => i.mode === "required" && !i.signedIn;
-  function c() {
-    const p = Q();
-    y.hidden = p, u.hidden = p, T && (T.hidden = p), p ? v.hidden = !0 : e.callOffered() && (v.hidden = !1);
-  }
-  function d() {
-    var w;
-    if (i.mode === "off") {
-      s.hidden = !0, s.innerHTML = "";
+  let f = { mode: t.lastLoginMode || "off", signedIn: null }, s = "idle", c = ((m = t.config.user) == null ? void 0 : m.email) || "", L = "", g = !1, w = "";
+  const x = () => f.mode === "required" && !f.signedIn;
+  function T() {
+    const l = x();
+    d.hidden = l, u.hidden = l, S && (S.hidden = l), l ? b.hidden = !0 : e.callOffered() && !e.mustRate() && (b.hidden = !1);
+  }
+  function i() {
+    var $;
+    if (f.mode === "off") {
+      h.hidden = !0, h.innerHTML = "";
       return;
     }
-    s.hidden = !1, s.classList.toggle("asking", h !== "idle");
-    const p = z ? `<div class="after err">${m(z)}</div>` : "";
-    if (h === "idle") {
-      if (i.signedIn) {
-        s.innerHTML = `<span class="who">Signed in as <strong>${m(i.signedIn.email)}</strong></span><button type="button" class="link" data-act="signout">Sign out</button>`;
+    h.hidden = !1, h.classList.toggle("asking", s !== "idle");
+    const l = w ? `<div class="after err">${v(w)}</div>` : "";
+    if (s === "idle") {
+      if (f.signedIn) {
+        h.innerHTML = `<span class="who">Signed in as <strong>${v(f.signedIn.email)}</strong></span><button type="button" class="link" data-act="signout">Sign out</button>`;
         return;
       }
-      const S = (w = t.config.user) == null ? void 0 : w.email;
-      s.innerHTML = `<span class="who">${i.mode === "required" ? "Sign in to report a bug here." : S ? `Reporting as <strong>${m(S)}</strong>.` : "Reporting anonymously — sign in and we can tell you what happens next."}</span><button type="button" class="link" data-act="signin">Sign in</button>`;
+      const q = ($ = t.config.user) == null ? void 0 : $.email;
+      h.innerHTML = `<span class="who">${f.mode === "required" ? "Sign in to report a bug here." : q ? `Reporting as <strong>${v(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 (h === "email") {
-      s.innerHTML = `
+    if (s === "email") {
+      h.innerHTML = `
         <p class="why">Sign in with any email address — we'll send you a code.
-          It's how you hear back about this report${i.mode === "required" ? ", and this project asks for it" : ""}.</p>
+          It's how you hear back about this report${f.mode === "required" ? ", and this project asks for it" : ""}.</p>
         <div class="row">
-          <input type="email" data-fld="email" value="${m(g)}"
+          <input type="email" data-fld="email" value="${v(c)}"
             placeholder="you@example.com" autocomplete="email" spellcheck="false"
-            aria-label="Your email address" ${b ? "disabled" : ""} />
-          <button type="button" class="primary" data-act="code" ${b ? "disabled" : ""}>
-            ${b ? "Sending…" : "Send code"}
+            aria-label="Your email address" ${g ? "disabled" : ""} />
+          <button type="button" class="primary" data-act="code" ${g ? "disabled" : ""}>
+            ${g ? "Sending…" : "Send code"}
           </button>
         </div>
-        ${p}
-        ${i.mode === "optional" ? '<div class="after"><button type="button" class="link" data-act="skip">Not now</button></div>' : ""}`;
+        ${l}
+        ${f.mode === "optional" ? '<div class="after"><button type="button" class="link" data-act="skip">Not now</button></div>' : ""}`;
       return;
     }
-    s.innerHTML = `
-      <p class="why">We sent a code to <strong>${m(g)}</strong>. It expires in ten minutes.</p>
+    h.innerHTML = `
+      <p class="why">We sent a code to <strong>${v(c)}</strong>. It expires in ten minutes.</p>
       <div class="row">
-        <input type="text" class="code" data-fld="code" value="${m(f)}"
+        <input type="text" class="code" data-fld="code" value="${v(L)}"
           placeholder="123456" inputmode="numeric" autocomplete="one-time-code"
-          maxlength="8" aria-label="The code we emailed you" ${b ? "disabled" : ""} />
-        <button type="button" class="primary" data-act="confirm" ${b ? "disabled" : ""}>
-          ${b ? "Checking…" : "Sign in"}
+          maxlength="8" aria-label="The code we emailed you" ${g ? "disabled" : ""} />
+        <button type="button" class="primary" data-act="confirm" ${g ? "disabled" : ""}>
+          ${g ? "Checking…" : "Sign in"}
         </button>
       </div>
-      ${p}
+      ${l}
       <div class="after">
-        <button type="button" class="link" data-act="resend" ${b ? "disabled" : ""}>Send it again</button>
-        <button type="button" class="link" data-act="signin-back" ${b ? "disabled" : ""}>Use another address</button>
+        <button type="button" class="link" data-act="resend" ${g ? "disabled" : ""}>Send it again</button>
+        <button type="button" class="link" data-act="signin-back" ${g ? "disabled" : ""}>Use another address</button>
       </div>`;
   }
-  function l({ focus: p = !1 } = {}) {
-    var S;
-    if (d(), c(), !p || b) return;
-    const w = s.querySelector("[data-fld]");
-    w && (w.focus(), (S = w.setSelectionRange) == null || S.call(w, w.value.length, w.value.length));
-  }
-  s.addEventListener("input", (p) => {
-    const w = p.target.closest("[data-fld]");
-    w && (w.dataset.fld === "email" ? g = w.value : f = w.value);
-  }), s.addEventListener("keydown", (p) => {
-    p.key !== "Enter" || !p.target.closest("[data-fld]") || (p.preventDefault(), h === "email" ? a() : r());
+  function n({ focus: l = !1 } = {}) {
+    var q;
+    if (i(), T(), !l || g) return;
+    const $ = h.querySelector("[data-fld]");
+    $ && ($.focus(), (q = $.setSelectionRange) == null || q.call($, $.value.length, $.value.length));
+  }
+  h.addEventListener("input", (l) => {
+    const $ = l.target.closest("[data-fld]");
+    $ && ($.dataset.fld === "email" ? c = $.value : L = $.value);
+  }), h.addEventListener("keydown", (l) => {
+    l.key !== "Enter" || !l.target.closest("[data-fld]") || (l.preventDefault(), s === "email" ? o() : a());
   });
-  async function a({ resent: p = !1 } = {}) {
-    const w = g.trim();
-    if (!w) {
-      z = "Enter the address to send the code to.", l({ focus: !0 });
+  async function o({ resent: l = !1 } = {}) {
+    const $ = c.trim();
+    if (!$) {
+      w = "Enter the address to send the code to.", n({ focus: !0 });
       return;
     }
-    b = !0, z = "", l();
+    g = !0, w = "", n();
     try {
-      await t.signIn(w), g = w, p || (f = ""), h = "code";
-    } catch (S) {
-      z = S.message;
+      await t.signIn($), c = $, l || (L = ""), s = "code";
+    } catch (q) {
+      w = q.message;
     } finally {
-      b = !1, l({ focus: !0 });
+      g = !1, n({ focus: !0 });
     }
   }
-  async function r() {
-    const p = f.trim();
-    if (!p) {
-      z = "Enter the code we emailed you.", l({ focus: !0 });
+  async function a() {
+    const l = L.trim();
+    if (!l) {
+      w = "Enter the code we emailed you.", n({ focus: !0 });
       return;
     }
-    b = !0, z = "", l();
+    g = !0, w = "", n();
     try {
-      const w = await t.confirmSignIn(g.trim(), p);
-      i.signedIn = w, h = "idle", f = "", n(""), e.offerCall();
-    } catch (w) {
-      z = w.message;
+      const $ = await t.confirmSignIn(c.trim(), l);
+      f.signedIn = $, s = "idle", L = "", r(""), e.offerCall();
+    } catch ($) {
+      w = $.message;
     } finally {
-      b = !1, l({ focus: h !== "idle" });
+      g = !1, n({ focus: s !== "idle" });
     }
   }
-  s.addEventListener("click", async (p) => {
-    const w = p.target.closest("button[data-act]");
-    if (!w) return;
-    const S = w.dataset.act;
-    if (S === "signin") {
-      h = "email", z = "", l({ focus: !0 });
+  h.addEventListener("click", async (l) => {
+    const $ = l.target.closest("button[data-act]");
+    if (!$) return;
+    const q = $.dataset.act;
+    if (q === "signin") {
+      s = "email", w = "", n({ focus: !0 });
       return;
     }
-    if (S === "skip") {
-      h = "idle", z = "", l();
+    if (q === "skip") {
+      s = "idle", w = "", n();
       return;
     }
-    if (S === "signin-back") {
-      h = "email", z = "", f = "", l({ focus: !0 });
+    if (q === "signin-back") {
+      s = "email", w = "", L = "", n({ focus: !0 });
       return;
     }
-    if (S === "code") {
-      a();
+    if (q === "code") {
+      o();
       return;
     }
-    if (S === "resend") {
-      a({ resent: !0 });
+    if (q === "resend") {
+      o({ resent: !0 });
       return;
     }
-    if (S === "confirm") {
-      r();
+    if (q === "confirm") {
+      a();
       return;
     }
-    if (S === "signout") {
-      b = !0, l();
+    if (q === "signout") {
+      g = !0, n();
       try {
         await t.signOut();
       } finally {
-        i.signedIn = null, b = !1, h = i.mode === "required" ? "email" : "idle", l({ focus: h !== "idle" });
+        f.signedIn = null, g = !1, s = f.mode === "required" ? "email" : "idle", n({ focus: s !== "idle" });
       }
     }
   });
-  async function $({ announce: p = !1 } = {}) {
-    const w = await t.loginState();
-    i = { mode: w.mode, signedIn: w.signedIn }, t.lastLoginMode = w.mode, Q() && h === "idle" && (h = "email"), i.signedIn && (h = "idle"), p && w.signedOutReason && n(w.signedOutReason, "info"), l();
+  async function k({ announce: l = !1 } = {}) {
+    const $ = await t.loginState();
+    f = { mode: $.mode, signedIn: $.signedIn }, t.lastLoginMode = $.mode, x() && s === "idle" && (s = "email"), f.signedIn && (s = "idle"), l && $.signedOutReason && r($.signedOutReason, "info"), n();
   }
-  $({ announce: !0 }).catch(() => {
+  k({ announce: !0 }).catch(() => {
   });
-  function E() {
-    i.mode !== "off" && $().catch(() => {
+  function y() {
+    f.mode !== "off" && k().catch(() => {
     });
   }
-  e.mustSignIn = Q, e.recheckSignIn = E;
+  e.mustSignIn = x, e.recheckSignIn = y;
 }
 function he(e) {
   const t = e || [];
   if (!t.length) return "";
-  let n = null, y = null;
+  let r = null, d = null;
   return t.map((u) => {
-    var g, f, b, z;
-    const T = Z(u.at), v = T && T !== n ? `<div class="day-sep" role="separator">${m(Ke(u.at))}</div>` : "";
-    if (v && (n = T, y = null), !u.from)
-      return y = null, v + st(u);
-    const s = {
+    var c, L, g, w;
+    const S = Z(u.at), b = S && S !== r ? `<div class="day-sep" role="separator">${v(Xe(u.at))}</div>` : "";
+    if (b && (r = S, d = null), !u.from)
+      return d = null, b + bt(u);
+    const h = {
       from: u.from,
-      author: (g = u.reply) == null ? void 0 : g.author,
-      automated: (f = u.reply) == null ? void 0 : f.automated,
-      body: (b = u.reply) == null ? void 0 : b.body,
+      author: (c = u.reply) == null ? void 0 : c.author,
+      automated: (L = u.reply) == null ? void 0 : L.automated,
+      body: (g = u.reply) == null ? void 0 : g.body,
       at: u.at,
-      attachments: (z = u.reply) == null ? void 0 : z.attachments
-    }, i = it(s), h = y && y.who === i && Math.abs(new Date(u.at).getTime() - new Date(y.at).getTime()) < 5 * 6e4;
-    return y = { who: i, at: u.at }, v + ye(s, h ? "cont" : "");
+      attachments: (w = u.reply) == null ? void 0 : w.attachments
+    }, f = ht(h), s = d && d.who === f && Math.abs(new Date(u.at).getTime() - new Date(d.at).getTime()) < 5 * 6e4;
+    return d = { who: f, at: u.at }, b + we(h, s ? "cont" : "");
   }).join("");
 }
-function it(e) {
+function ht(e) {
   return e.from === "reporter" ? "me" : e.automated ? "assistant" : `team:${e.author || ""}`;
 }
-function st(e) {
-  const t = me(e.at);
+function bt(e) {
+  const t = ve(e.at);
   return `
-    <div class="sys k-${m(e.kind)}">
-      <span class="dot" aria-hidden="true"></span>${m(e.summary || "")}${t ? `
-      <span class="t">· ${m(t)}</span>` : ""}
+    <div class="sys k-${v(e.kind)}">
+      <span class="dot" aria-hidden="true"></span>${v(e.summary || "")}${t ? `
+      <span class="t">· ${v(t)}</span>` : ""}
     </div>`;
 }
-function ye(e, t = "") {
-  const n = e.from === "reporter", y = e.body || "", u = e.attachments || [], T = !n && !!e.automated, v = y ? `<span class="msg-text">${m(y)}</span>` : "", s = u.length ? `<div class="att">${u.map(ct).join("")}</div>` : "";
-  let i = "", h = "";
-  if (T)
-    i = '<span class="msg-who auto">Assistant <span class="tag">AI</span></span>', h = `<span class="av bot" aria-hidden="true">${X}</span>`;
-  else if (!n) {
-    const f = e.author || "Support team";
-    i = `<span class="msg-who">${m(f)}</span>`, h = `<span class="av" aria-hidden="true">${m(We(f))}</span>`;
-  }
-  t.includes("cont") && (i = "");
-  const g = T && /it goes to the same person/i.test(y) ? `<div class="quick" role="group" aria-label="Answer">
-        <button type="button" data-quick="Yes, this is the problem">${W}That's right</button>
+function we(e, t = "") {
+  const r = e.from === "reporter", d = e.body || "", u = e.attachments || [], S = !r && !!e.automated, b = d ? `<span class="msg-text">${v(d)}</span>` : "", h = u.length ? `<div class="att">${u.map(gt).join("")}</div>` : "";
+  let f = "", s = "";
+  if (S)
+    f = '<span class="msg-who auto">Assistant <span class="tag">AI</span></span>', s = '<span class="av bot orb" aria-hidden="true"></span>';
+  else if (!r) {
+    const L = e.author || "Support team";
+    f = `<span class="msg-who">${v(L)}</span>`, s = `<span class="av" aria-hidden="true">${v(Je(L))}</span>`;
+  }
+  t.includes("cont") && (f = "");
+  const c = S && /it goes to the same person/i.test(d) ? `<div class="quick" role="group" aria-label="Answer">
+        <button type="button" data-quick="Yes, this is the problem">${P}That's right</button>
         <button type="button" data-quick="No, that is not the problem">That's not it</button>
-      </div>` : T && Ee.test(y) ? `<div class="quick" role="group" aria-label="Did this answer your question?">
-          <button type="button" data-quick="Yes, that answers it">${W}Yes, that answers it</button>
+      </div>` : S && Ie.test(d) ? `<div class="quick" role="group" aria-label="Did this answer your question?">
+          <button type="button" data-quick="Yes, that answers it">${P}Yes, that answers it</button>
           <button type="button" data-quick="No, I still need help">No, I still need help</button>
         </div>` : "";
   return `
-    <div class="msg-row ${n ? "mine" : "theirs"} ${T ? "auto" : ""} ${t}">
-      ${h}
-      ${i}
-      <div class="bubble ${y ? "" : "silent"}">${v}${s}</div>
-      ${g}
-      <span class="msg-when">${m(me(e.at) || oe(e.at))}</span>
+    <div class="msg-row ${r ? "mine" : "theirs"} ${S ? "auto" : ""} ${t}">
+      ${s}
+      ${f}
+      <div class="bubble ${d ? "" : "silent"}">${b}${h}</div>
+      ${c}
+      <span class="msg-when">${v(ve(e.at) || J(e.at))}</span>
     </div>`;
 }
-function lt() {
+function ft() {
   return `
     <div class="typing-row">
-      <span class="av bot" aria-hidden="true">${X}</span>
+      <span class="av bot orb" aria-hidden="true"></span>
       <span class="msg-who auto">Assistant <span class="tag">AI</span></span>
       <div class="bubble typing" role="img" aria-label="The assistant is working on it"><i></i><i></i><i></i></div>
     </div>`;
 }
-function ct(e) {
-  const t = m(e.name || "attachment");
+function gt(e) {
+  const t = v(e.name || "attachment");
   if (!e.url) return `<span class="file"><span class="nm">${t}</span></span>`;
-  const n = m(e.url);
-  return e.type === "SCREENSHOT" ? `<a href="${n}" target="_blank" rel="noopener noreferrer"><img src="${n}" alt="${t}" loading="lazy"></a>` : e.type === "AUDIO" ? `<audio controls preload="metadata" src="${n}"></audio>` : e.type === "VIDEO" ? `<video controls preload="metadata" src="${n}"></video>` : `
-    <a class="file" href="${n}" target="_blank" rel="noopener noreferrer" download>
+  const r = v(e.url);
+  return e.type === "SCREENSHOT" ? `<a href="${r}" target="_blank" rel="noopener noreferrer"><img src="${r}" alt="${t}" loading="lazy"></a>` : e.type === "AUDIO" ? `<audio controls preload="metadata" src="${r}"></audio>` : e.type === "VIDEO" ? `<video controls preload="metadata" src="${r}"></video>` : `
+    <a class="file" href="${r}" target="_blank" rel="noopener noreferrer" download>
       <span class="nm">${t}</span>
-      ${e.size ? `<span class="sz">${m(P(e.size))}</span>` : ""}
+      ${e.size ? `<span class="sz">${v(F(e.size))}</span>` : ""}
     </a>`;
 }
-function dt(e, t, n, y) {
-  var E;
-  const { client: u, cfg: T } = e, v = document.createElement("div");
-  v.className = "composer", v.innerHTML = `
+function mt(e, t, r, d) {
+  var y;
+  const { client: u, cfg: S } = e, b = document.createElement("div");
+  b.className = "composer", b.innerHTML = `
     <div class="staged" hidden></div>
     <div class="row">
       <div class="tools">
-        ${T.attachments === !1 ? "" : `
+        ${S.attachments === !1 ? "" : `
         <button class="tool" type="button" data-act="attach" title="Attach a file" aria-label="Attach a file">${fe}</button>
         <button class="tool" type="button" data-act="voice" title="Record a voice note" aria-label="Record a voice note">${pe}</button>`}
-        <button class="tool" type="button" data-act="livecall" title="Call the team" aria-label="Call the team" hidden>${ne}</button>
+        <button class="tool" type="button" data-act="livecall" title="Call the team" aria-label="Call the team" hidden>${re}</button>
       </div>
       <textarea rows="1" placeholder="Write a reply…" aria-label="Write a reply"></textarea>
       <button class="send" type="button" data-act="send" title="Send" aria-label="Send" disabled>${ge}</button>
     </div>
     <div class="note" hidden></div>
-    <input type="file" hidden multiple accept="${Me.join(",")}">`, t.appendChild(v);
-  const s = v.querySelector(".staged"), i = v.querySelector("textarea"), h = v.querySelector('[data-act="send"]'), g = v.querySelector('[data-act="voice"]'), f = v.querySelector('[data-act="livecall"]'), b = v.querySelector("input[type=file]"), z = v.querySelector(".note"), Q = [];
-  let c = null, d = !1;
-  function l(x, p = "") {
-    z.hidden = !x, z.className = `note ${p}`, z.textContent = x || "";
-  }
-  function a() {
-    const x = Q.filter((p) => p.storageKey);
-    h.disabled = d || !i.value.trim() && !x.length, s.hidden = !Q.length, s.innerHTML = Q.map((p, w) => `
-      <span class="chip ${p.storageKey ? "" : "uploading"}">
-        <span class="nm">${m(p.name)}</span>
-        <span class="sz">${p.storageKey ? P(p.size) : "sending…"}</span>
-        <button type="button" data-drop="${w}" aria-label="Remove ${m(p.name)}">${de}</button>
+    <input type="file" hidden multiple accept="${De.join(",")}">`, t.appendChild(b);
+  const h = b.querySelector(".staged"), f = b.querySelector("textarea"), s = b.querySelector('[data-act="send"]'), c = b.querySelector('[data-act="voice"]'), L = b.querySelector('[data-act="livecall"]'), g = b.querySelector("input[type=file]"), w = b.querySelector(".note"), x = [];
+  let T = null, i = !1;
+  function n(m, l = "") {
+    w.hidden = !m, w.className = `note ${l}`, w.textContent = m || "";
+  }
+  function o() {
+    const m = x.filter((l) => l.storageKey);
+    s.disabled = i || !f.value.trim() && !m.length, h.hidden = !x.length, h.innerHTML = x.map((l, $) => `
+      <span class="chip ${l.storageKey ? "" : "uploading"}">
+        <span class="nm">${v(l.name)}</span>
+        <span class="sz">${l.storageKey ? F(l.size) : "sending…"}</span>
+        <button type="button" data-drop="${$}" aria-label="Remove ${v(l.name)}">${ce}</button>
       </span>`).join("");
-    for (const p of s.querySelectorAll("[data-drop]"))
-      p.addEventListener("click", () => {
-        Q.splice(Number(p.dataset.drop), 1), a();
+    for (const l of h.querySelectorAll("[data-drop]"))
+      l.addEventListener("click", () => {
+        x.splice(Number(l.dataset.drop), 1), o();
       });
   }
-  async function r(x, p, w) {
-    const S = { name: w, size: x.size, storageKey: null };
-    Q.push(S), a();
+  async function a(m, l, $) {
+    const q = { name: $, size: m.size, storageKey: null };
+    x.push(q), o();
     try {
-      const { storageKey: A, mime: D } = await u.uploadAttachment(x, p);
-      S.storageKey = A, S.mime = D;
-    } catch (A) {
-      Q.splice(Q.indexOf(S), 1), l(A.message || "That file could not be sent.", "err");
+      const { storageKey: H, mime: O } = await u.uploadAttachment(m, l);
+      q.storageKey = H, q.mime = O;
+    } catch (H) {
+      x.splice(x.indexOf(q), 1), n(H.message || "That file could not be sent.", "err");
     }
-    a();
-  }
-  i.addEventListener("input", () => {
-    i.style.height = "auto", i.style.height = `${Math.min(i.scrollHeight, 120)}px`, a();
-  }), i.addEventListener("keydown", (x) => {
-    x.key === "Enter" && !x.shiftKey && !x.isComposing && (x.preventDefault(), $());
-  }), (E = v.querySelector('[data-act="attach"]')) == null || E.addEventListener("click", () => b.click()), b.addEventListener("change", () => {
-    l("");
-    for (const x of b.files) {
-      if (x.size > u.config.maxAttachmentBytes) {
-        l(`${x.name} is larger than ${P(u.config.maxAttachmentBytes)}.`, "err");
+    o();
+  }
+  f.addEventListener("input", () => {
+    f.style.height = "auto", f.style.height = `${Math.min(f.scrollHeight, 120)}px`, o();
+  }), f.addEventListener("keydown", (m) => {
+    m.key === "Enter" && !m.shiftKey && !m.isComposing && (m.preventDefault(), k());
+  }), (y = b.querySelector('[data-act="attach"]')) == null || y.addEventListener("click", () => g.click()), g.addEventListener("change", () => {
+    n("");
+    for (const m of g.files) {
+      if (m.size > u.config.maxAttachmentBytes) {
+        n(`${m.name} is larger than ${F(u.config.maxAttachmentBytes)}.`, "err");
         continue;
       }
-      r(x, x.type, x.name);
+      a(m, m.type, m.name);
     }
-    b.value = "";
-  }), g && !qe() && (g.disabled = !0, g.title = "This browser cannot record audio"), g == null || g.addEventListener("click", async () => {
-    if (c) {
-      const x = c;
-      c = null, g.classList.remove("recording"), g.innerHTML = pe, l("");
-      const { blob: p, mime: w } = await x.stop();
-      p.size && r(p, w, "Voice note");
+    g.value = "";
+  }), c && !Ve() && (c.disabled = !0, c.title = "This browser cannot record audio"), c == null || c.addEventListener("click", async () => {
+    if (T) {
+      const m = T;
+      T = null, c.classList.remove("recording"), c.innerHTML = pe, n("");
+      const { blob: l, mime: $ } = await m.stop();
+      l.size && a(l, $, "Voice note");
       return;
     }
     try {
-      l(""), c = await Ce({
+      n(""), T = await je({
         maxMs: u.config.maxRecordingMs,
-        onTick: (x) => l(`Recording — ${te(x)}. Tap the mic to stop.`),
-        onAutoStop: () => g.click()
-      }), g.classList.add("recording"), g.innerHTML = Re;
+        onTick: (m) => n(`Recording — ${te(m)}. Tap the mic to stop.`),
+        onAutoStop: () => c.click()
+      }), c.classList.add("recording"), c.innerHTML = Ye;
     } catch {
-      c = null, l("The microphone is not available — check the browser permission.", "err");
+      T = null, n("The microphone is not available — check the browser permission.", "err");
     }
-  }), u.canCallTeam(y).then((x) => {
-    x && (f.hidden = !1, e.preloadCall());
+  }), u.canCallTeam(d).then((m) => {
+    m && (L.hidden = !1, e.preloadCall());
   }).catch(() => {
-  }), f.addEventListener("click", async () => {
-    f.disabled = !0, l("");
+  }), L.addEventListener("click", async () => {
+    L.disabled = !0, n("");
     try {
-      const x = await u.startLiveCall(y);
-      e.showLiveCall(t, n, x);
-    } catch (x) {
-      l(x.message.replace("[BugCatch] ", ""), "err");
+      const m = await u.startLiveCall(d);
+      e.showLiveCall(t, r, m);
+    } catch (m) {
+      n(m.message.replace("[BugCatch] ", ""), "err");
     } finally {
-      f.disabled = !1;
+      L.disabled = !1;
     }
-  }), h.addEventListener("click", $), n.addEventListener("click", (x) => {
-    var w, S;
-    const p = (S = (w = x.target).closest) == null ? void 0 : S.call(w, "[data-quick]");
-    !p || d || (i.value = p.dataset.quick, $());
+  }), s.addEventListener("click", k), r.addEventListener("click", (m) => {
+    var $, q;
+    const l = (q = ($ = m.target).closest) == null ? void 0 : q.call($, "[data-quick]");
+    !l || i || (f.value = l.dataset.quick, k());
   });
-  async function $() {
-    var w;
-    const x = i.value.trim(), p = Q.filter((S) => S.storageKey);
-    if (!(d || !x && !p.length)) {
-      d = !0, a(), l(""), n.insertAdjacentHTML("beforeend", ye({
+  async function k() {
+    var $;
+    const m = f.value.trim(), l = x.filter((q) => q.storageKey);
+    if (!(i || !m && !l.length)) {
+      i = !0, o(), n(""), r.insertAdjacentHTML("beforeend", we({
         from: "reporter",
-        body: x,
+        body: m,
         at: (/* @__PURE__ */ new Date()).toISOString(),
-        attachments: p.map((S) => ({ type: "FILE", name: S.name, size: S.size }))
-      }, "pending")), _(n, { smooth: !0 });
+        attachments: l.map((q) => ({ type: "FILE", name: q.name, size: q.size }))
+      }, "pending")), _(r, { smooth: !0 });
       try {
-        await u.replyToReport(y, {
-          body: x,
-          attachments: p.map((S) => ({
-            storageKey: S.storageKey,
-            mime: S.mime,
-            name: S.name,
-            size: S.size
+        await u.replyToReport(d, {
+          body: m,
+          attachments: l.map((q) => ({
+            storageKey: q.storageKey,
+            mime: q.mime,
+            name: q.name,
+            size: q.size
           }))
-        }), i.value = "", i.style.height = "auto", Q.length = 0, await e.refreshThread(y);
-      } catch (S) {
-        (w = n.querySelector(".msg-row.pending")) == null || w.classList.replace("pending", "failed"), l(S.message || "That could not be sent — try again.", "err");
+        }), f.value = "", f.style.height = "auto", x.length = 0, await e.refreshThread(d);
+      } catch (q) {
+        ($ = r.querySelector(".msg-row.pending")) == null || $.classList.replace("pending", "failed"), n(q.message || "That could not be sent — try again.", "err");
       } finally {
-        d = !1, a();
+        i = !1, o();
       }
     }
   }
-  a();
+  o();
+}
+function ke(e) {
+  return JSON.stringify(e ? [e.score, e.current, e.comment || null] : null);
+}
+function de(e, {
+  client: t,
+  report: r,
+  rating: d,
+  justRated: u = !1,
+  question: S = null,
+  onRated: b = null,
+  onError: h = null
+}) {
+  var i;
+  e.dataset.key = ke(d);
+  const f = d != null && d.current ? d.score : 0, s = d ? d.current ? u ? "Thanks — the team will see that." : `You rated this ${d.score} out of 5.` : `You rated an earlier fix ${d.score} out of 5. How did this one go?` : S || "How did we do?", c = u && (d == null ? void 0 : d.current) && !d.comment;
+  e.innerHTML = `
+      <p class="fr-q">${v(s)}</p>
+      <div class="stars" role="group" aria-label="Rate how this was handled, 1 to 5">${[1, 2, 3, 4, 5].map((n) => `
+        <button type="button" data-score="${n}" aria-pressed="${n === f}" aria-label="${n} out of 5${n === 1 ? ", poor" : n === 5 ? ", great" : ""}" class="${n <= f ? "on" : ""}">${me}</button>`).join("")}
+      </div>
+      ${d != null && d.current && d.comment ? `<p class="fr-said">“${v(d.comment)}”</p>` : ""}
+      ${c ? `
+      <div class="fr-note">
+        <textarea maxlength="2000" aria-label="Add a note to your rating" placeholder="${d.score <= 2 ? "What went wrong? (optional)" : "Anything to add? (optional)"}"></textarea>
+        <button type="button" data-act="rating-note">Add note</button>
+      </div>` : ""}
+      ${d ? "" : '<p class="fr-hint">1 is poor, 5 is great.</p>'}
+      <p class="feedback-status" role="status"></p>`;
+  const L = [...e.querySelectorAll("[data-score]")], g = (n) => L.forEach((o) => o.classList.toggle("on", Number(o.dataset.score) <= n)), w = (n) => e.querySelectorAll("button, textarea").forEach((o) => {
+    o.disabled = n;
+  }), x = e.querySelector(".feedback-status");
+  async function T(n, o) {
+    var a;
+    w(!0), x.textContent = "";
+    try {
+      const k = await t.rate(r.id, { score: n, comment: o });
+      de(e, {
+        client: t,
+        report: r,
+        rating: k,
+        justRated: !0,
+        question: S,
+        onRated: b,
+        onError: h
+      }), (a = e.querySelector(".fr-note textarea")) == null || a.focus(), b == null || b(k);
+    } catch (k) {
+      x.textContent = k.message, w(!1), g(f), h == null || h(k);
+    }
+  }
+  for (const n of L) {
+    const o = Number(n.dataset.score);
+    n.addEventListener("mouseenter", () => g(o)), n.addEventListener("focus", () => g(o)), n.addEventListener("blur", () => g(f)), n.addEventListener("click", () => T(o));
+  }
+  e.querySelector(".stars").addEventListener("mouseleave", () => g(f)), (i = e.querySelector('[data-act="rating-note"]')) == null || i.addEventListener("click", () => {
+    var o;
+    const n = e.querySelector(".fr-note textarea").value.trim();
+    if (!n) {
+      (o = e.querySelector(".fr-note")) == null || o.remove();
+      return;
+    }
+    T(d.score, n);
+  });
 }
-const le = /* @__PURE__ */ new WeakMap();
-function pt(e) {
-  var Q;
+const se = /* @__PURE__ */ new WeakMap();
+function vt(e) {
+  return e.rating ? ` · <span class="rated" aria-label="You rated this ${Number(e.rating)} out of 5">${me}${Number(e.rating)}</span>` : e.ratingAsked ? ' · <span class="rate-ask">Rate it</span>' : "";
+}
+function xt(e) {
+  var T;
   const {
     client: t,
-    scrim: n,
-    close: y
+    scrim: r,
+    close: d
   } = e;
   let u = null;
-  function T(c, { callFailed: d = null } = {}) {
-    if (c != null && c.id && !d) {
-      i(c.id, { fresh: !0 }).then((l) => {
-        l || v(c, { callFailed: d });
+  function S(i, { callFailed: n = null } = {}) {
+    if (i != null && i.id && !n) {
+      f(i.id, { fresh: !0 }).then((o) => {
+        o || b(i, { callFailed: n });
       });
       return;
     }
-    v(c, { callFailed: d });
+    b(i, { callFailed: n });
   }
-  function v(c, { callFailed: d = null } = {}) {
-    var $;
-    const l = c != null && c.id ? String(c.id).slice(0, 8) : null, a = ($ = c == null ? void 0 : c.estimate) != null && $.label ? String(c.estimate.label) : null, r = d ? `<p class="eta">${m(d)} Your report is filed, and the team will reply in the chat.</p>` : "";
-    n.querySelector(".panel").innerHTML = `
+  function b(i, { callFailed: n = null } = {}) {
+    var y;
+    const o = i != null && i.id ? String(i.id).slice(0, 8) : null, a = (y = i == null ? void 0 : i.estimate) != null && y.label ? String(i.estimate.label) : null, k = n ? `<p class="eta">${v(n)} Your report is filed, and the team will reply in the chat.</p>` : "";
+    r.querySelector(".panel").innerHTML = `
       <div class="done">
-        <div class="tick">${W}</div>
+        <div class="tick">${P}</div>
         <h3>Thanks — that's on its way.</h3>
-        <p>${l ? `Filed as <code>${m(l)}</code>.` : "The team has what they need to reproduce it."}</p>
-        ${r}
-        ${a ? `<p class="eta">Reports like this usually take <strong>${m(a)}</strong>. We'll let you know when it moves.</p>` : ""}
-      </div>`, setTimeout(y, r ? 6e3 : a ? 4e3 : 2e3);
-  }
-  async function s() {
-    const c = n.querySelector(".panel");
-    clearTimeout(h), u = null, c.classList.remove("is-chat"), c.innerHTML = `
-      ${ce({ title: "Your reports", sub: "Everything you've reported, and where each one got to." })}
-      <div class="history" aria-busy="true">${Ye(3)}</div>`, c.querySelector('[data-act="close"]').addEventListener("click", y);
-    let d = [];
+        <p>${o ? `Filed as <code>${v(o)}</code>.` : "The team has what they need to reproduce it."}</p>
+        ${k}
+        ${a ? `<p class="eta">Reports like this usually take <strong>${v(a)}</strong>. We'll let you know when it moves.</p>` : ""}
+      </div>`, setTimeout(d, k ? 6e3 : a ? 4e3 : 2e3);
+  }
+  async function h() {
+    const i = r.querySelector(".panel");
+    clearTimeout(s), u = null, i.classList.remove("is-chat"), i.innerHTML = `
+      ${le({ title: "Your reports", sub: "Where each one has got to.", theme: e.themeLabel() })}
+      <div class="history" aria-busy="true">${_e(3)}</div>`, i.querySelector('[data-act="close"]').addEventListener("click", d);
+    let n = [];
     try {
-      ({ reports: d } = await t.myReports());
+      ({ reports: n } = await t.myReports());
     } catch {
-      const a = c.querySelector(".history");
-      a && (a.innerHTML = ie("Couldn't load your reports just now.", G));
+      const a = i.querySelector(".history");
+      a && (a.innerHTML = oe("Couldn't load your reports just now.", G));
       return;
     }
-    const l = c.querySelector(".history");
-    if (l) {
-      l.removeAttribute("aria-busy"), l.innerHTML = d.length ? d.map((a, r) => `
-        <button class="row" type="button" data-report="${m(a.id)}" style="animation-delay:${Math.min(r, 8) * 30}ms">
-          <span class="row-ico" aria-hidden="true">${He}</span>
+    const o = i.querySelector(".history");
+    if (o) {
+      o.removeAttribute("aria-busy"), o.innerHTML = n.length ? n.map((a, k) => `
+        <button class="row" type="button" data-report="${v(a.id)}" style="animation-delay:${Math.min(k, 8) * 30}ms">
+          <span class="row-ico" aria-hidden="true">${Oe}</span>
           <span class="who">
-            <span class="ttl">${m(a.title)}</span>
-            <span class="sub">${m(a.reference)} · ${m(oe(a.createdAt))}</span>
+            <span class="ttl">${v(a.title)}</span>
+            <span class="sub">${v(a.reference)} · ${v(J(a.createdAt))}${vt(a)}</span>
           </span>
-          <span class="pill ${m(String(a.status).toLowerCase())}">${m(se(a.status))}</span>
-          <span class="chev" aria-hidden="true">${je}</span>
-        </button>`).join("") : ie("You haven't reported anything yet.", Oe);
-      for (const a of l.querySelectorAll("[data-report]"))
-        a.addEventListener("click", () => i(a.dataset.report));
+          <span class="pill ${v(String(a.status).toLowerCase())}">${v(ie(a.status))}</span>
+          <span class="chev" aria-hidden="true">${Fe}</span>
+        </button>`).join("") : oe("You haven't reported anything yet.", Ke);
+      for (const a of o.querySelectorAll("[data-report]"))
+        a.addEventListener("click", () => f(a.dataset.report));
     }
   }
-  async function i(c, { fresh: d = !1 } = {}) {
-    var x;
-    const l = n.querySelector(".panel");
-    clearTimeout(h), l.classList.add("is-chat"), l.innerHTML = `
-      ${ce({
+  async function f(i, { fresh: n = !1 } = {}) {
+    var l;
+    const o = r.querySelector(".panel");
+    clearTimeout(s), o.classList.add("is-chat"), o.innerHTML = `
+      ${le({
       back: !0,
-      title: d ? "Looking into it" : "Your report",
-      sub: d ? "Our assistant is on it — it may ask you a question here." : "Everything that has happened, and a way to answer."
+      title: n ? "Looking into it" : "Your report",
+      sub: n ? "It may ask you a question here." : "Updates, and a way to reply.",
+      theme: e.themeLabel()
     })}
-      <div class="history chatting" aria-busy="true"><div class="thread">${Pe()}</div></div>`, l.querySelector('[data-act="close"]').addEventListener("click", y), l.querySelector('[data-act="back"]').addEventListener("click", s);
+      <div class="history chatting" aria-busy="true"><div class="thread">${Ge()}</div></div>`, o.querySelector('[data-act="close"]').addEventListener("click", d), o.querySelector('[data-act="back"]').addEventListener("click", h);
     let a = null;
     try {
-      a = await t.myReport(c);
+      a = await t.myReport(i);
     } catch {
       a = null;
     }
-    const r = l.querySelector(".history");
-    if (!r || !l.querySelector('[data-act="back"]')) return !1;
+    const k = o.querySelector(".history");
+    if (!k || !o.querySelector('[data-act="back"]')) return !1;
     if (!a)
-      return d ? (l.classList.remove("is-chat"), !1) : (r.removeAttribute("aria-busy"), r.innerHTML = ie("Couldn't load that report just now.", G), !1);
-    u = c, t.markReportRead(c);
-    const $ = he(a.timeline);
-    r.classList.add("chatting"), r.removeAttribute("aria-busy"), r.innerHTML = `
+      return n ? (o.classList.remove("is-chat"), !1) : (k.removeAttribute("aria-busy"), k.innerHTML = oe("Couldn't load that report just now.", G), !1);
+    u = i, t.markReportRead(i);
+    const y = he(a.timeline);
+    k.classList.add("chatting"), k.removeAttribute("aria-busy"), k.innerHTML = `
       <div class="report-head">
-        <span class="ttl">${m(a.title)}</span>
-        <span class="sub">${m(a.reference)} · ${m(a.project || "")}</span>
-        <span class="pill ${m(String(a.status).toLowerCase())}">${m(se(a.status))}</span>
-        ${(x = a.estimate) != null && x.label ? `<span class="eta-line">Usually takes ${m(String(a.estimate.label))}</span>` : ""}
+        <span class="ttl">${v(a.title)}</span>
+        <span class="sub">${v(a.reference)} · ${v(a.project || "")}</span>
+        <span class="pill ${v(String(a.status).toLowerCase())}">${v(ie(a.status))}</span>
+        ${(l = a.estimate) != null && l.label ? `<span class="eta-line">Usually takes ${v(String(a.estimate.label))}</span>` : ""}
       </div>
-      <div class="thread" role="log" aria-live="polite" aria-label="Conversation">${$}</div>`;
-    const E = r.querySelector(".thread");
-    return le.set(E, $), _(E), f(r, a), a.canReply && dt(e, r, E, c), g(r, a, c), _(E), !0;
-  }
-  let h = null;
-  function g(c, d, l) {
-    var O, B, k;
-    clearTimeout(h);
-    const a = d.assistant, r = c.querySelector(".thread");
-    let $ = c.querySelector(".assistant");
+      <div class="thread" role="log" aria-live="polite" aria-label="Conversation">${y}</div>`;
+    const m = k.querySelector(".thread");
+    return se.set(m, y), _(m), L(k, a), g(k, a), a.canReply && mt(e, k, m, i), c(k, a, i), _(m), !0;
+  }
+  let s = null;
+  function c(i, n, o) {
+    var B, Q, C;
+    clearTimeout(s);
+    const a = n.assistant, k = i.querySelector(".thread");
+    let y = i.querySelector(".assistant");
     if (!a) {
-      $ == null || $.remove(), (O = r == null ? void 0 : r.querySelector(".typing-row")) == null || O.remove();
+      y == null || y.remove(), (B = k == null ? void 0 : k.querySelector(".typing-row")) == null || B.remove();
       return;
     }
-    const E = ($ == null ? void 0 : $.dataset.phase) || null;
-    $ || ($ = document.createElement("div"), $.setAttribute("role", "status"), $.setAttribute("aria-live", "polite"), (B = c.querySelector(".report-head")) == null || B.after($)), $.className = `assistant ${m(a.phase)}`, $.dataset.phase = a.phase;
-    const x = a.steps || [], p = x.filter((M) => M.state === "done").length, w = x.some((M) => M.state === "active") ? 0.5 : 0, S = x.length ? Math.round((p + w) / x.length * 100) : 0, A = `
-      <div class="as-body${E && E !== a.phase ? " entering" : ""}">
+    const m = (y == null ? void 0 : y.dataset.phase) || null;
+    y || (y = document.createElement("div"), y.setAttribute("role", "status"), y.setAttribute("aria-live", "polite"), (Q = i.querySelector(".report-head")) == null || Q.after(y)), y.className = `assistant ${v(a.phase)}`, y.dataset.phase = a.phase;
+    const l = a.steps || [], $ = l.filter((M) => M.state === "done").length, q = l.some((M) => M.state === "active") ? 0.5 : 0, H = l.length ? Math.round(($ + q) / l.length * 100) : 0, O = `
+      <div class="as-body${m && m !== a.phase ? " entering" : ""}">
         <div class="as-top">
-          <span class="as-orb" aria-hidden="true">${a.phase === "analyzing" ? '<span class="as-spin"></span>' : a.phase === "calling" ? ne : a.phase === "resolved" ? W : X}</span>
+          <span class="as-orb${a.phase === "calling" || a.phase === "resolved" ? "" : " orb"}" aria-hidden="true">${a.phase === "calling" ? re : a.phase === "resolved" ? P : ""}</span>
           <div class="as-text">
-            <div class="as-title">${m(a.title)}</div>
-            <div class="as-detail">${m(a.detail)}</div>
+            <div class="as-title">${v(a.title)}</div>
+            <div class="as-detail">${v(a.detail)}</div>
           </div>
         </div>
       </div>
-      ${x.length ? `
-      <div class="as-progress" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${S}"><i style="width:${S}%"></i></div>
-      <ol class="as-steps">${x.map((M) => `<li class="${m(M.state)}"${M.state === "active" ? ' aria-current="step"' : ""}><span class="dot"></span><span class="lbl">${m(M.label)}</span></li>`).join("")}</ol>` : ""}`, D = JSON.stringify([a.phase, a.title, a.detail, x]);
-    if ($.dataset.key !== D) {
-      const M = $.querySelector(".as-progress i"), H = M == null ? void 0 : M.style.width;
-      $.innerHTML = A, $.dataset.key = D;
-      const V = $.querySelector(".as-progress i");
-      V && H && (V.style.width = H, requestAnimationFrame(() => {
-        V.style.width = `${S}%`;
+      ${l.length ? `
+      <div class="as-progress" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${H}"><i style="width:${H}%"></i></div>
+      <ol class="as-steps">${l.map((M) => `<li class="${v(M.state)}"${M.state === "active" ? ' aria-current="step"' : ""}><span class="dot"></span><span class="lbl">${v(M.label)}</span></li>`).join("")}</ol>` : ""}`, N = JSON.stringify([a.phase, a.title, a.detail, l]);
+    if (y.dataset.key !== N) {
+      const M = y.querySelector(".as-progress i"), D = M == null ? void 0 : M.style.width;
+      y.innerHTML = O, y.dataset.key = N;
+      const V = y.querySelector(".as-progress i");
+      V && D && (V.style.width = D, requestAnimationFrame(() => {
+        V.style.width = `${H}%`;
       }));
     }
-    if (r) {
-      const M = ue(r), H = r.querySelector(".typing-row");
-      a.phase !== "analyzing" ? H == null || H.remove() : (!H || H !== r.lastElementChild) && (H == null || H.remove(), r.insertAdjacentHTML("beforeend", lt()), M && _(r));
+    if (k) {
+      const M = ue(k), D = k.querySelector(".typing-row");
+      a.phase !== "analyzing" ? D == null || D.remove() : (!D || D !== k.lastElementChild) && (D == null || D.remove(), k.insertAdjacentHTML("beforeend", ft()), M && _(k));
     }
-    a.phase === "analyzing" ? h = setTimeout(() => b(l), 3e3) : a.phase === "calling" ? h = setTimeout(() => b(l), 1e4) : a.phase === "needs_info" && E !== "needs_info" && ((k = c.querySelector(".composer textarea")) == null || k.focus());
-  }
-  function f(c, d) {
-    var a, r;
-    if ((a = c.querySelector(".fix-verification")) == null || a.remove(), !d.resolvedAt || !["RESOLVED", "CLOSED"].includes(d.status)) return;
-    const l = document.createElement("div");
-    l.className = "fix-verification", d.verification ? l.textContent = d.verification === "CONFIRMED" ? "You confirmed that this fix works." : "Your feedback was recorded." : (l.innerHTML = '<p>Does the fix work for you?</p><textarea maxlength="4000" aria-label="Fix feedback" placeholder="What happens when you try again? (optional)"></textarea><button type="button" data-result="CONFIRMED">It works now</button> <button type="button" data-result="STILL_HAPPENING">Still happening</button><p class="feedback-status" role="status"></p>', l.querySelectorAll("[data-result]").forEach(($) => {
-      $.onclick = async () => {
-        l.querySelectorAll("button").forEach((E) => {
-          E.disabled = !0;
+    a.phase === "analyzing" ? s = setTimeout(() => w(o), 3e3) : a.phase === "calling" ? s = setTimeout(() => w(o), 1e4) : a.phase === "needs_info" && m !== "needs_info" && ((C = i.querySelector(".composer textarea")) == null || C.focus());
+  }
+  function L(i, n) {
+    var a, k;
+    if ((a = i.querySelector(".fix-verification")) == null || a.remove(), !n.resolvedAt || !["RESOLVED", "CLOSED"].includes(n.status)) return;
+    const o = document.createElement("div");
+    o.className = "fix-verification", n.verification ? o.textContent = n.verification === "CONFIRMED" ? "You confirmed that this fix works." : "Your feedback was recorded." : (o.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>', o.querySelectorAll("[data-result]").forEach((y) => {
+      y.onclick = async () => {
+        o.querySelectorAll("button").forEach((m) => {
+          m.disabled = !0;
         });
         try {
-          await t.verifyFix(d.id, { result: $.dataset.result, resolvedAt: d.resolvedAt, note: l.querySelector("textarea").value }), await i(d.id);
-        } catch (E) {
-          l.querySelector(".feedback-status").textContent = E.message, l.querySelectorAll("button").forEach((x) => {
-            x.disabled = !1;
+          await t.verifyFix(n.id, { result: y.dataset.result, resolvedAt: n.resolvedAt, note: o.querySelector("textarea").value }), await f(n.id);
+        } catch (m) {
+          o.querySelector(".feedback-status").textContent = m.message, o.querySelectorAll("button").forEach((l) => {
+            l.disabled = !1;
           });
         }
       };
-    })), (r = c.querySelector(".report-head")) == null || r.after(l);
+    })), (k = i.querySelector(".report-head")) == null || k.after(o);
+  }
+  function g(i, n) {
+    var k;
+    let o = i.querySelector(".fix-rating");
+    if (!["RESOLVED", "CLOSED"].includes(n.status) || !n.ratingAsked) {
+      o == null || o.remove();
+      return;
+    }
+    o && o.dataset.key === ke(n.rating) || (o || (o = document.createElement("div"), o.className = "fix-rating", (k = i.querySelector(".fix-verification") || i.querySelector(".report-head")) == null || k.after(o)), de(o, { client: t, report: n, rating: n.rating || null }));
   }
-  async function b(c) {
-    const d = n.querySelector(".history.chatting"), l = d == null ? void 0 : d.querySelector(".thread");
-    if (!l || u !== c) return;
+  async function w(i) {
+    const n = r.querySelector(".history.chatting"), o = n == null ? void 0 : n.querySelector(".thread");
+    if (!o || u !== i) return;
     let a = null;
     try {
-      a = await t.myReport(c);
+      a = await t.myReport(i);
     } catch {
     }
-    if (e.closed || !a || u !== c) return;
-    f(d, a);
-    const r = ue(l), $ = he(a.timeline);
-    le.get(l) !== $ && (l.innerHTML = $, le.set(l, $)), g(d, a, c), r && _(l);
-    const E = d.querySelector(".report-head .pill");
-    E && (E.className = `pill ${String(a.status).toLowerCase()}`, E.textContent = se(a.status));
-  }
-  const z = t.on("update", (c) => {
-    !u || (c == null ? void 0 : c.bugId) !== u || (t.markReportRead(u), b(u));
+    if (e.closed || !a || u !== i) return;
+    L(n, a), g(n, a);
+    const k = ue(o), y = he(a.timeline);
+    se.get(o) !== y && (o.innerHTML = y, se.set(o, y)), c(n, a, i), k && _(o);
+    const m = n.querySelector(".report-head .pill");
+    m && (m.className = `pill ${String(a.status).toLowerCase()}`, m.textContent = ie(a.status));
+  }
+  const x = t.on("update", (i) => {
+    !u || (i == null ? void 0 : i.bugId) !== u || (t.markReportRead(u), w(u));
   });
   e.onDestroy(() => {
-    z(), clearTimeout(h);
-  }), (Q = n.querySelector('[data-act="history"]')) == null || Q.addEventListener("click", s), e.succeed = T, e.refreshThread = b, e.openReportId = () => u;
+    x(), clearTimeout(s);
+  }), (T = r.querySelector('[data-act="history"]')) == null || T.addEventListener("click", h), e.succeed = S, e.refreshThread = w, e.openReportId = () => u;
+}
+const $e = "bugcatch.rateLater", yt = 50;
+function Se() {
+  try {
+    const e = JSON.parse(window.localStorage.getItem($e) || "[]");
+    return Array.isArray(e) ? e : [];
+  } catch {
+    return [];
+  }
+}
+function wt(e) {
+  try {
+    const t = Se().filter((r) => r !== e);
+    t.push(e), window.localStorage.setItem($e, JSON.stringify(t.slice(-yt)));
+  } catch {
+  }
+}
+function kt(e, t = Se()) {
+  const r = new Set(t), d = (e || []).filter((S) => S.ratingDue === "require" || S.ratingDue === "ask" && !r.has(S.id));
+  if (!d.length) return null;
+  const u = (S) => new Date(S.resolvedAt || S.updatedAt || 0).getTime() || 0;
+  return d.reduce((S, b) => u(b) > u(S) ? b : S);
+}
+function $t(e) {
+  const {
+    client: t,
+    rateDue: r,
+    compose: d,
+    picks: u,
+    known: S,
+    callBtn: b,
+    titleInput: h,
+    scrim: f
+  } = e;
+  let s = !1;
+  e.mustRate = () => s;
+  function c(x) {
+    s = x;
+    for (const T of [d, u, S])
+      T.classList.toggle("held", x), T.inert = x;
+    x ? b.hidden = !0 : e.callOffered() && !e.mustSignIn() && (b.hidden = !1), e.refreshSendState();
+  }
+  function L() {
+    s && c(!1);
+  }
+  function g() {
+    r.hidden = !0, r.replaceChildren(), L(), h.focus();
+  }
+  function w(x) {
+    var o;
+    const T = x.ratingDue === "require", i = x.resolvedAt ? J(x.resolvedAt) : "", n = x.status === "CLOSED" ? "closed" : "fixed";
+    if (r.hidden = !1, r.classList.toggle("is-required", T), r.innerHTML = `
+      <div class="rd-head">
+        <span class="rd-eyebrow">${T ? "Before you report something new" : `Your report was ${n}`}</span>
+        ${T ? "" : '<button type="button" class="link rd-later" data-act="rate-later">Not now</button>'}
+      </div>
+      <p class="rd-report">
+        <span class="rd-ico" aria-hidden="true">${P}</span>
+        <span class="rd-ttl">${v(x.title)}</span>
+        <span class="rd-sub">${v(x.reference)}${i ? ` · ${n} ${v(i)}` : ""}</span>
+      </p>
+      <div class="rd-stars"></div>`, (o = r.querySelector('[data-act="rate-later"]')) == null || o.addEventListener("click", () => {
+      wt(x.id), g();
+    }), de(r.querySelector(".rd-stars"), {
+      client: t,
+      report: x,
+      rating: null,
+      question: T ? "How did we handle it? Rate it to send a new one." : "How did we do?",
+      onRated: () => {
+        var a;
+        r.querySelector(".rd-eyebrow").textContent = `Your report was ${n}`, (a = r.querySelector('[data-act="skip"]')) == null || a.remove(), r.classList.remove("is-required"), L();
+      },
+      // The rating could not be sent. A held form must not turn into a locked
+      // door because of our outage: offer the way past.
+      onError: () => {
+        if (!s || r.querySelector('[data-act="skip"]')) return;
+        const a = document.createElement("button");
+        a.type = "button", a.className = "link rd-later", a.dataset.act = "skip", a.textContent = "Skip for now", a.addEventListener("click", g), r.querySelector(".rd-head").append(a);
+      }
+    }), T) {
+      c(!0);
+      const a = f.getRootNode().activeElement;
+      (!a || !r.contains(a)) && r.focus();
+    }
+  }
+  t.hasReports() && t.myReports().then(({ reports: x }) => {
+    if (e.closed) return;
+    const T = kt(x);
+    T && w(T);
+  }).catch(() => {
+  });
 }
-function bt({
+function Qt({
   root: e,
   host: t,
-  dock: n,
-  client: y,
+  dock: r,
+  client: d,
   onClose: u,
-  preloadCall: T = () => {
-  }
+  preloadCall: S = () => {
+  },
+  themeControls: b = null
 }) {
-  ut(e);
-  const v = y.config, s = document.createElement("div");
-  s.className = `scrim ${n.classList.contains("at-left") ? "at-left" : "at-right"} ${n.classList.contains("at-top") ? "at-top" : "at-bottom"}`, s.style.setProperty("--bc-dock-h", `${Math.round(n.getBoundingClientRect().height)}px`), s.innerHTML = `
+  St(e);
+  const h = d.config, f = () => (b == null ? void 0 : b.label()) || "", s = document.createElement("div");
+  s.className = `scrim ${r.classList.contains("at-left") ? "at-left" : "at-right"} ${r.classList.contains("at-top") ? "at-top" : "at-bottom"}`, s.style.setProperty("--bc-dock-h", `${Math.round(r.getBoundingClientRect().height)}px`), s.innerHTML = `
     <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
-      ${ce({
+      ${le({
     id: "bc-h",
-    title: "Tell us what went wrong",
-    sub: "Our assistant starts looking right away. We attach the page details for you."
+    // Not "Tell us what went wrong": that is the first field's own label,
+    // a few pixels below. The header names the errand the launcher named.
+    title: "Report a bug",
+    sub: "We attach the page details for you.",
+    theme: f()
   })}
       <div class="body">
         <div class="slot" role="alert"></div>
+        <!-- A settled report still waiting for its rating. Drawn only when the
+             project asks for one here; see rate-due.js. -->
+        <div class="rate-due fix-rating" tabindex="-1" hidden></div>
         <!-- What the project's team is telling visitors. Drawn only when it
              has published something. -->
         <div class="notices" hidden></div>
@@ -2281,51 +2542,53 @@ function bt({
              close by itself. Drawn only when the project offers any. -->
         <div class="picks" hidden></div>
         <div class="known" hidden></div>
-        ${Ge(v)}
+        ${nt(h)}
       </div>
       <div class="foot">
         <span class="note" aria-live="polite"></span>
-        ${y.hasReports() ? '<button class="quiet" type="button" data-act="history">Your reports</button>' : ""}
+        ${d.hasReports() ? '<button class="quiet" type="button" data-act="history">Your reports</button>' : ""}
         <span class="spacer"></span>
         <!-- Hidden until the API confirms this project can take a call, which
              most cannot. Drawn here rather than as a second launcher because it
              is the same errand as Send report — the difference is only whether
              the reporter would rather say it than type it. -->
-        <button class="ghost" type="button" data-act="call" hidden>${ne}Talk to the team</button>
+        <button class="ghost" type="button" data-act="call" hidden>${re}Talk to the team</button>
         <button class="primary" type="button" data-act="send">Send report ${ge}</button>
       </div>
       <div class="powered">Powered by
-        <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${Be}</a>
+        <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${Ue}</a>
       </div>
     </div>`;
-  const i = (r) => s.querySelector(r), h = i(".slot"), g = [], f = {
-    client: y,
-    cfg: v,
+  const c = (y) => s.querySelector(y), L = c(".slot"), g = [], w = {
+    client: d,
+    cfg: h,
     root: e,
     host: t,
-    dock: n,
+    dock: r,
     scrim: s,
-    $: i,
-    titleInput: i("#bc-title"),
-    descInput: i("#bc-desc"),
-    compose: i(".compose"),
-    sendBtn: i('[data-act="send"]'),
-    callBtn: i('[data-act="call"]'),
-    historyBtn: i('[data-act="history"]'),
-    note: i(".foot .note"),
-    whoami: i(".whoami"),
-    refsBox: i(".refs"),
-    notices: i(".notices"),
-    known: i(".known"),
-    picks: i(".picks"),
+    $: c,
+    titleInput: c("#bc-title"),
+    descInput: c("#bc-desc"),
+    compose: c(".compose"),
+    sendBtn: c('[data-act="send"]'),
+    callBtn: c('[data-act="call"]'),
+    historyBtn: c('[data-act="history"]'),
+    note: c(".foot .note"),
+    whoami: c(".whoami"),
+    refsBox: c(".refs"),
+    notices: c(".notices"),
+    known: c(".known"),
+    picks: c(".picks"),
+    rateDue: c(".rate-due"),
     // A report or a call is on its way. Escape and a click outside wait for it.
     sending: !1,
     closed: !1,
-    say: a,
-    close: d,
-    preloadCall: T,
-    onDestroy: (r) => {
-      g.push(r);
+    say: k,
+    close: o,
+    preloadCall: S,
+    themeLabel: f,
+    onDestroy: (y) => {
+      g.push(y);
     },
     // compose.js
     refreshSendState: null,
@@ -2343,60 +2606,67 @@ function bt({
     // signin.js
     mustSignIn: null,
     recheckSignIn: null,
+    // rate-due.js
+    mustRate: () => !1,
     // thread.js
     succeed: null,
     refreshThread: null,
     openReportId: null
   };
-  Xe(f), Je(f), tt(f), at(f), nt(f), ot(f), rt(f), pt(f);
-  const b = document.activeElement, z = document.documentElement.style, Q = z.overflow;
-  z.overflow = "hidden";
-  function c() {
-    f.closed || (g.forEach((r) => r()), f.closed = !0, z.overflow = Q, document.removeEventListener("keydown", l, !0), s.remove(), n.hidden = !1, t.style.opacity = "", u == null || u());
-  }
-  function d() {
-    var r;
-    if (!f.closed) {
-      s.classList.add("closing"), setTimeout(c, 160);
+  ot(w), it(w), lt(w), ct(w), dt(w), pt(w), ut(w), xt(w), $t(w);
+  const x = document.activeElement, T = document.documentElement.style, i = T.overflow;
+  T.overflow = "hidden";
+  function n() {
+    w.closed || (g.forEach((y) => y()), w.closed = !0, T.overflow = i, document.removeEventListener("keydown", a, !0), s.remove(), r.hidden = !1, t.style.opacity = "", u == null || u());
+  }
+  function o() {
+    var y;
+    if (!w.closed) {
+      s.classList.add("closing"), setTimeout(n, 160);
       try {
-        (r = b == null ? void 0 : b.focus) == null || r.call(b);
+        (y = x == null ? void 0 : x.focus) == null || y.call(x);
       } catch {
       }
     }
   }
-  function l(r) {
-    if (r.key === "Escape") {
-      if (r.stopPropagation(), f.isRecording()) {
-        f.stopRecording({ keep: !1 });
+  function a(y) {
+    if (y.key === "Escape") {
+      if (y.stopPropagation(), w.isRecording()) {
+        w.stopRecording({ keep: !1 });
         return;
       }
-      f.sending || d();
+      w.sending || o();
       return;
     }
-    if (r.key !== "Tab" || f.isRecording()) return;
-    const $ = [...s.querySelectorAll(
+    if (y.key !== "Tab" || w.isRecording()) return;
+    const m = [...s.querySelectorAll(
       "button:not(:disabled), input:not([hidden]), textarea, select, [href]"
-    )].filter((w) => w.offsetParent !== null || w === document.activeElement);
-    if (!$.length) return;
-    const E = $[0], x = $[$.length - 1], p = s.getRootNode().activeElement;
-    r.shiftKey && p === E ? (r.preventDefault(), x.focus()) : !r.shiftKey && p === x && (r.preventDefault(), E.focus());
+    )].filter((H) => H.offsetParent !== null || H === document.activeElement);
+    if (!m.length) return;
+    const l = m[0], $ = m[m.length - 1], q = s.getRootNode().activeElement;
+    y.shiftKey && q === l ? (y.preventDefault(), $.focus()) : !y.shiftKey && q === $ && (y.preventDefault(), l.focus());
   }
-  document.addEventListener("keydown", l, !0), s.addEventListener("click", (r) => {
-    r.target === s && !f.sending && d();
-  }), i('[data-act="close"]').addEventListener("click", d);
-  function a(r, $ = "err") {
-    h.innerHTML = r ? `<div class="msg ${$}">${$ === "err" ? G : ""}<span>${m(r)}</span></div>` : "";
+  document.addEventListener("keydown", a, !0), s.addEventListener("click", (y) => {
+    y.target === s && !w.sending && o();
+  }), c('[data-act="close"]').addEventListener("click", o), s.addEventListener("click", (y) => {
+    const m = y.target.closest('[data-act="theme"]');
+    if (!m || !b) return;
+    const l = b.cycle();
+    m.title = `Theme: ${l.label}`, m.setAttribute("aria-label", `Theme: ${l.label}. Change theme`);
+  });
+  function k(y, m = "err") {
+    L.innerHTML = y ? `<div class="msg ${m}">${m === "err" ? G : ""}<span>${v(y)}</span></div>` : "";
   }
-  return e.appendChild(s), f.refreshSendState(), f.titleInput.focus(), { destroy: c, close: d };
+  return e.appendChild(s), w.refreshSendState(), w.titleInput.focus(), { destroy: n, close: o };
 }
-function ut(e) {
+function St(e) {
   if (e.querySelector("style[data-panel]")) return;
   const t = document.createElement("style");
-  t.setAttribute("data-panel", ""), t.textContent = Ne;
-  const n = e.querySelector("style");
-  n ? n.after(t) : e.prepend(t);
+  t.setAttribute("data-panel", ""), t.textContent = Ze;
+  const r = e.querySelector("style");
+  r ? r.after(t) : e.prepend(t);
 }
 export {
-  bt as openPanel
+  Qt as openPanel
 };
 //# sourceMappingURL=bugcatch-panel.es.js.map