/*
 * Bot Mufti panel.
 *
 * Tokens come from theme.json where available; the bot ships its own fallbacks
 * so it still looks correct if a future theme does not define them.
 */

/*
 * What this launcher contributes to the corner stack (assets/stack/stack.css).
 *
 * It used to publish two clearance tokens of its own — `--jmns-bot-clearance`
 * at `44px + 2rem` and `--jmns-bot-clearance-inline` at `9.5rem + 2rem` — and
 * both were wrong in ways nothing could catch. The vertical one described a
 * 44px launcher, which is the `min-block-size` in the rule below and not the
 * box it produces: the pill measures 48. The horizontal one reserved 152px of
 * pill while the `max-inline-size` further down this same file allowed 240, so
 * the announcement strip was reserving against a number the launcher had never
 * agreed to. Neither could be verified from the file that consumed it.
 *
 * Now there is one number, `--jmns-bot-extent`, and it does both jobs: it is
 * the bound on the pill *and* what the corner publishes as occupied. They can
 * no longer disagree, because they are the same declaration.
 *
 * The tokens are still set from this stylesheet rather than from stack.css, and
 * that is the point of setting them here: this file is only enqueued when the
 * bot actually renders, so a site with the bot switched off leaves the corner
 * empty and everything else reserves nothing for it. That was the one thing the
 * old tokens got right, and it is kept.
 */
:root {
	/*
	 * 12.5rem. Measured, not estimated: the pill comes out 151px at "Tanya DIN",
	 * 186px at "Tanya Mursyid" and 193px at "Tanya Mualimin" — §16's three
	 * candidate names — so 200px holds every one of them with 7px to spare and
	 * clips anything longer through the ellipsis the label already carries.
	 *
	 * Raising it is a supported change and costs exactly one thing, visibly: the
	 * announcement strip reserves the same number, so a wider pill is a narrower
	 * announcement. That trade used to be invisible, which is how it came to be
	 * mispriced.
	 */
	--jmns-bot-extent: 12.5rem;
}

/*
 * Which corner, and the room it takes there. `:has()` rather than a media query
 * or a second class, because the corner is a stored setting and the markup is
 * the only thing that knows which way it was answered.
 */
:root:has( .jmns-bot--bottom-right ) {
	--jmns-stack-count-end: 1;
	--jmns-stack-extent-end: var(--jmns-bot-extent);
}

/*
 * Set to `bottom-left`, this launcher joins the other two rather than landing on
 * them. It landed on them before: `.jmns-bot--bottom-left` was `inset-inline-
 * start: 1rem` over an `inset-block-end: 1rem`, which is the reading-preferences
 * launcher's exact position — one 48px control precisely on top of another, in a
 * corner both of them had been told was theirs. Third slot up, and the corner
 * counts three.
 */
:root:has( .jmns-bot--bottom-left ) {
	--jmns-stack-count-start: 3;
	--jmns-stack-extent-start: var(--jmns-bot-extent);
}

.jmns-bot {
	/*
	 * Above the search overlay at 9998 and below the first-entry loader at
	 * 10000. Raised as the stack's own token rather than as a `z-index`
	 * declaration, so the two rules never have to be ranked against each other
	 * — a custom property set on this element simply is the value the stack
	 * reads on this element.
	 */
	--jmns-stack-z: 9999;
	font-size: 1rem;
}

/* Order within the corner; the corner itself is `data-jmns-stack` in the
   markup, and the offset is stack.css's. */
.jmns-bot--bottom-right { --jmns-stack-order: 0; }
.jmns-bot--bottom-left  { --jmns-stack-order: 2; }

/*
 * §3: the launcher goes while the panel is open.
 *
 * Both on screen at once is two ways into one conversation, and on a narrow
 * window the pill sat under the panel it opens. The panel's own close button
 * is the way back, and `close()` returns focus to the launcher — so it has to
 * be hidden rather than removed, or focus would land on nothing.
 */
.jmns-bot.is-open .jmns-bot__launcher {
	visibility: hidden;
}

