/**
 * Ask SrisailamGuide Anna — public assistant.
 *
 * Mobile first, because most devotees arrive on a phone, often on a slow
 * connection and often standing in a queue. Everything is scoped under
 * .srai-public so nothing here can reach the rest of the theme, and nothing in
 * the theme is assumed.
 *
 * NO EXTERNAL FONT IS LOADED. The stack names Noto Sans Telugu without
 * fetching it — Android and iOS both ship Telugu system fonts, so Telugu
 * renders correctly for essentially every devotee while the page stays as
 * light as it was. Same stack srisailam-live-availability already uses, so the
 * site has one convention rather than two.
 *
 * The one rule worth naming twice: inputs are 16px and never smaller. iOS
 * zooms the viewport when a field with a smaller font is focused, which on
 * this layout throws the answer off the screen exactly as it arrives.
 */

.srai-public {
	/* Warm temple palette: cream paper, wine for identity, orange for the
	   one action that matters. */
	--srai-page: #FBF7F0;
	--srai-card: #FDFAF5;
	--srai-line: #EADFD0;
	--srai-line-soft: #F2E9DC;

	--srai-brand: #7A1C2E;
	--srai-brand-dark: #5F1423;

	--srai-ink: #241B1E;
	--srai-body: #6E5F6B;

	--srai-accent: #E8641A;
	--srai-accent-dark: #C9520F;

	--srai-bubble: #F3EBDF;
	--srai-pill: #EFE6DA;
	--srai-ok: #2F7D6B;
	--srai-fail: #8A2424;

	max-width: 46rem;
	margin: 0 auto;
	color: var(--srai-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Telugu", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}

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

.srai-public-inner {
	background: var(--srai-card);
	border: 1px solid var(--srai-line);
	border-radius: 1rem;
	overflow: hidden;
}

/* Visually hidden, still read aloud. */
.srai-public .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------ the one rule that reaches out */

/*
 * Hide the site's floating WhatsApp button on the assistant page.
 *
 * The ONLY rule in this file that touches an element outside .srai-public, and
 * it is still scoped: .srai-assistant-page is added by this plugin's body_class
 * filter on exactly the pages that carry the shortcode, so this cannot apply
 * anywhere else on the site.
 *
 * Why hide it: on every other page "Ask Questions (Free)" is the right
 * invitation. Here it sits a few centimetres from Anna, offering the same thing
 * in a way that quietly leads a devotee away from the assistant they have just
 * opened — and it floats over the composer on a small screen.
 *
 * !important is deliberate rather than lazy. The button is not ours, and
 * srisailam-live-availability's call sheet sets `el.style.display` on it
 * directly; an inline style beats an ordinary rule, so without this the button
 * would reappear the moment that script ran.
 */
.srai-assistant-page .floating-whatsapp {
	display: none !important;
}

/* -------------------------------------------------------------- header */

.srai-bar {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--srai-line-soft);
}

.srai-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	flex: 0 0 auto;
	background: var(--srai-brand);
	border-radius: .5rem;
	color: #fff;
	font-size: 1rem;
	line-height: 1;
}

