/* wpagent/contact-float + wpagent/contact-float-item (P14). Brand colours
 * mirror assets/brands/brands.json. z-index 90 inside the footer part, which
 * the theme lifts above page content (below the header). */
.wpab-contact-float {
	--wpab-cf-size-v: var(--wpab-cf-size, 52px);
	position: fixed;
	bottom: var(--wpab-cf-y, 20px);
	left: var(--wpab-cf-x, 20px);
	z-index: 90;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: var(--wpab-cf-gap, 12px);
	margin: 0;
}
.wpab-contact-float.is-bottom-right,
.wpab-contact-float.is-middle-right {
	right: var(--wpab-cf-x, 20px);
	left: auto;
	align-items: flex-end;
}
.wpab-contact-float.is-middle-left,
.wpab-contact-float.is-middle-right {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}
.wpab-contact-float__list {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: var(--wpab-cf-gap, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wpab-contact-float-item {
	margin: 0;
}

/* Buttons (items and the expand toggle). */
.wpab-contact-float-item__link,
.wpab-contact-float__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--wpab-cf-size-v);
	height: var(--wpab-cf-size-v);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wpab-cf-bg, var(--wp--preset--color--brand, #2563eb));
	color: var(--wpab-cf-color, #fff);
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.24);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wpab-contact-float__toggle {
	background: var(--wpab-cf-toggle-bg, var(--wp--preset--color--brand, #2563eb));
	color: var(--wpab-cf-toggle-color, #fff);
}
.wpab-contact-float.is-shape-rounded .wpab-contact-float-item__link,
.wpab-contact-float.is-shape-rounded .wpab-contact-float__toggle {
	border-radius: var(--wp--preset--border-radius--md, 12px);
}
.wpab-contact-float.is-shape-square .wpab-contact-float-item__link,
.wpab-contact-float.is-shape-square .wpab-contact-float__toggle {
	border-radius: 0;
}
.wpab-contact-float-item__link:hover,
.wpab-contact-float__toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(16, 24, 40, 0.3);
}
.wpab-contact-float-item__link:focus-visible,
.wpab-contact-float__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #2563eb);
	outline-offset: 3px;
}
.wpab-contact-float-item__icon,
.wpab-contact-float__toggle-icon,
.wpab-contact-float__close-icon {
	flex: none;
	width: calc(var(--wpab-cf-size-v) * 0.5);
	height: calc(var(--wpab-cf-size-v) * 0.5);
}
.wpab-contact-float-item.is-type-zalo { --wpab-cf-bg: #0068ff; }
.wpab-contact-float-item.is-type-phone { --wpab-cf-bg: #16a34a; }
.wpab-contact-float-item.is-type-messenger { --wpab-cf-bg: #0866ff; }
.wpab-contact-float-item.is-type-whatsapp { --wpab-cf-bg: #25d366; }
.wpab-contact-float-item.is-type-sms { --wpab-cf-bg: #0ea5e9; }
.wpab-contact-float-item.is-type-email { --wpab-cf-bg: #475467; }
.wpab-contact-float-item.is-type-link { --wpab-cf-bg: #344054; }

/* Labels: tooltip beside the button (hover/focus), a pill (always) or screen readers only (none). */
.wpab-contact-float__tip {
	position: absolute;
	top: 50%;
	left: calc(100% + 10px);
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--wp--preset--color--ink, #101828);
	color: var(--wp--preset--color--surface, #fff);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%);
	transition: opacity 0.15s ease, visibility 0.15s;
}
.wpab-contact-float.is-bottom-right .wpab-contact-float__tip,
.wpab-contact-float.is-middle-right .wpab-contact-float__tip {
	right: calc(100% + 10px);
	left: auto;
}
.wpab-contact-float.is-labels-tooltip :is(.wpab-contact-float-item__link, .wpab-contact-float__toggle):is(:hover, :focus-visible) > .wpab-contact-float__tip {
	opacity: 1;
	visibility: visible;
}
.wpab-contact-float.is-labels-none .wpab-contact-float__tip,
.wpab-contact-float.is-labels-always .wpab-contact-float__toggle .wpab-contact-float__tip {
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
}
.wpab-contact-float.is-labels-always .wpab-contact-float-item__link {
	gap: 8px;
	padding: 0 18px 0 calc(var(--wpab-cf-size-v) * 0.25);
}
.wpab-contact-float.is-labels-always .wpab-contact-float-item__label {
	position: static;
	padding: 0;
	background: none;
	color: inherit;
	font-size: 0.9375rem;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Expand layout (view.js): the toggle opens the list above it. */
.wpab-contact-float__close-icon,
.wpab-contact-float__toggle[aria-expanded="true"] .wpab-contact-float__toggle-icon {
	display: none;
}
.wpab-contact-float__toggle[aria-expanded="true"] .wpab-contact-float__close-icon {
	display: block;
}
.wpab-contact-float.is-ready .wpab-contact-float__list {
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.wpab-contact-float.is-ready.is-collapsed .wpab-contact-float__list {
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

/* Attention effects: the container's (buttons without their own) or the button's own. */
@keyframes wpab-cf-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wpab-cf-bg, #2563eb) 55%, transparent); }
	70% { box-shadow: 0 0 0 16px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes wpab-cf-ring {
	0%, 50%, 100% { transform: rotate(0); }
	5%, 15%, 25%, 35% { transform: rotate(-14deg); }
	10%, 20%, 30%, 40% { transform: rotate(14deg); }
}
@keyframes wpab-cf-shake {
	0%, 60%, 100% { transform: translateX(0); }
	10%, 30%, 50% { transform: translateX(-3px); }
	20%, 40% { transform: translateX(3px); }
}
.wpab-contact-float.is-layout-stacked.is-effect-pulse .wpab-contact-float-item:not(.has-effect) .wpab-contact-float-item__link,
.wpab-contact-float.is-layout-expand.is-effect-pulse .wpab-contact-float__toggle,
.wpab-contact-float-item.is-effect-pulse .wpab-contact-float-item__link {
	animation: wpab-cf-pulse 2s ease-out infinite;
}
.wpab-contact-float.is-layout-stacked.is-effect-ring .wpab-contact-float-item:not(.has-effect) .wpab-contact-float-item__icon,
.wpab-contact-float.is-layout-expand.is-effect-ring .wpab-contact-float__toggle-icon,
.wpab-contact-float-item.is-effect-ring .wpab-contact-float-item__icon {
	animation: wpab-cf-ring 2.4s ease-in-out infinite;
}
.wpab-contact-float.is-layout-stacked.is-effect-shake .wpab-contact-float-item:not(.has-effect) .wpab-contact-float-item__link,
.wpab-contact-float.is-layout-expand.is-effect-shake .wpab-contact-float__toggle,
.wpab-contact-float-item.is-effect-shake .wpab-contact-float-item__link {
	animation: wpab-cf-shake 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wpab-contact-float *,
	.wpab-contact-float.is-ready .wpab-contact-float__list {
		animation: none !important;
		transition: none !important;
	}
	.wpab-contact-float-item__link:hover,
	.wpab-contact-float__toggle:hover,
	.wpab-contact-float.is-ready.is-collapsed .wpab-contact-float__list {
		transform: none;
	}
}

/* Editor previews: in the flow where the block sits (not over the editor), list open, no motion. */
.wpab-contact-float.is-preview {
	position: relative;
	inset: auto;
	transform: none;
	margin: 8px 0;
}
.wpab-contact-float.is-preview * {
	animation: none !important;
}