optimize ux think mode

public/assets/styles/base.css

@@ -371,4 +371,42 @@ body {
 }
 .text-glow{
     text-shadow: #86b7fe 2px 1px 14px;
+}
+
+span.think {
+    color: #86b7fe;
+}
+
+.think {
+    display: inline-block;
+    color: rgba(255, 255, 255, 0.72);
+    background-image: linear-gradient(
+            100deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0) 32%,
+            rgba(255, 255, 255, 1) 50%,
+            rgba(255, 255, 255, 0) 58%,
+            rgba(255, 255, 255, 0) 100%
+    );
+    background-size: 180% 100%;
+    background-repeat: no-repeat;
+    background-position: 220% 0;
+    -webkit-background-clip: text;
+    background-clip: text;
+    animation: thinkScan 2.2s linear infinite;
+}
+
+@keyframes thinkScan {
+    0% {
+        background-position: 180% 0;
+    }
+    100% {
+        background-position: -20% 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .think {
+        animation: none;
+    }
 }