/*
 * VisitorAI widget.
 *
 * Every rule is namespaced under .visitorai and every property that a hostile
 * theme could inherit into is set explicitly. This stylesheet loads on other
 * people's sites, next to page builders that set `button { all: unset }` and
 * themes that put `* { box-sizing: content-box }` in their reset -- so being
 * verbose here is the whole job.
 */

.visitorai {
	--visitorai-accent: #1d4ed8;
	--visitorai-surface: #ffffff;
	--visitorai-surface-2: #f6f7f9;
	--visitorai-ink: #16181d;
	--visitorai-ink-muted: #5b6270;
	--visitorai-line: #e3e6eb;
	--visitorai-danger-bg: #fdf2f2;
	--visitorai-danger-ink: #8c2020;
	--visitorai-danger-line: #f3d4d4;
	--visitorai-hover: rgba(15, 20, 30, 0.06);
	--visitorai-radius: 14px;
	--visitorai-shadow: 0 10px 40px -8px rgba(15, 20, 30, 0.28), 0 2px 8px -2px rgba(15, 20, 30, 0.12);

	/* Overridden inline by the plugin from the Appearance settings. Sites with
	   a sticky bottom bar -- a call button, a cookie notice, an add-to-basket
	   bar -- need the launcher moved clear of it, and on mobile that bar is
	   usually taller. */
	--visitorai-offset-side: 20px;
	--visitorai-offset-bottom: 20px;
	--visitorai-offset-bottom-mobile: 14px;

	position: fixed;
	bottom: var(--visitorai-offset-bottom);
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--visitorai-ink);
	box-sizing: border-box;
}

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

.visitorai--bottom-right { right: var(--visitorai-offset-side); }
.visitorai--bottom-left  { left: var(--visitorai-offset-side); }

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

.visitorai-launcher {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 12px 18px 12px 15px;
	border: 0;
	border-radius: 999px;
	background: var(--visitorai-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--visitorai-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.visitorai-launcher:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 44px -8px rgba(15, 20, 30, 0.34);
}

.visitorai-launcher:focus-visible {
	outline: 3px solid var(--visitorai-accent);
	outline-offset: 3px;
}

.visitorai-launcher__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.visitorai-launcher__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.visitorai[data-state="open"] .visitorai-launcher {
	display: none;
}

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

.visitorai-panel {
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 100px);
	max-height: calc(100dvh - 100px);
	overflow: hidden;
	border: 1px solid var(--visitorai-line);
	border-radius: var(--visitorai-radius);
	background: var(--visitorai-surface);
	box-shadow: var(--visitorai-shadow);
}

.visitorai-panel[hidden] {
	display: none;
}

.visitorai-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding: 14px 14px 14px 18px;
	border-bottom: 1px solid var(--visitorai-line);
	background: var(--visitorai-surface-2);
}

.visitorai-header__name {
	margin: 0;
	font-size: 15px;
	font-weight: 650;
	color: var(--visitorai-ink);
}

.visitorai-header__meta {
	margin: 2px 0 0;
	font-size: 11.5px;
	letter-spacing: 0.01em;
	color: var(--visitorai-ink-muted);
}

.visitorai-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--visitorai-ink-muted);
	cursor: pointer;
}

.visitorai-close:hover {
	background: var(--visitorai-hover);
	color: var(--visitorai-ink);
}

.visitorai-close svg {
	width: 17px;
	height: 17px;
}

/* ------------------------------------------------------------------ */
/* Log                                                                 */
/* ------------------------------------------------------------------ */

