.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;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
	/* A custom button label can be a whole sentence, and the panel is only
	   about 320px wide on a phone. Wrapping inside the pill keeps it on
	   screen instead of pushing the bubble sideways; max-inline-size stops
	   it stretching edge to edge on a desktop. */
	max-inline-size: 100%;
	text-align: start;
	overflow-wrap: anywhere;
}
.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-contact-action:visited {
	color: #fff;
}

.site-answers-contact-action__icon {
	display: inline-flex;
	flex: 0 0 auto;
	/* Holds the glyph on the first line of a label that wrapped, rather
	   than letting it float to the vertical middle of a tall pill. */
	align-self: flex-start;
	margin-block-start: 1px;
}

@media ( prefers-reduced-motion: reduce ) {
	.site-answers-contact-action {
		transition: none;
	}
	.site-answers-contact-action:hover {
		transform: none;
	}
}

.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));
	}

	/* THE ONE RULE THAT DECIDES WHERE THE LAUNCHER SITS ON A PHONE.
	 *
	 * --site-answers-mobile-bottom is the whole answer — the gap the
	 * launcher keeps from the bottom of the screen — and this is the only
	 * rule that reads it. It is built from two numbers:
	 *
	 *   --site-answers-bar-clearance  how much of the bottom edge a theme's
	 *                                 booking bar is occupying, measured
	 *                                 from the bar's own box by widget.js
	 *                                 and written onto this element as an
	 *                                 inline custom property. Nothing here
	 *                                 assumes a height, and an inline value
	 *                                 cannot be overridden by a stylesheet.
	 *   env(safe-area-inset-bottom)   the home indicator.
	 *
	 * max(), not +. A bar sitting on the home indicator has already absorbed
	 * that inset into its own box, so adding the two would count the notch
	 * twice and leave the button floating oddly high. Whichever is larger is
	 * how much of the bottom edge is spoken for; the 16px on top of it is the
	 * breathing room, and it is the same 16px whether the button is clearing
	 * a bar or the screen edge.
	 *
	 * The variable is defined inside @supports, not next to the rule above,
	 * on purpose: an unsupported function inside a CUSTOM property does not
	 * fall back to an earlier declaration the way a real property does (it
	 * parses happily and only fails later, at use), so a browser without
	 * CSS max() would be left with no bottom position at all and the button
	 * would jump to the top of the screen. Gating the whole thing on
	 * @supports means such a browser simply keeps the plain rule above.
	 *
	 * Two classes rather than one, so a theme rule written with a single
	 * class cannot quietly win this. Not !important, and not a bigger
	 * z-index — the launcher is moved out of the way, not layered over the
	 * top of someone else's interface. */
	@supports (bottom: max(1px, env(safe-area-inset-bottom, 0px))) {
		.site-answers-root.site-answers-root--floating {
			--site-answers-mobile-bottom: calc(16px + max(var(--site-answers-bar-clearance, 0px), env(safe-area-inset-bottom, 0px)));
			inset-block-end: var(--site-answers-mobile-bottom);
		}
	}

	/* FIRST PAINT, BEFORE ANY OF THAT HAS BEEN MEASURED.
	 *
	 * widget.js measures as soon as it runs, but on a site that defers or
	 * delays its scripts (a caching plugin holding JavaScript back until the
	 * first interaction is the common one) that can be a long time, and
	 * until then the launcher would sit exactly where the bug was reported.
	 *
	 * So if a booking bar is present in the document at all, a conservative
	 * height is assumed straight away in CSS — no script involved. It is a
	 * guess, and it is only ever a guess: the moment a real measurement
	 * exists widget.js adds .site-answers-bar-measured and this stops
	 * applying, whether the answer turned out to be more, less or nothing at
	 * all. Erring high is deliberate — a button slightly too high for a
	 * moment is a great deal better than one sitting on top of the Book
	 * button.
	 *
	 * :has() is what makes this possible; a browser without it ignores the
	 * rule entirely and simply waits for the script, which is the behaviour
	 * this is improving on. */
	body:has([data-wptm-bar], .wptm-bar, [data-wptm-act-bar], .wptm-act__bar) .site-answers-root--floating:not(.site-answers-bar-measured) {
		--site-answers-bar-clearance: 88px;
	}
	.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;
	}

	/* A BOTTOM SHEET, NOT A TAKEOVER.
	 *
	 * The panel is anchored to the bottom edge and given roughly 60% of the
	 * viewport, so the page the visitor actually came for stays on screen
	 * above it — they can read it, and scroll it, while the assistant is
	 * open. That is also why the page behind is NOT scroll-locked any more
	 * (see widget.js): locking a page the visitor can plainly see would
	 * read as the site having frozen.
	 *
	 * It is still a fixed layer: the header, the composer and the close
	 * button keep their places whatever the page behind does. */
	.site-answers-root--floating .site-answers-panel {
		position: fixed;
		inset-inline: 0;
		inset-block-start: auto;
		inset-block-end: 0;
		inline-size: 100%;
		min-inline-size: 0;
		max-inline-size: 100%;
		/* HEIGHT — three declarations, deliberately, each overriding the
		   last only where it is understood:
		   1. 60vh   — the floor. Every browser understands it, and it is
		               wrong on mobile (it ignores the toolbars).
		   2. 60svh  — 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. 60dvh  — the DYNAMIC viewport: tracks the toolbars sliding
		               away.
		   An unrecognised unit makes the whole declaration invalid and the
		   previous one stands, which is exactly the fallback wanted.
		   A fourth case — 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: 60vh;
		block-size: 60svh;
		block-size: 60dvh;
		max-block-size: 60vh;
		max-block-size: 60svh;
		max-block-size: 60dvh;
		/* On a phone in landscape 60% is not enough to hold a header, one
		   message and the composer, so a floor applies. Per the box-sizing
		   spec a minimum always beats a maximum, so this wins exactly where
		   it needs to and is ignored everywhere else. It is released again
		   while the keyboard is up (see the .site-answers-has-vv rule), where
		   the visible area has the final say. */
		min-block-size: 260px;
		/* 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);
		/* Rounded along the edge that is not against the screen. */
		border-radius: var(--site-answers-radius) var(--site-answers-radius) 0 0;
		/* Upward shadow: says "layer above the page", which is the whole
		   point of leaving the page visible. */
		box-shadow: 0 -8px 30px rgba(20, 30, 45, 0.22);
		transform-origin: bottom center;
		z-index: 100000;
	}

	/* The sheet no longer reaches the top of the screen, so it cannot cover
	   the admin bar and needs no offset for it. The header's notch padding
	   goes too, for the same reason — it is not against the top edge. */
	.site-answers-panel__head {
		padding-block-start: 14px;
	}

	.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%;
	}

	/* A THEME'S OWN FIXED BOTTOM BAR.
	 *
	 * Some themes pin a booking / add-to-cart bar along the bottom edge on
	 * phones, exactly where the launcher and the sheet live. widget.js
	 * measures how much of the bottom edge such a bar is actually occupying
	 * — from the bar's own box, never a number written down here — and
	 * publishes it as --site-answers-bar-clearance, adding this class only
	 * while a bar is really on screen. So when there is no bar these two
	 * rules do not apply at all and the positions above stand unchanged,
	 * which is also what happens the moment a bar is hidden again.
	 *
	 * Nothing in the plugin touches the bar itself, and the answer is not a
	 * bigger z-index: that would only decide which of the two is covered.
	 */

	/* The sheet rests directly ON the bar rather than overlapping it — flush
	   against its top edge, with no 16px gap, because a strip of the page
	   showing through underneath a bottom sheet reads as a rendering fault
	   rather than as breathing room. The composer therefore clears the bar
	   by the bar's full height.
	   This is the fallback path. On any browser with the VisualViewport API
	   the keyboard rule at the end of this file takes over `inset-block-end`
	   (it comes later with equal specificity, which is deliberate: the
	   keyboard has the final say on where the sheet's bottom is), and there
	   the very same reservation is made in widget.js instead — it publishes
	   the height the sheet may occupy rather than the whole visible height,
	   so the bottom lands in exactly the same place. */
	.site-answers-root--floating.site-answers-has-bar .site-answers-panel {
		inset-block-end: var(--site-answers-bar-clearance, 0px);
		/* Whatever the sheet gives up at the bottom it must not take back at
		   the top, or a short phone in landscape ends up with a sheet taller
		   than the screen. */
		max-block-size: calc(60dvh - var(--site-answers-bar-clearance, 0px));
	}
}

