.site-answers-root {
	--site-answers-accent: #142e43;
	--site-answers-radius: 16px;
	--site-answers-shadow: 0 10px 30px rgba(20, 30, 45, 0.18);
	--site-answers-shadow-hover: 0 14px 38px rgba(20, 30, 45, 0.24);
	font-family: inherit;
	line-height: 1.5;
	box-sizing: border-box;
}
.site-answers-root *,
.site-answers-root *::before,
.site-answers-root *::after {
	box-sizing: inherit;
	/* A long URL, a product code or an unspaced compound word in an
	   admin-authored answer must wrap instead of widening the panel (and
	   with it the page) sideways. overflow-wrap only breaks a word that
	   genuinely does not fit, so normal text is untouched. */
	overflow-wrap: break-word;
	/* Explicitly RESET the two properties that make text break in the
	   middle of a word. Some themes set `word-break: break-all` (or a
	   hyphenation rule) on a global selector, and because those inherit,
	   the assistant would render one character per line — Arabic and other
	   scripts worst of all. The widget must look the same on every theme,
	   so it states its own values rather than inheriting whatever the page
	   happens to use. */
	word-break: normal;
	hyphens: manual;
}
/* `screen-reader-text` is a THEME convention, not something WordPress
   guarantees on the front end — on a theme that never defines it, the
   input's label renders as visible text next to the composer. The widget
   ships its own copy of the rule (scoped to itself, so it can neither
   collide with nor override the theme's own) and its own class name, so
   the label is always announced to screen readers and never drawn. */
.site-answers-root .site-answers-sr-only,
.site-answers-root .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The scrollable areas must not widen past the panel, so nothing inside
   the assistant can introduce a horizontal scrollbar.
   NOTE: these are flex CHILDREN of the panel, so 100% here resolves
   against the panel itself. No width rule of any kind is ever put on
   .site-answers-panel here or on .site-answers-root — see the comment on .site-answers-panel below
   for why that would collapse the whole widget. */
.site-answers-panel__body,
.site-answers-panel__suggestions {
	inline-size: 100%;
	max-inline-size: 100%;
	overflow-x: hidden;
}

/* STACKING. 99999 is WordPress's own admin-bar level and is deliberately
   not exceeded here: the launcher is a small button that should sit above
   ordinary page content but has no business covering the admin bar. Only
   the full-screen mobile sheet goes one higher (see the mobile section),
   because while it is open it IS the interface. No arbitrarily large
   numbers, so a theme that needs to sit above the widget still can. */
.site-answers-root--floating {
	position: fixed;
	inset-block-end: 20px;
	z-index: 99999;
}
.site-answers-root--floating.site-answers-root--end {
	inset-inline-end: 20px;
}
.site-answers-root--floating.site-answers-root--start {
	inset-inline-start: 20px;
}

.site-answers-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 20px 13px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--site-answers-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--site-answers-shadow);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	/* A theme that squeezes buttons globally (`button { padding: 2px }`,
	   `min-width: 0`, a fixed height) must not be able to shrink the
	   launcher below a comfortable touch target. A minimum always beats a
	   maximum, so stating the floor here is what makes it hold. */
	min-block-size: 44px;
	flex: 0 0 auto;
	/* iOS paints its own translucent grey rectangle over any element it
	   considers tappable, which on a round button shows as a square flash.
	   The :active state below is the widget's own, better-looking answer. */
	-webkit-tap-highlight-color: transparent;
	transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
[dir="rtl"] .site-answers-toggle {
	padding: 13px 16px 13px 20px;
}
/* Hover only where hovering is a real thing. On a touch screen the :hover
   state STICKS after a tap — the button stays lifted and shadowed until
   something else is tapped — which reads as the button having moved and
   not come back. Gating it on the pointer removes that entirely, and the
   :active state below gives touch its own feedback. */
@media (hover: hover) {
	.site-answers-toggle:hover {
		box-shadow: var(--site-answers-shadow-hover);
		transform: translateY(-1px);
	}
}
.site-answers-toggle:active {
	transform: scale(0.96);
	box-shadow: var(--site-answers-shadow);
}
.site-answers-toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	box-shadow: var(--site-answers-shadow-hover), 0 0 0 4px rgba(20, 30, 45, 0.25);
}
@media (prefers-reduced-motion: reduce) {
	.site-answers-toggle,
	.site-answers-toggle:active {
		transition: box-shadow 0.2s ease, opacity 0.2s ease;
		transform: none;
	}
}
.site-answers-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
}
.site-answers-toggle__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

