Pickers: anchor the desktop dropdown to its chip, never clipped

"The model selection in teach it back is kinda broken at least on desktop":
the desktop panels were position:absolute children of whatever container held
their chip. In chat that is the composer at the bottom of the column, which
works, but Teach it back keeps its chips inside a scrolling form card — so the
panel opened upward out of the card and its top rows (including the selected
model) were cut off. The probe measured top: -66px and no way to reach the
first rows by scrolling the list.

- New components/chat/PickerPopover.tsx: the desktop surface for both pickers,
  portalled to <body> and position:fixed, anchored to the opening chip
  ([data-picker-trigger][aria-expanded="true"]), opening on the side with room
  and capped to the viewport so the panel scrolls as a whole with its heading
  and note attached. It closes on an outside press, Escape, resize or a page
  scroll — but not on scrolling its own list.
- ContextPicker and ModelPicker use it on desktop; the phone sheets and their
  inner list caps are unchanged (the list max-height became a parameter: the
  sheet caps it, the desktop panel scrolls instead).
- teach-test pins it: the panel's rect is fully inside the viewport,
  elementFromPoint over it lands on the panel, it is not a descendant of the
  scrolling card, and picking a model updates the chip + freezmo.chat.model.v1
  (46 checks). Chat and the phone sheets re-verified unchanged (110 + 128).

Version 0.8.3, SW v105.

components/chat/PickerPopover.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import { useAppReducedMotion as useReducedMotion } from "@/lib/motion-pref";
+
+/**
+ * Desktop surface for the context/model pickers.
+ *
+ * The chips live wherever the screen puts them: at the bottom of the chat
+ * column, or inside a scrolling card (Teach it back's start). An absolutely
+ * positioned panel is then clipped by the scrolling ancestor — the teach model
+ * list opened upward and lost its first rows off the top of the viewport — so
+ * this renders the panel in a portal on <body>, `position: fixed`, anchored to
+ * the trigger that opened it. It opens on the side with room, is capped to the
+ * viewport (the panel scrolls, not the page), and closes on resize, on an
+ * outside press or when the page scrolls away from its chip — never floating
+ * loose. Phones keep their bottom sheet.
+ */
+
+/** Gap between the panel and the chip, and the minimum distance to the edge. */
+const GAP = 8;
+/** Below this there is not enough room to open on that side. */
+const MIN_ROOM = 240;
+
+export function PickerPopover({
+  open,
+  label,
+  align = "left",
+  width = "w-80",
+  onClose,
+  children,
+}: {
+  open: boolean;
+  /** Accessible name of the panel (role="dialog"). */
+  label: string;
+  /** Which chip edge the panel lines up with. */
+  align?: "left" | "right";
+  /** Panel width utility class. */
+  width?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+}) {
+  const panel = useRef<HTMLDivElement>(null);
+  const reduceMotion = useReducedMotion();
+  const [style, setStyle] = useState<React.CSSProperties | null>(null);
+
+  /* Anchor to the open chip and fit inside the viewport. */
+  useLayoutEffect(() => {
+    if (!open) {
+      setStyle(null);
+      return;
+    }
+    const place = () => {
+      const node = panel.current;
+      if (!node) return;
+      const anchor = document.querySelector('[data-picker-trigger][aria-expanded="true"]');
+      const rect = anchor?.getBoundingClientRect();
+      const panelWidth = node.offsetWidth || 320;
+      /* The full content height, before any cap is applied. */
+      const natural = node.scrollHeight || node.offsetHeight || 320;
+      const below = rect ? window.innerHeight - rect.bottom - GAP * 2 : MIN_ROOM;
+      const above = rect ? rect.top - GAP * 2 : MIN_ROOM;
+      /* Prefer opening downwards when there is room; otherwise up, and split
+         the difference when neither side is comfortable. */
+      const placement = below >= MIN_ROOM || below >= above ? "bottom" : "top";
+      const room = Math.max(MIN_ROOM, placement === "bottom" ? below : above);
+      const height = Math.min(natural, room);
+      const rawLeft = rect ? (align === "right" ? rect.right - panelWidth : rect.left) : GAP;
+      const left = Math.max(GAP, Math.min(rawLeft, window.innerWidth - panelWidth - GAP));
+      /* Anchored to the chip on whichever side it opens: the panel's near edge
+         sits a GAP away from it, never drifting to the viewport edge. */
+      const top =
+        placement === "bottom"
+          ? (rect?.bottom ?? GAP) + GAP
+          : Math.max(GAP, (rect?.top ?? height + GAP * 2) - GAP - height);
+      setStyle({ top, left, maxHeight: room });
+    };
+    place();
+    const close = () => onClose();
+    /* A scroll inside the panel (the model list) is not the page moving. */
+    const onScroll = (event: Event) => {
+      if (panel.current && event.target instanceof Node && panel.current.contains(event.target)) return;
+      onClose();
+    };
+    window.addEventListener("resize", close);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      window.removeEventListener("resize", close);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [open, align, onClose]);
+
+  /* Desktop dropdown: a press anywhere outside closes it, except on the trigger
+     chips, which toggle their own popover. */
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (panel.current?.contains(target)) return;
+      if (target.closest("[data-picker-trigger]")) return;
+      onClose();
+    };
+    document.addEventListener("pointerdown", onDown);
+    return () => document.removeEventListener("pointerdown", onDown);
+  }, [open, onClose]);
+
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {open ? (
+        <motion.div
+          ref={panel}
+          initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.98 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.98 }}
+          transition={reduceMotion ? { duration: 0 } : { duration: 0.16, ease: "easeOut" }}
+          style={style ?? { top: 0, left: 0, visibility: "hidden" }}
+          className={`glass-panel fixed z-50 overflow-y-auto overscroll-contain p-3 ${width}`}
+          role="dialog"
+          aria-label={label}
+        >
+          {children}
+        </motion.div>
+      ) : null}
+    </AnimatePresence>,
+    document.body,
+  );
+}