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.

tests/chat-test.mjs

@@ -289,6 +289,36 @@ try {
     await desktop.page.getByRole("button", { name: "Expand sidebar" }).click();
     await desktop.page.waitForTimeout(400);
     check("desktop: AI disclaimer under the composer", await desktop.page.getByText("Freezmo uses AI and can make mistakes").isVisible());
+
+    /* 6b. desktop pickers: the chip that opens also closes ---------------
+       (It used to only ever open, so the only way out was a choice.) */
+    const modelChip = () => desktop.page.getByRole("button", { name: /stub-(text|vision)|Chat model/ }).first();
+    const modelDialog = desktop.page.getByRole("dialog", { name: "Chat model" });
+    const scopeDialog = desktop.page.getByRole("dialog", { name: "What may chat read?" });
+    const scopeChip = () => desktop.page.getByRole("button", { name: "All notes" }).first();
+
+    await modelChip().click();
+    await desktop.page.waitForTimeout(400);
+    check("desktop: model chip opens the dropdown", (await modelDialog.count()) === 1);
+    check("desktop: model chip reads pressed while open", (await modelChip().getAttribute("aria-expanded")) === "true");
+    await modelChip().click();
+    await desktop.page.waitForTimeout(400);
+    check("desktop: the same chip closes it (no forced choice)", (await modelDialog.count()) === 0);
+    check("desktop: chip is not pressed once closed", (await modelChip().getAttribute("aria-expanded")) === "false");
+
+    await scopeChip().click();
+    await desktop.page.waitForTimeout(400);
+    check("desktop: note chip opens the dropdown", (await scopeDialog.count()) === 1);
+    await modelChip().click();
+    await desktop.page.waitForTimeout(400);
+    check(
+      "desktop: opening one picker closes the other",
+      (await scopeDialog.count()) === 0 && (await modelDialog.count()) === 1,
+    );
+    await desktop.page.mouse.click(700, 300);
+    await desktop.page.waitForTimeout(400);
+    check("desktop: a click outside closes the dropdown", (await modelDialog.count()) === 0);
+
     await desktop.context.close();
 
     const phone = await makePage(browser);

tests/phase2-test.mjs

@@ -33,6 +33,29 @@ const browser = await launchBrowser();
   await seed(page, { decks: [DECK] });
   await page.goto(`${BASE}/deck/seed_deck`, { waitUntil: "networkidle" });
   await page.waitForTimeout(900);
+
+  /* 0. the study chrome is one pill that its controls fit -------------- */
+  const chrome = await page.evaluate(() => {
+    const pill = document.querySelector("header .study-chrome");
+    if (!pill) return null;
+    const box = pill.getBoundingClientRect();
+    const radius = Number.parseFloat(getComputedStyle(pill).borderTopLeftRadius) || 0;
+    const control = pill.querySelector("a, button").getBoundingClientRect();
+    const centreY = box.top + box.height / 2;
+    return {
+      height: Math.round(box.height),
+      fullyRounded: radius >= box.height / 2 - 1,
+      /** The control's far corner stays inside the stadium curve. */
+      cornerInside: Math.hypot(control.left - (box.left + box.height / 2), control.top - centreY) < box.height / 2,
+      counter: /\d+\s*\/\s*\d+/.test(pill.textContent ?? ""),
+    };
+  });
+  check(
+    "chrome: one rounded pill, controls inside its ends",
+    chrome !== null && chrome.fullyRounded && chrome.cornerInside && chrome.counter && chrome.height <= 70,
+    JSON.stringify(chrome),
+  );
+
   await page.getByRole("button", { name: "Green" }).click();
   await page.waitForTimeout(500);
   check("study: wrong answer shows feedback", await page.getByText(/Correct answer/i).first().isVisible());
@@ -351,6 +374,16 @@ const browser = await launchBrowser();
   await page.getByRole("button", { name: /Start exam/ }).click();
   await page.waitForTimeout(1000);
   check("exam: timer visible", await page.getByLabel(/left$/).isVisible());
+  /* The exam runs inside the app layout: the fixed feed (z-[45]) must sit
+     over the sticky app header (z-40), not under it. */
+  const examChrome = await page.evaluate(() => {
+    const pill = document.querySelector("header .study-chrome");
+    if (!pill) return null;
+    const box = pill.getBoundingClientRect();
+    const atTop = document.elementFromPoint(Math.round(box.left + box.width / 2), Math.round(box.top + 4));
+    return Boolean(atTop?.closest(".study-chrome"));
+  });
+  check("exam: chrome paints over the app header", examChrome === true, String(examChrome));
   check("exam: no hint rows", (await page.getByText(/Tap a term|Shortcuts|Use the arrow/i).count()) === 0);
   // Order-independent: MC listens for number keys on the active slide and the
   // feed for ArrowDown. Both activities have the correct answer at index 0.