/*
 * 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.30);
	--mike-ai-violet: rgba(139, 92, 246, 0.25);
	--mike-ai-teal: rgba(20, 184, 166, 0.18);
}

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;
}

/* Keep the aurora inside the application stacking context as well.  The login
 * page already exposes the body background, whereas the authenticated app
 * creates its own full-screen stacking context. */
#app::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	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%);
	background-position: 0% 30%, 100% 0%, 60% 100%, center;
	background-size: 150% 150%, 145% 145%, 155% 155%, cover;
	animation: mike-ai-aurora 30s ease-in-out infinite alternate;
}

/* Open WebUI's full-screen wrappers use Tailwind variant class names such as
 * "dark:bg-gray-900".  They must be transparent or they hide the body theme. */
.dark #app .app > [class~='dark:bg-gray-900'],
.dark #auth-page > [class~='dark:bg-black'] {
	background-color: transparent !important;
}

/* Open WebUI 0.9.x authenticated/chat layout.  These are structural,
 * full-screen layers, not message cards, menus or dialogs. */
.dark #app > div,
.dark #app .app,
.dark #app .app > div,
.dark #chat-container,
.dark #chat-container > div,
.dark #chat-container > div > div {
	background-color: transparent !important;
	background-image: none !important;
	backdrop-filter: none !important;
}

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

/* The two full-screen wrappers above need to win over the general panel rule. */
.dark #app .app > [class~='dark:bg-gray-900'],
.dark #auth-page > [class~='dark:bg-black'] {
	background-color: transparent !important;
	backdrop-filter: none;
}

/* Retain glassy controls inside the chat without turning the entire canvas
 * back into a flat dark rectangle.  This intentionally follows the general
 * panel rule so the chat-specific opacity wins the cascade. */
.dark #chat-container [class~='dark:bg-gray-950'],
.dark #chat-container [class~='dark:bg-gray-900'],
.dark #chat-container [class~='dark:bg-gray-850'] {
	background-color: rgba(15, 20, 32, 0.70) !important;
	backdrop-filter: blur(16px) 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 [class~='dark:border-gray-800'],
.dark [class~='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,
	#app::before {
		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;
	}
}