move user chat bubble formatting to css

css/styles.css

@@ -26,6 +26,14 @@
   overflow: hidden;
 }
 
+.user-message {
+  background-color: #1f2937;
+  color: white;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+  max-width: 70%;
+}
+
 .typing-indicator {
   display: flex;
   align-items: center;

js/api.js

@@ -195,10 +195,10 @@ export async function onUserRequest(message, conversationID) {
     const messageElement = document.createElement('div');
     messageElement.className = 'flex justify-end mb-3';
     messageElement.innerHTML = `
-      <div class="bg-gray-800 text-white rounded-lg py-2 px-4 max-w-[70%]">
-        ${message}
-      </div>
-    `;
+        <div class="user-message">
+          ${message}
+        </div>
+        `;
 
     const chatMessages = document.getElementById('chat-messages');
     chatMessages.appendChild(messageElement);