/* =========================================================
   STRATA CHAT (inc/render.php, assets/js/chat.js)
   Bottom right: a button — "Need help?" with the bot's icon while the
   site's menu shows, the icon alone once it has scrolled away — that
   opens the chat window: the title bar, the conversation on a softer
   part of the window's colour (the bot on the left with its icon, the
   visitor on the right, as on a phone), the field that grows with the
   text, and the quick links on the window's colour under it.

   Colours: --st-chat-color (the window, by default the Text role — dark
   on a light page, light in dark mode) and --st-chat-ink (its text,
   Background), set on .st-chat from Settings → Strata Chat; the visitor's
   messages and the send button in Brand. The button and the window are
   the glass of Strata's header and toolbox (its tint, blur and edge
   lines); the conversation sits on a solid, softer part of the colour.
   Only the theme's values: palette roles, spacing, radius, font sizes,
   transitions.
   ========================================================= */

/* The button's size, known before anything is drawn, so the room kept
   for it (the footer, a video's pause button) never changes. */
body {
	--st-chat-size: 48px;
}

.st-chat {
	--st-chat-edge: var(--wp--preset--spacing--sm);
	--st-chat-line: color-mix(in srgb, var(--st-chat-ink) 18%, transparent);
	--st-chat-soft: color-mix(in srgb, var(--st-chat-ink) 12%, var(--st-chat-color));
	--st-chat-brand: var(--wp--preset--color--brand, var(--st-chat-ink));
	--st-chat-on-brand: var(--wp--preset--color--text-on-brand, var(--st-chat-color));
	--st-chat-glass: color-mix(in srgb, var(--st-chat-color) var(--wp--custom--float--tint, 100%), transparent);
	position: fixed;

	/* Above Strata Toolkit's Bottom Bar when the page has one (its height
	   includes the safe area), and above the footer's edge while the
	   footer only peeks in (--st-chat-lift, chat.js). */
	right: calc(var(--st-chat-edge) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--st-chat-edge) + var(--st-bottom-bar-height, env(safe-area-inset-bottom, 0px)) + var(--st-chat-lift, 0px));

	/* Over Strata's toolbox (40), which an open window covers on a phone. */
	z-index: 41;
	color: var(--st-chat-ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

.st-chat :is(button, textarea) {
	box-sizing: border-box;
	margin: 0;
	font: inherit;
	color: inherit;
}

.st-chat svg {
	flex: none;
	width: 20px;
	height: 20px;
}

/* ── Glass: the button and the window ───────────────────────────── */

.st-chat :is(.st-chat__launcher, .st-chat__window) {
	border: 1px solid var(--st-chat-line);
	background-color: var(--st-chat-glass);
	-webkit-backdrop-filter: var(--st-glass-filter);
	backdrop-filter: var(--st-glass-filter);
	box-shadow:
		var(--st-glass-lines, inset 0 1px 0 color-mix(in srgb, var(--st-chat-ink) 14%, transparent)),
		var(--st-glass-shadow, var(--wp--preset--shadow--lg));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.st-chat {
		--st-chat-glass: var(--st-chat-color);
	}
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {

	.st-chat {
		--st-chat-glass: var(--st-chat-color);
	}

	.st-chat :is(.st-chat__launcher, .st-chat__window) {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {

	.st-chat {
		--st-chat-line: var(--st-chat-ink);
	}
}

/* ── The button ─────────────────────────────────────────────────── */

.st-chat__launcher {
	display: flex;
	align-items: center;
	height: var(--st-chat-size);
	padding: 3px 3px 3px 1.125rem;
	border-radius: var(--wp--custom--border-radius--full);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition:
		padding var(--wp--custom--transition--base),
		opacity var(--wp--custom--transition--fast),
		scale var(--wp--custom--transition--base);
}

.st-chat__launcher-label {
	max-width: 14rem;
	overflow: hidden;
	margin-inline-end: 0.75rem;
	text-overflow: ellipsis;
	transition:
		max-width var(--wp--custom--transition--base),
		margin var(--wp--custom--transition--base),
		opacity var(--wp--custom--transition--fast);
}

.st-chat__launcher:focus-visible,
.st-chat :is(.st-chat__close, .st-chat__send, .st-chat__item):focus-visible {
	outline: 2px solid var(--st-chat-ink);
	outline-offset: 2px;
}

/* The menu has scrolled away: the icon alone. */
.st-chat.is-compact .st-chat__launcher {
	padding-inline-start: 3px;
}

.st-chat.is-compact .st-chat__launcher-label {
	max-width: 0;
	margin-inline-end: 0;
	opacity: 0;
}

/* The window opens in the button's place. The button fades out, and is
   back at once when the window closes, to take the focus. */
.st-chat.is-open .st-chat__launcher {
	visibility: hidden;
	opacity: 0;
	scale: 0.6;
	transition:
		opacity var(--wp--custom--transition--fast),
		scale var(--wp--custom--transition--base),
		visibility var(--wp--custom--transition--base) allow-discrete;
}

/* The bot: its icon on Brand in a circle. */
.st-chat__avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--wp--custom--border-radius--full);
	background-color: var(--st-chat-brand);
	color: var(--st-chat-on-brand);
}

.st-chat__avatar svg {
	width: 22px;
	height: 22px;
}

.st-chat__launcher .st-chat__avatar {
	width: calc(var(--st-chat-size) - 8px);
	height: calc(var(--st-chat-size) - 8px);
}

/* ── The window ─────────────────────────────────────────────────── */

.st-chat__window {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(23.75rem, 100vw - 2 * var(--st-chat-edge));
	max-height: min(40rem, 100dvh - 2 * var(--st-chat-edge) - var(--st-bottom-bar-height, 0px) - var(--st-chat-lift, 0px));
	overflow: hidden;
	border-radius: calc(var(--wp--custom--border-radius--xl) + 0.5rem);
	transform-origin: bottom right;
	transition:
		opacity var(--wp--custom--transition--base),
		scale var(--wp--custom--transition--base),
		translate var(--wp--custom--transition--base),
		display var(--wp--custom--transition--base) allow-discrete;
}

.st-chat__window[hidden] {
	display: none;
	opacity: 0;
	scale: 0.9;
	translate: 0 0.75rem;
}

@starting-style {

	.st-chat__window:not([hidden]) {
		opacity: 0;
		scale: 0.9;
		translate: 0 0.75rem;
	}
}

.st-chat__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem 0.625rem 0.5rem;
}

.st-chat__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--border-radius--full);
	background-color: transparent;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast);
}

