Update style.css

style.css

@@ -2,36 +2,66 @@
     padding: 1rem;
     max-width: 800px;
     margin: auto;
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f9;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+}
+
+#chatbox {
+    border: 1px solid #ccc;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    max-height: 400px;
+    overflow-y: auto;
+    background-color: #fff;
+    border-radius: 8px;
 }
 
 .message {
     margin: 0.5rem 0;
+    padding: 0.5rem;
+    border-radius: 5px;
 }
 
 .user-message {
     text-align: right;
-    color: blue;
+    color: #fff;
+    background-color: #007bff;
+    margin-left: auto;
+    width: fit-content;
 }
 
 .bot-message {
     text-align: left;
-    color: green;
-}
-
-#chatbox {
-    border: 1px solid #ccc;
-    padding: 1rem;
-    margin-bottom: 1rem;
-    max-height: 400px;
-    overflow-y: auto;
+    color: #333;
+    background-color: #e9ecef;
+    margin-right: auto;
+    width: fit-content;
 }
 
 input[type="text"] {
     width: calc(100% - 100px);
     padding: 0.5rem;
     margin-right: 0.5rem;
+    border-radius: 5px;
+    border: 1px solid #ccc;
 }
 
 button {
-    padding: 0.5rem;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 5px;
+    background-color: #007bff;
+    color: #fff;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
 }