/* yenDigital Voice Assistant -- launcher, mode picker, voice screen, text screen. */

/* Theme tokens with fallbacks: the plugin must still look right if the theme changes or is swapped. */
.yd-ai-chat,
.yd-ai-chat__button {
	--yd-ai-accent: var( --yd-primary, #ff3951 );
	--yd-ai-accent-dark: var( --yd-primary-dark, #e42d44 );
	--yd-ai-accent-soft: #ff7d6b;
	--yd-ai-ink: var( --yd-ink, #14142b );
	--yd-ai-body: var( --yd-body, #6e7191 );
	--yd-ai-line: var( --yd-line, #e6e6e6 );
	--yd-ai-font: var( --yd-font, "Plus Jakarta Display", "Plus Jakarta Sans", "Helvetica Neue", Arial, system-ui, sans-serif );
}

.yd-ai-chat__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

.yd-ai-chat__icon {
	width: 100%;
	height: 100%;
}

/* ============================================================ Launcher */

/* 99 keeps the launcher above page content but below the sticky header (100), so it can never
   fight the nav. The body-class rules below take it out of the way of every other overlay. */
.yd-ai-chat__button {
	position: fixed;
	right: 24px;
	bottom: calc( 24px + env( safe-area-inset-bottom, 0px ) );
	z-index: 99;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient( 145deg, var( --yd-ai-accent-soft ), var( --yd-ai-accent ) 55%, var( --yd-ai-accent-dark ) );
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba( 255, 57, 81, .35 ), 0 2px 8px rgba( 0, 0, 0, .18 );
	transition: transform .25s cubic-bezier( .22, 1, .36, 1 );
	-webkit-tap-highlight-color: transparent;
}

.yd-ai-chat__button .yd-ai-chat__icon {
	position: relative;
	z-index: 1;
	width: 26px;
	height: 26px;
}

/* Slow halo so the button reads as live without becoming a distraction. */
.yd-ai-chat__button-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var( --yd-ai-accent );
	opacity: .55;
	animation: yd-ai-halo 2.8s ease-out infinite;
}

@keyframes yd-ai-halo {
	0%   { transform: scale( 1 );   opacity: .5; }
	70%  { transform: scale( 1.6 ); opacity: 0; }
	100% { transform: scale( 1.6 ); opacity: 0; }
}

@media ( hover: hover ) and ( pointer: fine ) {
	.yd-ai-chat__button:hover {
		transform: translateY( -3px ) scale( 1.05 );
	}
}

.yd-ai-chat__button:focus-visible {
	outline: 3px solid var( --yd-ai-accent );
	outline-offset: 3px;
}

.yd-ai-chat__button[hidden] {
	display: none;
}

/* One rule per overlay the theme can open -- contact modal, apply dialog, mobile nav. Cheaper and
   more reliable than trying to win a z-index race against each of them. */
body.yd-modal-open .yd-ai-chat__button,
body.jt-modal-open .yd-ai-chat__button,
body.jtv-open .yd-ai-chat__button,
body.menu-open .yd-ai-chat__button {
	opacity: 0;
	pointer-events: none;
}

/* ============================================================ Shell */

.yd-ai-chat[hidden] {
	display: none;
}

/* 10001 sits one step above the theme's contact modal (10000) and well below the skip link (100000). */
.yd-ai-chat {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 12px;
	opacity: 0;
	font-family: var( --yd-ai-font );
	transition: opacity .4s cubic-bezier( .22, 1, .36, 1 );
}

.yd-ai-chat.is-open {
	opacity: 1;
}

.yd-ai-chat__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 6, 6, 12, .72 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
}

/* No padding here: the text view's coloured bar has to reach the modal edges. */
.yd-ai-chat__modal {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: min( 560px, 100% );
	max-height: 90vh;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 40px 120px rgba( 0, 0, 0, .55 );
	transform: scale( .95 );
	transition: transform .4s cubic-bezier( .22, 1, .36, 1 );
}

.yd-ai-chat.is-open .yd-ai-chat__modal {
	transform: scale( 1 );
}

/* Only the view named by data-view is in the box. */
.yd-ai-chat__view {
	display: none;
	flex-direction: column;
	min-height: 0;
}

.yd-ai-chat[data-view="choose"] .yd-ai-chat__view--choose,
.yd-ai-chat[data-view="voice"] .yd-ai-chat__view--voice,
.yd-ai-chat[data-view="text"] .yd-ai-chat__view--text {
	display: flex;
}

.yd-ai-chat__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --yd-ai-ink );
	cursor: pointer;
	transition: transform .25s ease, background-color .25s ease;
}

.yd-ai-chat__close svg {
	width: 20px;
	height: 20px;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.yd-ai-chat__close:hover {
		background: rgba( 0, 0, 0, .06 );
		transform: rotate( 90deg );
	}
}

.yd-ai-chat__close:focus-visible,
.yd-ai-chat__bar-close:focus-visible {
	outline: 3px solid var( --yd-ai-accent );
	outline-offset: 2px;
}

/* ============================================================ 1. Mode picker */

.yd-ai-chat__view--choose {
	align-items: center;
	padding: 46px 28px 30px;
	text-align: center;
}

.yd-ai-chat__title {
	margin: 0 0 10px;
	padding: 0 40px;
	font-size: clamp( 30px, 5vw, 44px );
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var( --yd-ai-ink );
}

.yd-ai-chat__title-accent {
	background: linear-gradient( 92deg, var( --yd-ai-accent-soft ), var( --yd-ai-accent ) 40%, var( --yd-ai-accent-dark ) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.yd-ai-chat__lead {
	max-width: 420px;
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.6;
	color: var( --yd-ai-body );
}

.yd-ai-chat__picker {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 22px;
}

.yd-ai-chat__option {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	width: 140px;
}

.yd-ai-chat__pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 116px;
	height: 116px;
	padding: 30px;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: transform .28s cubic-bezier( .22, 1, .36, 1 ), box-shadow .28s ease;
}

/* Voice is the primary path, so it carries the brand gradient. */
.yd-ai-chat__pick--voice {
	background: linear-gradient( 145deg, var( --yd-ai-accent-soft ), var( --yd-ai-accent ) 50%, var( --yd-ai-accent-dark ) );
	box-shadow: 0 14px 38px rgba( 255, 57, 81, .38 );
}

/* Text is the alternative, so it takes the brand's dark neutral rather than a second hue. */
.yd-ai-chat__pick--text {
	background: linear-gradient( 145deg, #3a3a5c, var( --yd-ai-ink ) 60%, #0b0b18 );
	box-shadow: 0 14px 38px rgba( 20, 20, 43, .34 );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.yd-ai-chat__pick:hover {
		transform: translateY( -4px ) scale( 1.04 );
	}

	.yd-ai-chat__pick--voice:hover {
		box-shadow: 0 20px 46px rgba( 255, 57, 81, .48 );
	}

	.yd-ai-chat__pick--text:hover {
		box-shadow: 0 20px 46px rgba( 20, 20, 43, .44 );
	}
}

.yd-ai-chat__pick:focus-visible {
	outline: 3px solid var( --yd-ai-accent );
	outline-offset: 5px;
}

.yd-ai-chat__option-name {
	margin-top: 16px;
	font-size: 17px;
	font-weight: 700;
	color: var( --yd-ai-ink );
}

.yd-ai-chat__option-sub {
	margin-top: 3px;
	font-size: 14px;
	color: var( --yd-ai-body );
}

/* Sits level with the middle of the circles, not the middle of the whole column, with the hairline
   rules the reference uses either side. Height is the circle's, so the two always stay aligned. */
.yd-ai-chat__or {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 116px;
	font-size: 14px;
	color: var( --yd-ai-body );
}

.yd-ai-chat__or::before,
.yd-ai-chat__or::after {
	width: 1px;
	height: 42px;
	margin: 0 10px;
	background: var( --yd-ai-line );
	content: "";
}

.yd-ai-chat__note {
	margin: 26px 0 0;
	font-size: 13px;
	color: var( --yd-ai-body );
}

.yd-ai-chat__alert {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var( --yd-ai-accent-dark );
}

.yd-ai-chat__alert[hidden] {
	display: none;
}

/* ============================================================ 2. Voice */

/* The voice screen has no panel of its own. The picker stays put behind it, blurred and dimmed, and
   the orb floats on top -- so starting a conversation reads as a layer over what you just tapped
   rather than a second popup. */
.yd-ai-chat[data-view="voice"] .yd-ai-chat__view--choose {
	display: flex;
	filter: blur( 7px );
	pointer-events: none;
	user-select: none;
}

.yd-ai-chat[data-view="voice"] .yd-ai-chat__view--choose .yd-ai-chat__close {
	visibility: hidden;
}

/* The dimming layer sits between the blurred picker and the orb. */
.yd-ai-chat[data-view="voice"] .yd-ai-chat__modal::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 34, 34, 42, .55 );
	content: "";
}

.yd-ai-chat__view--voice {
	position: absolute;
	inset: 0;
	z-index: 2;
	align-items: center;
	justify-content: center;
	padding: 28px;
}

.yd-ai-chat__orb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 208px;
	height: 208px;
}

