@layer components {

#chatbot {
	--chatbot-button-height: calc(var(--spacing-huge) + 2 * var(--spacing-small));
	--chatbot-collapsed-left: 0;
	--chatbot-motion: 200ms cubic-bezier(0.76, 0, 0.24, 1);
	--chatbot-width: min(350px, calc(100vw - 2 * var(--spacing-medium)));
}

#chatbot--button,
#chatbot--header {
	align-items: center;
	background: var(--dark-blue);
	border: none;
	cursor: pointer;
	display: flex;
	font-family: var(--font-primary);
	gap: var(--spacing-medium);
	margin: 0;
	padding: var(--spacing-small) var(--spacing-medium) var(--spacing-small) var(--spacing-small);
	text-align: left;
	transform: none;
	transition: none;
	width: var(--chatbot-width);
}

#chatbot--button {
	border-radius: var(--radius-huge);
	bottom: var(--spacing-medium);
	box-shadow: var(--shadow);
	position: fixed;
	right: var(--spacing-medium);
	z-index: 1001;
}

#chatbot--button .chevron-icon {
	transform: rotate(180deg);
}

#chatbot.is-open #chatbot--button {
	visibility: hidden;
}

.chatbot--icon {
	background: var(--white);
	border-radius: var(--radius-rounded);
	flex-shrink: 0;
	height: var(--spacing-huge);
	position: relative;
	width: var(--spacing-huge);
}

.chatbot--icon::before {
	background: var(--dark-blue);
	content: "";
	inset: 0;
	-webkit-mask: url("../../images/icon-chicochat.svg") center / 70% no-repeat;
	mask: url("../../images/icon-chicochat.svg") center / 70% no-repeat;
	position: absolute;
}

.chatbot--icon::after {
	background: var(--green);
	border: 2px solid var(--dark-blue);
	border-radius: var(--radius-rounded);
	bottom: 0;
	content: "";
	height: 25%;
	position: absolute;
	right: -6%;
	width: 25%;
}

.chatbot--label {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	line-height: var(--line-height-small);
}

.chatbot--label strong {
	color: var(--white);
	font-size: var(--font-size-large);
	font-weight: var(--font-weight-large);
}

.chatbot--label small {
	color: var(--light-blue);
	font-size: var(--font-size-small);
}

#chatbot .chevron-icon {
	color: var(--light-blue);
	flex-shrink: 0;
	margin-left: auto;
}

#chatbot--window {
	background: var(--white);
	border-radius: var(--radius-medium);
	bottom: var(--spacing-medium);
	box-shadow: var(--shadow);
	display: none;
	overflow: hidden;
	position: fixed;
	right: var(--spacing-medium);
	width: var(--chatbot-width);
	z-index: 1000;
}

#chatbot.is-open #chatbot--window {
	animation: chatbot-expand var(--chatbot-motion);
	display: flex;
	flex-direction: column;
}

#chatbot.is-closing #chatbot--window {
	animation: chatbot-collapse var(--chatbot-motion) forwards;
}

#chatbot--header {
	border-radius: 0;
	box-shadow: none;
	gap: var(--spacing-small);
}

#chatbot--iframe {
	border: none;
	height: 80vh;
	max-height: 720px;
	width: 100%;
}

@keyframes chatbot-expand {
	from {
		clip-path: inset(calc(100% - var(--chatbot-button-height)) 0 0 var(--chatbot-collapsed-left) round var(--radius-huge));
	}
	to {
		clip-path: inset(0 round var(--radius-medium));
	}
}

@keyframes chatbot-collapse {
	from {
		clip-path: inset(0 round var(--radius-medium));
	}
	to {
		clip-path: inset(calc(100% - var(--chatbot-button-height)) 0 0 var(--chatbot-collapsed-left) round var(--radius-huge));
	}
}

@media (max-width: 600px) {
	#chatbot {
		--chatbot-collapsed-left: calc(100% - var(--chatbot-button-height));
	}

	#chatbot--button {
		animation: chatbot-shrink var(--transition-normal) ease-in-out 4s backwards;
		overflow: hidden;
		padding: var(--spacing-small);
		white-space: nowrap;
		width: var(--chatbot-button-height);
	}
}

@keyframes chatbot-shrink {
	from {
		width: var(--chatbot-width);
	}
}

@media (prefers-reduced-motion: reduce) {
	#chatbot--button {
		animation: none;
	}

	#chatbot--window {
		animation-duration: 0s !important;
	}
}

}