From d2545c4fafc01b8cdface1055a3e47f99578875b Mon Sep 17 00:00:00 2001
From: Thomas Hackner <thomas@hackner.dev>
Date: Tue, 7 Jul 2026 14:48:04 +0000
Subject: [PATCH] KI-Chat: Warte-Indikator als gestaffelte Bounce-Animation

Drei Punkte mit gestaffeltem Animation-Delay (klassische Tipp-Animation),
inkl. prefers-reduced-motion-Fallback (statisch).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 views/chat.ejs | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/views/chat.ejs b/views/chat.ejs
index 10d792b..137bb08 100644
--- a/views/chat.ejs
+++ b/views/chat.ejs
@@ -5,7 +5,22 @@
     <style>
         #chatLog::-webkit-scrollbar { width: 8px; }
         #chatLog::-webkit-scrollbar-thumb { background: rgba(120,120,120,.4); border-radius: 4px; }
-        .typing-dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; display: inline-block; }
+        /* Typing indicator: three dots with a staggered bounce. */
+        .typing-dot {
+            width: 7px; height: 7px; border-radius: 9999px;
+            background: currentColor; display: inline-block;
+            opacity: 0.35;
+            animation: chat-typing 1.2s infinite ease-in-out both;
+        }
+        .typing-dot:nth-child(2) { animation-delay: 0.18s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.36s; }
+        @keyframes chat-typing {
+            0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
+            40% { transform: translateY(-5px); opacity: 1; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+            .typing-dot { animation: none; opacity: 0.6; }
+        }
         /* Markdown rendering inside assistant bubbles */
         .chat-md { line-height: 1.5; }
         .chat-md > *:first-child { margin-top: 0; }