/*
 * Mike AI "Midnight Aurora" theme for Open WebUI.
 *
 * Open WebUI deliberately loads /static/custom.css from its base image.  The
 * file is mounted read-only by compose.yaml, so the theme survives container
 * recreation and image updates without modifying the upstream image.
 */

:root {
	color-scheme: dark;
	--mike-ai-bg: #070a12;
	--mike-ai-panel: rgba(15, 20, 32, 0.86);
	--mike-ai-panel-strong: rgba(12, 16, 27, 0.96);
	--mike-ai-border: rgba(148, 163, 184, 0.13);
	--mike-ai-blue: rgba(59, 130, 246, 0.20);
	--mike-ai-violet: rgba(139, 92, 246, 0.17);
	--mike-ai-teal: rgba(20, 184, 166, 0.12);
}

html,
body {
	background-color: var(--mike-ai-bg) !important;
}

body {
	min-height: 100vh;
	background-image:
		radial-gradient(circle at 12% 18%, var(--mike-ai-blue) 0, transparent 32%),
		radial-gradient(circle at 88% 12%, var(--mike-ai-violet) 0, transparent 30%),
		radial-gradient(circle at 68% 88%, var(--mike-ai-teal) 0, transparent 34%),
		linear-gradient(145deg, #070a12 0%, #0b1020 52%, #080b14 100%) !important;
	background-attachment: fixed !important;
	background-position: 0% 30%, 100% 0%, 60% 100%, center !important;
	background-size: 150% 150%, 145% 145%, 155% 155%, cover !important;
	animation: mike-ai-aurora 30s ease-in-out infinite alternate;
}

/* Keep the app above the decorative background without intercepting clicks. */
#app {
	position: relative;
	min-height: 100vh;
	isolation: isolate;
}

/* The large application surfaces are slightly translucent so the aurora is
 * visible, while content, dialogs and editors retain solid readable panels. */
.dark #app .bg-gray-950,
.dark #app .bg-gray-900,
.dark #app .bg-gray-850 {
	background-color: var(--mike-ai-panel) !important;
	backdrop-filter: blur(18px) saturate(115%);
}

.dark [role='dialog'],
.dark dialog,
.dark pre,
.dark textarea,
.dark input,
.dark select {
	background-color: var(--mike-ai-panel-strong);
}

.dark [role='dialog'],
.dark dialog,
.dark .border-gray-800,
.dark .border-gray-850 {
	border-color: var(--mike-ai-border) !important;
}

/* A restrained accent for focused controls; no neon-glow or reduced contrast. */
.dark :is(button, a, input, textarea, select):focus-visible {
	outline-color: rgba(96, 165, 250, 0.78) !important;
	outline-offset: 2px;
}

@keyframes mike-ai-aurora {
	0% {
		background-position: 0% 20%, 100% 0%, 65% 100%, center;
	}
	50% {
		background-position: 18% 36%, 84% 14%, 48% 82%, center;
	}
	100% {
		background-position: 4% 48%, 96% 28%, 72% 70%, center;
	}
}

@media (prefers-reduced-motion: reduce) {
	body {
		animation: none !important;
	}
}

@media (max-width: 768px) {
	body {
		/* Less compositing work and a calmer background on tablets and phones. */
		background-size: 125% 125%, 125% 125%, 135% 135%, cover !important;
		animation-duration: 40s;
	}
}