/* The gradient disc spins; the core is a sibling so it stays put. */
.yd-ai-chat__orb-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(
		from 200deg,
		var( --yd-ai-accent ),
		var( --yd-ai-accent-soft ),
		#ffc9b4,
		var( --yd-ai-accent ),
		var( --yd-ai-accent-dark ),
		var( --yd-ai-accent )
	);
	box-shadow: 0 0 60px rgba( 255, 57, 81, .45 );
	animation: yd-ai-orb 9s linear infinite;
}

/* A conic gradient always shows a seam where it wraps. This highlight sits on top of it and reads
   as a lit sphere, which hides the join and stops the disc looking flat. */
.yd-ai-chat__orb-ring::after {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient( circle at 32% 26%, rgba( 255, 255, 255, .55 ), rgba( 255, 255, 255, 0 ) 46% ),
		radial-gradient( circle at 72% 82%, rgba( 120, 0, 20, .32 ), rgba( 120, 0, 20, 0 ) 52% );
	content: "";
}

@keyframes yd-ai-orb {
	to { transform: rotate( 360deg ); }
}

/* --yd-ai-level is written by the rAF loop from getInputVolume()/getOutputVolume(). */
.yd-ai-chat[data-state="listening"] .yd-ai-chat__orb-ring,
.yd-ai-chat[data-state="speaking"] .yd-ai-chat__orb-ring {
	box-shadow: 0 0 calc( 60px + var( --yd-ai-level, 0 ) * 50px ) rgba( 255, 57, 81, calc( .45 + var( --yd-ai-level, 0 ) * .3 ) );
}

