Update static/style.css

static/style.css

@@ -1,468 +1,543 @@
 body, html {
-  height: 100%;
-  margin: 0;
-  background: var(--bg-color);
-  background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
-  color: var(--text-color);
+	height: 100%;
+	margin: 0;
+	background: var(--bg-color);
+	background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
+	color: var(--text-color);
 }
 :root {
-  --bg-color: rgb(44, 47, 59);
-  --gradient-start: rgb(38, 51, 61);
-  --gradient-mid: rgb(50, 55, 65);
-  --gradient-end: rgb(33, 33, 78);
-  --card-bg: rgba(0, 0, 0, 0.4);
-  --text-color: white;
-  --msg-bg: rgb(82, 172, 255);
-  --msg-send-bg: #58cc71;
-  --placeholder-color: #ccc;
-  --input-bg: rgba(0,0,0,0.3);
-  --border-color: white;
+	--bg-color: rgb(44, 47, 59);
+	--gradient-start: rgb(38, 51, 61);
+	--gradient-mid: rgb(50, 55, 65);
+	--gradient-end: rgb(33, 33, 78);
+	--card-bg: rgba(0, 0, 0, 0.4);
+	--text-color: white;
+	--msg-bg: rgb(82, 172, 255);
+	--msg-send-bg: #58cc71;
+	--placeholder-color: #ccc;
+	--input-bg: rgba(0,0,0,0.3);
+	--border-color: white;
 }
 .light-mode {
-  --bg-color: #e6e6e6;
-  --gradient-start: #dcdcdc;
-  --gradient-mid: #e6e6e6;
-  --gradient-end: #cfcfcf;
-  --card-bg: rgba(255, 255, 255, 0.95);
-  --text-color: #222;
-  --msg-bg: #3498db;
-  --msg-send-bg: #2ecc71;
-  --placeholder-color: #666;
-  --input-bg: rgba(255, 255, 255, 0.85);
-  --border-color: #444;
-  
-  background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%)!important;
-  color: var(--text-color) !important;
+    --bg-color: #e6e6e6; /* Cool light grey background */
+    --gradient-start: #dcdcdc; /* Softer gradient transition */
+    --gradient-mid: #e6e6e6;
+    --gradient-end: #cfcfcf;
+    --card-bg: rgba(255, 255, 255, 0.95); /* Slightly more opaque for clarity */
+    --text-color: #222; /* Darker text for better contrast */
+    --msg-bg: #3498db; /* Incoming message bubble color */
+    --msg-send-bg: #2ecc71; /* Sent message bubble color */
+    --placeholder-color: #666; /* Darker placeholder text for readability */
+    --input-bg: rgba(255, 255, 255, 0.85);
+    --border-color: #444; /* Slightly softer black for a modern look */
+    
+	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;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+}
 .dark-mode {
-  --bg-color: #1a1a1a;
-  --gradient-start: #2c2f36;
-  --gradient-mid: #343a40;
-  --gradient-end: #23272a;
-  --card-bg: rgba(0, 0, 0, 0.6);
-  --text-color: #f8f8f8;
-  --msg-bg: #3498db;
-  --msg-send-bg: #2ecc71;
-  --placeholder-color: #bbb;
-  --input-bg: rgba(0,0,0,0.5);
-  --border-color: #777;
-  
-  background-image: linear-gradient(to top, #09203f 0%, #537895 100%)!important;
-  color: var(--text-color) !important;
+    --bg-color: #1a1a1a; /* Slightly darker for better contrast */
+    --gradient-start: #2c2f36;
+    --gradient-mid: #343a40;
+    --gradient-end: #23272a;
+    --card-bg: rgba(0, 0, 0, 0.6); /* More opacity to make text more readable */
+    --text-color: #f8f8f8; /* Slightly off-white for less strain */
+    --msg-bg: #3498db;
+    --msg-send-bg: #2ecc71;
+    --placeholder-color: #bbb;
+    --input-bg: rgba(0,0,0,0.5);
+    --border-color: #777;
+    
+    background-image: linear-gradient(to top, #09203f 0%, #537895 100%)!important;
+    color: var(--text-color) !important;
 }
 .dark-mode .msg_container {
-  background-color: var(--msg-bg) !important;
-  color: #000000 !important;
+    background-color: var(--msg-bg) !important;
+    color: #000000 !important; /* Ensure text is visible */
 }
+
 .dark-mode .msg_container_send {
-  background-color: var(--msg-send-bg) !important;
-  color: #000000 !important;
+    background-color: var(--msg-send-bg) !important;
+    color: #000000 !important;
 }
 .dark-mode .type_msg::placeholder {
-  color: rgba(255, 255, 255, 0.7) !important;
+    color: rgba(255, 255, 255, 0.7) !important; /* Make it more readable */
 }
+
+/* Dark Mode - Light button */
 .dark-mode #themeToggle {
-  background-color: #ddd !important;
-  color: black !important;
-  border: 1px solid #333 !important;
+    background-color: #ddd !important;
+    color: black !important;
+    border: 1px solid #333 !important;
 }
+
+/* Light Mode - Dark button */
 .light-mode #themeToggle {
-  background-color: #333 !important;
-  color: white !important;
-  border: 1px solid #000 !important;
+    background-color: #333 !important;
+    color: white !important;
+    border: 1px solid #000 !important;
 }
