Update style.css

style.css

@@ -20,15 +20,41 @@ body {
 
 #chat-box {
     height: 400px;
-    overflow-y: scroll;
+    overflow-y: auto;
     border: 1px solid #ccc;
     margin-bottom: 10px;
     padding: 10px;
+    background-color: #f9f9f9;
+}
+
+.message {
+    padding: 8px 15px;
+    margin: 5px;
+    border-radius: 10px;
+    max-width: 80%;
+}
+
+.user {
+    background-color: #dcf8c6;
+    align-self: flex-end;
+}
+
+.bot {
+    background-color: #e5e5ea;
+    align-self: flex-start;
+}
+
+.error {
+    background-color: #ffdddd;
+    color: #d8000c;
+    align-self: center;
 }
 
 #user-input {
     width: calc(100% - 80px);
     padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
 }
 
 #send-button {
@@ -37,6 +63,7 @@ body {
     background-color: #007bff;
     color: white;
     border: none;
+    border-radius: 5px;
     cursor: pointer;
 }