feat(knowledge-chat): animated "How it works" RAG architecture panel

Add a collapsible, pulsing architecture diagram to the Knowledge Chat that
visualizes the real RAG pipeline in two rows: Index (Upload -> Docling ->
Split -> Embed/MiniLM -> ChromaDB) and Query (Question -> Embed -> Retrieve
-> Context -> LLM -> Answer), badged with the actual stack (LangChain,
ChromaDB, Docling, sentence-transformers).

Connectors have a flowing dashed track plus a traveling glow dot and nodes
pulse; the whole flow speeds up while the chat/ingest is busy. Honors
prefers-reduced-motion.

ui/src/styles/globals.css

@@ -189,3 +189,21 @@
     scrollbar-gutter: stable;
   }
 }
+
+
+/* ── Knowledge Chat: RAG architecture animated flow ─────────────────────────── */
+@keyframes rag-flow { from { background-position: 0 0; } to { background-position: 20px 0; } }
+@keyframes rag-dot { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
+@keyframes rag-node-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 transparent; }
+  50% { box-shadow: 0 0 11px 1px var(--rag-glow, rgba(56,189,248,0.4)); }
+}
+.rag-track { animation: rag-flow 2.2s linear infinite; }
+.rag-dot { animation: rag-dot 3s linear infinite; }
+.rag-node { animation: rag-node-pulse 3.2s ease-in-out infinite; }
+.rag-flowing .rag-track { animation-duration: 0.6s; }
+.rag-flowing .rag-dot { animation-duration: 1s; }
+.rag-flowing .rag-node { animation-duration: 1.2s; }
+@media (prefers-reduced-motion: reduce) {
+  .rag-track, .rag-dot, .rag-node { animation: none !important; }
+}