/**
 * Appearance Base CSS
 *
 * Base CSS with CSS variables for chat appearance.
 *
 * @package AI360Chat
 * @subpackage Addons\Appearance
 */

/* Base CSS Variables (will be overridden by inline styles) */
:root {
	--ai360chat-window-bg: #e5ddd5;
	--ai360chat-header-bg: #075e54;
	--ai360chat-text-color: #1d2327;
	--ai360chat-user-msg-bg: #dcf8c6;
	--ai360chat-bot-msg-bg: #ffffff;
	--ai360chat-border-color: #e2e4e7;
	--ai360chat-button-color: #25d366;
	--ai360chat-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ai360chat-font-size: 14px;
	--ai360chat-font-weight: 400;
	--ai360chat-line-height: 1.5;
	--ai360chat-window-width: 320px;
	--ai360chat-window-height: 420px;
	--ai360chat-border-radius: 12px;
	--ai360chat-padding: 15px;
}

/* Chat Window Styles */
.ai360wc-chat-window {
	font-family: var(--ai360chat-font-family);
	font-size: var(--ai360chat-font-size);
	font-weight: var(--ai360chat-font-weight);
	line-height: var(--ai360chat-line-height);
}

/* Chat Header */
.ai360wc-chat-header {
	background-color: var(--ai360chat-header-bg);
}

/* Chat Body */
.ai360wc-chat-body {
	background-color: var(--ai360chat-window-bg);
	color: var(--ai360chat-text-color);
}

/* User Messages */
.ai360wc-message.ai360wc-user .ai360wc-message-bubble {
	background-color: var(--ai360chat-user-msg-bg);
	color: var(--ai360chat-text-color);
}

/* Bot Messages */
.ai360wc-message.ai360wc-bot .ai360wc-message-bubble {
	background-color: var(--ai360chat-bot-msg-bg);
	color: var(--ai360chat-text-color);
}

/* Buttons */
.ai360wc-chat-window .ai360wc-button,
.ai360wc-chat-window button.ai360wc-send-button {
	background-color: var(--ai360chat-button-color);
	border-color: var(--ai360chat-button-color);
}

.ai360wc-chat-window .ai360wc-button:hover,
.ai360wc-chat-window button.ai360wc-send-button:hover {
	opacity: 0.9;
}

/* Expanded Mode */
.ai360chat-expanded-mode {
	width: 90vw !important;
	max-width: 600px !important;
	height: 80vh !important;
	max-height: 700px !important;
}

@media (max-width: 768px) {
	.ai360chat-expanded-mode {
		width: 95vw !important;
		height: 90vh !important;
	}
}

/* Float Icon Animations */
@keyframes ai360chat-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

@keyframes ai360chat-bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

.ai360chat-animation-pulse {
	animation: ai360chat-pulse 2s infinite;
}

.ai360chat-animation-bounce {
	animation: ai360chat-bounce 1s infinite;
}

/* Custom icon styling */
.ai360wc-chat-launcher img {
	border-radius: 50%;
	object-fit: cover;
}