@sphoro/bugcatch-web-sdk 0.14.3 → 0.15.0

package/src/widget.js

@@ -46,7 +46,18 @@ const ICONS = {
   retry: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.6-5.9M20 4v4.5h-4.5"/></svg>',
   sun: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.4 5.4l1.6 1.6M17 17l1.6 1.6M18.6 5.4L17 7M7 17l-1.6 1.6"/></svg>',
   moon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13.4A8.2 8.2 0 1 1 10.6 4a6.6 6.6 0 0 0 9.4 9.4z"/></svg>',
-  auto: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="2.8" y="4.4" width="18.4" height="12.6" rx="2.2"/><path d="M8.6 20.2h6.8"/><path d="M12 4.4v12.6"/><path d="M12 7.2a3.6 3.6 0 0 1 0 7.2z" fill="currentColor" stroke="none"/></svg>'};
+  auto: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="2.8" y="4.4" width="18.4" height="12.6" rx="2.2"/><path d="M8.6 20.2h6.8"/><path d="M12 4.4v12.6"/><path d="M12 7.2a3.6 3.6 0 0 1 0 7.2z" fill="currentColor" stroke="none"/></svg>',
+  // The assistant's mark: a four-point spark, drawn wherever it speaks.
+  sparkle: '<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>',
+  chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5a7.5 7 0 0 1 7.5-7h1a7.5 7 0 0 1 0 14H9l-4.2 2.6a.5.5 0 0 1-.76-.5l.5-3.1A7 7 0 0 1 4 11.5z"/><path d="M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01" stroke-width="2.6"/></svg>',
+  chevronDown: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9.5l6 6 6-6"/></svg>',
+  chevronRight: '<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>',
+  alert: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.2M12 16.3h.01"/></svg>',
+  inbox: '<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>',
+};
+
+/* The assistant's avatar, wherever it appears. */
+const AVATAR = `<span class="avatar" aria-hidden="true">${ICONS.sparkle}</span>`;
 
 /* The sphoro lockup, as outlines rather than text.
  *
@@ -97,10 +108,10 @@ const css = (accent) => `
   --bc-bg: #fff;
   --bc-elevated: #fff;
   --bc-fg: #14161c;
-  --bc-muted: #6b7280;
+  --bc-muted: #5f6673;
   --bc-faint: #9aa1ad;
-  --bc-border: #e3e6ec;
-  --bc-subtle: #f5f6f8;
+  --bc-border: #e6e8ee;
+  --bc-subtle: #f4f5f8;
   --bc-raised: #fff;
   --bc-danger: #dc2626;
   --bc-ok: #059669;
@@ -110,36 +121,56 @@ const css = (accent) => `
      identifies itself without out-shouting the host's page. */
   --bc-brand-ink: #4b5563;
   --bc-brand-mark: #5647ee;
-  --bc-shadow: 0 24px 60px rgba(10,12,16,.28), 0 2px 8px rgba(10,12,16,.08);
+  --bc-shadow: 0 24px 64px rgba(10,12,16,.22), 0 4px 14px rgba(10,12,16,.08);
+  --bc-shadow-sm: 0 1px 2px rgba(10,12,16,.06), 0 1px 1px rgba(10,12,16,.04);
   --bc-dur: 240ms;
   --bc-ease: cubic-bezier(.22,1,.36,1);
+  /* The system everything below is drawn from. Derived tokens are written in
+     terms of the ones above, so a host that overrides --bc-accent or the
+     palette gets a coherent result without touching these. */
+  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 10%, var(--bc-bg));
+  --bc-accent-line: color-mix(in srgb, var(--bc-accent) 32%, var(--bc-border));
+  --bc-ring: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 22%, transparent);
+  --bc-r-sm: 8px;
+  --bc-r-md: 12px;
+  --bc-r-lg: 18px;
+  --bc-r-xl: 22px;
+  --bc-fs-xs: 11.5px;
+  --bc-fs-sm: 12.5px;
+  --bc-fs-md: 14px;
+  --bc-fs-lg: 16px;
+  --bc-pad: 18px;
 }
 :host(.bc-dark) {
   --bc-bg: #14161c;
   --bc-elevated: #1c1f27;
   --bc-fg: #eef0f4;
-  --bc-muted: #9aa1ad;
-  --bc-faint: #6b7280;
-  --bc-border: #2b2f39;
-  --bc-subtle: #21242c;
+  --bc-muted: #a3aab6;
+  --bc-faint: #6f7682;
+  --bc-border: #2a2e38;
+  --bc-subtle: #1f222a;
   --bc-raised: #363d4b;
   --bc-brand-ink: #9aa1ad;
   --bc-brand-mark: #9b8fff;
-  --bc-shadow: 0 24px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
+  --bc-shadow: 0 24px 64px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4);
+  --bc-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
+  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 18%, var(--bc-bg));
 }
 @media (prefers-color-scheme: dark) {
   :host(.bc-auto) {
     --bc-bg: #14161c;
     --bc-elevated: #1c1f27;
     --bc-fg: #eef0f4;
-    --bc-muted: #9aa1ad;
-    --bc-faint: #6b7280;
-    --bc-border: #2b2f39;
-    --bc-subtle: #21242c;
+    --bc-muted: #a3aab6;
+    --bc-faint: #6f7682;
+    --bc-border: #2a2e38;
+    --bc-subtle: #1f222a;
     --bc-raised: #363d4b;
     --bc-brand-ink: #9aa1ad;
     --bc-brand-mark: #9b8fff;
-    --bc-shadow: 0 24px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
+    --bc-shadow: 0 24px 64px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4);
+    --bc-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
+    --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 18%, var(--bc-bg));
   }
 }
 
@@ -150,6 +181,16 @@ svg { width: 1em; height: 1em; display: block; }
    — which is why .dock and .launcher each had to say so themselves. Said once,
    for all of them, so the next element hidden from JavaScript works. */
 [hidden] { display: none !important; }
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+/* One focus ring for everything clickable, so keyboard users never have to
+   guess where they are. Fields draw their own ring (a glow, not an outline). */
+button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-visible {
+  outline: 2px solid var(--bc-accent); outline-offset: 2px;
+}
 
 /* Motion is decoration here — every animation below is an entrance or a state
    hint, so switching them off costs nothing but the polish. */
@@ -163,14 +204,19 @@ svg { width: 1em; height: 1em; display: block; }
 
 @keyframes bc-fade-in { from { opacity: 0 } to { opacity: 1 } }
 @keyframes bc-fade-out { to { opacity: 0 } }
-@keyframes bc-panel-in { from { opacity: 0; transform: translateY(16px) scale(.97) } to { opacity: 1; transform: none } }
-@keyframes bc-panel-out { to { opacity: 0; transform: translateY(8px) scale(.985) } }
+@keyframes bc-panel-in { from { opacity: 0; transform: translateY(14px) scale(.965) } to { opacity: 1; transform: none } }
+@keyframes bc-panel-out { to { opacity: 0; transform: translateY(10px) scale(.975) } }
+@keyframes bc-sheet-in { from { transform: translateY(100%) } to { transform: none } }
+@keyframes bc-sheet-out { to { transform: translateY(100%) } }
 @keyframes bc-launcher-in { from { opacity: 0; transform: translateY(12px) scale(.86) } to { opacity: 1; transform: none } }
-@keyframes bc-item-in { from { opacity: 0; transform: translateY(8px) scale(.92) } to { opacity: 1; transform: none } }
+@keyframes bc-item-in { from { opacity: 0; transform: translateY(8px) scale(.96) } to { opacity: 1; transform: none } }
+@keyframes bc-rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
 @keyframes bc-pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .3; transform: scale(.78) } }
 @keyframes bc-spin { to { transform: rotate(360deg) } }
 @keyframes bc-pop { 0% { transform: scale(.5); opacity: 0 } 65% { transform: scale(1.1) } 100% { transform: scale(1); opacity: 1 } }
 @keyframes bc-nudge { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
+@keyframes bc-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-3px); opacity: 1 } }
+@keyframes bc-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
 
 /* ---------- dock: theme switch stacked above the launcher ---------- */
 .dock {
@@ -191,7 +237,7 @@ svg { width: 1em; height: 1em; display: block; }
   display: inline-flex; align-items: center; gap: 2px;
   padding: 3px; border-radius: 999px;
   background: var(--bc-elevated); border: 1px solid var(--bc-border);
-  box-shadow: 0 6px 18px rgba(10,12,16,.16), 0 1px 3px rgba(10,12,16,.10);
+  box-shadow: 0 6px 18px rgba(10,12,16,.14), 0 1px 3px rgba(10,12,16,.08);
   animation: bc-launcher-in 420ms var(--bc-ease) both;
 }
 .themer button {
@@ -206,88 +252,152 @@ svg { width: 1em; height: 1em; display: block; }
 .themer button:active { transform: scale(.92); }
 .themer button[aria-pressed="true"] { background: var(--bc-accent); color: var(--bc-on-accent); }
 .themer button[aria-pressed="true"]:hover { background: var(--bc-accent); filter: brightness(1.06); }
-.themer button:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; }
 
 /* ---------- launcher ---------- */
 .launcher {
-  display: inline-flex; align-items: center; gap: 8px;
-  padding: 11px 17px; border: none; border-radius: 999px;
+  position: relative;
+  display: inline-flex; align-items: center; gap: 9px;
+  height: 48px; padding: 0 20px 0 16px; border: none; border-radius: 999px;
   background: var(--bc-accent); color: var(--bc-on-accent);
-  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
+  font-size: var(--bc-fs-md); font-weight: 620; line-height: 1; letter-spacing: -.01em;
   cursor: pointer;
-  box-shadow: 0 6px 18px rgba(10,12,16,.22), 0 1px 3px rgba(10,12,16,.16);
-  transition: transform var(--bc-dur) var(--bc-ease), box-shadow var(--bc-dur) var(--bc-ease), filter 160ms linear;
+  box-shadow: 0 10px 28px color-mix(in srgb, var(--bc-accent) 34%, rgba(10,12,16,.2)), 0 2px 6px rgba(10,12,16,.16);
+  transition: transform var(--bc-dur) var(--bc-ease), box-shadow var(--bc-dur) var(--bc-ease), filter 160ms linear, padding var(--bc-dur) var(--bc-ease);
   animation: bc-launcher-in 420ms var(--bc-ease) both;
 }
-.launcher svg { font-size: 17px; }
-.launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10,12,16,.26), 0 2px 6px rgba(10,12,16,.18); filter: brightness(1.06); }
+/* Two glyphs in one box: the bubble when closed, a chevron when open, turned
+   into each other so the button reads as the panel's own handle. */
+.launcher .ico { position: relative; width: 20px; height: 20px; flex: none; }
+.launcher .ico > span {
+  position: absolute; inset: 0;
+  transition: transform 320ms var(--bc-ease), opacity 200ms ease;
+}
+.launcher .ico svg { width: 20px; height: 20px; }
+.launcher .ico .when-open { opacity: 0; transform: rotate(-90deg) scale(.6); }
+.launcher[aria-expanded="true"] .ico .when-closed { opacity: 0; transform: rotate(90deg) scale(.6); }
+.launcher[aria-expanded="true"] .ico .when-open { opacity: 1; transform: none; }
+.launcher:hover { transform: translateY(-2px); filter: brightness(1.06); }
 .launcher:active { transform: translateY(0) scale(.97); transition-duration: 90ms; }
-.launcher:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 3px; }
+.launcher:focus-visible { outline-offset: 3px; }
 .launcher[hidden] { display: none; }
 
 /* ---------- scrim + panel ---------- */
 .scrim {
   position: fixed; inset: 0; z-index: 2147483001;
-  background: rgba(10,12,16,.5);
+  background: rgba(10,12,16,.32);
   animation: bc-fade-in 200ms ease both;
 }
-.scrim.closing { animation: bc-fade-out 150ms ease both; }
+.scrim.closing { animation: bc-fade-out 170ms ease both; }
 
 /* The panel belongs to the launcher, so it opens out of that corner rather
    than in the middle of the screen. --bc-dock-h is measured at open time
-   because the dock's height depends on whether the launcher is showing. */
+   because the dock's height depends on whether the launcher is showing.
+   A column: the header and footer stay put and only the middle scrolls. */
 .panel {
   position: fixed;
-  width: calc(100vw - 40px); max-width: 440px;
+  display: flex; flex-direction: column;
+  width: calc(100vw - 40px); max-width: 420px;
   max-height: calc(100vh - var(--bc-dock-h, 84px) - 52px);
-  overflow-y: auto; overscroll-behavior: contain;
+  overflow: hidden;
   background: var(--bc-bg); color: var(--bc-fg);
-  border-radius: 16px; box-shadow: var(--bc-shadow);
-  animation: bc-panel-in 320ms var(--bc-ease) both;
-}
-.scrim.at-right .panel { right: 20px; }
-.scrim.at-left .panel { left: 20px; }
+  border-radius: var(--bc-r-xl); box-shadow: var(--bc-shadow);
+  border: 1px solid color-mix(in srgb, var(--bc-border) 70%, transparent);
+  animation: bc-panel-in 340ms var(--bc-ease) both;
+}
+/* A conversation wants a height of its own, so the thread fills the panel
+   rather than shrinking to its first two messages. */
+.panel.is-chat { height: 640px; }
+.scrim.at-right .panel { right: 20px; transform-origin: bottom right; }
+.scrim.at-left .panel { left: 20px; transform-origin: bottom left; }
 .scrim.at-bottom .panel { bottom: calc(20px + var(--bc-dock-h, 84px) + 12px); }
