/**
 * The full-page chat skin.
 *
 * LOADED ON THE FULL-PAGE TEMPLATE AND NOWHERE ELSE, which is the whole design
 * of this file. The embedded [srisailam_ai] assistant keeps the cream card it
 * has today, untouched, because SRAI_Public_Shortcode::enqueue() only reaches
 * for this stylesheet on a page whose template is the assistant's. Nothing here
 * can regress a page of prose with the shortcode in it.
 *
 * Every rule is therefore an OVERRIDE of public.css, and the handle is declared
 * as depending on it so it can never be printed first.
 *
 * Scoped twice over: under body.srai-full-page (the template's class) and then
 * inside .srai-public (the assistant's own container), so a rule here cannot
 * escape onto the rest of the site even on this page.
 *
 * Palette and geometry come from the approved design, not from taste. The
 * values are lifted from it: green #0A5D52, the devotee's own bubbles in
 * #D7F2C8, Anna's in white on a warm light ground, and saffron kept for the
 * one control that sends.
 *
 * TWO RULES FROM public.css SURVIVE UNCHANGED AND MUST NOT BE OVERRIDDEN HERE:
 * the composer's 16px text, because anything smaller makes iOS zoom the
 * viewport exactly as an answer lands; and the 44px floor on the send control.
 */

/* ------------------------------------------------------------ the page */

/*
 * THE PAGE IS LOCKED TO ONE VIEWPORT, MEASURED FROM THE VIEWPORT ITSELF.
 *
 * --srai-app-height is published by public.js from window.visualViewport, which
 * reports the region actually visible with the on-screen keyboard excluded.
 * 100dvh is the fallback and is not good enough on its own: on Android Chrome
 * the keyboard slides OVER the page without resizing it, so a column sized to
 * the viewport keeps its full height while its bottom third — the composer the
 * devotee has just tapped — sits behind the keys.
 *
 * The overscroll rule stops the rubber-band bounce dragging the whole app down
 * when a devotee flicks past the end of the conversation on iOS.
 *
 * Sized this way rather than by a chain of height:100% down from <html>, and that
 * is a correctness decision, not a preference. A percentage height is only
 * meaningful if EVERY ancestor already has a resolved height, so one ancestor
 * left at auto — a theme wrapper, an older copy of the template, a plugin that
 * wraps the body — collapses the whole column to content height. The visible
 * result is a composer floating in the middle of the screen with dead space
 * beneath it, and a thread that never becomes scrollable because nothing ever
 * constrained it. dvh asks the viewport directly and cannot be broken that way.
 *
 * dvh and not vh: on a phone vh is the tallest the viewport ever gets, so with
 * the browser's own chrome on screen a 100vh column runs under it and takes the
 * composer with it.
 *
 * html is locked too, and with :has() so it needs no class of its own —
 * overflow:hidden on <body> alone leaves <html> scrollable, which is how a page
 * ends up with a scrollbar that moves nothing.
 */
html:has(> body.srai-full-page),
html.srai-chat-html {
	height: 100%;
	overflow: hidden;
}

body.srai-full-page {
	height: var(--srai-app-height, 100dvh);
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
	background: #F2EEE7;
}

.srai-full-page .srai-page {
	display: flex;
	flex-direction: column;
	height: var(--srai-app-height, 100dvh);
	min-height: 0;
	overflow: hidden;
}

/*
 * The admin bar is 32px of chrome WordPress adds above everything by putting a
 * margin on <html>. The viewport does not shrink to match, so a full-height
 * column below it is 32px too tall and the composer drops out of sight. Only
 * the logged-in owner ever sees this — while testing, which is exactly when it
 * is most confusing. 46px is the bar's height on small screens.
 */
