/**
 * The Church Assistant, dressed as one of the church's own chats.
 *
 * AI Engine ships a dark "ChatGPT" skin that belongs to somebody else's
 * product and hangs a 60px circle in the bottom-right corner. Round 35 moved
 * that circle to a teal tab on the right edge and slid a full-height drawer out
 * from behind it, which solved the collision with the church's chat dock and
 * left the assistant as the only thing on the site that opened like that.
 *
 * **Round 36 makes it a chat box.** The window is the same 19rem panel as a
 * conversation, in the same rail, with the same head, corners, border and
 * shadow; the launcher is a row in the Messages panel rather than anything
 * floating; and on a phone it leaves the same round chathead behind, with a
 * cross on it that means the same thing.
 *
 * Two modes, chosen in PHP and carried on the body (modules/chatbot/dock.php):
 *
 *   .icc-assistant--docked   a signed-in member. assistant.js has moved the
 *                            widget into #icc-dock, so the window is a flex
 *                            item of the rail and the browser -- not a sum in
 *                            JavaScript -- decides where along it to sit.
 *                            There is no standing launcher: the Messages panel
 *                            is the way in.
 *   .icc-assistant--guest    a visitor. No Messages panel to be listed in, so
 *                            the chathead is the launcher and is on the page
 *                            from the start.
 *
 * Everything below is written to win on specificity rather than on order,
 * because AI Engine registers its own stylesheet from `wp_enqueue_scripts` and
 * the order has changed between its versions before.
 *
 * The DOM, confirmed in the browser rather than assumed:
 *
 *   .mwai-chatbot-container            the server's div; React's mount point
 *     .mwai-chat.mwai-window.mwai-chatgpt-theme    gains .mwai-open when open
 *       .mwai-trigger > .mwai-icon-container > img.mwai-icon
 *       .mwai-window-box
 *         .mwai-header > .mwai-buttons > .mwai-close-button
 *         .mwai-body > .mwai-conversation, .mwai-input
 */

.mwai-chatgpt-theme {
	/* theme.json: deep #194657, teal #286478, sky #99d2e7, sky-soft #e9f5fa,
	   gold #ecb913, ink #1c1c1a, ground-soft #f7f5ef, line #e4e1d8 */
	--icc-deep: #194657;
	--icc-teal: #286478;
	--icc-sky: #99d2e7;
	--icc-sky-soft: #e9f5fa;
	--icc-gold: #ecb913;
	--icc-ink: #1c1c1a;
	--icc-paper: #f7f5ef;
	--icc-line: #e4e1d8;

	/* AI Engine reads all of these; overriding them is enough for most of the
	   skin and survives the plugin reorganising its own selectors. */
	--mwai-width: 19rem;
	--mwai-maxHeight: 100%;
	--mwai-borderRadius: 3px;
	--mwai-borderColor: var(--icc-line);
	--mwai-fontColor: var(--icc-ink);
	--mwai-backgroundPrimaryColor: #ffffff;
	--mwai-backgroundSecondaryColor: var(--icc-paper);
	--mwai-backgroundHeaderColor: var(--icc-deep);
	--mwai-headerColor: #ffffff;
	--mwai-accentColor: var(--icc-teal);
	--mwai-bubbleColor: var(--icc-deep);
	--mwai-iconTextColor: #ffffff;
	--mwai-iconTextBackgroundColor: var(--icc-deep);
	--mwai-conversationsBackgroundColor: var(--icc-paper);
	--mwai-conversationsTextColor: var(--icc-ink);
	--mwai-iconSize: 2.9rem;

	/* The type, taken from .icc-dock__text and .icc-dock__body in icc.css
	   rather than chosen again here. AI Engine's own defaults are 15px on an
	   inherited family with 15px of padding everywhere, which is a different
	   voice from the conversation sitting next to it in the same rail -- and
	   the two are read one after the other, so the difference is the only
	   thing about it anybody notices.

	   --mwai-fontFamily rather than a `font-family` rule: `.mwai-chatgpt-theme`
	   declares `font-family: var(--mwai-fontFamily, inherit)`, so the variable
	   is the supported way in and it reaches the parts of the widget our
	   selectors below do not.

	   --mwai-fontSize is worth more than it looks. AI Engine also sets
	   `.mwai-reply .mwai-text * { font-size: var(--mwai-fontSize) }`, so every
	   element the model's Markdown produces -- list items, table cells, the
	   "further reading" line -- is sized from this one declaration. */
	--mwai-fontFamily: var(--icc-sans, Inter, "Inter Fallback", -apple-system, "Segoe UI", Roboto, sans-serif);
	--mwai-fontSize: 0.8125rem;
	--mwai-lineHeight: 1.5;

	/* .icc-dock__body's 0.75rem of padding and 0.55rem between messages, as one
	   number: AI Engine puts this on `.mwai-reply`, which is the row rather
	   than the bubble, so half of it lands above a message and half below and
	   two adjacent rows add up to the gap. See the .mwai-reply rule below. */
	--mwai-spacing: 0.75rem;
}

/* ============================================================ the chat box */

/* **AI Engine's markup is left exactly where AI Engine put it.**
 *
 * The obvious build for this round was to move `.mwai-chatbot-container` into
 * #icc-dock, give the wrappers `display: contents` and let the rail's flex row
 * place the window beside the conversations with no arithmetic at all. It
 * lays out beautifully and it is dead: re-parenting that element stops AI
 * Engine's own trigger opening the window, silently, and moving it back does
 * not undo it.
 *
 * So the window stays fixed to the corner and is pushed left by the width of
 * the rail, which assistant.js measures and hands over as
 * `--icc-assistant-offset`. An empty rail measures zero and the assistant sits
 * where a first conversation would.
 */

/* **AI Engine's own root is a full-screen sheet, and it has to stop being one.**
 *
 * Open on a phone, `.mwai-chat.mwai-window` becomes `position: fixed; inset: 0`
 * with an opaque white background at `z-index: 999999` -- the plugin's
 * fullscreen mobile mode. Our window is a docked box, so what that produces is
 * a small chat floating on a white sheet that covers the entire site: measured
 * with elementFromPoint, every tap in the top two thirds of the page landed on
 * the sheet rather than the page. It is not visible as a bug in a screenshot
 * of the chat, only in a screenshot of everything else.
 *
 * So the root is made what we need it to be -- a wrapper that paints nothing,
 * covers nothing and catches nothing. The two things inside it that should be
 * clickable say so for themselves, below.
 */