.st-chat__close:hover {
	background-color: color-mix(in srgb, var(--st-chat-ink) 14%, transparent);
}

.st-chat__title {
	flex: 1;
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.3;
}

/* The conversation and the field, on a softer part of the colour. */
.st-chat__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	background-color: var(--st-chat-soft);
}

.st-chat__log {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 10rem;
	margin: 0;
	padding: 1rem 0.875rem 0.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ── Messages: the bot on the left, the visitor on the right ─────── */

.st-chat__message {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	max-width: 85%;
	margin: 0.75rem 0 0;
	transition:
		opacity var(--wp--custom--transition--base),
		translate var(--wp--custom--transition--base);
}

.st-chat__message:first-child {
	margin-top: 0;
}

/* One after another from the same side: closer together. */
.st-chat__message--bot + .st-chat__message--bot,
.st-chat__message--visitor + .st-chat__message--visitor {
	margin-top: 0.25rem;
}

@starting-style {

	.st-chat__message {
		opacity: 0;
		translate: 0 0.5rem;
	}
}

.st-chat__message--bot {
	align-self: flex-start;
}

.st-chat__message--visitor {
	align-self: flex-end;
}

/* The bot's icon by the last of its messages in a row. */
.st-chat__avatar--message {
	width: 1.75rem;
	height: 1.75rem;
}

.st-chat__avatar--message svg {
	width: 16px;
	height: 16px;
}

.st-chat__message--bot:has(+ .st-chat__message--bot) .st-chat__avatar--message {
	visibility: hidden;
}

.st-chat__bubble {
	margin: 0;
	padding: 0.5rem 0.875rem;
	border-radius: calc(var(--wp--custom--border-radius--xl) + 0.125rem);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.st-chat__message--bot .st-chat__bubble {
	border-end-start-radius: var(--wp--custom--border-radius--sm);
	background-color: var(--st-chat-color);
}

/* Links in the bot's answers. */
.st-chat__message--bot .st-chat__bubble a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.st-chat__message--visitor .st-chat__bubble {
	border-end-end-radius: var(--wp--custom--border-radius--sm);
	background-color: var(--st-chat-brand);
	color: var(--st-chat-on-brand);
}

/* The bot is writing: three dots. */
.st-chat__message--typing .st-chat__bubble {
	display: flex;
	gap: 0.25rem;
	padding-block: 0.875rem;
}

.st-chat__dot {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: var(--wp--custom--border-radius--full);
	background-color: currentcolor;
	opacity: 0.4;
	animation: st-chat-dot 1.2s infinite;
}

.st-chat__dot:nth-child(3) {
	animation-delay: 0.15s;
}

.st-chat__dot:nth-child(4) {
	animation-delay: 0.3s;
}

@keyframes st-chat-dot {

	0%,
	60%,
	100% {
		opacity: 0.4;
		translate: 0 0;
	}

	30% {
		opacity: 1;
		translate: 0 -0.1875rem;
	}
}

/* ── The field: one line, growing with the text up to five ──────── */

.st-chat__form {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem 0.75rem;
}

.st-chat__input {
	flex: 1;
	min-width: 0;
	height: 2.5rem;
	max-height: 7.75rem;
	padding: 0.5625rem 1rem;
	border: 1px solid var(--st-chat-line);
	border-radius: 1.25rem;
	background-color: color-mix(in srgb, var(--st-chat-color) 60%, transparent);
	line-height: 1.4;
	resize: none;
	transition: border-color var(--wp--custom--transition--fast);
}

.st-chat__input::placeholder {
	color: inherit;
	opacity: 0.6;
}

.st-chat__input:focus {
	border-color: var(--st-chat-ink);
	outline: none;
}

.st-chat__send {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--border-radius--full);
	background-color: var(--st-chat-brand);
	color: var(--st-chat-on-brand);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast),
		scale var(--wp--custom--transition--fast);
}