-.scrim.at-top .panel { top: calc(20px + var(--bc-dock-h, 84px) + 12px); }
-.scrim.closing .panel { animation: bc-panel-out 150ms ease both; }
+.scrim.at-top .panel { top: calc(20px + var(--bc-dock-h, 84px) + 12px); transform-origin: top right; }
+.scrim.closing .panel { animation: bc-panel-out 170ms ease both; }
 
-.head { display: flex; align-items: flex-start; gap: 11px; padding: 18px 18px 0; }
-.head .mark {
-  flex: none; display: grid; place-items: center;
-  width: 32px; height: 32px; border-radius: 9px;
-  background: color-mix(in srgb, var(--bc-accent) 13%, transparent);
-  color: var(--bc-accent); font-size: 18px;
+/* ---------- header ---------- */
+.head {
+  flex: none; position: relative;
+  display: flex; align-items: center; gap: 12px;
+  padding: 16px 14px 14px var(--bc-pad);
+  background: linear-gradient(180deg, var(--bc-accent-soft), var(--bc-bg));
+  border-bottom: 1px solid var(--bc-border);
+}
+.head .mark, .avatar {
+  flex: none; display: grid; place-items: center; position: relative;
+  width: 38px; height: 38px; border-radius: 50%;
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+  color: var(--bc-on-accent); font-size: 19px;
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
+}
+/* The little "online" dot says someone — or something — is on the other end. */
+.head .mark::after {
+  content: ''; position: absolute; right: -1px; bottom: -1px;
+  width: 11px; height: 11px; border-radius: 50%;
+  background: #22c55e; border: 2px solid var(--bc-bg);
 }
 .head .titles { flex: 1; min-width: 0; }
-.head h2 { margin: 1px 0 3px; font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
-.head p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--bc-muted); }
+.head h2 {
+  margin: 0 0 2px; font-size: var(--bc-fs-lg); font-weight: 680; letter-spacing: -.02em; line-height: 1.25;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.head p { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted); }
 .icon-btn {
   flex: none; display: grid; place-items: center;
-  width: 28px; height: 28px; padding: 0; font-size: 15px;
-  border: none; border-radius: 8px; background: none; color: var(--bc-faint);
-  cursor: pointer; transition: background 160ms, color 160ms;
+  width: 32px; height: 32px; padding: 0; font-size: 16px;
+  border: none; border-radius: 10px; background: none; color: var(--bc-muted);
+  cursor: pointer; transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
 }
-.icon-btn:hover { background: var(--bc-subtle); color: var(--bc-fg); }
-.icon-btn:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 1px; }
-
-.body { padding: 16px 18px 0; }
+.icon-btn:hover { background: color-mix(in srgb, var(--bc-fg) 7%, transparent); color: var(--bc-fg); }
+.icon-btn:active { transform: scale(.92); }
+.icon-btn.back { margin: 0 -6px 0 -8px; }
 
+.body {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  padding: 16px var(--bc-pad) 6px;
+}
 
-label { display: block; font-size: 12px; font-weight: 600; color: var(--bc-fg); margin-bottom: 6px; }
+label { display: block; font-size: var(--bc-fs-sm); font-weight: 620; color: var(--bc-fg); margin-bottom: 7px; }
+label .opt { font-weight: 450; color: var(--bc-faint); }
 input[type=text], input[type=email], textarea {
-  width: 100%; padding: 10px 12px; font-size: 14px; line-height: 1.45;
+  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: 10px;
-  transition: border-color 160ms, box-shadow 160ms;
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  transition: border-color 160ms, box-shadow 160ms, background 160ms;
 }
 input[type=text]::placeholder, input[type=email]::placeholder, textarea::placeholder { color: var(--bc-faint); }
+input[type=text]:hover, input[type=email]:hover, textarea:hover { border-color: color-mix(in srgb, var(--bc-fg) 18%, var(--bc-border)); }
 input[type=text]:focus, input[type=email]:focus, textarea:focus {
-  outline: none; border-color: var(--bc-accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 18%, transparent);
-}
-input.invalid { border-color: var(--bc-danger); animation: bc-nudge 240ms ease; }
-textarea { min-height: 84px; resize: vertical; }
-.field { margin-bottom: 14px; }
+  outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring);
+}
+input.invalid, input.invalid:focus, textarea.invalid {
+  border-color: var(--bc-danger); animation: bc-nudge 240ms ease;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-danger) 16%, transparent);
+}
+.field-err {
+  display: flex; align-items: center; gap: 6px;
+  margin: 7px 0 0; font-size: var(--bc-fs-xs); font-weight: 550; color: var(--bc-danger);
+  animation: bc-rise 200ms var(--bc-ease) both;
+}
+.field-err svg { font-size: 13px; flex: none; }
+textarea { min-height: 88px; resize: vertical; }
+.field { margin-bottom: 16px; }
+.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.field-head .count { font-size: var(--bc-fs-xs); color: var(--bc-faint); font-variant-numeric: tabular-nums; }
+
+/* The draft line: a quiet note, or a card offering to pick up where they left off. */
+.compose > .note { font-size: var(--bc-fs-xs); color: var(--bc-faint); margin: -4px 0 10px; }
+.compose > .note:empty { display: none; }
+.compose > .note:has(button) {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
+  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--bc-r-md);
+  background: var(--bc-accent-soft); border: 1px solid var(--bc-accent-line);
+  font-size: var(--bc-fs-sm); color: var(--bc-fg);
+}
+.compose > .note button {
+  padding: 5px 11px; font: inherit; font-size: var(--bc-fs-xs); font-weight: 620;
+  border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-accent); background: var(--bc-accent); color: var(--bc-on-accent);
+}
+.compose > .note button[data-discard] { background: transparent; color: var(--bc-muted); border-color: var(--bc-border); }
 
 /* ---------- what is already known ----------
    A help surface in front of the form, not a step in it. Everything here is
@@ -295,34 +405,35 @@ textarea { min-height: 84px; 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: 14px; }
+.known { margin-bottom: 16px; }
 .known .known-h {
-  margin: 0 0 8px; font-size: 12px; font-weight: 650; letter-spacing: .02em;
+  margin: 0 0 8px; font-size: 11px; font-weight: 680; letter-spacing: .06em;
   text-transform: uppercase; color: var(--bc-faint);
 }
 .known .issue {
-  display: flex; align-items: flex-start; gap: 10px;
+  display: flex; align-items: center; gap: 10px;
   padding: 10px 12px; margin-bottom: 6px;
-  background: var(--bc-subtle); border: 1px solid transparent; border-radius: 10px;
+  background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+  animation: bc-rise 240ms var(--bc-ease) both;
 }
-.known .issue.is-joined { border-color: var(--bc-ok); }
+.known .issue.is-joined { border-color: color-mix(in srgb, var(--bc-ok) 55%, var(--bc-border)); }
 .known .issue .who { flex: 1; min-width: 0; }
 .known .issue .t {
   display: block; font-size: 13px; font-weight: 620; line-height: 1.4;
   color: var(--bc-fg); overflow-wrap: anywhere;
 }
 .known .issue .meta {
-  display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--bc-muted);
+  display: block; margin-top: 3px; font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
 }
 .known .issue .join {
-  flex: none; padding: 6px 10px; font-size: 12px; font-weight: 620;
+  flex: none; padding: 7px 12px; font-size: 12px; font-weight: 620;
   color: var(--bc-accent); background: var(--bc-bg);
-  border: 1px solid var(--bc-border); border-radius: 8px; cursor: pointer;
+  border: 1px solid var(--bc-accent-line); border-radius: 999px; cursor: pointer;
+  transition: background 160ms, border-color 160ms;
 }
-.known .issue .join:hover { border-color: var(--bc-accent); }
-.known .issue .join:disabled { color: var(--bc-ok); border-color: var(--bc-border); cursor: default; }
-.known .issue .join:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; }
-.known .ask { display: flex; gap: 8px; margin-top: 8px; }
+.known .issue .join:hover { border-color: var(--bc-accent); background: var(--bc-accent-soft); }
+.known .issue .join:disabled { color: var(--bc-ok); border-color: var(--bc-border); background: var(--bc-bg); cursor: default; opacity: 1; }
+.known .ask { display: flex; gap: 8px; margin: 2px 0 8px; }
 .known .ask input { flex: 1; min-width: 0; }
 .known .ask button { flex: none; }
 .known .err { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-danger); }
@@ -334,97 +445,109 @@ textarea { min-height: 84px; resize: vertical; }
    strip is the whole panel. */
 .whoami {
   display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
-  margin-bottom: 14px; padding: 10px 12px;
-  font-size: 12.5px; line-height: 1.45; color: var(--bc-muted);
-  background: var(--bc-subtle); border-radius: 10px;
+  margin-bottom: 16px; padding: 10px 12px;
+  font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
+  background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
 }
-.whoami.asking { display: block; }
+.whoami.asking { display: block; padding: 14px; }
 .whoami .who { flex: 1; min-width: 0; }
 .whoami .who strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
-.whoami .link {
-  padding: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45;
-  color: var(--bc-accent); background: none; border: none; cursor: pointer;
-}
-.whoami .link:hover { text-decoration: underline; }
-.whoami .link:disabled { color: var(--bc-faint); cursor: default; text-decoration: none; }
-.whoami .link:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; border-radius: 4px; }
-.whoami .why { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--bc-muted); }
+.link {
+  padding: 0; font: inherit; font-size: var(--bc-fs-sm); font-weight: 620; line-height: 1.45;
+  color: var(--bc-accent); background: none; border: none; cursor: pointer; border-radius: 4px;
+}
+.link:hover { text-decoration: underline; text-underline-offset: 2px; }
+.link:disabled { color: var(--bc-faint); cursor: default; text-decoration: none; }
+.whoami .why { margin: 0 0 10px; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
 .whoami .why strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
 .whoami .row { display: flex; gap: 8px; align-items: stretch; }
 .whoami .row input { flex: 1; min-width: 0; }
 .whoami .row button { flex: none; }
-.whoami .after { display: flex; gap: 12px; align-items: center; margin-top: 9px; }
+.whoami .after { display: flex; gap: 14px; align-items: center; margin-top: 9px; }
 .whoami .err { color: var(--bc-danger); }
 .whoami .code { letter-spacing: .28em; font-variant-numeric: tabular-nums; }
 
 /* ---------- which record is this about ----------
-   Shaped like .whoami on purpose: both are the widget asking for something
-   rather than the reporter telling us something, and a reporter who has learnt
-   what the grey block means once should not have to learn it twice. Drawn only
-   after Send has been pressed and only when what they wrote did not already
-   answer it, so most people never see this at all. */
+   Drawn only after Send has been pressed and only when what they wrote did not
+   already answer it, so most people never see this at all. Presented as the
+   assistant asking one friendly follow-up, not as a form field that appeared. */
 .refs {
-  margin-bottom: 14px; padding: 10px 12px;
-  font-size: 12.5px; line-height: 1.45; color: var(--bc-muted);
-  background: var(--bc-subtle); border-radius: 10px;
-}
-.refs .why { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--bc-muted); }
+  position: relative;
+  margin-bottom: 16px; padding: 14px;
+  font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
+  background: var(--bc-accent-soft);
+  border: 1px solid var(--bc-accent-line); border-radius: var(--bc-r-lg);
+  animation: bc-item-in 280ms var(--bc-ease) both;
+}
+.refs .ask-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
+.refs .ask-head .avatar { width: 28px; height: 28px; font-size: 14px; box-shadow: none; }
+.refs .ask-head strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--bc-fg); margin-bottom: 1px; }
+.refs .why { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
 .refs .row { display: flex; gap: 8px; align-items: stretch; }
-.refs .row input { flex: 1; min-width: 0; }
+.refs .row input { flex: 1; min-width: 0; background: var(--bc-bg); }
 .refs select {
   flex: none; max-width: 45%; padding: 10px 10px; font-size: 13px;
-  color: var(--bc-fg); background: var(--bc-elevated);
-  border: 1px solid var(--bc-border); border-radius: 10px;
-}
-.refs select:focus {
-  outline: none; border-color: var(--bc-accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 18%, transparent);
-}
-.refs .hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-faint); }
+  color: var(--bc-fg); background: var(--bc-bg);
+  border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
+}
+.refs select:focus { outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
+.refs .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
+.refs .chips button {
+  padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; cursor: pointer;
+  color: var(--bc-muted); background: var(--bc-bg); border: 1px solid var(--bc-border);
+  transition: background 160ms, color 160ms, border-color 160ms;
+}
+.refs .chips button[aria-pressed="true"] { color: var(--bc-on-accent); background: var(--bc-accent); border-color: var(--bc-accent); }
+.refs .hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-muted); }
 .refs .after { display: flex; gap: 12px; align-items: center; margin-top: 9px; }
-.refs .err { color: var(--bc-danger); }
-.refs .link {
-  margin-top: 9px; padding: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45;
-  color: var(--bc-accent); background: none; border: none; cursor: pointer;
-}
-.refs .link:hover { text-decoration: underline; }
-.refs .link:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; border-radius: 4px; }
+.refs .err { color: var(--bc-danger); font-weight: 550; }
+.refs .link { margin-top: 10px; font-size: 12px; color: var(--bc-muted); }
+.refs .link:hover { color: var(--bc-fg); }
 
 /* ---------- severity ---------- */