/* THE PANEL'S WIDTH — read this before changing anything here.
 *
 * The floating panel is absolutely positioned, so percentage widths and
 * `max-inline-size: 100%` resolve against its containing block, which is
 * .site-answers-root — and .site-answers-root is only as wide as the little toggle button.
 * Any `max-width: 100%` that lands on this element therefore squeezes the
 * whole 370px panel down to roughly 140px: the message area collapses to a
 * sliver, text breaks one character per line, the suggestion pills spill
 * out and the Send button folds in half. A theme with a global
 * `* { max-width: 100% }` rule does exactly this too, which is why the
 * defence below is not just about our own CSS.
 *
 * min-inline-size is the defence: per the CSS box-sizing spec a minimum
 * size ALWAYS wins over a maximum size, so stating the width as a minimum
 * makes it impossible for any later rule — ours or the theme's — to
 * collapse it. It is clamped to the viewport so it can never cause a
 * horizontal page scrollbar either, which is what the (mistaken) 100% rule
 * was reaching for in the first place.
 */
.site-answers-panel {
	position: absolute;
	inset-block-end: calc(100% + 12px);
	inset-inline-end: 0;
	inline-size: min(370px, calc(100vw - 32px));
	min-inline-size: min(370px, calc(100vw - 32px));
	max-inline-size: calc(100vw - 32px);
	max-block-size: min(580px, 80vh);
	background: #fff;
	border-radius: var(--site-answers-radius);
	box-shadow: var(--site-answers-shadow-hover);
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	opacity: 0;
	transform: translateY(8px) scale(0.97);
	transition: opacity 0.16s ease, transform 0.16s ease;
}
[dir="rtl"] .site-answers-panel {
	transform-origin: bottom left;
}
/* The single most important rule in this file: a plain class selector and
   the browser's own [hidden] rule carry identical CSS specificity, and
   author styles win ties against the user-agent stylesheet — so setting
   `display` unconditionally on .site-answers-panel would silently defeat `hidden`
   in both directions (it would never truly hide, whether on first paint or
   after being closed). Scoping `display` to :not([hidden]) is what makes
   the hidden attribute (and therefore the close button) actually work. */
.site-answers-panel:not([hidden]) {
	display: flex;
}
.site-answers-panel.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
}
/* A closed floating panel must not be able to catch a tap.
 *
 * Closing removes .is-open and only sets the `hidden` attribute once the
 * fade-out has had time to run, so for those ~180ms the element is still
 * laid out — and on mobile it is laid out as a full-screen sheet covering
 * the entire viewport. Without this, a tap that lands in that window hits
 * an invisible overlay instead of the page underneath, which is read as the
 * widget having got stuck. Scoped to the floating placement on purpose: the
 * inline (shortcode / classic widget) panel is a permanent part of the page
 * and never carries .is-open at all. */
.site-answers-root--floating .site-answers-panel:not(.is-open) {
	pointer-events: none;
}
.site-answers-root--floating .site-answers-panel.is-open {
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.site-answers-panel {
		transition: opacity 0.16s ease;
		transform: none;
	}
}
.site-answers-root--start .site-answers-panel {
	inset-inline-end: auto;
	inset-inline-start: 0;
	transform-origin: bottom left;
}
/* Inline (shortcode / classic widget) placement is an ordinary block in
   the page, so it must FILL its container rather than insist on 370px —
   the minimum above is released here, or the widget would overflow a
   narrow sidebar. */
.site-answers-root--inline .site-answers-panel {
	position: static;
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: 100%;
	max-block-size: none;
	block-size: 520px;
	box-shadow: none;
	border: 1px solid rgba(0, 0, 0, 0.08);
	opacity: 1;
	transform: none;
}

/* The header never scrolls and never moves: it is a flex child with
   `flex: 0 0 auto`, so the messages area below it is the only thing that
   scrolls. Its own stacking context sits above the panel body, so no card,
   image or long answer can ever be painted over the close button. */
.site-answers-panel__head {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	/* Respects the notch when the panel is a full-screen sheet; resolves to
	   the plain padding everywhere else, since the inset is 0 there. */
	padding-block-start: calc(14px + env(safe-area-inset-top, 0px));
	background: var(--site-answers-accent);
	color: #fff;
	flex: 0 0 auto;
}
/* A site can call its assistant anything, and a long name used to push the
   close button off the edge of a 320px screen. The title is allowed to
   shrink and truncate; the button never is. */
