/* Hero idea composer pill — styling copied verbatim from siiftFE-dev-branch
   (public/glass-landing.css). Kept outside Tailwind so backdrop-filter survives.
   White glass fill only (no mint tint); brand color stays in border/shadow. */

.proj-morph-glass .landing-hero-input-shell.glass-panel {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 78%, transparent);
	backdrop-filter: blur(18px) saturate(1.6);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	border: 3px solid #000;
	/* Fixed radius keeps a pill look on one line and a rounded shell when multi-line */
	border-radius: 28px;
	box-shadow:
		var(--glass-inner-glow),
		0 0 12px color-mix(in srgb, var(--brand-neon) 55%, transparent),
		0 0 28px color-mix(in srgb, var(--brand-neon) 40%, transparent),
		0 8px 28px -6px color-mix(in srgb, var(--brand-neon) 50%, transparent);
	transition:
		background var(--dur-fast, 150ms) var(--ease-out, ease-out),
		border-color var(--dur-fast, 150ms) var(--ease-out, ease-out),
		border-width var(--dur-fast, 150ms) var(--ease-out, ease-out),
		box-shadow var(--dur-base, 220ms) var(--ease-out, ease-out);
}

.proj-morph-glass .landing-hero-input-shell.glass-panel:hover,
.proj-morph-glass .landing-hero-input-shell.glass-panel:focus-within {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 88%, transparent);
	border-color: #000;
	box-shadow:
		var(--glass-inner-glow),
		0 0 16px color-mix(in srgb, var(--brand-neon) 70%, transparent),
		0 0 40px color-mix(in srgb, var(--brand-neon) 50%, transparent),
		0 10px 36px -4px color-mix(in srgb, var(--brand-neon) 60%, transparent);
}

.proj-morph-glass .landing-hero-input-shell.glass-panel:focus-within {
	border-width: 4px;
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .landing-hero-input-shell.glass-panel {
	background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 82%, transparent);
	/* Soft frosted rim instead of a stark pure-white outline; brand accent stays in the glow */
	border-color: color-mix(in srgb, var(--n-white) 34%, var(--glass-tint-dark));
	box-shadow:
		var(--glass-inner-glow),
		inset 0 1px 0 color-mix(in srgb, var(--n-white) 12%, transparent),
		0 10px 30px -16px rgba(0, 0, 0, 0.7),
		0 0 12px color-mix(in srgb, var(--brand-neon) 34%, transparent),
		0 0 26px color-mix(in srgb, var(--brand-neon) 22%, transparent);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .landing-hero-input-shell.glass-panel:hover {
	background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 86%, transparent);
	border-color: color-mix(in srgb, var(--n-white) 48%, var(--glass-tint-dark));
	box-shadow:
		var(--glass-inner-glow),
		inset 0 1px 0 color-mix(in srgb, var(--n-white) 14%, transparent),
		0 12px 34px -16px rgba(0, 0, 0, 0.72),
		0 0 16px color-mix(in srgb, var(--brand-neon) 48%, transparent),
		0 0 36px color-mix(in srgb, var(--brand-neon) 30%, transparent);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .landing-hero-input-shell.glass-panel:focus-within {
	background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 88%, transparent);
	/* Focus brightens the rim toward the neon accent — that's where the strong emphasis lives */
	border-color: color-mix(in srgb, var(--brand-neon) 55%, color-mix(in srgb, var(--n-white) 60%, var(--glass-tint-dark)));
	box-shadow:
		var(--glass-inner-glow),
		inset 0 1px 0 color-mix(in srgb, var(--n-white) 16%, transparent),
		0 12px 36px -16px rgba(0, 0, 0, 0.72),
		0 0 20px color-mix(in srgb, var(--brand-neon) 70%, transparent),
		0 0 48px color-mix(in srgb, var(--brand-neon) 44%, transparent);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .landing-hero-input-shell.glass-panel:focus-within {
	border-width: 4px;
}