Improving layout of the chat widget.

static/css/eveai-chat-style.css

@@ -7,12 +7,16 @@
   --algorithm-color-alg1: #f00; /* Algorithm 1 color */
   --algorithm-color-alg2: #0f0; /* Algorithm 2 color */
   --algorithm-color-alg3: #00f; /* Algorithm 3 color */
+  --status-line-color: #6c757d; /* Color for the status line text */
+  --status-line-bg: #e9ecef; /* Background color for the status line */
+  --status-line-height: 30px; /* Fixed height for the status line */
 }
 
 .chat-container {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 99vh;
+  /*max-height: 100vh;*/
   max-width: 600px;
   margin: auto;
   border: 1px solid #ccc;
@@ -75,3 +79,38 @@
   cursor: pointer;
   color: #007bff;
 }
+
+/* New CSS for the status-line */
+.status-line {
+  height: var(--status-line-height); /* Fixed height for the status line */
+  padding: 5px 10px;
+  background-color: var(--status-line-bg); /* Background color */
+  color: var(--status-line-color); /* Text color */
+  font-size: 0.9rem; /* Slightly smaller font size */
+  text-align: center; /* Centered text */
+  border-top: 1px solid #ccc; /* Subtle top border */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+  .chat-container {
+    max-width: 90%; /* Reduce max width on smaller screens */
+  }
+}
+
+@media (max-width: 480px) {
+  .chat-container {
+    max-width: 95%; /* Further reduce max width on very small screens */
+  }
+
+  .question-area input {
+    font-size: 0.9rem; /* Adjust input font size for smaller screens */
+  }
+
+  .status-line {
+    font-size: 0.8rem; /* Adjust status line font size for smaller screens */
+  }
+}