draw every kind of textbook figure, lock math text left-to-right, student-first family screen

- src/diagram: plane (constructed points, graphs with computed roots, vertex,
  extrema, tangent, asymptotes, piecewise limits, regions, rotations and
  reflections, line from ax + by = c), number line with intervals and stacked
  fractions, solids with hidden edges, bar/line/pie charts, sign tables, Venn,
  arrow mappings, probability trees, fraction bars and mixed numbers, grids,
  groups, clock. Pure-math text is bidi-overridden: Persian digits used to turn
  3 × 4 = 12 into 12 = 4 × 3 even with dir=ltr.
- MathText locks math runs inside Persian sentences in chat bubbles and figure
  captions, so -1 no longer shows as 1-.
- Family screen: a student sees only the invite-code form; the parent form is
  behind a link.
- Dev-only diagram gallery at ?gallery (not in the production build).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/screens/AskScreen.tsx

@@ -7,7 +7,8 @@ import { askStore, useAskState, type ChatMessage } from '@/state/askStore';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
 import { useToast } from '@/components/Toast';
 import { Screen, ScreenHeader } from '@/components/ui';
-import { Diagram } from '@/components/Diagram';
+import { Diagram } from '@/diagram';
+import { MathText } from '@/lib/MathText';
 import { friendlyError } from '@/lib/errors';
 import { toFa } from '@/lib/format';
 
@@ -222,7 +223,7 @@ function Message({
 }) {
   const toast = useToast();
 
-  if (message.role === 'user') return <Bubble role="user">{message.text}</Bubble>;
+  if (message.role === 'user') return <Bubble role="user"><MathText text={message.text} /></Bubble>;
 
   if (!message.text) {
     return (
@@ -255,7 +256,7 @@ function Message({
   return (
     <div className="flex flex-col gap-1.5">
       <Bubble role="assistant" extra={message.diagram ? <div className="whitespace-normal"><Diagram spec={message.diagram} /></div> : undefined}>
-        {message.text}
+        <MathText text={message.text} />
       </Bubble>
       <div className="flex flex-wrap items-center gap-2 pr-10">
         {message.failedQuestion ? (