/*.chat-bot #chat-container*/
.chat-bot #chat-box { width: 500px; height: 600px; position: fixed; bottom: 20px; right: 20px; background: #fff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden;z-index:10;

/* HIDDEN STATE */opacity: 0;transform: translateY(40px);pointer-events: none;visibility: hidden;transition: all 0.25s ease;
}

.chat-bot #chat-box.active {/* VISIBLE STATE */opacity: 1;transform: translateY(0);pointer-events: auto;visibility: visible;}

.chat-bot #chat-header { background: #007bff; color: #fff; padding: 15px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; scroll-behavior: smooth;}
.chat-bot #chat-messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.chat-bot .message { max-width: 90%; padding: 10px; border-radius: 10px; font-size: 14px; line-height: 1.4; }
.chat-bot .bot-message { align-self: flex-start; border-bottom-left-radius: 0; }
.chat-bot .user-message { background: #007bff; color: #fff; align-self: flex-end; border-bottom-right-radius: 0; }
.chat-bot #chat-input-area { padding: 15px; border-top: 1px solid #eee; display: flex; gap: 10px;}
.chat-bot #user-input { flex: 1; border: 1px solid #ddd; padding: 8px; border-radius: 5px; outline: none; width: 100%}
.chat-bot #send-btn { background: #007bff; color: #fff; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; }
.chat-bot #send-btn:hover { background: #0056b3; }
.chat-bot .loading { font-style: italic; color: #888; font-size: 12px; }


.chat-bot .message {display: flex;align-items: flex-end; /* This makes avatar stick to bottom */margin-bottom: 15px;}

.chat-bot .message.bot {justify-content: flex-start;}

.chat-bot .message.user {justify-content: flex-end;}

/* Avatar */
.chat-bot .avatar {width: 34px;height: 34px;border-radius: 50%;object-fit: cover;margin-right: 8px;}

/* Bubble */
.chat-bot .bubble {max-width: 75%;padding: 12px 16px;border-radius: 18px;font-size: 14px;line-height: 1.6;white-space: pre-line;background: #e9ecef;}

/* Bot bubble style */
.chat-bot .message.bot .bubble {background: #f1f1f1;color: #333;border-top-left-radius: 6px;}

/* User bubble style */
.chat-bot .message.user .bubble {background: #1976d2;color: white;border-top-right-radius: 6px;}


.chat-bot #chat-popup {
	position: fixed;
	bottom: 90px;
	right: 86px;
	background: #fff;
	padding: 10px 14px;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	font-size: 13px;

	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: all 0.25s ease;
}

.chat-bot #chat-popup.show {
	opacity: 1;
	transform: translateY(0);
}

.chat-bot #chat-trigger {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #ffffff;
	border-radius: 50px;
	padding: 8px 14px 8px 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	transition: all 0.25s ease;
	z-index: 1000;
}

.chat-bot #chat-trigger:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.chat-bot .trigger-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
}

.chat-bot .trigger-text {
	font-size: 14px;
	font-weight: 500;
	color: #111;
}