.yd-ai-chat[data-state="speaking"] .yd-ai-chat__orb-ring {
	animation-duration: 4s;
}

.yd-ai-chat__orb-core {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: #0e0e18;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .08 );
}

.yd-ai-chat__orb-core .yd-ai-chat__icon {
	width: 34px;
	height: 34px;
	transition: opacity .2s ease;
}

.yd-ai-chat__spinner {
	position: absolute;
	width: 30px;
	height: 30px;
	border: 3px solid rgba( 255, 255, 255, .25 );
	border-top-color: var( --yd-ai-accent );
	border-radius: 50%;
	opacity: 0;
	animation: yd-ai-spin .8s linear infinite;
}

@keyframes yd-ai-spin {
	to { transform: rotate( 360deg ); }
}

.yd-ai-chat[data-state="connecting"] .yd-ai-chat__spinner,
.yd-ai-chat[data-state="permission"] .yd-ai-chat__spinner {
	opacity: 1;
}

.yd-ai-chat[data-state="connecting"] .yd-ai-chat__orb-core .yd-ai-chat__icon,
.yd-ai-chat[data-state="permission"] .yd-ai-chat__orb-core .yd-ai-chat__icon {
	opacity: 0;
}

.yd-ai-chat[data-state="error"] .yd-ai-chat__orb-ring,
.yd-ai-chat[data-state="denied"] .yd-ai-chat__orb-ring {
	background: #d8d8e0;
	box-shadow: none;
	animation: none;
}

