:root {
	--glass-bg: rgba(255, 255, 255, 0.08);
	--glass-highlight: rgba(250, 250, 250, 0.5);
	--glass-border: rgba(255, 255, 255, 0.18);
}

html, body { margin: 0; }

body {
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: #0b1020;
	min-height: 100%;
	overflow-x: hidden;
}

/* ---- Colorful backdrop (gives the glass something to refract) ---- */
.bg-scene {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background:
		radial-gradient(1200px 800px at 80% -10%, #1e3a8a55, transparent 60%),
		radial-gradient(1000px 700px at -10% 110%, #7c3aed44, transparent 60%),
		linear-gradient(160deg, #0b1020 0%, #0d1428 100%);
}
.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.55;
	animation: drift 24s ease-in-out infinite alternate;
}
.blob-a { width: 42vw; height: 42vw; left: -6vw; top: 8vh;  background: #6366f1; }
.blob-b { width: 38vw; height: 38vw; right: -4vw; top: 30vh; background: #ec4899; animation-delay: -6s; }
.blob-c { width: 34vw; height: 34vw; left: 30vw; bottom: -12vh; background: #22d3ee; animation-delay: -12s; }

@keyframes drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(4vw, -4vh, 0) scale(1.1); }
}

/* ---- Liquid glass surfaces ----
   Baseline glassmorphism in CSS (works everywhere, incl. Safari).
   liquid-glass.js layers on an SVG displacement filter where supported for
   the refractive edge of Apple's "liquid glass". */
.glass {
	position: relative;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	box-shadow:
		inset 0 0 6px 0 var(--glass-highlight),
		0 10px 40px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(10px) saturate(1.6) brightness(1.05);
	backdrop-filter: blur(10px) saturate(1.6) brightness(1.05);
}
.glass-card { border-radius: 24px; }
.glass-bar  { border-radius: 18px; }

.glass-btn {
	border-radius: 14px;
	cursor: pointer;
	color: #fff;
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.glass-btn:hover:not(:disabled) {
	transform: scale(1.03) rotate(-0.5deg);
	box-shadow:
		inset 0 0 8px 0 var(--glass-highlight),
		0 14px 48px rgba(0, 0, 0, 0.4);
}
.glass-btn:disabled { opacity: 0.6; cursor: default; }

/* Inputs: subtle frosted field (no heavy backdrop filter so text stays crisp) */
.glass-input {
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--glass-border);
	color: #fff;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.glass-input::placeholder { color: rgba(226, 232, 240, 0.45); }
.glass-input:focus {
	border-color: rgba(129, 140, 248, 0.8);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* ---- Bits ---- */
.brand-mark {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	border-radius: 16px;
	font-weight: 800; font-size: 24px; color: #fff;
	background: linear-gradient(135deg, #6366f1, #ec4899);
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
}
.brand-mark-sm { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }

.presence-pill {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(34, 197, 94, 0.15);
	border: 1px solid rgba(34, 197, 94, 0.35);
	color: #bbf7d0;
	white-space: nowrap;
}

.msg {
	display: flex; flex-direction: column;
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.msg-meta { font-size: 11px; color: rgba(148, 163, 184, 0.9); }
.msg-body { color: #e2e8f0; }