@helpway/react 0.13.2 → 0.14.0

package/src/themed/styles.css

@@ -66,17 +66,17 @@
 	--hw-focus-ring: rgba(0, 0, 0, 0.06);
 	--hw-accent: #6366f1;
 	--hw-bg: #ffffff;
-	--hw-bg-subtle: #fafafa;
-	--hw-bg-hover: #f5f5f5;
-	--hw-border: #f0f0f0;
+	--hw-bg-subtle: #fafaf9;
+	--hw-bg-hover: #f5f5f4;
+	--hw-border: #ebe9e5;
 	--hw-border-md: #e5e5e5;
-	--hw-text: #111;
+	--hw-text: #1c1b19;
 	--hw-text-1: #111;
 	--hw-text-2: #666;
-	--hw-text-3: #999;
-	--hw-text-4: #bbb;
-	--hw-radius: 16px;
-	--hw-visitor-bubble-bg: #f0f0f0;
+	--hw-text-3: #8a847c;
+	--hw-text-4: #a8a29a;
+	--hw-radius: 20px;
+	--hw-visitor-bubble-bg: #f5f5f4;
 	--hw-visitor-bubble-text: #1a1a1a;
 	/* Widget font stack. Consumers can override by setting --hw-font
 	   on the `.hw-widget` element. Was `inherit` previously, which
@@ -534,7 +534,7 @@
 .hw-header {
 	display: flex;
 	align-items: center;
-	padding: 12px 16px;
+	padding: 14px 12px 14px 16px;
 	background: var(--hw-primary);
 	color: white;
 	flex-shrink: 0;
@@ -546,7 +546,8 @@
 	justify-content: space-between;
 	background: transparent;
 	color: var(--hw-text);
-	border-bottom: 1px solid var(--hw-border);
+	/* no rule under the header — the thread just changes ground */
+	border-bottom: 0;
 }
 
 .hw-header-back {
@@ -581,14 +582,14 @@
 }
 
 .hw-header-bot-icon {
-	width: 28px;
-	height: 28px;
+	width: 32px;
+	height: 32px;
 	flex-shrink: 0;
 	color: var(--hw-text);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: 8px;
+	border-radius: 9px;
 	/* Two-tier fallback so site overrides still win cleanly:
 	   1. Site stylesheet → `--hw-agent-bg` (highest priority)
 	   2. Widget smart default → `--hw-agent-bg-default` (set when the
@@ -644,13 +645,13 @@
 }
 
 .hw-header-name {
-	font-size: 14px;
+	font-size: 15px;
 	font-weight: 600;
 	line-height: 1.3;
 }
 
 .hw-header-status {
-	font-size: 12px;
+	font-size: 11px;
 	color: var(--hw-text-3);
 	line-height: 1.3;
 }
@@ -692,7 +693,8 @@
 	justify-content: space-between;
 	background: transparent;
 	color: var(--hw-text);
-	border-bottom: 1px solid var(--hw-border);
+	/* no rule under the header — the thread just changes ground */
+	border-bottom: 0;
 }
 .hw-header--centered .hw-header-title {
 	position: absolute;
@@ -714,7 +716,8 @@
 	justify-content: space-between;
 	background: transparent;
 	color: var(--hw-text);
-	border-bottom: 1px solid var(--hw-border);
+	/* no rule under the header — the thread just changes ground */
+	border-bottom: 0;
 }
 .hw-header-title {
 	font-size: 16px;
@@ -767,7 +770,8 @@
 	padding: 14px 16px;
 	border-radius: 14px;
 	background: var(--hw-bg);
-	border: 1px solid rgba(0, 0, 0, 0.06);
+	border: 0;
+	box-shadow: inset 0 0 0 1px var(--hw-border);
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
 	cursor: pointer;
 	/* Scoped box-shadow + transform on strong ease-out. Hover raises
@@ -840,7 +844,8 @@
 .hw-recent-card {
 	border-radius: 14px;
 	background: var(--hw-bg);
-	border: 1px solid rgba(0, 0, 0, 0.06);
+	border: 0;
+	box-shadow: inset 0 0 0 1px var(--hw-border);
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
 	overflow: hidden;
 }
@@ -952,7 +957,8 @@
 	padding: 14px 16px;
 	border-radius: 14px;
 	background: var(--hw-bg);
-	border: 1px solid rgba(0, 0, 0, 0.06);
+	border: 0;
+	box-shadow: inset 0 0 0 1px var(--hw-border);
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
 	cursor: pointer;
 	transition: box-shadow 0.15s, transform 0.1s;
@@ -1211,11 +1217,11 @@
 	flex: 1;
 	overflow-y: auto;
 	overflow-x: hidden; /* Mobile safeguard — a single stray overflow would create horizontal scroll */
-	padding: 16px 20px;
+	padding: 16px 14px 8px;
 	background: var(--hw-bg-subtle);
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: 14px;
 	overscroll-behavior: contain;
 	/* Flex column with constrained children — min-width:0 allows children to
      honor their own max-width rather than inflating to content width. */
@@ -1357,7 +1363,7 @@
 
 .hw-msg-bubble {
 	padding: 10px 14px;
-	border-radius: 18px;
+	border-radius: 16px;
 	font-size: 14px;
 	line-height: 1.45;
 	white-space: pre-wrap;
@@ -1413,7 +1419,8 @@
 	font-weight: 500;
 	padding: 6px 14px;
 	border-radius: 18px;
-	border: 1px solid rgba(0, 0, 0, 0.12);
+	border: 0;
+	box-shadow: inset 0 0 0 1px var(--hw-border);
 	background: var(--hw-bg, #fff);
 	color: var(--hw-text-1, #1a1a1a);
 	cursor: pointer;
@@ -1504,21 +1511,13 @@
 	animation: hw-msg-appear 0.25s ease-out;
 }
 
-.hw-typing-label {
-	font-size: 11px;
-	font-weight: 500;
-	color: var(--hw-text-3);
-	padding: 0 4px;
-}
-
+/* Bare dots, no bubble. The answer they precede is not in a bubble either, so
+   a filled rounded rectangle here read as a message that never arrived. */
 .hw-typing-dots {
 	display: flex;
 	gap: 3px;
-	padding: 10px 14px;
+	padding: 6px 2px;
 	width: fit-content;
-	background: var(--hw-visitor-bubble-bg);
-	border-radius: var(--hw-radius);
-	border-bottom-left-radius: 4px;
 }
 
 .hw-typing-dot {
@@ -1833,13 +1832,19 @@
    EMAIL COLLECTION CARD (fixed above composer)
    ════════════════════════════════════════════════ */
 
+/* The ask reads as the agent's last line, so it is built like one: no card, no
+   border, no ground of its own, and the width a message gets rather than the full
+   width of the panel. It used to be a bordered form pinned under the thread, which
+   put a second input directly above the composer — two places to type, one of them
+   looking like chrome the panel had grown. */
 .hw-email-card {
-	margin: 0 12px;
-	padding: 14px 16px 10px;
-	border: 1px solid var(--hw-border, rgba(0,0,0,0.08));
-	border-radius: 14px;
-	background: var(--hw-bg, #fff);
-	box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.03);
+	max-width: min(100%, 340px);
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	background: none;
+	box-shadow: none;
 	animation: hw-email-slide-in 0.25s ease-out;
 }
 
@@ -1848,28 +1853,9 @@
 	to   { opacity: 1; transform: translateY(0); }
 }
 
-.hw-email-card-header {
-	display: flex;
-	align-items: flex-start;
-	gap: 10px;
-	margin-bottom: 12px;
-}
-
-.hw-email-card-icon {
-	flex-shrink: 0;
-	width: 32px;
-	height: 32px;
-	border-radius: 8px;
-	background: var(--hw-bg-hover, #f5f5f5);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--hw-text, #1a1a1a);
-}
-
 .hw-email-card-title {
-	font-size: 13px;
-	font-weight: 600;
+	font-size: 14px;
+	font-weight: 550;
 	color: var(--hw-text, #1a1a1a);
 	line-height: 1.3;
 	margin: 0 0 2px;
@@ -1882,65 +1868,72 @@
 	margin: 0;
 }
 
-.hw-email-card-input {
-	width: 100%;
-	padding: 9px 12px;
-	border-radius: 10px;
+/* Field and submit share one row, and the row is the only control in the card. */
+.hw-email-card-row {
+	max-width: 300px;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin-top: 9px;
+	padding: 3px 3px 3px 12px;
+	border-radius: 999px;
 	border: 1px solid var(--hw-border, rgba(0,0,0,0.1));
 	background: var(--hw-bg-subtle, #fafafa);
+	transition: border-color 0.15s, box-shadow 0.15s;
+}
+.hw-email-card-row:focus-within {
+	border-color: var(--hw-focus-border, rgba(0,0,0,0.2));
+	box-shadow: 0 0 0 2px var(--hw-focus-ring, rgba(0,0,0,0.06));
+}
+.hw-email-card-input {
+	flex: 1;
+	min-width: 0;
+	padding: 6px 0;
+	border: 0;
+	background: transparent;
 	color: var(--hw-text, #1a1a1a);
+	font: inherit;
 	font-size: 13px;
 	outline: none;
-	margin-bottom: 8px;
-	box-sizing: border-box;
-	transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .hw-email-card-input::placeholder {
 	color: var(--hw-text-3, #999);
 }
 
-.hw-email-card-input:focus {
-	border-color: var(--hw-focus-border, rgba(0,0,0,0.2));
-	box-shadow: 0 0 0 2px var(--hw-focus-ring, rgba(0,0,0,0.06));
-}
-
-.hw-email-card-input--error {
+/* The error lands on the row, since the row is what looks like the field now. */
+.hw-email-card-row:has(.hw-email-card-input--error) {
 	border-color: #ef4444;
 }
 
 .hw-email-card-submit {
-	width: 100%;
-	padding: 9px;
-	border-radius: 10px;
+	flex: none;
+	display: grid;
+	place-items: center;
+	width: 28px;
+	height: 28px;
 	border: none;
+	border-radius: 50%;
 	background: var(--hw-brand, #0a0a0a);
 	color: var(--hw-on-brand, #fff);
-	font-size: 13px;
-	font-weight: 500;
 	cursor: pointer;
-	transition: opacity 0.15s;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 6px;
+	transition: opacity 0.15s, transform 0.15s;
 }
 
 .hw-email-card-submit:hover:not(:disabled) {
-	opacity: 0.88;
+	transform: scale(1.06);
 }
 
 .hw-email-card-submit:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
+	opacity: 0.45;
+	cursor: default;
 }
 
 .hw-email-card--success {
 	display: flex;
 	align-items: center;
-	justify-content: center;
 	gap: 6px;
-	padding: 10px 16px;
+	padding: 2px 0;
 	font-size: 13px;
 	color: var(--hw-text-2, #888);
 	animation: hw-email-slide-in 0.2s ease-out;
@@ -1969,7 +1962,8 @@
 .hw-composer-box {
 	display: flex;
 	flex-direction: column;
-	border: 2px solid var(--hw-border-md);
+	border: 0;
+	box-shadow: inset 0 0 0 1px var(--hw-border);
 	border-radius: 16px;
 	overflow: hidden;
 	transition: border-color 0.2s;
@@ -2342,7 +2336,11 @@
 
 .hw-hover-preview {
 	position: fixed;
-	z-index: 99998;
+	/* Above the widget, not merely above the page. This portals into
+	   document.body as a SIBLING of .hw-widget, and the docked root declares
+	   z-index 2147483000 — so 99998 put the preview behind the very panel
+	   whose image you were hovering. Sibling comparison, so one more wins. */
+	z-index: 2147483001;
 	padding: 6px;
 	border-radius: 14px;
 	background: white;
@@ -2770,6 +2768,16 @@
 	height: 16px;
 }
 
+/* A real person's photo fills the circle; the mark stays a 16px glyph inside
+   it. Without this the uploaded avatar rendered at its natural size and burst
+   out of the 28px puck. */
+.hw-preview-avatar img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	display: block;
+}
+
 .hw-preview-name {
 	font-size: 13px;
 	font-weight: 600;
@@ -2937,7 +2945,8 @@
 .hw-whats-new {
 	border-radius: 14px;
 	background: var(--hw-bg);
-	border: 1px solid rgba(0, 0, 0, 0.06);
+	border: 0;
+	box-shadow: inset 0 0 0 1px var(--hw-border);
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
 	overflow: hidden;
 }
@@ -4369,3 +4378,1152 @@
 		border-color: var(--hw-border);
 	}
 }
+
+/* ── Docked placement ──────────────────────────────────────────────────
+   The bar is pinned to the foot of the page and IS the composer, so the
+   panel above it renders without one. Ported from the design bench at
+   docs/prototypes/widget-bench.html; geometry verified there against a
+   real 1440x900 page. */
+
+.hw-widget[data-hw-placement="docked"] {
+	--hw-dock-width: 600px;
+	/* Folded away, the bar carries only a placeholder and three small tools, and
+	   at the panel's full measure it read as a wide empty trough across the page.
+	   Open, it goes back to --hw-dock-width so the pair still reads as one
+	   column. */
+	--hw-dock-bar-width: 480px;
+	--hw-dock-inset: 24px;
+	--hw-bar-max-height: 148px;
+	/* The docked shell owns its surface rather than inheriting --hw-bg, so
+	   the bar and the pills read as one family even when a host page
+	   themes the panel. It still has to follow the widget's appearance —
+	   a black bar under a white panel is two products, not one. Light by
+	   default; the dark values live with the rest of the dark tokens. */
+	--hw-dock-surface: #ffffff;
+	--hw-dock-on-surface: #111111;
+	/* The pills sit over page content, not over the bar, so they need a scrim of
+	   their own — but a near-black scrim made three floating slabs that read as
+	   the loudest thing on the page, louder than the composer they belong to.
+	   Light grey with dark ink keeps them legible over whatever is behind them
+	   while staying subordinate: they are offers, not the answer. */
+	--hw-dock-pill-bg: rgba(44, 44, 48, 0.66);
+	--hw-dock-pill-fg: rgba(255, 255, 255, 0.94);
+	--hw-dock-pill-border: rgba(255, 255, 255, 0.14);
+}
+
+/* The root carries z-index 999999 and is therefore a stacking context, so
+   the dock's 2147483000 was capped by it — the declared value was a lie.
+   Lift the root for this placement so the number means what it says. */
+.hw-widget[data-hw-placement="docked"] {
+	z-index: 2147483000;
+}
+
+.hw-widget[data-hw-placement="docked"] .hw-dock {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: var(--hw-dock-inset);
+	z-index: 2147483000;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	pointer-events: none;
+}
+.hw-widget[data-hw-placement="docked"] .hw-dock > * {
+	pointer-events: auto;
+}
+
+/* Nothing is open yet, so there is no panel to put the ways-in inside.
+   Pills over the page read as the agent offering; a panel would read as
+   the agent demanding attention. */
+.hw-dock-suggestions {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 9px;
+	/* Above the folded bar, so it takes the bar's measure too. */
+	width: var(--hw-dock-bar-width, var(--hw-dock-width));
+	max-width: calc(100vw - 32px);
+	margin-bottom: 14px;
+}
+/* The pill and its dismiss are siblings in one row so the × sits outside the
+   button's hit area — nesting a button in a button is invalid, and a click on the
+   inner one would still send the outer one's question. The row carries the entrance
+   animation so both parts arrive together. */
+.hw-dock-pill-row {
+	align-self: flex-start;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	animation: hw-dock-pill-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;
+}
+/* One × for the whole offer, sitting beside the first pill. Hidden until the visitor
+   reaches into the group, because it is an escape hatch and not a decision they are
+   being asked to make. Revealed by hovering ANY pill, not just the first — the control
+   closes all of them, so it has to be reachable from all of them. Focus matters as much
+   as hover: opacity 0 alone would leave a keyboard user tabbing to something invisible. */
+.hw-dock-pill-dismiss {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	flex-shrink: 0;
+	padding: 0;
+	/* Bare glyph. Given a pill's own fill and border it read as a second, smaller pill
+	   sitting next to the first — two controls of equal weight, when one of them is an
+	   escape hatch that is meant to be found rather than offered. */
+	border: 0;
+	background: none;
+	color: var(--hw-dock-pill-fg);
+	cursor: pointer;
+	/* Riding slightly above the pill's centre line. Optically centred sits low next to
+	   a rounded pill, because the eye reads the mark against the cap height of the text
+	   beside it rather than against the pill's full height. */
+	align-self: flex-start;
+	margin-top: 8px;
+	opacity: 0;
+	transform: scale(0.85);
+	transition:
+		opacity 0.12s linear,
+		transform 0.12s cubic-bezier(0.25, 1, 0.5, 1),
+		color 0.12s linear;
+}
+.hw-dock-pill-dismiss svg {
+	width: 11px;
+	height: 11px;
+}
+.hw-dock-suggestions:hover .hw-dock-pill-dismiss,
+.hw-dock-suggestions:focus-within .hw-dock-pill-dismiss {
+	opacity: 1;
+	transform: none;
+}
+.hw-dock-pill-dismiss:hover {
+	color: var(--hw-dock-on-surface);
+}
+@media (prefers-reduced-motion: reduce) {
+	.hw-dock-pill-dismiss {
+		transition: none;
+	}
+}
+/* Pointer-only hover cannot reveal anything on a touch screen, so there the × is
+   simply always there. */
+@media (hover: none) {
+	.hw-dock-pill-dismiss {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+.hw-dock-pill {
+	align-self: flex-start;
+	padding: 10px 18px;
+	/* A hairline is what separates a light pill from the light page behind it. */
+	border: 1px solid var(--hw-dock-pill-border, transparent);
+	border-radius: 999px;
+	cursor: pointer;
+	font: inherit;
+	font-size: 14px;
+	font-weight: 500;
+	text-align: left;
+	background: var(--hw-dock-pill-bg);
+	color: var(--hw-dock-pill-fg);
+	backdrop-filter: blur(10px) saturate(1.2);
+	-webkit-backdrop-filter: blur(10px) saturate(1.2);
+	/* Lift, not drama: enough shadow to sit above the page, not enough to compete
+	   with the composer. The old -8px/0.45 spread belonged to a black pill. */
+	box-shadow: 0 4px 14px -8px rgba(12, 11, 10, 0.28);
+	/* The entrance belongs to .hw-dock-pill-row now — the row carries the stagger
+	   delay, and animating both would slide the pill inside its own row. */
+	transition:
+		background 0.16s,
+		border-color 0.16s,
+		transform 0.16s;
+}
+/* Glass, like the panel and the toast: the pills sit over article text, and a
+   flat translucent fill lets that text read straight through the label. */
+.hw-dock-pill {
+	backdrop-filter: blur(18px);
+	-webkit-backdrop-filter: blur(18px);
+}
+.hw-dock-pill:hover {
+	background: color-mix(in srgb, var(--hw-dock-pill-bg) 100%, var(--hw-dock-on-surface) 8%);
+	border-color: color-mix(in srgb, var(--hw-dock-pill-border) 100%, var(--hw-dock-on-surface) 10%);
+	transform: translateX(3px);
+}
+@keyframes hw-dock-pill-in {
+	from { opacity: 0; transform: translateY(10px) scale(0.97); }
+	to { opacity: 1; transform: none; }
+}
+
+/* Narrower at rest, the panel's measure once open — see --hw-dock-bar-width. */
+.hw-dock-bar {
+	display: flex;
+	align-items: flex-end;
+	gap: 10px;
+	width: var(--hw-dock-bar-width, var(--hw-dock-width));
+	max-width: calc(100vw - 32px);
+	min-height: 52px;
+	padding: 10px 10px 10px 18px;
+	border: 0;
+	border-radius: 26px;
+	background: var(--hw-dock-surface);
+	color: var(--hw-dock-on-surface);
+	box-shadow:
+		inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),
+		0 0 0 1px color-mix(in srgb, var(--hw-dock-on-surface) 7%, transparent),
+		0 2px 6px rgba(12, 11, 10, 0.18),
+		0 20px 48px -14px rgba(12, 11, 10, 0.45);
+	/* Only the ring warms on focus — the ground never changes, so one
+	   property transitions instead of the whole field flashing. Width joins it on
+	   the panel's own curve: the bar snapping from 480 to 600 the instant the
+	   panel appeared read as two separate things moving, rather than one column
+	   widening. */
+	transition:
+		border-radius 0.18s ease,
+		box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+		width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.hw-dock-bar:focus-within {
+	box-shadow:
+		inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),
+		0 0 0 1px color-mix(in srgb, var(--hw-primary, #fb923c) 60%, transparent),
+		0 2px 6px rgba(12, 11, 10, 0.18),
+		0 20px 48px -14px rgba(12, 11, 10, 0.45);
+}
+/* The shape follows the content instead of snapping. */
+.hw-dock-bar[data-grown="true"] { border-radius: 20px; }
+
+.hw-dock-input {
+	flex: 1;
+	min-width: 0;
+	min-height: 20px;
+	max-height: var(--hw-bar-max-height);
+	padding: 6px 0;
+	border: 0;
+	outline: none;
+	resize: none;
+	overflow-y: auto;
+	background: transparent;
+	color: var(--hw-dock-on-surface);
+	font: inherit;
+	font-size: 14px;
+	line-height: 1.45;
+	transition: height 0.12s ease;
+}
+.hw-dock-input::placeholder {
+	color: color-mix(in srgb, var(--hw-dock-on-surface) 45%, transparent);
+}
+
+.hw-dock-send {
+	flex: none;
+	width: 32px;
+	height: 32px;
+	margin-bottom: 1px;
+	border: 0;
+	border-radius: 50%;
+	display: grid;
+	place-items: center;
+	cursor: pointer;
+	background: var(--hw-primary, #fb923c);
+	color: var(--hw-on-brand, #fff);
+	transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s;
+}
+.hw-dock-send:hover:not(:disabled) { transform: scale(1.06); }
+.hw-dock-send:disabled { opacity: 0.45; cursor: default; }
+
+/* The panel sits above the bar and carries neither composer nor tabs. */
+/* .hw-widget is a 20x20 fixed box in the page corner and .hw-window is
+   absolute inside it, so centring on `left: 50%` centres on that box —
+   i.e. the corner. The docked panel has to leave that coordinate space
+   and centre on the viewport. margin-left rather than a transform,
+   because .hw-window animates transform on open and the two would fight. */
+.hw-widget[data-hw-placement="docked"] .hw-window {
+	position: fixed;
+	left: 50%;
+	right: auto;
+	margin-left: calc(var(--hw-dock-width) / -2);
+	bottom: calc(var(--hw-dock-inset) + 66px);
+	width: var(--hw-dock-width);
+	max-width: calc(100vw - 32px);
+	height: 420px;
+}
+@media (max-width: 640px) {
+	.hw-widget[data-hw-placement="docked"] .hw-window {
+		left: 16px;
+		right: 16px;
+		margin-left: 0;
+		width: auto;
+	}
+}
+.hw-widget[data-hw-placement="docked"] .hw-bubble { display: none; }
+
+/* ── Open state ────────────────────────────────────────────────────────────
+   Panel and bar stay two objects, deliberately.
+
+   They were merged into one card for a while — the bar squared its top corners
+   and slid up against the panel's foot. It read as one surface until you looked
+   at the seam: two elements with their own 1px rings, meeting on a line neither
+   owned, so the ring of the wider-shadowed one printed a hairline past the
+   other's edge. Fixing the seam meant reconciling two shadow systems for a join
+   that was never load-bearing.
+
+   Separate is also what the reference does, and it is truer: the bar belongs to
+   the page (it is there before any thread exists and stays after this one folds
+   away), the panel belongs to the conversation. Keeping the gap says so, and the
+   composer keeps its pill — the shape that invited the first message.
+
+   Open, the panel only has to clear the bar: the dock's inset, the bar itself
+   (52px min-height), and the air between the two. There used to be a fourth term
+   for the attribution line under the bar — that line is gone, and so is the term. */
+.hw-widget[data-hw-placement="docked"][data-hw-open="true"] .hw-window {
+	bottom: calc(var(--hw-dock-inset) + 52px + 12px);
+}
+/* The suggestion pills belong to the closed state: they are the ways in. Once a
+   thread exists the panel carries the conversation, so a stack of pills between
+   the panel and its own composer would be arguing with it. */
+.hw-widget[data-hw-placement="docked"][data-hw-open="true"] .hw-dock-suggestions {
+	display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.hw-dock-pill, .hw-dock-bar, .hw-dock-input, .hw-dock-send { animation: none; transition: none; }
+}
+
+/* The bar is the composer, so the panel above it carries neither its own
+   composer nor the tab bar. */
+.hw-widget[data-hw-placement="docked"] .hw-composer,
+.hw-widget[data-hw-placement="docked"] .hw-tabs,
+.hw-widget[data-hw-placement="docked"] .hw-footer-tabs {
+	display: none;
+}
+
+/* Starters — offered under the greeting until the visitor speaks. A blank
+   thread with a blank field is a dead end; three labelled ways in are not.
+   Ported from the bench (docs/prototypes/widget-bench.html). */
+/* One card, hairline-separated rows — the Fin shape. Three separately
+   ringed boxes stacked with a gap read as three unrelated controls; a
+   single grouped surface reads as one list you pick from. */
+.hw-starters {
+	display: flex;
+	flex-direction: column;
+	margin-top: 10px;
+	border-radius: 14px;
+	overflow: hidden;
+	background: var(--hw-bg);
+	box-shadow: inset 0 0 0 1px var(--hw-border);
+}
+.hw-starter {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	padding: 11px 14px;
+	border: 0;
+	border-radius: 0;
+	cursor: pointer;
+	background: transparent;
+	color: var(--hw-text);
+	font: inherit;
+	text-align: left;
+	animation: hw-starter-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+	transition: background 0.12s;
+}
+/* Separator on the row, not the container, so it never draws under the last
+   one and never doubles up against the card's own ring. */
+.hw-starter + .hw-starter {
+	box-shadow: inset 0 1px 0 var(--hw-border);
+}
+.hw-starter:hover {
+	background: var(--hw-bg-hover);
+}
+.hw-starter-text {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 1px;
+}
+.hw-starter-k {
+	font-size: 13px;
+	font-weight: 550;
+	line-height: 1.35;
+	color: var(--hw-text);
+}
+.hw-starter-q {
+	font-size: 12px;
+	line-height: 1.35;
+	color: var(--hw-text-3, var(--hw-text-muted));
+}
+.hw-starter svg {
+	flex: none;
+	color: var(--hw-text-3, var(--hw-text-muted));
+	opacity: 0.45;
+	transition: opacity 0.15s, transform 0.15s;
+}
+.hw-starter:hover svg { opacity: 0.9; transform: translateX(2px); }
+@keyframes hw-starter-in {
+	from { opacity: 0; transform: translateY(6px); }
+	to { opacity: 1; transform: none; }
+}
+
+/* The docked panel is one surface deep — there is nothing to go back to,
+   the bar is always right there. */
+.hw-widget[data-hw-placement="docked"] .hw-header-back { display: none; }
+
+@media (prefers-reduced-motion: reduce) {
+	.hw-starter { animation: none; }
+}
+
+
+/* Docked shell in dark. Guarded like every other dark block so an explicit
+   data-theme="light" still wins. */
+@media (prefers-color-scheme: dark) {
+	.hw-widget:not([data-theme="light"])[data-hw-placement="docked"] {
+		--hw-dock-surface: #1f1f23;
+		--hw-dock-on-surface: #f4f4f6;
+		--hw-dock-pill-bg: rgba(255, 255, 255, 0.1);
+		--hw-dock-pill-fg: #e4e4e7;
+		--hw-dock-pill-border: rgba(255, 255, 255, 0.14);
+	}
+}
+.hw-widget[data-theme="dark"][data-hw-placement="docked"] {
+	--hw-dock-surface: #1f1f23;
+	--hw-dock-on-surface: #f4f4f6;
+}
+
+/* ── Docked panel: one glass card ──────────────────────────────────────────
+   The docked shell lives on a documentation page, over prose the reader chose
+   to be on. A second opaque white card on a white page is a page fighting
+   itself: two grounds at the same depth, neither obviously on top.
+
+   So the panel is glass. It picks up whatever it is over — white body copy at
+   the top of the viewport, a tinted section lower down — which is what makes it
+   read as floating ABOVE the page rather than punched INTO it, and it keeps the
+   article visible enough that the reader has not lost their place.
+
+   Glass forces the palette: dark ink on 60%-transparent grey is unreadable over
+   dark page content, so the panel flips its own token block to a light-on-dark
+   set. Tokens rather than per-component overrides — every child already reads
+   through them, and the alternative is finding all forty of them by hand. */
+.hw-widget[data-hw-placement="docked"] .hw-window {
+	--hw-bg: rgba(255, 255, 255, 0.08);
+	/* The scroller and the panel are one surface here — a second ground inside
+	   the glass would show as a rectangle floating in it. */
+	--hw-bg-subtle: transparent;
+	--hw-bg-hover: rgba(255, 255, 255, 0.1);
+	--hw-border: rgba(255, 255, 255, 0.14);
+	--hw-border-md: rgba(255, 255, 255, 0.22);
+	--hw-text: rgba(255, 255, 255, 0.94);
+	--hw-text-1: #ffffff;
+	--hw-text-2: rgba(255, 255, 255, 0.72);
+	--hw-text-3: rgba(255, 255, 255, 0.62);
+	--hw-text-4: rgba(255, 255, 255, 0.46);
+	--hw-visitor-bubble-bg: rgba(255, 255, 255, 0.16);
+	--hw-visitor-bubble-text: #ffffff;
+	/* Brand tiles and CTAs sit on the glass, not on the page, so they invert
+	   with it — a near-black avatar on dark glass is a hole. */
+	--hw-brand: rgba(255, 255, 255, 0.92);
+	--hw-on-brand: #17161a;
+	--hw-focus-border: rgba(255, 255, 255, 0.34);
+	--hw-focus-ring: rgba(255, 255, 255, 0.1);
+	height: 500px;
+	max-height: calc(100vh - 180px);
+	border-radius: 24px;
+	color: var(--hw-text);
+	/* Three stops rather than a flat fill: the card is tall enough that a single
+	   alpha reads as a grey slab, and the gradient keeps the top honest to the
+	   page behind it while the foot settles into the composer's shadow. */
+	background: linear-gradient(
+		180deg,
+		rgba(40, 40, 44, 0.72) 0%,
+		rgba(46, 46, 50, 0.7) 55%,
+		rgba(52, 52, 56, 0.68) 100%
+	);
+	/* Blur, no saturation boost. Boosting it made the glass adopt the hue of
+	   whatever it was over — over a warm page section the whole card went olive,
+	   which is a different product every time you scroll. Neutral grey holds. */
+	backdrop-filter: blur(30px);
+	-webkit-backdrop-filter: blur(30px);
+	box-shadow:
+		0 24px 60px -20px rgba(12, 11, 10, 0.5),
+		inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+/* Without blur support the same alpha would show the article straight through
+   the text. Opaque is worse-looking and still readable; unreadable is not a
+   trade we get to make. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+	.hw-widget[data-hw-placement="docked"] .hw-window {
+		background: #2c2c2e;
+	}
+}
+@media (max-width: 640px) {
+	.hw-widget[data-hw-placement="docked"] .hw-window {
+		height: min(60vh, 460px);
+	}
+}
+
+/* Header: avatar, name, dismiss. The subtitle ("usually replies in minutes")
+   is a promise the closed bar has already made — repeating it inside the panel
+   spends the header's second line on nothing and pushes the first message down.
+   One line, so the name and the glass share the weight. */
+.hw-widget[data-hw-placement="docked"] .hw-header--sub {
+	padding: 14px 12px 8px 16px;
+}
+.hw-widget[data-hw-placement="docked"] .hw-header-status {
+	display: none;
+}
+/* 640 at 16px on pure white over dark glass reads as a shout: the name is the
+   quietest thing in the header hierarchy, not the loudest. Weight carries the
+   emphasis at this size, so it drops and the tracking relaxes with it. */
+.hw-widget[data-hw-placement="docked"] .hw-header-name {
+	font-size: 15.5px;
+	font-weight: 560;
+	letter-spacing: -0.006em;
+	color: var(--hw-text-1);
+}
+
+/* Same reasoning one level down. These are list rows and inline sentences, and
+   600 on near-white makes every one of them compete with the header. */
+.hw-widget[data-hw-placement="docked"] .hw-header-menu-conv-name,
+.hw-widget[data-hw-placement="docked"] .hw-event-name {
+	font-weight: 545;
+}
+/* Round, like every other avatar in a chat surface — the 9px tile reads as a
+   product logo, and this is a person-shaped conversation. */
+.hw-widget[data-hw-placement="docked"] .hw-header-bot-icon {
+	border-radius: 50%;
+	overflow: hidden;
+}
+.hw-widget[data-hw-placement="docked"] .hw-header-close:hover,
+.hw-widget[data-hw-placement="docked"] .hw-header-menu-btn:hover {
+	background: rgba(255, 255, 255, 0.12);
+	color: #ffffff;
+}
+
+/* The thread scrolls under the header rather than stopping at a rule: a border
+   would cut the glass in two. The mask fades the last few pixels instead, so a
+   message sliding up dissolves into the header's ground. */
+.hw-widget[data-hw-placement="docked"] .hw-messages {
+	/* Wider gutters than the bubble shell: at 600px the panel is a column of
+	   prose, and prose set flush to a 600px edge reads as a wall. */
+	padding: 4px 22px 16px;
+	gap: 18px;
+	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px);
+	mask-image: linear-gradient(180deg, transparent 0, #000 16px);
+}
+
+/* An answer IS the panel's content, so it carries no bubble — a pill around
+   every reply on a glass card stacks two translucent surfaces and dulls both.
+   This holds whoever is answering: a human's reply is the same kind of content
+   as the AI's, and giving it a pill made a run of team messages read as a
+   column of grey slabs. The visitor's own message keeps its pill — with both
+   agents unboxed, the pill is what distinguishes who said what. */
+.hw-widget[data-hw-placement="docked"] .hw-msg--ai .hw-msg-bubble,
+.hw-widget[data-hw-placement="docked"] .hw-msg--team .hw-msg-bubble {
+	padding: 0;
+	background: transparent;
+	border-radius: 0;
+	/* An unboxed answer is body copy, so it carries a little more than the 14px
+	   bubble — but only a little. At 16px a four-line answer filled half the card
+	   and read as a slide rather than a reply. */
+	font-size: 15px;
+	line-height: 1.55;
+	color: var(--hw-text);
+}
+/* The agent signs the panel once, in the header. Repeating "Better AI · 10:56 PM"
+   under every reply restated the same two facts on every turn — and a multi-part
+   answer restated them three times in a row, which is how the meta line stopped
+   being read at all. A human agent keeps their line: their name is news (someone
+   took over) in a way the AI's is not. */
+.hw-widget[data-hw-placement="docked"] .hw-msg--ai .hw-msg-meta {
+	display: none;
+}
+.hw-widget[data-hw-placement="docked"] .hw-msg--visitor .hw-msg-bubble {
+	background: rgba(255, 255, 255, 0.16);
+	color: #ffffff;
+	font-size: 14.5px;
+	line-height: 1.5;
+}
+/* Code and quotes inside an answer need their own ground back — on glass the
+   6%-black wash they use in light mode is invisible. */
+.hw-widget[data-hw-placement="docked"] .hw-msg-bubble pre,
+.hw-widget[data-hw-placement="docked"] .hw-msg-bubble code {
+	background: rgba(0, 0, 0, 0.28);
+	color: var(--hw-text-1);
+}
+
+/* The gate's field reads --hw-bg-subtle, which the panel deliberately zeroes out
+   (the scroller is the glass). Left transparent it was a placeholder floating in
+   the card. The ground sits on the row now, since the row is the field. */
+.hw-widget[data-hw-placement="docked"] .hw-email-card-row {
+	background: rgba(0, 0, 0, 0.26);
+	border-color: rgba(255, 255, 255, 0.14);
+}
+/* The widget's global focus ring is `2px solid var(--hw-primary)` — the brand
+   colour, near-black by default. On the glass panel that painted a hard black
+   rectangle around whatever was focused, and around the email field it landed
+   INSIDE the pill, cutting a square through a round shape. The panel is a dark
+   surface, so its focus ring is light; the email row keeps showing focus through
+   its own border (`:focus-within`), so the field inside it does not draw a second
+   one on top. */
+.hw-widget[data-hw-placement="docked"] .hw-window :focus-visible {
+	outline-color: rgba(255, 255, 255, 0.55);
+}
+.hw-widget[data-hw-placement="docked"] .hw-email-card-input:focus,
+.hw-widget[data-hw-placement="docked"] .hw-email-card-input:focus-visible {
+	outline: none;
+	box-shadow: none;
+}
+/* Killing the outline can't take the focus state with it. The docked border-color
+   above out-specifies the base `:focus-within` rule, so the row states its own —
+   the pill brightens rather than growing a rectangle. */
+.hw-widget[data-hw-placement="docked"] .hw-email-card-row:focus-within {
+	border-color: rgba(255, 255, 255, 0.42);
+	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
+}
+.hw-widget[data-hw-placement="docked"] .hw-email-card-submit {
+	background: #ffffff;
+	color: #17161a;
+}
+
+/* The options menu opens over article text, so it is the one surface here that
+   cannot be 8% white: at that fill the preview lines read straight through to
+   whatever paragraph is behind them. */
+/* The thread was painting straight through the menu — message bubbles readable on
+   top of the conversation rows. Not transparency: a stacking bug I introduced with
+   the settle animation. Both the header and the message list animate a transform,
+   and a transformed element becomes its own stacking context painted at z-index 0,
+   so the two siblings tied and DOM order decided it — the list, coming second, won,
+   and the menu's z-index 6 was trapped inside the header's context. The header is
+   explicitly the upper layer now, which is what it always was visually. */
+.hw-widget[data-hw-placement="docked"] .hw-window .hw-header--sub {
+	position: relative;
+	z-index: 3;
+}
+/* And the menu itself is opaque. It was 90% over glass over article text — three
+   translucent layers, so the rows read as a colour rather than as a list. */
+.hw-widget[data-hw-placement="docked"] .hw-header-menu {
+	/* Lighter than the panel, not darker. The menu floats above the glass, and
+	   in a dark UI a raised surface catches more light — at #2a2a2e it sat
+	   below its own parent and read as a hole punched in the card. */
+	background: #3a3a3f;
+	box-shadow:
+		0 0 0 1px rgba(255, 255, 255, 0.16),
+		0 18px 44px -12px rgba(12, 11, 10, 0.62);
+}
+.hw-widget[data-hw-placement="docked"] .hw-header-menu button:hover {
+	background: rgba(255, 255, 255, 0.11);
+}
+.hw-widget[data-hw-placement="docked"] .hw-header-menu button.hw-header-menu-conv[data-active="true"] {
+	background: rgba(255, 255, 255, 0.09);
+}
+.hw-widget[data-hw-placement="docked"] .hw-header-menu-convs {
+	border-bottom-color: rgba(255, 255, 255, 0.12);
+}
+
+/* Team-join / assignment rows read --hw-bg-subtle for their ground, which the
+   panel zeroes out — so "Ali Osman joined the conversation" arrived as floating
+   text with no card around it. Same translucent white the other inserts use. */
+.hw-widget[data-hw-placement="docked"] .hw-event--card {
+	margin: 0;
+	background: rgba(255, 255, 255, 0.08);
+	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+.hw-widget[data-hw-placement="docked"] .hw-event-avatar {
+	background: rgba(255, 255, 255, 0.14);
+	color: var(--hw-text-1);
+}
+
+/* The email gate is an insert in the thread, so it is built from the same two
+   materials as everything else on the glass: a translucent white card and a
+   hairline. Its own light-mode shadow read as a white halo here. */
+/* Nothing to restyle on the card itself any more — it is a message, and the panel's
+   token block already covers its type. Only the field keeps a ground, below. */
+
+/* The launcher-anchored toast has no launcher to anchor to in this shell — it
+   was landing in the page corner, unrelated to the bar it belongs to. Same
+   measure and the same resting place as the panel: whatever the agent says
+   arrives in one spot, whether the panel is open or folded away. */
+.hw-widget[data-hw-placement="docked"] .hw-preview {
+	position: fixed;
+	left: 50%;
+	right: auto;
+	/* The bar's measure, not the panel's — this card only ever appears while the
+	   panel is folded away, so matching 600 left it overhanging the 480 bar it
+	   sits on top of. */
+	margin-left: calc(var(--hw-dock-bar-width, var(--hw-dock-width)) / -2);
+	bottom: calc(var(--hw-dock-inset) + 52px + 12px);
+	width: var(--hw-dock-bar-width, var(--hw-dock-width));
+	max-width: calc(100vw - 32px);
+	border: 0;
+	border-radius: 24px;
+	color: rgba(255, 255, 255, 0.94);
+	background: linear-gradient(180deg, rgba(40, 40, 44, 0.74) 0%, rgba(52, 52, 56, 0.7) 100%);
+	backdrop-filter: blur(30px);
+	-webkit-backdrop-filter: blur(30px);
+	box-shadow:
+		0 24px 60px -20px rgba(12, 11, 10, 0.5),
+		inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.hw-widget[data-hw-placement="docked"] .hw-preview-name,
+.hw-widget[data-hw-placement="docked"] .hw-preview-body {
+	color: rgba(255, 255, 255, 0.94);
+}
+.hw-widget[data-hw-placement="docked"] .hw-preview-close {
+	color: rgba(255, 255, 255, 0.6);
+}
+.hw-widget[data-hw-placement="docked"] .hw-preview-close:hover {
+	background: rgba(255, 255, 255, 0.12);
+	color: #ffffff;
+}
+.hw-widget[data-hw-placement="docked"] .hw-preview-footer {
+	color: rgba(255, 255, 255, 0.55);
+	border-top-color: rgba(255, 255, 255, 0.1);
+}
+@media (max-width: 640px) {
+	.hw-widget[data-hw-placement="docked"] .hw-preview {
+		left: 16px;
+		right: 16px;
+		margin-left: 0;
+		width: auto;
+	}
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+	.hw-widget[data-hw-placement="docked"] .hw-preview {
+		background: #2c2c2e;
+	}
+}
+
+/* "Talk to a human" is the only control the agent hands over mid-thread, and every
+   translucent-white version of it read as a slightly lighter patch of the card —
+   present, but not obviously pressable. It is opaque now: the same white the
+   composer is made of, dark ink, its own small shadow. On a card where everything
+   else is glass, the one solid object is the one you can press. */
+.hw-widget[data-hw-placement="docked"] .hw-quick-reply-btn {
+	padding: 7px 14px;
+	font-size: 13px;
+	font-weight: 550;
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.94);
+	box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);
+	color: #17161a;
+}
+.hw-widget[data-hw-placement="docked"] .hw-quick-reply-btn:hover:not(:disabled) {
+	background: #ffffff;
+	box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);
+	transform: translateY(-1px);
+}
+.hw-widget[data-hw-placement="docked"] .hw-quick-reply-btn[data-tapped="true"] {
+	background: rgba(255, 255, 255, 0.22);
+	color: #ffffff;
+	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
+	transform: none;
+}
+.hw-widget[data-hw-placement="docked"] .hw-quick-reply-btn svg {
+	opacity: 0.55;
+}
+/* The escalation offer ("Talk to a human") is the same kind of object as a quick
+   reply — the agent handing the visitor a way out — and it was reading as the same
+   washed patch, because .hw-offer takes --hw-bg-hover, which is white at 10% on
+   the glass. Same solid treatment, one rule for both so they never drift. */
+.hw-widget[data-hw-placement="docked"] .hw-offer {
+	padding: 7px 14px;
+	font-size: 13px;
+	background: rgba(255, 255, 255, 0.94);
+	color: #17161a;
+	box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);
+	transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+.hw-widget[data-hw-placement="docked"] .hw-offer:hover {
+	background: #ffffff;
+	color: #17161a;
+	box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);
+	transform: translateY(-1px);
+}
+.hw-widget[data-hw-placement="docked"] .hw-offer svg {
+	opacity: 0.55;
+}
+
+/* ── The bar is made of the same glass ─────────────────────────────────────
+   A white pill under a grey card was two materials stacked, and the giveaway was
+   its ring: --hw-dock-on-surface is near-black in light mode, so the hairline that
+   reads as a soft edge on a white page printed a hard dark line against the panel
+   above it. Same glass, and the ring inverts with it — one object in two parts.
+
+   Flipping the token on the bar rather than restyling six children: the field,
+   the placeholder, the tools and the disabled send all derive from it. */
+.hw-widget[data-hw-placement="docked"] .hw-dock-bar {
+	--hw-dock-on-surface: rgba(255, 255, 255, 0.94);
+	color: rgba(255, 255, 255, 0.94);
+	background: linear-gradient(180deg, rgba(44, 44, 48, 0.74) 0%, rgba(52, 52, 56, 0.72) 100%);
+	backdrop-filter: blur(30px);
+	-webkit-backdrop-filter: blur(30px);
+	box-shadow:
+		inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+		0 18px 40px -16px rgba(12, 11, 10, 0.45);
+}
+.hw-widget[data-hw-placement="docked"][data-hw-open="true"] .hw-dock-bar {
+	width: var(--hw-dock-width);
+}
+.hw-widget[data-hw-placement="docked"] .hw-dock-bar:focus-within {
+	box-shadow:
+		inset 0 0 0 1px rgba(255, 255, 255, 0.26),
+		0 18px 40px -16px rgba(12, 11, 10, 0.5);
+}
+/* Open, the pair reads as one object, so the bar's shadow deepens with the panel's
+   instead of each casting its own. */
+.hw-widget[data-hw-placement="docked"][data-hw-open="true"] .hw-dock-bar {
+	box-shadow:
+		inset 0 0 0 1px rgba(255, 255, 255, 0.14),
+		0 22px 52px -18px rgba(12, 11, 10, 0.52);
+}
+.hw-widget[data-hw-placement="docked"] .hw-dock-send:not(:disabled) {
+	background: #ffffff;
+	color: #17161a;
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+	.hw-widget[data-hw-placement="docked"] .hw-dock-bar {
+		background: #2c2c2e;
+	}
+}
+
+/* ── Open / close ──────────────────────────────────────────────────────────
+   The bubble shell opens with an overshoot — a launcher is a toy you poked and
+   it bounces back. The docked panel is not that: it unfolds out of a bar the
+   reader was already typing in, over prose they are still reading, so it rises
+   from the bar's edge and settles. No overshoot, transform-origin at the foot,
+   and short enough (200ms) that it never feels like waiting. */
+.hw-widget[data-hw-placement="docked"] .hw-window {
+	transform-origin: 50% 100%;
+	animation: hw-dock-panel-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hw-widget[data-hw-placement="docked"] .hw-window--closing {
+	animation: hw-dock-panel-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+@keyframes hw-dock-panel-in {
+	from { opacity: 0; transform: translateY(14px) scale(0.98); }
+	to { opacity: 1; transform: none; }
+}
+@keyframes hw-dock-panel-out {
+	from { opacity: 1; transform: none; }
+	to { opacity: 0; transform: translateY(8px) scale(0.99); }
+}
+/* The card arrives, then what is in it. Two short delays rather than one motion:
+   a panel whose header and thread land with the edge feels printed, and the eye
+   has nowhere to start. 60ms and 110ms are below the threshold where a delay
+   registers as waiting — it reads as the content settling, not as a sequence. */
+.hw-widget[data-hw-placement="docked"] .hw-window .hw-header--sub {
+	animation: hw-dock-settle 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
+}
+.hw-widget[data-hw-placement="docked"] .hw-window .hw-messages {
+	animation: hw-dock-settle 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.11s both;
+}
+/* Closing is one gesture: the parts do not leave one at a time. */
+.hw-widget[data-hw-placement="docked"] .hw-window--closing .hw-header--sub,
+.hw-widget[data-hw-placement="docked"] .hw-window--closing .hw-messages {
+	animation: none;
+}
+@keyframes hw-dock-settle {
+	from { opacity: 0; transform: translateY(7px); }
+	to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+	.hw-widget[data-hw-placement="docked"] .hw-window,
+	.hw-widget[data-hw-placement="docked"] .hw-window--closing,
+	.hw-widget[data-hw-placement="docked"] .hw-window .hw-header--sub,
+	.hw-widget[data-hw-placement="docked"] .hw-window .hw-messages {
+		animation: none;
+	}
+}
+
+/* ── Composer: the tool row ────────────────────────────────────────────────
+   The bar is the only composer the docked shell has, so it is also the only
+   place a visitor can hand over a screenshot — which is how a good half of
+   support threads actually start. Clip and mic sit beside the send button in
+   the order the reference uses; both are real (the mic renders only where the
+   browser can transcribe, the clip only when the host wired attachments). */
+.hw-dock-bar {
+	/* Lets the preview strip claim its own line above the field instead of
+	   squeezing the caption into a sliver. */
+	flex-wrap: wrap;
+	padding-left: 18px;
+	padding-right: 8px;
+}
+/* Why the send did not happen, on the bar's own measure. Reads as a note from the
+   composer rather than an error dialog: one line, no icon, gone the moment the
+   visitor types the caption it is asking for. */
+.hw-dock-error {
+	width: var(--hw-dock-width);
+	max-width: calc(100vw - 32px);
+	margin-bottom: 8px;
+	padding: 8px 14px;
+	border-radius: 14px;
+	background: rgba(190, 24, 40, 0.92);
+	color: #ffffff;
+	font-size: 12.5px;
+	line-height: 1.35;
+	box-shadow: 0 10px 26px -12px rgba(12, 11, 10, 0.5);
+	animation: hw-dock-settle 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+@media (prefers-reduced-motion: reduce) {
+	.hw-dock-error { animation: none; }
+}
+
+.hw-dock-previews {
+	flex: 0 0 100%;
+	order: -1;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	padding: 2px 0 8px;
+}
+.hw-dock-actions {
+	flex: none;
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	margin-bottom: 1px;
+}
+.hw-dock-tool {
+	display: grid;
+	place-items: center;
+	width: 30px;
+	height: 30px;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	color: color-mix(in srgb, var(--hw-dock-on-surface) 52%, transparent);
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+}
+.hw-dock-tool:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--hw-dock-on-surface) 8%, transparent);
+	color: var(--hw-dock-on-surface);
+}
+.hw-dock-tool:disabled {
+	opacity: 0.4;
+	cursor: default;
+}
+/* Recording is a state the visitor must be able to see at a glance — the mic is
+   live and the page is listening. Red, and it breathes. */
+.hw-dock-tool[data-active="true"] {
+	color: #e11d48;
+	background: rgba(225, 29, 72, 0.12);
+	animation: hw-dock-listening 1.4s ease-in-out infinite;
+}
+@keyframes hw-dock-listening {
+	0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35); }
+	50% { box-shadow: 0 0 0 4px rgba(225, 29, 72, 0); }
+}
+/* Nothing to send yet: a neutral disc, not the brand disc at 45% — a faded
+   brand color reads as "broken button" where grey reads as "not yet". */
+.hw-dock-send:disabled {
+	opacity: 1;
+	background: color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent);
+	color: color-mix(in srgb, var(--hw-dock-on-surface) 38%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+	.hw-dock-tool[data-active="true"] { animation: none; }
+	/* The bar still changes measure between folded and open; it just gets there
+	   without the tween. */
+	.hw-dock-bar { transition: none; }
+}
+
+/* The host page's global :focus-visible was painting a rectangle inside
+   the bar. The bar already shows focus by warming its own ring. */
+.hw-dock-input:focus,
+.hw-dock-input:focus-visible {
+	outline: none;
+	box-shadow: none;
+}
+
+
+/* The docked shell carries no attribution line. The panel's was already hidden
+   (the bar used to carry it instead); now neither does, so the dock is the bar and
+   nothing else. Removing it moves the bar 24px DOWN — the column is anchored to its
+   own bottom edge — so both things measured against the bar lose that term too:
+   see the panel and the toast below. */
+.hw-widget[data-hw-placement="docked"] .hw-powered { display: none; }
+
+/* Reconnecting. A socket blip is not an error — it resolves itself in a
+   second or two — so it sits quietly at the top of the panel instead of
+   shouting in amber across the full width. */
+.hw-widget[data-hw-placement="docked"] .hw-disconnect {
+	padding: 7px 14px;
+	background: var(--hw-bg-hover);
+	color: var(--hw-text-3, var(--hw-text-muted));
+	font-size: 11.5px;
+	border-radius: 20px 20px 0 0;
+}
+
+/* Author + time under a message. */
+.hw-msg-meta { display: flex; align-items: center; gap: 5px; }
+.hw-msg-author { font-weight: 550; }
+.hw-msg-meta-sep { opacity: 0.55; }
+
+/* Conversation options. The header carried only a close button, so
+   expanding the panel or starting over had nowhere to live. */
+.hw-header-actions { position: relative; display: flex; align-items: center; gap: 2px; }
+.hw-header-menu-btn {
+	display: grid;
+	place-items: center;
+	width: 30px;
+	height: 30px;
+	border: 0;
+	border-radius: 8px;
+	cursor: pointer;
+	background: transparent;
+	color: var(--hw-text-2, var(--hw-text-muted));
+	transition: background 0.15s, color 0.15s;
+}
+.hw-header-menu-btn:hover { background: var(--hw-bg-hover); color: var(--hw-text); }
+.hw-header-menu {
+	position: absolute;
+	top: 36px;
+	right: 0;
+	z-index: 6;
+	min-width: 236px;
+	max-width: 288px;
+	padding: 5px;
+	border-radius: 14px;
+	background: var(--hw-bg);
+	color: var(--hw-text);
+	box-shadow:
+		0 0 0 1px var(--hw-border),
+		0 12px 32px -10px rgba(0, 0, 0, 0.32);
+	animation: hw-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes hw-menu-in {
+	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+	to { opacity: 1; transform: none; }
+}
+.hw-header-menu button {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	padding: 9px 10px;
+	border: 0;
+	border-radius: 9px;
+	cursor: pointer;
+	background: transparent;
+	color: var(--hw-text);
+	font: inherit;
+	font-size: 13px;
+	text-align: left;
+	transition: background 0.14s;
+}
+.hw-header-menu button:hover { background: var(--hw-bg-hover); }
+.hw-header-menu button svg { flex: none; color: var(--hw-text-3, var(--hw-text-muted)); }
+.hw-header-menu button:hover svg { color: var(--hw-brand, var(--hw-primary)); }
+
+/* The visitor's own threads, above the button that starts another one. Two lines
+   each — who they were talking to and when, then the last thing said — which is
+   the minimum that tells two threads apart. The docked shell has no tab bar and
+   no list screen, so without this the second conversation is unreachable. */
+.hw-header-menu-convs {
+	display: flex;
+	flex-direction: column;
+	max-height: 168px;
+	overflow-y: auto;
+	padding-bottom: 5px;
+	margin-bottom: 5px;
+	border-bottom: 1px solid var(--hw-border);
+}
+.hw-header-menu button.hw-header-menu-conv {
+	flex-direction: column;
+	align-items: stretch;
+	gap: 2px;
+	padding: 8px 10px;
+}
+.hw-header-menu button.hw-header-menu-conv[data-active="true"] {
+	background: var(--hw-bg-hover);
+}
+.hw-header-menu-conv-top {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 8px;
+}
+.hw-header-menu-conv-name {
+	overflow: hidden;
+	font-size: 12.5px;
+	font-weight: 600;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.hw-header-menu-conv-time {
+	flex: none;
+	font-size: 11px;
+	color: var(--hw-text-3, var(--hw-text-muted));
+}
+.hw-header-menu-conv-preview {
+	overflow: hidden;
+	font-size: 12px;
+	color: var(--hw-text-2);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+
+/* Offers the agent makes. A pill, not a bar of chrome — the visitor
+   should read it as the agent saying "or I can get you a person". */
+.hw-offers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.hw-offer {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 8px 14px;
+	border: 0;
+	border-radius: 999px;
+	cursor: pointer;
+	background: var(--hw-bg-hover);
+	color: var(--hw-text);
+	font: inherit;
+	font-size: 12.5px;
+	font-weight: 550;
+	transition: background 0.15s, color 0.15s;
+}
+.hw-offer:hover { background: var(--hw-brand, var(--hw-primary)); color: var(--hw-on-brand, #fff); }
+.hw-offer svg { flex: none; }
+
+
+/* Sources. A numbered row per entry rather than a card — the answer is the
+   content, these are the receipts, and receipts should be quiet. */
+.hw-sources { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
+.hw-source {
+	display: flex;
+	align-items: center;
+	gap: 9px;
+	padding: 7px 10px;
+	border-radius: 9px;
+	background: transparent;
+	color: var(--hw-text);
+	text-decoration: none;
+	transition: background 0.15s;
+}
+a.hw-source { cursor: pointer; }
+a.hw-source:hover { background: var(--hw-bg-hover); }
+.hw-source-n {
+	display: grid;
+	place-items: center;
+	flex: none;
+	width: 16px;
+	height: 16px;
+	border-radius: 4px;
+	background: var(--hw-brand, var(--hw-primary));
+	color: var(--hw-on-brand, #fff);
+	font-size: 10px;
+	font-weight: 700;
+	font-variant-numeric: tabular-nums;
+}
+.hw-source-title {
+	flex: 1;
+	min-width: 0;
+	font-size: 12px;
+	font-weight: 550;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}