@keyframes iiFadeIn {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes iiSpin {
	from {
		transform: rotate(360deg);
	}

	to {
		transform: rotate(0);
	}
}

.dot-field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--dot-field-dot);
	animation: dotFieldIn 0.6s ease-out both;
}

@keyframes dotFieldIn {
	from {
		opacity: 0;
	}
}

@keyframes iiSkeletonShimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.ii-skeleton-label-text {
	color: transparent;
	background: linear-gradient(
		90deg,
		var(--ii-text-tertiary, #9ca3af) 0%,
		var(--ii-text-tertiary, #9ca3af) 35%,
		var(--ii-text-primary) 50%,
		var(--ii-text-tertiary, #9ca3af) 65%,
		var(--ii-text-tertiary, #9ca3af) 100%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: skeletonLabelShine 2.4s linear infinite;
}

.ii-skeleton-label-dots {
	display: inline-block;
	clip-path: inset(0 100% 0 0);
	animation: skeletonLabelTyping 1.6s steps(4, jump-none) infinite;
}

@keyframes skeletonLabelShine {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: -100% 0;
	}
}

@keyframes skeletonLabelTyping {
	to {
		clip-path: inset(0 0 0 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ii-skeleton-label-text {
		color: inherit;
		background: none;
		animation: none;
	}

	.ii-skeleton-label-dots {
		clip-path: none;
		animation: none;
	}
}

.ii-asset-screen.is-leaving-left {
	display: block;
	animation: iiAssetSlideOutLeft 0.3s ease forwards;
}

.ii-asset-screen.is-entering-right {
	animation: iiAssetSlideInRight 0.3s ease forwards;
}

.ii-asset-screen.is-leaving-right {
	display: block;
	animation: iiAssetSlideOutRight 0.3s ease forwards;
}

.ii-asset-screen.is-entering-left {
	animation: iiAssetSlideInLeft 0.3s ease forwards;
}

@keyframes iiAssetSlideOutLeft {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(-30px);
		opacity: 0;
	}
}

@keyframes iiAssetSlideInRight {
	from {
		transform: translateX(30px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes iiAssetSlideOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(30px);
		opacity: 0;
	}
}

@keyframes iiAssetSlideInLeft {
	from {
		transform: translateX(-30px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.ii-asset-spinner-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ii-accent, #3b82f6);
	animation: iiAssetBounce 1.4s infinite ease-in-out both;
}

.ii-asset-spinner-dot:nth-child(1) {
	animation-delay: -0.32s;
}

.ii-asset-spinner-dot:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes iiAssetBounce {
	0%,
	80%,
	100% {
		transform: scale(0);
		opacity: 0.5;
	}

	40% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes popper-enter {
	from {
		opacity: 0;
		transform: translate(var(--popper-slide-x, 0), var(--popper-slide-y, 0)) scale(0.95);
	}
}

@keyframes popper-exit {
	from {
		opacity: 1;
		transform: none;
	}
}

.ring-spinner {
	--ring-spinner-width: 1.5px;
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.ring-spinner::before,
.ring-spinner::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.ring-spinner::before {
	border: var(--ring-spinner-width) solid color-mix(in srgb, currentColor 25%, transparent);
}

.ring-spinner::after {
	background: conic-gradient(transparent 40%, currentColor);
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - var(--ring-spinner-width)),
		#000 calc(100% - var(--ring-spinner-width) + 0.5px)
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - var(--ring-spinner-width)),
		#000 calc(100% - var(--ring-spinner-width) + 0.5px)
	);
	animation: ringSpinnerSpin 1s linear infinite;
}

@keyframes ringSpinnerSpin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ring-spinner::after {
		animation: none;
	}
}

.ai-toast-spinner {
	width: 14px;
	height: 14px;
	color: var(--ai-toast-text-primary);
}