feat(chat): stream model thinking over SSE and show it in a collapsible block

frontend/assets/styles.css

@@ -401,6 +401,58 @@ body::after {
   border-color: var(--accent-line);
 }
 
+/* Collapsible "Thinking" block (phase 17): the model's reasoning streams
+   open ABOVE the answer bubble, auto-collapses when the answer starts, and
+   stays user-toggleable (native <details>/<summary> — a real focusable
+   control: >=44px target, :focus-visible via the global rule). Summary
+   text is brand-ink on surface ≈8.7:1; the scratchpad body is ink-soft on
+   surface ≈6.9:1 — both AA. */
+details.thinking {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-left: 3px solid var(--brand-soft);
+  border-radius: var(--radius-sm);
+  margin: 0 0 0.5rem;
+  overflow: hidden;
+}
+details.thinking summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  min-height: 44px;
+  color: var(--brand-ink); /* 8.7:1 on --surface */
+  font-size: 0.9rem;
+  cursor: pointer;
+  list-style: none;
+}
+details.thinking summary::-webkit-details-marker { display: none; }
+/* CSS chevron: ▸ rotates 90° when open (transition stills under
+   prefers-reduced-motion — see the reduced-motion block below). */
+details.thinking summary::before {
+  content: "▸";
+  display: inline-block;
+  transition: transform 0.15s ease;
+}
+details.thinking[open] summary::before { transform: rotate(90deg); }
+details.thinking summary:focus-visible {
+  outline: 3px solid var(--brand);
+  outline-offset: 2px;
+}
+/* The scratchpad is a scrollable, compact area (max-height keeps long
+   reasoning from pushing the answer off-screen while open). */
+details.thinking .thinking-text {
+  padding: 0 0.75rem 0.75rem;
+  color: var(--ink-soft); /* 6.9:1 on --surface */
+  font-size: 0.875rem;
+  line-height: 1.55;
+  max-height: 320px;
+  overflow-y: auto;
+}
+/* The scratchpad is compact: tighten the renderer's paragraph/list margins. */
+details.thinking .thinking-text p,
+details.thinking .thinking-text ul { margin: 0 0 0.5rem; }
+
 .msg-meta {
   font-size: 0.75rem;
   color: var(--ink-soft);
@@ -631,6 +683,8 @@ body::after {
 }
 @media (prefers-reduced-motion: reduce) {
   .typing span { animation: none; opacity: 0.7; }
+  /* Phase 17 thinking block: the chevron stills (no rotation motion). */
+  details.thinking summary::before { transition: none; }
 }
 
 /* ---------- Empty state & suggestions ---------- */