/* 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
 * anchored to `bottom: 0` keeps sitting where the bottom of the page is and
 * ends up behind 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 two custom properties here.
 *
 * The class is added only once the script has actually set the properties,
 * so these rules can never resolve to an empty value.
 *
 * What this does: pins the sheet's BOTTOM to the bottom of the visible area
 * instead of the layout viewport, and lets the visible area cap its height.
 * With no keyboard that is a no-op — the visible area is the whole screen,
 * so min() picks the same 60% as the rule above. With the keyboard up the
 * visible area is smaller than 60% of the screen, so the sheet shrinks to
 * exactly fit it: header pinned at its top, composer at its bottom, only
 * the message list gives up space. Nothing is transformed or repositioned
 * while the keyboard animates, which is what keeps it steady.
 *
 * min() is repeated per unit rather than held in a custom property on
 * purpose: an unsupported unit inside a custom property does NOT fall back
 * to the previous declaration (custom properties accept any token stream
 * and only fail later, at use), which would leave the height unset. Spelled
 * out per declaration, the usual vh -> svh -> dvh cascade works.
 *
 * The offset handles the other half of the same problem: Safari may scroll
 * the layout viewport out from under a fixed element, and adding the visual
 * viewport's own top puts the sheet 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 {
		inset-block-end: auto;
		/* The min-block-size floor from the rule above cannot be used here —
		   a fixed floor would push the composer back under the keyboard on a
		   short viewport. The same floor is expressed inside the min() below
		   instead: max(260px, 60dvh) is the height the sheet WANTS (60%, but
		   never less than 260px), and min( that, visible height ) is what it
		   can actually have. With no keyboard the visible height is the whole
		   screen, so the sheet gets its 60% (or the 260px floor in
		   landscape); with the keyboard up the visible height wins and the
		   sheet shrinks to exactly fit it. */
		min-block-size: 0;
		max-block-size: var(--site-answers-vv-height);
		block-size: min(max(260px, 60vh), var(--site-answers-vv-height));
		block-size: min(max(260px, 60svh), var(--site-answers-vv-height));
		block-size: min(max(260px, 60dvh), var(--site-answers-vv-height));
		inset-block-start: calc(var(--site-answers-vv-top, 0px) + var(--site-answers-vv-height) - min(max(260px, 60vh), var(--site-answers-vv-height)));
		inset-block-start: calc(var(--site-answers-vv-top, 0px) + var(--site-answers-vv-height) - min(max(260px, 60svh), var(--site-answers-vv-height)));
		inset-block-start: calc(var(--site-answers-vv-top, 0px) + var(--site-answers-vv-height) - min(max(260px, 60dvh), var(--site-answers-vv-height)));
	}
}

/* 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 earlier versions of this plugin, which opened the panel
   as a full-screen takeover and had to stop the page behind it scrolling.
   The panel is a half-height sheet now and the page behind stays scrollable
   on purpose, so nothing sets this any more — the rule is kept only so that
   widget.js can still clear the class (and this styling with it) on a page
   that was left locked by a previous version sitting in a browser or page
   cache. It will be dropped in a later release. */
.site-answers-body-locked {
	position: fixed;
	inset-block-start: var(--site-answers-scroll-lock, 0px);
	inset-inline: 0;
	inline-size: 100%;
	overflow: hidden;
}