/* Rules below that set display would otherwise show elements the scripts hide. */
.exactfind [hidden] {
	display: none !important;
}

.exactfind__thread {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	margin-top: 1em;
}

.exactfind__turn {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

/* The whole feed reads newest first, so each answer sits above its question. */
.exactfind--top .exactfind__turn {
	flex-direction: column-reverse;
}

.exactfind--top .exactfind__turn + .exactfind__turn {
	border-top: 1px solid var( --exactfind-border );
	padding-top: 1.25em;
}

.exactfind--top .exactfind__result:not([hidden]) {
	display: flex;
	flex-direction: column;
}

.exactfind--top .exactfind__controls {
	order: -1;
}

.exactfind__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.exactfind__controls [hidden] {
	display: none;
}

.exactfind--bottom.exactfind--active {
	display: flex;
	flex-direction: column;
}

.exactfind--bottom.exactfind--active .exactfind__welcome {
	display: none;
}

.exactfind--bottom.exactfind--active .exactfind__result {
	margin-top: 0;
	order: 1;
}

.exactfind--bottom.exactfind--active .exactfind__form {
	margin-top: 0.75em;
	order: 2;
}

.exactfind--bottom .exactfind__thread {
	height: min( 520px, 60dvh );
	margin-top: 0;
	overflow-y: auto;
	padding-right: 0.25em;
	position: relative;
}

/* The panel has its own height limit, so the thread scrolls instead of the whole panel. */
.exactfind-float .exactfind--bottom .exactfind__thread {
	height: min( 460px, max( 160px, calc( 100dvh - var( --exactfind-float-y, 20px ) - 300px ) ) );
}

/* Leaves room for the newest question to reach the top of the panel. */
.exactfind--bottom .exactfind__turn:last-child {
	min-height: 100%;
}

.exactfind__message--user {
	align-self: flex-end;
	background: var( --exactfind-accent );
	border-radius: 8px;
	color: var( --exactfind-accent-text );
	max-width: 85%;
	padding: 0.4em 0.75em;
}

.exactfind__suggested {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-top: 0.75em;
}

.exactfind__chip,
.exactfind__new {
	background: none;
	border: 1px solid var( --exactfind-border );
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.85em;
	padding: 0.25em 0.75em;
}

.exactfind__new {
	align-self: flex-start;
	margin-top: 0.75em;
}

.exactfind__suggested[hidden] {
	display: none;
}

.exactfind__feedback {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85em;
	gap: 0.4em;
	margin: 0.75em 0 0;
}

.exactfind__handoff-offer {
	margin: 0.75em 0 0;
}

.exactfind__handoff {
	border: 1px solid var( --exactfind-border );
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	padding: 0.75em;
}

.exactfind__handoff p {
	margin: 0;
}

.exactfind__handoff-field {
	display: flex;
	flex-direction: column;
	font-size: 0.9em;
	gap: 0.2em;
}

.exactfind__handoff input:not( [type="checkbox"] ),
.exactfind__handoff select,
.exactfind__handoff textarea {
	border: 1px solid var( --exactfind-border );
	border-radius: 6px;
	font: inherit;
	padding: 0.4em 0.5em;
	width: 100%;
	box-sizing: border-box;
}

.exactfind__handoff-consent {
	font-size: 0.85em;
}

.exactfind__handoff-actions {
	display: flex;
	gap: 0.4em;
}

.exactfind__handoff-send {
	background: var( --exactfind-accent );
	border-color: var( --exactfind-accent );
	color: var( --exactfind-accent-text );
}

.exactfind__handoff-status {
	color: var( --exactfind-muted );
	font-size: 0.85em;
}

.exactfind__handoff-status:empty {
	display: none;
}