Ask Petal answers in both languages, with room to read

The tutor prompt said "never mix languages in a single response" and
mirrored the language of the question, so asking in English — which she
does, because she is practising — returned the one explanation surface
that gives nothing in her own language. It now answers in both, pair
language first, halves separated by a blank line.

Which half is the safety net and which is the lesson depends on who is
writing: the pair is (English + X) and Petal is used from both ends, so
the prompt asks for both and says it doesn't know which way round.

The split is a rendering nicety, never a parse the reply depends on: a
half-streamed reply is all one half, a model that ignores the
instruction renders as one block, and nothing is ever dropped.

For the height, the first attempt clamped the box to the room left below
the anchored card so it could never overhang — measured, that gave 176px
against a 442px answer, worse than the 220px it replaced. The card's own
chrome spends ~290px of an 810px window, so "fits below the word" and
"room to read" are not both available. The ceiling is now a flat 50vh and
the overhang is made navigable instead, per item 4: the card reports its
reach like the rail already does, the column grows, and the page can
scroll to the actions below it.

web/src/components/Editor/SuggestionCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import type { Suggestion } from '../../api/client'
 import { usePack } from '../../i18n'
 import { AskPetal } from './AskPetal'
@@ -14,6 +14,13 @@ interface Props {
   // Pins the card open while the Ask Petal panel is expanded, so the chat isn't
   // dismissed by the hover-close timer when the pointer drifts away.
   onExpandChange: (expanded: boolean) => void
+  // How far the card reaches below the wrapper's top, in wrapper coordinates —
+  // the same report the rail makes (item 4). The card is absolutely positioned
+  // and so adds no layout height of its own; without this, an Ask Petal
+  // conversation that runs past the last line of text has no scrollable page
+  // under it and its Accept button simply can't be reached. 0 means "nothing to
+  // cover", which is what an unmounted card reports on its way out.
+  onExtent?: (bottom: number) => void
 }
 
 // SuggestionCard is the hover panel for a single suggestion: a colored type tag,
@@ -28,12 +35,31 @@ export function SuggestionCard({
   onPointerEnter,
   onPointerLeave,
   onExpandChange,
+  onExtent,
 }: Props) {
   const pack = usePack()
   const meta = TYPE_META[suggestion.type]
   const label = typeLabel(suggestion.type, pack)
   const hasReplacement = suggestion.replacement.trim() !== ''
   const [asking, setAsking] = useState(false)
+  const cardRef = useRef<HTMLDivElement>(null)
+
+  // Report the card's reach while it is open, and withdraw it on the way out.
+  // A ResizeObserver rather than a one-shot measure because the card grows
+  // after it is mounted: the Ask Petal panel opens, and then the reply streams
+  // into it token by token.
+  useEffect(() => {
+    const el = cardRef.current
+    if (!el || !onExtent) return
+    const report = () => onExtent(el.offsetTop + el.offsetHeight)
+    report()
+    const observer = new ResizeObserver(report)
+    observer.observe(el)
+    return () => {
+      observer.disconnect()
+      onExtent(0)
+    }
+  }, [onExtent])
 
   function toggleAsking() {
     setAsking((prev) => {
@@ -45,6 +71,7 @@ export function SuggestionCard({
 
   return (
     <div
+      ref={cardRef}
       role="dialog"
       aria-label={`${label} suggestion`}
       onMouseEnter={onPointerEnter}