/* Floating contact bubble (2.24.0). Colours, size and distance from
   the edges come in as custom properties on the element itself. */

.dg-bubble {
	--dg-bubble-bg: #25d366;
	--dg-bubble-fg: #fff;
	--dg-bubble-size: 60px;
	--dg-bubble-x: 20px;
	--dg-bubble-y: 20px;
	--dg-bubble-delay: 0s;
	position: fixed;
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: var(--dg-bubble-size);
	height: var(--dg-bubble-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dg-bubble-bg);
	color: var(--dg-bubble-fg) !important;
	font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0;
	text-decoration: none !important;
	text-transform: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	animation: dg-bubble-in .35s cubic-bezier(.2, .9, .3, 1.3) var(--dg-bubble-delay) both;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.dg-bubble:hover,
.dg-bubble:focus-visible {
	color: var(--dg-bubble-fg) !important;
	filter: brightness(1.06);
	transform: scale(1.06);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.dg-bubble:focus-visible { outline: 3px solid var(--dg-bubble-bg); outline-offset: 3px; }

@keyframes dg-bubble-in {
	/* "scale", not "transform", so the hover zoom still works after it. */
	from { opacity: 0; scale: .4; }
	to { opacity: 1; scale: 1; }
}

.dg-bubble__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52%;
	height: 52%;
}
.dg-bubble__icon svg { display: block; width: 100%; height: 100%; }
.dg-bubble__img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* ------------------------------------------------- Place on the screen */
.dg-bubble--bottom-right { right: var(--dg-bubble-x); bottom: var(--dg-bubble-y); }
.dg-bubble--bottom-left { left: var(--dg-bubble-x); bottom: var(--dg-bubble-y); }
.dg-bubble--top-right { right: var(--dg-bubble-x); top: var(--dg-bubble-y); }
.dg-bubble--top-left { left: var(--dg-bubble-x); top: var(--dg-bubble-y); }
/* Middle: centred on the side (the vertical distance does not apply). */
.dg-bubble--middle-right { right: var(--dg-bubble-x); top: calc(50% - var(--dg-bubble-size) / 2); }
.dg-bubble--middle-left { left: var(--dg-bubble-x); top: calc(50% - var(--dg-bubble-size) / 2); }
/* Logged-in visitors have the admin bar on top. */
.admin-bar .dg-bubble--top-right,
.admin-bar .dg-bubble--top-left { top: calc(var(--dg-bubble-y) + 32px); }

/* --------------------------------------------------------------- Shapes */
.dg-bubble--rounded { border-radius: 28%; }
.dg-bubble--square { border-radius: 6px; }
/* Speech bubble: one sharp corner pointing at the corner of the screen. */
.dg-bubble--speech { border-radius: 50% 50% 10% 50%; }
.dg-bubble--speech.dg-bubble--bottom-left,
.dg-bubble--speech.dg-bubble--middle-left { border-radius: 50% 50% 50% 10%; }
.dg-bubble--speech.dg-bubble--top-right { border-radius: 50% 10% 50% 50%; }
.dg-bubble--speech.dg-bubble--top-left { border-radius: 10% 50% 50% 50%; }
/* Pill: icon and text together. */
.dg-bubble--pill {
	width: auto;
	max-width: calc(100vw - 2 * var(--dg-bubble-x));
	padding: 0 calc(var(--dg-bubble-size) * .38) 0 calc(var(--dg-bubble-size) * .26);
	border-radius: 999px;
}
.dg-bubble--pill .dg-bubble__icon { width: calc(var(--dg-bubble-size) * .48); height: calc(var(--dg-bubble-size) * .48); }
.dg-bubble--pill .dg-bubble__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------- Text next to the bubble ("tip") */
.dg-bubble--tip .dg-bubble__label {
	position: absolute;
	top: 50%;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff;
	color: #1d1d1b;
	font-size: 14px;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
	transform: translateY(-50%);
	pointer-events: none;
}
.dg-bubble--tip.dg-bubble--bottom-right .dg-bubble__label,
.dg-bubble--tip.dg-bubble--middle-right .dg-bubble__label,
.dg-bubble--tip.dg-bubble--top-right .dg-bubble__label { right: calc(100% + 12px); }
.dg-bubble--tip.dg-bubble--bottom-left .dg-bubble__label,
.dg-bubble--tip.dg-bubble--middle-left .dg-bubble__label,
.dg-bubble--tip.dg-bubble--top-left .dg-bubble__label { left: calc(100% + 12px); }

/* ----------------------------------------------------- Attention ring */
.dg-bubble--pulse::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--dg-bubble-bg);
	opacity: .5;
	z-index: -1;
	animation: dg-bubble-pulse 2.4s ease-out calc(var(--dg-bubble-delay) + .6s) infinite;
}
@keyframes dg-bubble-pulse {
	0% { transform: scale(1); opacity: .5; }
	70%, 100% { transform: scale(1.45); opacity: 0; }
}

/* ------------------------------------------------------ Devices */
@media (max-width: 782px) {
	.dg-bubble--only-desktop { display: none !important; }
	.dg-bubble { width: min(var(--dg-bubble-size), 60px); height: min(var(--dg-bubble-size), 60px); }
	.dg-bubble--pill { width: auto; }
	/* No room beside the bubble on a phone: the text stays hidden
	   (the link still says it to screen readers). */
	.dg-bubble--tip .dg-bubble__label { display: none; }
	.admin-bar .dg-bubble--top-right,
	.admin-bar .dg-bubble--top-left { top: calc(var(--dg-bubble-y) + 46px); }
}
@media (min-width: 783px) {
	.dg-bubble--only-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.dg-bubble { animation: none; transition: none; }
	.dg-bubble--pulse::before { animation: none; display: none; }
}

@media print {
	.dg-bubble { display: none !important; }
}