body.admin-bar.srai-full-page,
.srai-full-page.admin-bar .srai-page {
	height: calc(var(--srai-app-height, 100dvh) - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar.srai-full-page,
	.srai-full-page.admin-bar .srai-page {
		height: calc(var(--srai-app-height, 100dvh) - 46px);
	}
}

/*
 * The floating language switcher, hidden here only.
 *
 * GTranslate floats a control over the bottom corner of every page. On this
 * layout it lands on top of the composer — the one control a devotee needs —
 * and there is no page scroll to move it out of the way.
 *
 * Scoped to .srai-full-page, so like the floating-WhatsApp rule in public.css
 * this cannot apply anywhere but a page using the assistant's own template.
 * Several selectors because the plugin has used different wrappers across
 * versions and it is not installed on this project's local copy to check
 * against; hiding a wrapper that does not exist costs nothing.
 *
 * !important is deliberate: these are positioned inline by the plugin's own
 * script, and an inline style beats an ordinary rule.
 */
.srai-full-page .gtranslate_wrapper,
.srai-full-page #gtranslate_wrapper,
.srai-full-page .gt_float_switcher,
.srai-full-page #gt_float_wrapper,
.srai-full-page .gtranslate_float_switcher {
	display: none !important;
}

/*
 * NO BANNER RULE AND NO SITE-HEADER RULE HERE.
 *
 * The template prints neither any more — the independent-platform banner was
 * arriving twice (something on this site already prints it on wp_body_open),
 * and the site header only repeated the logo and name that the chat's own
 * header carries directly below it. See the comment in
 * templates/page-assistant.php, which also records what to do if that inherited
 * banner ever disappears.
 *
 * The banner that IS on the page comes from that other source and carries its
 * own styling, so nothing here should try to restyle it: a rule written for
 * markup this plugin does not own is a rule that breaks silently when the other
 * side changes.
 */

/*
 * min-height: 0 is the load-bearing line in this whole file.
 *
 * A flex item refuses to shrink below its content by default, so without it
 * this column grows to fit the entire conversation, the thread never becomes
 * the thing that scrolls, and the locked page simply clips the composer out of
 * sight. It has to be repeated down every step of the chain — here, on
 * .srai-public, on .srai-public-inner, on .srai-body — because each one is both
 * a flex item and a flex container.
 *
 * box-sizing, because these wrappers sit OUTSIDE .srai-public and so are not
 * covered by the border-box rule public.css scopes to it. With content-box the
 * padding added at tablet width is extra height on top of 100%, and the page
 * overflows by exactly that padding.
 */
.srai-full-page .srai-page-main {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	justify-content: center;
}

.srai-full-page .srai-page,
.srai-full-page .srai-page-main {
	box-sizing: border-box;
}

/* --------------------------------------------------------- the container */

/*
 * max-width is dropped on a phone and restored at desktop width.
 *
 * The embedded assistant is 46rem wide because it sits in a column of prose.
 * This one IS the page, so on a phone it runs to the edges like a messaging
 * app, and on a wide screen it becomes a centred panel again rather than a
 * chat stretched across 1400px.
 */
.srai-full-page .srai-public {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	width: 100%;
	min-height: 0;
}

/*
 * The card loses its card-ness.
 *
 * public.css gives .srai-public-inner a border and a 1rem radius, which is
 * right for something embedded in a page and wrong for something that IS the
 * page. This also overrides the is-conversation sticky/height block wholesale:
 * the panel here is a flex child of a 100dvh column, so it needs no measured
 * height and --srai-top does not apply.
 */
.srai-full-page .srai-public-inner,
.srai-full-page .srai-public-inner.is-conversation {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	position: static;
	width: 100%;
	min-height: 0;
	height: auto;
	max-height: none;
	background: #FDFAF5;
	border: 0;
	border-radius: 0;
}

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

/*
 * The messaging header: avatar, name, status, and the site's mark.
 *
 * public.css has .srai-bar as a quiet cream strip with a wine ॐ tile. Here it
 * becomes the green bar the design specifies.
 */
.srai-full-page .srai-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .75rem;
	background: #0A5D52;
	border-bottom: 0;
}

.srai-full-page .srai-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0;
	background: #fff;
	border-radius: 50%;
	overflow: hidden;
	color: #0A5D52;
	font-size: 1.15rem;
	line-height: 1;
}

.srai-full-page .srai-mark img,
.srai-full-page .srai-mark svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Name and status, stacked, each on one line or ellipsised. */
.srai-full-page .srai-who-bar {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1 1 auto;
	min-width: 0;
}