.st-chat__send:disabled {
	background-color: color-mix(in srgb, var(--st-chat-ink) 14%, transparent);
	color: color-mix(in srgb, var(--st-chat-ink) 50%, transparent);
	cursor: default;
}

.st-chat__send:not(:disabled):active {
	scale: 0.92;
}

/* ── Quick links, on the window's colour ────────────────────────── */

.st-chat__items {
	margin: 0;
	padding: 0.375rem;
	list-style: none;
}

.st-chat__item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.625rem 0.75rem;
	border: 0;
	border-radius: var(--wp--custom--border-radius--lg);
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast);
}

.st-chat__item:hover {
	background-color: color-mix(in srgb, var(--st-chat-ink) 10%, transparent);
}

.st-chat__item svg {
	opacity: 0.85;
}

.st-chat__item-text {
	display: flex;
	flex-direction: column;
}

.st-chat__item-label {
	font-weight: 500;
}

.st-chat__item-detail {
	font-size: var(--wp--preset--font-size--xs);
}

/* ── Phones: the window fills the width ─────────────────────────── */

@media (max-width: 600px) {

	.st-chat__window {
		max-height: calc(100dvh - 2 * var(--st-chat-edge) - var(--st-bottom-bar-height, 0px) - var(--st-chat-lift, 0px) - env(safe-area-inset-top, 0px));
	}

	/* 16px, so the phone doesn't zoom in on the field. */
	.st-chat .st-chat__input {
		font-size: max(1rem, var(--wp--preset--font-size--sm));
	}
}

/* ── Room for the button on Strata's pages ──────────────────────── */

/* The footer's last line ends before the button below 1440px, where the
   page's margin is narrower than the button. */
@media (max-width: 1439px) {

	body:has(.st-chat) :is(.st-footer:not(.st-footer--cta), .st-footer--cta > .wp-block-group:last-child) > :last-child {
		padding-inline-end: max(0px, calc(var(--wp--preset--spacing--sm) + var(--st-chat-size) + var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--page-margin)));
	}
}

/* A background video's pause button sits above it. */
body:has(.st-chat) .st-cover-video-toggle {
	bottom: calc(var(--wp--preset--spacing--md) * 2 + var(--st-chat-size));
}

@media (prefers-reduced-motion: reduce) {

	.st-chat :is(.st-chat__launcher, .st-chat__launcher-label, .st-chat__window, .st-chat__message),
	.st-chat.is-open .st-chat__launcher {
		transition: none;
	}

	.st-chat__dot {
		animation: none;
		opacity: 0.7;
	}
}

@media print {

	.st-chat {
		display: none;
	}
}