fix(chat): render typing-indicator elapsed hint as horizontal text

The phase-87 ".typing-elapsed" dot-geometry reset (specificity 0,1,0)
lost every shared declaration to the ".typing span" dot rule
(0,1,1): the hint rendered as an 8x8px bouncing dot and the "Ns" text
wrapped one character per line below the bubble (overflow-wrap:
anywhere on .bubble). Phase 87's e2e checked text values only, so the
squish shipped unseen.

- retarget the reset at ".typing span.typing-elapsed" (0,2,1) so it
  actually wins; center the dots while the hint line is taller
- unit: pin the reset's selector context (specificity regression guard)
- e2e: layout pin on the live hint — no dot animation, not an 8px box,
  horizontal single-line bounding box
- before/after verification screenshots in
  .agents/reports/87_big_read_progress/

Verified: unit 41 passed, phase-87 e2e 4 passed (isolated), ruff +
pyright clean.

frontend/assets/styles.css

@@ -1110,7 +1110,10 @@ details.thinking .thinking-text ul { margin: 0 0 0.5rem; }
 }
 
 /* typing indicator */
-.typing { display: inline-flex; gap: 5px; padding: 0.9rem 1rem; }
+/* align-items: center — the dots stay vertically centered when the
+   phase-87 "Ns" hint (a full text line) makes the row taller; with
+   only the three 8px dots the centering is a visual no-op. */
+.typing { display: inline-flex; align-items: center; gap: 5px; padding: 0.9rem 1rem; }
 .typing span {
   width: 8px; height: 8px;
   border-radius: 50%;
@@ -1129,8 +1132,14 @@ details.thinking .thinking-text ul { margin: 0 0 0.5rem; }
    ink-soft on the bubble surface (the AA pairing), small mono like
    every status line. Plain text: no animation, no motion opt-out.
    The span is a sibling of the dots inside the same .typing bubble, so
-   it resets the dot geometry (.typing span) it would otherwise inherit. */
-.typing-elapsed {
+   it resets the dot geometry (.typing span) it would otherwise inherit.
+   The selector MUST stay ".typing span.typing-elapsed": a bare
+   ".typing-elapsed" (0,1,0) LOSES the specificity war to the dot rule
+   ".typing span" (0,1,1) — every reset below (width/height/border-
+   radius/background/opacity/animation) would be overridden and the
+   hint would render as an 8×8px bouncing dot with the "Ns" text
+   wrapping one character per line (phase-87 regression, 2026-09). */
+.typing span.typing-elapsed {
   width: auto;
   height: auto;
   border-radius: 0;