#chat-float{
	position:fixed;
	bottom:20px;
	right:20px;
	width:64px;
	height:64px;
	background:rgb(75, 134, 63);
	color:#fff;
	font-size:28px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	box-shadow:0 12px 35px rgba(0,0,0,.35);
	animation:pulse 2s infinite;
	z-index:9999;
	font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif;
}

@keyframes pulse{
	0%{transform:scale(1);}
	50%{transform:scale(1.12);}
	100%{transform:scale(1);}
}

#chat-box{
	position: fixed; 
	top: 55%; 
	left: 50%; 
	transform: translate(-50%, -50%) scale(0.9); /* hidden initial scale */
	max-width: 100%;
	width: 1140px; 
	background: #fff; 
	border-radius: 18px; 
	box-shadow: 0 25px 60px rgba(0,0,0,.28); 
	pointer-events: none; 
	opacity: 0; /* fully hidden initially */
	z-index: 9999; 
	font-family: "Inter","Segoe UI",Roboto,Arial,sans-serif; 
	min-height: 400px;
}

#chat-box.active{
	opacity: 1; /* show */
	pointer-events: auto;
	animation: popZoom 0.25s forwards; /* animate on appear */
}

@keyframes popZoom {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.chat-header{
	background: rgb(75, 134, 63);
	color:#fff;
	padding:14px 18px;
	border-radius:18px 18px 0 0;
	font-weight:600;
	font-size:16px;
	line-height:22px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	letter-spacing:.2px;
}

.chat-header span{
	cursor:pointer;
	font-size:18px;
}

.chat-body{
	padding:7px;
	max-height:320px;
	overflow-y:auto;
	font-size:15px;
	line-height:1.55;
}

.chat-title {
    margin: 0 auto;   
}

.msg {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  line-height: 28px;
}

@keyframes slideUp{
	from{transform:translateY(8px);opacity:0}
	to{transform:translateY(0);opacity:1}
}

.chat-options{
	padding:7px;
	border-top:1px solid #eee;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

.chat-options button{
    width: 49%;
    margin-bottom: 10px;
    margin-right: 37px;
    padding: 12px;
    border-radius: 10px;
    background: rgb(75, 134, 63);
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    line-height: 21px;
    font-weight: bold;
    border: 1px solid #d56100;
    transition: background 0.2s ease, transform 0.15s ease;
}

.chat-options button:hover{
	background: black;
	transform: scale(1.04);
}

.chat-options input{
	width:93%;
	padding:10px;
	margin-bottom:10px;
	border-radius:8px;
	border:1px solid #ccc;
	font-size:15px;
}

@media (max-width: 768px) { 

	#chat-box {
        width: 92%;
        right: 4%;
        bottom: 85px;
        top: 51%;
        height: 700px;
    }
	.msg { 
		font-size: 17px;
		text-align: center;
	}
	.chat-header { 
		padding: 4px 15px; 
		font-weight: 600;
		font-size: 14px; 
	}
	.chat-options input {
		width: 72%;  
	}
	.chat-options button {
        width: 70%; 
		margin-left: 41px;
    }
	
	#form-error {
		text-align: center;
	}
}

#chat-options button.btn-wide {
	padding: 3px 14px;
	font-size: 16px;
	width: 20%;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	margin-left: 69px;
}

@media (max-width: 414px) {
    #chat-box {
        top: 57%;
    }
}