Update static/styles.css

static/styles.css

@@ -38,29 +38,14 @@ header p {
     color: #888;
 }
 
-/* Chat Box */
-.chat-box {
-    flex: 1;
+/* Input Section */
+.input-section {
     display: flex;
-    flex-direction: column;
-}
-
-#messages {
+    gap: 10px;
     margin-bottom: 20px;
-    padding: 15px;
-    background-color: #F9F9F9;
-    border-radius: 15px;
-    overflow-y: auto;
-    max-height: 350px;
-}
-
-#message-form {
-    display: flex;
-    gap: 15px;
-    justify-content: space-between;
 }
 
-#message-form input {
+.input-section input {
     flex: 1;
     padding: 15px;
     font-size: 1rem;
@@ -70,40 +55,52 @@ header p {
     transition: all 0.3s ease;
 }
 
-#message-form input:focus {
+.input-section input:focus {
     border-color: #6B4FE2;
 }
 
-#message-form button {
-    background-color: #6B4FE2;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    padding: 12px 20px;
-    cursor: pointer;
-    transition: all 0.3s ease;
+.buttons {
     display: flex;
+    gap: 10px;
     align-items: center;
-    justify-content: center;
 }
 
-#message-form button:hover {
-    background-color: #5438A1;
+.button {
+    padding: 10px 20px;
+    font-size: 1rem;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
 }
 
-#message-form button span {
-    font-size: 1rem;
+.clear-btn {
+    background-color: #D1D1D1;
+    color: #333;
 }
 
-/* Footer */
-footer {
-    text-align: center;
-    font-size: 1.1rem;
-    color: #888;
-    padding-top: 10px;
+.clear-btn:hover {
+    background-color: #B5B5B5;
+}
+
+.submit-btn {
+    background-color: #FF7F32;
+    color: white;
+}
+
+.submit-btn:hover {
+    background-color: #FF5A00;
+}
+
+/* Messages Section */
+.messages {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #F9F9F9;
+    border-radius: 15px;
+    overflow-y: auto;
+    max-height: 350px;
 }
 
-/* Message Styling */
 .user-message, .bot-message {
     background-color: #F1F1F1;
     padding: 15px;
@@ -124,7 +121,10 @@ footer {
     align-self: flex-start;
 }
 
-footer p {
-    font-size: 1rem;
-    color: #777;
+/* Footer */
+footer {
+    text-align: center;
+    font-size: 1.1rem;
+    color: #888;
+    padding-top: 10px;
 }