/*
 * Floating live chat widget.
 *
 * Deliberately outside the Tailwind build: the accent colours come from the
 * Customizer as CSS variables, and keeping the widget in a plain stylesheet
 * means it renders correctly on a checkout that has not run `npm run build:css`.
 * Variables are injected by theitaid_live_chat_assets(); the values below are
 * only the fallbacks.
 */

.titaid-chat {
	--tc-accent: #4f46e5;
	--tc-accent-2: #06b6d4;
	--tc-accent-rgb: 79, 70, 229;
	--tc-bottom: 24px;
	--tc-side: 24px;
	--tc-ink: #1e293b;
	--tc-muted: #64748b;
	--tc-line: #e2e8f0;

	position: fixed;
	bottom: var(--tc-bottom);
	z-index: 9990;
	font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	line-height: 1.5;
}

.titaid-chat[data-position='right'] {
	right: var(--tc-side);
}

.titaid-chat[data-position='left'] {
	left: var(--tc-side);
}

.titaid-chat *,
.titaid-chat *::before,
.titaid-chat *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Launcher
 * ------------------------------------------------------------------------ */

.titaid-chat__launcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 20px 14px 16px;
	border: 0;
	border-radius: 999px;
	background-image: linear-gradient(135deg, var(--tc-accent), var(--tc-accent-2));
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	box-shadow: 0 10px 30px -8px rgba(var(--tc-accent-rgb), 0.55), 0 2px 6px rgba(15, 23, 42, 0.12);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.titaid-chat__launcher:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -8px rgba(var(--tc-accent-rgb), 0.65), 0 3px 8px rgba(15, 23, 42, 0.14);
}

.titaid-chat__launcher:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

.titaid-chat__launcher-icons {
	position: relative;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-size: 20px;
}

