/* Liquid Glass slice — owned by the GLASS slice (runs LAST).
 * Styles the .glass / .glass-bubble hook surfaces added by the nav/screen slices.
 * The ::before layer refracts + saturates the backdrop through the injected
 * #pulse-glass SVG filter (blur 0, high refraction, high chromatic aberration);
 * the element keeps a faint tint + light-catching rim so it reads on any
 * background and degrades gracefully where displacement is unsupported (WebKit). */

.glass,
.glass-bubble {
	position: relative;
	isolation: isolate;
	/* Translucent enough for the backdrop to show through and refract. */
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.5),
		inset 0 -2px 6px rgba(0, 0, 0, 0.28),
		0 12px 34px -16px rgba(0, 0, 0, 0.7);
}

/* Backdrop layer: saturate only (blur 0) + the displacement/aberration filter. */
.glass::before,
.glass-bubble::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	backdrop-filter: saturate(185%);
	-webkit-backdrop-filter: saturate(185%);
	filter: url(#pulse-glass);
}

/* Light-catching rim: a 1px gradient border that reads like a glass edge. */
.glass::after,
.glass-bubble::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	padding: 1px;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.65) 0%,
		rgba(255, 255, 255, 0) 38%,
		rgba(255, 255, 255, 0) 62%,
		rgba(255, 255, 255, 0.3) 100%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* The nav bubbles read as glass pills, not opaque cards. */
#tabbar .nav-bubble {
	background-color: rgba(255, 255, 255, 0.08);
}
#tabbar .nav-bubble.active {
	/* Keep the active tint, but translucent so refraction still shows. */
	background: linear-gradient(
		160deg,
		rgba(255, 93, 143, 0.34),
		rgba(155, 107, 255, 0.26)
	);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Press feedback: the glass dips slightly. */
.glass-bubble:active {
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.4),
		inset 0 -1px 4px rgba(0, 0, 0, 0.3),
		0 6px 18px -12px rgba(0, 0, 0, 0.7);
}