Update static/styles.css

static/styles.css

@@ -5,18 +5,23 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
     background-color: #f0f2f5;
+    overflow: auto;
 }
 
 .chat-container {
-    width: 400px;
-    height: 600px;
+    width: 100%;
+    max-width: 400px; /* Maximum width for larger screens */
+    height: 80vh; /* Use viewport height for responsiveness */
+    max-height: 600px; /* Maximum height cap */
     border: 1px solid #ccc;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     background-color: white;
+    display: flex;
+    flex-direction: column;
 }
 
 .chat-header {
@@ -25,12 +30,14 @@ body {
     padding: 10px;
     text-align: center;
     font-size: 20px;
+    flex-shrink: 0;
 }
 
 .chat-messages {
-    height: 500px;
+    flex: 1; /* Allow messages to take available space */
     overflow-y: auto;
     padding: 20px;
+    box-sizing: border-box;
 }
 
 .bot-message {
@@ -39,6 +46,7 @@ body {
     margin: 10px 0;
     border-radius: 5px;
     max-width: 70%;
+    word-wrap: break-word;
 }
 
 .user-message {
@@ -49,12 +57,14 @@ body {
     max-width: 70%;
     margin-left: auto;
     text-align: right;
+    word-wrap: break-word;
 }
 
 .chat-input {
     display: flex;
     padding: 10px;
     border-top: 1px solid #ccc;
+    flex-shrink: 0;
 }
 
 .chat-input input {
@@ -62,6 +72,7 @@ body {
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 5px;
+    box-sizing: border-box;
 }
 
 .chat-input button {
@@ -72,6 +83,11 @@ body {
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.chat-input button:hover {
+    background-color: #d8702a;
 }
 
 .option-button {
@@ -83,6 +99,7 @@ body {
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    transition: background-color 0.3s;
 }
 
 .option-button.green {
@@ -92,3 +109,7 @@ body {
 .option-button.red {
     background-color: #f44336;
 }
+
+.option-button:hover {
+    opacity: 0.9;
+}