One-pill study chrome, toggling chat pickers, readable homework steps

UI batch from feedback:

- The study/review/exam/homework chrome is now a single 58px pill: round
  close button, title + position over the progress bar, chips (or the exam
  timer) at the far end — everything on the centre line, so nothing crowds
  the rounded corners any more. Homework guide gets the same recipe.
- The immersive feeds carry z-[45] so they paint over the app chrome (on
  /exam the header used to cover the top of the chrome), and the page chrome
  behind an open overlay (.app-header, .segmented, .tabbar) is hidden while
  the transparent overlay is up, so it can no longer ghost through the glass.
  The guide's disclaimer moved inside the overlay with it.
- Chat: the context and model chips toggle their own popover (pressed state,
  aria-expanded), opening one closes the other, a press outside closes it —
  no more being forced to pick something to get out.
- Homework: the model's plain-text step explanations/hints/verdicts keep
  their line breaks (whitespace-pre-wrap) — a step used to collapse into one
  run-on paragraph with the whole solution inside it; the guide prompt now
  says the explanation is coaching, 2-4 sentences.
- The four glacier blobs are at 25% of their old opacity (0.045 light,
  0.1 dark).

Tests: phase-2 chrome geometry + exam layering checks (62), chat desktop
picker checks (101), the standing suites all green. README: decisions 54-56,
decision 23 updated. SW -> freezmo-v44.

components/SessionFeed.tsx

@@ -144,43 +144,49 @@ export function SessionFeed({
   const score = attemptedTotal > 0 ? Math.round((correct / attemptedTotal) * 100) : 0;
 
   return (
-    <div className="frost-bg fixed inset-0 flex flex-col fade-in-mobile">
+    <div className="frost-bg overlay-open fixed inset-0 z-[45] flex flex-col fade-in-mobile">
+      {/* Same pill as the study feed: round close button, title + position
+          above the bar, timer at the other end (nothing crowds the ends). */}
       <header className="pt-safe absolute inset-x-0 top-0 z-30 px-3">
-        <div className="study-chrome mx-auto max-w-xl space-y-1.5 rounded-full px-3 py-2">
-          <div className="flex items-center gap-3">
-            <button
-              type="button"
-              onClick={onExit}
-              aria-label={t("feed.back")}
-              className="grid size-9 shrink-0 place-items-center rounded-xl bg-[var(--surface-sunken)] text-[var(--text)] transition hover:bg-[var(--hover)]"
-            >
-              <XIcon className="size-4" />
-            </button>
-            <div className="min-w-0 flex-1">
-              <ProgressBar
-                value={Math.min(index + 1, slideCount)}
-                max={slideCount}
-                label={t("feed.activityOf", { n: Math.min(index + 1, total), total })}
-              />
-            </div>
-            {timerSeconds ? (
-              <span
-                className={cn(
-                  "shrink-0 rounded-xl px-2 py-1 text-xs font-extrabold tabular-nums",
-                  remaining <= 30 ? "tint-peach" : "bg-[var(--surface-sunken)] text-[var(--text-muted)]",
-                )}
-                aria-label={t("exam.timeLeft", { time: formatClock(remaining) })}
-              >
-                {formatClock(remaining)}
+        <div className="study-chrome mx-auto flex max-w-xl items-center gap-2.5 rounded-full px-2.5 py-2">
+          <button
+            type="button"
+            onClick={onExit}
+            aria-label={t("feed.back")}
+            title={t("feed.back")}
+            className="grid size-10 shrink-0 place-items-center rounded-full bg-[var(--surface-sunken)] text-[var(--text)] transition hover:bg-[var(--hover)]"
+          >
+            <XIcon className="size-4" />
+          </button>
+
+          <div className="min-w-0 flex-1">
+            <div className="flex items-baseline justify-between gap-3">
+              <span className="min-w-0 truncate text-[13px] font-semibold leading-tight text-[var(--text)]">
+                {title}
               </span>
-            ) : null}
+              <span className="shrink-0 text-[11.5px] font-bold tabular-nums text-[var(--text-muted)]">
+                {Math.min(index + 1, total)}/{total}
+              </span>
+            </div>
+            <ProgressBar
+              className="mt-1.5"
+              value={Math.min(index + 1, slideCount)}
+              max={slideCount}
+              label={t("feed.activityOf", { n: Math.min(index + 1, total), total })}
+            />
           </div>
-          <div className="flex items-center justify-between gap-2 text-[11px] font-semibold text-[var(--text-muted)]">
-            <span className="min-w-0 truncate">{title}</span>
-            <span className="shrink-0 tabular-nums">
-              {Math.min(index + 1, total)}/{total}
+
+          {timerSeconds ? (
+            <span
+              className={cn(
+                "shrink-0 rounded-full px-3 py-1 text-xs font-extrabold tabular-nums",
+                remaining <= 30 ? "tint-peach" : "bg-[var(--surface-sunken)] text-[var(--text-muted)]",
+              )}
+              aria-label={t("exam.timeLeft", { time: formatClock(remaining) })}
+            >
+              {formatClock(remaining)}
             </span>
-          </div>
+          ) : null}
         </div>
       </header>