/*
 * SiteBrain Lite chat (front end).
 *
 * Theme-agnostic: every class starts with `sblite-chat`, every colour and size comes from a `--sblite-*` custom
 * property with a fallback, and nothing here depends on a theme's selectors.
 *
 * The three coloured parts (floating button, chat window header + visitor messages, Send button) each have a
 * background and a text variable. SiteBrain > Settings > Appearance sets them through an inline style printed after
 * this file (see Frontend/Appearance.php), which also picks black or white text for the chosen background. Other
 * variables can be set from a theme or the Customizer's Additional CSS, for example:
 *
 *     .sblite-chat { --sblite-radius: 4px; --sblite-font-size: 1.125rem; }
 *
 * Colours here meet WCAG 2.2 AA: 4.5:1 for text, 3:1 for borders and focus rings. State is never colour alone
 * (the pending text says "Thinking…", an error has a thick left border, a busy button changes shade and cursor).
 * Link and example-button text use the normal text colour, never a chosen colour, so a light choice cannot make
 * them unreadable on the light message background.
 */

.sblite-chat {
	--sblite-toggle-bg: #5b3a1e;
	--sblite-toggle-text: #fff;
	--sblite-chat-bg: #5b3a1e;
	--sblite-chat-text: #fff;
	--sblite-send-bg: #5b3a1e;
	--sblite-send-text: #fff;
	--sblite-text: #1d1d1f;
	--sblite-bg: #fff;
	--sblite-surface: #f4efe9;
	--sblite-border: #767676;
	--sblite-focus: #0b57d0;
	--sblite-error: #b3261e;
	--sblite-error-bg: #fdecea;
	--sblite-error-text: #6b1a14;
	--sblite-disabled: #5f5f5f;
	--sblite-radius: 12px;
	--sblite-gap: 0.75rem;
	--sblite-font-size: 1rem;
	--sblite-offset: 1rem;
	--sblite-z: 99999;
	--sblite-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);

	color: var(--sblite-text);
	font-size: var(--sblite-font-size);
	line-height: 1.5;
	text-align: start;
	text-transform: none;
	letter-spacing: normal;
}

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

/* `hidden` must win over the `display` rules below; a theme's reset can also override it. */
.sblite-chat [hidden] {
	display: none !important;
}

/* ---- Shared controls ------------------------------------------------------------------------------------------ */

.sblite-chat button,
.sblite-chat input {
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.sblite-chat button {
	cursor: pointer;
}

.sblite-chat a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.sblite-chat a:hover {
	text-decoration-thickness: 2px;
}

.sblite-chat button:focus-visible,
.sblite-chat input:focus-visible,
.sblite-chat a:focus-visible,
.sblite-chat__messages:focus-visible {
	outline: 3px solid var(--sblite-focus);
	outline-offset: 2px;
}

/* ---- Bubble: toggle and floating panel ------------------------------------------------------------------------ */

.sblite-chat--bubble {
	position: fixed;
	right: max(var(--sblite-offset), env(safe-area-inset-right));
	bottom: max(var(--sblite-offset), env(safe-area-inset-bottom));
	z-index: var(--sblite-z);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--sblite-gap);
	max-width: calc(100vw - 2 * var(--sblite-offset));
}

.sblite-chat__toggle {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--sblite-toggle-bg);
	color: var(--sblite-toggle-text);
	font-weight: 600;
	box-shadow: var(--sblite-shadow);
}

.sblite-chat__toggle[aria-expanded="true"] {
	/* The panel is open: the toggle steps back so the panel is the focus of the eye. */
	box-shadow: none;
}

/* Hover changes the text, not the colour: a colour shift could push a chosen colour under the contrast minimum. */
.sblite-chat__toggle:hover,
.sblite-chat__submit:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sblite-chat--bubble .sblite-chat__panel {
	width: 24rem;
	max-width: 100%;
	max-height: calc(100vh - 7rem);
	max-height: calc(100dvh - 7rem);
	box-shadow: var(--sblite-shadow);
}

/* ---- Panel (bubble and inline) -------------------------------------------------------------------------------- */

.sblite-chat__panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--sblite-border);
	border-radius: var(--sblite-radius);
	background: var(--sblite-bg);
	color: var(--sblite-text);
}