.icc-has-assistant .mwai-chat.mwai-window {
	/* `display: contents` is the whole fix: the root stops generating a box at
	   all, so there is nothing to paint, nothing to cover and nothing to
	   position. Both things inside it are fixed, so they do not notice.
	   Merely un-fixing it was not enough -- it kept a 100vh height and left an
	   812px blank block at the foot of every page. */
	display: contents !important;

	/* Belt and braces for a browser without `display: contents`: on its own,
	   each of these takes one part of the sheet away. */
	position: static !important;
	inset: auto !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	background: transparent !important;
	z-index: auto !important;
	overflow: visible !important;
	pointer-events: none !important;
}

.icc-has-assistant .mwai-window > .mwai-trigger,
.icc-has-assistant .mwai-window > .mwai-window-box {
	pointer-events: auto !important;
}

/* And it locks the page's scroll with an inline `overflow: hidden` on the body,
   which is right for a chat that fills the screen and wrong for one that is a
   box in the corner -- a member could not scroll the page they were asking
   about. An author `!important` outranks an inline declaration that is not.
   Keyed on our own class, set by assistant.js while the window is open, so
   nothing else that legitimately locks the page is touched. */
body.icc-assistant-open {
	overflow: visible !important;
}

/* A closed window must not be left catching clicks over a 19rem strip of the
   page. AI Engine only fades it.
 *
 * **`visibility`, and never `display`.** AI Engine opens in two steps -- it
 * puts `.mwai-opening` on the window, runs an animation on the box, and swaps
 * in `.mwai-open` when that animation ends. A box that is `display: none`
 * while it is opening runs no animation, so the end never arrives and the
 * widget sits in `.mwai-opening` for ever: the trigger clicks, nothing appears,
 * and there is no error anywhere. That cost most of an evening, and it looked
 * exactly like AI Engine refusing to work at all.
 */