+
+
+
 .light-mode .user_info span,
 .light-mode .user_info p {
-  color: var(--text-color) !important;
+    color: var(--text-color) !important;
 }
+
 .light-mode .type_msg {
-  background-color: var(--input-bg) !important;
-  color: var(--text-color) !important;
-  border: 1px solid var(--border-color) !important;
+    background-color: var(--input-bg) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+/* Placeholder text */
+.light-mode .type_msg::placeholder {
+    color: var(--placeholder-color) !important;
+}
+
+/* Chat container */
+.light-mode .card {
+    background-color: var(--card-bg) !important;
+    border: 1px solid var(--border-color);
+}
+
+.light-mode .msg_container {
+    background-color: var(--msg-bg) !important;
+    color: #fff !important; /* White text for better contrast */
 }
+
+.light-mode .msg_container_send {
+    background-color: var(--msg-send-bg) !important;
+    color: #fff !important;
+}
+
 ::placeholder {
-  color: var(--placeholder-color);
-  opacity: 1;
+	color: var(--placeholder-color);
+	opacity: 1;
 }
 
 /* Chat Container */
 .chat {
-  height: 90vh;
-  max-height: 700px;
+    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;
 }
 .card {
-  height: calc(100%);
-  max-height: calc(100%);
-  overflow: hidden;
-  position: relative;
-  background-color: var(--card-bg) !important;
-  border-radius: 15px !important;
+	height: calc(100% );
+	max-height: calc(100%);
+	overflow: hidden;
+	position: relative;
+	background-color: var(--card-bg) !important;
+	border-radius: 15px !important;
+	
+}
+
+.user_info span{
+	font-size: 30px;
+	color: white;
 }
+.user_info p{
+	font-size: 20px;
+	color: rgba(255,255,255,0.6);
+}
+
+/* Message Box */
 .msg_card_body {
-  max-height: 70vh;
-  overflow-y: auto;
+
+    max-height: 70vh; /* Adjust based on screen size */
+    overflow-y: auto; /* Enable scrolling */
 }
 
 /* Predictive Text */
 .predictive-text {
-  position: absolute;
-  background-color: var(--input-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  padding: 5px;
-  z-index: 999;
-  cursor: pointer;
-  max-height: 150px;
-  overflow-y: auto;
-  width: calc(100% - 22px);
-  bottom: 65px;
-  left: 10px;
-  color: var(--text-color);
+	position: absolute;
+	background-color: var(--input-bg);
+	border: 1px solid var(--border-color);
+	border-radius: 10px;
+	padding: 5px;
+	z-index: 999;
+	cursor: pointer;
+	max-height: 150px;
+	overflow-y: auto;
+	width: calc(100% - 22px);
+	bottom: 65px;
+	left: 10px;
+	color: var(--text-color);
 }
+
 .predictive-text p {
-  margin: 5px 0;
-  padding: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  border-radius: 5px;
+	margin: 5px 0;
+	padding: 5px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+	border-radius: 5px;
 }
+
 .predictive-text p:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+	background-color: rgba(255, 255, 255, 0.2);
 }
+
 .predictive-text p:not(:last-child) {
-  border-bottom: 1px solid #555;
+	border-bottom: 1px solid #555;
 }
 
 /* Input Fields */
 input[type="text"] {
-  white-space: normal;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  width: 100%;
-  padding: 10px;
-  height: auto;
-  background-color: var(--input-bg) !important;
-  color: var(--text-color) !important;
-  border: 0 !important;
+	white-space: normal;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	width: 100%;
+	padding: 10px;
+	height: auto;
+	background-color: var(--input-bg) !important;
+	color: var(--text-color) !important;
+	border: 0 !important;
 }
+
 ::placeholder {
-  white-space: normal;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  color: var(--placeholder-color);
+	white-space: normal;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	color: var(--placeholder-color);
 }
 
-/* Button styles */
-a {
-  text-decoration: underline !important;
-  color: blue;
+
+
+	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;
+	}
+
+
+	
+.chat{
+	margin-top: auto;
+	margin-bottom: auto;
 }
-.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;
+.contacts_body{
+	padding:  0.75rem 0 !important;
+	overflow-y: auto;
+	white-space: nowrap;
 }
-
-/* User Info */
-.user_info span {
-  font-size: 20px;
-  color: var(--text-color);
+.msg_card_body{
+	overflow-y: auto;
 }
-.user_info p {
-  font-size: 10px;
-  color: rgba(255, 255, 255, 0.6);
+.card-header{
+	border-radius: 15px 15px 0 0 !important;
+	border-bottom: 0 !important;
 }
-
-.chat {
-  margin-top: auto;
-  margin-bottom: auto;
+.card-footer{
+border-radius: 0 0 15px 15px !important;
+	border-top: 0 !important;
 }
-.contacts_body {
-  padding: 0.75rem 0 !important;
-  overflow-y: auto;
-  white-space: nowrap;
+.container{
+	display: flex;
+    flex-direction: column;
+    height: 100vh;
 }
 .msg_card_body {
-  overflow-y: auto;
-}
-.card-header {
-  border-radius: 15px 15px 0 0 !important;
-  border-bottom: 0 !important;
+    flex-grow: 1;
+}
+.search{
+	border-radius: 15px 0 0 15px !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color:white !important;
+}
+.search:focus{
+	 box-shadow:none !important;
+   outline:0px !important;
+}
+.type_msg{
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color:white !important;
+	height: 60px !important;
+	overflow-y: auto;
+}
+	.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;
+	border:0 !important;
+	color: white !important;
+	cursor: pointer;
+}
+.send_btn{
+	border-radius: 0 15px 15px 0 !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color: white !important;
+	cursor: pointer;
+}
+.search_btn{
+	border-radius: 0 15px 15px 0 !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !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;
+
 }
-.card-footer {
-  border-radius: 0 0 15px 15px !important;
-  border-top: 0 !important;
+.user_img_msg{
+	height: 40px;
+	width: 40px;
+	border:1.5px solid #f5f6fa;
+
 }
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+.img_cont{
+	position: relative;
+	height: 70px;
+	width: 70px;
+}
+.img_cont_msg{
+	height: 40px;
+	width: 40px;
+}
+.online_icon{
+	position: absolute;
+	height: 15px;
+	width:15px;
+	background-color: #4cd137;
+	border-radius: 50%;
+	bottom: 0.2em;
+	right: 0.4em;
+	border:1.5px solid white;
+}
+.offline{
+	background-color: #c23616 !important;
+}
+.user_info{
+	margin-top: auto;
+	margin-bottom: auto;
+	margin-left: 15px;
 }
-.msg_card_body {
-  flex-grow: 1;
-}
-.search {
-  border-radius: 15px 0 0 15px !important;
-  background-color: rgba(0,0,0,0.3) !important;
-  border: 0 !important;
-  color: white !important;
-}
-.search:focus {
-  box-shadow: none !important;
-  outline: 0px !important;
-}
-.type_msg {
-  background-color: rgba(0,0,0,0.3) !important;
-  border: 0 !important;
-  color: white !important;
-  height: 60px !important;
-  overflow-y: auto;
-}
-.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;
-  border: 0 !important;
-  color: white !important;
-  cursor: pointer;
-}
-.send_btn {
-  border-radius: 0 15px 15px 0 !important;
-  background-color: rgba(0,0,0,0.3) !important;
-  border: 0 !important;
-  color: white !important;
-  cursor: pointer;
-}
-.search_btn {
-  border-radius: 0 15px 15px 0 !important;
-  background-color: rgba(0,0,0,0.3) !important;
-  border: 0 !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;
-  width: 70px;
-}
-.img_cont_msg {
-  height: 40px;
-  width: 40px;
-}
-.online_icon {
-  position: absolute;
-  height: 15px;
-  width: 15px;
-  background-color: #4cd137;
-  border-radius: 50%;
-  bottom: 0.2em;
-  right: 0.4em;
-  border: 1.5px solid white;
-}
-.offline {
-  background-color: #c23616 !important;
-}
-.user_info {
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-left: 15px;
-}
-.user_info span {
-  font-size: 20px;
-  color: white;
-}
-.user_info p {
-  font-size: 10px;
-  color: rgba(255,255,255,0.6);
-}
-.video_cam {
-  margin-left: 50px;
-  margin-top: 5px;
-}
-.video_cam span {
-  color: white;
-  font-size: 20px;
-  cursor: pointer;
-  margin-right: 20px;
-}
-.msg_container {
-  background-color: var(--msg-bg);
-  padding: 10px;
-  border-radius: 25px;
+
+.video_cam{
+	margin-left: 50px;
+	margin-top: 5px;
+}
+.video_cam span{
+	color: white;
+	font-size: 20px;
+	cursor: pointer;
+	margin-right: 20px;
+}.msg_container {
+	background-color: var(--msg-bg);
+	padding: 10px;
+	border-radius: 25px;
 }
+
+
 .dark-mode .predictive-text {
-  background-color: rgba(0, 0, 0, 0.8) !important;
-  color: white !important;
-  border: 1px solid var(--border-color) !important;
+    background-color: rgba(0, 0, 0, 0.8) !important; /* Ensure dark background */
+    color: white !important;
+    border: 1px solid var(--border-color) !important;
 }
+
 .dark-mode .predictive-text p {
-  background-color: transparent !important;
-  color: white !important;
+    background-color: transparent !important;
+    color: white !important;
 }
+
 .dark-mode .predictive-text p:hover {
-  background-color: rgba(255, 255, 255, 0.2) !important;
+    background-color: rgba(255, 255, 255, 0.2) !important;
 }
 .msg_container_send {
-  background-color: var(--msg-send-bg);
-  padding: 10px;
-  border-radius: 25px;
-  margin-right: 10px;
-  padding-left: 20px;
-  padding-right: 20px;
-}
-.msg_time {
-  position: absolute;
-  left: 0;
-  bottom: -15px;
-  color: rgba(255,255,255,0.5);
-  font-size: 10px;
-}
-.msg_time_send {
-  position: absolute;
-  right: 0;
-  bottom: -15px;
-  color: rgba(255,255,255,0.5);
-  font-size: 10px;
-}
-.msg_head {
-  position: relative;
-}
-#action_menu_btn {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  color: white;
-  cursor: pointer;
-  font-size: 20px;
-}
-.action_menu {
-  z-index: 1;
-  position: absolute;
-  padding: 15px 0;
-  background-color: var(--input-bg);
-  color: var(--text-color);
-  border-radius: 15px;
-  top: 30px;
-  right: 15px;
-  display: none;
+	background-color: var(--msg-send-bg);
+	padding: 10px;
+	border-radius: 25px;
+	margin-right:10px;
+	padding-left: 20px;
+	padding-right: 20px;
+	
+}
+.msg_time{
+	position: absolute;
+	left: 0;
+	bottom: -15px;
+	color: rgba(255,255,255,0.5);
+	font-size: 10px;
+}
+.msg_time_send{
+	position: absolute;
+	right:0;
+	bottom: -15px;
+	color: rgba(255,255,255,0.5);
+	font-size: 10px;
+}
+.msg_head{
+	position: relative;
+}
+#action_menu_btn{
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	color: white;
+	cursor: pointer;
+	font-size: 20px;
+}.action_menu {
+	z-index: 1;
+	position: absolute;
+	padding: 15px 0;
+	background-color: var(--input-bg);
+	color: var(--text-color);
+	border-radius: 15px;
+	top: 30px;
+	right: 15px;
+	display: none;
 }
+
 .action_menu ul li {
-  width: 100%;
-  padding: 10px 15px;
-  margin-bottom: 5px;
-  cursor: pointer;
+	width: 100%;
+	padding: 10px 15px;
+	margin-bottom: 5px;
+	cursor: pointer;
 }
+
 .action_menu ul li:hover {
-  background-color: rgba(0,0,0,0.2);
+	background-color: rgba(0,0,0,0.2);
 }
-.predefined-text a {
-  color: #0a66c2;
-  text-decoration: none;
-  font-weight: bold;
-  margin-right: 10px;
-}
-.predefined-text a i {
-  margin-right: 5px;
-}
-.predefined-text a:hover {
-  text-decoration: underline;
+@media (max-width: 768px) {
+    .chat {
+        height: 75vh; /* Smaller on mobile */
+    }
+    .msg_card_body {
+        max-height: 60vh;
+    }
 }
 
+	.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 */
-  .card {
-    margin: 10px;
-    border-radius: 10px;
-  }
-  .card-header,
-  .card-footer {
-    padding: 10px;
-  }
+	/* 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;
+	}
 
-  /* 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;
-  }
+	.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;
+	}
+	
 
-  /* Adjust text sizes for header info */
-  .user_info span {
-    font-size: 18px;
-  }
-  .user_info p {
-    font-size: 10px;
-  }
-
-  /* Adjust input field and button sizes */
-  .type_msg {
-    height: 50px;
-    font-size: 14px;
+	/* Adjust input field and button sizes */
+	.type_msg {
+	  height: 50px;
+	  font-size: 14px;
+	}
+	.btn {
+	  font-size: 12px;
+	  padding: 5px 8px;
+	}
   }
-  .btn {
-    font-size: 12px;
-    padding: 5px 8px;
-  }
-
-  /* Adjust predictive text positioning on mobile */
-  .predictive-text {
-    bottom: 55px;
-  }
-}
+