/* Panoee AI Chatbot Styles */

/* Fixed position for chat widget */
.chat-widget {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
}

/* Override body text color for chatbox */
#chatBox,
#chatBox *,
#aiChatBox,
#aiChatBox * {
	color: #1f2937 !important; /* Default dark gray text */
}

#chatBox .text-white,
#chatBox .chat-header,
#chatBox .chat-header *,
#chatBox .user-bubble,
#chatBox .user-bubble *,
#aiChatBox .text-white,
#aiChatBox .chat-header,
#aiChatBox .chat-header *,
#aiChatBox .user-bubble,
#aiChatBox .user-bubble * {
	color: white !important; /* Keep white text where needed */
}

#chatBox .text-gray-600,
#aiChatBox .text-gray-600 {
	color: #4b5563 !important;
}

#chatBox .text-gray-700,
#aiChatBox .text-gray-700 {
	color: #374151 !important;
}

#chatBox .text-gray-800,
#aiChatBox .text-gray-800 {
	color: #1f2937 !important;
}

#chatBox .text-gray-500,
#aiChatBox .text-gray-500 {
	color: #6b7280 !important;
}

#chatBox .text-gray-400,
#aiChatBox .text-gray-400 {
	color: #9ca3af !important;
}

#chatBox .text-fuchsia-600,
#aiChatBox .text-fuchsia-600 {
	color: #c026d3 !important;
}

/* Ensure input and button text colors */
#chatBox input,
#chatBox button:not(.chat-header button):not(.user-bubble button),
#aiChatBox input,
#aiChatBox button:not(.chat-header button):not(.user-bubble button) {
	color: #1f2937 !important;
	background-color: white !important;
	caret-color: #1f2937 !important; /* Cursor color */
}

#chatBox input::placeholder,
#aiChatBox input::placeholder {
	color: #9ca3af !important;
}

/* Input focus states */
#chatBox input:focus,
#aiChatBox input:focus {
	color: #1f2937 !important;
	background-color: white !important;
	outline: none;
}

/* AI Chat Widget (Fixed Position) */
.ai-chat-widget {
	position: fixed;
	right: 20px;
	bottom: 92px; /* 64px (main button) + 20px (margin) + 8px (spacing) = 92px */
	z-index: 999;
}

/* AI Chat Toggle Button */
#aiChatToggleBtn {
	width: 52px;
	height: 52px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* AI Chat Box (Same as main chatbox) */
#aiChatBox {
	/* Inherits positioning from parent .ai-chat-widget */
}

#aiChatBox.opening {
	transform: translateY(0) scale(1) !important;
	opacity: 1 !important;
}

#aiChatBox.closing {
	transform: translateY(100%) scale(0.95) !important;
	opacity: 0 !important;
}

/* Chat Header */
.chat-header {
	background-color: #E74694;
	border-top-left-radius: 0.75rem;
	border-top-right-radius: 0.75rem;
}

/* User Message Bubble */
.user-bubble {
	background-color: #E74694;
	color: white;
	border-radius: 1rem 1rem 0.25rem 1rem;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Bot Message Bubble */
.bot-bubble {
	background-color: #ffffff;
	color: #1f2937;
	border-radius: 1rem 1rem 1rem 0.25rem;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
	border: 1px solid #e5e7eb;
}

/* Typing Indicator */
.typing-indicator span {
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #9ca3af;
	border-radius: 50%;
	margin-right: 4px;
	animation: bounce 1s infinite;
}

.typing-indicator span:nth-child(2) {
	animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes bounce {
	0%, 60%, 100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-5px);
	}
}

/* Chat Box Opening Animation */
#chatBox.opening {
	transform: translateY(0) scale(1) !important;
	opacity: 1 !important;
}

/* Chat Box Closing Animation */
#chatBox.closing {
	transform: translateY(100%) scale(0.95) !important;
	opacity: 0 !important;
}

/* Bot Avatar Pulse Animation */
@keyframes subtle-pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
	}
	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

.bot-avatar-pulse {
	animation: subtle-pulse 2s infinite ease-in-out;
}

/* Send Button Wiggle Animation */
@keyframes wiggle {
	0%, 7% {
		transform: rotate(0);
	}
	15% {
		transform: rotate(-5deg);
	}
	20% {
		transform: rotate(5deg);
	}
	25% {
		transform: rotate(-3deg);
	}
	30% {
		transform: rotate(3deg);
	}
	35% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(0);
	}
}

.send-button-wiggle {
	animation: wiggle 0.5s ease-in-out 3;
}

/* Chat Button Pulse Animation */
@keyframes chat-button-pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(231, 70, 148, 0.7);
	}
	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 10px rgba(231, 70, 148, 0);
	}
}

.ai-toggle-btn-pulse {
	animation: chat-button-pulse 2s infinite ease-in-out;
}

/* Chat Icon Hover Animation */
@keyframes chat-icon-hover {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-2px);
	}
	100% {
		transform: translateY(0);
	}
}

.chat-toggle-btn:hover #chatIcon,
#aiChatToggleBtn:hover #aiIcon {
	animation: chat-icon-hover 0.3s ease-in-out;
}

/* Main Chat Toggle Button Pulse */
.chat-toggle-btn-pulse {
	animation: chat-button-pulse 2s infinite ease-in-out;
}

.chat-toggle-btn:hover #chatIcon {
	animation: chat-icon-hover 0.3s ease-in-out;
}

/* Fixed size for chatboxes */
#chatBox,
#aiChatBox {
	width: 350px !important;
	height: 517px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.chat-widget {
		right: 15px;
		bottom: 15px;
	}

	.ai-chat-widget {
		right: 15px;
		bottom: 87px; /* Adjusted for mobile */
	}

	#chatBox,
	#aiChatBox {
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		border-radius: 0 !important;
		margin: 0 !important;
	}
}