/* Status pill, floating over the foot of the orb the way the reference shows it. */
.yd-ai-chat__pill {
	position: relative;
	z-index: 2;
	min-height: 20px;
	margin: -18px 0 0;
	padding: 11px 26px;
	border-radius: 999px;
	background: #f1f1f5;
	font-size: 16px;
	font-weight: 500;
	color: var( --yd-ai-ink );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .1 );
}

.yd-ai-chat[data-state="error"] .yd-ai-chat__pill,
.yd-ai-chat[data-state="denied"] .yd-ai-chat__pill {
	color: var( --yd-ai-accent-dark );
}

.yd-ai-chat__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin-top: 26px;
}

.yd-ai-chat__ghost {
	padding: 9px 22px;
	border: 1.5px solid var( --yd-ai-line );
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var( --yd-ai-body );
	cursor: pointer;
	transition: border-color .25s ease, color .25s ease;
}

.yd-ai-chat__ghost[hidden] {
	display: none;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.yd-ai-chat__ghost:hover {
		border-color: var( --yd-ai-accent );
		color: var( --yd-ai-accent );
	}
}

.yd-ai-chat__ghost:focus-visible {
	outline: 3px solid var( --yd-ai-accent );
	outline-offset: 2px;
}

/* On the voice screen these sit on the dimmed layer, so they flip to light-on-dark. */
.yd-ai-chat__view--voice .yd-ai-chat__ghost {
	border-color: rgba( 255, 255, 255, .34 );
	background: rgba( 255, 255, 255, .1 );
	color: #fff;
}

.yd-ai-chat__view--voice .yd-ai-chat__close {
	color: #fff;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.yd-ai-chat__view--voice .yd-ai-chat__ghost:hover {
		border-color: #fff;
		background: rgba( 255, 255, 255, .2 );
		color: #fff;
	}

	.yd-ai-chat__view--voice .yd-ai-chat__close:hover {
		background: rgba( 255, 255, 255, .16 );
	}
}

/* ============================================================ 3. Text */

.yd-ai-chat__view--text {
	height: min( 620px, 90vh );
}

.yd-ai-chat__bar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 14px;
	padding: 20px 18px 20px 22px;
	background: linear-gradient( 100deg, var( --yd-ai-accent ), var( --yd-ai-accent-dark ) );
	color: #fff;
}

.yd-ai-chat__bar-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}

.yd-ai-chat__bar-text {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
}

.yd-ai-chat__bar-text strong {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.yd-ai-chat__bar-text span {
	font-size: 13.5px;
	opacity: .9;
}

.yd-ai-chat__bar-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .18 );
	color: #fff;
	cursor: pointer;
	transition: background-color .25s ease;
}

.yd-ai-chat__bar-close svg {
	width: 20px;
	height: 20px;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.yd-ai-chat__bar-close:hover {
		background: rgba( 255, 255, 255, .3 );
	}
}

.yd-ai-chat__log {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 20px;
	background: #fff;
}

.yd-ai-chat__empty {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	color: var( --yd-ai-body );
}

.yd-ai-chat__empty[hidden] {
	display: none;
}

.yd-ai-chat__empty .yd-ai-chat__icon {
	width: 54px;
	height: 54px;
	color: #b9b9c6;
}

.yd-ai-chat__empty-title {
	margin: 18px 0 6px;
	font-size: 21px;
	font-weight: 600;
	color: #52526b;
}