.srai-brand {
	margin: 0;
	color: var(--srai-brand);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- body */

.srai-body {
	padding: 1.1rem .9rem 1rem;
}

.srai-heading {
	margin: 0 0 .5rem;
	color: var(--srai-ink);
	font-size: 1.65rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.srai-intro {
	margin: 0 0 1.1rem;
	color: var(--srai-body);
	font-size: 1rem;
	line-height: 1.5;
}

.srai-disclaimer {
	margin: .9rem 0 0;
	color: var(--srai-body);
	font-size: .78rem;
	line-height: 1.45;
}

.srai-noscript {
	margin: .8rem 0 0;
	padding: .75rem .9rem;
	background: var(--srai-bubble);
	border: 1px solid var(--srai-line);
	border-radius: .6rem;
}

/* ------------------------------------------------- language + demo */

/* Answers a question devotees do not ask out loud — "can I write this in
   Telugu?" — in the couple of seconds before they decide the page is not for
   them. The pills are real buttons so the choice is keyboard reachable. */

.srai-langs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 .7rem;
}

.srai-lang {
	padding: .38rem .95rem;
	border: 0;
	border-radius: 1.25rem;
	background: var(--srai-pill);
	color: var(--srai-body);
	font-size: .84rem;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	min-height: 2rem;
}

.srai-lang:hover,
.srai-lang:focus-visible {
	background: #E6DACB;
	color: var(--srai-brand);
}

.srai-lang.is-on {
	background: var(--srai-brand);
	color: #fff;
}

.srai-demo {
	margin: 0 0 1.1rem;
	padding: 0 0 0 .85rem;
	border-left: 3px solid var(--srai-accent);
}

.srai-demo-line {
	margin: 0;
	color: var(--srai-ink);
	font-size: 1.12rem;
	line-height: 1.45;
}

.srai-demo-line[hidden] {
	display: none;
}

/* With motion reduced nothing rotates on its own, so the three sit together
   and need separating instead. */
@media (prefers-reduced-motion: reduce) {
	.srai-demo-line + .srai-demo-line {
		margin-top: .25rem;
	}
}

.srai-demo-note {
	margin: .35rem 0 0;
	color: var(--srai-body);
	font-size: .8rem;
}

/* ----------------------------------------------------------- composer */

/* The one action that matters, and the only orange on the page. */

.srai-composer[hidden] {
	display: none;
}

.srai-composer-box {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .5rem .5rem .95rem;
	background: #fff;
	border: 1px solid var(--srai-line);
	border-radius: 1.5rem;
}

.srai-composer-box:focus-within {
	border-color: var(--srai-accent);
	box-shadow: 0 0 0 3px rgba(232, 100, 26, .15);
}

/*
 * THE BOX INVITES, UNTIL IT DOES NOT NEED TO.
 *
 * A quiet rounded rectangle on a cream card does not read as "type here" to
 * somebody who has never used a chat interface, and many devotees arriving at
 * this page never have. So the border breathes between grey and the accent
 * until it has been used — the one thing on the page asking for attention, and
 * it stops asking the moment the devotee touches it or sends anything.
 *
 * Under reduced motion it does not pulse. It simply wears the accent border
 * from the start, which teaches the same thing without moving.
 */
@media (prefers-reduced-motion: no-preference) {
	.srai-composer-box.is-inviting {
		animation: srai-invite 1.5s ease-in-out infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.srai-composer-box.is-inviting {
		border-color: var(--srai-accent);
	}
}

@keyframes srai-invite {
	0%, 100% {
		border-color: var(--srai-line);
		box-shadow: 0 0 0 0 rgba(232, 100, 26, 0);
	}

	50% {
		border-color: var(--srai-accent);
		box-shadow: 0 0 0 5px rgba(232, 100, 26, .14);
	}
}

.srai-question {
	flex: 1 1 auto;
	width: 100%;
	padding: .5rem 0;
	border: 0;
	background: transparent;
	color: var(--srai-ink);
	/* 16px. Anything smaller and iOS zooms on focus. */
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.5;
	resize: none;
	overflow-y: auto;
	min-height: 2.4rem;
	max-height: 200px;
}

.srai-question:focus {
	outline: none;
}

.srai-question::placeholder {
	color: #A8968F;
}

.srai-send {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--srai-accent);
	color: #fff;
	font-size: 1.1rem;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	/* 44px, so it can be hit with a thumb. */
	min-height: 2.75rem;
}

.srai-send:hover:not(:disabled),
.srai-send:focus-visible:not(:disabled) {
	background: var(--srai-accent-dark);
}

.srai-send:disabled {
	background: #E3C6B2;
	cursor: default;
}

.srai-composer-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .45rem;
	padding: 0 .3rem;
}

.srai-hint,
.srai-count {
	color: var(--srai-body);
	font-size: .74rem;
}

.srai-count.is-over {
	color: var(--srai-fail);
	font-weight: 700;
}

/* Once a question has been asked, the teaching is done and steps aside. */
.srai-public-inner.is-conversation .srai-heading,
.srai-public-inner.is-conversation .srai-intro,
.srai-public-inner.is-conversation .srai-langs,
.srai-public-inner.is-conversation .srai-demo {
	display: none;
}

/* ------------------------------------------------- the conversation panel */

/*
 * IN CONVERSATION, THE CARD BECOMES A PANEL.
 *
 * Before this, the card grew with the conversation and the composer grew away
 * with it — three questions in, the box a devotee needs is somewhere below the
 * fold, and asking a fourth means scrolling down past everything already said.
 * That is exactly backwards: the answers are the history and the box is the
 * live thing.
 *
 * So the card takes the screen below the site header, the exchange scrolls
 * inside it, and the composer never moves. The height comes from --srai-panel,
 * measured in JavaScript, because the header above belongs to the theme and its
 * height is not knowable from here. The fallback matters: if that measurement
 * never runs, 70vh is still a usable panel rather than a collapsed one.
 *
 * min-height: 0 on the flex children is the load-bearing line. Without it a
 * flex item refuses to shrink below its content, the thread never becomes
 * scrollable, and the panel simply grows again — the bug this whole block
 * exists to fix, silently reintroduced.
 */