.visitorai-log {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.visitorai-msg {
	max-width: 88%;
	padding: 10px 13px;
	border-radius: 13px;
	font-size: 14.5px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.visitorai-msg--bot {
	align-self: flex-start;
	border-bottom-left-radius: 4px;
	background: var(--visitorai-surface-2);
	color: var(--visitorai-ink);
}

.visitorai-msg--user {
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	background: var(--visitorai-accent);
	color: #fff;
}

.visitorai-msg--error {
	align-self: flex-start;
	background: var(--visitorai-danger-bg);
	color: var(--visitorai-danger-ink);
	border: 1px solid var(--visitorai-danger-line);
}

.visitorai-msg p {
	margin: 0 0 8px;
}

.visitorai-msg p:last-child {
	margin-bottom: 0;
}

.visitorai-msg a {
	color: inherit;
	text-decoration: underline;
}

.visitorai-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-self: flex-start;
	max-width: 88%;
	margin-top: -6px;
}

.visitorai-sources__label {
	width: 100%;
	margin: 0;
	font-size: 11.5px;
	color: var(--visitorai-ink-muted);
}

.visitorai-sources a {
	display: inline-block;
	max-width: 100%;
	padding: 4px 9px;
	border: 1px solid var(--visitorai-line);
	border-radius: 999px;
	background: var(--visitorai-surface);
	color: var(--visitorai-ink-muted);
	font-size: 12px;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.visitorai-sources a:hover {
	border-color: var(--visitorai-accent);
	color: var(--visitorai-accent);
}

/* Suggested questions */

.visitorai-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-self: flex-start;
	max-width: 100%;
}

.visitorai-chip {
	padding: 7px 12px;
	border: 1px solid var(--visitorai-line);
	border-radius: 999px;
	background: var(--visitorai-surface);
	color: var(--visitorai-ink);
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.visitorai-chip:hover {
	border-color: var(--visitorai-accent);
	color: var(--visitorai-accent);
}

/* Typing indicator */

.visitorai-typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding: 13px;
}

.visitorai-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--visitorai-ink-muted);
	animation: visitorai-bounce 1.2s infinite ease-in-out;
}

.visitorai-typing span:nth-child(2) { animation-delay: 0.15s; }
.visitorai-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes visitorai-bounce {
	0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ------------------------------------------------------------------ */
/* Consent gate                                                        */
/* ------------------------------------------------------------------ */

.visitorai-consent {
	flex: 0 0 auto;
	padding: 16px 18px;
	border-top: 1px solid var(--visitorai-line);
	background: var(--visitorai-surface-2);
	font-size: 13px;
	color: var(--visitorai-ink-muted);
}

.visitorai-consent[hidden] {
	display: none;
}

.visitorai-consent p {
	margin: 0 0 12px;
}

.visitorai-consent button {
	width: 100%;
	padding: 10px 16px;
	border: 0;
	border-radius: 9px;
	background: var(--visitorai-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Composer                                                            */
/* ------------------------------------------------------------------ */

.visitorai-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	flex: 0 0 auto;
	padding: 12px 14px;
	border-top: 1px solid var(--visitorai-line);
	background: var(--visitorai-surface);
}

.visitorai-form[hidden] {
	display: none;
}

.visitorai-turnstile {
	flex: 1 0 100%;
	margin-bottom: 8px;
}

.visitorai-turnstile[hidden] {
	display: none;
}

.visitorai-input {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 120px;
	padding: 10px 12px;
	border: 1px solid var(--visitorai-line);
	border-radius: 10px;
	background: var(--visitorai-surface);
	color: var(--visitorai-ink);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.45;
	resize: none;
	overflow-y: auto;
}

.visitorai-input:focus {
	outline: 2px solid var(--visitorai-accent);
	outline-offset: -1px;
	border-color: var(--visitorai-accent);
}

.visitorai-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--visitorai-accent);
	color: #fff;
	cursor: pointer;
}

.visitorai-send[disabled] {
	opacity: 0.45;
	cursor: default;
}

.visitorai-send svg {
	width: 17px;
	height: 17px;
}

.visitorai-foot {
	flex: 0 0 auto;
	padding: 0 14px 11px;
}

.visitorai-footnote {
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--visitorai-ink-muted);
	text-align: center;
}

.visitorai-footnote a {
	color: inherit;
}

/* Attribution. Quiet enough not to compete with the site's own branding,
   legible enough to actually be read. */
