Updated

static/main.css

@@ -1,4 +1,4 @@
-/* Global Reset */
+/* Reset and base styling */
 * {
   margin: 0;
   padding: 0;
@@ -6,46 +6,47 @@
   font-family: 'Segoe UI', sans-serif;
 }
 
-html, body {
-  height: 100%;
-  width: 100%;
+body {
   background: #f0f2f5;
-  overflow: hidden; /* Prevent page scroll */
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  height: 100vh; /* Full viewport */
+  overflow: hidden; /* Prevent body scroll */
 }
 
-/* Chat Container */
+/* Chat container */
 .chat-container {
-  position: fixed; /* Lock in place */
-  top: 0;
-  left: 0;
   width: 100%;
-  height: 100%; /* Full page */
+  max-width: 600px;
   background: #fff;
-  border-radius: 0; /* No rounding on full-page layout */
+  border-radius: 12px;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
-  padding-bottom: 20px;
+  height: 100%;
+  overflow: hidden; /* Lock container */
 }
 
-/* Chat Header */
+/* Header */
 .chat-header {
   background-color: #10a37f;
-  padding: 10px;
+  padding: 12px;
   text-align: center;
   color: white;
-  font-size: 1.2rem; /* Reduced size */
-  font-weight: bold;
+  font-size: 1.2rem; /* Reduced title size */
 }
 
-/* Chat Box */
+/* Chat scrollable area */
 .chat-box {
-  flex: 1; /* Fill remaining space */
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 15px;
   background-color: #fafafa;
-  overflow-y: auto; /* Scroll inside chat box only */
+  overflow-y: auto; /* Scroll inner chat only */
+  flex-grow: 1;
+  scroll-behavior: smooth;
 }
 
 /* Messages */
@@ -54,13 +55,13 @@ html, body {
   padding: 12px 18px;
   border-radius: 16px;
   font-size: 1rem;
-  line-height: 1.5; /* Better line spacing for Markdown */
+  line-height: 1.5;
   white-space: pre-wrap;
-  word-break: break-word;
+  word-wrap: break-word;
   overflow-wrap: break-word;
-  transform: translateY(20px);
   opacity: 0;
-  animation: slide-in 0.3s forwards;
+  transform: translateY(20px);
+  animation: slideUp 0.25s forwards;
 }
 
 /* User messages */
@@ -77,18 +78,28 @@ html, body {
   color: #000;
 }
 
-/* Lists inside messages */
-.message ol,
-.message ul {
-  margin: 0 0 0 1.2em; /* Proper indent inside bubble */
-  padding-left: 1.2em;
+/* Bot markdown formatting */
+.message.bot ol,
+.message.bot ul {
+  margin: 0 0 0 1.5em;
+  padding-left: 1.5em;
 }
 
-.message li {
-  margin-bottom: 0.3em; /* Space between items */
+.message.bot li {
+  margin-bottom: 0.4em;
+  line-height: 1.5;
 }
 
-/* Chat Input */
+.message.bot ol {
+  list-style-position: inside;
+}
+
+.message.bot pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Chat input area */
 .chat-input {
   display: flex;
   padding: 15px;
@@ -96,17 +107,19 @@ html, body {
   background-color: #fff;
 }
 
-.chat-input textarea {
+.chat-input input {
   flex: 1;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 20px;
   outline: none;
-  resize: none;
+  resize: none; /* Prevent manual resize */
   min-height: 40px;
-  max-height: 150px;
+  max-height: 120px;
+  overflow-y: auto; /* Scroll inside input if long */
 }
 
+/* Send button */
 .chat-input button {
   padding: 10px 18px;
   margin-left: 10px;
@@ -121,8 +134,8 @@ html, body {
   background-color: #0e8f6a;
 }
 
-/* Spinner */
-.spinner {
+/* Loading spinner inside bot message */
+.loading-spinner {
   border: 4px solid #f3f3f3;
   border-top: 4px solid #10a37f;
   border-radius: 50%;
@@ -138,9 +151,9 @@ html, body {
   100% { transform: rotate(360deg); }
 }
 
-@keyframes slide-in {
+@keyframes slideUp {
   to {
-    transform: translateY(0);
     opacity: 1;
+    transform: translateY(0);
   }
 }