/**
 * Support interview styles.
 *
 * Message bubbles rather than a chat window. Widths are capped well short of the
 * container so the alternation between sides stays legible, which is the whole
 * signal the layout carries.
 */
.wfu-iv { max-width: 46rem; }

/* Restated because this component sets display on elements that also need to
   honor [hidden], and a display rule beats the browser's [hidden] default. That
   is not theoretical: it shipped once, leaving the composer visible before a
   conversation existed, so sending appeared to do nothing. */
.wfu-iv [hidden] { display: none !important; }

/* No font-size of its own. The 1.4rem this used to set was smaller than the
   theme's body text in the same block, so the heading read as less important
   than the paragraph under it. The theme owns the heading scale, the same way
   it owns the palette. */
.wfu-iv-title { margin: 0 0 0.5rem; }
.wfu-iv-lede { margin: 0 0 1.25rem; color: #444; line-height: 1.6; }

.wfu-iv .wfu-iv-send,
.wfu-iv .wfu-iv-submit {
/* Interactive gold is #755a23, not the #9e7e38 official gold, wherever white
   text sits on it. White on #9e7e38 measures 3.82:1, short of the 4.5:1 that
   WCAG 2.2 AA requires for normal-size text, and the WFU standard commits the
   team to AA. #755a23 is the theme's own gold-family hover color (quarantheme
   theme.json), so this stays on brand rather than inventing a shade, and it
   measures 6.48:1. The official gold is kept for borders and other decorative
   marks, where the 3:1 non-text threshold applies and it passes. */
	background: var(--wp--custom--color--hover-color, #755a23);
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	padding: 0.7rem 1.6rem;
}
.wfu-iv-send:disabled,
.wfu-iv-submit:disabled { opacity: 0.6; cursor: default; }
.wfu-iv .wfu-iv-resume {
	background: transparent;
	border: 1px solid var(--wp--custom--color--neutral-600, #767676);
	color: var(--wp--custom--color--neutral-900, #2b2b2b);
	cursor: pointer;
	font-size: 1rem;
	padding: 0.7rem 1.4rem;
}
.wfu-iv-send:focus-visible,
.wfu-iv-submit:focus-visible,
.wfu-iv-resume:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

.wfu-iv .wfu-iv-conversation {
	background: #f6f5f1;
	border: 1px solid #e2e0d8;
	padding: 1rem 1rem 0;
	/* Tall enough to read, short enough that the message box stays on screen.

	   The transcript scrolls inside itself, so replies never move the page, and
	   that is also how the box you type into ended up below the fold: with the
	   site header and page title above it, a fixed 30rem transcript pushed the
	   composer past the bottom of the window after a couple of exchanges, and
	   answering meant scrolling the page to find it again.

	   Solved by measurement rather than by scrolling, deliberately. Pinning the
	   composer to the window was the previous answer and it cut off the last
	   153 pixels of the transcript. Scrolling the page programmatically is not
	   an answer either: this theme blocks it, so scrollTo, scrollBy and
	   scrollTop all silently do nothing.

	   The floor matters as much as the ceiling. On a short window this must not
	   collapse to a sliver of conversation. */
	max-height: max(14rem, min(30rem, calc(100dvh - 42rem)));
	overflow-y: auto;
}
/* The bottom breathing room lives on the list, not on the scroll container. A
   scroll container's bottom padding is not reliably rendered once you have
   scrolled to the end, which left the last bubble flush against the edge. The
   left reset is because the theme indents every ol by 28px. */
.wfu-iv .wfu-iv-transcript {
	list-style: none;
	margin: 0;
	padding: 0 0 1rem;
}
.wfu-iv-turn { display: flex; margin: 0 0 0.75rem; }
.wfu-iv-turn.is-assistant { justify-content: flex-start; }
.wfu-iv-turn.is-user { justify-content: flex-end; }

.wfu-iv-bubble {
	max-width: 78%;
	padding: 0.7rem 1rem;
	border-radius: 1.1rem;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}
.wfu-iv-turn.is-assistant .wfu-iv-bubble {
	background: #fff;
	border: 1px solid #e2e0d8;
	border-bottom-left-radius: 0.25rem;
	color: var(--wp--custom--color--neutral-900, #2b2b2b);
}
.wfu-iv-turn.is-user .wfu-iv-bubble {
	background: var(--wp--custom--color--hover-color, #755a23);
	border-bottom-right-radius: 0.25rem;
	color: #fff;
}

.wfu-iv .wfu-iv-thinking { margin: 0.25rem 0 0; }

/* Offers the form as a way out, for anyone who would rather not have a
   conversation about it. */
.wfu-iv-escape { margin: 0.5rem 0 0; font-size: 0.9rem; }
.wfu-iv-signin { margin: 1rem 0 0; }
.wfu-iv .wfu-iv-signin-link {
	display: inline-block;
	background: var(--wp--custom--color--hover-color, #755a23);
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	padding: 0.7rem 1.6rem;
}
.wfu-iv .wfu-iv-signin-link:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.wfu-iv-signed-out .wfu-iv-conversation { max-height: none; }
.wfu-iv-escape a { color: #6b5424; }
.wfu-iv-dots { display: inline-flex; gap: 0.25rem; padding: 0.5rem 0.9rem; }
.wfu-iv-dots span {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--custom--color--official-gold, #9e7e38);
	animation: wfu-iv-pulse 1.2s infinite ease-in-out;
}
.wfu-iv-dots span:nth-child(2) { animation-delay: 0.18s; }
.wfu-iv-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes wfu-iv-pulse {
	0%, 60%, 100% { opacity: 0.3; }
	30% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.wfu-iv-dots span { animation: none; opacity: 0.6; }
	.wfu-iv-turn { scroll-behavior: auto; }
}

/* The message box takes the full width and the button sits under it, rather than
   beside it. A button next to a multi-line textarea stretches to match its
   height, which produced a tall slab of gold with a word floating in the middle
   of it. */
/* Deliberately NOT sticky. It was, to keep the message box reachable while the
   conversation grew, but a sticky element that follows a tall block pins itself
   over that block whenever the block extends past the fold. Measured on dev: the
   composer sat on top of the last 153 pixels of the transcript, cutting the most
   recent reply off mid-sentence the instant it arrived.

   The transcript is capped at 30rem and scrolls inside itself, so the message
   box is always immediately beneath a bounded panel and never drifts far. Sticky
   was solving a problem the max-height had already solved, and charging a
   covered transcript for it. */
.wfu-iv .wfu-iv-composer {
	margin-top: 0.75rem;
	padding: 0.75rem 0;
	background: #fff;
}
/* Deliberately specific. The theme styles controls with descendant selectors
   such as .entry-content textarea, which out-specify a single class, so this
   component states its own layout at a weight that actually holds. */
.wfu-iv textarea.wfu-iv-input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	/* An explicit height, because the theme gives textareas a tall default that
	   made the message box larger than the conversation above it. */
	height: 4.5rem;
	min-height: 4.5rem;
	max-height: 12rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--custom--color--neutral-600, #767676);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	resize: vertical;
}
.wfu-iv textarea.wfu-iv-input:focus { outline: 2px solid var(--wp--custom--color--official-gold, #9e7e38); outline-offset: 1px; }
.wfu-iv-composer-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.wfu-iv-hint { margin: 0; font-size: 0.85rem; color: #666; }
.wfu-iv-send { flex: 0 0 auto; }

.wfu-iv-summary { margin-top: 1.5rem; border: 1px solid #e2e0d8; border-top: 5px solid var(--wp--custom--color--official-gold, #9e7e38); padding: 1.25rem; }
/* Spacing only. The theme owns type. */
.wfu-iv-summary h3 { margin: 0 0 0.5rem; }
.wfu-iv-summary-lede { margin: 0 0 1.25rem; color: #444; line-height: 1.6; }
.wfu-iv-field { margin: 0 0 1rem; }
.wfu-iv-field label { display: block; font-weight: 600; margin: 0 0 0.25rem; }
.wfu-iv .wfu-iv-field input,
.wfu-iv .wfu-iv-field select,
.wfu-iv .wfu-iv-field textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 34rem;
	padding: 0.5rem;
	border: 1px solid var(--wp--custom--color--neutral-600, #767676);
	background: #fff;
	font-size: 1rem;
}
/* Anything the interview could not determine is marked, so the person's eye
   goes to what still needs them rather than re-reading what is already right. */
.wfu-iv .wfu-iv-field.is-missing input,
.wfu-iv .wfu-iv-field.is-missing select,
.wfu-iv .wfu-iv-field.is-missing textarea { border-left: 4px solid var(--wp--custom--color--official-gold, #9e7e38); background: #fdfbf6; }
.wfu-iv-field [aria-invalid="true"] { border-color: #b32d2e; }
.wfu-iv-error { color: #b32d2e; font-size: 0.9rem; margin: 0.25rem 0 0; }
.wfu-iv-summary-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

.wfu-iv .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/**
 * Attachment picker.
 *
 * Scoped under both intake containers rather than styled on the bare class,
 * because the network theme reaches form controls through descendant selectors
 * like `.entry-content input` and would otherwise out-specify every rule here.
 */
.wfu-sr-uploads .wfu-up,
.wfu-iv .wfu-up {
	margin: 1.5rem 0 0;
}
.wfu-sr-uploads .wfu-up-label,
.wfu-iv .wfu-up-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}
.wfu-sr-uploads .wfu-up-label.is-full,
.wfu-iv .wfu-up-label.is-full {
	color: #666;
}
.wfu-sr-uploads input.wfu-up-input,
.wfu-iv input.wfu-up-input {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0;
	background: none;
	border: 0;
}
.wfu-sr-uploads input.wfu-up-input:disabled,
.wfu-iv input.wfu-up-input:disabled {
	opacity: 0.5;
	cursor: default;
}
.wfu-sr-uploads .wfu-up-help,
.wfu-iv .wfu-up-help {
	margin: 0.25rem 0 0;
	color: #555;
	font-size: 0.85rem;
	line-height: 1.5;
}
.wfu-sr-uploads .wfu-up-list,
.wfu-iv .wfu-up-list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}
.wfu-sr-uploads .wfu-up-item,
.wfu-iv .wfu-up-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	margin: 0 0 0.4rem;
	background: #f4f4f4;
	border-left: 3px solid var(--wp--custom--color--official-gold, #9e7e38);
}
.wfu-sr-uploads .wfu-up-name,
.wfu-iv .wfu-up-name {
	flex: 1 1 auto;
	overflow-wrap: anywhere;
}
.wfu-sr-uploads .wfu-up-size,
.wfu-iv .wfu-up-size {
	flex: 0 0 auto;
	color: #555;
	font-size: 0.85rem;
	white-space: nowrap;
}
.wfu-sr-uploads .wfu-up-remove,
.wfu-iv .wfu-up-remove {
	flex: 0 0 auto;
	background: none;
	border: 0;
	color: #7a2b2b;
	cursor: pointer;
	font-size: 0.85rem;
	padding: 0.2rem 0.4rem;
	text-decoration: underline;
}
.wfu-sr-uploads .wfu-up-remove:focus,
.wfu-iv .wfu-up-remove:focus,
.wfu-sr-uploads input.wfu-up-input:focus,
.wfu-iv input.wfu-up-input:focus {
	outline: 3px solid #000;
	outline-offset: 2px;
}
.wfu-sr-uploads .wfu-up-status,
.wfu-iv .wfu-up-status {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	min-height: 1.2em;
	color: #333;
}
.wfu-sr-uploads .wfu-up-status.is-error,
.wfu-iv .wfu-up-status.is-error {
	color: #b32d2e;
	font-weight: 600;
}

/* The remove control is a real target, not a word inside a sentence, so WCAG 2.2
   AA 2.5.8 asks for at least 24 by 24 CSS pixels. At 0.85rem with 0.2rem of
   padding it came to roughly 22, which relies on the spacing exception to pass.
   Sizing it properly is cheaper than arguing the exception. */
.wfu-sr-uploads .wfu-up-remove,
.wfu-iv .wfu-up-remove {
	min-height: 24px;
	min-width: 24px;
	padding: 0.35rem 0.5rem;
}

/* Keeps a focused control clear of anything pinned to the bottom of the
   viewport, which the message box no longer is but the theme may be. Cheap
   insurance for WCAG 2.2 AA 2.4.11 Focus Not Obscured. */
.wfu-iv a:focus,
.wfu-iv button:focus,
.wfu-iv input:focus,
.wfu-iv select:focus,
.wfu-iv textarea:focus {
	scroll-margin-bottom: 8rem;
}

/* Replaces a native alert() on the confirmation panel. */
.wfu-iv .wfu-iv-summary-problem {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 4px solid #b32d2e;
	background: #fcf2f2;
	color: #7a2b2b;
	font-weight: 600;
}
.wfu-iv .wfu-iv-summary-problem[hidden] { display: none !important; }