Update static/style.css

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,70 @@ 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;
+	}
+  }
+