Anchor manual scroll compensation to in-message descendants

The Safari manual-anchoring fallback tracked only top-level message
wrappers. With the viewport top inside a long assistant message, a
thinking block collapsing (or an image loading) above the reading
position within that same message leaves the wrapper's top unchanged —
delta reads zero and the jump survives. Descend from the straddling
wrapper to the deepest element at the viewport top (linear scans below
the top level, where children are few and can sit out of flow), which
is what native scroll anchoring does. Regression test covers the
in-message collapse.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0148VmxBDazfhczvfE122XVW

Author: claude

src/lib/utils/scroll/__tests__/chatScroll.svelte.test.ts

@@ -443,6 +443,69 @@ describe("thinking-block collapse (layout-shift regressions)", () => {
 		const after = reading.getBoundingClientRect().top - containerTop;
 		expect(Math.abs(after - before)).toBeLessThanOrEqual(2);
 	});
+
+	it("manual anchoring tracks a descendant INSIDE a long message, not just the wrapper", async () => {
+		// Reading the middle of one long assistant message whose own thinking
+		// block collapses above the reading position: the wrapper's top never
+		// moves, so a wrapper-level anchor would read delta 0 and let the text
+		// jump — the anchor must be the descendant at the viewport top.
+		const style = document.createElement("style");
+		style.textContent = ".sim-safari { overflow-anchor: none !important; }";
+		document.head.appendChild(style);
+
+		const fixture = createFixture({ viewportHeight: 400, blocks: [] });
+		fixture.container.classList.add("sim-safari");
+		const chat = createChatScroll({ forceManualAnchoring: true });
+
+		const mkInner = (height: number) => {
+			const el = document.createElement("div");
+			el.style.cssText = `height: ${height}px; flex-shrink: 0; background: #eef;`;
+			return el;
+		};
+		const message = document.createElement("div");
+		message.style.cssText = "display: flex; flex-direction: column; flex-shrink: 0;";
+		message.dataset.messageId = "long-message";
+		const thinking = mkInner(400);
+		const reading = mkInner(300);
+		message.append(thinking, reading, mkInner(900));
+		fixture.content.appendChild(message);
+
+		const spacerAction = chat.attachSpacer(fixture.spacer);
+		const containerAction = chat.attach(fixture.container, { content: () => fixture.content });
+		chat.sync({ conversationKey: "c1", messages: [], lastMessageEmpty: false });
+		active.push({
+			fixture,
+			chat,
+			messages: [],
+			sync: () => {},
+			mountPair: () => ({
+				user: document.createElement("div"),
+				assistant: document.createElement("div"),
+			}),
+			swapAssistant: () => document.createElement("div"),
+			viewportTop: () => fixture.container.getBoundingClientRect().top,
+			destroy() {
+				containerAction.destroy();
+				spacerAction.destroy();
+				fixture.destroy();
+				style.remove();
+			},
+		});
+		await waitFor(() => fixture.distance() <= ARRIVED, { label: "settle" });
+		await nextTask();
+
+		const containerTop = fixture.container.getBoundingClientRect().top;
+		const target = reading.getBoundingClientRect().top - containerTop + fixture.container.scrollTop;
+		dragScrollbarTo(fixture.container, target);
+		await frames(2);
+		expect(chat.state.pinned).toBe(false);
+		const before = reading.getBoundingClientRect().top - containerTop;
+
+		thinking.style.height = "50px"; // collapse INSIDE the same message
+		await frames(3);
+		const after = reading.getBoundingClientRect().top - containerTop;
+		expect(Math.abs(after - before)).toBeLessThanOrEqual(2);
+	});
 });
 
 describe("composer clearance", () => {

src/lib/utils/scroll/chatScroll.svelte.ts

@@ -174,9 +174,10 @@ export class ChatScroll {
 		};
 	};
 
-	/** Record the message element at the viewport top (binary search over the
-	 * content children: they are in document order). Only while detached —
-	 * pinned following owns the bottom edge instead. */
+	/** Record the element at the viewport top (binary search over the content
+	 * children — they are in document order — then a descent into the
+	 * straddling message). Only while detached — pinned following owns the
+	 * bottom edge instead. */
 	private trackReadAnchor = () => {
 		if (!this.manualAnchoring) return;
 		if (this.state.pinned || !this.container) {
@@ -202,10 +203,31 @@ export class ChatScroll {
 				lo = mid + 1;
 			}
 		}
-		const el = children[found];
+		// Descend into the straddling message: anchoring the outer wrapper
+		// misses changes INSIDE it — a thinking block collapsing above the
+		// reading position within the same long message leaves the wrapper's
+		// top unchanged while the visible paragraph moves. Native anchoring
+		// anchors deep descendants; do the same. Linear scans here (unlike the
+		// top level) because in-message children are few and can be positioned
+		// out of flow, which breaks the binary search's ordering assumption.
+		let el: Element = children[found];
+		for (let depth = 0; depth < 8; depth++) {
+			const inner = this.firstChildBelow(el, containerTop);
+			if (!inner) break;
+			el = inner;
+		}
 		this.readAnchor = { el, offset: el.getBoundingClientRect().top - containerTop };
 	};
 
+	private firstChildBelow(parent: Element, containerTop: number): Element | null {
+		const kids = parent.children;
+		for (let i = 0; i < kids.length; i++) {
+			const rect = kids[i].getBoundingClientRect();
+			if (rect.height > 0 && rect.bottom > containerTop + 1) return kids[i];
+		}
+		return null;
+	}
+
 	/** After a content resize while detached, restore the tracked element's
 	 * viewport position — Safari's stand-in for native scroll anchoring. The
 	 * adjustment goes through the controller, so attribution stays sound (it