#chat-button img {
	width: 100px;
	height: auto;
	position: fixed;
	bottom: 20px;
	right: 20px;
	cursor: pointer;
	z-index: 20002;
	transition: width 0.3s ease; /* Smooth transition for resizing */
}
#chat-popup {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
	border-radius: 15px;
	display: none;
	position: fixed;
	bottom: 110px;
	right: 20px;
	height: 400px;
	z-index: 20001;
}
/* Flex container for buttons */
#chat-popup div[style*="text-align: right;"] {
    display: flex;
    justify-content: flex-end;
    align-items: center; /* Align items vertically */
}
										  
#close-chat {
	font-size: 35px;
	border-radius: 15px;
	cursor: pointer;
	transition: color 0.3s ease; /* Add transition effect for color change */
	z-index: 10002;
	display: inline-block; /* Inline-block for alignment */													   
}
#chat-iframe {
	width: 440px;
	padding: 5px 10px;
	border-radius: 30px;
	height: 400px;
	transition: width 0.3s ease; /* Add transition property */
	z-index: 1000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	#chat-button img {
		width: 80px;
		bottom: 15px;
		right: 15px;
	}
	#chat-popup {
		width: 90%;
		height: auto;
		bottom: 20px;
		right: 10%;
		max-width: 500px;
	}
	#chat-iframe {
		width: 80%;
		height: 150px;
		padding: 0;
	}
	#close-chat {
		font-size: 30px;
	}
}
@media (max-width: 600px) {
	#chat-button img {
		width: 65px;
		bottom: 5px;
		right: 10px;
	}
	#chat-popup {
		width: 99%;
		height: auto;
		bottom: 25px;
		right: 3px;
		left: 2px;
	}
	#chat-iframe {
		width: 80%;
		height: 150px;
	}
}
/* Class to reduce button size when chat is active */
.chat-button-small {
	width: 55px !important; /* Reduce the size by 45% */
}
/* New styles for large iframe */
.large-iframe {
	width: 800px !important; /* Ensure width change */
	/* Remove height change */
}

#toggle-size {
	cursor: pointer;
	transition: color 0.3s ease; /* Add transition effect for color change */
	border: none; /* Remove border */
	text-align: center; /* Center the text */
	text-decoration: none; /* Remove underline */
	display: inline-block; /* Get the element to behave like a block element */
	font-size: 14px; /* Adjust font size */
	margin-right: 10px; /* Add some margin to the right */
	border-radius: 3px; /* Add rounded corners */
	z-index: 1001; /* Ensure the button is above other elements */
}
/* Hide toggle size button on mobile devices */
@media (max-width: 768px) {
    #toggle-size {
        display: none;
    }
}
