/**
 * The chat widget.
 *
 * Loaded twice on purpose: once by WordPress in the page, and once inside the
 * shadow root. The page copy costs nothing after the first request — it is the
 * same URL, so the browser serves it from cache — and having it enqueued
 * normally means it is versioned, minifiable by a caching plugin, and visible to
 * anyone auditing what the site loads.
 *
 * Everything below is inside a shadow root in practice, so the selectors do not
 * need defensive prefixing. They keep the `acb-` prefix anyway, because the
 * light-DOM fallback for a browser without attachShadow uses the same file, and
 * there the selectors are all the isolation there is.
 */

/* ---------------------------------------------------------------------------
 * The boundary.
 *
 * `all: initial` is the load-bearing line in this file. Inherited properties do
 * cross into a shadow tree from the host, so without it a theme's
 * `body { font-size: 40px; letter-spacing: 4px }` reaches every word in the
 * widget. This resets every inherited value at the boundary.
 *
 * By specification `all` does not touch custom properties, so the palette set
 * inline on the host survives it. That is what makes this safe to do at all.
 * ------------------------------------------------------------------------- */
:host {
	all: initial;

	/* `all: initial` sets display to inline; the host has to be a block. */
	display: block;

	/* The defaults, used when the host has no inline palette — which happens
	   only if the settings are empty or the markup was hand-written. The Light
	   preset, kept in step with Animart_Chatbot_Palettes by the test suite. */
	--acb-primary: #2F3337;
	--acb-accent: #4A5057;
	--acb-background: #FFFFFF;
	--acb-surface: #F1F3F5;
	--acb-text: #1A1D21;
	--acb-muted: #5C636A;
	--acb-on-primary: #FFFFFF;
	--acb-on-accent: #FFFFFF;
	--acb-user: #2F3337;
	--acb-bot: #F1F3F5;
	--acb-radius: 3px;

	--acb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--acb-z: 99990;
	--acb-panel-width: 380px;
	--acb-panel-height: 560px;
	--acb-gap: 20px;
	--acb-offset-x: 20px;
	--acb-offset-y: 20px;
}

/* Hidden until the stylesheet inside the shadow root has loaded, so the widget
   never appears unstyled for a frame. The JS removes this. */
:host([hidden]) {
	display: none;
}

/* The light-DOM fallback: the same reset, applied to the container itself,
   for a browser with no attachShadow. It cannot stop a hostile `!important`
   the way the shadow boundary can, and that is the trade of the fallback. */
.animart-chatbot-root.acb-light {
	all: initial;
	display: block;
}

/* Every element inside starts from the same place rather than from whatever the
   theme decided. In the shadow root this is belt and braces; in the light-DOM
   fallback it is the belt. */
.acb *,
.acb *::before,
.acb *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: inherit;
	color: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	list-style: none;
	text-decoration: none;
	box-shadow: none;
	float: none;
	position: static;
	min-width: 0;
	max-width: none;
	width: auto;
	height: auto;
}

.acb {
	font-family: var(--acb-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--acb-text);
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
 * The launcher.
 * ------------------------------------------------------------------------- */
.acb-launcher {
	position: fixed;
	bottom: var(--acb-offset-y);
	z-index: var(--acb-z);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--acb-primary);
	color: var(--acb-on-primary);
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: transform 160ms ease, background-color 160ms ease;
}

.acb-launcher:hover {
	background: var(--acb-accent);
	color: var(--acb-on-accent);
	transform: scale(1.05);
}

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

.acb--bottom-right .acb-launcher {
	right: var(--acb-offset-x);
}

.acb--bottom-left .acb-launcher {
	left: var(--acb-offset-x);
}

.acb-launcher svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
	transition: opacity 140ms ease, transform 140ms ease;
}

/* Two icons stacked; which one shows is the only thing that changes. */
.acb-launcher .acb-icon-close,
.acb--open .acb-launcher .acb-icon-open {
	display: none;
}

.acb--open .acb-launcher .acb-icon-close {
	display: block;
}

.acb-launcher img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: var(--acb-radius);
}

/* ---------------------------------------------------------------------------
 * The panel.
 * ------------------------------------------------------------------------- */
