/* Independent of the AI widget so every frontend document can use the shortcut. */
button.dtc-back-to-top {
	appearance: none;
	box-sizing: border-box;
	position: fixed;
	inset: auto 24px 24px auto;
	z-index: 96;
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 1px solid #efceda;
	border-radius: 50%;
	background: linear-gradient(145deg, #fff 15%, #fff0f5);
	color: #c84c76;
	box-shadow: 0 5px 18px #a64a7026, inset 0 1px 0 #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
button.dtc-back-to-top[hidden] { display: none !important; }
button.dtc-back-to-top > svg { display: block; width: 22px; height: 22px; max-width: none; stroke-width: 2; pointer-events: none; }
button.dtc-back-to-top:focus-visible { outline: 2px solid #c84c76; outline-offset: 4px; }
button.dtc-back-to-top:active { transform: translateY(0) scale(.95); }
@media screen and (min-width: 768px) {
	button.dtc-back-to-top { display: flex; }
	/* Keep a 16px gap above the 48px shortcut, including the support pulse. */
	body:has(> .dtc-back-to-top:not([hidden])) .support-widget { bottom: 88px; }
	/* Leave the QR card, music player and editing toolbar clear. */
	button.dtc-back-to-top--invitation { right: auto; left: 24px; bottom: 80px; }
}
@media (hover: hover) {
	button.dtc-back-to-top:hover {
		transform: translateY(-3px);
		border-color: #df8da8;
		background: #ce5a80;
		color: #fff;
		box-shadow: 0 8px 24px #a64a7038;
	}
}
@media (prefers-reduced-motion: reduce) {
	button.dtc-back-to-top { transition: none; }
}