.icc-has-assistant .mwai-window:not(.mwai-open):not(.mwai-opening) > .mwai-window-box {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* The window itself, built to the same measurements as .icc-dock__win in
   icc.css. If that panel is ever re-measured, this is the other place.
   It is styled while it is opening as well as once it is open, or the panel
   animates in at AI Engine's size and snaps to ours. */
.icc-has-assistant .mwai-window > .mwai-window-box {
	position: fixed !important;
	top: auto !important;
	left: auto !important;
	bottom: 0 !important;
	right: calc(1rem + var(--icc-assistant-offset, 0px)) !important;
	z-index: 80 !important;
	pointer-events: auto;
	display: flex !important;
	flex-direction: column;
	width: 19rem !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: min(59.5rem, calc(100vh - 6rem)) !important;
	background: #ffffff !important;
	border: 1px solid var(--icc-line) !important;
	border-bottom: 0 !important;
	border-radius: var(--icc-radius, 3px) var(--icc-radius, 3px) 0 0 !important;
	box-shadow: 0 12px 32px rgba(28, 28, 26, 0.16) !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	filter: none !important;
	overflow: hidden !important;
}

/* The reserved height, from icc.css's own gate. A window that grows with its
   conversation makes an empty chat a different size from a busy one, which is
   the thing every messenger this congregation uses does not do. */
@media (min-width: 62em) and (min-height: 34rem) {
	.icc-has-assistant .mwai-window > .mwai-window-box {
		height: min(28.125rem, calc(100vh - 6rem)) !important;
	}
}

/* The body has to grow, or the conversation keeps its own short box inside the
   panel and the input floats in the middle of it. */
.mwai-chatgpt-theme .mwai-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

.mwai-chatgpt-theme .mwai-conversation {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	max-height: none !important;
	height: auto !important;
	overflow-y: auto !important;
}

/* ============================================================= the chathead */

/* AI Engine's trigger, made into the same 2.9rem circle the conversations
   leave on a phone (.icc-head in icc.css).
 *
 * **`.mwai-icon-container` is the button**, not the `.mwai-trigger` around it:
 * it carries role="button", tabindex="0" and the aria-label, and AI Engine
 * binds the open/close handler to it. Hiding it -- the obvious way to get rid
 * of the stock avatar -- silently removes the click target and the keyboard
 * access with it, and the head becomes decoration.
 */
.icc-has-assistant .mwai-window .mwai-trigger {
	position: fixed !important;
	z-index: 81 !important;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.9rem !important;
	height: 2.9rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--icc-ground, #ffffff) !important;
	border-radius: 50% !important;
	/* The church's own AI mark, round 38. `background-color` and
	   `background-image` as two properties and not the shorthand, because the
	   hover rule below sets a colour and a shorthand there would take the
	   picture off on the way past. The colour still matters for the moment
	   before the file has loaded. */
	background-color: var(--icc-deep) !important;
	background-image: var(--icc-assistant-head) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	box-shadow: 0 6px 18px rgba(28, 28, 26, 0.28) !important;
	cursor: pointer;
	opacity: 1 !important;
	transform: none !important;
	transition: background 140ms ease, transform 140ms ease;
}

.icc-has-assistant .mwai-window .mwai-trigger:hover {
	/* Under an opaque photograph this is not seen, and it is kept because the
	   lift is the hover state now and the colour is what shows if the file
	   ever fails to load. */
	background-color: var(--icc-teal) !important;
	transform: translateY(-2px);
}

/* A visitor's way in, from the moment the page loads. A member's, only once
   they have opened it here -- until then the Messages panel is the only
   launcher, which is the whole point of the round. */
.icc-assistant--guest .mwai-window .mwai-trigger,
.icc-assistant-seen.icc-assistant--docked .mwai-window .mwai-trigger {
	display: flex !important;
}

/* Open, there is nothing for it to do but sit on top of the conversation it
   would close. The window's own close button is the way out. */
.icc-has-assistant .mwai-window.mwai-open .mwai-trigger,
.icc-has-assistant .mwai-window.mwai-opening .mwai-trigger {
	display: none !important;
}

.icc-assistant--guest .mwai-window .mwai-trigger {
	right: 1rem !important;
	bottom: 1rem !important;
	left: auto !important;
	top: auto !important;
}

/* **A member's chathead sits at the right-hand end of the row, at every
 * width.** (Round 37: "Do not keep the AI chathead in smaller screens to the
 * left side. The chatheads should always appear on the right sides.")
 *
 * Round 36 put it bottom-LEFT, because #icc-headrail is pinned bottom-right
 * and holds a face per open conversation, and a round mark dropped into the
 * same corner lands on top of whichever conversation happens to be last. That
 * reasoning was sound about the corner and wrong about the answer: it is a
 * chathead, it belongs in the row of chatheads, and exiled to the opposite
 * corner it read as a different kind of thing altogether.
 *
 * The first attempt at the fix moved it right only below 34em, which left
 * every tablet width still showing it on the left -- the church's "always" is
 * one rule, and this is it.
 *
 * `right`, offset so it lands immediately BESIDE whatever is in that corner
 * rather than on top of it: the strip of faces on a phone, the open
 * conversation windows on a desktop. Both rows are right-anchored and grow
 * leftwards, so the corner itself is the one spot that is not reliably free;
 * the position just left of the last one always is. With nothing open the
 * offset is zero and this sits exactly where the first face would.
 *
 * assistant.js keeps `--icc-assistant-head-offset` current -- it picks the row
 * that is actually on screen and measures it, from a ResizeObserver and a
 * MutationObserver, because messages.js adds and removes both without telling
 * anybody.
 *
 * 0.65rem and 2.9rem are #icc-headrail's and .icc-head's own numbers from
 * icc.css, so the two rows share a baseline and a height. If those are ever
 * re-measured, this is the other place. */
.icc-assistant--docked .mwai-window .mwai-trigger {
	right: calc(0.65rem + var(--icc-assistant-head-offset, 0px)) !important;
	bottom: 0.65rem !important;
	left: auto !important;
	top: auto !important;
}

.icc-has-assistant .mwai-window .mwai-trigger .mwai-icon-container {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: none !important;
	cursor: pointer;
}

.icc-has-assistant .mwai-window .mwai-trigger img.mwai-icon,
.icc-has-assistant .mwai-window .mwai-trigger .mwai-icon-text-container,
.icc-has-assistant .mwai-window .mwai-trigger .mwai-bubble {
	display: none !important;
}

/* **Nothing is drawn inside the head any more.** Until round 38 this was a
   speech mark masked in white -- drawn rather than fetched, because the stock
   avatar was a PNG request on every page for a 44px circle. The church has
   since given the assistant a face of its own, so the picture is the head and
   a glyph on top of it would be a second mark over the first.

   The container itself stays exactly as it is: it carries role="button", the
   tabindex and the aria-label, and AI Engine binds opening to it. Emptying it
   is safe; hiding it is not. */
.icc-has-assistant .mwai-window .mwai-trigger .mwai-icon-container::after {
	content: none;
}

/* **The assistant's face** lives in --icc-assistant-head, and that one is
   declared by PHP rather than here: a stylesheet cannot know where the plugin
   is installed, and this is a static file. See dock.php.

   The artwork was handed over by the church rather than described -- the AI
   monogram in its gradient ring on its own near-black ground. 128px square,
   for a 46px head at two-times, and a JPEG because it is a gradient: the PNG
   of the same image is three times the bytes and no better at this size.

   It is not cropped in the file. All four places that wear it are circles
   with `border-radius: 50%` and `cover`, which takes the corners off, and the
   ring sits well inside them -- so one file serves every shape.

   **Two variables went when it arrived**: --icc-assistant-glyph, the speech
   mark masked into the middle of the chathead, and --icc-assistant-mark, the
   white version of it drawn for the header face earlier in this same round.
   Neither has anything left to draw on top of a face. */
.mwai-chatgpt-theme {
	/* icc_icon( 'close', 15 ), character for character: the 24 viewBox, the
	   1.5 stroke, the round caps, the same path. helpers.php is the original;
	   if that glyph is ever redrawn, this is the other place. */
	--icc-close-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.icc-has-assistant .mwai-window .mwai-trigger .mwai-icon-container:focus-visible {
	outline: 3px solid var(--icc-gold) !important;
	outline-offset: 2px;
}

/* The cross on the chathead, added by assistant.js. It takes the assistant off
   the strip; it does not take it out of Messages, and the row there opens it
   again. Same promise as the cross on a conversation.
 *
 * **And now the same appearance, which is what round 37 was about.** Every
 * number below is `.icc-head__shut`'s from icc.css -- 1.25rem, the 2px ring in
 * the page's own ground colour, #ae1200, the multiplication sign at 0.8125rem,
 * the same shadow and the same -0.2rem overhang. It was a white circle with a
 * hairline border and a drawn SVG path, sitting beside red ones, and the church
 * read that as a different control. If .icc-head__shut is ever re-measured,
 * this is the other place.
 *
 * Specificity, not preference: AI Engine puts `position: relative` on the
 * trigger's children, which a single-class rule of ours loses to -- measured,
 * and it stretched the cross to 70px across the bottom of the head. */
.icc-has-assistant .mwai-window .mwai-trigger .icc-assistant__x {
	position: absolute !important;
	top: -0.2rem !important;
	right: -0.2rem !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 2;
	display: grid !important;
	place-items: center;
	width: 1.25rem !important;
	height: 1.25rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--icc-ground, #ffffff) !important;
	border-radius: 50% !important;
	background: #ae1200 !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(28, 28, 26, 0.3) !important;
	font-family: var(--icc-sans, inherit) !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-align: center;
	cursor: pointer;
}

/* **A visitor never gets a cross**, at any width. They have no Messages panel
 * to reopen the assistant from, so the chathead is the only way in and a cross
 * on it is a one-way door: one tap and the assistant is off the site until the
 * page is reloaded, with nothing on screen to say why.
 *
 * `!important`, which this rule needed from the day it was written. It is
 * (0,4,0) and so is the rule that draws the cross, but that one says
 * `display: grid !important` -- so !important won, and every visitor had a
 * cross for four rounds. It went unnoticed because the cross was a white
 * circle with a hairline border on a navy head; round 37 made it red and the
 * church saw it the same day.
 *
 * assistant.js does not build the element for a guest at all, which is the
 * real fix. This is the backstop, for the case where that check is ever moved
 * or the markup is rendered by something else. */
.icc-assistant--guest .mwai-window .mwai-trigger .icc-assistant__x {
	display: none !important;
}

.icc-has-assistant .mwai-window .mwai-trigger {
	/* The cross is positioned against this. */
	position: fixed !important;
}

/* =================================================== the row in the panel */

/* Built from .icc-bell__item like every conversation beside it; only the mark
   on the left says it is not a person. */
.icc-bell__item--assistant .icc-assistant__mark {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	/* The third place the face appears, and the one where it stands among
	   real photographs: the assistant's row in the Messages panel, beside
	   members' headshots. The svg inside is left in the markup and hidden
	   rather than removed, because it is messages.js's own and this stylesheet
	   does not own that file. */
	background-color: var(--icc-deep);
	background-image: var(--icc-assistant-head);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
}

.icc-bell__item--assistant .icc-assistant__mark svg {
	display: none;
}

.icc-bell__item--assistant .icc-bell__item-text {
	color: #5d5e57;
}

/* ============================================================== the detail */

/* **Three flex items, and all three are ours.**

   What AI Engine renders here, read off the live page rather than off its
   source: `<div class="mwai-header"><div class="mwai-buttons"><div
   class="mwai-close-button"></div></div></div>`. That is all. The chatgpt
   theme emits a title element only when a title is configured and this bot's
   is not, and it draws an avatar only for the `timeless` theme.

   So there is one real child and two pseudo-elements -- which is exactly the
   three the dock's header has: face, title, cross. `order` puts them in that
   sequence, because ::after comes last in the DOM and the title belongs in the
   middle of the row.

   `justify-content` is flex-start now rather than space-between: with a title
   at `flex: 1 1 auto` between them there is no free space left to distribute,
   and space-between with three items would have pushed the face and the title
   apart the moment the title was short. */
.mwai-chatgpt-theme .mwai-header {
	background: var(--icc-deep) !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	padding: 0.5rem 0.4rem 0.5rem 0.85rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.5rem;
	min-height: 2.75rem;
}

/* **The assistant's own head**, where a conversation has the other person's
   photograph. (Round 38, the church: "it's missing the chathead in the
   mwai-header".)

   Every number is .icc-dock__face's, from icc.css: 26px, a circle, and the 1px
   white ring -- which exists there because a dark photograph disappears into
   this navy, and earns its keep here twice over, since the artwork's own ground
   is nearly black.

   **And it is a photograph now, the same one the chathead wears** (round 38).
   It was a drawn speech mark on a teal disc for the few hours between the two
   halves of this round, on the reasoning that the assistant had no photograph
   to show. It has one. Two faces for one correspondent is the fault round 37
   was spent on. */
.mwai-chatgpt-theme .mwai-header::before {
	content: "";
	order: 0;
	flex: 0 0 auto;
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--icc-deep);
	background-image: var(--icc-assistant-head);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* The church's name, handed in from PHP so the stylesheet does not hard-code
   it. On ::after with `order: 1`, because ::before is the head now; every
   other value is .icc-dock__title's. */
.mwai-chatgpt-theme .mwai-header::after {
	content: var(--icc-chatbot-title, "Church Assistant");
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mwai-chatgpt-theme .mwai-header .mwai-buttons {
	order: 2;
	flex: 0 0 auto;
	margin-left: 0 !important;
}

.mwai-chatgpt-theme .mwai-header * {
	color: #ffffff !important;
}

/* **The close control, .icc-dock__x down to the glyph this time.**

   Round 37 sized the circle and left the theme's own cross inside it. Round 38
   is the church putting the two windows side by side: "the close button of the
   ai chatbot docked chatbox is not similar to the regular chatbox."

   It was not similar in any respect. The chatgpt theme draws its cross as two
   absolutely positioned bars, 22px long and 1.2px wide, rotated 45 degrees and
   placed by `translate(16px, 5px)` -- a number written for its own 32px box,
   which inside the 1.75rem one this rule gives the button puts the middle of
   the X about 3px right and 2px low. It is 31px corner to corner inside a 28px
   circle, it is a third the weight of every other line on this site, and on
   hover it spins to 135 degrees, which nothing else here does.

   So both of its pseudo-elements are taken away and the glyph becomes
   icc_icon( 'close', 15 ) -- what the dock's cross is drawn with. A
   background-image rather than a mask, because the hover disc underneath is a
   background-color and a mask would cut it to the shape of the cross; which is
   also why the hover rule below names background-color rather than the
   `background` shorthand it used before, since the shorthand would take the
   glyph off on the way past. */
.mwai-chatgpt-theme .mwai-close-button {
	width: 1.75rem !important;
	height: 1.75rem !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background-image: var(--icc-close-glyph) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 15px 15px !important;
	cursor: pointer;
}

.mwai-chatgpt-theme .mwai-close-button::before,
.mwai-chatgpt-theme .mwai-close-button::after {
	content: none !important;
}

.mwai-chatgpt-theme .mwai-close-button:hover {
	background-color: rgba(255, 255, 255, 0.16) !important;
}

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

/* **The bubbles are .icc-dock__msg, and that is the whole of the design here.**
 *
 * Round 36 gave them a look of their own -- the assistant on pale sky, the
 * member in solid deep teal, both with 10px lozenge corners -- and the church's
 * answer was the plainest possible one: the assistant's box should look like
 * the other boxes. It opens in the same rail, a member moves between it and a
 * conversation in one glance, and any difference between the two reads as a
 * mistake rather than as a distinction.
 *
 * So the colours are the dock's colours and they are the way round the dock has
 * them: **what I wrote is on pale sky, what came back is on white.** That is
 * the opposite of what this file did before. It is not an aesthetic preference
 * -- it is the convention every conversation on this site already follows
 * (.icc-dock__msg is white, .icc-dock__msg.is-mine is --icc-sky-soft), so the
 * assistant reading the other way round made the member's own question look
 * like the answer.
 *
 * The four numbers below are lifted from icc.css and not invented:
 *
 *   padding       0.45rem 0.65rem   .icc-dock__msg
 *   radius        var(--icc-radius) .icc-dock__msg  (3px, not 10px)
 *   max-width     85%               .icc-dock__msg
 *   border        1px --icc-line    .icc-dock__msg, transparent when mine
 *
 * If that panel is ever re-measured, this is the other place -- the same note
 * the window rule above carries, for the same reason.
 */

/* The row. AI Engine's own padding is 15px on all four sides; ours is the
   dock's body padding, halved top and bottom so that two adjacent rows come to
   the 0.55rem gap `.icc-dock__body` puts between messages. */
.mwai-chatgpt-theme .mwai-reply {
	padding: calc(var(--mwai-spacing) / 2) var(--mwai-spacing) !important;
	font-family: inherit !important;
}

/* The bubble the assistant answers in.
 *
 * **The padding is the fix the church asked for by name.** AI Engine pads
 * `.mwai-reply.mwai-user .mwai-text` (10px 16px) and gives the AI side nothing
 * at all -- `.mwai-reply.mwai-ai .mwai-text` sets only `max-width: 100%` -- so
 * once round 36 gave that element a background, the background was the only
 * thing it had: text hard against all four edges of a coloured box, which is
 * the one thing no other message on this site does. */
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text,
.mwai-chatgpt-theme .mwai-ai .mwai-text {
	display: inline-block !important;
	max-width: 85% !important;
	padding: 0.45rem 0.65rem !important;
	background: var(--icc-ground, #ffffff) !important;
	color: var(--icc-ink-soft, #3d3d38) !important;
	border: 1px solid var(--icc-line) !important;
	border-radius: var(--icc-radius, 3px) !important;
	font-size: var(--mwai-fontSize) !important;
	line-height: var(--mwai-lineHeight) !important;

	/* **`break-word`, and not the `anywhere` .icc-dock__text uses.** The two
	   break a long unbreakable string identically; they differ in whether that
	   break counts when the browser works out how wide the box WANTS to be.
	   `anywhere` counts, so a shrink-to-fit bubble collapses towards its widest
	   character -- measured here, "Amen." came out 54px wide and set itself as
	   "Amen" and then "." on a second line. `anywhere` is safe on
	   .icc-dock__text because that is a paragraph inside a box whose width
	   something else has already settled; here it is on the box itself. */
	overflow-wrap: break-word;
}

/* The member's own, on the sky the dock uses for the same thing. No border:
   `.icc-dock__msg.is-mine` sets `border-color: transparent` rather than
   removing it, so that the two kinds of message stay exactly the same size. */
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-text,
.mwai-chatgpt-theme .mwai-user .mwai-text {
	display: inline-block !important;
	max-width: 85% !important;
	padding: 0.45rem 0.65rem !important;
	background: var(--icc-sky-soft) !important;
	color: var(--icc-ink-soft, #3d3d38) !important;
	border: 1px solid transparent !important;
	border-radius: var(--icc-radius, 3px) !important;
	font-size: var(--mwai-fontSize) !important;
	line-height: var(--mwai-lineHeight) !important;
	overflow-wrap: break-word;
}

/* **The wrapper AI Engine puts around an answer, and why `max-width: 85%`
 * does not work through it.**
 *
 * A reply is `.mwai-reply.mwai-ai > div > span.mwai-text`. That bare middle
 * div has no class and is itself `display: flex` with `flex: 1 1 0%`, and the
 * row above it is a column flex with `align-items: flex-start`. So the div is
 * shrink-wrapped to its contents -- and the bubble's `max-width: 85%` is then
 * a percentage of a box whose width is the bubble. The browser resolves that
 * circle the only way it can: the bubble gets 85% of its own natural width,
 * which is always a little narrower than the words need.
 *
 * The symptom is that **the last word of every short answer wraps to a second
 * line**, at every length. Measured: "Grace and peace to you." wants 177px and
 * was given 151, which is 85% of 177 to the pixel. It reads as a chat box that
 * cannot measure text, and it is invisible in the CSS -- every declaration in
 * the rule above is the one that was intended.
 *
 * So the wrapper is made a plain full-width block, which is what the member's
 * side already is (`.mwai-reply.mwai-user` is `display: block`, and its bubble
 * has never had this bug). 85% then means 85% of the row, and `width:
 * fit-content` is what shrink-wraps the bubble -- a block does not do it by
 * itself, and that is the declaration doing the work the flex box was doing
 * before, correctly this time.
 *
 * `align-self: stretch` as well as `width: 100%`: the div is still a flex item
 * of the row, and a column flex item's width is its cross size. */
.mwai-chatgpt-theme .mwai-reply.mwai-ai > div {
	display: block !important;
	align-self: stretch !important;
	width: 100% !important;
	flex: 0 0 auto !important;
}

.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text {
	display: block !important;
	width: fit-content !important;
	max-width: 85% !important;
}

/* "Assistant:" above the answer, which is AI Engine's `aiName`. Sized and
   coloured as .icc-dock__who -- round 16's "the timestamp and user name is too
   big, make them tiny", which this widget never heard. AI Engine's own rule is
   0.75em at weight 600 with opacity 0.6, which at our smaller body size is a
   bold grey label over a message that is neither. */
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-name .mwai-name-text,
.mwai-chatgpt-theme .mwai-reply .mwai-name .mwai-name-text {
	margin-bottom: 0.15rem !important;
	font-size: 0.625rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	line-height: 1.45 !important;
	text-transform: none !important;
	color: var(--icc-muted, #72736c) !important;
	opacity: 1 !important;
}

/* Markdown inside an answer, kept at the message's own size and voice.
 *
 * AI Engine sets headings in `ui-monospace, "SF Mono", Menlo, Consolas` -- a
 * code face, in a church's answer about the catechism. The assistant is asked
 * for medium-length prose and returns headings and lists often enough that this
 * is not a corner case. */
.mwai-chatgpt-theme .mwai-reply .mwai-text h1,
.mwai-chatgpt-theme .mwai-reply .mwai-text h2,
.mwai-chatgpt-theme .mwai-reply .mwai-text h3,
.mwai-chatgpt-theme .mwai-reply .mwai-text h4,
.mwai-chatgpt-theme .mwai-reply .mwai-text h5,
.mwai-chatgpt-theme .mwai-reply .mwai-text h6 {
	font-family: inherit !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0.5rem 0 0.15rem !important;
}

.mwai-chatgpt-theme .mwai-reply .mwai-text p {
	margin: 0 0 0.4rem !important;
}

.mwai-chatgpt-theme .mwai-reply .mwai-text ul,
.mwai-chatgpt-theme .mwai-reply .mwai-text ol {
	margin: 0 0 0.4rem 1.1rem !important;
	padding: 0 !important;
}

.mwai-chatgpt-theme .mwai-reply .mwai-text li {
	margin: 0 0 0.15rem !important;
}

/* The first and last thing in a bubble sits against the bubble's padding and
   not on top of a margin of its own.
 *
 * Three levels deep, because that is what the widget emits -- confirmed in the
 * browser, not assumed: an answer is `span.mwai-text > div > p` and `> ul`,
 * and AI Engine's own version of this rule reaches only `> *` and
 * `> span > *`. So the last list in an answer kept its 6.4px and the bubble
 * had 13.6px under the words against 7.2px over them. A bubble that is not
 * centred on its own contents is the sort of thing that reads as cheap
 * without ever being identifiable.
 *
 * Chained `:last-child` rather than a bare descendant selector: the last
 * paragraph inside a list item is a last child too, and it needs its margin. */
.mwai-chatgpt-theme .mwai-reply .mwai-text > *:first-child,
.mwai-chatgpt-theme .mwai-reply .mwai-text > *:first-child > *:first-child,
.mwai-chatgpt-theme .mwai-reply .mwai-text > *:first-child > *:first-child > *:first-child {
	margin-top: 0 !important;
}

.mwai-chatgpt-theme .mwai-reply .mwai-text > *:last-child,
.mwai-chatgpt-theme .mwai-reply .mwai-text > *:last-child > *:last-child,
.mwai-chatgpt-theme .mwai-reply .mwai-text > *:last-child > *:last-child > *:last-child {
	margin-bottom: 0 !important;
}

/* Links, on both kinds of message now that both are pale. The member's own
   used to need --icc-sky to be legible on deep teal; on #e9f5fa that is the
   link disappearing, so there is one link colour here and it is the site's. */
.mwai-chatgpt-theme .mwai-reply a,
.mwai-chatgpt-theme .mwai-text a,
.mwai-chatgpt-theme .mwai-user .mwai-text a {
	color: var(--icc-teal) !important;
	text-decoration: underline;
}

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

/* **This is .icc-dock__form, rebuilt out of AI Engine's three elements.**
 *
 * The two composers sit in the same rail and a member moves between them, so
 * the church's test is the right one: "does it look like the input area of the
 * regular chatbox?" Measured side by side with both windows open on one page,
 * it did not, in four ways at once -- the bar had half the padding, the field
 * had no edge at all, the field could grow without limit, and the send button
 * wore the dock's two colours the wrong way round.
 *
 * The mapping is not one-to-one, which is what made this worth writing down:
 *
 *   .icc-dock__form   -> .mwai-input        the bar
 *   .icc-dock__input  -> .mwai-input-text   the pill -- a WRAPPER here, and a
 *                                           textarea there, so the border, the
 *                                           radius and the padding go on the
 *                                           wrapper and the textarea is
 *                                           stripped bare inside it
 *   .icc-dock__send   -> .mwai-input-submit the button
 *
 * Every number below is read from icc.css rather than chosen. If that composer
 * is ever re-measured, this is the other place.
 */

/* The bar.
 *
 * `margin: 0` and `border-radius: 0` at the church's asking (round 37), and
 * both of them are .icc-dock__form's own values rather than a departure: that
 * composer has neither, because it is the foot of a panel and not a control
 * floating inside one. AI Engine gives its bar a margin and rounds its
 * corners, which left a strip of the conversation's background showing under
 * the composer and the window's square bottom corners showing through the
 * bar's round ones. */
.mwai-chatgpt-theme .mwai-input {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: flex-end !important;
	gap: 0.4rem !important;
	margin: 0 !important;
	padding: 0.55rem !important;
	/* **One border, along the top, and it does not change on focus.** (Round
	   38, the church: ".mwai-chatgpt-theme .mwai-input:focus-within should not
	   change the border color.")

	   The theme gives this bar all four sides and then tints all four with
	   `color-mix(in srgb, var(--mwai-accentColor) 55%, transparent)` on
	   :focus-within. The top was already pinned by the !important below, so
	   what the church was watching go teal was the other three -- the three
	   .icc-dock__form does not have at all. Zeroing them answers both at once:
	   the composer now matches the dock exactly, and a border that is not there
	   cannot change colour. No override of the focus rule is needed, and none is
	   written, because there is nothing left for it to act on.

	   **Which leaves focus with nothing to show it, so the rule after the pill
	   below puts it back.** Measured rather than assumed: the theme sets
	   `outline: none` on the focused textarea, so that tint was the only mark a
	   focused composer had. */
	border: 0 !important;
	border-top: 1px solid var(--icc-line) !important;
	border-radius: 0 !important;
	background: var(--icc-ground, #ffffff) !important;
	color: var(--icc-ink) !important;
}

/* The pill, on .icc-dock__input's own --icc-ground-soft.
 *
 * This went white for one round and came back: the church asked for white
 * first, then looked at the two composers side by side and asked for
 * "#f7f5ef... They must share a common look and layout". Sharing wins, and it
 * is the right call -- the pale field is what separates the writing area from
 * the white bar it sits on, and on a white bar a white field is only a border.
 *
 * `box-sizing` for the reason .icc-dock__input gives: the script that grows a
 * textarea sets a height from scrollHeight, and on a content-box element that
 * height is out by the padding every time, so the box creeps. */
.mwai-chatgpt-theme .mwai-input-text {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: flex-end !important;
	padding: 0.45rem 0.6rem !important;
	border: 1px solid var(--icc-line) !important;
	border-radius: 1rem !important;
	background: var(--icc-ground-soft, #f7f5ef) !important;
	color: var(--icc-ink, #1c1c1a) !important;
}

/* **Where the focus shows now.**
 *
 * Taking the bar's three spare borders away answered what the church asked
 * for and left the composer with no focus state at all, because AI Engine's
 * theme puts `outline: none` on the textarea itself -- so the tint that was
 * removed was carrying the whole job. A field that gives no sign it is
 * listening is a worse fault than the one being fixed, and it is the kind a
 * keyboard reader hits first.
 *
 * So: the site's own ring, .icc-roll__stepfield textarea:focus-visible's 2px
 * --icc-deep at 1px offset, and **on the pill rather than on the textarea**,
 * because the pill is what carries the border and the 1rem radius. An outline
 * drawn round the bare textarea inside it is a rectangle in a rounded field.
 *
 * `:focus-within` and not `:focus-visible`: the thing taking focus is the
 * textarea and the pill never has it, so the pill has to ask about its
 * children. It follows that a tap shows the ring too, which is right here --
 * on a phone this is one of two composers on the screen and the ring is what
 * says which one is listening.
 *
 * It is not the border changing colour. That is what was asked for. */
.mwai-chatgpt-theme .mwai-input-text:focus-within {
	outline: 2px solid var(--icc-deep) !important;
	outline-offset: 1px;
}

/* The textarea inside the pill, stripped: the pill is carrying the padding and
   the border now, so anything here is doubled. The font is named rather than
   inherited because a textarea does not inherit one -- the same reason
   .icc-dock__input says `font-family: inherit`.
 *
 * The max-height is .icc-dock__input's four lines. AI Engine sets none, so a
 * long question grew the field until it pushed the conversation off the top of
 * the window; the dock has always stopped at four and scrolled. */
.mwai-chatgpt-theme .mwai-input .mwai-input-text textarea,
.mwai-chatgpt-theme .mwai-input-text textarea,
.mwai-chatgpt-theme .mwai-input textarea {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	max-height: 5.65rem !important;

	/* Scroll at the cap rather than swallow what is past it. .icc-dock__input
	   is `overflow-y: hidden` because messages.js sets its height itself and
	   never lets it exceed the cap; AI Engine's grow does not know about our
	   max-height, so hiding the overflow here would crop a long question the
	   way round 21 found the dock cropping one. */
	overflow-y: auto !important;
	resize: none !important;
	font-family: var(--icc-sans, inherit) !important;
	font-size: 0.8125rem !important;
	line-height: 1.4 !important;
	color: var(--icc-ink, #1c1c1a) !important;

	/* Transparent, so the pill's own colour is the one that shows. Naming
	   #f7f5ef again here would be the same value in two places and one of them
	   would be missed the next time the church changes its mind about it. */
	background: transparent !important;
}

/* The placeholder: #72736c, which is --icc-muted.
 *
 * This went to the body ink for one round and came back, both times at the
 * church's asking and with both composers in front of them. The muted grey is
 * the better of the two and the reason is worth keeping: a placeholder is not
 * content, it is an instruction about an empty field, and at full ink it reads
 * as text somebody already typed. .icc-dock__input has no ::placeholder rule
 * at all and takes the browser's own default, which is this ink at roughly
 * half opacity -- very close to --icc-muted, which is why the two fields look
 * the same with different rules behind them.
 *
 * `opacity: 1` because the colour is now stated outright: Firefox applies its
 * own opacity to placeholders on top of whatever colour is set, so without
 * this the grey arrives lighter there than it does everywhere else. */
.mwai-chatgpt-theme .mwai-input .mwai-input-text textarea::placeholder,
.mwai-chatgpt-theme .mwai-input-text textarea::placeholder {
	color: var(--icc-muted, #72736c) !important;
	opacity: 1 !important;
}

/* The button, at .icc-dock__send's 2rem and **its** two colours: deep at rest
   and teal on hover. AI Engine had them the other way round, which on a bar
   sitting beside a real conversation reads as the assistant's send button
   being permanently hovered. */
.mwai-chatgpt-theme .mwai-input-submit {
	flex: 0 0 auto !important;
	display: grid !important;
	place-items: center !important;
	width: 2rem !important;
	height: 2rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--icc-deep) !important;
	color: #ffffff !important;
	cursor: pointer;
}

.mwai-chatgpt-theme .mwai-input-submit:hover:not([disabled]) {
	background: var(--icc-teal) !important;
}

.mwai-chatgpt-theme .mwai-footer {
	background: var(--icc-paper) !important;
	border-top: 1px solid var(--icc-line) !important;
}

/* ============================================================= on a phone */

/* Below 760px AI Engine swaps `.mwai-header` for `.mwai-mobile-header`
   entirely -- the desktop header does not exist in the DOM, so none of the
   rules above reach here. Its title is the `aiName` ("Assistant:"), which
   tells a visitor nothing about whose assistant it is. */
@media (max-width: 760px) {
	.mwai-chatgpt-theme .mwai-mobile-header {
		background: var(--icc-deep) !important;
		color: #ffffff !important;
		padding: 0.55rem 0.85rem !important;
		display: flex !important;
		align-items: center !important;
		gap: 0.5rem !important;
	}

	/* The same face, in the header a phone actually gets. Every value is the
	   desktop rule's, which is .icc-dock__face's; only the selector differs,
	   and it is ::before here for the same reason it is there -- the title is
	   an element of AI Engine's own and the face has to come before it. */
	.mwai-chatgpt-theme .mwai-mobile-header::before {
		content: "";
		flex: 0 0 auto;
		display: block;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background-color: var(--icc-deep);
		background-image: var(--icc-assistant-head);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
	}

	.mwai-chatgpt-theme .mwai-mobile-header-title {
		/* The text node cannot be replaced from CSS, only hidden. */
		font-size: 0 !important;
		color: transparent !important;
		flex: 1 1 auto !important;
		min-width: 0;
		overflow: hidden;
	}

	.mwai-chatgpt-theme .mwai-mobile-header-title::before {
		content: var(--icc-chatbot-title, "Church Assistant");
		display: block;
		color: #ffffff;
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* **And the same cross.** The desktop button was the church's report and
	   this is the same control one breakpoint down: a 32px rounded square
	   holding a 2px-stroked X, beside a dock whose cross is a 1.75rem circle
	   holding a 1.5-stroked one at 15px. Fixing one and not the other would
	   have left the two windows matching on a desktop and not on a phone,
	   which is where this is mostly read.

	   The glyph itself is already the right path -- AI Engine draws
	   `M18 6L6 18M6 6l12 12`, which is icc_icon( 'close' ) in the other order
	   -- so the svg is resized and re-stroked rather than replaced. `stroke`
	   and `fill` are presentation attributes on that markup and CSS beats
	   them, which is what makes this possible without touching the element. */
	.mwai-chatgpt-theme .mwai-mobile-header-close {
		width: 1.75rem !important;
		height: 1.75rem !important;
		min-width: 0 !important;
		padding: 0 !important;
		display: grid !important;
		place-items: center !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: none !important;
	}

	.mwai-chatgpt-theme .mwai-mobile-header-close:hover {
		background-color: rgba(255, 255, 255, 0.16) !important;
	}

	.mwai-chatgpt-theme .mwai-mobile-header-close svg {
		width: 15px !important;
		height: 15px !important;
		color: #ffffff !important;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.5;
	}
}

/* One chat box on screen at a time, the width of the page, clear of the strip
   of faces under it -- the same geometry `.icc-dock.is-heads .icc-dock__win`
   is given in icc.css.
 *
 * Fixed rather than a flex item here: in the rail it would sit *beside* a
 * conversation, and two 100%-wide panels in one row is one of them off the
 * side of the screen. z-index 81 puts it over the windows (80) and level with
 * the strip of faces, which stays reachable below it -- and assistant.js
 * closes the assistant when one of those faces is tapped.
 */
@media (max-width: 34em) {
	.icc-has-assistant .mwai-window > .mwai-window-box {
		position: fixed !important;
		left: 0.5rem !important;
		right: 0.5rem !important;
		bottom: 4.25rem !important;
		top: auto !important;
		z-index: 81 !important;
		width: auto !important;
		height: min(26rem, calc(100vh - 9rem)) !important;
		border-radius: var(--icc-radius, 3px) !important;
		border-bottom: 1px solid var(--icc-line) !important;
		box-shadow: 0 14px 34px rgba(28, 28, 26, 0.24) !important;
	}

	/* **The chathead stays put while the window is open.**
	   (Round 38, the church: "In mobile, the ai chathead is not shown
	   immediately when the ai chat is opened. It should show the chathead at
	   the bottom and open the floating chat window immediately" -- and then,
	   having found it: "Seems like the ai chathead is hidden when the floating
	   chatbox is open.")

	   It was, by the rule near the top of this file, which takes the trigger
	   off the page whenever `.mwai-open` is set. **That rule is right on a
	   desktop and wrong here**, and the difference is what the head IS at each
	   width. On a desktop it is a launcher: the thing it would open is already
	   open, so it has nothing left to do and sitting over the conversation is
	   all it can manage. On a phone it is a chathead -- what a chat leaves at
	   the bottom of the screen, in a row of them a member moves between -- and
	   the assistant's being the one head that disappears the moment you look at
	   it is exactly what was reported.

	   Nothing has to move to make room: the window's `bottom: 4.25rem` above is
	   already there to clear this row. Tapping the head closes the window,
	   which is AI Engine's own toggle and is what a chathead does anyway.

	   Specificity is equal to the rule it reverses and both carry !important,
	   so this wins by coming later. A media query adds nothing to either side
	   of that, which is worth saying because it looks like it should. */
	.icc-has-assistant .mwai-window.mwai-open .mwai-trigger,
	.icc-has-assistant .mwai-window.mwai-opening .mwai-trigger {
		display: flex !important;
	}

	/* A visitor's window sat on the bottom edge because there was no strip of
	   faces to clear. There is now: their own head, which after the rule above
	   is on screen while they are reading the answer. Same 4.25rem, so the two
	   windows sit at the same height whoever is looking at them. */
	.icc-assistant--guest .mwai-window > .mwai-window-box {
		bottom: 4.25rem !important;
	}
}

/* Somebody who has asked for less movement gets it without the lift. */
@media (prefers-reduced-motion: reduce) {
	.icc-has-assistant .mwai-window .mwai-trigger,
	.icc-has-assistant .mwai-window .mwai-trigger:hover {
		transition: none;
		transform: none;
	}
}

/* ---------------------------------------------- the one-time nudge (round 39)

   (The church: "let a floating message that says ask me anything to the left
   of the button. That message only shows once and disappears once new
   chatheads are introduced or when a chatbox opens and when the ai chatbot
   chathead is close[d]".)

   `bottom` and `right` are set by assistant.js off the chathead's own rect,
   because the head sits in one place for a visitor and another for a member
   with conversations open, and reading the rect is right in both without this
   sheet having to know which rule won.

   z-index 81: level with the chathead it belongs to, over the windows at 80. */
.icc-assistant__nudge {
	position: fixed;
	z-index: 81;
	padding: 0.45rem 0.7rem;
	border-radius: 0.6rem;
	background: var(--icc-ink, #1c1c1a);
	color: #f4f2ec;
	font-family: var(--icc-sans, system-ui, sans-serif);
	font-size: 0.8125rem;
	line-height: 1.35;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(28, 28, 26, 0.28);
	cursor: pointer;
	animation: icc-assistant-nudge-in 220ms ease both;
}

/* The tail, pointing at the head on its right. A rotated square rather than a
   border triangle, so it inherits the bubble's own background and cannot drift
   out of colour with it. */
.icc-assistant__nudge::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -3px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 1px;
	background: inherit;
	transform: rotate(45deg);
}

@keyframes icc-assistant-nudge-in {
	from {
		opacity: 0;
		transform: translateX(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.icc-assistant__nudge {
		animation: none;
	}
}