/**
 * Gorilla Support — STRUCTURE ONLY.
 *
 * Layout, positioning, dropdown mechanics and a11y states. Every colour, font,
 * radius, shadow and spacing value is a CSS custom property (--gs-*), never a
 * literal — so a host re-skins the whole widget by overriding tokens in
 * theme-default.css (or a replacement) with NO `!important` and no structural
 * patching. Do not add colours or `!important` to this file.
 *
 * @since 1.0.0
 */

.gorilla-search {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--gs-max-width);
	margin-inline: auto;
	font-family: var(--gs-font);
	color: var(--gs-text);
}

.gorilla-search *,
.gorilla-search *::before,
.gorilla-search *::after {
	box-sizing: border-box;
}

/* ---- Search bar ---- */
.gorilla-search__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--gs-bar-gap);
	background: var(--gs-field-bg);
	border: var(--gs-field-border-width) solid var(--gs-field-border);
	border-radius: var(--gs-field-radius);
	padding: var(--gs-field-pad-y) var(--gs-field-pad-x);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gorilla-search__bar:focus-within {
	border-color: var(--gs-accent);
	box-shadow: 0 0 0 var(--gs-focus-ring-width) var(--gs-focus-ring);
}

.gorilla-search__icon {
	flex: 0 0 auto;
	color: var(--gs-muted);
}

.gorilla-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--gs-text);
	font: inherit;
	font-size: var(--gs-input-size);
	line-height: 1.4;
	padding: 0;
}

.gorilla-search__input::placeholder {
	color: var(--gs-muted);
	opacity: 1;
}

/* Hide the native search clear control — we render our own. */
.gorilla-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.gorilla-search__clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--gs-muted);
	cursor: pointer;
	padding: 2px;
	border-radius: 50%;
	line-height: 0;
}

.gorilla-search__clear:hover,
.gorilla-search__clear:focus-visible {
	color: var(--gs-accent);
}

/* ---- Results dropdown ---- */
.gorilla-search__results {
	position: absolute;
	z-index: var(--gs-z);
	inset-inline: 0;
	top: calc(100% + var(--gs-results-gap));
	margin: 0;
	padding: var(--gs-results-pad);
	list-style: none;
	background: var(--gs-result-bg);
	border: var(--gs-field-border-width) solid var(--gs-field-border);
	border-radius: var(--gs-result-radius);
	box-shadow: var(--gs-shadow);
	max-height: var(--gs-results-max-height);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.gorilla-search__result {
	list-style: none;
	border-radius: var(--gs-result-item-radius);
}

.gorilla-search__result-link {
	display: block;
	padding: var(--gs-result-pad-y) var(--gs-result-pad-x);
	text-decoration: none;
	color: inherit;
	border-radius: var(--gs-result-item-radius);
}

.gorilla-search__result:hover,
.gorilla-search__result--active {
	background: var(--gs-result-hover);
}

.gorilla-search__result-title {
	display: block;
	font-family: var(--gs-heading);
	font-weight: var(--gs-title-weight);
	font-size: var(--gs-title-size);
	color: var(--gs-text);
}

.gorilla-search__result-cat {
	display: inline-block;
	margin-top: var(--gs-chip-gap);
	padding: var(--gs-chip-pad-y) var(--gs-chip-pad-x);
	font-size: var(--gs-chip-size);
	line-height: 1;
	border-radius: var(--gs-chip-radius);
	background: var(--gs-chip-bg);
	color: var(--gs-chip-text);
}

.gorilla-search__result-excerpt {
	display: block;
	margin-top: var(--gs-excerpt-gap);
	font-size: var(--gs-excerpt-size);
	line-height: 1.5;
	color: var(--gs-muted);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---- Messages + agentic fallback ---- */
.gorilla-search__message {
	padding: var(--gs-result-pad-y) var(--gs-result-pad-x);
	font-size: var(--gs-excerpt-size);
	color: var(--gs-muted);
}

.gorilla-search__ask .gorilla-search__result-title {
	color: var(--gs-accent);
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
	.gorilla-search {
		max-width: 100%;
	}

	.gorilla-search__results {
		max-height: var(--gs-results-max-height-mobile);
	}
}