Update static/app.css

static/app.css

@@ -85,28 +85,26 @@ color: white;
     align-items:center;
 }*/
 /* Base layout */
-html, body { 
-    height: 100vh;
-    width: 100vw;
+/* Reset & base layout */
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    background-color: white;
-    font-family: sans-serif;
 }
 
-/* Body structure with flex layout */
-body {
+html, body { 
+    height: 100vh;
+    width: 100vw;
+    font-family: sans-serif;
+    background-color: white;
     display: flex;
     flex-direction: column;
 }
 
-/* Header */
+/* Header (fixed height) */
 header {
     flex: 0 0 10vh;
-    width: 100%;
     display: flex;
-    justify-content: flex-start;
     align-items: center;
     gap: 20px;
     padding: 0 20px;
@@ -128,43 +126,36 @@ em {
     color: rgb(42, 42, 248);
 }
 
-/* Chat conversation area */
+/* Conversation area (fills remaining space, scrolls only when needed) */
 .convo {
     flex: 1;
-    width: 100%;
-    overflow-y: auto; 
+    overflow-y: auto;
     padding: 10px 20px;
-    box-sizing: border-box;
     background-color: #fafafa;
 }
 
-/* Input + icons section */
+/* Bottom input section */
 .qtdoc {
-    flex: 0 0 15vh;
-    width: 100%;
+    flex: 0 0 auto;
+    padding: 10px 20px;
+    background-color: #f0f0f0;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 10px 20px;
-    background-color: #f0f0f0;
     box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
-    box-sizing: border-box;
 }
 
-/* Input box */
+/* Input container */
 .qt {
     flex: 1;
-    height: 100%;
-    max-height: 60px;
-    border: none;
-    background-color: #8d8b8b;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
+    background-color: #8d8b8b;
     border-radius: 10px;
-    margin: 10px;
+    margin-right: 10px;
     padding: 0 10px;
-    box-sizing: border-box;
+    height: 50px;
 }
 
 .qt input {
@@ -173,7 +164,6 @@ em {
     border: none;
     background-color: #8d8b8b;
     color: white;
-    margin: 10px;
     font-size: 16px;
 }
 
@@ -182,29 +172,25 @@ em {
 }
 
 .qt input:focus {
-    border: none;
     outline: none;
 }
 
-/* Icon styles */
+/* Icons beside input */
 .icons {
-    width: 18%;
     display: flex;
-    gap: 2%;
+    gap: 10px;
     font-size: 20px;
-    cursor: pointer;
-    justify-content: space-around;
-    align-items: center;
     color: white;
+    align-items: center;
+    cursor: pointer;
 }
 
-/* Send button styling */
+/* Send button */
 .sendingQA {
     background-color: #3b82f6;
     color: white;
     padding: 10px 15px;
     border-radius: 8px;
-    margin-left: 10px;
     cursor: pointer;
     border: none;
     font-size: 16px;