Update static/style.css

static/style.css

@@ -134,14 +134,16 @@ body, html {
 
 /* Chat Container */
 .chat {
-    height: 100vh; /* Adjust as needed */
+    height: 100vh;           /* Adjust as needed */
     max-height: fit-content; /* Ensures it doesn't get too large */
-	padding-top: 5px;
-	padding-bottom: 5px;
-	width: 60%;
-	padding-left: 10px;
-  	margin: 0 auto;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    width: 60%;              /* Default width for desktops/laptops */
+    padding-left: 10px;
+    margin: 0 auto;
 }
+
+
 .card {
 	height: calc(100% );
 	max-height: calc(100%);
@@ -221,22 +223,18 @@ input[type="text"] {
 	color: var(--placeholder-color);
 }
 
+a {
+	text-decoration: underline !important;
+	color: blue; /* Keeps the default link color */
+}
 
-
-	a {
-	  text-decoration: underline !important;
-	  color: blue; /* Keeps the default link color */
-	}
-  
-	.attach_btn, .send_btn, .search_btn {
-		border-radius: 15px !important;
-		background-color: var(--input-bg) !important;
-		border: 0 !important;
-		color: var(--text-color) !important;
-		cursor: pointer;
-	}
-
-
+.attach_btn, .send_btn, .search_btn {
+	border-radius: 15px !important;
+	background-color: var(--input-bg) !important;
+	border: 0 !important;
+	color: var(--text-color) !important;
+	cursor: pointer;
+}
 	
 .chat{
 	margin-top: auto;
@@ -247,25 +245,31 @@ input[type="text"] {
 	overflow-y: auto;
 	white-space: nowrap;
 }
+
 .msg_card_body{
 	overflow-y: auto;
 }
+
 .card-header{
 	border-radius: 15px 15px 0 0 !important;
 	border-bottom: 0 !important;
 }
+
 .card-footer{
 border-radius: 0 0 15px 15px !important;
 	border-top: 0 !important;
 }
+
 .container{
 	display: flex;
     flex-direction: column;
     height: 100vh;
 }
+
 .msg_card_body {
     flex-grow: 1;
 }
+
 .search{
 	border-radius: 15px 0 0 15px !important;
 	background-color: rgba(0,0,0,0.3) !important;
@@ -276,6 +280,7 @@ border-radius: 0 0 15px 15px !important;
 	 box-shadow:none !important;
    outline:0px !important;
 }
+
 .type_msg{
 	background-color: rgba(0,0,0,0.3) !important;
 	border:0 !important;
@@ -283,10 +288,12 @@ border-radius: 0 0 15px 15px !important;
 	height: 60px !important;
 	overflow-y: auto;
 }
-	.type_msg:focus{
+
+.type_msg:focus{
 	 box-shadow:none !important;
    outline:0px !important;
 }
+
 .attach_btn{
 	border-radius: 15px 0 0 15px !important;
 	background-color: rgba(0,0,0,0.3) !important;
@@ -294,6 +301,7 @@ border-radius: 0 0 15px 15px !important;
 	color: white !important;
 	cursor: pointer;
 }
+
 .send_btn{
 	border-radius: 0 15px 15px 0 !important;
 	background-color: rgba(0,0,0,0.3) !important;
@@ -301,6 +309,7 @@ border-radius: 0 0 15px 15px !important;
 	color: white !important;
 	cursor: pointer;
 }
+
 .search_btn{
 	border-radius: 0 15px 15px 0 !important;
 	background-color: rgba(0,0,0,0.3) !important;
@@ -308,30 +317,36 @@ border-radius: 0 0 15px 15px !important;
 	color: white !important;
 	cursor: pointer;
 }
+
 .contacts{
 	list-style: none;
 	padding: 0;
 }
+
 .contacts li{
 	width: 100% !important;
 	padding: 5px 10px;
 	margin-bottom: 15px !important;
 }
+
 .active{
 	background-color: rgba(0,0,0,0.3);
 }
+
 .user_img{
 	height: 70px;
 	width: 70px;
 	border:1.5px solid #f5f6fa;
 
 }
+
 .user_img_msg{
 	height: 40px;
 	width: 40px;
 	border:1.5px solid #f5f6fa;
 
 }
+
 .img_cont{
 	position: relative;
 	height: 70px;
@@ -375,7 +390,6 @@ border-radius: 0 0 15px 15px !important;
 	border-radius: 25px;
 }
 
-
 .dark-mode .predictive-text {
     background-color: rgba(0, 0, 0, 0.8) !important; /* Ensure dark background */
     color: white !important;
@@ -445,99 +459,129 @@ border-radius: 0 0 15px 15px !important;
 .action_menu ul li:hover {
 	background-color: rgba(0,0,0,0.2);
 }
-@media (max-width: 768px) {
+
+/* Media Query for Mobile Devices */
+@media (max-width: 350px) {
     .chat {
-        height: 75vh; /* Smaller on mobile */
-    }
-    .msg_card_body {
-        max-height: 60vh;
+        width: 100%; /* Full width on mobile devices */
     }
 }
 
-	.predefined-text a {
-		color: #0a66c2; /* LinkedIn blue */
-		text-decoration: none;
-		font-weight: bold;
-		margin-right: 10px;
-	}
-	
-	.predefined-text a i {
-		margin-right: 5px;
-	}
-	
-	.predefined-text a:hover {
-		text-decoration: underline;
-	}
-/* Mobile Adaptability Enhancements */
-@media (max-width: 576px) {
-	/* Adjust overall card spacing and sizing */
-	.chat {
-		height: 100vh; /* Adjust as needed */
-		max-height: fit-content; /* Ensures it doesn't get too large */
-		padding-top: 5px;
-		padding-bottom: 5px;
-		width: 95%;
-		padding-left: 10px;
-		margin: 0 auto;
-	}
-
-	.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;
-	}
-	.user_info span{
-		font-size: 10px;
-		color: white;
-	}
-	.user_info p{
-		font-size: 0px;
-		color: rgba(255,255,255,0.6);
-	}
-	
-	/* 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;
-	}
-	
+@media (max-width: 568px) {
+  /* Adjust theme toggle and clear chat buttons */
+  
+
+  .clearChat {
+  padding: 4px 8px;       /* Reduced padding */
+  font-size: 12px;        /* Smaller font size */
+  margin: 2px;
+  width: 80px;            /* Fixed width for both buttons */
+  text-align: center;     /* Ensure the text is centered */
+}
+  /* Adjust overall chat container */
+  .chat {
+    height: 100vh;
+    max-height: 100vh;     /* Full viewport height */
+    width: 100%;          /* Full width */
+   
+    padding: 5px;
+    margin: 0;
+  }
 
-	/* Adjust input field and button sizes */
-	.type_msg {
-	  height: 50px;
-	  font-size: 14px;
-	}
-	.btn {
-	  font-size: 12px;
-	  padding: 5px 8px;
-	}
+  /* Adjust card container */
+  .card {
+    margin: 5px;          /* Reduced margin */
+    border-radius: 10px;   /* Softer border radius */
+  }
+  .card-header {
+    
+    padding: 6px;         /* Reduced padding */
+  }
+
+
+
+  .card-footer {
+    /* Let the footer shrink to its content */
+     /* Vertically center the text */
+    
+    /* Adjust text size and spacing */
+    font-size: 14px;      /* Use the desired smaller font size */
+    line-height: 1.2;     /* Reduce line-height to decrease extra vertical space */
+    
+    /* Reduce padding and remove extra margin */
+    padding: 4px 10px;    
+    margin: 0;
+  }
+
+  
+  /* Header layout adjustments: Juit logo on the left, buttons on the right */
+  .card-header {
+    display: flex;
+    justify-content: space-between; /* Space between logo and buttons */
+    align-items: center;
+     gap: 10px;
+  }
+  .juit-logo {
+    order: 1;  /* Position logo on the left */
+  }
+  .header-buttons {
+    order: 2;  /* Position buttons on the right */
+    display: flex;
+    gap: 5px; 
+     margin-left: 10px;/* Space between the buttons */
+  }
+ .img_cont {
+    margin-right: 10px;
+  }
+  
+  
+  /* DO NOT REMOVE THESE: user_info, message area, and image scaling */
+  .user_info {
+    margin-left: 0;
+    text-align: center;
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  .user_info span {
+    font-size: 14px;      /* Adjusted font size */
+  }
+  .user_info p {
+    font-size: 12px;      /* Adjusted font size */
+  }
+.msg_container,
+  .msg_container_send {
+    font-size: 13px;  /* or adjust to your desired size */
+    line-height: 1.3; /* optional: adjust line-height if needed */
+  }
+  /* Adjust message area */
+  .msg_card_body {
+    max-height: 50vh;     /* Adjusted maximum height */
+  }
+
+  /* Scale down images */
+  .img_cont,
+  .user_img {
+    height: 60px;
+    width: 60px;
+  }
+  .img_cont_msg,
+  .user_img_msg {
+    height: 45px;
+    width: 45px;
+  }
+
+  /* Adjust input field and other buttons */
+  .type_msg {
+    height: 50px;
+    font-size: 13.5px;
+  }
+
+  .user_info p {
+    display: none;
+  }
+  
+  .btn, .attach_btn, .send_btn, .search_btn {
+    font-size: 12px;
+    padding: 5px 8px;
   }
-  
+}