Update static/style.css

static/style.css

@@ -1,541 +1,468 @@
 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; /* 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;
-}
-
+  --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;
   
-
-/* 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;
+  background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%)!important;
+  color: var(--text-color) !important;
 }
+
 .dark-mode {
-    --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;
+  --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;
 }
 .dark-mode .msg_container {
-    background-color: var(--msg-bg) !important;
-    color: #000000 !important; /* Ensure text is visible */
+  background-color: var(--msg-bg) !important;
+  color: #000000 !important;
 }
-
 .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; /* Make it more readable */
+  color: rgba(255, 255, 255, 0.7) !important;
 }
-
-/* 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;
-}
-
-/* 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 */
+  background-color: var(--input-bg) !important;
+  color: var(--text-color) !important;
+  border: 1px solid var(--border-color) !important;
 }
-
-.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; /* Adjust as needed */
-    max-height: 700px; /* Ensures it doesn't get too large */
+  height: 90vh;
+  max-height: 700px;
 }
 .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;
 }
-
-/* Message Box */
 .msg_card_body {
-
-    max-height: 70vh; /* Adjust based on screen size */
-    overflow-y: auto; /* Enable scrolling */
+  max-height: 70vh;
+  overflow-y: auto;
 }
 
-
 /* 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);
 }
 
-
-
-	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;
-	}
-	
-	/* User Info */
-	.user_info span {
-		font-size: 20px;
-		color: var(--text-color);
-	}
-	
-	.user_info p {
-		font-size: 10px;
-		color: rgba(255, 255, 255, 0.6);
-	}
-
-
-	
-.chat{
-	margin-top: auto;
-	margin-bottom: auto;
+/* Button styles */
+a {
+  text-decoration: underline !important;
+  color: blue;
 }
-.contacts_body{
-	padding:  0.75rem 0 !important;
-	overflow-y: auto;
-	white-space: nowrap;
+.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;
 }
-.msg_card_body{
-	overflow-y: auto;
+
+/* User Info */
+.user_info span {
+  font-size: 20px;
+  color: var(--text-color);
 }
-.card-header{
-	border-radius: 15px 15px 0 0 !important;
-	border-bottom: 0 !important;
+.user_info p {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.6);
 }
-.card-footer{
-border-radius: 0 0 15px 15px !important;
-	border-top: 0 !important;
+
+.chat {
+  margin-top: auto;
+  margin-bottom: auto;
 }
-.container{
-	display: flex;
-    flex-direction: column;
-    height: 100vh;
+.contacts_body {
+  padding: 0.75rem 0 !important;
+  overflow-y: auto;
+  white-space: nowrap;
 }
 .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;
-
+  overflow-y: auto;
 }
-.user_img_msg{
-	height: 40px;
-	width: 40px;
-	border:1.5px solid #f5f6fa;
-
+.card-header {
+  border-radius: 15px 15px 0 0 !important;
+  border-bottom: 0 !important;
 }
-.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;
+.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;
+  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;
 }
-
-
 .dark-mode .predictive-text {
-    background-color: rgba(0, 0, 0, 0.8) !important; /* Ensure dark background */
-    color: white !important;
-    border: 1px solid var(--border-color) !important;
+  background-color: rgba(0, 0, 0, 0.8) !important;
+  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;
 }
-@media (max-width: 768px) {
-    .chat {
-        height: 75vh; /* Smaller on mobile */
-    }
-    .msg_card_body {
-        max-height: 60vh;
-    }
+.predefined-text a:hover {
+  text-decoration: underline;
 }
 
-	.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;
-	}
-	
-	/* 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;
-	}
+  /* 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: 18px;
+  }
+  .user_info p {
+    font-size: 10px;
+  }
+
+  /* Adjust input field and button sizes */
+  .type_msg {
+    height: 50px;
+    font-size: 14px;
+  }
+  .btn {
+    font-size: 12px;
+    padding: 5px 8px;
+  }
+
+  /* Adjust predictive text positioning on mobile */
+  .predictive-text {
+    bottom: 55px;
+  }
+}