From a7741b59851048fc50f24e23cd1b2dcc196b98ec Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Sun, 15 Mar 2026 23:35:58 +0100
Subject: [PATCH] feat: Chat-Highlight scrollt zum Element, roter prominenter
 Pulse-Effekt

---
 src/static/css/style.css | 18 ++++++++++--------
 src/static/js/chat.js    |  7 +++++--
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/static/css/style.css b/src/static/css/style.css
index 19e09de..85e7861 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -4927,17 +4927,19 @@ a.map-popup-article:hover {
 
 /* Chat UI-Highlight: Bedienelemente hervorheben */
 @keyframes chat-ui-pulse {
-    0%   { box-shadow: 0 0 0 0 rgba(200, 168, 81, 0.7); }
-    40%  { box-shadow: 0 0 0 8px rgba(200, 168, 81, 0.3); }
-    80%  { box-shadow: 0 0 0 12px rgba(200, 168, 81, 0); }
-    100% { box-shadow: 0 0 0 0 rgba(200, 168, 81, 0); }
+    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
+    15%      { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0.5); }
+    30%      { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2); }
+    45%      { box-shadow: 0 0 0 12px rgba(220, 53, 69, 0.5); }
+    60%      { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2); }
+    75%      { box-shadow: 0 0 0 14px rgba(220, 53, 69, 0.4); }
+    90%      { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1); }
 }
 .chat-ui-highlight {
-    animation: chat-ui-pulse 1s ease-out 3;
-    outline: 2px solid var(--accent) !important;
-    outline-offset: 3px;
+    animation: chat-ui-pulse 2s ease-in-out 2;
+    outline: 3px solid #dc3545 !important;
+    outline-offset: 4px;
     border-radius: var(--radius-sm);
     position: relative;
     z-index: 100;
-    transition: outline 0.3s ease;
 }
diff --git a/src/static/js/chat.js b/src/static/js/chat.js
index 36cb91f..20d8bde 100644
--- a/src/static/js/chat.js
+++ b/src/static/js/chat.js
@@ -253,11 +253,14 @@ const Chat = {
                         var el = document.querySelector(sel);
                         if (el) {
                             highlighted.add(sel);
-                            el.classList.add('chat-ui-highlight');
+                            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                             (function(element) {
+                                setTimeout(function() {
+                                    element.classList.add('chat-ui-highlight');
+                                }, 400);
                                 setTimeout(function() {
                                     element.classList.remove('chat-ui-highlight');
-                                }, 3000);
+                                }, 4400);
                             })(el);
                         }
                     }