.srai-public-inner.is-conversation {
	display: flex;
	flex-direction: column;

	/*
	 * Sticky, and sized against the viewport rather than the document.
	 *
	 * This is the Claude/ChatGPT arrangement and it needs both halves. Sticky
	 * pins the panel to the top of the screen once it is reached, so the site
	 * header scrolls away and the conversation takes the window. --srai-top is
	 * the panel's CURRENT distance from the top of the viewport, remeasured on
	 * scroll, so the height is always exactly the space left below it: no dead
	 * band under the composer before the header has gone, no overflow after.
	 *
	 * If a theme ancestor has overflow set, sticky quietly does nothing and
	 * this degrades to a fixed-height panel in normal flow — still usable.
	 */
	position: sticky;
	top: 0;
	height: calc(100dvh - var(--srai-top, 4rem));
	max-height: 100dvh;
}

.srai-public-inner.is-conversation .srai-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.srai-public-inner.is-conversation .srai-thread {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	/* Momentum scrolling on iOS, and a scroll that stops at this container
	   rather than dragging the whole page once it reaches the end. */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	margin: 0 -.25rem 1rem;
	padding: 0 .25rem;
}

/* The composer and the disclaimer hold their size no matter how long the
   conversation gets. */
.srai-public-inner.is-conversation .srai-composer,
.srai-public-inner.is-conversation .srai-disclaimer,
.srai-public-inner.is-conversation .srai-notices {
	flex: 0 0 auto;
}

.srai-public-inner.is-conversation .srai-disclaimer {
	margin-top: .6rem;
	padding-top: .5rem;
}

/* ------------------------------------------------------------- thread */

.srai-thread:empty {
	display: none;
}

.srai-thread {
	margin: 0 0 1rem;
}

.srai-turn {
	margin: 0 0 1.4rem;
}