-.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--bc-subtle); border-radius: 10px; }
+.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md); }
 .seg button {
-  padding: 7px 4px; font-size: 12.5px; font-weight: 550; line-height: 1;
-  color: var(--bc-muted); background: none; border: none; border-radius: 7px;
-  cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms, font-weight 180ms;
-}
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 8px 4px; font-size: var(--bc-fs-sm); font-weight: 550; line-height: 1;
+  color: var(--bc-muted); background: none; border: none; border-radius: 9px;
+  cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms;
+}
+.seg button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sev, var(--bc-faint)); opacity: .55; transition: opacity 180ms; }
+.seg button[data-prio="LOW"] { --sev: #94a3b8; }
+.seg button[data-prio="MEDIUM"] { --sev: #3b82f6; }
+.seg button[data-prio="HIGH"] { --sev: #f59e0b; }
+.seg button[data-prio="CRITICAL"] { --sev: #ef4444; }
 .seg button:hover { color: var(--bc-fg); }
 .seg button[aria-pressed=true] {
-  background: var(--bc-raised); color: var(--bc-accent); font-weight: 680;
-  box-shadow: 0 1px 3px rgba(10,12,16,.14);
+  background: var(--bc-raised); color: var(--bc-fg); font-weight: 650;
+  box-shadow: 0 1px 3px rgba(10,12,16,.14), 0 0 0 1px color-mix(in srgb, var(--bc-border) 60%, transparent);
 }
-.seg button:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: -1px; }
+.seg button[aria-pressed=true]::before { opacity: 1; }
+.seg button:focus-visible { outline-offset: -2px; }
 
 /* ---------- attachments ---------- */
-.tools { display: flex; flex-wrap: wrap; gap: 6px; }
+.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
 .tool {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 8px 12px; font-size: 12.5px; font-weight: 550; line-height: 1;
+  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 solid var(--bc-border); border-radius: 9px; cursor: pointer;
-  transition: border-color 160ms, background 160ms, transform 160ms var(--bc-ease);
+  border: 1px dashed color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); border-radius: var(--bc-r-md); cursor: pointer;
+  transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--bc-ease);
 }
-.tool svg { font-size: 15px; color: var(--bc-muted); transition: color 160ms; }
-.tool:hover:not(:disabled) { border-color: var(--bc-accent); transform: translateY(-1px); }
+.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:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 1px; }
 .tool:disabled { opacity: .45; cursor: not-allowed; }
+.attach-hint { margin: 8px 0 0; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
 
 .thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.thumbs:empty { display: none; }
 .thumb {
-  position: relative; width: 74px; height: 74px; flex: none;
-  border-radius: 10px; overflow: hidden;
+  position: relative; width: 76px; height: 76px; flex: none;
+  border-radius: var(--bc-r-md); overflow: hidden;
   border: 1px solid var(--bc-border); background: var(--bc-subtle);
+  box-shadow: var(--bc-shadow-sm);
   animation: bc-item-in 300ms var(--bc-ease) both;
 }
 .thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
@@ -435,11 +558,11 @@ textarea { min-height: 84px; resize: vertical; }
   background: rgba(10,12,16,.72); color: #fff; font-size: 9.5px; font-weight: 600; line-height: 1.3;
 }
 .thumb .drop {
-  position: absolute; top: 3px; right: 3px;
-  width: 19px; height: 19px; font-size: 11px; border-radius: 6px;
-  background: rgba(10,12,16,.68); color: #fff; border: none;
+  position: absolute; top: 4px; right: 4px;
+  width: 20px; height: 20px; font-size: 11px; border-radius: 50%;
+  background: rgba(10,12,16,.7); color: #fff; border: none;
   display: grid; place-items: center; cursor: pointer;
-  opacity: 0; transition: opacity 160ms;
+  opacity: 0; transition: opacity 160ms, background 160ms;
 }
 .thumb:hover .drop, .thumb:focus-within .drop { opacity: 1; }
 .thumb .drop:hover { background: var(--bc-danger); }
@@ -463,333 +586,533 @@ textarea { min-height: 84px; resize: vertical; }
 
 /* ---------- messages ---------- */
 .msg {
-  display: flex; align-items: flex-start; gap: 7px;
-  font-size: 12.5px; line-height: 1.45; padding: 9px 11px; border-radius: 9px; margin-bottom: 12px;
+  display: flex; align-items: flex-start; gap: 8px;
+  font-size: var(--bc-fs-sm); line-height: 1.45; padding: 10px 12px; border-radius: var(--bc-r-md); margin-bottom: 14px;
   animation: bc-item-in 240ms var(--bc-ease) both;
 }
-.msg.err { background: color-mix(in srgb, var(--bc-danger) 11%, transparent); color: var(--bc-danger); }
-.msg.info { background: var(--bc-subtle); color: var(--bc-muted); }
+.msg svg { flex: none; font-size: 15px; margin-top: 1px; }
+.msg.err { background: color-mix(in srgb, var(--bc-danger) 10%, var(--bc-bg)); color: var(--bc-danger); border: 1px solid color-mix(in srgb, var(--bc-danger) 30%, transparent); }
+.msg.info { background: var(--bc-subtle); color: var(--bc-muted); border: 1px solid var(--bc-border); }
 
 /* ---------- footer ---------- */
 .foot {
-  display: flex; align-items: center; gap: 9px;
-  margin-top: 16px; padding: 14px 18px; border-top: 1px solid var(--bc-border);
-  background: var(--bc-subtle);
+  flex: none;
+  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
+  padding: 12px var(--bc-pad); border-top: 1px solid var(--bc-border);
+  background: var(--bc-bg);
 }
 .foot .spacer { flex: 1; }
-.foot .note { font-size: 11.5px; color: var(--bc-faint); }
+.foot .note { flex-basis: 100%; order: -1; font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+.foot .note:empty { display: none; }
 /* Quiet, but still legible: this sits in someone else's product, so it identifies
    where the report goes without competing with their interface. Quiet is bought
    with colour (--bc-brand-ink sits a step below body text) rather than with a
    blanket opacity — the BUGCATCH half is only about 3px of cap height at this
    size, and dimming it on top of that left it as a smudge in both themes. */
-.brand-credit { display: flex; align-items: center; transition: color 0.15s; }
-.bc-brand { height: 18px; width: auto; display: block; color: var(--bc-brand-ink); }
+.powered {
+  flex: none; display: flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 7px var(--bc-pad) 9px; font-size: 10.5px; color: var(--bc-faint);
+  background: var(--bc-subtle); border-top: 1px solid var(--bc-border);
+}
+.brand-credit { display: flex; align-items: center; transition: color 0.15s; border-radius: 4px; }
+.bc-brand { height: 16px; width: auto; display: block; color: var(--bc-brand-ink); }
 .brand-credit:hover .bc-brand { color: var(--bc-fg); }
-.brand-credit:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 3px; border-radius: 4px; }
 button.ghost, button.primary {
-  padding: 9px 15px; font-size: 13px; font-weight: 600; line-height: 1;
-  border-radius: 9px; cursor: pointer;
-  transition: transform 160ms var(--bc-ease), filter 160ms, background 160ms, border-color 160ms;
-}
-button.ghost { background: none; border: 1px solid var(--bc-border); color: var(--bc-muted); }
-button.ghost:hover { color: var(--bc-fg); border-color: var(--bc-faint); }
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  height: 38px; padding: 0 15px; font: inherit; font-size: 13px; font-weight: 620; line-height: 1;
+  border-radius: 999px; cursor: pointer; white-space: nowrap;
+  transition: transform 160ms var(--bc-ease), filter 160ms, background 160ms, border-color 160ms, color 160ms, box-shadow 160ms;
+}
+button.ghost { background: var(--bc-bg); border: 1px solid var(--bc-border); color: var(--bc-fg); }
+button.ghost:hover:not(:disabled) { background: var(--bc-subtle); border-color: color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); }
+button.ghost svg, button.primary svg { font-size: 15px; }
 button.primary {
-  display: inline-flex; align-items: center; gap: 7px;
+  padding: 0 18px;
   background: var(--bc-accent); border: 1px solid var(--bc-accent); color: var(--bc-on-accent);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
 }
 button.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
 button.primary:active:not(:disabled) { transform: none; }
-button.ghost:focus-visible, button.primary:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; }
 button:disabled { opacity: .5; cursor: not-allowed; }
-button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; width: 13px; height: 13px; }
+button.primary:disabled { box-shadow: none; }
+button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; width: 14px; height: 14px; }
+button.quiet {
+  padding: 0 4px; height: 38px; font: inherit; font-size: 13px; font-weight: 600;
+  border: none; background: none; color: var(--bc-muted); cursor: pointer; border-radius: 8px;
+}
+button.quiet:hover { color: var(--bc-accent); }
 
-/* ---------- success ---------- */
 /* ---------- your reports ---------- */
-.history { padding: 6px 20px 18px; max-height: 340px; overflow-y: auto; }
+.history {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  padding: 8px 12px 14px;
+}
 /* On the conversation screen the inner thread does the scrolling, so this
    wrapper must not — two nested scrollers means the composer drifts out of
    reach exactly when someone reaches for it. */
 .history.chatting {
-  max-height: none; overflow: visible; display: flex; flex-direction: column;
+  overflow: hidden; display: flex; flex-direction: column; padding: 0;
 }
 .history .row {
-  display: flex; align-items: flex-start; gap: 10px;
-  padding: 11px 0; border-bottom: 1px solid var(--bc-border);
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 10px; border-bottom: 1px solid var(--bc-border);
 }
 .history .row:last-child { border-bottom: 0; }
 .history .who { flex: 1; min-width: 0; }
 .history .ttl {
-  display: block; font-size: 13px; font-weight: 550; color: var(--bc-fg);
+  display: block; font-size: 13.5px; font-weight: 600; color: var(--bc-fg);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.history .sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--bc-faint); }
-.history .empty { padding: 26px 0; text-align: center; font-size: 12.5px; color: var(--bc-muted); }
+.history .sub { display: block; margin-top: 3px; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+.history .row-ico {
+  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
+  background: var(--bc-subtle); color: var(--bc-muted); font-size: 16px;
+}
+.history .chev { flex: none; color: var(--bc-faint); font-size: 15px; transition: transform 160ms var(--bc-ease), color 160ms; }
+.empty {
+  display: flex; flex-direction: column; align-items: center; gap: 10px;
+  padding: 40px 16px; text-align: center; font-size: var(--bc-fs-sm); color: var(--bc-muted);
+}
+.empty .empty-ico {
+  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
+  background: var(--bc-accent-soft); color: var(--bc-accent); font-size: 20px;
+}
+.skel {
+  display: block; height: 12px; border-radius: 6px; margin: 6px 0;
+  background: linear-gradient(90deg, var(--bc-subtle) 25%, color-mix(in srgb, var(--bc-fg) 8%, var(--bc-subtle)) 50%, var(--bc-subtle) 75%);
+  background-size: 200% 100%; animation: bc-shimmer 1.4s linear infinite;
+}
 /* A history row is a button now — it opens the report — so the UA styling has
    to go, and the hit area has to read as one. */
 .history button.row {
-  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--bc-border);
+  width: 100%; background: none; border: 0; margin-bottom: 2px;
   font: inherit; color: inherit; text-align: left; cursor: pointer;
-  border-radius: 8px; padding: 11px 8px; margin: 0 -8px; width: calc(100% + 16px);
+  border-radius: var(--bc-r-md); transition: background 160ms;
+  animation: bc-rise 260ms var(--bc-ease) both;
 }
 .history button.row:hover { background: var(--bc-subtle); }
-.history button.row:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: -2px; }
+.history button.row:hover .chev { transform: translateX(2px); color: var(--bc-accent); }
+.history button.row:focus-visible { outline-offset: -2px; }
 
 /* ---------- one report, and what happened to it ---------- */
 .report-head {
-  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
-  padding: 4px 0 14px; border-bottom: 1px solid var(--bc-border);
+  flex: none;
+  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
+  padding: 10px var(--bc-pad); border-bottom: 1px solid var(--bc-border);
+  background: var(--bc-bg);
 }