.sblite-chat__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sblite-gap);
	padding: 0.5rem var(--sblite-gap) 0.5rem 1rem;
	background: var(--sblite-chat-bg);
	color: var(--sblite-chat-text);
}

.sblite-chat__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

/* Icon-only button: a round 36px target (WCAG 2.5.8 asks for 24px), the X inherits the header's text colour. */
.sblite-chat__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: inherit;
}

.sblite-chat__close:hover {
	border-color: currentcolor;
}

.sblite-chat__close-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	pointer-events: none;
}

/* The header is a dark or light block of the chosen colour: a ring in the header's own text colour is always visible. */
.sblite-chat__close:focus-visible {
	outline-color: currentcolor;
}

/* ---- Messages ------------------------------------------------------------------------------------------------- */

.sblite-chat__messages {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 8rem;
	padding: 1rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sblite-chat__message {
	align-self: flex-start;
	max-width: 92%;
	padding: 0.5rem 0.75rem;
	border-radius: calc(var(--sblite-radius) - 4px);
	background: var(--sblite-surface);
	color: var(--sblite-text);
	overflow-wrap: anywhere;
}

.sblite-chat__message--user {
	align-self: flex-end;
	background: var(--sblite-chat-bg);
	color: var(--sblite-chat-text);
}

.sblite-chat__message--pending {
	font-style: italic;
}

.sblite-chat__message--error {
	border-inline-start: 4px solid var(--sblite-error);
	background: var(--sblite-error-bg);
	color: var(--sblite-error-text);
}

.sblite-chat__who {
	margin: 0 0 0.125rem;
	font-size: 0.8125rem;
	font-weight: 700;
}

.sblite-chat__text {
	margin: 0 0 0.5rem;
}

.sblite-chat__text:last-child {
	margin-bottom: 0;
}

.sblite-chat__sources-title {
	margin: 0.5rem 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
}

.sblite-chat__source-list {
	margin: 0;
	padding-inline-start: 1.25rem;
	font-size: 0.9375rem;
}

.sblite-chat__contact {
	display: inline-block;
	margin-top: 0.25rem;
	font-weight: 600;
}

/* ---- Example questions ---------------------------------------------------------------------------------------- */

.sblite-chat__examples {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	align-items: stretch;
}

.sblite-chat__examples-title {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	font-weight: 700;
}

.sblite-chat__example {
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sblite-border);
	border-radius: calc(var(--sblite-radius) - 4px);
	background: var(--sblite-bg);
	color: var(--sblite-text);
	text-align: start;
}

.sblite-chat__example:hover {
	background: var(--sblite-surface);
}

/* ---- Form ----------------------------------------------------------------------------------------------------- */

.sblite-chat__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.375rem 0.5rem;
	padding: var(--sblite-gap) 1rem 1rem;
	border-top: 1px solid var(--sblite-border);
	background: var(--sblite-bg);
}

.sblite-chat__label {
	grid-column: 1 / -1;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Two classes, not one: a theme's `input[type="text"]` rule (Astra has one) is stronger than a single class. */
.sblite-chat .sblite-chat__input {
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sblite-border);
	border-radius: calc(var(--sblite-radius) - 4px);
	background: var(--sblite-bg);
	color: var(--sblite-text);
	/* 16px or more: iOS Safari zooms the page when a smaller field gets focus. */
	font-size: max(1rem, 16px);
}

.sblite-chat .sblite-chat__input::placeholder {
	color: #595959;
	opacity: 1;
}

.sblite-chat .sblite-chat__input:disabled {
	background: var(--sblite-surface);
	color: var(--sblite-disabled);
}

/* A theme's `input[type="text"]:focus` also changes colour, background and border. Three classes and an element beat it. */
.sblite-chat input.sblite-chat__input:focus {
	border-color: var(--sblite-border);
	background: var(--sblite-bg);
	color: var(--sblite-text);
	box-shadow: none;
}

.sblite-chat input.sblite-chat__input:disabled:focus {
	background: var(--sblite-surface);
	color: var(--sblite-disabled);
}

.sblite-chat__submit {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid transparent;
	border-radius: calc(var(--sblite-radius) - 4px);
	background: var(--sblite-send-bg);
	color: var(--sblite-send-text);
	font-weight: 600;
}

