@sphoro/bugcatch-web-sdk 0.14.4 → 0.16.0

package/src/widget.js

@@ -14,7 +14,7 @@ import {
 import { draftKey, draftOperation, readDraft } from './drafts.js';
 import { readSession } from './session.js';
 import { sendMessage } from './updates.js';
-import { matchReferences, validateReference } from './references.js';
+import { readReferences, validateReference } from './references.js';
 
 const POSITIONS = {
   'bottom-right': 'bottom:20px;right:20px;',
@@ -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,117 @@ 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); }
+.refs .chips.cands button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 550; }
+/* "We read your ID" — under the description, while they type. */
+.ref-found {
+  display: flex; align-items: center; gap: 6px;
+  margin: -6px 0 14px; font-size: 12px; line-height: 1.45; color: var(--bc-muted);
+}
+.ref-found svg { width: 14px; height: 14px; flex: none; color: var(--bc-ok); }
+.ref-found b { font-weight: 600; color: var(--bc-fg); }
 
 /* ---------- severity ---------- */
-.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--bc-subtle); border-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 +566,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,354 +594,538 @@ 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, above the conversation. */
-.assistant { margin: 8px 12px 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bc-border); background: var(--bc-subtle); }
-.assistant.analyzing, .assistant.confirming, .assistant.needs_info { border-color: color-mix(in srgb, var(--bc-accent) 45%, transparent); }
-.as-top { display: flex; gap: 10px; align-items: flex-start; }
-.as-orb { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; background: var(--bc-accent); }
-.as-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: as-rot .8s linear infinite; }
+/* ---------- the assistant's live card ----------
+   A status header pinned between the report and the conversation: where the
+   investigation is, as words and as a stepper. It does not scroll with the
+   thread, because "is anything happening?" is the question on screen the
+   whole time. */
+.assistant {
+  flex: none; position: relative; overflow: hidden;
+  margin: 10px 12px 0; padding: 12px 14px 12px;
+  border-radius: var(--bc-r-lg); border: 1px solid var(--bc-border);
+  background: var(--bc-subtle);
+  transition: background 400ms ease, border-color 400ms ease;
+}
+.assistant.analyzing, .assistant.confirming, .assistant.needs_info {
+  background: var(--bc-accent-soft); border-color: var(--bc-accent-line);
+}
+.assistant.resolved { background: color-mix(in srgb, var(--bc-ok) 9%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border)); }
+/* On a call: the call's own card is what they are watching. This one states
+   what is happening and stops moving — no spinner, no travelling bar. */
+.assistant.calling { background: var(--bc-bg); }
+.assistant.calling .as-progress i { transition: none; }
+.as-body.entering { animation: bc-rise 360ms var(--bc-ease) both; }
+.as-top { display: flex; gap: 11px; align-items: center; }
+.as-orb {
+  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
+  color: var(--bc-on-accent); font-size: 15px;
+  background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
+}
+.assistant.resolved .as-orb { background: var(--bc-ok); }
+.assistant.reviewing .as-orb { background: color-mix(in srgb, var(--bc-fg) 55%, var(--bc-bg)); }
+.as-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: as-rot .8s linear infinite; }
 @keyframes as-rot { to { transform: rotate(360deg); } }