.srai-full-page .srai-brand {
	color: #fff;
	font-size: .97rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.25;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.srai-full-page .srai-status {
	display: flex;
	align-items: center;
	gap: .375rem;
	/*
	 * margin: 0, and it is not tidiness.
	 *
	 * This is a <p>, and public.css zeroes the margin on .srai-brand only —
	 * there is no blanket paragraph reset inside .srai-public. Left alone this
	 * line carries the browser's default ~1em above and below, which makes the
	 * name-and-status block taller than the 42px avatar beside it. The bar then
	 * centres a too-tall column against the disc and the two stop lining up,
	 * with a band of dead green under "online".
	 */
	margin: 0;
	min-width: 0;
	color: rgba(255, 255, 255, .88);
	font-size: .715rem;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.srai-full-page .srai-dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	background: #6FE38F;
	border-radius: 50%;
}

/* The site's wide logo, in a white pill in the corner. */
.srai-full-page .srai-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/*
	 * Sized so the logo can actually be read.
	 *
	 * This image is a wordmark AND a tagline stacked inside one file, so its
	 * text is only about a third of whatever height the pill allows. At the
	 * 32px this started at, "Local, Guide, Services" rendered around 6px —
	 * present, but not readable by anyone.
	 *
	 * Matched to the 42px avatar on the other side of the bar, which keeps the
	 * header symmetrical and costs no extra height: the avatar already sets the
	 * row. The width cap is what stops a long logo squeezing the name column;
	 * on a 390px screen this leaves a comfortable margin for "AI Anna".
	 */
	max-width: 190px;
	height: 42px;
	padding: 0 .5rem;
	background: #fff;
	border-radius: 21px;
	overflow: hidden;
}

.srai-full-page .srai-logo img {
	display: block;
	max-width: 100%;
	max-height: 34px;
	width: auto;
	height: auto;
}

/*
 * The typeset mark, used only when no Custom Logo is set.
 *
 * Two lines in a white pill, matching the arrangement on the real logo, so a
 * site that has not configured Site Identity yet still gets a finished-looking
 * header rather than an empty corner. Set a logo and none of this renders.
 *
 * The pill grows a little taller here than the image version: two lines of type
 * need the room, and 36px is still well inside the header's 42px avatar.
 */
.srai-full-page .srai-logo.is-text {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1px;
	height: 42px;
	padding: 0 .7rem;
	border-radius: 21px;
	text-decoration: none;
	line-height: 1;
}

.srai-full-page .srai-logo-name {
	color: #0A5D52;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.srai-full-page .srai-logo-tld {
	color: #E8641A;
	font-weight: 700;
}