.titaid-chat__launcher-icons i {
	grid-area: 1 / 1;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.titaid-chat__icon-close,
.titaid-chat.is-open .titaid-chat__icon-open {
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

.titaid-chat.is-open .titaid-chat__icon-close {
	opacity: 1;
	transform: none;
}

.titaid-chat__launcher-label {
	white-space: nowrap;
}

/*
 * The pulse is an expanding box-shadow ring rather than a scaled pseudo-element
 * behind the button: the hover state transforms the launcher, which would make
 * it a stacking context and paint a z-index:-1 ring over the gradient instead of
 * behind it. A ring needs no stacking games at all.
 */
.titaid-chat--pulse .titaid-chat__launcher {
	animation: titaid-chat-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.titaid-chat--pulse .titaid-chat__launcher:hover,
.titaid-chat--pulse.is-open .titaid-chat__launcher {
	animation: none;
}

@keyframes titaid-chat-pulse {
	0% {
		box-shadow: 0 10px 30px -8px rgba(var(--tc-accent-rgb), 0.55), 0 0 0 0 rgba(var(--tc-accent-rgb), 0.5);
	}
	70% {
		box-shadow: 0 10px 30px -8px rgba(var(--tc-accent-rgb), 0.55), 0 0 0 16px rgba(var(--tc-accent-rgb), 0);
	}
	100% {
		box-shadow: 0 10px 30px -8px rgba(var(--tc-accent-rgb), 0.55), 0 0 0 0 rgba(var(--tc-accent-rgb), 0);
	}
}

.titaid-chat__badge {
	position: absolute;
	top: -2px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border: 2px solid #fff;
	border-radius: 999px;
	background-color: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.titaid-chat[data-position='right'] .titaid-chat__badge {
	right: -2px;
}

.titaid-chat[data-position='left'] .titaid-chat__badge {
	left: -2px;
}

/* ---------------------------------------------------------------------------
 * Greeting bubble
 * ------------------------------------------------------------------------ */

.titaid-chat__nudge {
	position: absolute;
	bottom: calc(100% + 14px);
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: max-content;
	max-width: min(260px, calc(100vw - 48px));
	padding: 12px 14px;
	border: 1px solid var(--tc-line);
	border-radius: 16px;
	background-color: #fff;
	color: var(--tc-ink);
	box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.3);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.titaid-chat[data-position='right'] .titaid-chat__nudge {
	right: 0;
}

.titaid-chat[data-position='left'] .titaid-chat__nudge {
	left: 0;
}

.titaid-chat__nudge.is-visible {
	opacity: 1;
	transform: none;
}

.titaid-chat__nudge[hidden] {
	display: none;
}

.titaid-chat__nudge-text {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.titaid-chat__nudge-close {
	flex: 0 0 auto;
	margin: -2px -4px 0 0;
	padding: 2px;
	border: 0;
	background: none;
	color: var(--tc-muted);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.titaid-chat__nudge-close:hover {
	color: var(--tc-ink);
}

/* ---------------------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------------------ */

.titaid-chat__panel {
	position: absolute;
	bottom: calc(100% + 14px);
	width: min(360px, calc(100vw - 32px));
	max-height: min(620px, calc(100vh - var(--tc-bottom) - 110px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 30px 60px -18px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(15, 23, 42, 0.06);
	opacity: 0;
	transform: translateY(14px) scale(0.97);
	transform-origin: bottom right;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.titaid-chat[data-position='right'] .titaid-chat__panel {
	right: 0;
}

.titaid-chat[data-position='left'] .titaid-chat__panel {
	left: 0;
	transform-origin: bottom left;
}

.titaid-chat__panel[hidden] {
	display: none;
}

.titaid-chat__panel.is-open {
	opacity: 1;
	transform: none;
}

/* Header */

.titaid-chat__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px;
	background-image: linear-gradient(135deg, var(--tc-accent), var(--tc-accent-2));
	color: #fff;
}

.titaid-chat__avatar {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	overflow: visible;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
}

.titaid-chat__avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.titaid-chat__presence {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 13px;
	height: 13px;
	border: 2px solid #fff;
	border-radius: 50%;
}

.titaid-chat__presence.is-online {
	background-color: #22c55e;
}

.titaid-chat__presence.is-away {
	background-color: #94a3b8;
}

.titaid-chat__head-text {
	flex: 1 1 auto;
	min-width: 0;
}

.titaid-chat__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.titaid-chat__status {
	margin: 2px 0 0;
	font-size: 12.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

.titaid-chat__close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.titaid-chat__close:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

/* Body */

.titaid-chat__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 18px;
	background-color: #f8fafc;
}

.titaid-chat__bubble {
	margin: 0 0 12px;
	padding: 13px 15px;
	border-radius: 4px 16px 16px 16px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
	color: var(--tc-ink);
	font-size: 14px;
}

.titaid-chat__bubble--away {
	border-left: 3px solid #f59e0b;
	background-color: #fffbeb;
	color: #92400e;
}

.titaid-chat__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 18px;
}

.titaid-chat__chip {
	padding: 7px 13px;
	border: 1px solid rgba(var(--tc-accent-rgb), 0.35);
	border-radius: 999px;
	background-color: #fff;
	color: var(--tc-accent);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.titaid-chat__chip:hover,
.titaid-chat__chip:focus-visible {
	background-color: var(--tc-accent);
	color: #fff;
}

.titaid-chat__eyebrow {
	margin: 0 0 9px;
	color: var(--tc-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.titaid-chat__channels {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.titaid-chat__channel {
	--tc-brand: var(--tc-accent);

	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--tc-line);
	border-radius: 14px;
	background-color: #fff;
	color: var(--tc-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.titaid-chat__channel:hover,
.titaid-chat__channel:focus-visible {
	border-color: var(--tc-brand);
	transform: translateX(2px);
	box-shadow: 0 8px 20px -12px var(--tc-brand);
}

.titaid-chat__channel-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background-color: var(--tc-brand);
	color: #fff;
	font-size: 17px;
}

.titaid-chat__channel-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.titaid-chat__channel-text strong {
	font-size: 14px;
	font-weight: 700;
}

.titaid-chat__channel-text small {
	color: var(--tc-muted);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.titaid-chat__channel-go {
	flex: 0 0 auto;
	color: #cbd5e1;
	font-size: 12px;
	transition: color 0.15s ease, transform 0.15s ease;
}

.titaid-chat__channel:hover .titaid-chat__channel-go {
	color: var(--tc-brand);
	transform: translateX(3px);
}

/* Footer */

.titaid-chat__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 11px 16px;
	border-top: 1px solid var(--tc-line);
	background-color: #fff;
	color: var(--tc-muted);
	font-size: 11.5px;
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Small screens and motion preferences
 * ------------------------------------------------------------------------ */

@media (max-width: 480px) {
	.titaid-chat__launcher {
		padding: 14px;
	}

	.titaid-chat__launcher-label {
		display: none;
	}

	/*
	 * Pin the panel to the viewport instead of the launcher. Centring it on the
	 * launcher with a translate would push it off screen, because the launcher
	 * itself sits hard against one edge.
	 */
	.titaid-chat[data-position='right'] .titaid-chat__panel,
	.titaid-chat[data-position='left'] .titaid-chat__panel {
		position: fixed;
		right: 12px;
		bottom: calc(var(--tc-bottom) + 68px);
		left: 12px;
		width: auto;
		max-height: calc(100vh - var(--tc-bottom) - 100px);
		transform-origin: bottom center;
	}
}

@media (max-width: 639px) {
	.titaid-chat--no-mobile {
		display: none;
	}

	/*
	 * The nudge is up to 260px wide and hangs left off a launcher that is
	 * already hard against the edge, so on a phone it lands on top of the
	 * floating review card and the hero copy behind it. The launcher itself is
	 * the call to action here; the teaser can sit small screens out.
	 */
	.titaid-chat__nudge {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.titaid-chat *,
	.titaid-chat *::before {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}