/*
 * Voice assistant widget (button, panel, captions) and the "Hear it for yourself" demo card. Uses the site's
 * palette variables, so it follows the visitor's colour choice. Behaviour: assets/js/voice.js.
 * The launcher and the card are deliberately dark "ink" with a mint wave, so neither reads as one of the orange CTA buttons.
 */
.ftw-voice, .ftw-voice-demo, .ftw-voice-nav {
	--vc-ink: var(--wp--preset--color--contrast, #231A14); --vc-on-ink: var(--wp--preset--color--base, #FFFBF5);
	--vc-wave: var(--wp--preset--color--accent-2-soft, #99E2D0); --vc-edge: rgba(255, 251, 245, .18);
}
/* Arcade is already a dark page, so the ink lifts to the raised surface and the wave takes the bright accent. */
:root[data-palette="arcade"] .ftw-voice, :root[data-palette="arcade"] .ftw-voice-demo, :root[data-palette="arcade"] .ftw-voice-nav {
	--vc-ink: var(--wp--preset--color--surface-strong, #2A2740); --vc-on-ink: #F6F5FF; --vc-wave: var(--wp--preset--color--accent-2, #5EEAD4); --vc-edge: rgba(94, 234, 212, .45);
}
.ftw-voice { position: fixed; z-index: 60; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); font-family: var(--wp--preset--font-family--body, system-ui, sans-serif); font-size: 1rem; line-height: 1.45; color: var(--wp--preset--color--contrast, #231A14); }
.ftw-voice [hidden] { display: none !important; }
/* Keep clear of the mobile sticky bar on guide pages. */
@media (max-width: 781px) { body:has(.ftw-guide__sticky) .ftw-voice { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- Launch button: dark ink pill with a mic that sends out sound-wave rings ---------- */
.ftw-voice__launch {
	display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 6px; margin: 0;
	border: 1px solid var(--vc-edge); border-radius: var(--wp--custom--radius--pill, 999px); cursor: pointer;
	background: var(--vc-ink); color: var(--vc-on-ink);
	font: inherit; font-weight: 600; box-shadow: 0 6px 22px rgba(35, 26, 20, .3);
	transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease, visibility 0s;
}
.ftw-voice__launch:hover { box-shadow: 0 6px 22px rgba(35, 26, 20, .3), 0 0 0 2px var(--vc-wave); }
.ftw-voice__launch-icon {
	position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, .12); background: color-mix(in srgb, var(--vc-wave) 22%, transparent); color: var(--vc-wave);
}
.ftw-voice__launch-icon::before, .ftw-voice__launch-icon::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--vc-wave); opacity: 0; pointer-events: none;
	animation: ftw-voice-ring 2.6s ease-out infinite;
}
.ftw-voice__launch-icon::after { animation-delay: 1.3s; }
@keyframes ftw-voice-ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.ftw-voice.is-open .ftw-voice__launch { display: none; }
/* A demo card is on screen: tuck the floating button away so there is only one talk button. */
.ftw-voice.is-demo-visible:not(.is-open) .ftw-voice__launch { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease, visibility 0s .2s; }

/* ---------- Header "Talk to AI" button: small ink pill with a live mint sound wave, same family as the card and launcher ---------- */
.ftw-voice-nav {
	display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; margin: 0; padding: 0 16px 0 13px;
	border: 1px solid var(--vc-edge); border-radius: var(--wp--custom--radius--pill, 999px); cursor: pointer;
	background: var(--vc-ink); color: var(--vc-on-ink); font: 500 0.875rem/1 var(--wp--preset--font-family--body, system-ui, sans-serif); white-space: nowrap;
	transition: box-shadow .2s ease;
}
.ftw-voice-nav:hover { box-shadow: 0 0 0 2px var(--vc-wave); }
.ftw-voice-nav:focus-visible { outline: 3px solid var(--wp--preset--color--contrast, #231A14); outline-offset: 3px; }
.ftw-voice-nav__wave { display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: none; width: 20px; height: 18px; }
.ftw-voice-nav__wave i { display: block; width: 2.5px; height: 18px; border-radius: 2px; background: var(--vc-wave); transform-origin: center; animation: ftw-vn-wave 1.4s ease-in-out infinite; }
.ftw-voice-nav__wave i:nth-child(1) { height: 9px; animation-delay: -.2s; }
.ftw-voice-nav__wave i:nth-child(2) { height: 15px; animation-delay: -.6s; }
.ftw-voice-nav__wave i:nth-child(3) { height: 18px; animation-delay: -1s; }
.ftw-voice-nav__wave i:nth-child(4) { height: 12px; animation-delay: -.4s; }
.ftw-voice-nav__wave i:nth-child(5) { height: 7px; animation-delay: -.8s; }
@keyframes ftw-vn-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
/* Header room: the full pill (words + wave) only fits from 1360px. Below that it is a round icon (words still read out to
   screen readers). The Colours button is always icon-only next to it, the header CTA goes at 1199px instead of 1160px, and the
   links tighten between 840px and 1020px, so nothing wraps at 1024, 1280 or 1440. */
.ftw-voice-nav ~ .ftw-palette .ftw-palette__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ftw-voice-nav ~ .ftw-palette .ftw-palette__toggle { padding: 0 12px; }
@media (max-width: 1359px) {
	.ftw-voice-nav { width: 44px; padding: 0; justify-content: center; }
	.ftw-voice-nav__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 600px) and (max-width: 1199px) { .ftw-header__actions:has(.ftw-voice-nav) .ftw-header__cta { display: none; } }
@media (min-width: 840px) and (max-width: 1020px) {
	.ftw-header:has(.ftw-voice-nav) { gap: 8px; }
	.ftw-header:has(.ftw-voice-nav) .wp-block-navigation__container { gap: 12px; }
}

/* ---------- Panel ---------- */
.ftw-voice__panel {
	box-sizing: border-box; width: min(360px, calc(100vw - 32px)); padding: 16px 18px 18px;
	background: var(--wp--preset--color--white, #fff); color: var(--wp--preset--color--contrast, #231A14);
	border: 1px solid var(--wp--preset--color--line, #EFE6DA); border-radius: var(--wp--custom--radius--card, 18px);
	box-shadow: 0 14px 44px rgba(35, 26, 20, .24);
}
.ftw-voice__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ftw-voice__title { margin: 0; font-family: var(--wp--preset--font-family--heading, system-ui, sans-serif); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.ftw-voice__close {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px -8px -6px 0; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.ftw-voice__close:hover { background: var(--wp--preset--color--surface, #F6EEE3); }
.ftw-voice__consent, .ftw-voice__msg { margin: 0 0 14px; color: var(--wp--preset--color--muted, #4A3F37); }
.ftw-voice__consent a, .ftw-voice__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ftw-voice__msg { color: var(--wp--preset--color--contrast, #231A14); font-weight: 600; margin-bottom: 8px; }
.ftw-voice__help { margin: 0 0 14px; color: var(--wp--preset--color--muted, #4A3F37); font-size: .9375rem; }
.ftw-voice__turnstile { display: flex; justify-content: center; margin: 0 0 12px; }
.ftw-voice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

.ftw-voice__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 24px;
	border: 1px solid var(--wp--preset--color--line, #EFE6DA); border-radius: var(--wp--custom--radius--pill, 999px); cursor: pointer;
	background: var(--wp--preset--color--surface, #F6EEE3); color: var(--wp--preset--color--contrast, #231A14); font: inherit; font-weight: 600;
}
.ftw-voice__btn:hover { background: var(--wp--preset--color--surface-strong, #EBE0D2); }
/* The panel's own primary button matches the launcher and card (mint on ink text), not the orange site CTAs. */
.ftw-voice__btn--primary { border-color: transparent; background: var(--vc-wave); color: #231A14; }
.ftw-voice__btn--primary:hover { background: var(--vc-wave); box-shadow: 0 0 0 2px var(--vc-ink); }
:root[data-palette="arcade"] .ftw-voice__btn--primary { color: #0E0D16; }
.ftw-voice [data-view="call"] .ftw-voice__btn { width: 100%; }
.ftw-voice [data-view="consent"] .ftw-voice__btn { width: 100%; }

.ftw-voice :focus-visible { outline: 3px solid var(--wp--preset--color--contrast, #231A14); outline-offset: 3px; }
.ftw-voice__launch:focus-visible { outline-offset: 4px; }

/* ---------- Call view ---------- */
.ftw-voice__status { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-weight: 600; }
.ftw-voice__status-text { min-width: 0; }
.ftw-voice__indicator { display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex: none; width: 36px; height: 28px; }
.ftw-voice__indicator i { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--wp--preset--color--accent-1, #C2410C); transform-origin: center; }
/* connecting: bars ripple slowly */
[data-state="connecting"] .ftw-voice__indicator i { animation: ftw-voice-ripple 1.1s ease-in-out infinite; opacity: .55; }
/* listening: a calm, gentle pulse */
[data-state="listening"] .ftw-voice__indicator i { height: 8px; animation: ftw-voice-breathe 2s ease-in-out infinite; }
/* speaking: bars bounce at different speeds */
[data-state="speaking"] .ftw-voice__indicator i { height: 24px; animation: ftw-voice-talk .9s ease-in-out infinite; }
.ftw-voice__indicator i:nth-child(2) { animation-delay: .12s !important; }
.ftw-voice__indicator i:nth-child(3) { animation-delay: .24s !important; }
.ftw-voice__indicator i:nth-child(4) { animation-delay: .36s !important; }
.ftw-voice__indicator i:nth-child(5) { animation-delay: .48s !important; }
[data-state="speaking"] .ftw-voice__indicator i:nth-child(odd) { animation-duration: .7s; }
@keyframes ftw-voice-ripple { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1.6); } }
@keyframes ftw-voice-breathe { 0%, 100% { transform: scaleY(1); opacity: .6; } 50% { transform: scaleY(1.5); opacity: 1; } }
@keyframes ftw-voice-talk { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.ftw-voice__captions {
	box-sizing: border-box; height: 9.5em; margin: 0 0 12px; padding: 10px 12px; overflow-y: auto; overscroll-behavior: contain;
	border-radius: var(--wp--custom--radius--ui, 12px); background: var(--wp--preset--color--surface, #F6EEE3);
	font-size: .9375rem; line-height: 1.4;
}
.ftw-voice__captions:empty::before { content: "Captions appear here."; color: var(--wp--preset--color--subtle, #74675D); }
.ftw-voice__line { margin: 0 0 8px; overflow-wrap: anywhere; }
.ftw-voice__line:last-child { margin-bottom: 0; }
.ftw-voice__who { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--wp--preset--color--subtle, #74675D); }
.ftw-voice__line--user .ftw-voice__who { color: var(--wp--preset--color--accent-2, #0F766E); }
.ftw-voice__line.is-interim .ftw-voice__text { opacity: .72; }

/* ended / error accents */
[data-state="error"] .ftw-voice__msg { color: var(--wp--preset--color--accent-1, #C2410C); }

/* Phones: a round, icon-only button in the corner, well away from the orange call buttons. */
@media (max-width: 640px) {
	.ftw-voice { right: calc(16px + env(safe-area-inset-right)); }
	.ftw-voice__launch { width: 56px; height: 56px; min-height: 56px; padding: 0; justify-content: center; gap: 0; }
	.ftw-voice__launch-text { display: none; }
	.ftw-voice__launch-icon { width: 100%; height: 100%; background: transparent; }
	.ftw-voice__launch-icon svg { width: 26px; height: 26px; }
}

/* ---------- Demo card ("Hear it for yourself"): dark ink panel with a live-looking sound wave ---------- */
.ftw-voice-demo {
	box-sizing: border-box; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 28px 56px;
	margin-top: 48px; padding: 44px 52px; border: 1px solid var(--vc-edge); border-radius: var(--wp--custom--radius--panel, 24px);
	background: var(--vc-ink); color: var(--vc-on-ink); text-align: left;
}
.ftw-voice-demo > * { margin: 0 !important; min-width: 0; }
.ftw-voice-demo__text { display: flex; flex-direction: column; gap: 12px; }
.ftw-voice-demo__text > * { margin: 0 !important; }
.ftw-voice-demo__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vc-wave); }
.ftw-voice-demo__kicker span { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--vc-wave); animation: ftw-vd-dot 2s ease-in-out infinite; }
.ftw-voice-demo h2 { max-width: 14em; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; color: inherit; }
.ftw-voice-demo .ftw-voice-demo__lead { margin-top: 4px !important; max-width: 31em; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--vc-on-ink); opacity: .86; }
.ftw-voice-demo__action { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.ftw-voice-demo__wave { display: flex; align-items: center; justify-content: center; gap: 6px; height: 72px; }
.ftw-voice-demo__wave i { display: block; flex: none; width: 5px; height: calc(var(--h, .5) * 72px); border-radius: 3px; background: var(--vc-wave); transform-origin: center; animation: ftw-vd-wave 1.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ftw-voice-demo__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 68px; margin: 0; padding: 0 30px 0 10px;
	border: 0; border-radius: var(--wp--custom--radius--pill, 999px); cursor: pointer;
	background: var(--vc-wave); color: var(--vc-ink); font: inherit; font-size: 1.1875rem; font-weight: 700; line-height: 1.2;
	transition: box-shadow .2s ease, transform .2s ease;
}
:root[data-palette="arcade"] .ftw-voice-demo__btn { color: #0E0D16; }
.ftw-voice-demo__btn:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); transform: translateY(-1px); }
.ftw-voice-demo__btn:focus-visible { outline: 3px solid var(--vc-on-ink); outline-offset: 4px; }
.ftw-voice-demo__mic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--vc-ink); color: var(--vc-wave); }
:root[data-palette="arcade"] .ftw-voice-demo__mic { background: #0E0D16; }
.ftw-voice-demo__note { font-size: .9375rem; line-height: 1.4; text-align: center; color: var(--vc-on-ink); opacity: .75; }
@keyframes ftw-vd-wave { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
@keyframes ftw-vd-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
@media (max-width: 860px) {
	.ftw-voice-demo { grid-template-columns: minmax(0, 1fr); padding: 32px 26px; gap: 24px; margin-top: 36px; }
	.ftw-voice-demo__wave { height: 56px; gap: 5px; }
	.ftw-voice-demo__wave i { height: calc(var(--h, .5) * 56px); }
}
@media (max-width: 400px) {
	.ftw-voice-demo { padding: 28px 20px; }
	.ftw-voice-demo__wave i { width: 4px; }
	.ftw-voice-demo__wave { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.ftw-voice__launch, .ftw-voice-demo__btn, .ftw-voice-nav { transition: none; }
	.ftw-voice-nav__wave i { animation: none; }
	.ftw-voice__launch-icon::before, .ftw-voice__launch-icon::after, .ftw-voice-demo__kicker span { animation: none; }
	.ftw-voice__launch-icon::before, .ftw-voice__launch-icon::after { display: none; }
	.ftw-voice-demo__wave i { animation: none; }
	.ftw-voice__indicator i { animation: none !important; }
	[data-state="speaking"] .ftw-voice__indicator i { height: 22px; }
	[data-state="listening"] .ftw-voice__indicator i { height: 12px; }
	[data-state="connecting"] .ftw-voice__indicator i { height: 12px; opacity: .45; }
}