将用户发出的消息放在右侧

css/chat.css

@@ -32,6 +32,27 @@
     animation: slideDown 0.3s ease-in forwards;
 }
 
+.message {
+    margin: 5px 0;
+    padding: 10px 15px;
+    max-width: fit-content;
+    border-radius: 12px;
+    word-break: break-word;
+}
+
+  .message.user {
+    background-color: #daf1fc;
+    align-self: flex-end;
+    text-align: left;
+    margin-left: auto;
+}
+
+  .message.bot {
+    background-color: #eee;
+    align-self: flex-start;
+    text-align: left;
+    margin-right: auto;
+}
 
 .input-row {
     display: flex;