Design pass (all themes + chat UI), model picker, reduce-motion toggle

- Aero: blue gradients back on the active segment and every primary
  (Review due, the card's Study button, the composer's send button); a
  frosted backing behind the page heading and the All decks label; a
  bottom-weighted rail tint; chat header/composer/welcome panels; calmer
  orbs; stronger card veil + a stronger blur bake.
- Dark/Light: a dedicated --track token makes progress bars read (the
  first attempt shifted --surface-sunken and the pixel scan caught the
  sheet-contrast regression); brighter dark secondary text; darker light
  segmented labels and difficulty tints; stronger light card border and
  shadow.
- Chat UI: friendly model chip ("Gemma 4 31B") with the raw name in a
  tooltip, larger chips, plain centered disclaimer, vertically centered
  welcome panel, distinct chat-plus icon for new chat.
- Chat models: every chat-capable model from the server's /api/tags is
  selectable (favourites first, search field when long, live-list
  validation in the route); default CHAT_MODEL_DEFAULT or gemma4:31b.
- Reduce motion: Settings toggle (default off) that parks the scene,
  collapses CSS animations and drives framer-motion's calm mode.
- Folders hint, "New" badge on fresh decks.

Contrast: 0 findings, axe clean, mobile 126/126, chat 102/102, wizard
95/95, regression 44/44, i18n 13/13, native 33/33.
Version 0.4.6, SW -> freezmo-v71.

components/chat/ChatScreen.tsx

@@ -10,13 +10,14 @@ import { ContextPicker } from "./ContextPicker";
 import { HistorySheet } from "./HistoryPanel";
 import { MessageRow } from "./MessageRow";
 import { ModelPicker } from "./ModelPicker";
-import { ChatIcon, ChevronDownIcon, ChevronLeftIcon, HistoryIcon, PlusIcon, RefreshIcon } from "@/components/icons";
+import { ChatIcon, ChatPlusIcon, ChevronDownIcon, ChevronLeftIcon, HistoryIcon, RefreshIcon } from "@/components/icons";
 import { ModelErrorActions } from "@/components/ModelErrorActions";
 import { ThemeToggle } from "@/components/ThemeToggle";
 import { Button } from "@/components/ui";
 import { ApiError } from "@/lib/client-api";
 import { extractChatAttachment, streamChat } from "@/lib/chat-client";
 import { buildChatContext, deckHasNotes } from "@/lib/chat-context";
+import { cn, prettyModelName } from "@/lib/utils";
 import { takeChatSeed, type ChatSeed } from "@/lib/chat-seed";
 import { chatActive } from "@/lib/chat-active";
 import { chatHistoryStore, conversationMessages, deleteConversation, ensureChatsHydrated, getConversation, renameConversation, saveConversation } from "@/lib/chat-store";
@@ -167,7 +168,10 @@ export function ChatScreen() {
 
   const activeModel = useMemo(() => {
     if (model && chatModels.some((entry) => entry.name === model)) return model;
-    return chatModels[0]?.name ?? model;
+    // The server puts the default first, but a different server may not have
+    // it — fall back to the first model that is actually available.
+    const firstAvailable = chatModels.find((entry) => entry.available !== false);
+    return (firstAvailable ?? chatModels[0])?.name ?? model;
   }, [model, chatModels]);
 
   const scopeText = useMemo(() => {
@@ -524,7 +528,7 @@ export function ChatScreen() {
     <div className="flex h-full min-h-0 w-full">
       {/* Desktop's conversation list lives in the main sidebar (on /chat). */}
       <div className="relative flex h-full min-h-0 min-w-0 flex-1 flex-col" style={{ paddingBottom: "var(--chat-keyboard, 0px)" }}>
-      <header className="glass sticky top-0 z-30 flex h-14 shrink-0 items-center gap-2 px-2 sm:px-4">
+      <header className="glass chat-header sticky top-0 z-30 flex h-14 shrink-0 items-center gap-2 px-2 sm:px-4">
         <button
           type="button"
           onClick={() => (window.history.length > 1 ? router.back() : router.push("/"))}
@@ -563,16 +567,21 @@ export function ChatScreen() {
             title={t("chat.new")}
             className="grid size-11 place-items-center rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
           >
-            <PlusIcon className="size-5" />
+            <ChatPlusIcon className="size-5" />
           </button>
         </div>
       </header>
 
       <div className="relative min-h-0 flex-1">
         <div ref={scrollRef} onScroll={onScroll} className="chat-scroll h-full overflow-y-auto overscroll-contain">
-          <div className="mx-auto w-full max-w-3xl space-y-4 px-4 py-4">
+          <div
+            className={cn(
+              "mx-auto w-full max-w-3xl space-y-4 px-4 py-4",
+              messages.length === 0 && "flex min-h-full flex-col justify-center",
+            )}
+          >
             {messages.length === 0 ? (
-              <div className="space-y-5 py-6">
+              <div className="chat-empty space-y-5 py-2">
                 <div className="text-center">
                   <span className="mx-auto mb-4 grid size-12 place-items-center rounded-2xl border border-[var(--hairline)] bg-[var(--surface-strong)] text-accent-600 dark:text-accent-200">
                     <ChatIcon className="size-6" />
@@ -671,7 +680,7 @@ export function ChatScreen() {
         </div>
       ) : null}
 
-      <div className="relative shrink-0">
+      <div className="chat-composer relative shrink-0">
         <Composer
           value={draft}
           onChange={setDraft}
@@ -680,7 +689,8 @@ export function ChatScreen() {
           busy={busy}
           online={online}
           scopeLabel={scopeText}
-          modelLabel={activeModel || t("chat.modelTitle")}
+          modelLabel={activeModel ? prettyModelName(activeModel) : t("chat.modelTitle")}
+          modelTitle={activeModel || undefined}
           scopeOpen={scopeOpen}
           modelOpen={modelOpen}
           // The chips toggle their own popover (and open one at a time), so a