Show the author's own chain on Bluesky and Threads

People write in chains on both, and a link into one arrives pointing at a
single post out of several. Showing only that post loses the thing that was
being said. Other people's replies are a different matter: they are a
conversation rather than the thing that was shared, and on a busy post there
are hundreds of them.

A Post is now a list of Segments instead of one body. Most platforms produce
exactly one and say so through oneSegment(); the two that thread produce the
whole chain, with isAnchor marking the post that was actually linked, which
need not be the first.

Bluesky walks parent upward and the author's own replies downward, stopping at
the first post by anyone else. That needs depth and parentHeight on
getPostThread, which drags the entire reply tree along -- a few hundred KB on a
popular post -- because there is no way to ask the API for one author's branch.

Threads is harder to read. The page ships the linked post, the author's
follow-ups, other people's replies and a pile of unrelated recommendations, all
as flat thread_items containers with no nesting to go on. What separates a
follow-up from a stranger's reply is that a follow-up is the author replying to
themselves; a reply from someone else carries the same reply_to_author with a
different name on it. The first post of a chain replies to nothing at all, so
it is reachable only by walking backwards from the post that answers it -- a
test caught that, when linking the second post of a thread returned just the
one post.

Fixtures for both are real captures. The Bluesky one keeps two of every level's
outside replies rather than pruning them away, because a filter is only worth
testing against the thing it is supposed to exclude.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01BGkRmLfiWuJHx6tQ12EELY

public/app.css

@@ -247,3 +247,28 @@ main { max-width: 680px; margin: 0 auto; }
   color: #e9ebee;
   background: rgba(0, 0, 0, 0.65);
 }
+
+/* ---------- threads ---------- */
+
+.segment + .segment { border-top: 1px solid var(--line); }
+
+/* A chain reads as one column of posts, so the media in each needs its own
+   top edge only when text sits above it. */
+.segment .text + .media { border-top: 1px solid var(--line); }
+
+.post[data-segments] .segment { position: relative; }
+
+.segment__mark {
+  margin: 0;
+  padding: 8px 14px 0;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-dim);
+}
+
+.post[data-segments] .segment[data-anchor="true"] {
+  /* The link may point at the middle of a thread, so say which one it was
+     without hiding the rest. */
+  background: color-mix(in srgb, var(--accent, #888) 7%, transparent);
+}