/*
 * Floating WhatsApp button.
 *
 * Icon-only circular FAB. The label is not painted -- it lives on the
 * anchor's aria-label, so screen readers still announce it and the
 * per-language bubble_labels setting keeps working.
 *
 * Colour comes from the bubble_colour setting via --spcw-colour, with
 * --spcw-colour-rgb carrying the same value as "r, g, b" so the glow can
 * tint itself from whatever colour is configured.
 */

.spcw-bubble {
	position: fixed;
	bottom: calc(var(--spcw-offset, 20px) + env(safe-area-inset-bottom, 0px));
	z-index: 9999;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;

	/* Flat fill reads cheap. A low-opacity diagonal wash adds depth
	   without assuming anything about the configured hue. */
	background-color: var(--spcw-colour, #25D366);
	background-image: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .14));

	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;

	/* A coloured glow rather than a grey drop shadow -- the single biggest
	   difference between this and the old pill. */
	box-shadow:
		0 6px 16px -2px rgba(var(--spcw-colour-rgb, 37, 211, 102), .45),
		0 2px 6px rgba(0, 0, 0, .12);

	transition: transform .18s cubic-bezier(.34, 1.4, .64, 1), box-shadow .18s ease;
}

.spcw-bubble--bottom-right { right: var(--spcw-offset, 20px); }
.spcw-bubble--bottom-left  { left: var(--spcw-offset, 20px); }

.spcw-bubble:hover,
.spcw-bubble:focus-visible {
	color: #fff;
	transform: scale(1.06);
	box-shadow:
		0 10px 24px -2px rgba(var(--spcw-colour-rgb, 37, 211, 102), .58),
		0 3px 8px rgba(0, 0, 0, .16);
}

.spcw-bubble:active {
	transform: scale(.96);
	transition-duration: .08s;
}

.spcw-bubble:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.spcw-bubble__icon {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

/* The visible label is gone; aria-label carries it instead. */
.spcw-bubble__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Idle pulse.
 *
 * A ring expands out of the button and fades, every 3s. The button itself
 * never moves -- movement under the cursor is what makes these widgets feel
 * jumpy.
 */
.spcw-bubble::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: var(--spcw-colour, #25D366);
	opacity: .55;
	z-index: 0;
	animation: spcw-pulse 3s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes spcw-pulse {
	0%        { transform: scale(1);    opacity: .5; }
	/* Most of the cycle is spent resting, so it reads as an occasional
	   heartbeat rather than a constant throb. */
	45%, 100% { transform: scale(1.75); opacity: 0; }
}

/* Stop the pulse while the user is interacting -- the hover state is its
   own signal and the two together look busy. */
.spcw-bubble:hover::before,
.spcw-bubble:focus-visible::before,
.spcw-bubble:active::before {
	animation-play-state: paused;
	opacity: 0;
}

@media (max-width: 480px) {
	.spcw-bubble {
		width: 56px;
		height: 56px;
	}

	.spcw-bubble__icon {
		width: 26px;
		height: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spcw-bubble {
		transition: none;
	}

	.spcw-bubble:hover,
	.spcw-bubble:focus-visible,
	.spcw-bubble:active {
		transform: none;
	}

	.spcw-bubble::before {
		animation: none;
		opacity: 0;
	}
}