.site-answers-panel__title {
	font-weight: 600;
	font-size: 14.5px;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.site-answers-panel__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease;
}
/* The icon is decorative and must never swallow the tap: without this a
   press that lands on the SVG has the <svg> as its target, which is fine
   for click delegation but not for every mobile browser's synthetic click
   handling. Making it transparent to pointers means every press inside the
   40px square is a press on the button itself. */
.site-answers-panel__close svg {
	pointer-events: none;
}
.site-answers-panel__close:hover {
	background: rgba(255, 255, 255, 0.16);
}
.site-answers-panel__close:active {
	background: rgba(255, 255, 255, 0.28);
}
.site-answers-panel__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The ONE scrollable region. Everything else in the panel is `flex: 0 0
   auto`, which is what keeps the header and the composer pinned while the
   conversation grows.
   `overscroll-behavior: contain` is the rule that stops the page behind the
   panel from scrolling once the message list reaches its end — without it a
   continued swipe "chains" to the document and the visitor watches the site
   move instead of the chat. */
.site-answers-panel__body {
	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f8f7f4;
}

.site-answers-msg {
	max-inline-size: 88%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	min-inline-size: 0;
}
.site-answers-msg--assistant {
	align-self: flex-start;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-end-start-radius: 4px;
}
.site-answers-msg--user {
	align-self: flex-end;
	background: var(--site-answers-accent);
	color: #fff;
	border-end-end-radius: 4px;
}
.site-answers-msg p {
	margin: 0 0 6px;
}
.site-answers-msg p:last-child {
	margin-block-end: 0;
}
.site-answers-disclosure {
	font-size: 11.5px;
	color: #888;
	font-style: italic;
}