.yd-ai-chat__empty-sub {
	max-width: 380px;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.yd-ai-chat__msg {
	max-width: 80%;
	margin-bottom: 12px;
	padding: 11px 16px;
	border-radius: 18px;
	font-size: 15px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.yd-ai-chat__msg--user {
	margin-left: auto;
	border-bottom-right-radius: 6px;
	background: linear-gradient( 130deg, var( --yd-ai-accent ), var( --yd-ai-accent-dark ) );
	color: #fff;
}

.yd-ai-chat__msg--ai {
	margin-right: auto;
	border-bottom-left-radius: 6px;
	background: #f1f1f5;
	color: var( --yd-ai-ink );
}

.yd-ai-chat__composer {
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
	align-items: center;
	padding: 18px 20px 6px;
	border-top: 1px solid #ececed;
	background: #fafafb;
}

.yd-ai-chat__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 20px;
	border: 1.5px solid var( --yd-ai-line );
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: var( --yd-ai-ink );
}

.yd-ai-chat__input:focus {
	border-color: var( --yd-ai-accent );
	outline: none;
}

/* Dead until a session exists -- an input that looks usable but swallows what you type is worse. */
.yd-ai-chat__input:disabled {
	background: #f2f2f5;
	color: var( --yd-ai-body );
	cursor: not-allowed;
}

.yd-ai-chat__input:disabled::placeholder {
	color: #b4b4c0;
}

.yd-ai-chat__send {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 14px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient( 145deg, var( --yd-ai-accent-soft ), var( --yd-ai-accent ) 55%, var( --yd-ai-accent-dark ) );
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba( 255, 57, 81, .3 );
	transition: transform .25s ease;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.yd-ai-chat__send:hover:not( :disabled ) {
		transform: scale( 1.06 );
	}
}

.yd-ai-chat__send:disabled {
	background: #c9c9d2;
	box-shadow: none;
	cursor: not-allowed;
}

.yd-ai-chat__send:focus-visible,
.yd-ai-chat__input:focus-visible {
	outline: 3px solid var( --yd-ai-accent );
	outline-offset: 2px;
}

.yd-ai-chat__hint {
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 20px 18px;
	background: #fafafb;
	font-size: 13px;
	text-align: center;
	color: var( --yd-ai-body );
}

/* ============================================================ Responsive */

@media ( max-width: 560px ) {
	.yd-ai-chat {
		padding: 12px;
	}

	.yd-ai-chat__modal {
		width: calc( 100% - 24px );
		border-radius: 20px;
	}

	.yd-ai-chat__view--choose {
		padding: 40px 18px 24px;
	}

	.yd-ai-chat__picker {
		gap: 10px;
	}

	.yd-ai-chat__option {
		width: 118px;
	}

	.yd-ai-chat__pick {
		width: 94px;
		height: 94px;
		padding: 25px;
	}

	.yd-ai-chat__or {
		margin-top: 34px;
	}

	.yd-ai-chat__view--voice {
		padding: 44px 18px 26px;
	}

	.yd-ai-chat__orb {
		width: 176px;
		height: 176px;
	}

	.yd-ai-chat__button {
		right: 16px;
		bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) );
		width: 54px;
		height: 54px;
	}
}

/* Short viewports -- phone in landscape, or a desktop window dragged flat. */
@media ( max-height: 640px ) {
	/* Only the picker scrolls -- the voice screen is absolutely centred over it and must stay centred. */
	.yd-ai-chat__view--choose {
		overflow-y: auto;
		padding-top: 34px;
	}

	.yd-ai-chat__lead {
		display: none;
	}

	.yd-ai-chat__orb {
		width: 150px;
		height: 150px;
	}

	.yd-ai-chat__orb-core {
		width: 76px;
		height: 76px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.yd-ai-chat,
	.yd-ai-chat__modal,
	.yd-ai-chat__button,
	.yd-ai-chat__close,
	.yd-ai-chat__pick,
	.yd-ai-chat__send,
	.yd-ai-chat__ghost {
		transition: none;
	}

	.yd-ai-chat__modal {
		transform: none;
	}

	.yd-ai-chat__button-pulse,
	.yd-ai-chat__orb-ring,
	.yd-ai-chat__spinner {
		animation: none;
	}

	/* The spinner still has to read as busy without spinning. */
	.yd-ai-chat[data-state="connecting"] .yd-ai-chat__spinner,
	.yd-ai-chat[data-state="permission"] .yd-ai-chat__spinner {
		border-color: var( --yd-ai-accent );
	}
}