.srai-who {
	display: block;
	margin-bottom: .3rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* The devotee's own words, right-aligned in wine. */
.srai-q {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.srai-q .srai-who {
	color: var(--srai-body);
}

.srai-q .srai-text {
	max-width: 90%;
	padding: .7rem .95rem;
	background: var(--srai-brand);
	border-radius: 1rem 1rem .25rem 1rem;
	color: #fff;
}

/* Anna's reply, left-aligned on cream. */
.srai-a {
	margin-top: 1rem;
}

.srai-a .srai-who {
	color: var(--srai-brand);
}

.srai-a .srai-text {
	padding: .85rem .95rem;
	background: var(--srai-bubble);
	border-radius: .25rem 1rem 1rem 1rem;
}

.srai-a.is-pending .srai-text {
	color: var(--srai-body);
	font-style: italic;
}

/*
 * THE ANSWER ARRIVING.
 *
 * Not decoration. A devotee asks, looks away, and the only thing that changes
 * is one line of italic grey turning into a paragraph — on a phone at arm's
 * length, in a queue, that is genuinely easy to miss. This is the moment the
 * page has to say "it is here" without saying anything.
 *
 * Two signals, both brief: the bubble rises a few pixels as it fades in, and
 * its edge warms to the accent colour and settles back. Half a second, once,
 * and then the page is still again — anything longer becomes something to wait
 * through rather than something to notice.
 *
 * Under prefers-reduced-motion NONE of this runs. The aria-live region already
 * announces the answer, so nothing is lost by staying still.
 */
@media (prefers-reduced-motion: no-preference) {
	.srai-a.is-pending .srai-text {
		animation: srai-breathe 1.4s ease-in-out infinite;
	}

	.srai-a.is-new {
		animation: srai-arrive .45s ease-out 1, srai-settle 1.1s ease-out 1;
	}
}

/* While waiting: a slow pulse, so the page reads as working rather than
   stuck. Opacity only — nothing moves, nothing reflows. */
@keyframes srai-breathe {
	0%, 100% { opacity: .55; }
	50%      { opacity: 1; }
}

@keyframes srai-arrive {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* The edge warms, then returns. Colour only, so it cannot shift the layout
   under a thumb that is already reaching for the screen. */
@keyframes srai-settle {
	0%   { border-color: var(--srai-accent); }
	35%  { border-color: var(--srai-accent); }
	100% { border-color: #f0e2d2; }
}

.srai-a.is-failed .srai-text {
	background: #FBF0F0;
	color: var(--srai-fail);
}

.srai-text {
	margin: 0;
	/* The question, "Thinking…", and a failure message are all plain text with
	   real newlines in them, and pre-wrap is what honours those newlines. A
	   rendered answer turns this off — see .srai-md below — because there the
	   line breaks are real elements and pre-wrap would double every gap. */
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

/*
 * A RENDERED ANSWER.
 *
 * render.js adds .srai-md once markdown has been parsed and sanitised, so
 * every rule here applies only to output that came through that path. A
 * fallback answer keeps its plain-text styling above and none of this.
 *
 * The bubble itself is untouched: padding, background and the lopsided radius
 * still come from .srai-a .srai-text. What follows is only the inside.
 */
.srai-text.srai-md {
	white-space: normal;
}

/* The bubble supplies the padding, so the first and last blocks must not add
   their own margins on top of it. */
.srai-md > :first-child {
	margin-top: 0;
}

.srai-md > :last-child {
	margin-bottom: 0;
}

.srai-md p {
	margin: 0 0 .7rem;
}

/*
 * Headings, kept close to body size.
 *
 * The persona ends nearly every reply with "### You can also ask:", so an h3
 * appears in almost every answer. At a browser's default h3 size that heading
 * would shout louder than the answer above it — inside a chat bubble it needs
 * to read as a label, not a banner.
 */
.srai-md h1,
.srai-md h2,
.srai-md h3,
.srai-md h4,
.srai-md h5,
.srai-md h6 {
	margin: 1.1rem 0 .45rem;
	color: var(--srai-brand);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.srai-md ul,
.srai-md ol {
	margin: 0 0 .7rem;
	/* Indent enough that the marker sits inside the bubble rather than over
	   its left edge. */
	padding-left: 1.35rem;
}

.srai-md li {
	margin: 0 0 .3rem;
}

.srai-md li:last-child {
	margin-bottom: 0;
}

/*
 * Links have to look like links.
 *
 * Colour alone would fail anyone who cannot separate wine from near-black, so
 * the underline is not decoration and is not removed on hover. `anywhere` is
 * what stops one long address pushing the bubble wider than a 320px screen.
 */
.srai-md a {
	color: var(--srai-brand);
	text-decoration: underline;
	text-underline-offset: .15em;
	overflow-wrap: anywhere;
}

.srai-md a:hover,
.srai-md a:focus-visible {
	color: var(--srai-accent-dark);
}

.srai-md blockquote {
	margin: 0 0 .7rem;
	padding-left: .75rem;
	border-left: 3px solid var(--srai-line);
	color: var(--srai-body);
}

.srai-md code {
	padding: .1rem .3rem;
	background: var(--srai-pill);
	border-radius: .25rem;
	font-size: .9em;
}

.srai-md pre {
	margin: 0 0 .7rem;
	padding: .6rem .7rem;
	background: var(--srai-pill);
	border-radius: .5rem;
	overflow-x: auto;
}

.srai-md pre code {
	padding: 0;
	background: none;
}

.srai-md hr {
	margin: .9rem 0;
	border: 0;
	border-top: 1px solid var(--srai-line);
}

/*
 * A table scrolls itself rather than the page.
 *
 * display:block is what makes overflow-x apply to a table element at all.
 * Without it a four-column table sets the width of the whole panel and a
 * devotee on a phone is scrolling the entire assistant sideways to read one
 * cell.
 */
.srai-md table {
	display: block;
	width: 100%;
	margin: 0 0 .7rem;
	border-collapse: collapse;
	overflow-x: auto;
	font-size: .92em;
}

.srai-md th,
.srai-md td {
	padding: .35rem .5rem;
	border: 1px solid var(--srai-line);
	text-align: left;
}

.srai-md th {
	background: var(--srai-pill);
	font-weight: 700;
}

/*
 * MAP LINKS, under the answer that mentioned them.
 *
 * Chips rather than a list: they are actions, not reading, and a devotee
 * scanning an answer for "where is it" should find them without reading the
 * answer again. Wrapped, because a question about satrams can name six.
 *
 * The pin is the only label. Anna answers in four languages and these carry no
 * translated word, so nothing here needs a string that could arrive in the
 * wrong one.
 */
.srai-places {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	/* Sits inside the rendered answer now, above the closing question list, so
	   it needs air on both sides rather than just above. */
	margin: .8rem 0;
}

/*
 * Two classes deep on purpose.
 *
 * These chips live inside .srai-md, where `.srai-md a` gives every link the
 * wine underline that makes body links obvious. A chip is a button, not a
 * phrase in a sentence, and that underline through a bordered pill looks like
 * a mistake. Two classes outrank one class and one element, so this wins
 * without an !important.
 */
.srai-places .srai-place {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	max-width: 100%;
	padding: .4rem .7rem;
	border: 1px solid var(--srai-line);
	border-radius: 1.25rem;
	background: #fff;
	color: var(--srai-brand);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	/* 32px floor: small by design next to the send control, but never below
	   the size at which a control is genuinely hard to hit. */
	min-height: 2rem;
}

.srai-places .srai-place:hover,
.srai-places .srai-place:focus-visible {
	border-color: var(--srai-accent);
	color: var(--srai-accent-dark);
	text-decoration: none;
}

.srai-place-pin {
	flex: none;
	font-size: .9em;
}

/* A long satram name must wrap inside its chip rather than widen the panel. */
.srai-place-name {
	overflow-wrap: anywhere;
}

/*
 * "Google Maps", quieter than the name.
 *
 * The place is what a devotee is looking for; this only says where the tap
 * goes. Separated by a rule rather than a dot so it reads as a second field
 * and not as part of the name.
 */
.srai-place-map {
	flex: none;
	padding-left: .45rem;
	border-left: 1px solid var(--srai-line);
	color: var(--srai-body);
	font-size: .92em;
	font-weight: 500;
}

.srai-places .srai-place:hover .srai-place-map,
.srai-places .srai-place:focus-visible .srai-place-map {
	border-left-color: var(--srai-accent);
}

.srai-retry {
	margin-top: .6rem;
	padding: .45rem 1rem;
	border: 1px solid var(--srai-line);
	border-radius: 1.25rem;
	background: #fff;
	color: var(--srai-ink);
	font-size: .85rem;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	min-height: 2.5rem;
}

.srai-retry:hover:not(:disabled),
.srai-retry:focus-visible:not(:disabled) {
	border-color: var(--srai-accent);
	color: var(--srai-accent);
}

/* The nudge that a conversation can continue. */
.srai-followup {
	margin: .9rem 0 0;
	color: var(--srai-brand);
	font-size: .9rem;
	line-height: 1.5;
}

/* ------------------------------------------------------------ notices */

.srai-notice {
	margin: 0 0 .8rem;
	padding: .6rem .8rem;
	border-radius: .6rem;
	font-size: .86rem;
}

.srai-notice-quiet {
	background: var(--srai-bubble);
	border: 1px solid var(--srai-line);
	color: var(--srai-body);
}

.srai-notice-warn {
	background: #FCF6E5;
	border: 1px solid #EFE2BC;
	color: #8A6D1F;
}

/* ----------------------------------------------------------- feedback */

.srai-fb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	margin-top: .75rem;
}

.srai-fb-ask {
	color: var(--srai-body);
	font-size: .82rem;
}

.srai-fb-btn {
	padding: .35rem .8rem;
	border: 1px solid var(--srai-line);
	border-radius: 1.25rem;
	background: #fff;
	color: var(--srai-ink);
	font-size: .9rem;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	/* These sit close together and a mis-tap records the wrong opinion,
	   which is worse than no opinion. */
	min-height: 2.25rem;
}

.srai-fb-btn:hover,
.srai-fb-btn:focus-visible {
	border-color: var(--srai-accent);
	background: #FFF6EF;
}

.srai-fb-btn.is-yes {
	background: #EDF6EE;
	border-color: #CFE4D2;
}

.srai-fb-btn.is-no {
	background: #FBF1EE;
	border-color: #EFD8D0;
}

.srai-fb.is-done .srai-fb-ask {
	color: var(--srai-ok);
	font-weight: 600;
}

.srai-fb.is-failed .srai-fb-ask {
	color: var(--srai-fail);
}

/* --------------------------------------------------------- wider view */

@media (min-width: 22.5rem) {
	.srai-body {
		padding: 1.3rem 1.15rem 1.15rem;
	}

	.srai-bar {
		padding: .8rem 1.15rem;
	}
}

@media (min-width: 40rem) {
	.srai-body {
		padding: 1.9rem 1.9rem 1.6rem;
	}

	.srai-bar {
		padding: .9rem 1.9rem;
	}

	.srai-heading {
		font-size: 2.15rem;
	}

	.srai-intro {
		font-size: 1.05rem;
	}

	.srai-q .srai-text {
		max-width: 80%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.srai-lang,
	.srai-send,
	.srai-fb-btn {
		transition: background-color .18s ease, border-color .18s ease, color .18s ease;
	}
}