/* Shared guest actions use the same invitation edge and touch target as music. */
body .dtc-guest-tools {
	position: fixed;
	z-index: 81;
	right: max(calc(var(--dtc-music-frame-right, max(0px, (100vw - 500px) / 2)) + 14px), env(safe-area-inset-right));
	bottom: calc(max(14px, env(safe-area-inset-bottom)) + 54px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 44px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	pointer-events: none;
}
body.dtc-vw .dtc-guest-tools { z-index: 2147483000; }
body .dtc-guest-tools > button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	box-shadow: none;
	box-sizing: border-box;
	appearance: none;
	overflow: visible;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}
body .dtc-guest-tools > button::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--dtc-guest-button-color, #a5262d);
	box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
	transition: transform .2s ease, box-shadow .2s ease;
}
body .dtc-guest-tools > [data-dtc-reaction="like"] { --dtc-guest-button-color: #2778d7; }
body .dtc-guest-tools > [data-dtc-reaction="heart"] { --dtc-guest-button-color: #e44878; }
body .dtc-guest-tools > button > svg {
	position: relative;
	display: block;
	width: 21px;
	height: 21px;
	margin: 0;
	padding: 0;
	color: inherit;
	pointer-events: none;
}
body .dtc-guest-tools > button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; box-shadow: 0 0 0 2px #a5262d; }
body .dtc-guest-tools[hidden], body .dtc-guest-tools > button[hidden] { display: none; }

/* Animate the artwork inside each fixed touch target. */
@media (prefers-reduced-motion: no-preference) {
	body .dtc-guest-tools > [data-dtc-reaction="like"] > svg {
		transform-origin: 50% 75%;
		animation: dtc-guest-like 4.8s ease-in-out infinite !important;
	}
	body .dtc-guest-tools > [data-dtc-reaction="heart"] > svg {
		transform-origin: center;
		animation: dtc-guest-heart 4s ease-in-out .45s infinite !important;
	}
	body .dtc-guest-tools > [data-dtc-reaction="heart"]::after {
		content: ""; position: absolute; inset: 4px; border: 1px solid #e44878;
		border-radius: 50%; opacity: 0; pointer-events: none;
		animation: dtc-guest-halo 4s ease-out .45s infinite !important;
	}
	body .dtc-guest-tools > button:active::before { transform: scale(.9); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	body .dtc-guest-tools > button:hover::before { transform: scale(1.1); box-shadow: 0 4px 12px rgb(0 0 0 / 22%); }
	body .dtc-guest-tools > button:hover:active::before { transform: scale(.9); }
}
@keyframes dtc-guest-like {
	0%, 62%, 100% { transform: translateY(0) rotate(0) scale(1); }
	69% { transform: translateY(-2px) rotate(-12deg) scale(1.08); }
	76% { transform: translateY(-1px) rotate(9deg) scale(1.08); }
	83% { transform: translateY(-2px) rotate(-5deg) scale(1.04); }
	90% { transform: translateY(0) rotate(0) scale(1); }
}
@keyframes dtc-guest-heart {
	0%, 12%, 30%, 100% { transform: scale(1); }
	6% { transform: scale(1.19); }
	20% { transform: scale(1.12); }
}
@keyframes dtc-guest-halo {
	0% { transform: scale(.9); opacity: .36; }
	30% { transform: scale(1.5); opacity: 0; }
	31%, 100% { transform: scale(.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	body .dtc-guest-tools > button::before { transition: none !important; }
	body .dtc-guest-tools > button > svg, body .dtc-guest-tools > button::after { animation: none !important; }
}

body #dtc-reaction-layer {
	position: fixed;
	z-index: 82;
	top: 0;
	right: var(--dtc-music-frame-right, max(0px, (100vw - 500px) / 2));
	bottom: 0;
	width: var(--dtc-music-frame-width, min(100vw, 500px));
	max-width: 100vw;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
	contain: layout paint;
}
body.dtc-vw #dtc-reaction-layer { z-index: 2147483001; }
body #dtc-reaction-layer > .dtc-reaction-bubble {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 5px;
	border: 0;
	border-radius: 50%;
	box-sizing: border-box;
	background: #e44878;
	color: #fff;
	box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
	pointer-events: none;
	will-change: transform, opacity;
}
body #dtc-reaction-layer > .dtc-reaction-bubble--like { background: #2778d7; }
body #dtc-reaction-layer .dtc-reaction-bubble > svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	color: #fff;
}
body #dtc-reaction-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}