cline/apps/examples/desktop-app/webview/app/globals.css

@import "@fontsource-variable/schibsted-grotesk";
@import "@fontsource/azeret-mono/latin.css";
@import "tailwindcss";
@import "tw-animate-css";
@import "@cline/ui/theme/index.css";
@import "@cline/ui/components/agent-chat.css";

@source "../../node_modules/streamdown/dist";

@layer base {
	html,
	body {
		height: 100%;
		min-height: 100vh;
		overflow: hidden;
	}

	#__next {
		height: 100%;
	}
}

/* Aurora background (components/ui/aurora-bg.tsx) */
@keyframes aurora-drift {
	0% {
		opacity: 0.55;
		transform: translate3d(-8%, 5%, 0) rotate(-5deg) scale(0.94);
	}
	50% {
		opacity: 0.92;
		transform: translate3d(13%, -10%, 0) rotate(6deg) scale(1.11);
	}
	100% {
		opacity: 0.62;
		transform: translate3d(-5%, -2%, 0) rotate(-3deg) scale(1.02);
	}
}

@keyframes aurora-drift-reverse {
	0% {
		opacity: 0.62;
		transform: translate3d(10%, -6%, 0) rotate(5deg) scale(1.08);
	}
	50% {
		opacity: 0.9;
		transform: translate3d(-12%, -12%, 0) rotate(-6deg) scale(0.96);
	}
	100% {
		opacity: 0.58;
		transform: translate3d(6%, 2%, 0) rotate(3deg) scale(1.04);
	}
}

@keyframes aurora-horizon-breathe {
	0% {
		opacity: 0.48;
		transform: translate3d(-3%, 9%, 0) scale(0.96, 0.84);
	}
	50% {
		opacity: 0.88;
		transform: translate3d(3%, -5%, 0) scale(1.08, 1.16);
	}
	100% {
		opacity: 0.58;
		transform: translate3d(-1%, 2%, 0) scale(1.02, 0.96);
	}
}

@keyframes aurora-current-sweep {
	0% {
		opacity: 0.28;
		transform: translate3d(-16%, 8%, 0) rotate(-8deg) scaleX(0.84);
	}
	50% {
		opacity: 0.72;
		transform: translate3d(17%, -8%, 0) rotate(4deg) scaleX(1.08);
	}
	100% {
		opacity: 0.38;
		transform: translate3d(28%, 4%, 0) rotate(-2deg) scaleX(0.94);
	}
}

@keyframes aurora-twinkle {
	0%,
	100% {
		opacity: 0.15;
		transform: translate3d(0, 4px, 0) rotate(0deg) scale(0.78);
	}
	50% {
		opacity: 0.78;
		transform: translate3d(var(--aurora-star-x, 5px), -8px, 0) rotate(35deg)
			scale(1.08);
	}
}

.aurora-horizon {
	animation: aurora-horizon-breathe 8s ease-in-out -3s infinite alternate;
	transform-origin: center bottom;
	will-change: opacity, transform;
}

.aurora-current {
	animation-name: aurora-current-sweep;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	will-change: opacity, transform;
}

.aurora-current-reverse {
	animation-direction: alternate-reverse;
}

.aurora-motion {
	animation-name: aurora-drift;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.aurora-motion-reverse {
	animation-name: aurora-drift-reverse;
}

.aurora-star {
	--aurora-star-x: 5px;
	animation-name: aurora-twinkle;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.aurora-star:nth-of-type(2n) {
	--aurora-star-x: -6px;
}

@media (prefers-reduced-motion: reduce) {
	.aurora-current,
	.aurora-horizon,
	.aurora-motion,
	.aurora-star {
		/* biome-ignore lint/complexity/noImportantStyles: reduced motion must override inline animation timing */
		animation: none !important;
	}

	.aurora-horizon {
		opacity: 0.68;
		transform: translate3d(0, -1%, 0) scale(1.05);
	}

	.aurora-current,
	.aurora-motion {
		opacity: 0.58;
		transform: none;
	}

	.aurora-current,
	.aurora-horizon,
	.aurora-motion {
		will-change: auto;
	}
}