.acb-panel {
	position: fixed;
	bottom: calc(var(--acb-offset-y) + 56px + 12px);
	z-index: var(--acb-z);
	display: flex;
	flex-direction: column;
	width: var(--acb-panel-width);
	max-width: calc(100vw - (var(--acb-offset-x) * 2));
	height: var(--acb-panel-height);

	/*
	 * dvh follows the visible viewport as browser chrome and the on-screen
	 * keyboard come and go; vh does not, which is why a 100vh panel ends up
	 * underneath the keyboard on iOS. The vh line is the fallback for browsers
	 * that do not know dvh and must come first.
	 *
	 * --acb-vh is set from window.visualViewport when that exists, which is the
	 * only thing that tracks the keyboard exactly. It wins where it is set.
	 */
	max-height: calc(100vh - (var(--acb-offset-y) * 2) - 68px);
	max-height: calc(100dvh - (var(--acb-offset-y) * 2) - 68px);
	max-height: calc(var(--acb-vh, 100dvh) - (var(--acb-offset-y) * 2) - 68px);

	background: var(--acb-background);
	border-radius: var(--acb-radius);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
	overflow: hidden;

	/*
	 * Closed is a state, not an absence. The panel stays in the layout so it can
	 * be transitioned; visibility and pointer-events keep it out of the way of
	 * the mouse and the tab order in between, and the `hidden` attribute is put
	 * back once the transition has finished so assistive technology does not see
	 * it at all.
	 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px) scale(0.98);
	transform-origin: bottom right;
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

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

.acb--open .acb-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}

/*
 * The panel follows the launcher.
 *
 * `position: fixed` with neither `left` nor `right` is not centred and not
 * anchored — the box keeps its static position, which put the panel against
 * the left edge whichever side the launcher was on. Only the transform
 * origin was ever set here, so the two agreed about where the panel grew
 * from and disagreed about where it was.
 */
.acb--bottom-right .acb-panel {
	right: var(--acb-offset-x);
}

.acb--bottom-left .acb-panel {
	left: var(--acb-offset-x);
	transform-origin: bottom left;
}

.acb-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--acb-surface);
}

.acb-header img {
	max-height: 28px;
	max-width: 140px;
	object-fit: contain;
}

.acb-title {
	font-weight: 600;
	flex: 1 1 auto;
}

.acb-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--acb-radius);
	color: var(--acb-muted);
	cursor: pointer;
}

.acb-close:hover {
	color: var(--acb-text);
	background: rgba(255, 255, 255, 0.08);
}

.acb-close:focus-visible {
	outline: 2px solid var(--acb-accent);
	outline-offset: 2px;
}

.acb-close svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.acb-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
}

.acb-footer {
	padding: 12px 16px;
	background: var(--acb-surface);
}