/* ------------------------------------------------------------- launcher -- */

.jmns-bot__launcher {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 44px;
	/*
	 * §16: the name is a setting, and the department is choosing between
	 * Mualimin, Mursyid and Iman — not three letters. The pill takes what it
	 * needs and truncates past the bound rather than growing across the corner
	 * of the page. The label below is what actually clips.
	 *
	 * The bound is the corner's published extent and not a number of its own.
	 * It was `240px` here against a 184px reservation in ticker.css, which is
	 * the collision this component could produce and nothing could see: at
	 * "Tanya Mualimin" the pill wants 193px, overruns the reservation by 9, and
	 * lands on the announcement strip's "next" button.
	 */
	max-inline-size: var(--jmns-bot-extent);
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--interactive, #245746);
	color: var(--wp--preset--color--surface, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	/*
	 * Two shadows, not one. A single soft blur reads as a sticker lying on the
	 * page; a tight contact shadow under a wider ambient one reads as an object
	 * above it, which is what a floating control is meant to be. Same idea as
	 * the cards, at the smaller scale a 48px pill wants.
	 */
	box-shadow:
		0 1px 2px rgb(0 0 0 / 0.16),
		0 6px 16px -4px rgb(0 0 0 / 0.28);
	transition:
		background-color var(--t-fast, 150ms) var(--ease, ease),
		box-shadow var(--t-fast, 150ms) var(--ease, ease),
		transform var(--t-fast, 150ms) var(--ease, ease);
}

/* One line, clipped rather than wrapped — the launcher is a pill, not a card. */
.jmns-bot .jmns-bot__launcher-label {
	min-inline-size: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * Lift, rather than a colour jump.
 *
 * The hover was `text-primary` — the body ink, near-black. Against the resting
 * `interactive` green that is a large, abrupt change for a pointer simply
 * passing over, and on `malam` it moved *towards* the page rather than away
 * from it, so the control appeared to recede when touched. `interactive-hover`
 * is the token that exists for this and every scheme states one.
 *
 * The 1px rise is the part that reads as current: the shadow deepens and the
 * object moves, so the pill behaves like something you could pick up.
 */
.jmns-bot__launcher:hover,
.jmns-bot__launcher:focus-visible {
	background-color: var(--wp--preset--color--interactive-hover, #1F2925);
	box-shadow:
		0 2px 4px rgb(0 0 0 / 0.18),
		0 10px 24px -6px rgb(0 0 0 / 0.34);
	transform: translateY(-1px);
}

/* Pressed goes back down, or the lift never resolves into anything. */
.jmns-bot__launcher:active {
	box-shadow:
		0 1px 2px rgb(0 0 0 / 0.2),
		0 3px 8px -2px rgb(0 0 0 / 0.26);
	transform: translateY(0);
}

/*
 * Motion is decoration here; the colour and shadow still answer the pointer.
 */
@media ( prefers-reduced-motion: reduce ) {
	.jmns-bot__launcher {
		transition: background-color var(--t-fast, 150ms) var(--ease, ease);
	}

	.jmns-bot__launcher:hover,
	.jmns-bot__launcher:focus-visible,
	.jmns-bot__launcher:active {
		transform: none;
	}
}

.jmns-bot__avatar {
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--wp--preset--color--surface, #fff);
	/*
	 * A hairline of the pill's own colour between the photograph and the green.
	 * Without it the circle is a hole cut in the pill; with it the photograph is
	 * something the pill is carrying. Uses the ink colour at low alpha rather
	 * than a fixed white so it holds on every scheme.
	 */
	box-shadow: 0 0 0 2px rgb(255 255 255 / 0.22);
}

.jmns-bot__avatar--fallback {
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--interactive, #245746);
	font-weight: 700;
}

/* ---------------------------------------------------------------- panel -- */

/*
 * The panel sets display, which beats the UA stylesheet's [hidden] rule — so
 * `panel.hidden = true` in bot.js had no visual effect and the panel sat open
 * on every page load, covering the footer. The plugin ships its own defence
 * rather than relying on the theme, since it must work under any theme.
 */
.jmns-bot__panel[hidden] {
	display: none !important;
}

.jmns-bot__panel {
	position: absolute;
	inset-block-end: calc(100% + 0.75rem);
	/*
	 * §22: 440-480 wide, 620-680 tall, and never past the viewport. It was
	 * 384x512 — narrow enough that a fatwa title wrapped to three lines and
	 * short enough that the first result sat below the fold.
	 */
	inline-size: min(28rem, calc(100vw - 2rem));
	max-block-size: min(42rem, calc(100vh - 2.5rem));
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--surface, #fff);
	border: 1px solid rgb(var(--jmns-hairline-rgb, 38 51 42) / var(--jmns-a-edge, 0.2));
	border-block-start: 3px solid var(--wp--preset--color--primary-light, #8DAFA4);
	box-shadow: 0 4px 20px rgb(0 0 0 / 0.18);
	/* The site rounds its surfaces; a square panel read as a different product
	   bolted onto the page. Fallbacks keep it sane under another theme. */
	border-radius: var(--r-card, 16px);
	overflow: hidden;
}

/*
 * Shipped rather than borrowed. The panel's markup uses screen-reader-text for
 * the close button's name, the input's label and each message's speaker, and
 * the plugin must work under any theme — including one that does not define it,
 * which would put "Tutup" and "Anda:" on screen.
 */
.jmns-bot .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.jmns-bot--bottom-right .jmns-bot__panel { inset-inline-end: 0; }
.jmns-bot--bottom-left  .jmns-bot__panel { inset-inline-start: 0; }

.jmns-bot__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	/* §2: 72-80px. The identity block sets the height; this is the air. */
	padding: 0.875rem 1rem;
	/*
	 * Deep green, not ink.
	 *
	 * The bar was `text-primary` — the body copy colour, which at #1F2925 reads
	 * as black on screen and is what §2 objects to: a black chrome bar on a
	 * green portal looks like a widget someone dropped on top of the site.
	 * The gradient is the guide's own, and both stops are portal colours.
	 */
	background-image: linear-gradient(
		135deg,
		var(--wp--preset--color--interactive-hover, #173D38) 0%,
		var(--wp--preset--color--primary, #245746) 100%
	);
	background-color: var(--wp--preset--color--interactive-hover, #173D38);
	color: var(--wp--preset--color--background, #FAF8F2);
}

/* Name over role, both against the avatar. */
.jmns-bot__identity {
	/*
	 * Flexes rather than pushing with an auto margin.
	 *
	 * `margin-inline-end: auto` sizes a flex item to its content and absorbs
	 * the slack, so the block never shrank — a 37-character name ran the title
	 * to 292px on one line and left 18px between it and the close button. Free
	 * to shrink, the name wraps inside the space it actually has and the clamp
	 * below stops it at two lines.
	 */
	flex: 1 1 auto;
	min-inline-size: 0;
}

/*
 * §16: two lines at most for the name, and the close button keeps its own
 * width either way — a long one used to push it against the panel edge.
 */
.jmns-bot__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.jmns-bot__close {
	flex: 0 0 auto;
}

/*
 * §1: the launcher shows a face, so the panel says what DIN actually is.
 * Quiet — it is a qualifier on the name above it, not a second heading.
 */
.jmns-bot__subtitle {
	margin: 0.1rem 0 0;
	font-size: 0.75rem;
	line-height: 1.3;
	color: rgb(255 255 255 / 0.82);
}

.jmns-bot__header-avatar {
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--wp--preset--color--surface, #fff);
}

.jmns-bot__title {
	margin: 0;
	/* Takes the space the close button leaves, so the avatar and title sit
	   together at the start rather than pushed apart by space-between. */
	margin-inline-end: auto;
	font-size: 1rem;
	color: inherit;
}

/*
 * The header is an ink band, and the theme's focus ring is `interactive`
 * green — 2.38:1 against it, under the 3:1 SC 1.4.11 asks of a focus
 * indicator. On this band the ring has to be light: the page ground measures
 * 14.10:1 here, so it is visible rather than merely present.
 */
.jmns-bot__header :focus-visible {
	outline: 3px solid var(--wp--preset--color--background, #FAF8F2);
	outline-offset: 2px;
}

/*
 * Ghost controls declare their own hover. A theme's shared `button:hover` used
 * to reach these and fill them solid; this stylesheet should not depend on a
 * theme being careful about that, so each states what it does.
 */
.jmns-bot__close:hover,
.jmns-bot__retry:hover {
	/* On the ink header a light wash reads; a tint would not. Pure white rather
	   than the near-white it was: a wash over a ground the rule cannot know is
	   the one colour this codebase states in full, and every other one on the
	   site is written this way. */
	background-color: rgb(255 255 255 / 0.14);
	box-shadow: none;
}

.jmns-bot__close {
	min-inline-size: 44px;
	min-block-size: 44px;
	border: 0;
	border-radius: var(--r-input, 12px);
	background: transparent;
	color: inherit;
	transition: background-color 150ms ease;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.jmns-bot__log {
	/*
	 * Sized to what it holds, not stretched to the panel.
	 *
	 * `flex: 1` made the log claim every spare pixel, which is invisible on a
	 * short desktop panel and obvious on a phone: the panel is full height
	 * there, so the four suggestions were pinned to the bottom with 400px of
	 * blank between them and the greeting they belong to. §4 and §5 both want
	 * them reached quickly.
	 *
	 * `0 1 auto` lets it grow with the conversation and shrink to scroll once
	 * there is more than fits — the composer and the suggestions keep their
	 * space either way, which is what `min-block-size: 0` is for.
	 */
	flex: 0 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.jmns-bot__message {
	padding: 0.6rem 0.8rem;
	border-radius: var(--r-input, 12px);
	background-color: var(--wp--preset--color--background, #FAF8F2);
	line-height: 1.6;
}

.jmns-bot__message--user {
	background-color: var(--wp--preset--color--interactive, #245746);
	color: var(--wp--preset--color--surface, #fff);
	align-self: flex-end;
}

.jmns-bot__message p { margin: 0 0 0.5rem; }
.jmns-bot__message p:last-child { margin-block-end: 0; }

/* -------------------------------------------------------------- results -- */

.jmns-bot__results {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* §8: the sentence between the count and the list. */
.jmns-bot__results-intro {
	margin: 0.15rem 0 0.6rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-secondary, #4A5A52);
}

/*
 * §16: a card, and nothing more than a card. No shadow, no glass, no thick
 * border — the panel it sits in is already a raised surface, and stacking
 * another one inside it is what makes a widget feel bolted on.
 */
.jmns-bot__result--primary {
	padding: 0.875rem;
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-input, 12px);
	background-color: var(--wp--preset--color--background, #FAF9F6);
}

/*
 * §17: the four under it are rows, divided rather than boxed. Compact is the
 * point — they exist so the reader can see there are alternatives without
 * scrolling past four more cards to find them.
 */
.jmns-bot__result--supporting {
	padding: 0.5rem 0 0.6rem;
	border-block-end: 1px solid var(--wp--preset--color--divider, #E4EAE6);
}

.jmns-bot__result--supporting:last-child {
	border-block-end: 0;
}

/*
 * §11: the source type, keyed off the post type so it survives translation.
 * Subtle by instruction — the label is there to help scanning, and strong
 * colour coding across five results is noise, not information.
 */
.jmns-bot__result-type {
	margin: 0 0 0.2rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #4A5A52);
}

.jmns-bot__result[data-kind="jmns_fatwa"] .jmns-bot__result-type {
	color: var(--wp--preset--color--interactive, #245746);
}

.jmns-bot__result[data-kind="jmns_taudhih"] .jmns-bot__result-type {
	color: var(--wp--preset--color--gold-text, #876F3A);
}

/*
 * §15: two to three lines. The whole excerpt stays in the markup — this clamps
 * what is drawn, so a screen reader still gets the sentence it was cut from.
 */
.jmns-bot__result-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/*
 * §28: says where the link goes. Decorative — the title above is the anchor,
 * and this is the sign that says so, exactly as the news rows and the Taudhih
 * entries do it on the portal itself.
 */
.jmns-bot__result-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-block-start: 0.4rem;
	color: var(--wp--preset--color--interactive, #245746);
	font-size: 0.8125rem;
	font-weight: 600;
}

.jmns-bot__result-cta::after {
	content: "\2192";
	transition: transform var(--t-fast, 180ms) var(--ease, ease);
}

.jmns-bot__result:hover .jmns-bot__result-cta::after {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.jmns-bot__result:hover .jmns-bot__result-cta::after {
		transform: none;
	}
}

/*
 * §24 and §25: small actions under an answer — archives of the kinds found, or
 * a way on when nothing was. Chips rather than buttons, so they read as offers
 * and not as the thing DIN wants you to press.
 */
.jmns-bot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.75rem 0 0;
}

.jmns-bot__action {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-block-size: 32px;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-pill, 999px);
	background-color: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--interactive, #245746);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.jmns-bot__action:hover {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	border-color: var(--wp--preset--color--primary-light, #8DAFA4);
}

.jmns-bot__action--link::after {
	content: "\2192";
}

/* §13. Quiet, and the last thing in the answer. */
.jmns-bot__provenance {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-secondary, #4A5A52);
}

/*
 * §14: a result title is a heading, not an old-style web link.
 *
 * Every one arrived underlined, so five results read as five rules of blue-era
 * link text. The underline moves to hover and focus, where it says the thing
 * is clickable at the moment that matters.
 */
.jmns-bot__result-title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

/*
 * §9: the first result leads. The card around it does some of that, but not
 * enough on its own — with every title at one size the five still read as a
 * list of five, which is the thing §9 is written against.
 */
.jmns-bot__result--primary .jmns-bot__result-title {
	font-size: 1rem;
	font-weight: 700;
}

.jmns-bot__result--supporting .jmns-bot__result-title {
	font-size: 0.875rem;
}

/* Tighter under a supporting row; the primary card has room to breathe. */
.jmns-bot__result--supporting .jmns-bot__result-type {
	font-size: 0.625rem;
}

.jmns-bot__result--supporting .jmns-bot__result-meta,
.jmns-bot__result--supporting .jmns-bot__result-cta {
	font-size: 0.75rem;
	margin-block-start: 0.2rem;
}

.jmns-bot__result-title:hover,
.jmns-bot__result-title:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.jmns-bot__result-meta {
	margin: 0.15rem 0;
	font-size: 0.8125rem;
	opacity: 0.85;
}

.jmns-bot__badge {
	display: inline-block;
	padding: 0 0.4em;
	border: 1px solid currentColor;
	font-size: 0.75rem;
	font-weight: 600;
}

.jmns-bot__result-excerpt {
	margin: 0;
	font-size: 0.875rem;
	/*
	 * Three lines. The server centres the snippet on the first match and sends
	 * 220 characters of context, which is right for judging relevance and, five
	 * results deep in a 384px column, becomes a wall. The full text is one click
	 * away and this is the summary.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.jmns-bot__result-excerpt mark {
	background-color: #fff3bf;
	color: inherit;
}

.jmns-bot__results-label,
.jmns-bot__suggestion,
.jmns-bot__shortcut {
	font-weight: 600;
}

/* ------------------------------------------------------- direct answer -- */

/*
 * Today's prayer times, answered in the panel.
 *
 * Given the weight of a card rather than a paragraph because it is the answer
 * — the documents underneath it are related reading. Two columns of name and
 * time so it is read down the times, which is how anyone uses a timetable.
 */
.jmns-bot__prayer {
	margin-block-end: 0.6rem;
	padding: 0.6rem 0.75rem;
	border-inline-start: 3px solid var(--wp--preset--color--interactive, #245746);
	border-radius: var(--r-input, 12px);
	background-color: var(--wp--preset--color--surface, #fff);
}

.jmns-bot__prayer-head {
	margin: 0 0 0.4rem;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.jmns-bot__prayer-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.1rem 0.75rem;
}

.jmns-bot__prayer-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	/* A hairline between rows, not a table border: the eye needs to carry a
	   name across to a time, and nothing else. */
	border-block-end: 1px solid rgb(var(--jmns-hairline-rgb, 38 51 42) / 0.08);
	padding-block: 0.15rem;
}

.jmns-bot__prayer-name {
	font-size: 0.875rem;
}

.jmns-bot__prayer-time {
	font-variant-numeric: tabular-nums;
}

.jmns-bot__prayer-note {
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
}

/* Folded results, when a direct answer came first. */
.jmns-bot__more > summary {
	cursor: pointer;
	font-weight: 600;
	/* A 24px target at minimum, per SC 2.5.8 — a bare summary is text-height. */
	min-block-size: 24px;
	padding-block: 0.2rem;
}

.jmns-bot__more[open] > summary {
	margin-block-end: 0.5rem;
}

.jmns-bot__retry {
	display: inline-block;
	margin-block-start: 0.5rem;
	min-block-size: 44px;
	padding: 0.4rem 0.9rem;
	border: 1px solid currentColor;
	border-radius: var(--r-pill, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------------------- input -- */

/*
 * `hidden` has to win over `display: flex`, exactly as it does for the panel
 * above — the UA rule is a bare `display: none` and loses to any display
 * declaration on the same element. Without this the chips stay on screen after
 * the first question and the fix does nothing.
 */
.jmns-bot__chips[hidden] {
	display: none !important;
}

/*
 * §5: compact tiles, not large outlined pills.
 *
 * Four green-outlined pills wrapping across the panel were the loudest thing
 * on the first screen — four borders in the brand colour competing with the
 * greeting above them. As filled tiles in two columns they read as options to
 * pick from, and the outline is spent on the panel instead.
 */
.jmns-bot__chips {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.35rem;
	padding: 0 1rem 0.5rem;
}

/* One column where two would leave no room for the words. */
@media (max-width: 22rem) {
	.jmns-bot__chips {
		grid-template-columns: minmax(0, 1fr);
	}
}

.jmns-bot__chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	/* 44px of target, which the pills did not have either. */
	min-block-size: 44px;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-input, 12px);
	background-color: var(--wp--preset--color--surface-muted, #F1F3F1);
	color: var(--wp--preset--color--interactive, #245746);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: start;
	cursor: pointer;
}

/* The affordance the guide draws, without putting a glyph in every label. */
.jmns-bot__chip::after {
	content: "\2192";
	flex: 0 0 auto;
	opacity: 0.7;
}

.jmns-bot__chip:hover {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	border-color: var(--wp--preset--color--primary-light, #8DAFA4);
}

.jmns-bot__form {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-block-start: 1px solid rgb(var(--jmns-hairline-rgb, 38 51 42) / var(--jmns-a-rule, 0.15));
}

/*
 * Kept qualified.
 *
 * The bundled theme puts its form defaults in :where(), so a single class would
 * be enough there — but this stylesheet has to hold up under a theme that does
 * not, and `input[type="text"]` outranks one class. The panel ships its own CSS
 * precisely so it looks the same wherever it lands, so it defends itself rather
 * than trusting the theme to be considerate.
 */
.jmns-bot .jmns-bot__input {
	flex: 1;
	/*
	 * A flex item defaults to `min-width: auto`, which is its *content's*
	 * minimum — for this field that is the placeholder, about 260px. Below a
	 * 390px viewport the field then refused to shrink and pushed Hantar out of
	 * the form: measured, 26px past the padding at 360px and 66px at 320px, so
	 * the button ran under the edge of the panel on most Android phones.
	 *
	 * `0` lets the field give way, which is what it should do — a text input can
	 * scroll its own content, a button cannot shrink its label.
	 */
	min-inline-size: 0;
	min-block-size: 44px;
	padding: 0.5rem 0.75rem;
	/*
	 * 0.55, not 0.4. The field sits on white inside a white panel, so this
	 * border is the only thing marking where the control is — and at 0.4 it
	 * rendered #A8ADAA, 2.27:1, under the 3:1 SC 1.4.11 asks of a boundary that
	 * is doing that job alone. 0.55 measures 3.31:1.
	 */
	border: 1px solid rgb(var(--jmns-hairline-rgb, 38 51 42) / 0.55);
	border-radius: var(--r-input, 12px);
	font: inherit;
	/* Under 16px iOS zooms the page when the field takes focus. */
	font-size: max(1rem, 16px);
}

/*
 * §19: one focus ring, not two greens.
 *
 * The field carries a 1px border of its own and then took the theme's 3px
 * focus outline on top, so focusing it produced a green line inside a green
 * line. One 2px ring, offset clear of the border, is the whole indicator.
 */
.jmns-bot .jmns-bot__input:focus-visible {
	/*
	 * The guide names #3F7767. That is not a portal token, and the nearest one
	 * — `primary-light` — measures 2.39:1 on this white panel, under the 3:1
	 * SC 1.4.11 asks of a focus indicator. `interactive` is the colour the rest
	 * of the site rings with and carries 8.31:1 here. The complaint in §19 was
	 * a doubled ring rather than a dark one, and a single 2px ring answers it.
	 */
	outline: 2px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 2px;
}

.jmns-bot__send {
	/*
	 * Never shrink, never wrap. The button is the fixed part of this pair and
	 * the field is the elastic one; letting "Hantar" wrap to two lines to save
	 * space would be worse than a narrower field.
	 */
	flex: 0 0 auto;
	white-space: nowrap;
	min-block-size: 44px;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--r-input, 12px);
	background-color: var(--wp--preset--color--interactive, #245746);
	color: var(--wp--preset--color--surface, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.jmns-bot__disclaimer,
.jmns-bot__inline-disclaimer,
.jmns-bot__office {
	margin: 0;
	padding: 0 1rem 0.75rem;
	font-size: 0.75rem;
	opacity: 0.85;
}

.jmns-bot__inline-disclaimer {
	padding: 0;
}

/* --------------------------------------------------------------- mobile -- */

@media (max-width: 30rem) {
	/*
	 * On a phone the panel takes the screen rather than floating over content,
	 * which §5.7 requires — a floating panel obstructs the page it is meant to
	 * help you read.
	 */
	.jmns-bot__panel {
		position: fixed;
		inset: 0;
		inline-size: 100%;
		max-block-size: none;
		/* Edge to edge, so no rounded corner floats over the page behind it. */
		border-radius: 0;
	}

	/*
	 * Clipped, not `display: none`.
	 *
	 * The label was the launcher's only text. Removing it from the layout also
	 * removed it from the accessibility tree, and the avatar carries alt="" —
	 * so on every phone the button announced as nothing at all, which is
	 * SC 4.1.2. Clipping keeps the name and frees the space.
	 */
	.jmns-bot__launcher-label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.jmns-bot__launcher {
		/*
		 * A 48px circle, the same as the accessibility launcher in the opposite
		 * corner.
		 *
		 * It was a 64x48 pill holding a round avatar, so the two floating
		 * controls were different widths, different shapes and only accidentally
		 * the same height — they read as two unrelated blobs stuck to the screen
		 * rather than as a pair of controls. Same size and same shape is what
		 * makes them look put there on purpose.
		 */
		inline-size: 48px;
		block-size: 48px;
		min-inline-size: 0;
		padding: 0;
		justify-content: center;
		overflow: hidden;
	}

	.jmns-bot__launcher img,
	.jmns-bot__launcher svg {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}
}

/*
 * Only while the panel is covering the screen — the class is set by bot.js on
 * the same condition. Without it the page scrolls underneath a fullscreen
 * panel, so closing the bot leaves the visitor somewhere they never navigated
 * to. The search overlay already does this; the bot did not.
 */
body.jmns-bot-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.jmns-bot,
	.jmns-bot__panel {
		transition: none;
	}
}