#chatbot-oa-root {
	position: fixed;
	right: var(--chatbot-oa-right, 24px);
	bottom: var(--chatbot-oa-bottom, 24px);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--chatbot-oa-gap, 12px);
	z-index: var(--chatbot-oa-z-index, 9999);
}

#chatbot-oa-iframe {
	display: none;
	width: var(--chatbot-oa-width, 400px);
	height: var(--chatbot-oa-height, 600px);
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 96px);
	border: 0;
	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

#chatbot-oa-root.is-open #chatbot-oa-iframe {
	display: block;
}

#chatbot-oa-button {
	padding: 12px 16px;
	border: 0;
	border-radius: 9999px;
	background-color: #0e63c4;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

#chatbot-oa-button:focus-visible {
	outline: 2px solid #0065b3;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	#chatbot-oa-root {
		right: var(--chatbot-oa-mobile-right, 12px);
		bottom: var(--chatbot-oa-mobile-bottom, 12px);
		left: var(--chatbot-oa-mobile-left, auto);
	}

	#chatbot-oa-iframe {
		width: var(--chatbot-oa-mobile-width, calc(100vw - 24px));
		height: var(--chatbot-oa-mobile-height, min(600px, calc(100vh - 88px)));
		max-height: calc(100vh - 88px);
	}

	#chatbot-oa-button {
		padding: 10px 14px;
		font-size: 13px;
	}
}