feat(ui): widen the home and chat canvases and cap answers at 88ch

[mrsibe]

What does this PR do?

Separates the workspace width from the long-form reading measure: the home page
and the chat canvas get a wider (~1024px) layout, while an answer and the note
editor keep a comfortable line length.

Why?

Three caps used to stack, and the effect was nearly an illusion of width:

• the home page was max-w-3xl (~768px), too narrow for a lg:grid-cols-3
  notebook shelf,
• the chat transcript was capped at --reading-measure (72ch, ~600px), and
• an AI answer added its own max-w-[85%] on top, so body text was really
  72ch × 85% ≈ 61ch while the composer spanned the whole centre panel.

Desktop chat is a workspace, not an article column, so the two widths are now
separate concepts: page width and optimal body line width.

Related issue

Standalone UI change; no issue.

What changed?

• Home (Home.tsx): both shells max-w-3xl → max-w-5xl (~768px → ~1024px),
  so search, the three-column notebook shelf and recent content use the space.
• Chat canvas (MessageList.tsx): the header, empty state and message list
  max-w-[var(--reading-measure)] → max-w-5xl.
• AI answer (MessageItem.tsx): max-w-[85%] → w-full max-w-[var(--answer-measure)].
  No second compression; an answer is still capped, just at 88ch instead of
  72ch × 85%.
• User message: keeps max-w-[85%]; short messages stay a small bubble
  because the inner bubble is w-fit.
• Composer (ProcessPanel.tsx): centred on the same max-w-5xl canvas, so
  the input lines up with the transcript it answers.
• Tokens (theme.css): --answer-measure: 88ch added; --reading-measure
  stays 72ch and now belongs to the note editor.
• DESIGN.md: the "Measure" section now documents the two widths instead of
  claiming chat and notes share one.

Chat panel
┌────────────────────────────────────────────────────┐
│      ←──── conversation canvas ~1024px ────→       │
│      Notebook title                                │
│      AI answer ←──── ~88ch ────→                   │
│                    user message ███████            │
│      ┌────── composer ~1024px ─────────────┐       │
│      └─────────────────────────────────────┘       │
└────────────────────────────────────────────────────┘

Note editor is unchanged: still --reading-measure (72ch).

How was this tested?

• CI Verify is green on Linux, macOS and Windows — typecheck, design guard,
  unit tests, electron-builder --dir, and smoke:packaged.
• npm test — 478 pass.
• npx electron-vite build — bundles.
• npm run check:design — no violations (--answer-measure is a token, not a
  hard-coded ch).
• npx eslint on the touched files — no errors.

Screenshots / recordings

Not attached: this environment has no display to capture the Electron window.
The change is layout-only; the diagram above is the intended geometry. A visual
pass on a real window is welcome before merge.

Before	After
home 768px, chat 600px, answer 61ch	home 1024px, chat 1024px, answer 88ch

Checklist

• I have reviewed my own changes.
• npm run typecheck passes (CI).
• npm run build passes (CI).
• I have tested the affected user workflow visually (see note).
• I have not included unrelated changes.
• I have updated documentation when necessary.

Desktop / build changes

• Not applicable