.acb-note {
	color: var(--acb-muted);
	font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * Motion.
 *
 * Someone who has asked their operating system for less movement has asked
 * every site, not just the ones that remembered.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.acb *,
	.acb *::before,
	.acb *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	/*
	 * The delay as well as the duration. The closed panel hides its visibility
	 * change behind the transition, so a delay left in place keeps the panel
	 * around after everything else has finished — and the transform is what the
	 * request was about anyway, so it goes entirely rather than becoming a very
	 * fast version of itself.
	 */
	.acb-panel,
	.acb--open .acb-panel {
		transition-delay: 0s !important;
		transform: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Small screens: the panel is the screen.
 * ------------------------------------------------------------------------- */
@media (max-width: 600px) {
	/* Listed three ways because the position anchors above are more specific
	   than a bare .acb-panel and would otherwise hold the panel off the edge. */
	.acb-panel,
	.acb--bottom-right .acb-panel,
	.acb--bottom-left .acb-panel {
		right: 0;
		left: 0;
		bottom: 0;
		top: 0;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		height: var(--acb-vh, 100dvh);
		max-height: none;
		border-radius: 0;
		transform: translateY(2%);
	}

	.acb--open .acb-panel {
		transform: translateY(0);
	}

	/* The launcher would otherwise sit on top of the full-screen panel. */
	.acb--open .acb-launcher {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Branding.
 * ------------------------------------------------------------------------- */
.acb-logo {
	max-height: 28px;
	max-width: 120px;
	object-fit: contain;
	flex: 0 0 auto;
}

.acb-logo[hidden] {
	display: none;
}

.acb-launcher-image {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: var(--acb-radius);
}

/*
 * The launcher, held back by a delay or a scroll trigger.
 *
 * `hidden` is an attribute, not a law: the UA stylesheet's `[hidden] { display:
 * none }` loses to ANY author rule that sets display, and `.acb-launcher` sets
 * `display: flex`. Without this the "hidden" launcher is out of the tab order
 * and out of the accessibility tree while remaining perfectly visible on
 * screen, which is the worst of both. Every other element in this file that
 * uses `hidden` already carries its own rule for exactly this reason; the
 * launcher is simply the first one that ever needed hiding.
 */
.acb-launcher[hidden] {
	display: none;
}

.acb-launcher-image[hidden],
.acb-launcher svg[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Preview mode, for the Appearance tab.
 *
 * The same markup, the same stylesheet and the same script as the real widget —
 * only unpinned from the corner of the screen and always open. A preview built
 * from a separate mock-up looks right on the day it is written and drifts from
 * then on.
 * ------------------------------------------------------------------------- */
.acb--preview {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 16px;
	padding: 20px;
}

.acb--preview .acb-launcher,
.acb--preview .acb-panel {
	position: relative;
	inset: auto;
	z-index: auto;
}

.acb--preview .acb-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	max-height: none;
	flex: 0 0 auto;
}

.acb--preview .acb-launcher {
	flex: 0 0 auto;
}

/* The preview is a picture; it must not react to the phone breakpoint the way
   the real widget does, or a narrow admin column turns it full-screen. */
@media (max-width: 600px) {
	.acb--preview .acb-panel {
		position: relative;
		height: var(--acb-panel-height);
		border-radius: var(--acb-radius);
		transform: none;
	}

	.acb--preview .acb-launcher {
		display: flex;
	}
}

/* ---------------------------------------------------------------------------
 * The conversation.
 * ------------------------------------------------------------------------- */
.acb-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	scroll-behavior: smooth;
}

.acb-greeting {
	margin: 0;
}

.acb-messages {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.acb-messages:focus-visible {
	outline: 2px solid var(--acb-accent);
	outline-offset: 4px;
}

.acb-message {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	max-width: 100%;
}

.acb-message--user {
	justify-content: flex-end;
}

.acb-text {
	padding: 10px 13px;
	border-radius: calc(var(--acb-radius) + 8px);
	max-width: 85%;
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

.acb-message--bot .acb-text {
	background: var(--acb-bot);
	color: var(--acb-text);
	border-top-left-radius: var(--acb-radius);
}

.acb-message--user .acb-text {
	background: var(--acb-user);
	color: var(--acb-on-primary);
	border-top-right-radius: var(--acb-radius);
}

.acb-avatar {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	object-fit: cover;
	flex: 0 0 auto;
}

/* Three dots, while the model is thinking. */
.acb-typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding: 2px 0;
}

.acb-typing i {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--acb-muted);
	animation: acb-blink 1.2s infinite ease-in-out;
}

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

@keyframes acb-blink {
	0%, 80%, 100% { opacity: 0.3; }
	40% { opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * Suggested questions.
 * ------------------------------------------------------------------------- */
.acb-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.acb-suggestions:empty {
	display: none;
}

.acb-chip {
	padding: 8px 12px;
	border: 1px solid var(--acb-muted);
	border-radius: 999px;
	color: var(--acb-text);
	font-size: 13px;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease;
}

.acb-chip:hover {
	border-color: var(--acb-primary);
	background: rgba(255, 255, 255, 0.06);
}

.acb-chip:focus-visible {
	outline: 2px solid var(--acb-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Composing.
 * ------------------------------------------------------------------------- */
.acb-footer {
	position: relative;
}

.acb-compose {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.acb-input {
	flex: 1 1 auto;
	resize: none;
	max-height: 120px;
	overflow-y: auto;
	padding: 10px 12px;
	border-radius: calc(var(--acb-radius) + 6px);
	background: var(--acb-background);
	color: var(--acb-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;

	/* 16px or more, or iOS Safari zooms the page the moment it is focused —
	   which on a full-screen panel looks like the layout breaking. */
	font-size: max(16px, 15px);
}

.acb-input::placeholder {
	color: var(--acb-muted);
	opacity: 1;
}

.acb-input:focus-visible {
	outline: 2px solid var(--acb-accent);
	outline-offset: 1px;
}

.acb-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.acb-send {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--acb-primary);
	color: var(--acb-on-primary);
	cursor: pointer;
	transition: background-color 140ms ease;
}

.acb-send:hover {
	background: var(--acb-accent);
	color: var(--acb-on-accent);
}

.acb-send:focus-visible {
	outline: 3px solid var(--acb-accent);
	outline-offset: 2px;
}

.acb-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.acb-send svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.acb-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--acb-radius);
	color: var(--acb-muted);
	cursor: pointer;
}

.acb-clear:hover {
	color: var(--acb-text);
	background: rgba(255, 255, 255, 0.08);
}

.acb-clear:focus-visible {
	outline: 2px solid var(--acb-accent);
	outline-offset: 2px;
}

.acb-clear svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* The "new message" affordance, shown only when the visitor has scrolled up. */
.acb-jump {
	position: absolute;
	top: -38px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--acb-primary);
	color: var(--acb-on-primary);
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.acb-jump[hidden] {
	display: none;
}

.acb-jump:focus-visible {
	outline: 3px solid var(--acb-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Citations.
 *
 * Built by the plugin from its own records — never from anything the model
 * wrote — which is what makes an invented or external link impossible here
 * rather than merely discouraged.
 * ------------------------------------------------------------------------- */
.acb-citations {
	margin: 10px 0 0;
	padding: 10px 0 0 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	list-style: decimal;
	font-size: 13px;
}

.acb-citations li {
	list-style: decimal;
	margin-bottom: 3px;
	color: var(--acb-muted);
}

.acb-citation {
	color: var(--acb-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.acb-citation:hover {
	color: var(--acb-text);
}

.acb-citation:focus-visible {
	outline: 2px solid var(--acb-accent);
	outline-offset: 2px;
}

/*
 * Inline citation markers.
 *
 * A reference, not a fact. At body size and semibold, [1] sat at the same
 * visual weight as the phone number beside it — two things competing for the
 * eye when only one of them is the answer. Findable when looked for, invisible
 * when reading.
 *
 * `--acb-muted` rather than an opacity: it is the token the palette already
 * exposes for de-emphasised text, so its contrast is a known quantity and the
 * contrast checker can reason about it. Fading a link with opacity puts it
 * somewhere nothing has measured.
 *
 * ## Not raised at all
 *
 * A marker sits on the baseline, beside the word, at the size of a small aside.
 * Raising it was tried twice and abandoned; this is the history, because the
 * second attempt looked correct and was not.
 *
 * `vertical-align: super` was first, and it is the wrong mechanism. It shifts
 * the inline box, and the SHIFTED box is what the line box has to grow to
 * contain — so any line holding a marker is taller than its neighbours, and a
 * paragraph with citations in it stutters. `line-height: 0` does not save it:
 * that zeroes the box's own height, and the superscript displacement is applied
 * on top of whatever is left.
 *
 * `position: relative` with a negative `top` replaced it, and as a rule it is
 * sound — relative offsets are applied after layout, so the line box never sees
 * them. What defeated it was one line in widget.js: the link was wrapped in a
 * `<sup>`, and the browser's own stylesheet puts `vertical-align: super` on
 * that. The rule below was measured on a bare link and passed; the widget built
 * a wrapper the measurement never saw, and the stutter it was meant to end was
 * still there in every shipped answer. **The wrapper is gone. Do not put it
 * back** — an `<a>` is the whole marker, and `all: initial` is on `:host` only,
 * so any element added around it arrives wearing its UA defaults.
 *
 * `vertical-align: baseline` is stated rather than left to the default, because
 * it is the thing that must not come back, and `line-height: 0` stays so the
 * marker's own line-height can never set a floor under the line it sits in.
 *
 * Removing the wrapper makes the marker bigger even at an unchanged
 * `font-size`: `<sup>` also carries a UA `font-size: smaller`, so 0.7em was
 * rendering at roughly 0.58em of the paragraph. Baseline text at that size
 * reads as a smudge rather than a reference, so the declared size comes down to
 * meet it — 0.75em, which lands close to where the eye was used to seeing it.
 *
 * ## The tap target
 *
 * Vertical padding on an INLINE element grows the hit area without affecting the
 * line box either, so the text can shrink to three-quarters and still be thumb-
 * sized — about 25px tall at a normal body size, past the 24px floor. It is 0.7em
 * rather than more because the hit area is invisible and an over-generous one
 * reaches into the line above and quietly steals its clicks.
 */
.acb-marker {
	color: var(--acb-muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.75em;
	vertical-align: baseline;
	line-height: 0;
	padding: 0.7em 0.15em;
	margin: 0;
}

.acb-marker::before { content: "["; }
.acb-marker::after { content: "]"; }

/* Looked for, and therefore no longer to be hidden from. */
.acb-marker:hover,
.acb-marker:focus-visible {
	color: var(--acb-primary);
	text-decoration: underline;
}

.acb-marker:focus-visible {
	outline: 2px solid var(--acb-accent);
	outline-offset: 1px;
}

.acb-text p + p,
.acb-text p + .acb-list,
.acb-text .acb-list + p {
	margin-top: 8px;
}

.acb-list {
	padding-left: 18px;
}

.acb-list li {
	list-style: disc;
	margin-bottom: 2px;
}

ol.acb-list li {
	list-style: decimal;
}

.acb-text code {
	font-family: Consolas, Monaco, monospace;
	font-size: 0.92em;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	padding: 1px 4px;
}

.acb-text strong { font-weight: 700; }
.acb-text em { font-style: italic; }

/*
 * A retry the visitor has been asked to wait a moment before pressing. It stays
 * visible and stays readable — hiding it would look like the failure had been
 * withdrawn — and only stops being pressable.
 */
.acb-chip[disabled] {
	cursor: default;
	opacity: 0.5;
}

/* -----------------------------------------------------------------------
 * Embedded in a page rather than floating over it.
 *
 * The same panel, taken out of `position: fixed` and put back into the flow.
 * Nothing else changes — one implementation of the chat, not two — so a fix
 * to the message list or the composer reaches both automatically.
 * ----------------------------------------------------------------------- */

.acb--inline {
	display: block;
	width: 100%;
}

.acb--inline .acb-launcher {
	display: none;
}

.acb--inline .acb-panel {
	position: static;
	width: 100%;
	max-width: none;

	/* The shortcode's own height wins; otherwise the configured panel height. */
	height: var(--acb-inline-height, var(--acb-panel-height));
	max-height: none;

	/* No entrance animation: it is not arriving, it is already part of the
	   page, and a panel that fades in on scroll reads as a glitch. */
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: none;
}

@media (max-width: 600px) {
	/*
	 * The full-screen rules are for a bubble that has taken over the phone.
	 * An embedded chat is a section of a page and must stay one, or it breaks
	 * out of the article it was placed in.
	 */
	.acb--inline .acb-panel {
		position: static;
		width: 100%;
		height: var(--acb-inline-height, var(--acb-panel-height));
		border-radius: var(--acb-radius);
		inset: auto;
	}
}

/* -----------------------------------------------------------------------
 * The button an action rule offers.
 *
 * Deliberately unlike a citation: a citation is a reference, this is something
 * to do next. It sits under the answer at full width so it reads as the end of
 * the reply rather than as one more link inside it.
 * ----------------------------------------------------------------------- */

.acb-action {
	display: inline-block;
	margin: 10px 0 2px;
	padding: 9px 16px;
	background: var(--acb-primary);
	color: var(--acb-on-primary);
	border-radius: var(--acb-radius);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	line-height: 1.3;
}

.acb-action:hover {
	background: var(--acb-accent);
	color: var(--acb-on-accent);
}

.acb-action:focus-visible {
	outline: 2px solid var(--acb-text);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Answer feedback.
 *
 * Sized and coloured to be findable and not to compete: muted until hovered,
 * primary once pressed. It sits below the action button, because the action is
 * what the site wants the visitor to do next and this is housekeeping.
 * ----------------------------------------------------------------------- */

.acb-feedback {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 8px 0 0;
}

.acb-vote {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 28px of button around a 15px glyph. Small enough to stay quiet, and
	   still a target a thumb can find. */
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--acb-radius);
	background: transparent;
	color: var(--acb-muted);
	cursor: pointer;
	transition: color 140ms ease, background-color 140ms ease;
}

.acb-vote svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.acb-vote:hover {
	color: var(--acb-text);
	background: rgba(255, 255, 255, 0.08);
}

.acb-vote:focus-visible {
	outline: 2px solid var(--acb-accent);
	outline-offset: 1px;
}

.acb-vote[aria-pressed="true"] {
	color: var(--acb-primary);
}

/*
 * The acknowledgement. Announced to a screen reader and taking no space, so
 * voting never moves the answer somebody is still reading — a thank-you that
 * reflows the message list is worse than no thank-you at all.
 */
.acb-said {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}