update: 新增聊天输入框

main/xiaozhi-server/test/css/test_page.css

@@ -193,18 +193,55 @@ body {
 }
 
 /* ==================== 聊天消息流（弹幕样式） ==================== */
-.chat-stream {
+.chat-container {
     position: absolute;
-    bottom: 100px;
+    bottom: 150px;
     right: 20px;
+    z-index: 100;
+}
+
+.chat-stream {
     width: 300px;
     max-height: 200px;
     overflow-y: auto;
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     gap: 8px;
-    z-index: 100;
     pointer-events: none;
+    margin-bottom: 10px;
+}
+
+.chat-ipt {
+    width: 100%;
+    display: none;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.chat-ipt input {
+    width: 100%;
+    padding: 12px 16px;
+    border: none;
+    border-radius: 24px;
+    background: rgba(35, 39, 42, 0.85);
+    backdrop-filter: blur(10px);
+    color: white;
+    font-size: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+.chat-ipt input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.chat-ipt input:focus {
+    outline: none;
+    border-color: rgba(88, 101, 242, 0.6);
+    box-shadow: 0 4px 16px rgba(88, 101, 242, 0.3);
+    background: rgba(45, 49, 52, 0.9);
 }
 
 .chat-message {
@@ -955,10 +992,10 @@ body {
         font-size: 10px;
     }
 
-    .chat-stream {
-        width: 250px;
+    .chat-container {
+        width: 230px;
         right: 10px;
-        bottom: 80px;
+        bottom: 105px;
     }
 
     .message-bubble {