-.as-title { font-weight: 600; font-size: 14px; }
-.assistant.analyzing .as-title::after { content: ''; animation: as-dots 1.4s steps(4) infinite; }
-@keyframes as-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
-.as-detail { font-size: 12.5px; color: var(--bc-muted); margin-top: 2px; }
-.as-steps { list-style: none; display: flex; gap: 6px; margin: 10px 0 0; padding: 0; flex-wrap: wrap; font-size: 11.5px; color: var(--bc-muted); }
-.as-steps li { display: flex; align-items: center; gap: 4px; }
-.as-steps li span { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
-.as-steps li.done { color: var(--bc-accent); }
-.as-steps li.done span { background: var(--bc-accent); border-color: var(--bc-accent); }
-.as-steps li.active { color: var(--bc-fg); font-weight: 600; }
-.as-steps li.active span { border-color: var(--bc-accent); animation: as-pulse 1s ease-in-out infinite; }
+.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 span, .assistant.analyzing .as-title::after { animation: none; } }
+@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; }
+}
+
+/* ---------- 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);
 }
-.pill.open { color: #e8912a; }
-.pill.in_progress { color: #4da3ff; }
-.pill.resolved { color: #35b87f; }
-.pill.closed { color: var(--bc-faint); }
+.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 .call-kept { font-size: 11px; opacity: .75; }
 .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
@@ -835,6 +1150,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
@@ -846,47 +1187,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; }
 }
 `;
 
@@ -934,7 +1261,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');
 
@@ -962,7 +1290,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. */
@@ -998,26 +1333,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
@@ -1025,7 +1359,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>
@@ -1034,11 +1368,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 />
@@ -1046,22 +1383,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]');
@@ -1086,8 +1427,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))
@@ -1107,10 +1448,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);
@@ -1188,7 +1529,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 ---------- */
 
