/* Floating contact bubbles. Uses theme tokens when present, with safe fallbacks. */
.thh-fab {
	--fab-size: 48px;
	position: fixed; right: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); z-index: 60;
	display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
}
.thh-fab__list { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.thh-fab__btn, .thh-fab__toggle, .thh-fab__top {
	position: relative; display: inline-grid; place-items: center; width: var(--fab-size); height: var(--fab-size);
	padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer; text-decoration: none;
	box-shadow: 0 8px 20px -8px rgb(14 42 30 / 55%), 0 0 0 3px rgb(255 255 255 / 85%);
	transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s;
}
.thh-fab__btn:hover, .thh-fab__toggle:hover, .thh-fab__top:hover { transform: translateY(-2px) scale(1.04); }
.thh-fab :is(a, button):focus-visible { outline: 3px solid var(--wp--preset--color--brand-400, #19b57a); outline-offset: 3px; }
.thh-fab__btn--whatsapp { background: #25d366; }
.thh-fab__btn--zalo { background: #0068ff; }
.thh-fab__btn--wechat { background: #07c160; }
.thh-fab__btn--phone { background: var(--wp--preset--color--forest-800, #1b4c37); }
.thh-fab__btn--email { background: var(--wp--preset--color--acacia-600, #9c5d27); }
.thh-fab__toggle { background: var(--wp--preset--color--forest-800, #1b4c37); }
.thh-fab__top { background: #fff; color: var(--wp--preset--color--forest-900, #133a2a); box-shadow: 0 8px 20px -10px rgb(14 42 30 / 55%), 0 0 0 1px rgb(14 42 30 / 16%); }
.thh-fab__top[hidden] { display: none; }
.thh-fab__tip {
	position: absolute; right: calc(100% + .7rem); top: 50%; transform: translate(6px, -50%);
	padding: .35rem .7rem; border-radius: 999px; background: var(--wp--preset--color--forest-950, #0e2a1e); color: #fff;
	font-size: .8125rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.thh-fab__btn:is(:hover, :focus-visible) .thh-fab__tip { opacity: 1; transform: translate(0, -50%); }
.thh-fab__toast {
	position: absolute; right: calc(var(--fab-size) + .75rem); bottom: 0; margin: 0; padding: .55rem .9rem; max-width: 70vw;
	border-radius: 12px; background: var(--wp--preset--color--forest-950, #0e2a1e); color: #fff; font-size: .875rem; font-weight: 600;
}
.thh-fab__toast[hidden] { display: none; }

/* Desktop: the channel bubbles are always visible; phones: one toggle that expands upwards. */
.thh-fab__toggle { display: none; }
@media (max-width: 899px) {
	.thh-fab { --fab-size: 46px; }
	.thh-fab__toggle { display: inline-grid; }
	.thh-fab__list { position: absolute; right: 0; bottom: calc(var(--fab-size) + .6rem); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
	.thh-fab.is-open .thh-fab__list { opacity: 1; visibility: visible; transform: none; }
	.thh-fab__tip { display: none; }
	.thh-fab { flex-direction: column-reverse; align-items: flex-end; }
	.thh-fab__top { order: -1; } /* column-reverse: first item sits at the bottom */
}
@media (prefers-reduced-motion: reduce) { .thh-fab * { transition: none !important; } }
@media print { .thh-fab { display: none; } }