/*
 * Chat button (a theme part, loaded on every page by inc/assets.php).
 *
 * A round button fixed at the bottom right. On phones it sits above the sticky
 * mobile bar (--mbar-h, from mobile-bar.css). If the mobile bar has its own Chat
 * slot, this button is hidden on phones and shown from 900px up.
 */

.chat__fab {
	position: fixed;
	right: 16px;
	bottom: calc(var(--mbar-h, 0px) + 14px + env(safe-area-inset-bottom));
	z-index: 49; /* under the mobile bar (50), over the page */
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--primary);
	box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--ink) 55%, transparent);
	color: var(--on-primary);
	cursor: pointer;
}

a.chat__fab { text-decoration: none; }

.chat__fab:hover,
.chat__fab:focus-visible { filter: brightness(0.94); }

.chat__fab .ico { width: 26px; height: 26px; }

/* The mobile bar has a Chat slot: no floating button on phones. */
@media (max-width: 899px) {
	.chat__fab--desktop-only { display: none; }
}

@media (min-width: 900px) {
	.chat__fab { bottom: 24px; right: 24px; width: 60px; height: 60px; }
}