.visitorai-attribution {
	margin: 7px 0 0;
	text-align: center;
}

.visitorai-attribution a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	color: var(--visitorai-ink-muted);
	font-size: 10.5px;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.visitorai-attribution a:hover {
	background: var(--visitorai-surface-2);
	color: var(--visitorai-ink);
}

.visitorai-attribution a:focus-visible {
	outline: 2px solid var(--visitorai-accent);
	outline-offset: 1px;
}

.visitorai-attribution svg {
	width: 10px;
	height: 10px;
	opacity: 0.75;
}

/* dijitul is styled lower case in every context, including here. */
.visitorai-attribution strong {
	font-weight: 650;
	text-transform: none;
}

.visitorai-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Inline shortcode trigger inherits the host page's button styling as far as
   possible, because it sits in the middle of the customer's own content. */
.visitorai-inline-trigger {
	display: inline-block;
	padding: 10px 18px;
	border: 0;
	border-radius: 9px;
	background: var(--visitorai-accent, #1d4ed8);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.visitorai {
		bottom: var(--visitorai-offset-bottom-mobile);
	}

	/*
	 * Full screen, but only as much screen as there actually is.
	 *
	 * `height: 100%` is wrong here. When the software keyboard opens, the
	 * VISUAL viewport shrinks but the LAYOUT viewport does not, and a fixed
	 * element sized against the layout viewport stays full height -- so the
	 * browser scrolls the focused input into view and pushes the conversation
	 * off the top of the screen. The visitor sees an empty panel and their own
	 * message nowhere.
	 *
	 * --visitorai-vh and --visitorai-vv-top are written by widget.js from the
	 * VisualViewport API, which is the only thing that reports the real visible
	 * box. 100dvh is the fallback for anything without it.
	 */
	.visitorai[data-state="open"] {
		top: var(--visitorai-vv-top, 0px);
		right: 0;
		bottom: auto;
		left: 0;
		height: 100dvh;
		height: var(--visitorai-vh, 100dvh);
	}

	.visitorai-panel {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		border: 0;
		border-radius: 0;
	}

	.visitorai-launcher__label {
		display: none;
	}

	.visitorai-launcher {
		padding: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.visitorai-launcher,
	.visitorai-typing span {
		transition: none;
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Themes                                                              */
/* ------------------------------------------------------------------ */

/*
 * The palette above is the light one. Dark is applied when the owner chose it
 * outright, or chose "match the visitor's device" and the device is dark.
 *
 * Every themed value is a token, so a theme sets tokens and nothing else --
 * which is why the error bubble and the close button read theirs from
 * variables rather than hard-coding two sets of colours.
 *
 * The accent is deliberately NOT themed. It is the site's brand colour and it
 * should look the same to every visitor.
 */
.visitorai[data-theme="dark"] {
	--visitorai-surface: #16181d;
	--visitorai-surface-2: #1f232a;
	--visitorai-ink: #eef0f4;
	--visitorai-ink-muted: #9aa2b1;
	--visitorai-line: #2c313a;
	--visitorai-danger-bg: #2a1a1a;
	--visitorai-danger-ink: #f0b4b4;
	--visitorai-danger-line: #4a2626;
	--visitorai-hover: rgba(255, 255, 255, 0.08);
	--visitorai-shadow: 0 10px 40px -8px rgba(0, 0, 0, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
	.visitorai[data-theme="auto"] {
		--visitorai-surface: #16181d;
		--visitorai-surface-2: #1f232a;
		--visitorai-ink: #eef0f4;
		--visitorai-ink-muted: #9aa2b1;
		--visitorai-line: #2c313a;
		--visitorai-danger-bg: #2a1a1a;
		--visitorai-danger-ink: #f0b4b4;
		--visitorai-danger-line: #4a2626;
		--visitorai-hover: rgba(255, 255, 255, 0.08);
		--visitorai-shadow: 0 10px 40px -8px rgba(0, 0, 0, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
	}
}