From 48d84634819c672a2e5494687c78f849714d938b Mon Sep 17 00:00:00 2001
From: Till Tomczak <till.tmk@gmail.com>
Date: Sun, 27 Apr 2025 08:00:53 +0200
Subject: [PATCH] Enhance chat interface styling in index.html: Add animations
 for chat messages and typing indicators, implement smooth scrolling for chat
 messages, and customize scrollbar appearance. Introduce hover effects for
 quick query buttons to improve user interaction and visual feedback.

---
 website/templates/index.html | 56 ++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/website/templates/index.html b/website/templates/index.html
index 470154a..3e165a2 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -75,6 +75,62 @@
     height: 100vh;
     z-index: -1;
   }
+  
+  /* Chat-Animationen */
+  .typing-dots span {
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+  }
+  
+  /* Chat-Nachrichten-Animation */
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 10px, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  
+  #embedded-chat-messages > div {
+    animation: fadeInUp 0.3s ease-out forwards;
+  }
+  
+  /* Sanftes Scrollen im Chat */
+  #embedded-chat-messages {
+    scroll-behavior: smooth;
+  }
+  
+  /* Benutzerdefinierter Scrollbar für den Chat */
+  #embedded-chat-messages::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  #embedded-chat-messages::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 10px;
+  }
+  
+  #embedded-chat-messages::-webkit-scrollbar-thumb {
+    background-color: rgba(139, 92, 246, 0.3);
+    border-radius: 10px;
+  }
+  
+  .dark #embedded-chat-messages::-webkit-scrollbar-thumb {
+    background-color: rgba(139, 92, 246, 0.5);
+  }
+  
+  /* Hover-Effekt für Quick-Query-Buttons */
+  .quick-query-btn:hover {
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(139, 92, 246, 0.1), rgba(96, 165, 250, 0.1));
+  }
+  
+  .dark .quick-query-btn:hover {
+    background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(96, 165, 250, 0.2));
+  }
 </style>
 {% endblock %}