.srai-full-page .srai-logo-sub {
	color: #6E5F6B;
	font-size: .52rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

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

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

/*
 * Everything the embedded layout teaches with is gone here.
 *
 * The heading, the intro paragraph, the language pills and the rotating
 * demonstration all exist to explain an assistant embedded in a page. A chat
 * explains itself: the greeting bubble says what Anna is and that any language
 * is welcome, in Anna's own voice, in the thread where it reads as a message
 * rather than as instructions.
 *
 * If the language pills are ever wanted back on this layout, deleting
 * .srai-langs from this list is the whole change — public.js still builds them.
 */
.srai-full-page .srai-intro,
.srai-full-page .srai-langs,
.srai-full-page .srai-demo {
	display: none;
}

/*
 * Hidden from the eye, kept in the document.
 *
 * The h1 the template prints, and the assistant's own h2, are both taken out
 * of the visual layout — the chat is locked to one viewport and a heading row
 * would come permanently out of the conversation. But `display: none` removes
 * them from the accessibility tree and weakens the document outline, and this
 * page has few headings to spare: without these it has none at all.
 *
 * So they are clipped rather than removed. Same technique public.css uses for
 * .screen-reader-text, repeated here because that rule is scoped inside
 * .srai-public and the h1 sits outside it.
 */
.srai-full-page .srai-sr-only,
.srai-full-page .srai-heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * THE NOTE UNDER THE COMPOSER STAYS VISIBLE. IT IS NOT DECORATION.
 *
 * This page shows no independent-platform banner and no site footer, and its
 * header says only "online" beside a green dot. That makes this line the only
 * place a devotee is told whose platform this is before they ask anything —
 * on an interface they associate with messaging a real person, two screens
 * before an answer that hands them a real person's WhatsApp number.
 *
 * Do not add it to the display:none list above. See CLAUDE.md.
 */
.srai-full-page .srai-disclaimer {
	display: block;
	flex: 0 0 auto;
	margin: .5rem .35rem 0;
	padding: 0;
	color: #8A7F86;
	font-size: .68rem;
	line-height: 1.4;
	text-align: center;
	text-wrap: pretty;
}

/* --------------------------------------------------------- the wallpaper */

/*
 * The thread, and the ground it sits on.
 *
 * A WARM LIGHT GROUND WITH A FAINT MOTIF, THE WAY CHAT APPS DO IT.
 *
 * Not white. Every messaging app a devotee already uses puts a tinted,
 * lightly patterned ground behind the conversation, and it is doing real
 * work: it separates the messages from the page, gives white bubbles
 * something to sit ON rather than dissolve into, and makes a long thread
 * read as a place rather than a document.
 *
 * #F2EEE7 is a warm neutral a shade lighter than WhatsApp's own ground —
 * enough tint to hold white bubbles, light enough that dark text over it
 * keeps well past the contrast floor.
 *
 * The motif is a kolam-style octagram, drawn here, in two offset copies of
 * one 72px tile so it repeats on the diagonal rather than as a visible grid.
 * It is deliberately NOT WhatsApp's doodle wallpaper: that artwork is
 * copyrighted, and borrowing a layout is a different thing from copying an
 * illustration. At this opacity it reads as texture rather than pattern —
 * present when you look for it, invisible while you read.
 *
 * What makes messages sit above the composer rather than stranded at the top
 * of an empty screen is the margin-top:auto rule further down — NOT
 * justify-content, which breaks scrolling. The reasoning is beside it.
 */
.srai-full-page .srai-thread,
.srai-full-page .srai-public-inner.is-conversation .srai-thread {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 1rem .75rem .75rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background-color: #F2EEE7;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='72'%3E%3Cg%20transform='translate(36%2036)'%20fill='none'%20stroke='%23DDD3C3'%20stroke-width='1.1'%20opacity='.6'%3E%3Cpath%20d='M-9-9h18v18h-18z'/%3E%3Cpath%20d='M-9-9h18v18h-18z'%20transform='rotate(45)'/%3E%3Ccircle%20r='1.6'%20fill='%23DDD3C3'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='72'%3E%3Cg%20transform='translate(36%2036)'%20fill='none'%20stroke='%23DDD3C3'%20stroke-width='1.1'%20opacity='.6'%3E%3Cpath%20d='M-9-9h18v18h-18z'/%3E%3Cpath%20d='M-9-9h18v18h-18z'%20transform='rotate(45)'/%3E%3Ccircle%20r='1.6'%20fill='%23DDD3C3'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E");
	background-position: 0 0, 36px 36px;
	background-size: 72px 72px, 72px 72px;
	background-repeat: repeat, repeat;
}

/* An empty thread is still the wallpaper, so it must not collapse. */
.srai-full-page .srai-thread:empty {
	display: flex;
}

/*
 * MESSAGES SIT AT THE BOTTOM — VIA THE FIRST CHILD, NEVER justify-content.
 *
 * `justify-content: flex-end` on a scroll container looks like the obvious way
 * to do this and is a trap: when the content grows past the container, the
 * overflow goes off the TOP and the browser will not let you scroll to it. The
 * conversation appears to work until the fourth or fifth exchange, at which
 * point the earlier questions are on the page, above the viewport, and
 * unreachable — no scrollbar, no wheel, no touch drag.
 *
 * `margin-top: auto` on the first message does the same job honestly: the auto
 * margin absorbs the spare room while the thread is short, and collapses to
 * nothing once there is more content than space, leaving an ordinary scroll
 * container that scrolls in both directions.
 */
.srai-full-page .srai-thread > :first-child {
	margin-top: auto;
}

/* ---------------------------------------------------------- the messages */

.srai-full-page .srai-turn {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	margin: 0;
}

/*
 * The sender labels go, on this layout only.
 *
 * "YOU" and "SRISAILAMGUIDE ANNA" above every bubble are how the embedded
 * transcript stays readable in a page of prose. In a chat, side and colour
 * already say who spoke, and repeating it above every message is noise. They
 * stay in the markup for screen readers, where the information is not
 * otherwise available.
 */
.srai-full-page .srai-who {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* The devotee's own words: right, light green, dark text. */
.srai-full-page .srai-q {
	align-items: flex-end;
}

.srai-full-page .srai-q .srai-text {
	max-width: 82%;
	padding: .625rem .8rem .45rem;
	background: #D7F2C8;
	border-radius: 16px 16px 4px 16px;
	box-shadow: 0 1px 1.5px rgba(11, 42, 36, .14);
	color: #241B1E;
	font-size: .95rem;
	line-height: 1.5;
}

/*
 * Anna's reply: left, white, and as wide as the thread.
 *
 * NOT a speech balloon. Answers here routinely run to several hundred words
 * with headings, lists and map links; a narrow bubble would set them in a
 * column too tight to read. The lopsided top-left corner is what still reads as
 * "spoken by the other side".
 */
.srai-full-page .srai-a {
	margin-top: 0;
}

.srai-full-page .srai-a .srai-text {
	padding: .7rem .8rem .5rem;
	background: #fff;
	/*
	 * No border, just a shadow — the way every messaging app draws this.
	 *
	 * A border was needed for as long as the ground behind was also white,
	 * where a shadow alone left the bubble a smudge. With the ground tinted
	 * again the white lifts off it on its own, and the outline that was
	 * propping it up now just reads as a box drawn around a message.
	 */
	border: 0;
	border-radius: 4px 16px 16px 16px;
	box-shadow: 0 1px 1.5px rgba(11, 42, 36, .13);
	font-size: .93rem;
	line-height: 1.5;
}

/* Headings inside an answer take the green, not the wine. */
.srai-full-page .srai-md h1,
.srai-full-page .srai-md h2,
.srai-full-page .srai-md h3,
.srai-full-page .srai-md h4,
.srai-full-page .srai-md h5,
.srai-full-page .srai-md h6,
.srai-full-page .srai-md a,
.srai-full-page .srai-places .srai-place {
	color: #0A5D52;
}

.srai-full-page .srai-md a:hover,
.srai-full-page .srai-md a:focus-visible {
	color: #C9520F;
}

/*
 * The pending bubble.
 *
 * Its own shape rather than a wide white card: an answer that has not arrived
 * should not reserve the space the answer will take, or the thread jumps when
 * it lands.
 */
.srai-full-page .srai-a.is-pending .srai-text {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	align-self: flex-start;
	width: auto;
	min-height: 36px;
	padding: 0 .8rem;
	background: #F3EBDF;
	border-radius: 18px;
	box-shadow: none;
	color: #6E5F6B;
	font-size: .82rem;
	font-style: italic;
}

.srai-full-page .srai-a.is-failed .srai-text {
	background: #FBF0F0;
	border: 1px solid #F0DDDD;
	box-shadow: none;
	color: #8A2424;
}

/*
 * The four languages, inside the greeting bubble.
 *
 * Set apart from the sentences above with a rule and a little air, so they read
 * as a short list rather than as four more paragraphs of greeting — but still
 * inside Anna's bubble, in her voice.
 *
 * Slightly smaller than the greeting and slightly tighter, because their job is
 * recognition rather than reading: a devotee scanning for their own script
 * finds it in a second and stops. Line height is generous even so — Telugu,
 * Devanagari and Kannada all carry marks above and below the baseline that a
 * tight leading clips.
 */
.srai-full-page .srai-says {
	margin-top: .6rem;
	padding-top: .55rem;
	border-top: 1px solid #F0EAE0;
}

.srai-full-page .srai-says p {
	margin: 0 0 .22rem;
	color: #5C6B57;
	font-size: .875rem;
	line-height: 1.6;
}

.srai-full-page .srai-says p:last-child {
	margin-bottom: 0;
}

/* A timestamp under the last line of a bubble. */
.srai-full-page .srai-time {
	display: block;
	margin-top: .2rem;
	color: #A8968F;
	font-size: .66rem;
	line-height: 1;
	text-align: right;
}

.srai-full-page .srai-q .srai-time {
	color: #6C7F61;
}

/*
 * The enforced disclaimer and the human-help line, demoted.
 *
 * SRAI_Answer_Requirements appends both to EVERY answer. At body weight in
 * every bubble they read as boilerplate by the fourth question, and a devotee
 * starts skipping the paragraph that tells them to verify with the temple. So
 * they are set apart above a hairline, in a quieter colour: present on every
 * answer exactly as the rule requires, never hidden, and no longer shouting.
 *
 * SAME SIZE AS THE ANSWER. They used to be set small too, and small made them
 * harder to read than the answer they qualify — the help line carries a number
 * to tap and the disclaimer says to verify with the temple, and neither should
 * need squinting at on a phone. The hairline and colour do the separating.
 */
.srai-full-page .srai-foot {
	margin-top: .65rem;
	padding-top: .6rem;
	border-top: 1px solid #F2E9DC;
}

.srai-full-page .srai-foot p {
	margin: 0 0 .35rem;
	color: #6E5F6B;
	font-size: inherit;
	line-height: inherit;
}

.srai-full-page .srai-foot p:last-child {
	margin-bottom: 0;
}

/* The follow-up nudge is redundant in a chat — the composer is right there. */
.srai-full-page .srai-followup {
	display: none;
}

/* Notices sit in the thread, centred, like a chat's own system lines. */
.srai-full-page .srai-notices {
	flex: 0 0 auto;
	padding: .5rem .75rem 0;
	background: #F2EEE7;
}

.srai-full-page .srai-notice {
	margin: 0;
	border-radius: 14px;
	text-align: center;
}

/* ------------------------------------------------------- jump to latest */

/*
 * A zero-height rail directly above the composer.
 *
 * The button cannot live inside the thread: an absolutely positioned child of a
 * scroller scrolls away with the content, and a sticky one has to fight the
 * flex gap and the wallpaper. The rail takes no vertical space at all, so
 * nothing in the layout moves when the button appears or goes.
 */
.srai-full-page .srai-jump-rail {
	position: relative;
	flex: 0 0 auto;
	height: 0;
}

.srai-full-page .srai-jump {
	position: absolute;
	right: .75rem;
	bottom: .6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 40px, and one of the few controls on this page deliberately under the
	 * 44px floor. It floats over the conversation a devotee is reading, a
	 * bigger disc covers more of it, and missing it costs a flick rather than a
	 * wrong answer — unlike the feedback pills, where a mis-tap records an
	 * opinion nobody held.
	 */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #EADFD0;
	border-radius: 50%;
	background: #fff;
	color: #0A5D52;
	box-shadow: 0 2px 6px rgba(11, 42, 36, .18);
	cursor: pointer;
	/* Hidden until there is somewhere to jump to, and not reachable by keyboard
	   or screen reader while it is. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	pointer-events: none;
}

.srai-full-page .srai-jump svg {
	width: 20px;
	height: 20px;
}

.srai-full-page .srai-jump.is-on {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.srai-full-page .srai-jump {
		transition: opacity .16s ease, transform .16s ease, visibility .16s;
	}
}

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

.srai-full-page .srai-composer,
.srai-full-page .srai-public-inner.is-conversation .srai-composer {
	flex: 0 0 auto;
	padding: .625rem .75rem;
	background: #FDFAF5;
	border-top: 1px solid #EADFD0;
	/* Clears the home indicator on a phone; zero everywhere else. */
	padding-bottom: calc(.875rem + env(safe-area-inset-bottom, 0px));
}

.srai-full-page .srai-composer-box {
	gap: .5rem;
	padding: .25rem .25rem .25rem .95rem;
	border-radius: 24px;
}

/*
 * 16px, and this is the one value in this file that is not a style choice.
 * iOS zooms the viewport when a field smaller than this takes focus, which on
 * this layout throws the answer off the screen exactly as it arrives.
 */
.srai-full-page .srai-question {
	min-height: 2.5rem;
	font-size: 1rem;
}

.srai-full-page .srai-send {
	min-width: 3.25rem;
	height: 2.75rem;
	padding: 0 1.25rem;
	font-size: .8125rem;
	letter-spacing: .08em;
}

/*
 * The counter and hint row.
 *
 * It always exists — public.js builds two spans into it — but on first open
 * both are empty, and two empty inline spans have no height, so the row
 * collapses to nothing on its own. No display rule is needed and :empty would
 * not work here anyway: the row has children, they just have no text.
 *
 * margin-top therefore goes on the spans rather than the row, or an empty row
 * would still push the composer up by its own margin.
 */
.srai-full-page .srai-composer-row {
	margin-top: 0;
	padding: 0 .35rem;
}

.srai-full-page .srai-hint:not(:empty),
.srai-full-page .srai-count:not(:empty) {
	display: inline-block;
	margin-top: .35rem;
}

/* --------------------------------------------------------- wider screens */

@media (min-width: 40rem) {
	.srai-full-page .srai-page-main {
		padding: 1.25rem 1.25rem 0;
	}

	/*
	 * A centred panel again, running off the bottom edge: the conversation
	 * continues below the fold rather than stopping at a border.
	 */
	.srai-full-page .srai-public {
		max-width: 46rem;
	}

	.srai-full-page .srai-public-inner,
	.srai-full-page .srai-public-inner.is-conversation {
		border: 1px solid #EADFD0;
		border-bottom: 0;
		border-radius: 18px 18px 0 0;
		overflow: hidden;
	}

	.srai-full-page .srai-bar {
		padding: .85rem 1.15rem;
	}

	/* More width to spend here, so the tagline gets another couple of pixels. */
	.srai-full-page .srai-logo {
		max-width: 230px;
		height: 46px;
		border-radius: 23px;
	}

	.srai-full-page .srai-logo img {
		max-height: 38px;
	}

	.srai-full-page .srai-thread,
	.srai-full-page .srai-public-inner.is-conversation .srai-thread {
		padding: 1.15rem 1.15rem .9rem;
	}

	.srai-full-page .srai-q .srai-text {
		max-width: 72%;
	}

	.srai-full-page .srai-composer,
	.srai-full-page .srai-public-inner.is-conversation .srai-composer {
		padding: .75rem 1.15rem 1rem;
	}
}

/* ------------------------------------------------------------- motion */

/*
 * Three dots, and nothing else moving.
 *
 * The composer's invitation pulse from public.css is switched off on this
 * layout: in a chat the field is obviously the field, and a border that
 * breathes under a devotee's thumb while they read an answer is a distraction
 * rather than an invitation.
 */
.srai-full-page .srai-composer-box.is-inviting {
	animation: none;
	border-color: #EADFD0;
	box-shadow: none;
}

.srai-full-page .srai-dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.srai-full-page .srai-dots span {
	width: 6px;
	height: 6px;
	background: #6E5F6B;
	border-radius: 50%;
	opacity: .35;
}

@media (prefers-reduced-motion: no-preference) {
	.srai-full-page .srai-dots span {
		animation: srai-chat-dot 1.1s ease-in-out infinite;
	}

	.srai-full-page .srai-dots span:nth-child(2) {
		animation-delay: .18s;
	}

	.srai-full-page .srai-dots span:nth-child(3) {
		animation-delay: .36s;
	}
}

/* Held still, with the three dots at different opacities so the shape still
   reads as "in progress" without moving. */
@media (prefers-reduced-motion: reduce) {
	.srai-full-page .srai-dots span:nth-child(2) {
		opacity: .6;
	}

	.srai-full-page .srai-dots span:nth-child(3) {
		opacity: .85;
	}
}

@keyframes srai-chat-dot {
	0%, 100% {
		opacity: .28;
		transform: translateY(0);
	}

	50% {
		opacity: .9;
		transform: translateY(-3px);
	}
}