-.report-head .ttl { font-size: 13.5px; font-weight: 600; color: var(--bc-fg); }
-.report-head .sub { font-size: 11.5px; color: var(--bc-faint); }
-.report-head .pill { grid-row: 1 / span 2; align-self: center; }
+.report-head .ttl { font-size: 13px; font-weight: 620; color: var(--bc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.report-head .sub { font-size: var(--bc-fs-xs); color: var(--bc-faint); }
+.report-head .pill { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
 
 /* The thread scrolls; the composer under it does not. Both live inside the
    panel, which stops scrolling as a whole on this screen — a composer that
    scrolls away is a composer people think isn't there. */
 .thread {
-  display: flex; flex-direction: column; gap: 10px;
-  padding: 14px 0 8px; overflow-y: auto; overscroll-behavior: contain;
-  max-height: min(46vh, 330px);
+  flex: 1 1 auto; min-height: 140px;
+  display: flex; flex-direction: column; gap: 4px;
+  padding: 14px var(--bc-pad) 12px; overflow-y: auto; overscroll-behavior: contain;
 }
 
+/* The day a run of messages happened on, as a centred label on a rule. */
+.day-sep {
+  display: flex; align-items: center; gap: 10px; margin: 10px 0 6px;
+  font-size: 11px; font-weight: 620; letter-spacing: .02em; color: var(--bc-faint);
+}
+.day-sep::before, .day-sep::after { content: ''; flex: 1; height: 1px; background: var(--bc-border); }
+
 /* A status change is not a message and is not drawn as one: no side, no
    bubble, no author. Centred and quiet, the way every chat marks the things
    that happened rather than the things that were said. */
 .sys {
-  align-self: center; max-width: 90%; text-align: center;
-  font-size: 11.5px; line-height: 1.45; color: var(--bc-faint);
+  align-self: center; max-width: 90%; text-align: center; margin: 6px 0;
+  padding: 4px 10px; border-radius: 999px; background: var(--bc-subtle);
+  font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
+  animation: bc-fade-in 240ms ease both;
 }
 .sys .dot {
   display: inline-block; width: 6px; height: 6px; margin-right: 6px;
   border-radius: 50%; background: var(--bc-muted); vertical-align: middle;
 }
+.sys .t { color: var(--bc-faint); }
 .sys.k-status .dot { background: #4da3ff; }
 .sys.k-severity .dot { background: #e8912a; }
 .sys.k-assignment .dot { background: #8b7dff; }
 .sys.k-filed .dot { background: var(--bc-faint); }
-.icon-btn.back { margin-right: 2px; }
 
 /* ---------- the conversation ----------
 
    A status change and a message are different things and are drawn as such: a
    change is a line on the rail above, a message is a bubble with a side. The
-   reporter's own words sit right and accented, the team's left and neutral —
-   the arrangement every chat has taught people to read without a legend. */
-.msgs { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 6px; }
-.msg-row { display: flex; flex-direction: column; max-width: 84%; gap: 4px; }
-.msg-row.mine { align-self: flex-end; align-items: flex-end; }
-.msg-row.theirs { align-self: flex-start; }
-.msg-who { font-size: 11px; font-weight: 600; color: var(--bc-faint); padding: 0 2px; }
+   reporter's own words sit right and accented, the other side's left beside an
+   avatar that says who it is — the arrangement every chat has taught people to
+   read without a legend. */
+.msg-row, .typing-row {
+  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px;
+  max-width: 88%; margin-top: 10px;
+  animation: bc-rise 260ms var(--bc-ease) both;
+}
+.msg-row.cont { margin-top: 3px; }
+.msg-row > *, .typing-row > * { grid-column: 2; }
+/* Fixed rows, so the avatar lines up with the bubble whatever else the
+   message carries (a name above it, answers or a time below it). */
+.msg-row > .msg-who, .typing-row > .msg-who { grid-row: 1; }
+.msg-row > .bubble, .typing-row > .bubble { grid-row: 2; }
+.msg-row > .quick { grid-row: 3; }
+.msg-row > .msg-when { grid-row: 4; }
+.msg-row > .av, .typing-row > .av { grid-column: 1; grid-row: 2; align-self: end; }
+/* In a run of messages the avatar sits by the last bubble and the time under
+   it, the way a chat marks where one turn ends. */
+.msg-row:has(+ .msg-row.cont) > .av { visibility: hidden; }
+.msg-row:has(+ .msg-row.cont) > .msg-when { display: none; }
+.msg-row.theirs, .typing-row { align-self: flex-start; }
+.msg-row.mine { align-self: flex-end; grid-template-columns: minmax(0, 1fr); justify-items: end; }
+.msg-row.mine > * { grid-column: 1; }
+.av {
+  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
+  font-size: 11px; font-weight: 700; letter-spacing: .02em;
+  background: color-mix(in srgb, var(--bc-fg) 10%, var(--bc-bg)); color: var(--bc-fg);
+}
+.av.bot {
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+  color: var(--bc-on-accent); font-size: 14px;
+}
+.msg-who { font-size: var(--bc-fs-xs); font-weight: 620; color: var(--bc-muted); padding: 0 4px 4px; }
+.msg-who.auto { color: var(--bc-accent); display: inline-flex; align-items: center; gap: 5px; }
+.msg-who .tag {
+  padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
+  text-transform: uppercase; background: var(--bc-accent-soft); color: var(--bc-accent);
+}
 .bubble {
-  padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
+  justify-self: start; max-width: 100%;
+  padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.5;
   background: var(--bc-subtle); color: var(--bc-fg);
   border: 1px solid var(--bc-border);
+  border-bottom-left-radius: 6px;
 }
 /* pre-wrap belongs to the text, not the box — on the box it would also render
    the markup's own indentation. */
 .msg-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
 .msg-row.mine .bubble {
+  justify-self: end;
   background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-on-accent);
-  border-bottom-right-radius: 4px;
-}
-.msg-row.theirs .bubble { border-bottom-left-radius: 4px; }
-/* A reply nobody wrote. Outlined rather than recoloured — it is still the
-   team's side of the conversation — with the label above carrying the meaning,
-   so it reads the same to someone who cannot see the border at all. */
-.msg-row.auto .bubble { border-style: dashed; }
-.msg-who.auto { color: var(--bc-accent); }
+  border-bottom-left-radius: 18px; border-bottom-right-radius: 6px;
+}
+.msg-row.cont.theirs .bubble { border-top-left-radius: 6px; }
+.msg-row.cont.mine .bubble { border-top-right-radius: 6px; }
+/* A reply nobody wrote: tinted with the accent and labelled "Assistant" above
+   it, so it reads the same to someone who cannot see the colour at all. */
+.msg-row.auto .bubble { background: var(--bc-accent-soft); border-color: var(--bc-accent-line); }
 /* An attachment-only message has no text to wrap, so the bubble would be an
    empty coloured box around it. */
-.bubble.silent { padding: 0; background: none; border: 0; }
-.msg-when { font-size: 10.5px; color: var(--bc-faint); padding: 0 2px; }
-.msg-row.pending { opacity: .55; }
+.bubble.silent { padding: 0; background: none !important; border: 0; }
+.msg-when { font-size: 10.5px; color: var(--bc-faint); padding: 4px 4px 0; }
+.msg-row.pending { opacity: .6; }
+.msg-row.pending .msg-when::after { content: ' · Sending…'; }
 .msg-row.failed .bubble { border: 1px solid var(--bc-danger); }
+.msg-row.failed .msg-when { color: var(--bc-danger); }
+.msg-row.failed .msg-when::after { content: ' · Not sent'; }
+
+/* The assistant, thinking. Three dots in a bubble where its next message will be. */
+.typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; justify-self: start; }
+.typing i {
+  width: 7px; height: 7px; border-radius: 50%; background: var(--bc-accent); opacity: .45;
+  animation: bc-typing 1.2s ease-in-out infinite;
+}
+.typing i:nth-child(2) { animation-delay: .15s; }
+.typing i:nth-child(3) { animation-delay: .3s; }
+.typing-row .msg-when { padding-top: 4px; }
 
 .att { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
 .bubble.silent .att { margin-top: 0; }
 .att img {
-  display: block; max-width: 100%; max-height: 190px; border-radius: 9px;
+  display: block; max-width: 100%; max-height: 190px; border-radius: var(--bc-r-md);
   border: 1px solid var(--bc-border); object-fit: cover; cursor: zoom-in;
 }
 .att audio { width: 232px; max-width: 100%; height: 34px; }
-.att video { max-width: 100%; max-height: 190px; border-radius: 9px; }
+.att video { max-width: 100%; max-height: 190px; border-radius: var(--bc-r-md); }
 .att .file {
   display: flex; align-items: center; gap: 8px; text-decoration: none;
-  padding: 8px 10px; border-radius: 9px; font-size: 12px;
+  padding: 8px 10px; border-radius: 10px; font-size: 12px;
   background: var(--bc-elevated); border: 1px solid var(--bc-border); color: var(--bc-fg);
 }
 .att .file:hover { border-color: var(--bc-accent); }
 .att .file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .att .file .sz { flex: none; color: var(--bc-faint); font-size: 11px; }
 
+/* ---------- the assistant's live card ----------
+   A status header pinned between the report and the conversation: where the
+   investigation is, as words and as a stepper. It does not scroll with the
+   thread, because "is anything happening?" is the question on screen the
+   whole time. */
+.assistant {
+  flex: none; position: relative; overflow: hidden;
+  margin: 10px 12px 0; padding: 12px 14px 12px;
+  border-radius: var(--bc-r-lg); border: 1px solid var(--bc-border);
+  background: var(--bc-subtle);
+  transition: background 400ms ease, border-color 400ms ease;
+}
+.assistant.analyzing, .assistant.confirming, .assistant.needs_info {
+  background: var(--bc-accent-soft); border-color: var(--bc-accent-line);
+}
+.assistant.resolved { background: color-mix(in srgb, var(--bc-ok) 9%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border)); }
+.as-body.entering { animation: bc-rise 360ms var(--bc-ease) both; }
+.as-top { display: flex; gap: 11px; align-items: center; }
+.as-orb {
+  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
+  color: var(--bc-on-accent); font-size: 15px;
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+}
+.assistant.resolved .as-orb { background: var(--bc-ok); }
+.assistant.reviewing .as-orb { background: color-mix(in srgb, var(--bc-fg) 55%, var(--bc-bg)); }
+.as-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: as-rot .8s linear infinite; }
+@keyframes as-rot { to { transform: rotate(360deg); } }
+.as-text { min-width: 0; flex: 1; }
+.as-title { font-weight: 650; font-size: 13.5px; letter-spacing: -.01em; color: var(--bc-fg); }
+.as-detail { font-size: 12px; line-height: 1.45; color: var(--bc-muted); margin-top: 2px; }
+.as-progress {
+  height: 4px; margin: 12px 0 0; border-radius: 999px; overflow: hidden;
+  background: color-mix(in srgb, var(--bc-fg) 9%, transparent);
+}
+.as-progress i {
+  display: block; height: 100%; border-radius: inherit; background: var(--bc-accent);
+  transition: width 700ms var(--bc-ease);
+}
+.assistant.resolved .as-progress i { background: var(--bc-ok); }
+.assistant.analyzing .as-progress i {
+  background: linear-gradient(90deg, var(--bc-accent) 0%, color-mix(in srgb, var(--bc-accent) 45%, #fff) 50%, var(--bc-accent) 100%);
+  background-size: 200% 100%; animation: bc-shimmer 1.6s linear infinite;
+}
+.as-steps {
+  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
+  margin: 8px 0 0; padding: 0; font-size: 10.5px; color: var(--bc-faint);
+}
+.as-steps li { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
+.as-steps li .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.as-steps li .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
+.as-steps li.done { color: var(--bc-muted); }
+.as-steps li.done .dot { background: var(--bc-accent); border-color: var(--bc-accent); }
+.assistant.resolved .as-steps li.done .dot { background: var(--bc-ok); border-color: var(--bc-ok); }
+.as-steps li.active { color: var(--bc-fg); font-weight: 650; }
+.as-steps li.active .dot { border-color: var(--bc-accent); background: var(--bc-bg); animation: as-pulse 1.2s ease-in-out infinite; }
+@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent) 25%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .as-spin, .as-steps li.active .dot, .assistant.analyzing .as-progress i, .typing i { animation: none; } }
+
 /* Quick answers under the confirm question — only on the latest message. */
-.msg-row .quick { display: none; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
+.msg-row .quick { display: none; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
 .msg-row:last-child .quick { display: flex; }
 .quick button {
-  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
-  border: 1px solid var(--bc-accent); background: transparent; color: var(--bc-accent);
+  display: inline-flex; align-items: center; gap: 6px;
+  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-accent); background: var(--bc-bg); color: var(--bc-accent);
+  transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
+  animation: bc-item-in 300ms var(--bc-ease) both;
 }
-.quick button:hover { background: color-mix(in srgb, var(--bc-accent) 12%, transparent); }
+.quick button:first-child { background: var(--bc-accent); color: var(--bc-on-accent); }
+.quick button:nth-child(2) { animation-delay: 60ms; }
+.quick button svg { font-size: 13px; }
+.quick button:hover { transform: translateY(-1px); background: var(--bc-accent-soft); }
+.quick button:first-child:hover { background: var(--bc-accent); filter: brightness(1.07); }
 
 /* ---------- the composer ---------- */
 .composer {
-  position: sticky; bottom: 0; margin-top: auto;
-  padding: 10px 0 2px;
+  flex: none; position: relative;
+  padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
   /* The panel's own background, not --bc-elevated: the two are the same white
      in light mode but differ in dark, where a raised composer reads as a band
      laid over the panel rather than the foot of it. */
   background: var(--bc-bg);
   border-top: 1px solid var(--bc-border);
 }
-.composer .row { display: flex; align-items: flex-end; gap: 8px; }
+/* One rounded field holding the tools, the text and the send button — the
+   shape every chat box has, so nobody has to look for where to type. */
+.composer .row {
+  display: flex; align-items: flex-end; gap: 4px;
+  padding: 5px; border-radius: 22px;
+  background: var(--bc-subtle); border: 1px solid var(--bc-border);
+  transition: border-color 160ms, box-shadow 160ms;
+}
+.composer .row:focus-within { border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
 .composer textarea {
-  flex: 1; min-height: 38px; max-height: 120px; resize: none; padding: 9px 11px;
-  font: inherit; font-size: 12.5px; line-height: 1.45;
-  color: var(--bc-fg); background: var(--bc-subtle);
-  border: 1px solid var(--bc-border); border-radius: 10px;
+  flex: 1; min-width: 0; min-height: 34px; max-height: 120px; resize: none; padding: 7px 6px;
+  font: inherit; font-size: 13.5px; line-height: 1.45;
+  color: var(--bc-fg); background: transparent; border: 0; border-radius: 0;
 }
-.composer textarea:focus { outline: none; border-color: var(--bc-accent); }
-.composer .tools { display: flex; gap: 4px; }
+.composer textarea:hover, .composer textarea:focus { border: 0; box-shadow: none; outline: none; }
+.composer .tools { display: flex; gap: 0; grid-template-columns: none; }
 .composer .tool {
-  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
-  border-radius: 9px; border: 1px solid transparent; background: none;
+  width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
+  border-radius: 50%; border: 0; background: none; font-size: 17px;
   color: var(--bc-muted);
 }
-.composer .tool:hover { background: var(--bc-subtle); color: var(--bc-fg); }
+.composer .tool svg { font-size: 17px; }
+.composer .tool:hover:not(:disabled) { background: color-mix(in srgb, var(--bc-fg) 8%, transparent); color: var(--bc-fg); border: 0; transform: none; }
+.composer .tool:hover:not(:disabled) svg { color: var(--bc-fg); }
 .composer .tool:disabled { opacity: .4; cursor: default; }
 .composer .tool.recording { color: var(--bc-danger); background: color-mix(in srgb, var(--bc-danger) 12%, transparent); }
+.composer .tool.recording svg { color: var(--bc-danger); }
 .composer .send {
-  width: 34px; height: 34px; flex: none; border-radius: 9px; cursor: pointer;
-  background: var(--bc-accent); border: 1px solid var(--bc-accent); color: #fff;
+  width: 34px; height: 34px; flex: none; border-radius: 50%; cursor: pointer; font-size: 16px;
+  background: var(--bc-accent); border: 0; color: var(--bc-on-accent);
   display: grid; place-items: center;
+  transition: transform 160ms var(--bc-ease), opacity 160ms, filter 160ms;
 }
-.composer .send:disabled { opacity: .4; cursor: default; }
+.composer .send:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.05); }
+.composer .send:disabled { opacity: .35; cursor: default; background: var(--bc-faint); }
 .composer .staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
 .composer .chip {
-  display: flex; align-items: center; gap: 6px; max-width: 190px;
-  padding: 5px 7px; border-radius: 8px; font-size: 11.5px;
+  display: flex; align-items: center; gap: 6px; max-width: 200px;
+  padding: 5px 7px 5px 10px; border-radius: 999px; font-size: var(--bc-fs-xs);
   background: var(--bc-subtle); border: 1px solid var(--bc-border); color: var(--bc-muted);
+  animation: bc-item-in 240ms var(--bc-ease) both;
 }
-.composer .chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.composer .chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bc-fg); }
 .composer .chip button {
-  flex: none; width: 16px; height: 16px; display: grid; place-items: center;
-  border: 0; border-radius: 4px; background: none; color: var(--bc-faint); cursor: pointer;
+  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
+  border: 0; border-radius: 50%; background: none; color: var(--bc-faint); cursor: pointer;
 }
 .composer .chip button:hover { color: var(--bc-danger); }
 .composer .chip.uploading { border-style: dashed; }
-.composer .note { padding: 6px 2px 0; font-size: 11.5px; color: var(--bc-faint); }
+.composer .note { padding: 6px 6px 0; font-size: var(--bc-fs-xs); color: var(--bc-muted); }
 .composer .note.err { color: var(--bc-danger); }
 .reccount { font-variant-numeric: tabular-nums; }
 
 /* Status carries the only colour in this list, so it is the thing the eye
    lands on — which is what someone opening this screen came to check. */
 .pill {
-  flex: none; font-size: 10.5px; font-weight: 650; letter-spacing: .03em;
-  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
-  border: 1px solid currentColor;
+  flex: none; display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11px; font-weight: 650;
+  padding: 3px 9px; border-radius: 999px;
+  color: var(--bc-muted); background: var(--bc-subtle);
+}
+.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.pill.open { color: #c2410c; background: color-mix(in srgb, #f59e0b 14%, var(--bc-bg)); }
+.pill.in_progress { color: #1d6fd1; background: color-mix(in srgb, #3b82f6 14%, var(--bc-bg)); }
+.pill.resolved { color: #0f8a5a; background: color-mix(in srgb, #10b981 14%, var(--bc-bg)); }
+.pill.closed { color: var(--bc-muted); }
+:host(.bc-dark) .pill.open { color: #fbbf24; }
+:host(.bc-dark) .pill.in_progress { color: #7cb8ff; }
+:host(.bc-dark) .pill.resolved { color: #4ade9a; }
+@media (prefers-color-scheme: dark) {
+  :host(.bc-auto) .pill.open { color: #fbbf24; }
+  :host(.bc-auto) .pill.in_progress { color: #7cb8ff; }
+  :host(.bc-auto) .pill.resolved { color: #4ade9a; }
 }
-.pill.open { color: #e8912a; }
-.pill.in_progress { color: #4da3ff; }
-.pill.resolved { color: #35b87f; }
-.pill.closed { color: var(--bc-faint); }
+
+/* ---------- does the fix work ---------- */
+.fix-verification {
+  flex: none; margin: 10px 12px 0; padding: 12px 14px;
+  border-radius: var(--bc-r-lg); border: 1px solid color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border));
+  background: color-mix(in srgb, var(--bc-ok) 8%, var(--bc-bg));
+  font-size: var(--bc-fs-sm); color: var(--bc-fg);
+  animation: bc-rise 280ms var(--bc-ease) both;
+}
+.fix-verification p { margin: 0 0 8px; font-weight: 620; }
+.fix-verification textarea { min-height: 56px; margin-bottom: 8px; font-size: 13px; background: var(--bc-bg); }
+.fix-verification button {
+  padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--bc-border); background: var(--bc-bg); color: var(--bc-fg);
+}
+.fix-verification button[data-result="CONFIRMED"] { background: var(--bc-ok); border-color: var(--bc-ok); color: #fff; }
+.fix-verification .feedback-status { margin: 6px 0 0; font-weight: 450; color: var(--bc-danger); font-size: var(--bc-fs-xs); }
+.fix-verification .feedback-status:empty { display: none; }
 
 /* A call in progress, in place of the form.
    ---------------------------------------------------------------------------
    Deliberately not styled as a chat. Nothing arrives here to read — the
    conversation is happening out loud — so this is a state, a line of
    reassurance about the report, and a way to hang up. */
-.call { padding: 20px 22px 14px; animation: bc-fade-in 240ms ease both; }
-.call-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
-.call-head strong { font-size: 14.5px; font-weight: 650; }
+.call { display: flex; flex-direction: column; padding: 26px 0 0; animation: bc-fade-in 240ms ease both; }
+.call-head, .call-note { padding: 0 var(--bc-pad); }
+.call-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
+.call-head strong { font-size: 15.5px; font-weight: 680; letter-spacing: -.01em; }
 .call-dot {
-  width: 8px; height: 8px; border-radius: 50%; background: var(--bc-accent);
+  width: 9px; height: 9px; border-radius: 50%; background: var(--bc-accent);
   animation: bc-call-pulse 1.6s ease-in-out infinite;
 }
 .call-dot.off { background: var(--bc-faint); animation: none; }
 @keyframes bc-call-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
 /* Said while it is still ringing, because that is when somebody is deciding
    whether it is worth waiting. */
-.call-note { margin: 0 0 12px; font-size: 12px; color: var(--bc-muted); line-height: 1.5; }
+.call-note { margin: 0 0 18px; font-size: 13px; color: var(--bc-muted); line-height: 1.55; }
 
 /* ---------- the same call, on top of the report it is about ---------- */
 /* A bar rather than its own screen, unlike the one the composer opens. The
    thread underneath is exactly what both people are talking about, so taking it
    off screen would be taking away the only shared reference. */
 .livecall {
+  flex: none;
   display: flex; align-items: center; gap: 9px;
-  margin: 12px 0 0; padding: 9px 11px;
-  border: 1px solid var(--bc-border); border-radius: 10px;
-  background: var(--bc-subtle); font-size: 12.5px; color: var(--bc-fg);
+  margin: 10px 12px 0; padding: 9px 11px;
+  border: 1px solid var(--bc-accent-line); border-radius: var(--bc-r-md);
+  background: var(--bc-accent-soft); font-size: var(--bc-fs-sm); color: var(--bc-fg);
+  animation: bc-rise 240ms var(--bc-ease) both;
 }
 .livecall .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .livecall .secs { font-variant-numeric: tabular-nums; color: var(--bc-muted); }
 .livecall .act {
-  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--bc-border);
-  background: var(--bc-elevated); color: var(--bc-fg);
-  font: inherit; font-size: 12px; cursor: pointer;
+  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bc-border);
+  background: var(--bc-bg); color: var(--bc-fg);
+  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
 }
 .livecall .act:hover { background: var(--bc-subtle); }
 .livecall .act.danger { border-color: transparent; background: var(--bc-danger); color: #fff; }
-.livecall.over { color: var(--bc-muted); }
+.livecall.over { color: var(--bc-muted); background: var(--bc-subtle); border-color: var(--bc-border); }
 .call-note code { font-size: 11px; }
 @media (prefers-reduced-motion: reduce) { .call-dot { animation: none; } }
 
-.done { padding: 34px 24px 38px; text-align: center; animation: bc-fade-in 240ms ease both; }
+/* div.done, not .done: the assistant's stepper marks finished steps li.done,
+   and this screen's padding was landing on every one of them. */
+div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 240ms ease both; }
 .done .tick {
-  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
-  display: grid; place-items: center; font-size: 24px;
+  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
+  display: grid; place-items: center; font-size: 26px;
   background: color-mix(in srgb, var(--bc-ok) 14%, transparent); color: var(--bc-ok);
+  box-shadow: 0 0 0 8px color-mix(in srgb, var(--bc-ok) 6%, transparent);
   animation: bc-pop 420ms var(--bc-ease) both;
 }
-.done h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 650; }
-.done p { margin: 0; font-size: 12.5px; color: var(--bc-muted); }
-.done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.done h3 { margin: 0 0 6px; font-size: 17px; font-weight: 680; letter-spacing: -.015em; }
+.done p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bc-muted); }
+.done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--bc-subtle); color: var(--bc-fg); }
 /* The likely wait. Set apart from the reference line above it by a rule rather
    than by weight: one is bookkeeping and the other is the answer to the
    question the reporter actually has, and they should not read as one
    paragraph. */
 .done .eta {
-  margin: 12px auto 0;
-  padding-top: 11px;
-  border-top: 1px solid var(--bc-line);
+  margin: 14px auto 0;
+  padding-top: 12px;
+  border-top: 1px solid var(--bc-border);
   max-width: 30ch;
   line-height: 1.5;
 }
-.done .eta strong { color: var(--bc-ink); font-weight: 600; }
+.done .eta strong { color: var(--bc-fg); font-weight: 620; }
 /* The same figure on the report the reporter came back to. Sits under the
    status pill in the header block, muted — it is context, not the headline the
    status is. */
 .report-head .eta-line {
   grid-column: 1 / -1;
-  font-size: 11.5px;
+  font-size: var(--bc-fs-xs);
   color: var(--bc-muted);
   margin-top: 2px;
 }
 
 /* ---------- recording bar ---------- */
 .recbar {
-  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
+  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
   z-index: 2147483002;
   display: flex; align-items: center; gap: 12px;
-  padding: 10px 12px 10px 15px; border-radius: 999px;
+  padding: 8px 8px 8px 16px; border-radius: 999px;
   background: var(--bc-elevated); color: var(--bc-fg);
   border: 1px solid var(--bc-border); box-shadow: var(--bc-shadow);
   animation: bc-item-in 300ms var(--bc-ease) both;
 }
 .recbar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bc-danger); animation: bc-pulse 1.4s ease-in-out infinite; }
-.recbar .time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; min-width: 38px; }
+.recbar .time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 650; min-width: 38px; }
 .recbar .hint { font-size: 12px; color: var(--bc-muted); }
