fix(diagram-engine): slack packs to column top; paragraphs set flush-left

The poster's two ugliest defects were engine policy, not model declarations:

- A column stretched by its siblings distributed the slack into gaps (and,
  via grow, into boxes), producing huge panels with three lines floating in
  the middle. Slack policy now differs by axis: a ROW still spreads and
  centres (a flowchart layer reads as a pyramid), a COLUMN packs to the top
  and leaves leftover space at the bottom — where a reader expects it.
- Multi-line body text rendered dead-centre (FALLBACK_BOX's
  verticalAlign=middle). Typography's basic rule, applied by content: a
  paragraph (explicit breaks or wrap-length text) sets align=left,
  verticalAlign=top with padding; a short label stays centred. Rectangles
  only — inside a rhombus or cloud the safe text area IS the middle.
- Prompts corrected: stretch is about width, content keeps natural height,
  and columns are balanced by moving content — not by inflating boxes.

565 tests green; the same poster declaration re-rendered without the giant
hollow panels.

app/api/chat/route.ts

@@ -704,7 +704,7 @@ Example: If previous output ended with '<mxCell id="x" style="rounded=1', contin
 
 PREFER THIS over display_diagram/edit_diagram whenever the diagram's meaning is in nesting or in a fixed frame: cloud architecture, swimlane/BPMN, sequence diagrams, mind maps, org charts — AND poster-style layouts: paper summaries, cheat sheets, infographics, comparison sheets. You declare what contains what; layout, sizing, alignment and arrow routing are computed. Containers always fit their contents and siblings never overlap, so the usual layout problems cannot occur.
 
-The layout model is FLEXBOX. row/col containers nest freely; a box with internal structure is an invisible col container (pad 10-14) holding smaller boxes. Three knobs: grow (columns split leftover width by weight — grow 3 / grow 2 gives a 3:2 page), align "stretch" (child fills the cross axis — headings, bars and body boxes should almost always stretch or the column looks ragged), pad (8-14 tight card, default 24 roomy section). Labels take inline HTML — <b>, <i>, <font color="#...">, <br> — so one box carries a bold keyword, a second paragraph, a coloured verdict line. Emoji in headings (💡 Core Idea) read instantly.
+The layout model is FLEXBOX. row/col containers nest freely; a box with internal structure is an invisible col container (pad 10-14) holding smaller boxes. Three knobs: grow (columns split leftover WIDTH by weight — grow 3 / grow 2 gives a 3:2 page; for containers in a row, not for leaf boxes), align "stretch" (child fills its column's width; content keeps natural height and packs to the top — the engine leaves leftover vertical space at the bottom, never inflates boxes to fill it, so balance columns by moving content between them), pad (8-14 tight card, default 24 roomy section). Labels take inline HTML — <b>, <i>, <font color="#...">, <br> — so one box carries a bold keyword, a second paragraph, a coloured verdict line. Paragraphs set themselves flush-left automatically; short labels centre. Emoji in headings (💡 Core Idea) read instantly.
 
 For a POSTER (paper summary, cheat sheet): one col container as the page; a banner box as the masthead with align stretch (do NOT also use set_title — the banner IS the title); a muted box for the byline; a row container holding 2-4 col containers with grow weights as columns; each section a heading-role box + content boxes, all align stretch. Give each section a distinct group name — sections sharing a group share a hue, so groups are how the poster gets its colour. Use roles on boxes: callout for the core idea, good/bad for verdict pairs, metric for the headline number, muted for fine print. A comparison card: add_container dir=col gap=8 pad=12 grow=1 role=bad, then a bold title box, the body text, a role=bad answer bar (all align stretch), and a coloured "<font color=\\"#B85450\\"><b>✗ Often Wrong</b></font>" verdict with align start.