Update static/style.css

static/style.css

@@ -0,0 +1,45 @@
+body {
+    font-family: Arial, sans-serif;
+}
+
+.chat-box {
+    height: 70vh;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+}
+
+.message-container {
+    display: flex;
+    margin-bottom: 1rem;
+}
+
+.message-bubble {
+    max-width: 70%;
+    padding: 0.75rem 1rem;
+    border-radius: 1.25rem;
+    word-wrap: break-word;
+}
+
+/* User messages align to the right */
+.user-message {
+    justify-content: flex-end;
+}
+
+.user-message .message-bubble {
+    background-color: #0d6efd; /* Bootstrap primary color */
+    color: white;
+    border-bottom-right-radius: 0.25rem;
+}
+
+/* Bot messages align to the left */
+.bot-message {
+    justify-content: flex-start;
+}
+
+.bot-message .message-bubble {
+    background-color: #e9ecef; /* Bootstrap light grey */
+    color: black;
+    border-bottom-left-radius: 0.25rem;
+}