-.recbar button { padding: 7px 13px; font-size: 12.5px; font-weight: 600; border-radius: 999px; cursor: pointer; }
+.recbar button { height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer; }
 .recbar .stop { background: var(--bc-danger); border: 1px solid var(--bc-danger); color: #fff; }
 .recbar .stop:hover { filter: brightness(1.08); }
 
-@media (max-width: 520px) {
-  .panel { width: calc(100vw - 24px); max-width: none; }
-  .scrim.at-right .panel, .scrim.at-left .panel { left: 12px; right: 12px; }
-  .recbar .hint { display: none; }
-}
-
 /* ---------- phones ----------------------------------------------------------
    This widget runs inside a shadow root on somebody else's site, so its own
    stylesheet is the whole story: the host page cannot correct any of this, and
@@ -814,6 +1137,32 @@ button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color:
   padding-left: env(safe-area-inset-left, 0px);
 }
 
+/* Short desktop windows: the chat height gives way to the space there is. */
+@media (max-height: 820px) { .panel.is-chat { height: calc(100vh - var(--bc-dock-h, 84px) - 52px); } }
+
+/* A phone gets the whole screen: a sheet that slides up from the bottom, with
+   the notch and the home indicator kept clear. The dock steps aside while it
+   is open — the sheet has its own close button, and a launcher floating over
+   the send button would be in the way of the one thing that matters. */
+@media (max-width: 480px) {
+  .scrim { background: rgba(10,12,16,.4); }
+  .panel, .scrim.at-right .panel, .scrim.at-left .panel, .scrim.at-bottom .panel, .scrim.at-top .panel {
+    inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
+    border-radius: 0; border: 0;
+    animation: bc-sheet-in 380ms var(--bc-ease) both;
+  }
+  @supports (height: 100dvh) { .panel { height: 100dvh; max-height: none; } }
+  .panel.is-chat { height: 100%; }
+  .scrim.closing .panel { animation: bc-sheet-out 200ms ease both; }
+  .head { padding-top: max(14px, env(safe-area-inset-top, 0px)); padding-left: max(var(--bc-pad), env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
+  .foot, .powered { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
+  .foot + .powered { padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)); }
+  .foot:has(+ .powered) { padding-bottom: 12px; }
+  .dock.over { display: none; }
+  .recbar .hint { display: none; }
+  .msg-row, .typing-row { max-width: 92%; }
+}
+
 @media (pointer: coarse) {
   /* iOS zooms the whole page when a field it focuses is under 16px, and does
      not zoom back out. On the host's site that is not the widget's page to
@@ -825,47 +1174,33 @@ button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color:
   /* 44px is the floor a thumb hits reliably. Every control in this form was
      under it, on the one surface in the product designed for someone who is
      not an operator and gets no second attempt. */
-  .launcher { min-height: 48px; padding: 14px 20px; }
-  .seg button { min-height: 44px; padding: 12px 8px; }
-  .tool { min-height: 44px; padding: 12px 14px; }
-  button.primary, .foot button { min-height: 44px; padding: 12px 18px; }
+  .seg button { min-height: 44px; }
+  .tool { min-height: 56px; }
+  button.primary, button.ghost { height: 44px; }
+  .composer .send, .composer .tool { width: 40px; height: 40px; min-height: 0; }
   textarea { min-height: 104px; }
+  .composer textarea { min-height: 40px; }
 
-  /* The theme switch and the close button are 28px glyphs whose boxes cannot
+  /* The theme switch and the close button are small glyphs whose boxes cannot
      grow without moving the header text beside them, so each keeps its size
      and gets an invisible target drawn around it instead. */
-  .themer button, .head .icon-btn, .thumb .x, .brand-credit { position: relative; }
-  .themer button::after, .head .icon-btn::after, .thumb .x::after, .brand-credit::after {
+  .themer button, .head .icon-btn, .thumb .drop, .brand-credit { position: relative; }
+  .thumb .drop { position: absolute; opacity: 1; }
+  .themer button::after, .head .icon-btn::after, .thumb .drop::after, .brand-credit::after {
     content: '';
     position: absolute;
-    inset: -9px;
+    inset: -8px;
   }
-  /* The close button is the one people reach for in a hurry, and it sits in
-     the corner where a thumb is least accurate. */
-  .head .icon-btn::after { inset: -12px; }
   /* The themer's three buttons sit side by side, so their expanders would
      overlap each other without a gap to grow into. */
   .themer { gap: 4px; }
-
-  /* Thumb-sized controls make the form taller, which on a short phone pushed
-     "Send report" below the fold of a panel that scrolls — so the one button
-     the whole widget exists for was reachable only by scrolling past the
-     attachment row. It stays on screen instead. */
-  .foot {
-    position: sticky;
-    bottom: 0;
-    margin-top: 16px;
-    /* The panel scrolls under this, so the bar cannot be translucent. */
-    background: var(--bc-subtle);
-    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
-  }
 }
 
 /* Hover is a lie on a touchscreen: it latches on tap and stays. The launcher's
    lift in particular was left applied after the panel closed. */
 @media (hover: none) {
-  .launcher:hover { transform: none; filter: none; box-shadow: 0 6px 18px rgba(10,12,16,.22), 0 1px 3px rgba(10,12,16,.16); }
-  .tool:hover, .themer button:hover { border-color: var(--bc-border); }
+  .launcher:hover { transform: none; filter: none; }
+  .tool:hover:not(:disabled), .themer button:hover { transform: none; }
 }
 `;
 
@@ -913,7 +1248,8 @@ export function mountWidget(client) {
   const launcher = document.createElement('button');
   launcher.className = 'launcher';
   launcher.type = 'button';
-  launcher.innerHTML = `${ICONS.bug}<span>Report a bug</span>`;
+  launcher.innerHTML = `<span class="ico" aria-hidden="true"><span class="when-closed">${ICONS.chat}</span>`
+    + `<span class="when-open">${ICONS.chevronDown}</span></span><span>Report a bug</span>`;
   launcher.setAttribute('aria-haspopup', 'dialog');
   launcher.setAttribute('aria-expanded', 'false');
 
@@ -941,7 +1277,14 @@ export function mountWidget(client) {
   root.appendChild(dock);
 
   document.body.appendChild(host);
-  return () => { open?.destroy(); host.remove(); };
+  // Integration hook: BugCatch.open() / close() / isOpen() drive the same
+  // launcher a person would press, so there is one way in to the panel.
+  client.widgetControls = {
+    open: () => { if (!open) launcher.click(); },
+    close: () => { open?.close(); },
+    isOpen: () => Boolean(open),
+  };
+  return () => { open?.destroy(); host.remove(); client.widgetControls = null; };
 }
 
 /** Normalises a configured theme to one of the three the switch offers. */
@@ -977,26 +1320,25 @@ function openPanel({ root, host, dock, client, onClose }) {
   scrim.style.setProperty('--bc-dock-h', `${Math.round(dock.getBoundingClientRect().height)}px`);
   scrim.innerHTML = `
     <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
-      <div class="head">
-        <div class="mark">${ICONS.bug}</div>
-        <div class="titles">
-          <h2 id="bc-h">Report a bug</h2>
-          <p>We'll attach what the page was doing, so you don't have to explain it.</p>
-        </div>
-        <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
-      </div>
+      ${headHtml({
+        id: 'bc-h',
+        title: 'Tell us what went wrong',
+        sub: "Our assistant starts looking right away. We attach the page details for you.",
+      })}
       <div class="body">
-        <div class="slot"></div>
+        <div class="slot" role="alert"></div>
         <div class="whoami" hidden></div>
         <div class="known" hidden></div>
         <div class="compose">
         <div class="field">
           <label for="bc-title">What went wrong?</label>
-          <input id="bc-title" type="text" placeholder="Checkout button does nothing" autocomplete="off" />
+          <input id="bc-title" type="text" placeholder="e.g. The checkout button does nothing" autocomplete="off"
+            aria-describedby="bc-title-err" />
+          <p class="field-err" id="bc-title-err" hidden></p>
         </div>
         <div class="field">
-          <label for="bc-desc">Any detail that helps <span style="font-weight:450;color:var(--bc-faint)">(optional)</span></label>
-          <textarea id="bc-desc" placeholder="I clicked Pay and nothing happened."></textarea>
+          <label for="bc-desc">Anything else that helps <span class="opt">(optional)</span></label>
+          <textarea id="bc-desc" placeholder="What you were doing, what you expected, what happened instead."></textarea>
         </div>
         <!-- Drawn only when this project asks for an identifier and the report
              does not already carry one. Between the description and the
@@ -1004,7 +1346,7 @@ function openPanel({ root, host, dock, client, onClose }) {
              it is a question about what they just typed. -->
         <div class="refs" hidden></div>
         <div class="field">
-          <label id="bc-prio-l">Severity</label>
+          <label id="bc-prio-l">How much is it getting in your way?</label>
           <div class="seg" role="group" aria-labelledby="bc-prio-l">
             ${PRIORITIES.map((p) => `
               <button type="button" data-prio="${p.value}" aria-pressed="${p.value === priority}">${p.label}</button>
@@ -1013,11 +1355,14 @@ function openPanel({ root, host, dock, client, onClose }) {
         </div>
         ${canCapture ? `
         <div class="field">
-          <label>Attach <span style="font-weight:450;color:var(--bc-faint)">(optional)</span></label>
-          <div class="tools">
+          <div class="field-head">
+            <label id="bc-att-l">Show us <span class="opt">(optional)</span></label>
+            <span class="count" aria-live="polite"></span>
+          </div>
+          <div class="tools" role="group" aria-labelledby="bc-att-l">
             ${canShoot ? `<button class="tool" type="button" data-act="shot">${ICONS.camera}Screenshot</button>` : ''}
-            ${canRecord ? `<button class="tool" type="button" data-act="rec">${ICONS.video}Record</button>` : ''}
-            <button class="tool" type="button" data-act="file">${ICONS.paperclip}File</button>
+            ${canRecord ? `<button class="tool" type="button" data-act="rec">${ICONS.video}Record screen</button>` : ''}
+            <button class="tool" type="button" data-act="file">${ICONS.paperclip}Upload file</button>
           </div>
           <div class="thumbs"></div>
           <input type="file" accept="${REPORT_MIMES.join(',')}" multiple hidden />
@@ -1025,22 +1370,26 @@ function openPanel({ root, host, dock, client, onClose }) {
         </div>
       </div>
       <div class="foot">
-        <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${BRAND}</a>
-        <span class="note"></span>
+        <span class="note" aria-live="polite"></span>
+        ${client.hasReports() ? '<button class="quiet" type="button" data-act="history">Your reports</button>' : ''}
         <span class="spacer"></span>
-        ${client.hasReports() ? '<button class="ghost" type="button" data-act="history">Your reports</button>' : ''}
-        <button class="ghost" type="button" data-act="cancel">Cancel</button>
         <!-- Hidden until the API confirms this project can take a call, which
              most cannot. Drawn here rather than as a second launcher because it
              is the same errand as Send report — the difference is only whether
              the reporter would rather say it than type it. -->
-        <button class="ghost" type="button" data-act="call" hidden>Talk to the team</button>
-        <button class="primary" type="button" data-act="send">Send report</button>
+        <button class="ghost" type="button" data-act="call" hidden>${ICONS.phone}Talk to the team</button>
+        <button class="primary" type="button" data-act="send">Send report ${ICONS.send}</button>
+      </div>
+      <div class="powered">Powered by
+        <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${BRAND}</a>
       </div>
     </div>`;
 
   const $ = (sel) => scrim.querySelector(sel);
   const titleInput = $('#bc-title');
+  // Held, not looked up: the history and report screens replace the panel's
+  // markup, and a draft saved on the way out must still read what was typed.
+  const descInput = $('#bc-desc');
   const slot = $('.slot');
   const thumbs = $('.thumbs');
   const filePicker = scrim.querySelector('input[type=file]');
@@ -1065,8 +1414,8 @@ function openPanel({ root, host, dock, client, onClose }) {
   function persistDraft() {
     clearTimeout(draftTimer);
     if (!draftLoaded || draftSubmitted || cfg.drafts === false) return draftWrites;
-    const value = titleInput.value || $('#bc-desc').value || items.length ? {
-      title: titleInput.value, description: $('#bc-desc').value, priority,
+    const value = titleInput.value || descInput.value || items.length ? {
+      title: titleInput.value, description: descInput.value, priority,
       items: items.map(({ blob, mime, kind }) => ({ blob, mime, kind })),
     } : null;
     draftWrites = draftWrites.catch(() => {}).then(() => draftOperation(savedDraftKey, value))
@@ -1086,10 +1435,10 @@ function openPanel({ root, host, dock, client, onClose }) {
     compose.inert = true;
     readDraft(savedDraftKey).then((draft) => {
       if (closed || !draft) return;
-      draftStatus.innerHTML = 'Unfinished report on this device. <button type="button" data-resume>Resume report</button> <button type="button" data-discard>Discard</button>';
+      draftStatus.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>';
       draftStatus.querySelector('[data-resume]').onclick = () => {
         titleInput.value = draft.title || '';
-        $('#bc-desc').value = draft.description || '';
+        descInput.value = draft.description || '';
         priority = PRIORITIES.some((p) => p.value === draft.priority) ? draft.priority : 'MEDIUM';
         scrim.querySelectorAll('[data-prio]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.prio === priority)));
         for (const item of (draft.items || []).slice(0, cfg.maxAttachments ?? 5)) addItem(item);
@@ -1167,7 +1516,6 @@ function openPanel({ root, host, dock, client, onClose }) {
   document.addEventListener('keydown', onKeydown, true);
   scrim.addEventListener('click', (e) => { if (e.target === scrim && !sending) close(); });
   $('[data-act="close"]').addEventListener('click', close);
-  $('[data-act="cancel"]').addEventListener('click', close);
 
   /* ---------- severity ---------- */
 
@@ -1184,16 +1532,32 @@ function openPanel({ root, host, dock, client, onClose }) {
   /* ---------- attachments ---------- */
 
   function say(text, kind = 'err') {
-    slot.innerHTML = text ? `<div class="msg ${kind}">${escapeHtml(text)}</div>` : '';
+    slot.innerHTML = text
+      ? `<div class="msg ${kind}">${kind === 'err' ? ICONS.alert : ''}<span>${escapeHtml(text)}</span></div>`
+      : '';
+  }
+
+  // The one required field says what is missing right under itself, rather
+  // than in a banner the reporter has to connect back to it.
+  const titleErr = $('#bc-title-err');
+  function flagTitle(text) {
+    titleErr.hidden = !text;
+    titleErr.innerHTML = text ? `${ICONS.alert}<span>${escapeHtml(text)}</span>` : '';
+    titleInput.classList.toggle('invalid', Boolean(text));
+    titleInput.setAttribute('aria-invalid', String(Boolean(text)));
   }
+  titleInput.addEventListener('input', () => { if (titleInput.value.trim()) flagTitle(''); });
 
   function refreshSendState() {
     const busy = items.some((it) => it.status === 'uploading');
     sendBtn.disabled = sending || busy || items.some((it) => it.status === 'failed');
     note.textContent = busy ? 'Waiting for the upload to finish…' : items.some((it) => it.status === 'failed') ? 'Retry or remove failed attachments before sending.' : '';
+    const max = cfg.maxAttachments ?? 5;
     scrim.querySelectorAll('.tool').forEach((t) => {
-      t.disabled = sending || items.length >= (cfg.maxAttachments ?? 5);
+      t.disabled = sending || items.length >= max;
     });
+    const count = $('.field-head .count');
+    if (count) count.textContent = items.length ? `${items.length} of ${max}` : '';
   }
 
   function drawThumb(item) {
@@ -1405,7 +1769,7 @@ function openPanel({ root, host, dock, client, onClose }) {
   /** What the report already carries, read out of what they typed. */
   function referencesInText() {
     if (refConfig.policy === 'off' || !refConfig.fields.length) return [];
-    return matchReferences(refConfig.fields, [titleInput.value, $('#bc-desc').value]);
+    return matchReferences(refConfig.fields, [titleInput.value, descInput.value]);
   }
 
   /** The answer to send, or an empty list. */
@@ -1420,29 +1784,52 @@ function openPanel({ root, host, dock, client, onClose }) {
     const optional = refConfig.policy !== 'required';
 
     refsBox.hidden = false;
+    // A handful of kinds read best as chips to tap; a long list goes back to
+    // a select so the card does not turn into a wall of pills.
+    const many = refConfig.fields.length > 6;
     refsBox.innerHTML = `
-      <p class="why">${escapeHtml(
-        optional
-          ? 'One more thing, so we can find your record — this helps us answer faster.'
-          : 'We need one of these to look this up.',
-      )}</p>
+      <div class="ask-head">
+        <span class="avatar" aria-hidden="true">${ICONS.sparkle}</span>
+        <div>
+          <strong>${optional ? 'One more thing' : 'We need one detail'}</strong>
+          <p class="why">${escapeHtml(
+            optional
+              ? 'So we can find your record — this helps us answer faster.'
+              : 'We need one of these to look this up.',
+          )}</p>
+        </div>
+      </div>
+      ${refConfig.fields.length > 1 && !many ? `
+      <div class="chips" role="group" aria-label="Which detail you are giving">
+        ${refConfig.fields.map((f) => `
+          <button type="button" data-ref-kind="${escapeHtml(f.key)}" aria-pressed="${f.key === field.key}">${escapeHtml(f.label)}</button>
+        `).join('')}
+      </div>` : ''}
       <div class="row">
-        ${refConfig.fields.length > 1 ? `
+        ${many ? `
         <select class="ref-kind" aria-label="Which detail you are giving">
           ${refConfig.fields.map((f) => `
             <option value="${escapeHtml(f.key)}" ${f.key === field.key ? 'selected' : ''}>${escapeHtml(f.label)}</option>
           `).join('')}
         </select>` : ''}
-        <input class="ref-value" type="${field.inputMode === 'email' ? 'email' : 'text'}"
+        <input class="ref-value${refError ? ' invalid' : ''}" type="${field.inputMode === 'email' ? 'email' : 'text'}"
           inputmode="${escapeHtml(field.inputMode === 'numeric' || field.inputMode === 'tel' ? 'numeric' : 'text')}"
           value="${escapeHtml(refValue)}"
-          placeholder="${escapeHtml(field.placeholder || '')}"
-          aria-label="${escapeHtml(field.label)}" />
+          placeholder="${escapeHtml(field.placeholder || field.label)}"
+          aria-label="${escapeHtml(field.label)}" ${refError ? 'aria-invalid="true"' : ''} />
       </div>
       ${field.hint ? `<p class="hint">${escapeHtml(field.hint)}</p>` : ''}
-      ${refError ? `<p class="after err">${escapeHtml(refError)}</p>` : ''}
-      ${optional ? '<button type="button" class="link" data-act="ref-skip">I don\'t have this</button>' : ''}`;
-
+      ${refError ? `<p class="field-err" role="alert">${ICONS.alert}<span>${escapeHtml(refError)}</span></p>` : ''}
+      ${optional ? '<button type="button" class="link" data-act="ref-skip">I don\'t have this — send without it</button>' : ''}`;
+
+    refsBox.querySelectorAll('[data-ref-kind]').forEach((chip) => {
+      chip.addEventListener('click', () => {
+        refChoice = chip.dataset.refKind;
+        refError = '';
+        refWarned = false;
+        drawRefs();
+      });
+    });
     const value = refsBox.querySelector('.ref-value');
     value.addEventListener('input', () => {
       refValue = value.value;
@@ -1497,10 +1884,8 @@ function openPanel({ root, host, dock, client, onClose }) {
   sendBtn.addEventListener('click', async () => {
     const title = titleInput.value;
     if (!title.trim()) {
-      say('Please describe what went wrong.');
-      titleInput.classList.add('invalid');
+      flagTitle('Add a few words about what went wrong — a short sentence is plenty.');
       titleInput.focus();
-      setTimeout(() => titleInput.classList.remove('invalid'), 500);
       return;
     }
 
@@ -1538,12 +1923,12 @@ function openPanel({ root, host, dock, client, onClose }) {
     say('');
     refreshSendState();
     const original = sendBtn.innerHTML;
-    sendBtn.innerHTML = '<span class="spinner"></span>Sending…';
+    sendBtn.innerHTML = '<span class="spinner" aria-hidden="true"></span>Sending…';
 
     try {
       const res = await client.report({
         title,
-        description: $('#bc-desc').value,
+        description: descInput.value,
         priority,
         references: answeredReference(),
         attachments: items
@@ -1790,7 +2175,7 @@ function openPanel({ root, host, dock, client, onClose }) {
           <input type="email" data-fld="email" value="${escapeHtml(pendingEmail)}"
             placeholder="you@example.com" autocomplete="email" spellcheck="false"
             aria-label="Your email address" ${signInBusy ? 'disabled' : ''} />
-          <button type="button" class="tool" data-act="code" ${signInBusy ? 'disabled' : ''}>
+          <button type="button" class="primary" data-act="code" ${signInBusy ? 'disabled' : ''}>
             ${signInBusy ? 'Sending…' : 'Send code'}
           </button>
         </div>
@@ -1807,7 +2192,7 @@ function openPanel({ root, host, dock, client, onClose }) {
         <input type="text" class="code" data-fld="code" value="${escapeHtml(pendingCode)}"
           placeholder="123456" inputmode="numeric" autocomplete="one-time-code"
           maxlength="8" aria-label="The code we emailed you" ${signInBusy ? 'disabled' : ''} />
-        <button type="button" class="tool" data-act="confirm" ${signInBusy ? 'disabled' : ''}>
+        <button type="button" class="primary" data-act="confirm" ${signInBusy ? 'disabled' : ''}>
           ${signInBusy ? 'Checking…' : 'Sign in'}
         </button>
       </div>
@@ -1941,7 +2326,7 @@ function openPanel({ root, host, dock, client, onClose }) {
     } catch (err) {
       sending = false;
       callBtn.disabled = false;
-      callBtn.textContent = 'Talk to the team';
+      callBtn.innerHTML = `${ICONS.phone}Talk to the team`;
       refreshSendState();
       // A report filed with no call is still a report. Saying "the call
       // failed" and nothing else would leave the reporter thinking their
@@ -2051,6 +2436,18 @@ function openPanel({ root, host, dock, client, onClose }) {
    * sentence somebody started reading is the reason they open it again.
    */
   function succeed(res, { callFailed = null } = {}) {
+    // The assistant: straight into the report's conversation, where the
+    // investigation shows itself working ("Analyzing the issue…") and asks
+    // what it needs. The plain "Thanks" below stays for when that view cannot
+    // load — a report filed without a way to follow it.
+    if (res?.id && !callFailed) {
+      showReport(res.id, { fresh: true }).then((ok) => { if (!ok) doneScreen(res, { callFailed }); });
+      return;
+    }
+    doneScreen(res, { callFailed });
+  }
+
+  function doneScreen(res, { callFailed = null } = {}) {
     const ref = res?.id ? String(res.id).slice(0, 8) : null;
     const eta = res?.estimate?.label ? String(res.estimate.label) : null;
     // A press of Call that filed the report and then could not ring anybody.
@@ -2079,16 +2476,12 @@ function openPanel({ root, host, dock, client, onClose }) {
    */
   async function showHistory() {
     const panel = scrim.querySelector('.panel');
+    clearTimeout(assistantTimer);
+    openReportId = null;
+    panel.classList.remove('is-chat');
     panel.innerHTML = `
-      <div class="head">
-        <div class="mark">${ICONS.bug}</div>
-        <div class="titles">
-          <h2>Your reports</h2>
-          <p>Everything you've reported, and where each one got to.</p>
-        </div>
-        <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
-      </div>
-      <div class="history"><div class="empty">Loading…</div></div>`;
+      ${headHtml({ title: 'Your reports', sub: "Everything you've reported, and where each one got to." })}
+      <div class="history" aria-busy="true">${skeletonRows(3)}</div>`;
 
     panel.querySelector('[data-act="close"]').addEventListener('click', close);
 
@@ -2096,8 +2489,8 @@ function openPanel({ root, host, dock, client, onClose }) {
     try {
       ({ reports } = await client.myReports());
     } catch {
-      panel.querySelector('.history').innerHTML =
-        '<div class="empty">Couldn\'t load your reports just now.</div>';
+      const failed = panel.querySelector('.history');
+      if (failed) failed.innerHTML = emptyHtml('Couldn\'t load your reports just now.', ICONS.alert);
       return;
     }
 
@@ -2105,16 +2498,19 @@ function openPanel({ root, host, dock, client, onClose }) {
     const list = panel.querySelector('.history');
     if (!list) return;
 
+    list.removeAttribute('aria-busy');
     list.innerHTML = reports.length
-      ? reports.map((r) => `
-        <button class="row" type="button" data-report="${escapeHtml(r.id)}">
+      ? reports.map((r, i) => `
+        <button class="row" type="button" data-report="${escapeHtml(r.id)}" style="animation-delay:${Math.min(i, 8) * 30}ms">
+          <span class="row-ico" aria-hidden="true">${ICONS.chat}</span>
           <span class="who">
             <span class="ttl">${escapeHtml(r.title)}</span>
             <span class="sub">${escapeHtml(r.reference)} · ${escapeHtml(relativeDay(r.createdAt))}</span>
           </span>
           <span class="pill ${escapeHtml(String(r.status).toLowerCase())}">${escapeHtml(statusWord(r.status))}</span>
+          <span class="chev" aria-hidden="true">${ICONS.chevronRight}</span>
         </button>`).join('')
-      : '<div class="empty">You haven\'t reported anything yet.</div>';
+      : emptyHtml('You haven\'t reported anything yet.', ICONS.inbox);
 
     for (const row of list.querySelectorAll('[data-report]')) {
       row.addEventListener('click', () => showReport(row.dataset.report));
@@ -2134,18 +2530,17 @@ function openPanel({ root, host, dock, client, onClose }) {
    * bubbles either side of them; and there is a box at the bottom. Oldest at
    * the top, because that is the direction a conversation is read.
    */
-  async function showReport(bugId) {
+  async function showReport(bugId, { fresh = false } = {}) {
     const panel = scrim.querySelector('.panel');
+    clearTimeout(assistantTimer);
+    panel.classList.add('is-chat');
     panel.innerHTML = `
-      <div class="head">
-        <button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${ICONS.back}</button>
-        <div class="titles">
-          <h2>Your report</h2>
-          <p>Everything that has happened, and a way to answer.</p>
-        </div>
-        <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
-      </div>
-      <div class="history"><div class="empty">Loading…</div></div>`;
+      ${headHtml({
+        back: true,
+        title: fresh ? 'Looking into it' : 'Your report',
+        sub: fresh ? 'Our assistant is on it — it may ask you a question here.' : 'Everything that has happened, and a way to answer.',
+      })}
+      <div class="history chatting" aria-busy="true"><div class="thread">${skeletonBubbles()}</div></div>`;
 
     panel.querySelector('[data-act="close"]').addEventListener('click', close);
     panel.querySelector('[data-act="back"]').addEventListener('click', showHistory);
@@ -2159,11 +2554,13 @@ function openPanel({ root, host, dock, client, onClose }) {
 
     const body = panel.querySelector('.history');
     // The panel can be closed, or navigated away from, while this is in flight.
-    if (!body || !panel.querySelector('[data-act="back"]')) return;
+    if (!body || !panel.querySelector('[data-act="back"]')) return false;
 
     if (!report) {
-      body.innerHTML = '<div class="empty">Couldn\'t load that report just now.</div>';
-      return;
+      if (fresh) { panel.classList.remove('is-chat'); return false; }
+      body.removeAttribute('aria-busy');
+      body.innerHTML = emptyHtml('Couldn\'t load that report just now.', ICONS.alert);
+      return false;
     }
 
     openReportId = bugId;
@@ -2171,7 +2568,9 @@ function openPanel({ root, host, dock, client, onClose }) {
     // fixed" card up over the screen where they are reading that it was fixed
     // would be the notification arguing with itself.
     client.markReportRead(bugId);
+    const drawn = threadHtml(report.timeline);
     body.classList.add('chatting');
+    body.removeAttribute('aria-busy');
     body.innerHTML = `
       <div class="report-head">
         <span class="ttl">${escapeHtml(report.title)}</span>
@@ -2186,12 +2585,101 @@ function openPanel({ root, host, dock, client, onClose }) {
           ? `<span class="eta-line">Usually takes ${escapeHtml(String(report.estimate.label))}</span>`
           : ''}
       </div>
-      <div class="thread">${threadHtml(report.timeline)}</div>`;
+      <div class="thread" role="log" aria-live="polite" aria-label="Conversation">${drawn}</div>`;
 
     const thread = body.querySelector('.thread');
+    threadDrawn.set(thread, drawn);
     scrollToLatest(thread);
     mountVerification(body, report);
     if (report.canReply) mountComposer(body, thread, bugId);
+    mountAssistant(body, report, bugId);
+    // Again, now the cards above it have taken their share of the height: the
+    // latest message — and any quick answers under it — is what they came for.
+    scrollToLatest(thread);
+    return true;
+  }
+
+  /**
+   * The assistant's live card: where the investigation is, and a gentle
+   * refresh while it works. Analyzing polls every few seconds until the
+   * outcome lands — a question, a found cause, or a hand-off — so the
+   * reporter watches it happen rather than wondering whether anything is.
+   */
+  let assistantTimer = null;
+  function mountAssistant(body, report, bugId) {
+    clearTimeout(assistantTimer);
+    const a = report.assistant;
+    const thread = body.querySelector('.thread');
+    let card = body.querySelector('.assistant');
+    if (!a) {
+      card?.remove();
+      thread?.querySelector('.typing-row')?.remove();
+      return;
+    }
+
+    // Updated in place rather than rebuilt: the card is polled every few
+    // seconds while the assistant works, and a card that re-entered on every
+    // poll would flicker — and re-announce itself to a screen reader — for
+    // nothing. It only animates when the phase actually moves.
+    const previous = card?.dataset.phase || null;
+    if (!card) {
+      card = document.createElement('div');
+      card.setAttribute('role', 'status');
+      card.setAttribute('aria-live', 'polite');
+      body.querySelector('.report-head')?.after(card);
+    }
+    card.className = `assistant ${escapeHtml(a.phase)}`;
+    card.dataset.phase = a.phase;
+
+    const steps = a.steps || [];
+    const done = steps.filter((st) => st.state === 'done').length;
+    const active = steps.some((st) => st.state === 'active') ? 0.5 : 0;
+    const pct = steps.length ? Math.round(((done + active) / steps.length) * 100) : 0;
+    const content = `
+      <div class="as-body${previous && previous !== a.phase ? ' entering' : ''}">
+        <div class="as-top">
+          <span class="as-orb" aria-hidden="true">${a.phase === 'analyzing' ? '<span class="as-spin"></span>'
+            : a.phase === 'resolved' ? ICONS.check : ICONS.sparkle}</span>
+          <div class="as-text">
+            <div class="as-title">${escapeHtml(a.title)}</div>
+            <div class="as-detail">${escapeHtml(a.detail)}</div>
+          </div>
+        </div>
+      </div>
+      ${steps.length ? `
+      <div class="as-progress" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${pct}"><i style="width:${pct}%"></i></div>
+      <ol class="as-steps">${steps.map((st) => `<li class="${escapeHtml(st.state)}"${st.state === 'active' ? ' aria-current="step"' : ''}><span class="dot"></span><span class="lbl">${escapeHtml(st.label)}</span></li>`).join('')}</ol>` : ''}`;
+    const key = JSON.stringify([a.phase, a.title, a.detail, steps]);
+    if (card.dataset.key !== key) {
+      const bar = card.querySelector('.as-progress i');
+      const from = bar?.style.width;
+      card.innerHTML = content;
+      card.dataset.key = key;
+      // Let the bar travel from where it was to where it is now.
+      const next = card.querySelector('.as-progress i');
+      if (next && from) {
+        next.style.width = from;
+        requestAnimationFrame(() => { next.style.width = `${pct}%`; });
+      }
+    }
+
+    // While it works, a "thinking" bubble sits where its next message will land.
+    if (thread) {
+      const pinned = atLatest(thread);
+      const typing = thread.querySelector('.typing-row');
+      if (a.phase !== 'analyzing') typing?.remove();
+      else if (!typing || typing !== thread.lastElementChild) {
+        typing?.remove();
+        thread.insertAdjacentHTML('beforeend', typingHtml());
+        if (pinned) scrollToLatest(thread);
+      }
+    }
+
+    if (a.phase === 'analyzing') {
+      assistantTimer = setTimeout(() => refreshThread(bugId), 3000);
+    } else if (a.phase === 'needs_info' && previous !== 'needs_info') {
+      body.querySelector('.composer textarea')?.focus();
+    }
   }
 
   /**
@@ -2230,7 +2718,14 @@ function openPanel({ root, host, dock, client, onClose }) {
 
     mountVerification(body, report);
     const pinned = atLatest(thread);
-    thread.innerHTML = threadHtml(report.timeline);
+    const html = threadHtml(report.timeline);
+    // Only rewritten when something changed, so a poll that brings nothing new
+    // does not replay every bubble's entrance or re-announce the log.
+    if (threadDrawn.get(thread) !== html) {
+      thread.innerHTML = html;
+      threadDrawn.set(thread, html);
+    }
+    mountAssistant(body, report, bugId);
     // Only follow the conversation down if they were already at the bottom.
     // Yanking someone back from something they scrolled up to read is worse
     // than making them scroll.
@@ -2433,7 +2928,7 @@ function openPanel({ root, host, dock, client, onClose }) {
         at: new Date().toISOString(),
         attachments: ready.map((f) => ({ type: 'FILE', name: f.name, size: f.size })),
       }, 'pending'));
-      scrollToLatest(thread);
+      scrollToLatest(thread, { smooth: true });
 
       try {
         await sendMessage({
@@ -2583,14 +3078,38 @@ function openPanel({ root, host, dock, client, onClose }) {
 function threadHtml(timeline) {
   const entries = timeline || [];
   if (!entries.length) return '';
-  return entries.map((e) => (e.from ? messageHtml({
-    from: e.from,
-    author: e.reply?.author,
-    automated: e.reply?.automated,
-    body: e.reply?.body,
-    at: e.at,
-    attachments: e.reply?.attachments,
-  }) : systemHtml(e))).join('');
+  let day = null;
+  let prev = null;
+  return entries.map((e) => {
+    // A rule with the date on it whenever the calendar day turns, the way a
+    // chat marks that the next message came later.
+    const d = dayKey(e.at);
+    const sep = d && d !== day ? `<div class="day-sep" role="separator">${escapeHtml(dayLabel(e.at))}</div>` : '';
+    if (sep) { day = d; prev = null; }
+    if (!e.from) { prev = null; return sep + systemHtml(e); }
+    const message = {
+      from: e.from,
+      author: e.reply?.author,
+      automated: e.reply?.automated,
+      body: e.reply?.body,
+      at: e.at,
+      attachments: e.reply?.attachments,
+    };
+    // Consecutive messages from the same voice within a few minutes are one
+    // turn: one avatar, one name, the bubbles stacked under it.
+    const who = speakerOf(message);
+    const cont = prev && prev.who === who
+      && Math.abs(new Date(e.at).getTime() - new Date(prev.at).getTime()) < 5 * 60_000;
+    prev = { who, at: e.at };
+    return sep + messageHtml(message, cont ? 'cont' : '');
+  }).join('');
+}
+
+/** Which voice a message is in, for grouping: the reporter, the assistant, or a named person. */
+function speakerOf(message) {
+  if (message.from === 'reporter') return 'me';
+  if (message.automated) return 'assistant';
+  return `team:${message.author || ''}`;
 }
 
 /**
@@ -2601,15 +3120,17 @@ function threadHtml(timeline) {
  * portal exactly rather than being a third attempt at the same sentence.
  */
 function systemHtml(entry) {
+  const when = clockTime(entry.at);
   return `
     <div class="sys k-${escapeHtml(entry.kind)}">
-      <span class="dot" aria-hidden="true"></span>${escapeHtml(entry.summary || '')}
-      · ${escapeHtml(relativeDay(entry.at))}
+      <span class="dot" aria-hidden="true"></span>${escapeHtml(entry.summary || '')}${when ? `
+      <span class="t">· ${escapeHtml(when)}</span>` : ''}
     </div>`;
 }
 
 /**
- * One bubble. `state` marks a message that is still in flight, or failed.
+ * One bubble. `state` marks a message that is still in flight, or failed, or
+ * one that continues the turn above it.
  *
  * A reply that was sent automatically says so, above the words rather than
  * after them. The person reading it is deciding whether their problem has been
@@ -2633,30 +3154,132 @@ function messageHtml(message, state = '') {
 
   // Named, or labelled, never both and never neither: an automated message has
   // no author to name, and naming one would be the lie the label exists to
-  // prevent.
+  // prevent. The avatar says the same thing at a glance.
   let who = '';
-  if (automated) who = '<span class="msg-who auto">Automatic reply</span>';
-  else if (!mine && message.author) who = `<span class="msg-who">${escapeHtml(message.author)}</span>`;
+  let avatar = '';
+  if (automated) {
+    who = '<span class="msg-who auto">Assistant <span class="tag">AI</span></span>';
+    avatar = `<span class="av bot" aria-hidden="true">${ICONS.sparkle}</span>`;
+  } else if (!mine) {
+    const name = message.author || 'Support team';
+    who = `<span class="msg-who">${escapeHtml(name)}</span>`;
+    avatar = `<span class="av" aria-hidden="true">${escapeHtml(initials(name))}</span>`;
+  }
+  if (state.includes('cont')) who = '';
 
   // "Is this the problem you are facing?" — the confirm question the
   // investigation asks (bugcatch-workers check-loop). One tap answers it; the
   // buttons only show on the latest message, so an answered question has none.
   const confirm = automated && /reply "yes" or "no"/i.test(body)
     ? `<div class="quick" role="group" aria-label="Answer">
-        <button type="button" data-quick="Yes, this is the problem">Yes, that's it</button>
+        <button type="button" data-quick="Yes, this is the problem">${ICONS.check}Yes, that's it</button>
         <button type="button" data-quick="No, that is not the problem">No, it's something else</button>
       </div>`
     : '';
 
   return `
     <div class="msg-row ${mine ? 'mine' : 'theirs'} ${automated ? 'auto' : ''} ${state}">
+      ${avatar}
       ${who}
       <div class="bubble ${body ? '' : 'silent'}">${text}${files}</div>
       ${confirm}
-      <span class="msg-when">${escapeHtml(relativeDay(message.at))}</span>
+      <span class="msg-when">${escapeHtml(clockTime(message.at) || relativeDay(message.at))}</span>
+    </div>`;
+}
+
+/** The assistant, thinking: where its next message will appear. */
+function typingHtml() {
+  return `
+    <div class="typing-row">
+      <span class="av bot" aria-hidden="true">${ICONS.sparkle}</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>`;
 }
 
+/**
+ * The panel's header, on every screen. The assistant's avatar carries the
+ * identity; `back` adds the way out of a report to the list of them.
+ */
+function headHtml({ title, sub, id = '', back = false }) {
+  return `
+    <div class="head">
+      ${back ? `<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${ICONS.back}</button>` : ''}
+      <div class="mark" aria-hidden="true">${ICONS.sparkle}</div>
+      <div class="titles">
+        <h2${id ? ` id="${id}"` : ''}>${escapeHtml(title)}</h2>
+        <p>${escapeHtml(sub)}</p>
+      </div>
+      <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
+    </div>`;
+}
+
+function emptyHtml(text, icon) {
+  return `<div class="empty"><span class="empty-ico" aria-hidden="true">${icon}</span>${escapeHtml(text)}</div>`;
+}
+
+/** Placeholder rows while the list loads — the shape of what is coming. */
+function skeletonRows(n) {
+  return Array.from({ length: n }, () => `
+    <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 skeletonBubbles() {
+  return `
+    <div aria-hidden="true" style="display:flex;flex-direction:column;gap:10px;padding-top:6px">
+      <span class="skel" style="width:42%;height:34px;border-radius:16px;align-self:center"></span>
+      <span class="skel" style="width:66%;height:52px;border-radius:18px"></span>
+      <span class="skel" style="width:48%;height:38px;border-radius:18px;align-self:flex-end"></span>
+    </div>
+    <span class="sr-only">Loading…</span>`;
+}
+
+// What each open thread was last drawn from, so a poll that brings nothing new
+// leaves the DOM (and the reader's place in it) alone.
+const threadDrawn = new WeakMap();
+
+function initials(name) {
+  const parts = String(name).trim().split(/\s+/).filter(Boolean);
+  if (!parts.length) return '?';
+  return (parts[0][0] + (parts.length > 1 ? parts[parts.length - 1][0] : '')).toUpperCase();
+}
+
+function dayKey(iso) {
+  const d = new Date(iso);
+  return Number.isFinite(d.getTime()) ? `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}` : null;
+}
+
+/** "Today" / "Yesterday" / "Mon, 14 Sep" — the label on a day separator. */
+function dayLabel(iso) {
+  const d = new Date(iso);
+  const today = new Date();
+  const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+  if (dayKey(d) === dayKey(today)) return 'Today';
+  if (dayKey(d) === dayKey(yesterday)) return 'Yesterday';
+  try {
+    return d.toLocaleDateString(undefined, {
+      weekday: 'short', day: 'numeric', month: 'short',
+      ...(d.getFullYear() !== today.getFullYear() ? { year: 'numeric' } : {}),
+    });
+  } catch {
+    return relativeDay(iso);
+  }
+}
+
+/** "14:05" or "2:05 PM", in the reader's own convention. */
+function clockTime(iso) {
+  const d = new Date(iso);
+  if (!Number.isFinite(d.getTime())) return '';
+  try {
+    return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
 /**
  * One attachment, rendered as what it is.
  *
@@ -2691,8 +3314,10 @@ function atLatest(thread) {
   return thread.scrollHeight - thread.scrollTop - thread.clientHeight < 40;
 }
 
-function scrollToLatest(thread) {
-  thread.scrollTop = thread.scrollHeight;
+function scrollToLatest(thread, { smooth = false } = {}) {
+  const calm = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (smooth && !calm && thread.scrollTo) thread.scrollTo({ top: thread.scrollHeight, behavior: 'smooth' });
+  else thread.scrollTop = thread.scrollHeight;
 }
 
 /** Status as a word a reporter would use, not the enum the database stores. */