/*
 * Bubbles (parts/bubbles.php, plan 23): the fixed pair in the bottom-right
 * corner, one gutter from the edges — the chat bubble at the corner, the
 * WhatsApp one 12px to its left. Each is a 56px Forest A disc with a white
 * glyph (no design for them: the site's palette, the links' hover timing).
 * z-index 40: under the chat panel (45), the menu (48), its blur (49) and the
 * header (50), so the open menu covers them. The wrapper's own
 * view-transition-name keeps the pair in place while a page transition slides
 * the content.
 */

.bubbles {
	--bubble-size: 56px;

	position: fixed;
	right: var(--gutter);
	bottom: var(--gutter);
	z-index: 40;
	display: flex;
	gap: 12px;
	view-transition-name: bubbles;
}

.bubbles__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bubble-size);
	height: var(--bubble-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-forest-a);
	color: var(--color-white);
	box-shadow: 0 2px 10px rgb(0 36 30 / 0.3);
	cursor: pointer;
	transition: background-color var(--link-hover-duration) var(--link-hover-ease);
}

/* Hover only where a pointer hovers: iOS keeps :hover after a tap, and the disc would stay Cooper. */
@media (hover: hover) {
	.bubbles__disc:hover {
		background: var(--color-cooper-2);
	}
}

.bubbles__disc:focus-visible {
	background: var(--color-cooper-2);
}

.bubbles__disc:focus-visible {
	outline: 2px solid var(--color-forest-a);
	outline-offset: 3px;
}

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

@media print {
	.bubbles {
		display: none;
	}
}

/* Phones: the pair stands in a column, WhatsApp above the chat, so the footer's last line keeps its right half (client, 2026-10-14). */
@media (max-width: 767px) {
	.bubbles {
		flex-direction: column;
	}
}