.p68gf {
	--p68gf-a: var(--p68gf-accent, var(--primary-color, #e11d48));

	position: fixed;
	/* Sits above the site's existing contact bubble (#devvn_contact_1, which is
	   offset 70px/40px); override the vars if that widget moves. */
	right: var(--p68gf-right, 40px);
	bottom: var(--p68gf-bottom, 152px);
	z-index: var(--p68gf-z, 9990);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #fff;
	animation: p68gf-in .45s cubic-bezier(.2, .8, .3, 1.2) both;
}

.p68gf:hover,
.p68gf:focus-visible { color: #fff; text-decoration: none; }

.p68gf__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--p68gf-a);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
	transition: transform .25s cubic-bezier(.2, .8, .3, 1.2);
}

.p68gf__btn svg { width: 26px; height: 26px; }

/* Halo drawn with box-shadow spread so it renders outside the element — a
   filled child would sit under the button's own background. Two of them, half a
   cycle apart, so one is always expanding. */
.p68gf__btn::before,
.p68gf__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	animation: p68gf-pulse 2.2s ease-out infinite;
}

.p68gf__btn::after { animation-delay: 1.1s; }

.p68gf:hover .p68gf__btn { transform: scale(1.08) rotate(-6deg); }
.p68gf:active .p68gf__btn { transform: scale(.96); }

.p68gf__label {
	max-width: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border-radius: 999px;
	background: #14161b;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 38px;
	opacity: 0;
	transition: max-width .32s ease, padding .32s ease, opacity .2s ease;
}

.p68gf:hover .p68gf__label,
.p68gf:focus-visible .p68gf__label {
	max-width: 260px;
	padding: 0 16px;
	opacity: 1;
}

@keyframes p68gf-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p68gf-a) 55%, transparent); }
	100% { box-shadow: 0 0 0 24px color-mix(in srgb, var(--p68gf-a) 0%, transparent); }
}

@keyframes p68gf-in {
	from { opacity: 0; transform: translateY(14px) scale(.8); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
	.p68gf { bottom: var(--p68gf-bottom-mobile, 138px); right: var(--p68gf-right-mobile, 28px); }
	.p68gf__btn { width: 50px; height: 50px; }
	.p68gf__btn svg { width: 23px; height: 23px; }
	.p68gf__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.p68gf,
	.p68gf__btn::before,
	.p68gf__btn::after { animation: none; }
}