none

static/style.css

@@ -34,11 +34,15 @@ body, html {
 	background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%)!important;
     color: var(--text-color) !important;
 }
+
+  
+
 /* Light Mode - Ensure theme toggle button is dark */
 /* Theme Toggle Button */
 #themeToggle {
     position: absolute;
     right: 15px;
+	margin-right: 0.5rem;
     top: 10px;
     font-size: 14px;
     padding: 5px 10px;
@@ -468,4 +472,69 @@ border-radius: 0 0 15px 15px !important;
 	
 	.predefined-text a:hover {
 		text-decoration: underline;
-	}
+	}
+/* Mobile Adaptability Enhancements */
+@media (max-width: 576px) {
+	/* Adjust overall card spacing and sizing */
+	.card {
+	  margin: 10px;
+	  border-radius: 10px;
+	}
+	.card-header,
+	.card-footer {
+	  padding: 10px;
+	}
+	
+	/* Stack header elements vertically and center them */
+	.card-header .d-flex {
+	  flex-direction: column;
+	  align-items: center;
+	}
+	.user_info {
+	  margin-left: 0;
+	  text-align: center;
+	  margin-bottom: 10px;
+	}
+	/* Center the button container */
+	.d-flex.flex-column.align-items-end.ml-auto {
+	  margin: 0 auto;
+	}
+	
+	/* Adjust chat container height */
+	.chat {
+	  height: 80vh;
+	}
+	.msg_card_body {
+	  max-height: 50vh;
+	}
+	
+	/* Reduce sizes of images for header and messages */
+	.img_cont,
+	.user_img {
+	  height: 50px;
+	  width: 50px;
+	}
+	.img_cont_msg,
+	.user_img_msg {
+	  height: 30px;
+	  width: 30px;
+	}
+	
+	/* Adjust text sizes for header info */
+	.user_info span {
+	  font-size: 16px;
+	}
+	.user_info p {
+	  font-size: 8px;
+	}
+	
+	/* Adjust input field and button sizes */
+	.type_msg {
+	  height: 50px;
+	  font-size: 14px;
+	}
+	.btn {
+	  font-size: 12px;
+	  padding: 5px 8px;
+	}
+  }

templates/chat.html

@@ -44,12 +44,16 @@
                                 <span>JUIT AI Assist</span>
                                 <p>Explore College and Beyond: Ask Anything! 🎓</p>
                                 <!-- Add this inside the card-header (after user_info div) -->
-<button id="themeToggle" class="btn btn-sm btn-light ml-auto">Light Mode</button>
-
+                             
                             </div>
+                            <div class="d-flex flex-column align-items-end ml-auto">
+                                <button id="themeToggle" class="btn btn-sm btn-light" style="position: static;">Light Mode</button>
+        
+                                <button id="clearChat" class="btn btn-danger btn-sm mt-2">Clear Chat</button>
+                              </div>
                         </div>
                     </div>
-
+                 
                     <div id="messageFormeight" class="card-body msg_card_body">
                         <!-- Chat messages will be displayed here -->
                     </div>
@@ -68,7 +72,7 @@
                                 </button>
                             </div>
                         </form>
-                        <button id="clearChat" class="btn btn-danger mt-2">Clear Chat</button>
+                     
                         
                         <div class="card-footer text-center">
                             <div class="d-flex justify-content-center align-items-center">
@@ -278,9 +282,13 @@
             });
         
             function updateButton() {
-                themeToggle.textContent = body.classList.contains("light-mode")
-                    ? "Switch to Dark Mode"
-                    : "Switch to Light Mode";
+                if (body.classList.contains("light-mode")) {
+                    // Show sun icon when in light mode (indicating you can switch to dark)
+                    themeToggle.innerHTML = '<i class="fas fa-sun"></i> Dark Mode';
+                } else {
+                    // Show moon icon when in dark mode (indicating you can switch to light)
+                    themeToggle.innerHTML = '<i class="fas fa-moon"></i> Light Mode';
+                }
             }
         });