minor UI fixes

src/index.css

@@ -1,7 +1,26 @@
-/* ponytail: Google Fonts CSS2 import — single request, all families/weights.
-   TODO: download woff2 to public/fonts/ and switch to @font-face for true
-   offline-first. Until then, this needs network on first run. */
-@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap");
+/* ponytail: fonts self-hosted as variable woff2 (latin subset) in public/fonts/
+   for true offline-first — a desktop app must not depend on Google's CDN. */
+@font-face {
+  font-family: "Cinzel";
+  font-style: normal;
+  font-weight: 600 700;
+  font-display: swap;
+  src: url("/fonts/cinzel.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url("/fonts/inter.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("/fonts/jetbrainsmono.woff2") format("woff2");
+}
 
 @import "tailwindcss";
 
@@ -39,11 +58,6 @@
   --font-mono: "JetBrains Mono", ui-monospace, monospace;
 }
 
-/* ─── Self-Hosted Fonts ─────────────────────────────────────── */
-/* ponytail: Google Fonts are loaded at the top of this file (must precede
-   Tailwind per CSS spec). TODO: download woff2 to public/fonts/ and switch
-   to @font-face for true offline-first. */
-
 /* ─── Base Styles ───────────────────────────────────────────── */
 
 * {
@@ -186,6 +200,33 @@ body,
   to { opacity: 1; }
 }
 
+/* ponytail: shimmer skeleton for image/art loading, and a thinking-dot
+   cycle for LLM waits. Replaces "Generating…" button text for 5–20s waits. */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-surface) 25%,
+    var(--color-bg-card-hover) 50%,
+    var(--color-bg-surface) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes thinking {
+  0%, 80%, 100% { opacity: 0.2; }
+  40% { opacity: 1; }
+}
+.thinking-dot {
+  animation: thinking 1.2s ease-in-out infinite;
+}
+.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
+.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
+
 /* ponytail: respect users who ask for less motion. framer-motion honors this
    via its useReducedMotion hook, but the inline keyframes/glass-card transitions
    still need this CSS guard. */