Add styles.css

styles.css

@@ -0,0 +1,47 @@
+@import url("https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&display=swap");
+
+#CHATBOT {
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px #d6dade;
+  backdrop-filter: blur(4.5px);
+  -webkit-backdrop-filter: blur(4.5px);
+  border: 1px solid rgba(255, 255, 255, 0.28);
+}
+
+.message.bot {
+  background: rgba(255, 255, 255, 0.6) !important;
+  font-family: "Hind Madurai", sans-serif;
+}
+
+.message.bot * {
+  color: #000000;
+}
+
+.message.user {
+  background: rgba(0, 0, 0, 0.35) !important;
+  font-family: "Hind Madurai", sans-serif;
+}
+
+.message.user * {
+  color: #ffffff !important;
+}
+
+.avatar-container img {
+  padding: 0 !important;
+}
+
+input,
+textarea {
+  border: 2px solid #000000 !important; /* Change border color to black */
+  border-radius: 50px; /* Optional: Add rounded corners */
+  background-color: #e8e9ea !important; /* Optional: Match background color */
+  color: #000000 !important; /* Set text color for light mode */
+}
+
+body.dark-mode input,
+body.dark-mode textarea {
+  background-color: #2c2c2c !important; /* Match dark mode input background */
+  color: #cccccc !important; /* Set text color for dark mode */
+  border: 2px solid #cccccc !important; /* Optional: Change border color for dark mode */
+}