@@ -1205,16 +1545,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) {
@@ -1407,9 +1763,16 @@ function openPanel({ root, host, dock, client, onClose }) {
   // answer, is a reasonable thing to be asked. Most reporters never see it: the
   // loan number was in the sentence.
   let refConfig = { policy: 'off', fields: [] };
-  let refChoice = null;   // which field they are answering
+  let refOpen = false;
+  let refChoice = null;   // which field they are answering; null = not picked yet
   let refValue = '';
   let refError = '';
+  // What we read in their text but could not place for sure, offered as taps:
+  // [{ value, kinds: [{ key, label }] }]. `refMode` says why the card is open —
+  // 'confirm' when the text had two answers, 'suggest' when it had an unlabelled
+  // one, 'ask' when it had none.
+  let refCandidates = [];
+  let refMode = 'ask';
   // Set once they have answered or explicitly skipped, so Send stops asking.
   let refSettled = false;
   // Set once we have said "that does not look right" about the current value.
@@ -1420,13 +1783,18 @@ function openPanel({ root, host, dock, client, onClose }) {
   let refWarned = false;
 
   client.referenceFields()
-    .then((cfg) => { refConfig = cfg; })
+    .then((cfg) => { refConfig = cfg; showFound(); })
     .catch(() => { /* off is the safe answer to every failure */ });
 
-  /** 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]);
+  /** What the text says: found (sure), conflicts (ask which), loose (offer). */
+  function readText() {
+    if (refConfig.policy === 'off' || !refConfig.fields.length) return { found: [], conflicts: [], loose: [] };
+    return readReferences(refConfig.fields, [titleInput.value, descInput.value]);
+  }
+
+  /** Sure enough to send without a question: something found, nothing contested. */
+  function textAnswers(read = readText()) {
+    return read.found.length > 0 && read.conflicts.length === 0;
   }
 
   /** The answer to send, or an empty list. */
@@ -1435,35 +1803,135 @@ function openPanel({ root, host, dock, client, onClose }) {
     return [{ key: refChoice, value: refValue.trim().slice(0, 120) }];
   }
 
+  // A quiet line under the description while they type, so somebody who put
+  // their loan number in the sentence can see it was read and does not go
+  // looking for a box to type it into again.
+  const foundNote = document.createElement('p');
+  foundNote.className = 'ref-found';
+  foundNote.setAttribute('aria-live', 'polite');
+  foundNote.hidden = true;
+  descInput.closest('.field').after(foundNote);
+  let foundTimer;
+  function showFound() {
+    const read = readText();
+    if (textAnswers(read)) {
+      const list = read.found.slice(0, 2).map((r) => `${escapeHtml(r.label)} <b>${escapeHtml(shortId(r.value))}</b>`).join(', ');
+      foundNote.innerHTML = `${ICONS.check}<span>Found your ${list} — no need to add it again.</span>`;
+      foundNote.hidden = false;
+      // They have answered in the text; a card still asking would be not listening.
+      if (refOpen && !answeredReference().length) { refOpen = false; drawRefs(); }
+    } else {
+      foundNote.hidden = true;
+      foundNote.innerHTML = '';
+    }
+  }
+  const queueFound = () => { clearTimeout(foundTimer); foundTimer = setTimeout(showFound, 250); };
+  titleInput.addEventListener('input', queueFound);
+  descInput.addEventListener('input', queueFound);
+
+  /** A UUID is long; the chip shows its ends, the title shows all of it. */
+  function shortId(value) {
+    return value.length > 20 ? `${value.slice(0, 8)}…${value.slice(-4)}` : value;
+  }
+
+  function candidateFor(value) {
+    const v = value.trim().toLowerCase();
+    return refCandidates.find((c) => c.value.toLowerCase() === v) || null;
+  }
+
+  /** Pick a candidate: its value, and its kind when only one kind fits. */
+  function takeCandidate(c) {
+    refValue = c.value;
+    if (c.kinds.length === 1) refChoice = c.kinds[0].key;
+    else if (!c.kinds.some((k) => k.key === refChoice)) refChoice = null;
+    refError = '';
+    refWarned = false;
+  }
+
   function drawRefs() {
-    if (!refChoice) { refsBox.hidden = true; refsBox.innerHTML = ''; return; }
-    const field = refConfig.fields.find((f) => f.key === refChoice) || refConfig.fields[0];
+    if (!refOpen) { refsBox.hidden = true; refsBox.innerHTML = ''; return; }
+    const field = refConfig.fields.find((f) => f.key === refChoice) || null;
     const optional = refConfig.policy !== 'required';
+    const current = candidateFor(refValue);
+    // Kinds worth offering: the ones the picked value could be, when we know;
+    // every kind otherwise. Never zero — a guess of ours must not lock out the
+    // right answer.
+    const kinds = current && current.kinds.length > 1
+      ? refConfig.fields.filter((f) => current.kinds.some((k) => k.key === f.key))
+      : refConfig.fields;
+    // Two loan numbers: the kind is not in question, only which one — so the
+    // kind chips would be a second question nobody needs to answer.
+    const sharedKind = refCandidates.length > 1
+      && refCandidates.every((c) => c.kinds.length === 1 && c.kinds[0].key === refCandidates[0].kinds[0].key);
+
+    const head = {
+      confirm: refCandidates.length > 1
+        ? ['Which one is this about?', 'We found more than one ID in your message. Pick the one this problem is about.']
+        : ['Is this the right ID?', 'This could be more than one kind of ID. Tell us which it is.'],
+      suggest: ['Is this your ID?', 'We spotted this in your message. Tell us what it is so we can find your record.'],
+      ask: optional
+        ? ['One more thing', 'So we can find your record — this helps us answer faster.']
+        : ['We need one detail', 'We need one of these to look this up.'],
+    }[refMode];
 
     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 = kinds.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>${escapeHtml(head[0])}</strong>
+          <p class="why">${escapeHtml(head[1])}</p>
+        </div>
+      </div>
+      ${refCandidates.length > 1 ? `
+      <div class="chips cands" role="group" aria-label="IDs found in your message">
+        ${refCandidates.map((c, i) => `
+          <button type="button" data-ref-cand="${i}" title="${escapeHtml(c.value)}"
+            aria-pressed="${!!current && current === c}">${escapeHtml(shortId(c.value))}</button>
+        `).join('')}
+      </div>` : ''}
+      ${kinds.length > 1 && !many && !sharedKind ? `
+      <div class="chips" role="group" aria-label="Which detail you are giving">
+        ${kinds.map((f) => `
+          <button type="button" data-ref-kind="${escapeHtml(f.key)}" aria-pressed="${!!field && 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>
+          ${field ? '' : '<option value="" selected disabled>What is it?</option>'}
+          ${kinds.map((f) => `
+            <option value="${escapeHtml(f.key)}" ${field && f.key === field.key ? 'selected' : ''}>${escapeHtml(f.label)}</option>
           `).join('')}
         </select>` : ''}
-        <input class="ref-value" type="${field.inputMode === 'email' ? 'email' : 'text'}"
-          inputmode="${escapeHtml(field.inputMode === 'numeric' || field.inputMode === 'tel' ? 'numeric' : '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 ? (field.placeholder || field.label) : 'Your ID')}"
+          aria-label="${escapeHtml(field ? field.label : 'Your ID')}" ${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>' : ''}`;
-
+      ${field?.hint ? `<p class="hint">${escapeHtml(field.hint)}</p>` : ''}
+      ${refError ? `<p class="field-err" role="alert">${ICONS.alert}<span>${escapeHtml(refError)}</span></p>` : ''}
+      ${optional ? `<button type="button" class="link" data-act="ref-skip">${
+        refMode === 'ask' ? 'I don\'t have this — send without it' : 'Not sure — send as it is'}</button>` : ''}`;
+
+    refsBox.querySelectorAll('[data-ref-cand]').forEach((chip) => {
+      chip.addEventListener('click', () => {
+        takeCandidate(refCandidates[Number(chip.dataset.refCand)]);
+        drawRefs();
+      });
+    });
+    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;
@@ -1485,7 +1953,9 @@ function openPanel({ root, host, dock, client, onClose }) {
     refsBox.querySelector('[data-act="ref-skip"]')?.addEventListener('click', () => {
       // Skipping is answering. Without this the panel asks again on the next
       // press and the reporter is in a loop with a button that does nothing.
+      // The text still goes; the server reads it either way.
       refSettled = true;
+      refOpen = false;
       refChoice = null;
       refValue = '';
       refError = '';
@@ -1494,23 +1964,54 @@ function openPanel({ root, host, dock, client, onClose }) {
       say('');
     });
 
-    value.focus();
+    // Focus where the next decision is: the kind, when that is all that is
+    // missing; the box otherwise.
+    const next = !field && refValue ? refsBox.querySelector('[data-ref-kind], .ref-kind') : null;
+    (next || value).focus();
+  }
+
+  /**
+   * Open the question, pre-filled with the best of what the text offered.
+   *
+   * Conflicts first — the text said two things and only the reporter knows
+   * which — then loose IDs, which are probably the answer and only need a
+   * name. Nothing, and it is the plain question it always was.
+   */
+  function openRefs(read) {
+    refCandidates = read.conflicts.length ? read.conflicts : read.loose.slice(0, 4);
+    refMode = read.conflicts.length ? 'confirm' : read.loose.length ? 'suggest' : 'ask';
+    refOpen = true;
+    if (refCandidates.length) {
+      // One contested value: pre-fill it so they only choose what it is. Two
+      // or more: pick nothing, because picking is the question.
+      if (refCandidates.length === 1) takeCandidate(refCandidates[0]);
+      else {
+        refValue = '';
+        const [first] = refCandidates;
+        const same = refCandidates.every((c) => c.kinds.length === 1 && c.kinds[0].key === first.kinds[0].key);
+        refChoice = same ? first.kinds[0].key : null;
+      }
+    } else {
+      refChoice = refChoice || refConfig.fields[0].key;
+    }
+    drawRefs();
   }
 
   /**
    * Whether Send should stop and ask.
    *
-   * True at most once per report. The question is skippable on an `optional`
-   * project and not on a `required` one, and on both the answer to "have we
-   * already got one" is read from the text every time — somebody who types the
-   * loan number into the description after being asked has answered the
-   * question, and being asked again would be the widget not listening.
+   * Never when the text answered it outright. Once when the text said two
+   * things or something unlabelled — on every policy, because sending the
+   * wrong record's id with confidence is worse than one extra tap. And the
+   * plain question on `optional`/`required` projects as before.
    */
   function needsReference() {
     if (refConfig.policy === 'off' || !refConfig.fields.length) return false;
-    if (referencesInText().length) return false;
     if (answeredReference().length) return false;
-    return !refSettled || refConfig.policy === 'required';
+    const read = readText();
+    if (textAnswers(read)) return false;
+    if (refSettled && refConfig.policy !== 'required') return false;
+    return read;
   }
 
   /* ---------- send ---------- */
@@ -1518,10 +2019,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;
     }
 
@@ -1530,9 +2029,18 @@ function openPanel({ root, host, dock, client, onClose }) {
     // costs one extra press on projects that want an identifier, and it is the
     // only shape that does not put paperwork in front of a person who came here
     // to say something is broken.
-    if (needsReference()) {
-      refChoice = refChoice || refConfig.fields[0].key;
+    //
+    // First, though: a value in the box but no kind picked. Asked rather than
+    // guessed — a wrong kind joins on the wrong table.
+    if (refOpen && refValue.trim() && !refChoice) {
+      refError = 'Pick what this ID is.';
       drawRefs();
+      return;
+    }
+
+    const read = needsReference();
+    if (read) {
+      if (!refOpen) openRefs(read); else drawRefs();
       say('');
       return;
     }
@@ -1559,12 +2067,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
@@ -1811,7 +2319,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>
@@ -1828,7 +2336,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>
@@ -1962,7 +2470,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
@@ -2112,16 +2620,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);
 
@@ -2129,8 +2633,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;
     }
 
@@ -2138,16 +2642,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));
@@ -2169,16 +2676,15 @@ function openPanel({ root, host, dock, client, onClose }) {
    */
   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>${fresh ? 'Looking into it' : 'Your report'}</h2>
-          <p>${fresh ? 'Our assistant is investigating — it may ask you a question.' : '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);
@@ -2195,8 +2701,9 @@ function openPanel({ root, host, dock, client, onClose }) {
     if (!body || !panel.querySelector('[data-act="back"]')) return false;
 
     if (!report) {
-      if (fresh) return false;
-      body.innerHTML = '<div class="empty">Couldn\'t load that report just now.</div>';
+      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;
     }
 
@@ -2205,7 +2712,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>
@@ -2220,13 +2729,17 @@ 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;
   }
 
@@ -2240,25 +2753,83 @@ function openPanel({ root, host, dock, client, onClose }) {
   function mountAssistant(body, report, bugId) {
     clearTimeout(assistantTimer);
     const a = report.assistant;
-    body.querySelector('.assistant')?.remove();
-    if (!a) return;
-    const card = document.createElement('div');
+    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.setAttribute('role', 'status');
-    card.setAttribute('aria-live', 'polite');
-    card.innerHTML = `
-      <div class="as-top">
-        <span class="as-orb" aria-hidden="true">${a.phase === 'analyzing' ? '<span class="as-spin"></span>' : '✦'}</span>
-        <div class="as-text">
-          <div class="as-title">${escapeHtml(a.title)}</div>
-          <div class="as-detail">${escapeHtml(a.detail)}</div>
+    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 === 'calling' ? ICONS.phone
+              : 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>
-      <ol class="as-steps">${(a.steps || []).map((st) => `<li class="${escapeHtml(st.state)}"><span></span>${escapeHtml(st.label)}</li>`).join('')}</ol>`;
-    body.querySelector('.report-head')?.after(card);
+      ${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.
+    // Never during a call: somebody is on the phone about this report, nothing
+    // is being analysed (the analysis waits for the transcript), and a bubble
+    // typing away underneath a live call is the assistant talking over them.
+    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') {
+    } else if (a.phase === 'calling') {
+      // Slower: the call's own card is what the reporter is watching, and this
+      // only has to notice when the call ends and the analysis begins.
+      assistantTimer = setTimeout(() => refreshThread(bugId), 10000);
+    } else if (a.phase === 'needs_info' && previous !== 'needs_info') {
       body.querySelector('.composer textarea')?.focus();
     }
   }
@@ -2298,9 +2869,15 @@ function openPanel({ root, host, dock, client, onClose }) {
     if (!report || openReportId !== bugId) return;
 
     mountVerification(body, report);
-    mountAssistant(body, report, bugId);
     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.
@@ -2328,8 +2905,9 @@ function openPanel({ root, host, dock, client, onClose }) {
       <div class="staged" hidden></div>
       <div class="row">
         <div class="tools">
+          ${cfg.attachments === false ? '' : `
           <button class="tool" type="button" data-act="attach" title="Attach a file" aria-label="Attach a file">${ICONS.paperclip}</button>
-          <button class="tool" type="button" data-act="voice" title="Record a voice note" aria-label="Record a voice note">${ICONS.mic}</button>
+          <button class="tool" type="button" data-act="voice" title="Record a voice note" aria-label="Record a voice note">${ICONS.mic}</button>`}
           <button class="tool" type="button" data-act="livecall" title="Call the team" aria-label="Call the team" hidden>${ICONS.phone}</button>
         </div>
         <textarea rows="1" placeholder="Write a reply…" aria-label="Write a reply"></textarea>
@@ -2409,7 +2987,11 @@ function openPanel({ root, host, dock, client, onClose }) {
       }
     });
 
-    composer.querySelector('[data-act="attach"]').addEventListener('click', () => picker.click());
+    // Absent when the host set `attachments: false` — which the report form
+    // has always honoured and this composer did not, so a host keeping files
+    // and microphone audio outside its compliance perimeter still had both
+    // offered in the follow-up thread.
+    composer.querySelector('[data-act="attach"]')?.addEventListener('click', () => picker.click());
     picker.addEventListener('change', () => {
       say('');
       for (const file of picker.files) {
@@ -2422,12 +3004,12 @@ function openPanel({ root, host, dock, client, onClose }) {
       picker.value = '';
     });
 
-    if (!voiceSupported()) {
+    if (voiceBtn && !voiceSupported()) {
       voiceBtn.disabled = true;
       voiceBtn.title = 'This browser cannot record audio';
     }
 
-    voiceBtn.addEventListener('click', async () => {
+    voiceBtn?.addEventListener('click', async () => {
       if (recorder) {
         const handle = recorder;
         recorder = null;
@@ -2503,7 +3085,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({
@@ -2546,6 +3128,7 @@ function openPanel({ root, host, dock, client, onClose }) {
       <span class="call-dot" aria-hidden="true"></span>
       <span class="who" role="status" aria-live="polite">Calling the team…</span>
       <span class="secs" hidden></span>
+      ${handle?.recorded ? '<span class="call-kept">This call is recorded.</span>' : ''}
       <button class="act" type="button" data-act="mute" hidden>Mute</button>
       <button class="act danger" type="button" data-act="hangup">Cancel</button>`;
     body.insertBefore(bar, thread);
@@ -2653,14 +3236,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 || ''}`;
 }
 
 /**
@@ -2671,15 +3278,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
@@ -2703,30 +3312,133 @@ 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)
+  // The assistant's one answer ends by inviting a correction (check-rules
+  // confirmMessage). One tap sends it, and what comes back goes to the person
+  // who now owns the report rather than to another automated round — so the
+  // wording is "that's right" and "that's not it", not a yes/no question.
+  const confirm = automated && /it goes to the same person/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="No, that is not the problem">No, it's something else</button>
+        <button type="button" data-quick="Yes, this is the problem">${ICONS.check}That's right</button>
+        <button type="button" data-quick="No, that is not the problem">That's not it</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.
  *
@@ -2761,8 +3473,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. */