/* Busy (a request is running) and offline: a different shade AND a different cursor, so it is not colour alone. */
.sblite-chat__submit[aria-disabled="true"],
.sblite-chat__submit:disabled {
	background: var(--sblite-disabled);
	color: #fff;
	cursor: progress;
	text-decoration: none;
}

.sblite-chat__submit:disabled {
	cursor: not-allowed;
}

/* ---- Theme defence: button states ----------------------------------------------------------------------------- */

/*
 * Many themes style `button:hover` and `button:focus` (Astra sets `color: #fff` and a grey border). That selector is an
 * element plus a pseudo-class, which is stronger than the single class used above, so on hover the theme would win and
 * could turn the text white on a light button. These rules say the same colours again for the hover, focus and active
 * states with more weight. Ordinary (non-hover) states are already safe: one class beats a bare `button`.
 * Hover stays after focus, so a button that is both focused and hovered shows the hover look.
 */
.sblite-chat .sblite-chat__toggle:hover,
.sblite-chat .sblite-chat__toggle:focus,
.sblite-chat .sblite-chat__toggle:active {
	border-color: transparent;
	background: var(--sblite-toggle-bg);
	color: var(--sblite-toggle-text);
}

.sblite-chat .sblite-chat__submit:hover,
.sblite-chat .sblite-chat__submit:focus,
.sblite-chat .sblite-chat__submit:active {
	border-color: transparent;
	background: var(--sblite-send-bg);
	color: var(--sblite-send-text);
}

/* After the rule above, with the same weight, so a busy or offline Send button keeps its grey look when hovered. */
.sblite-chat .sblite-chat__submit[aria-disabled="true"],
.sblite-chat .sblite-chat__submit:disabled {
	background: var(--sblite-disabled);
	color: #fff;
}

.sblite-chat .sblite-chat__close:focus,
.sblite-chat .sblite-chat__close:active {
	border-color: transparent;
	background: transparent;
	color: inherit;
}

.sblite-chat .sblite-chat__close:hover {
	border-color: currentcolor;
	background: transparent;
	color: inherit;
}

.sblite-chat .sblite-chat__example:focus,
.sblite-chat .sblite-chat__example:active {
	border-color: var(--sblite-border);
	background: var(--sblite-bg);
	color: var(--sblite-text);
}

.sblite-chat .sblite-chat__example:hover {
	border-color: var(--sblite-border);
	background: var(--sblite-surface);
	color: var(--sblite-text);
}

/* ---- Inline chat ([sitebrain] shortcode and widget) ----------------------------------------------------------- */

.sblite-chat--inline {
	display: block;
	width: 100%;
	max-width: 42rem;
	margin: 1.5rem 0;
}

.sblite-chat--inline .sblite-chat__messages {
	max-height: 28rem;
}

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

@media (max-width: 30rem) {
	.sblite-chat {
		--sblite-offset: 0.75rem;
	}

	.sblite-chat--bubble {
		left: max(var(--sblite-offset), env(safe-area-inset-left));
		align-items: stretch;
		max-width: none;
	}

	.sblite-chat--bubble .sblite-chat__panel {
		width: auto;
		/* Leaves room under the panel for the toggle, so it never hides the control that closes it. */
		max-height: calc(100vh - 6rem);
		max-height: calc(100dvh - 6rem);
	}

	.sblite-chat__toggle {
		align-self: flex-end;
	}

	.sblite-chat__message {
		max-width: 100%;
	}
}

/* ---- Motion: only for visitors who have not asked for less ---------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.sblite-chat__toggle,
	.sblite-chat__submit,
	.sblite-chat__example,
	.sblite-chat__close {
		transition: background-color 0.15s ease;
	}

	.sblite-chat--bubble .sblite-chat__panel {
		animation: sblite-chat-open 0.18s ease-out;
	}

	@keyframes sblite-chat-open {
		from {
			opacity: 0;
			transform: translateY(0.5rem);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* ---- Windows high contrast and print -------------------------------------------------------------------------- */

@media (forced-colors: active) {
	.sblite-chat__toggle,
	.sblite-chat__submit,
	.sblite-chat__close,
	.sblite-chat__example {
		border-color: ButtonText;
	}

	.sblite-chat__message {
		border: 1px solid CanvasText;
	}
}

@media print {
	.sblite-chat--bubble {
		display: none;
	}
}