UI iteration 4: dock morph animation, sticky-in-flow dock, scrollbar, indicators

- Animation: the blob's shell morphs height (WAAPI, 180ms) on every
  variant change — chat ↔ question ↔ collapsed bar — plus a quick
  fade/rise (160ms) on the swapped content. Gotcha pinned in code: never
  measure the shell while a morph is in flight (getBoundingClientRect
  reads the ANIMATED value and corrupts the next morph's start height);
  cancel running morphs before measuring, refresh settled height only
  when no morph is running.
- Gradient-over-scrollbar fixed structurally: the dock is no longer an
  absolute overlay on the conversation root — it's sticky bottom-0 INSIDE
  the scroller (in flow). The transcript scrolls fully clear of the dock,
  the fade never touches the scrollbar lane, and the pb-hack clearances
  are gone.
- New question while at the bottom scrolls to reveal the dock; scrolled
  up → collapsed bar, no yank.
- Thin dark native scrollbar app-wide (8px webkit + scrollbar-width:thin,
  dark thumb, transparent track). Note: use-stick-to-bottom sets
  scrollbar-gutter: stable both-edges on its scroller — the lane is
  outside the content flow by design.
- 'Writing a question…' transcript shimmer while a tool call streams its
  input (same slot as 'Thinking…'). Protocol pinned by a test asserting
  tool-input-start precedes tool-input-available; scripted mock now
  streams tool input as deltas like real providers do. (OpenRouter/
  Anthropic often delivers the whole input in ONE delta — then the dock
  appears instantly and no indicator is needed or shown.)

Verified live: grow 54→349px and shrink 349→54px fire with correct
from/to; collapse/expand intact; gradient stops before the gutter;
Thinking… observed in-page; 58/58 tests.

components/question-dock.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { ArrowDownIcon } from "lucide-react";
-import { useStickToBottomContext } from "use-stick-to-bottom";
 import { Button } from "@/components/ui/button";
 import { MessageResponse } from "@/components/ai-elements/message";
 import { cn } from "@/lib/utils";
@@ -26,40 +25,27 @@ import {
  * the bottom field (note for select modes, the answer for free-text asks,
  * "Other" text when Other is picked) plus the Submit button send together.
  *
- * Collapse: scroll up and the dock folds into a slim bar (question one-liner);
- * click it (or scroll back to the bottom) to re-expand. The expanded content
- * stays MOUNTED while collapsed (hidden, not unmounted) so a half-made
- * selection survives scrolling.
- *
- * Rendered inside <Conversation> to read the stick-to-bottom context.
- * Content only — the persistent shell lives in the chat view's overlay.
+ * Collapse behavior (scroll-up → slim bar) is owned by the DockOverlay in the
+ * chat view, which also owns the persistent shell and its height morph. This
+ * component is content only. The expanded form stays MOUNTED while collapsed
+ * (hidden, not unmounted) so a half-made selection survives scrolling.
  */
 
 export interface QuestionDockProps {
 	toolName: "quiz" | "ask_user_question";
 	toolCallId: string;
 	input: QuizToolInput | AskToolInput;
+	/** Collapse state, owned by the DockOverlay (it drives the shell's height morph). */
+	expanded: boolean;
+	onExpand: () => void;
 	onSubmit: (output: QuestionAnswerData) => void;
 }
 
-export function QuestionDock({ toolName, toolCallId, input, onSubmit }: QuestionDockProps) {
-	const { isAtBottom, scrollToBottom } = useStickToBottomContext();
-	const [forceOpen, setForceOpen] = useState(false);
-	useEffect(() => {
-		if (!isAtBottom) setForceOpen(false);
-	}, [isAtBottom]);
-	const expanded = isAtBottom || forceOpen;
-
-	const expand = () => {
-		setForceOpen(true);
-		void scrollToBottom();
-	};
-
+export function QuestionDock({ toolName, toolCallId, input, expanded, onExpand, onSubmit }: QuestionDockProps) {
 	return (
 		<>
-			{!expanded && <QuestionDockBar toolName={toolName} question={input.question} onExpand={expand} />}
-			{/* Stays mounted while collapsed — selection state survives scrolling. */}
-			<div className={expanded ? undefined : "invisible h-0 overflow-hidden"}>
+			{!expanded && <QuestionDockBar toolName={toolName} question={input.question} onExpand={onExpand} />}
+			<div className={expanded ? "dock-variant" : "invisible h-0 overflow-hidden"}>
 				<QuestionDockForm
 					toolName={toolName}
 					toolCallId={toolCallId}
@@ -97,7 +83,7 @@ export function QuestionDockBar({
 			type="button"
 			data-testid="question-dock-bar"
 			onClick={onExpand}
-			className="flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm transition-colors hover:bg-accent/40"
+			className="dock-variant flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm transition-colors hover:bg-accent/40"
 		>
 			<span className="shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
 				{toolName === "quiz" ? "Quiz" : "Question"}
@@ -111,7 +97,7 @@ export function QuestionDockBar({
 }
 
 /** The expanded question: label, question, options, and the unified bottom row. */
-function QuestionDockForm({ toolName, toolCallId, input, onSubmit }: QuestionDockProps) {
+function QuestionDockForm({ toolName, toolCallId, input, onSubmit }: Omit<QuestionDockProps, "expanded" | "onExpand">) {
 	const kind = toolName === "quiz" ? ("quiz" as const) : ("ask" as const);
 
 	// Canonical QuestionData, built once per question. Quiz options are