optimize retrieve logic

public/assets/styles/base.css

@@ -19,19 +19,19 @@ body {
     font-size: 0.85rem;
 }
 
-h1 {
-    font-size: 1.49rem;
+h1,.h1 {
+    font-size: 1.75rem;
 }
 
-h2 {
-    font-size: 1.31rem;
+h2,.h2 {
+    font-size: 1.35rem;
 }
 
-h3 {
-    font-size: 1.13rem;
+h3,.h3 {
+    font-size: 1.35rem;
 }
 
-h4, h5, h6 {
+h4, h5, h6,.h4,.h5,.h6 {
     font-size: 0.95rem;
 }
 
@@ -414,4 +414,52 @@ span.think {
 .bubble img {
     max-width: 50px;
     max-height: 50px;
-}
+}
+
+/*####################################*/
+.example-1,
+.example-2 {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.example-1 .inner,
+.example-2 .inner {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+}
+.example-2 .inner {
+    margin: 2px;
+}
+.example-2::before {
+    content: "";
+    display: block;
+    background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(102, 102, 102, 0.75) 50%,
+            rgba(255, 255, 255, 0) 100%
+    );
+    height: 300px;
+    width: 100px;
+    transform: translate(0);
+    position: absolute;
+    animation: rotate 5s linear forwards infinite;
+    z-index: 0;
+    top: 50%;
+    transform-origin: top center;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

public/index.html

@@ -18,7 +18,12 @@
 
 <div class="container">
     <div class="header">
-        <h1>RetrieX KI-Agent</h1>
+        <div>
+            <div class="d-flex">
+                <img src="/assets/img/logo.png" style="max-width: 100px;">
+            </div>
+            <div class="text-info fw-bold">KI-Agent</div>
+        </div>
         <div class="small">powered by mitho®</div>
         <div class="spacer"></div>
         <button id="clear" class="btn btn-trans">Diesen Chat löschen</button>