message streaming

static/css/chat.css

@@ -94,6 +94,49 @@ body {
     color: #111827;
 }
 
+/* Typing / loading indicator */
+.message--loading {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 12px 16px;
+}
+
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #9ca3af;
+    animation: typing-bounce 1.2s infinite ease-in-out;
+}
+
+.typing-dot:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.typing-dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typing-bounce {
+
+    0%,
+    60%,
+    100% {
+        transform: translateY(0);
+        background: #9ca3af;
+    }
+
+    30% {
+        transform: translateY(-6px);
+        background: #6b7280;
+    }
+}
+
 .chat__footer {
     padding: 16px 20px;
     border-top: 1px solid #e5e7eb;
@@ -125,6 +168,22 @@ body {
     cursor: pointer;
 }
 
+.chat__button:disabled {
+    background: #cbd5f5;
+    color: #ffffff;
+    cursor: not-allowed;
+    opacity: 0.75;
+}
+
+.chat__button--secondary {
+    background: #e5e7eb;
+    color: #1f2937;
+}
+
+.chat__button--secondary:hover {
+    background: #d1d5db;
+}
+
 .chat__status {
     padding: 8px 20px 0;
     font-size: 12px;