:root {
	--chat-header-background: #0084ff;
	--chat-header-background-hover: #006acc;
	--chat-header-foreground: white;

	--chat-background: #f5f5f5;
	--chat-sent-message-background: #0084ff;
	--chat-received-message-background: white;
	--chat-background-separator: #eee;
	--chat-background-input: #ddd;

	--chat-sent-message-color: white;
	--chat-received-message-color: black;

	--chat-button-background: #0084ff;
	--chat-button-background-hover: #006acc;
	--chat-button-foreground: white;
}
@media (prefers-color-scheme: dark) {
	:root {
		--chat-header-background: #555;
		--chat-header-background-hover: #888;
		--chat-header-foreground: white;

		--chat-background: #222;
		--chat-sent-message-background: #0084ff;
		--chat-received-message-background: #d7d6d6;
		--chat-background-separator: #333;
		--chat-background-input: #333;

		--chat-sent-message-color: white;
		--chat-received-message-color: white;
	}
}

.chat {
	position: fixed;
	z-index: 1000;
	bottom: 1rem;
	right: 1rem;
	border: 1px solid #ccc;
}

.chat-popover {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 300px;
	height: 400px;
	background: var(--chat-background);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transform: translateY(20px);
	animation: slide-up 0.3s ease-out;
}

.chat-popover.visible {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0s;
}

.chat-header {
	background: var(--chat-header-background);
	color: var(--chat-header-foreground);
	padding: 15px;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.chat-header .close-button {
	background: none;
	border: none;
	color: var(--chat-header-foreground);
	cursor: pointer;
	font-size: 20px;
	padding: 0;
	line-height: 1;
}

.chat-messages {
	flex: 1;
	padding: 15px;
	overflow-y: auto;
	background: var(--chat-background);
	&.thinking::after {
		content: "Thinking...";
		display: block;
		padding: 10px;
		text-align: center;
		color: #888;
	}
}

.chat-input-container {
	padding: 15px;
	background: var(--chat-background);
	border-top: 1px solid var(--chat-background-separator);
	display: flex;
	align-items: center;
}

.chat-input {
	flex: 1;
	border: 1px solid var(--chat-background-input);
	border-radius: 20px;
	padding: 8px 15px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s;
}

.chat-input:focus {
	border-color: var(--chat-header-background);
}

.send-button {
	background: var(--chat-header-background);
	color: var(--chat-header-foreground);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	margin-left: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
}

.send-button:hover {
	background: var(--chat-header-background-hover);
}

@keyframes slide-up {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Optional: Add some message styling */
.message {
	margin-bottom: 10px;
	max-width: 80%;
	padding: 8px 12px;
	border-radius: 12px;
	word-wrap: break-word;
	box-shadow: 0.2rem 0.2rem #88888888;
}

.message.received {
	background: var(--chat-received-message-background);
	color: var(--chat-received-message-color);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
	color: black;
}

.message.sent {
	background: var(--chat-sent-message-background);
	color: var(--chat-sent-message-color);
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

.message-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	flex-direction: column;
}

.chat-toggle-button {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--chat-button-background);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, background-color 0.3s;
	z-index: 1000;
}

.chat-toggle-button:hover {
	background: var(--chat-button-background-hover);
	transform: scale(1.1);
}

.chat-toggle-button svg {
	width: 30px;
	height: 30px;
	fill: var(--chat-button-foreground);
}

/* Chat icon animation */
.chat-toggle-button.active {
	transform: scale(0);
	opacity: 0;
}

/* Modify the existing chat-popover to handle visibility */