:root {
	--chat-width-desktop: 360px;
	--chat-height-desktop: 600px;

	--chat-width-mobile: calc(100vw - 24px);
	--chat-height-mobile: 75dvh;

	--chat-bottom: 20px;
	--chat-right: 20px;

	--chat-z: 99999;
}

#ai-chat-widget {
	position: fixed;
	right: var(--chat-right);
	bottom: var(--chat-bottom);
	z-index: var(--chat-z);
	font-family: inherit;
}

#ai-chat-toggle {
	width: 58px;
	height: 58px;
	border: none;
	border-radius: 50%;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	background: #111827;
	color: #fff;

	box-shadow: 0 10px 30px rgba(0,0,0,.2);

	transition: .2s ease;
	border: 2px solid white;
}

#ai-chat-toggle:hover {
	transform: scale(1.05);
}

#ai-chat-toggle svg {
	width: 24px;
	height: 24px;
}

#ai-chat-window {
	position: absolute;

	right: 0;
	bottom: 74px;

	width: var(--chat-width-desktop);
	height: var(--chat-height-desktop);

	background: #fff;

	border-radius: 18px;
	overflow: hidden;

	box-shadow:
		0 10px 25px rgba(0,0,0,.12),
		0 20px 50px rgba(0,0,0,.18);

	display: none;
	flex-direction: column;
}

#ai-chat-window.open {
	display: flex;
}

#ai-chat-header {
	height: 54px;
	padding: 0 14px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	background: #111827;
	color: #fff;

	flex-shrink: 0;
}

#ai-chat-header-title {
	font-size: 15px;
	font-weight: 600;
}

#ai-chat-close {
	background: transparent;
	border: none;

	color: #fff;

	cursor: pointer;

	font-size: 22px;
	line-height: 1;
}

#chat {
	width: 100%;
	height: 100%;
	border: none;
	overflow: hidden;
}

openai-chatkit {
	width: 100%;
	height: 100%;
	display: block;
}

@media (max-width: 768px) {

	#ai-chat-widget {
		right: 12px;
		bottom: 12px;
	}

	#ai-chat-toggle {
		width: 54px;
		height: 54px;
	}

	#ai-chat-window {
		position: fixed;

		right: 12px;
		bottom: 78px;

		width: var(--chat-width-mobile);
		height: var(--chat-height-mobile);

		max-width: 420px;

		border-radius: 18px;
	}
}

@media (max-width: 480px) {

	#ai-chat-window {
		width: calc(100vw - 16px);

		right: 8px;
		bottom: 72px;

		height: 70dvh;

		border-radius: 16px;
	}
}