.site-answers-retry {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-block-start: 6px;
	padding: 5px 11px;
	border: 1px solid var(--site-answers-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--site-answers-accent);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.site-answers-retry:hover {
	background: var(--site-answers-accent);
	color: #fff;
}
.site-answers-retry:focus-visible {
	outline: 2px solid var(--site-answers-accent);
	outline-offset: 2px;
}

.site-answers-contact-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.site-answers-contact-action:hover {
	background: #1ebe59;
	transform: translateY(-1px);
}
.site-answers-contact-action:focus-visible {
	outline: 2px solid #128c7e;
	outline-offset: 2px;
}

.site-answers-dots {
	display: inline-flex;
	gap: 4px;
}
.site-answers-dots span {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	animation: site-answers-blink 1.2s infinite ease-in-out;
}
.site-answers-dots span:nth-child(2) {
	animation-delay: 0.2s;
}
.site-answers-dots span:nth-child(3) {
	animation-delay: 0.4s;
}
@keyframes site-answers-blink {
	0%,
	80%,
	100% {
		opacity: 0.25;
	}
	40% {
		opacity: 0.9;
	}
}
@keyframes site-answers-spin {
	to {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.site-answers-dots span {
		animation: none;
		opacity: 0.6;
	}
	.site-answers-panel__send-spinner {
		animation: none !important;
	}
}

.site-answers-sources {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-block-start: 8px;
}
.site-answers-card {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 9px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.site-answers-card:hover {
	border-color: rgba(0, 0, 0, 0.15);
	box-shadow: 0 4px 14px rgba(20, 30, 45, 0.1);
	transform: translateY(-1px);
}
.site-answers-card:focus-visible {
	outline: 2px solid var(--site-answers-accent);
	outline-offset: 2px;
}
.site-answers-card__img {
	inline-size: 56px;
	block-size: 56px;
	object-fit: cover;
	border-radius: 9px;
	flex: 0 0 auto;
}
.site-answers-card__body {
	min-inline-size: 0;
}
.site-answers-card__title {
	font-weight: 600;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.site-answers-card__excerpt {
	font-size: 12px;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.site-answers-card__meta {
	font-size: 12px;
	color: var(--site-answers-accent);
	margin-block-start: 2px;
}
.site-answers-card__cta {
	display: inline-block;
	margin-block-start: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--site-answers-accent);
	text-decoration: underline;
}

.site-answers-panel__suggestions {
	padding: 0 14px 10px;
	flex: 0 0 auto;
	max-block-size: 40%;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Without this the pills' own overflow turns into a horizontal
	   scrollbar across the bottom of the suggestions area: when one axis
	   is `auto`, a `visible` on the other axis computes to `auto` too. */
	overflow-x: hidden;
}
.site-answers-panel__suggestions:empty {
	display: none;
}
.site-answers-panel__help {
	font-size: 12px;
	font-weight: 600;
	color: #666;
	margin: 0 0 6px;
}
.site-answers-panel__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.site-answers-suggestion {
	border: 1px solid rgba(20, 30, 45, 0.18);
	color: var(--site-answers-accent);
	background: transparent;
	border-radius: 999px;
	padding: 6px 13px;
	margin: 0;
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.4;
	cursor: pointer;
	/* An administrator can type any length of suggested question, so a
	   pill must wrap inside the panel rather than push a scrollbar. */
	max-inline-size: 100%;
	min-inline-size: 0;
	text-align: start;
	white-space: normal;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.site-answers-suggestion:hover {
	background: var(--site-answers-accent);
	border-color: var(--site-answers-accent);
	color: #fff;
}
.site-answers-suggestion:focus-visible {
	outline: 2px solid var(--site-answers-accent);
	outline-offset: 2px;
}

.site-answers-panel__form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
	flex: 0 0 auto;
	inline-size: 100%;
	max-inline-size: 100%;
}
/* Themes style `textarea` and `button` globally more often than any other
   element — fixed heights, number-input spinners, display changes, their
   own fonts and colours. Everything the input needs is therefore stated
   here rather than left to inherit, so the composer looks and behaves the
   same on every theme. */
.site-answers-panel__input {
	flex: 1 1 auto;
	/* A flex item's default min-width is `auto`, i.e. its content size —
	   without this a long word typed into the box can push the Send button
	   out of the panel. */
	min-inline-size: 0;
	inline-size: 100%;
	appearance: none;
	-webkit-appearance: none;
	resize: none;
	display: block;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 12px;
	padding: 9px 12px;
	margin: 0;
	font: inherit;
	font-size: 14px;
	line-height: 1.45;
	color: inherit;
	background: #fff;
	block-size: auto;
	min-block-size: 40px;
	max-block-size: 90px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.site-answers-panel__input:focus-visible,
.site-answers-panel__input:focus {
	outline: none;
	border-color: var(--site-answers-accent);
	box-shadow: 0 0 0 3px rgba(20, 30, 45, 0.12);
}
.site-answers-panel__input:disabled {
	opacity: 0.6;
}
.site-answers-panel__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Never shrink and never wrap: a squeezed Send button that folds its
	   own label onto two lines is one of the clearest signs a widget has
	   lost the width fight with its theme. */
	flex: 0 0 auto;
	white-space: nowrap;
	min-inline-size: 64px;
	block-size: 40px;
	margin: 0;
	border: 0;
	background: var(--site-answers-accent);
	color: #fff;
	border-radius: 12px;
	padding: 0 16px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}
.site-answers-panel__send:hover:not(:disabled) {
	transform: translateY(-1px);
}
.site-answers-panel__send:active:not(:disabled) {
	transform: translateY(0);
}
.site-answers-panel__send:focus-visible {
	outline: 2px solid var(--site-answers-accent);
	outline-offset: 2px;
}
.site-answers-panel__send:disabled {
	opacity: 0.65;
	cursor: default;
}
.site-answers-panel__send-spinner {
	display: none;
	inline-size: 15px;
	block-size: 15px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
}
.site-answers-panel__send:disabled .site-answers-panel__send-label {
	display: none;
}
.site-answers-panel__send:disabled .site-answers-panel__send-spinner {
	display: inline-block;
	animation: site-answers-spin 0.7s linear infinite;
}

[dir="rtl"].site-answers-root,
[dir="rtl"] .site-answers-root {
	letter-spacing: normal;
}

/* ---- Curated (rich) answers ------------------------------------------ */
.site-answers-msg--rich {
	max-inline-size: 96%;
	inline-size: 96%;
}
.site-answers-rich__title {
	font-weight: 600;
	font-size: 14px;
	margin-block-end: 8px;
}
.site-answers-rich--text p {
	margin: 0 0 6px;
}
.site-answers-icon {
	display: inline-flex;
	align-items: center;
	color: var(--site-answers-accent);
	flex: 0 0 auto;
}
.site-answers-icon svg {
	inline-size: 16px;
	block-size: 16px;
}
.site-answers-cta {
	display: inline-flex;
	align-items: center;
	margin-block-start: 10px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--site-answers-accent);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.site-answers-cta:hover {
	transform: translateY(-1px);
	opacity: 0.92;
}
.site-answers-cta:focus-visible {
	outline: 2px solid var(--site-answers-accent);
	outline-offset: 2px;
}

/* Steps: a compact vertical timeline. */
.site-answers-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.site-answers-step {
	position: relative;
	display: flex;
	gap: 10px;
	padding-block-end: 12px;
}
.site-answers-step:last-child {
	padding-block-end: 0;
}
.site-answers-step::before {
	content: "";
	position: absolute;
	inset-block: 24px 0;
	inset-inline-start: 11px;
	inline-size: 2px;
	background: rgba(0, 0, 0, 0.08);
}
.site-answers-step:last-child::before {
	display: none;
}
.site-answers-step__num {
	flex: 0 0 24px;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: var(--site-answers-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.site-answers-step__body {
	min-inline-size: 0;
	padding-block-start: 3px;
}
.site-answers-step__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 13.5px;
}
.site-answers-step__desc {
	font-size: 12.5px;
	color: #666;
	margin-block-start: 2px;
}

/* Cards: two-up when there is room, single column stacked on narrow
   screens. A grid (never a horizontal strip) means the cards can only ever
   grow downwards inside the panel — they cannot spill out sideways or make
   the page scroll horizontally, at any width down to 320px. */
.site-answers-rcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	max-inline-size: 100%;
}
@media (max-width: 400px) {
	/* Below ~400px two columns leave each card too narrow to read; one
	   full-width column per card is clearer and keeps the image legible. */
	.site-answers-rcards {
		grid-template-columns: 1fr;
	}
}
.site-answers-rcard {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	min-inline-size: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.site-answers-rcard:hover {
	border-color: rgba(0, 0, 0, 0.15);
	box-shadow: 0 4px 14px rgba(20, 30, 45, 0.1);
	transform: translateY(-1px);
}
a.site-answers-rcard:focus-visible {
	outline: 2px solid var(--site-answers-accent);
	outline-offset: 2px;
}
.site-answers-rcard__img {
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
.site-answers-rcard__body {
	padding: 9px 10px 10px;
	min-inline-size: 0;
}
.site-answers-rcard__title {
	font-weight: 600;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.site-answers-rcard__desc {
	font-size: 12px;
	color: #666;
	margin-block-start: 3px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.site-answers-rcard__cta {
	display: inline-block;
	margin-block-start: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--site-answers-accent);
	text-decoration: underline;
}

/* Facts: compact labelled rows produced by the Local Answer Engine
   (contact details, opening hours, a list of offerings, prices). Visually
   a quieter sibling of .site-answers-link — the point is scannability, not
   decoration. */
.site-answers-facts {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.site-answers-fact {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 7px 10px;
	border-radius: 9px;
	background: rgba(20, 30, 45, 0.035);
	color: inherit;
	text-decoration: none;
	min-inline-size: 0;
}
a.site-answers-fact {
	transition: background-color 0.15s ease;
}
a.site-answers-fact:hover {
	background: rgba(20, 30, 45, 0.08);
}
a.site-answers-fact:focus-visible {
	outline: 2px solid var(--site-answers-accent);
	outline-offset: 2px;
}
.site-answers-fact .site-answers-icon {
	margin-block-start: 1px;
}
.site-answers-fact__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-inline-size: 0;
}
.site-answers-fact__label {
	font-size: 11.5px;
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.site-answers-fact__value {
	font-size: 13.5px;
	line-height: 1.45;
}
a.site-answers-fact .site-answers-fact__value {
	color: var(--site-answers-accent);
	font-weight: 600;
}
.site-answers-rich__note {
	font-size: 12px;
	color: #666;
	margin: 8px 0 0;
}
.site-answers-rich__page {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-block-start: 10px;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 9px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	min-inline-size: 0;
	transition: border-color 0.15s ease;
}
.site-answers-rich__page:hover {
	border-color: var(--site-answers-accent);
}
.site-answers-rich__page:focus-visible {
	outline: 2px solid var(--site-answers-accent);
	outline-offset: 2px;
}
.site-answers-rich__page-label {
	font-size: 11.5px;
	color: #777;
}
.site-answers-rich__page-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--site-answers-accent);
}

/* Links: compact action rows. */
.site-answers-links {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.site-answers-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.site-answers-link:hover {
	border-color: var(--site-answers-accent);
	background: rgba(20, 30, 45, 0.03);
}
.site-answers-link:focus-visible {
	outline: 2px solid var(--site-answers-accent);
	outline-offset: 2px;
}
.site-answers-link__body {
	min-inline-size: 0;
}
.site-answers-link__label {
	font-weight: 600;
	font-size: 13px;
}
.site-answers-link__desc {
	font-size: 12px;
	color: #666;
}

/* A short viewport with a mouse — a desktop window dragged small, or a
   laptop in a presentation mode. The panel is still a floating box here, so
   all it needs is to stop insisting on 580px of height. */
@media (max-height: 620px) and (pointer: fine) {
	.site-answers-root--floating .site-answers-panel {
		max-block-size: calc(100vh - 110px);
		max-block-size: calc(100dvh - 110px);
	}
}

/* THE MOBILE SHEET.
 *
 * Matches a narrow screen OR a short touch screen, which is the same phone
 * turned on its side: at 844x390 the width test alone fails and the panel
 * would fall back to a 370px floating box on a 390px-tall viewport. The
 * second condition is what makes landscape work.
 *
 * SITE_ANSWERS_MOBILE_QUERY in widget.js MUST be kept identical to this — it is what
 * decides whether opening the panel also locks the page behind it. */
@media (max-width: 600px), (max-height: 520px) and (pointer: coarse) {
	/* A small floating box positioned near a corner is what causes most
	   "broken on mobile" reports for chat widgets: the on-screen keyboard
	   resizes the visible viewport, browser toolbars show/hide and change
	   what 100vh actually means, and a fixed box near the bottom easily
	   collides with a theme's own sticky mobile bar. The reliable fix used
	   by virtually every production chat widget is to stop trying to float
	   a box on mobile at all, and instead make the panel a true full-screen
	   sheet — which sidesteps all three problems at once instead of
	   patching each edge case. */

	.site-answers-root--floating .site-answers-toggle {
		/* Icon-only on narrow screens: smaller footprint, less likely to
		   sit under a theme's own mobile nav bar, and a standard, expected
		   "FAB" (floating action button) pattern at this size. The label
		   is not removed, only hidden visually — screen readers still read
		   it as the button's name.
		   The size is stated as a minimum as well as a size, so a theme's
		   global button rules cannot squash it into an oval. */
		inline-size: 56px;
		block-size: 56px;
		min-inline-size: 56px;
		min-block-size: 56px;
		padding: 0;
		justify-content: center;
		/* A hairline ring, so the button stays clearly defined against a
		   photograph, a dark hero or an accent colour close to the page
		   behind it — the shadow alone disappears on a busy background. */
		box-shadow: var(--site-answers-shadow), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
	}
	/* An 18px glyph adrift in a 56px circle looks like a mistake. At this
	   size the icon carries the whole button, since the label is hidden. */
	.site-answers-root--floating .site-answers-toggle__icon {
		inline-size: 24px;
		block-size: 24px;
	}

	/* SAFE AREAS — `calc`, not `max`.
	   `max(16px, env(safe-area-inset-bottom))` looks defensive and is not:
	   on an iPhone the bottom inset is 34px, so the maximum resolves to
	   exactly 34px and the button ends up sitting ON the home indicator
	   with no gap at all. Adding the inset to the gutter keeps the intended
	   16px of breathing room on every device, and costs nothing on a phone
	   with no inset, where env() is 0. */
	.site-answers-root--floating.site-answers-root--end {
		inset-inline-end: calc(16px + env(safe-area-inset-right, 0px));
	}
	.site-answers-root--floating.site-answers-root--start {
		inset-inline-start: calc(16px + env(safe-area-inset-left, 0px));
	}
	.site-answers-root--floating {
		inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
	}
	.site-answers-toggle__label {
		/* Standard visually-hidden technique: stays in the accessibility
		   tree (so the button's accessible name is unchanged) without
		   taking up visible space. */
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.site-answers-root--floating .site-answers-panel {
		position: fixed;
		inset: 0;
		inline-size: 100%;
		min-inline-size: 0;
		max-inline-size: 100%;
		/* HEIGHT — four declarations, deliberately, each overriding the
		   last only where it is understood:
		   1. 100vh   — the floor. Every browser understands it, and it is
		                wrong on mobile (it ignores the toolbars).
		   2. 100svh  — the SMALL viewport: the height with the browser
		                toolbars showing. Never too tall, so the composer
		                cannot be pushed off-screen while the toolbar is up.
		   3. 100dvh  — the DYNAMIC viewport: tracks the toolbars sliding
		                away, so the sheet fills the screen once they do.
		   An unrecognised unit makes the whole declaration invalid and the
		   previous one stands, which is exactly the fallback wanted.
		   The fourth — the visual-viewport height the script measures when
		   the keyboard is up — is applied by the separate .site-answers-has-vv rule
		   below, because on iOS none of these units shrink for the
		   keyboard and the input would end up underneath it. */
		block-size: 100vh;
		block-size: 100svh;
		block-size: 100dvh;
		max-block-size: 100vh;
		max-block-size: 100svh;
		max-block-size: 100dvh;
		/* Side insets for a notch in landscape. */
		padding-inline-start: env(safe-area-inset-left, 0px);
		padding-inline-end: env(safe-area-inset-right, 0px);
		border-radius: 0;
		transform-origin: center;
		z-index: 100000;
	}

	/* When a logged-in user has the admin bar, the sheet starts below it
	   rather than covering it — the bar is fixed and the visitor may well
	   want it. 46px is the admin bar's own mobile height. */
	.admin-bar .site-answers-root--floating .site-answers-panel {
		inset-block-start: 46px;
		block-size: calc(100vh - 46px);
		block-size: calc(100svh - 46px);
		block-size: calc(100dvh - 46px);
	}

	.site-answers-panel__form {
		/* Keeps the send button clear of the home-indicator / gesture bar
		   on notched phones instead of sitting flush against it. */
		padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
	}

	/* iOS Safari zooms the whole page in when a focused input's font is
	   below 16px, and then leaves it zoomed — which is precisely the
	   "window jumps around and won't sit still" complaint. 16px is the
	   threshold, so this is a fix, not a taste. */
	.site-answers-panel__input {
		font-size: 16px;
		min-block-size: 44px;
		max-block-size: 96px;
	}
	.site-answers-panel__send {
		min-block-size: 44px;
		block-size: 44px;
	}

	/* Suggested questions must never crowd out the conversation. An
	   administrator may write a dozen long ones; the list scrolls inside
	   its own box instead of filling the sheet. */
	.site-answers-panel__suggestions {
		max-block-size: 30%;
	}
	.site-answers-panel__pills {
		gap: 6px;
	}

	/* Toggled by widget.js alongside opening/closing the panel — belt and
	   braces so the compact icon button never visually peeks out from
	   behind the full-screen panel on a device where stacking behaves
	   unexpectedly. pointer-events is the important half: a button that is
	   merely invisible can still swallow a tap meant for the sheet. */
	.site-answers-root.site-answers-is-open .site-answers-toggle {
		visibility: hidden;
		pointer-events: none;
	}

	/* ANIMATION. The desktop panel is a small box that can afford to scale
	   up from a corner. A full-screen sheet cannot: scaling the whole
	   viewport is heavy on a phone, it makes text blurry mid-transition
	   because the layer is rendered at the wrong size and resampled, and
	   the moving edges read as layout shift. A short rise and fade says the
	   same thing and costs nothing. */
	.site-answers-root--floating .site-answers-panel {
		transform: translateY(12px);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
	.site-answers-root--floating .site-answers-panel.is-open {
		transform: translateY(0);
	}
	/* Repeated inside this block on purpose: the rule above is more
	   specific than the global reduced-motion rule near the top of the
	   file and comes after it, so without this the preference would be
	   silently overridden on exactly the devices most likely to set it. */
	@media (prefers-reduced-motion: reduce) {
		.site-answers-root--floating .site-answers-panel,
		.site-answers-root--floating .site-answers-panel.is-open {
			transform: none;
			transition: opacity 0.16s ease;
		}
	}

	/* Touch targets. WCAG 2.5.8 asks for at least 24x24 CSS px; these are
	   sized comfortably above that so a tapped link, suggestion pill or
	   call-to-action is easy to hit on a phone without changing the
	   desktop design. */
	.site-answers-link,
	.site-answers-card,
	a.site-answers-fact {
		min-block-size: 48px;
		align-items: center;
	}
	.site-answers-rich__page {
		/* Column flex here, so this centres the two lines vertically
		   rather than shifting them sideways. */
		min-block-size: 48px;
		justify-content: center;
	}
	.site-answers-cta,
	.site-answers-contact-action,
	.site-answers-retry {
		min-block-size: 44px;
		padding-block: 10px;
	}
	.site-answers-suggestion {
		min-block-size: 40px;
		padding-block: 9px;
	}
	/* The close button sits in the panel header, which never scrolls
	   (flex: 0 0 auto), so it stays reachable at every height — this only
	   enlarges it for touch. */
	.site-answers-panel__close {
		inline-size: 40px;
		block-size: 40px;
	}
	/* Narrower gutters at 320-360px, so a card's own padding does not eat
	   the readable width. */
	.site-answers-panel__body {
		padding: 12px;
	}
	.site-answers-msg {
		max-inline-size: 92%;
	}
	.site-answers-msg--rich {
		max-inline-size: 100%;
		inline-size: 100%;
	}
}

/* THE KEYBOARD.
 *
 * None of svh, dvh or vh shrink when the on-screen keyboard opens on iOS —
 * the visual viewport shrinks, the layout viewport does not — so a sheet
 * sized in those units keeps its full height and the composer ends up
 * underneath the keyboard. The only reliable measurement is the one the
 * VisualViewport API reports, so widget.js measures it while the panel is
 * open and publishes it as a custom property here.
 *
 * The class is added only once the script has actually set the property,
 * so this rule can never resolve to an empty value. With the sheet sized to
 * the visible area, the three-part layout does the rest by itself: the
 * header stays pinned at the top, the composer at the bottom, and only the
 * message list gives up space. Nothing is transformed or repositioned, which
 * is what keeps it steady while the keyboard animates in and out.
 *
 * The offset handles the other half of the same problem: Safari may scroll
 * the layout viewport out from under a fixed element, and pinning the sheet
 * to the visual viewport's own top puts it back where the visitor is
 * looking. */
@media (max-width: 600px), (max-height: 520px) and (pointer: coarse) {
	.site-answers-root--floating.site-answers-has-vv .site-answers-panel {
		block-size: var(--site-answers-vv-height);
		max-block-size: var(--site-answers-vv-height);
		inset-block-start: var(--site-answers-vv-top, 0px);
		inset-block-end: auto;
	}
	.admin-bar .site-answers-root--floating.site-answers-has-vv .site-answers-panel {
		/* At mobile widths the admin bar is fixed and does NOT scroll away,
		   so the offset has to survive visual-viewport tracking too —
		   otherwise the sheet's own header slides underneath it the moment
		   the keyboard opens. */
		inset-block-start: calc(var(--site-answers-vv-top, 0px) + 46px);
		block-size: calc(var(--site-answers-vv-height) - 46px);
		max-block-size: calc(var(--site-answers-vv-height) - 46px);
	}
}

/* STICKY HOVER.
 *
 * A touch screen has no pointer to move away, so after a tap the browser
 * leaves the tapped element in its :hover state until something else is
 * tapped. Every lift-on-hover in this file therefore ends up as a card or
 * a button that has visibly moved and stayed moved — the single most
 * common reason a widget "feels wrong" on a phone while looking fine in a
 * screenshot. The colour changes are harmless and are left alone; the
 * movement is not, so it is switched off wherever hovering is not real.
 *
 * Touch gets its own feedback from the :active states instead, which are
 * correct on both kinds of device. */
@media (hover: none) {
	.site-answers-toggle:hover,
	a.site-answers-rcard:hover,
	.site-answers-cta:hover,
	.site-answers-contact-action:hover {
		transform: none;
	}
}

/* Tap-highlight and press feedback for everything tappable inside the
   panel, for the same reason as the launcher: iOS's own grey rectangle
   looks like a rendering fault on rounded cards and pills. */
.site-answers-root button,
.site-answers-root a {
	-webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
	.site-answers-suggestion:active,
	.site-answers-retry:active,
	.site-answers-cta:active,
	.site-answers-contact-action:active,
	a.site-answers-rcard:active,
	.site-answers-link:active,
	a.site-answers-fact:active,
	.site-answers-rich__page:active,
	.site-answers-card:active {
		/* Just enough to confirm the press landed. */
		opacity: 0.78;
	}
}

/* Set on <body> by widget.js only while the full-screen mobile panel is
   open — desktop's small floating panel never needs to stop the page behind
   it from scrolling.
 *
 * `overflow: hidden` alone does not hold on iOS Safari, where the page
 * keeps scrolling behind the sheet; `position: fixed` does. The catch with
 * fixing the body is that the page snaps to the top, losing the visitor's
 * place — so the script records the scroll offset, publishes it as the
 * custom property below to hold the page exactly where it was, and scrolls
 * back to it on close. `inline-size: 100%` keeps the page from reflowing
 * narrower while it is fixed. */
.site-answers-body-locked {
	position: fixed;
	inset-block-start: var(--site-answers-scroll-lock, 0px);
	inset-inline: 0;
	inline-size: 100%;
	overflow: hidden;
}