/* Search / Ask control — owns the centered navbar search slot (.valentus-navbar-search). */
:root {
  /* Match Valentus --valentus-transition so light↔dark does not snap the omnibox chrome. */
  --valentus-search-theme-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.25s ease;
  /* Opaque fills only. Literal hex — never var(--valentus-border) / --valentus-accent-soft (those are rgba). */
  --valentus-search-surface: #ffffff;
  --valentus-search-surface-hover: #deefed;
  --valentus-search-rim: #acced2;
  --valentus-search-ink: #141820;
  --valentus-search-muted: #5a6270;
  --valentus-search-chip: #f3f5f8;
  --valentus-search-ask: #e7f4f3;
  --valentus-search-ask-error: #f7e4e4;
  --valentus-search-hit: #e8f1fb;
  /* Gap between sticky dock / floating menus and the viewport bottom edge. */
  --valentus-search-viewport-bottom-gap: 0.75rem;
  /* Resting elevation under the stacked scope + input card (navbar or dock). */
  --valentus-search-compound-shadow: var(
    --valentus-shadow-float,
    0 0 0 1px color-mix(in srgb, var(--valentus-ink, #141820) 5%, transparent),
    0 0.35rem 0.9rem color-mix(in srgb, var(--valentus-ink, #141820) 10%, transparent)
  );
}

html.dark-theme {
  --valentus-search-surface: #141a22;
  --valentus-search-surface-hover: #193b3e;
  --valentus-search-rim: #3a4454;
  --valentus-search-ink: #e8ebf0;
  --valentus-search-muted: #9aa3b2;
  --valentus-search-chip: #1e2630;
  --valentus-search-ask: #16323a;
  --valentus-search-ask-error: #281a21;
  --valentus-search-hit: #1d3042;
  --valentus-search-compound-shadow: var(
    --valentus-shadow-float,
    0 0 0 1px color-mix(in srgb, var(--valentus-ink, #e8ebf0) 6%, transparent),
    0 0.4rem 1rem rgba(0, 0, 0, 0.42)
  );
}

.valentus-search-chat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Navbar: one column for the scope row and the query field. */
.valentus-site-navbar .valentus-search-chat,
.valentus-navbar-search .valentus-search-chat {
  gap: 0;
  min-height: 2.15rem;
  /* Breathe off the navbar bottom border / viewport edge when the bar is flush. */
  margin-bottom: 0.35rem;
}

.valentus-search-chat__popover {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.valentus-search-chat__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.valentus-search-chat__omnibox {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  min-width: 0;
}

/* ——— Collapse-to-icon (narrow / collision) ——— */
.valentus-search-chat__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--valentus-search-rim);
  border-radius: 0.5rem;
  background: var(--valentus-elevated, #fff);
  color: var(--valentus-ink, #141820);
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--valentus-search-theme-transition);
}

.valentus-search-chat__toggle:hover,
.valentus-search-chat__toggle:focus-visible {
  border-color: var(--valentus-accent, #0d9488);
  background-color: var(--valentus-search-surface-hover);
  outline: none;
}

.valentus-search-chat__toggle:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--valentus-accent, #0d9488) 35%, transparent);
}

.valentus-search-chat__toggle-icon {
  display: block;
}

html.dark-theme .valentus-search-chat__toggle {
  background: var(--valentus-elevated, #1a1a1a);
  color: var(--valentus-ink, #e8eaed);
  border-color: var(--valentus-search-rim);
}

html.dark-theme .valentus-search-chat__toggle:hover,
html.dark-theme .valentus-search-chat__toggle:focus-visible {
  background-color: var(--valentus-search-surface-hover);
}

/* Collapsed to icon: only the toggle shows until opened. */
.valentus-search-chat.is-collapsed {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  min-width: 0;
}

.valentus-search-chat.is-collapsed .valentus-search-chat__toggle {
  display: inline-flex;
}

.valentus-search-chat.is-collapsed .valentus-search-chat__popover {
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.4rem);
  inset-inline-end: 0;
  width: min(36rem, calc(100vw - 1.5rem));
  min-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.55rem;
  border: 1px solid var(--valentus-search-rim);
  border-radius: 0.65rem;
  background-color: var(--valentus-search-surface);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--valentus-ink, #141820) 5%, transparent),
    0 0.45rem 1.25rem color-mix(in srgb, var(--valentus-ink, #141820) 14%, transparent);
  box-sizing: border-box;
  transition: var(--valentus-search-theme-transition);
}

.valentus-search-chat.is-collapsed.is-open .valentus-search-chat__popover {
  display: block;
}

.valentus-search-chat.is-collapsed.is-open .valentus-search-chat__toggle {
  border-color: var(--valentus-accent, #0d9488);
  color: var(--valentus-accent, #0d9488);
}

html.dark-theme .valentus-search-chat.is-collapsed .valentus-search-chat__popover {
  background: var(--valentus-search-surface);
  background-color: var(--valentus-search-surface);
  border-color: var(--valentus-search-rim);
}

.valentus-search-chat__tabs {
  display: flex;
  gap: 0.35rem;
  order: 0;
}

.valentus-search-chat__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  margin: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--valentus-search-rim);
  border-radius: 0.35rem;
  background: var(--valentus-search-surface);
  background-color: var(--valentus-search-surface);
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}

.valentus-search-chat__hint,
.valentus-search-chat__field-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--valentus-search-rim);
  border-radius: 0.25rem;
  background: var(--valentus-search-chip);
  background-color: var(--valentus-search-chip);
  color: var(--valentus-search-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  opacity: 1;
}

.valentus-search-chat__field {
  position: relative;
}

/* Stacked scope + input: one rounded card, scope row on top, query field below.
   Must stay overflow:visible — legacy lunr mounts results on .valentus-search-input-wrap;
   hybrid dock will mount dual zones above the whole compound.
   container-type: inline-size → 100cqi = full dock width for results alignment. */
.valentus-search-compound {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.15rem;
  border: 1px solid var(--valentus-search-rim);
  border-radius: 0.5rem;
  background-color: var(--valentus-search-surface);
  overflow: visible;
  color: var(--valentus-ink, #141820);
  container-type: inline-size;
  container-name: valentus-search-compound;
  box-shadow: var(--valentus-search-compound-shadow);
  transition: var(--valentus-search-theme-transition);
}

/* Accent border whenever something inside is focused; glow only while typing. */
.valentus-search-compound:focus-within {
  border-color: var(--valentus-accent, #0d9488);
}

.valentus-search-compound:focus-within:has(#search-input:focus) {
  box-shadow:
    var(--valentus-search-compound-shadow),
    0 0 0 2px color-mix(in srgb, var(--valentus-accent, #0d9488) 35%, transparent);
}

/* Scope/context row — full width above the input (floating dock layout).
   overflow stays visible so the tree menu can drop below the trigger. */
.valentus-search-scope-slot {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  min-height: 2rem;
  box-sizing: border-box;
  border-inline-end: 0;
  border-block-end: 1px solid var(--valentus-search-rim);
  border-start-start-radius: calc(0.5rem - 1px);
  border-start-end-radius: calc(0.5rem - 1px);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  background-color: var(--valentus-search-surface);
  overflow: visible;
  cursor: default;
  transition: var(--valentus-search-theme-transition);
}

/* Closed face: selected scope label only (no Antora "Component"/"Version" kind prefix). */
.valentus-search-scope-face {
  display: flex;
  align-items: center;
  min-width: 0;
  pointer-events: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

.valentus-search-scope-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--valentus-ink, #141820);
}

/* Chevron lives on the slot (::after). */
.valentus-search-scope-slot::after {
  content: "";
  position: absolute;
  right: 0.45rem;
  top: 50%;
  z-index: 2;
  width: 0.55rem;
  height: 0.55rem;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--valentus-ink-muted, #5a6270);
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 6L8 11L12.5 6' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 6L8 11L12.5 6' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* One hit target for the whole visible bar. The slot paints the rounded fill;
   this button covers that box (including the lower half) without a second layer. */
.valentus-search-scope-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0 1.65rem 0 0.65rem;
  border: 0;
  border-start-start-radius: calc(0.5rem - 1px);
  border-start-end-radius: calc(0.5rem - 1px);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  background: transparent;
  background-color: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: default;
  outline: none;
  box-shadow: none;
}

.valentus-search-scope-trigger:focus,
.valentus-search-scope-trigger:focus-visible,
.valentus-search-scope-trigger:active {
  outline: none;
  box-shadow: none;
}

/* Static hierarchy tree (All docs → component → versions). Not expandable. */
.valentus-search-scope-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 40;
  min-width: max(100%, 14rem);
  max-width: min(22rem, 80vw);
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  border-radius: 0.45rem;
  background-color: var(--valentus-search-surface);
  border: 1px solid var(--valentus-search-rim);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--valentus-ink, #141820) 5%, transparent),
    0 0.45rem 1.1rem color-mix(in srgb, var(--valentus-ink, #141820) 12%, transparent);
  color: var(--valentus-ink, #141820);
  font-size: 0.78rem;
  line-height: 1.25;
  max-height: calc(100dvh - 5.5rem - var(--valentus-search-viewport-bottom-gap));
  overflow-y: auto;
}

.valentus-search-scope-option {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  cursor: default;
  outline: none;
  white-space: nowrap;
}

.valentus-search-scope-option--depth-1 {
  padding-inline-start: 1.15rem;
}

.valentus-search-scope-option--depth-2 {
  padding-inline-start: 2rem;
}

.valentus-search-scope-tree-mark {
  flex: 0 0 auto;
  color: var(--valentus-ink-muted, #5a6270);
  font-weight: 500;
}

.valentus-search-scope-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.valentus-search-scope-option:hover,
.valentus-search-scope-option:focus {
  background-color: var(--valentus-search-surface-hover);
}

.valentus-search-scope-option.is-selected {
  font-weight: 600;
}

.valentus-search-scope-option[hidden] {
  display: none !important;
}

html.dark-theme .valentus-search-compound,
html.dark-theme .valentus-search-scope-slot,
html.dark-theme .valentus-search-scope-menu {
  background-color: var(--valentus-elevated, #1a1a1a);
  color: var(--valentus-ink, #e8eaed);
}

html.dark-theme .valentus-search-scope-label {
  color: var(--valentus-ink, #e8eaed);
}

html.dark-theme .valentus-search-scope-slot {
  border-inline-end-color: var(--valentus-search-rim);
}

html.dark-theme .valentus-search-scope-slot::after,
html.dark-theme .valentus-search-scope-tree-mark {
  color: var(--valentus-ink-muted, #9aa3b2);
}

html.dark-theme .valentus-search-scope-menu {
  border-color: var(--valentus-search-rim);
  box-shadow: 0 0.45rem 1.1rem #000000;
}

/* Soft fill on the whole left segment. */
.valentus-search-scope-slot:hover,
.valentus-search-scope-slot:focus-within,
.valentus-search-scope-slot.is-open {
  background-color: var(--valentus-search-surface-hover);
}

.valentus-search-scope-slot.is-disabled,
.valentus-search-scope-slot.is-disabled:hover,
.valentus-search-scope-slot.is-disabled:focus-within {
  background-color: var(--valentus-search-chip);
  color: var(--valentus-search-muted);
  cursor: not-allowed;
  opacity: 1;
}

.valentus-search-scope-slot.is-disabled .valentus-search-scope-trigger {
  cursor: not-allowed;
  pointer-events: none;
}

html.dark-theme .valentus-search-scope-slot:hover,
html.dark-theme .valentus-search-scope-slot:focus-within,
html.dark-theme .valentus-search-scope-slot.is-open {
  background-color: var(--valentus-search-surface-hover);
}

html.dark-theme .valentus-search-scope-option:hover,
html.dark-theme .valentus-search-scope-option:focus {
  background-color: var(--valentus-search-surface-hover);
}

/* Query slot: stable height when swapping Search input vs Ask textarea. */
.valentus-search-chat__query-slot {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 2.65rem;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: calc(0.5rem - 1px);
  border-end-end-radius: calc(0.5rem - 1px);
  overflow: visible;
  background-color: var(--valentus-search-surface);
}

.valentus-search-ask-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: inherit;
  border-end-start-radius: calc(0.5rem - 1px);
  border-end-end-radius: calc(0.5rem - 1px);
  background-color: var(--valentus-search-surface);
}

.valentus-search-ask-wrap[hidden] {
  display: none !important;
}

.valentus-search-input-wrap[hidden] {
  display: none !important;
}

/* Input + fake placeholder — full width under the scope row. */
.valentus-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow: visible;
  background-color: var(--valentus-search-surface);
}

/* Results menu spans the full stacked compound width (100cqi), not the input cell only. */
.valentus-search-compound .search-result-dropdown-menu,
.valentus-search-input-wrap > .search-result-dropdown-menu {
  left: auto;
  right: 0;
  width: 100cqi;
  min-width: 100cqi;
  max-width: 100cqi;
  box-sizing: border-box;
  z-index: 40;
  max-height: calc(100dvh - 5.5rem - var(--valentus-search-viewport-bottom-gap));
  overflow-y: auto;
}

/* Beat theme .valentus-nav-search #search-input !important rules.
   Clip typed text on the input itself (not the wrap that hosts lunr results). */
.valentus-search-compound #search-input {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto !important;
  margin: 0;
  padding: 0.35rem 0.65rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--valentus-search-surface) !important;
  background-color: var(--valentus-search-surface) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: var(--valentus-ink, #141820) !important;
  font: inherit;
  font-size: 0.875rem;
  -webkit-user-select: text;
  user-select: text;
  overflow: hidden !important;
  text-overflow: clip;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.valentus-search-compound #search-input::placeholder {
  color: var(--valentus-search-muted);
  opacity: 1;
}

.valentus-search-compound #search-input:hover,
.valentus-search-compound #search-input:focus {
  background: var(--valentus-search-surface) !important;
  background-color: var(--valentus-search-surface) !important;
  border-color: var(--valentus-search-surface) !important;
  box-shadow: none !important;
  outline: none;
}

/* Compound field uses .valentus-search-chat__field-hint; hide theme ::after "/" badge. */
.valentus-search-chat #search-field::after,
.valentus-search-compound::after {
  content: none !important;
  display: none !important;
}

/* Native <input placeholder> cannot style part of the string — overlay instead.
   pointer-events: none is required so clicks/dblclick reach #search-input. */
.valentus-search-ph {
  position: absolute;
  inset-inline-start: 0.65rem;
  inset-inline-end: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: calc(100% - 2.4rem);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  color: var(--valentus-search-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}

.valentus-search-ph.is-hidden {
  visibility: hidden;
}

.valentus-search-ph-main {
  color: inherit;
}

/* Slash shortcut, set as inline code. Same mono family as site <code> (IBM Plex Mono). */
.valentus-search-ph-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.05em 0.35em;
  border: 1px solid var(--valentus-search-rim);
  border-radius: 0.25rem;
  background: var(--valentus-search-chip);
  background-color: var(--valentus-search-chip);
  color: var(--valentus-search-ink);
  font-family: var(--valentus-font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.2;
}

.valentus-search-chat__field:not(.valentus-search-compound) #search-input {
  width: 100%;
  box-sizing: border-box;
  padding-inline-end: 1.75rem;
}

.valentus-search-chat__field-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 0.45rem;
  pointer-events: none;
}

.valentus-search-ask-wrap .valentus-search-chat__field-hint {
  top: 0.5rem;
}

.valentus-search-chat__tab.is-active {
  border-color: var(--valentus-accent, #0d9488);
  color: var(--valentus-accent, #0d9488);
}

.valentus-search-chat__tab:focus-visible {
  outline: 2px solid var(--valentus-accent, #0d9488);
  outline-offset: 2px;
}

.valentus-search-chat__ask-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.35rem 1.75rem 0.35rem 0.65rem;
  border: 0;
  border-radius: 0;
  background-color: var(--valentus-search-surface);
  color: var(--valentus-ink, inherit);
  font: inherit;
  font-size: 0.875rem;
  resize: vertical;
  min-height: 2.65rem;
  outline: none;
  box-shadow: none;
}

.valentus-search-chat__ask-result {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.4;
  background-color: var(--valentus-search-ask);
  border: 1px solid var(--valentus-search-rim);
}

.valentus-search-chat__ask-result.is-error {
  background-color: var(--valentus-search-ask-error);
  border-color: #b91c1c;
}

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

/* ——— Top layer: search menus/results above everything ———
   The scope menu, collapsed popover, Ask panel, and Lunr results must paint
   over the doc mast and page chrome. Valentus lifts .valentus-site-navbar above
   .valentus-doc-mast inside the sticky header; these z-indexes win inside that
   context and against body-level layers. */
:root {
  --valentus-search-top-z: 200;
}

.valentus-search-chat .valentus-search-scope-menu:not([hidden]),
.valentus-search-chat.is-collapsed .valentus-search-chat__popover {
  z-index: var(--valentus-search-top-z);
}

.valentus-search-chat .search-result-dropdown-menu {
  z-index: var(--valentus-search-top-z);
  /* Lunr default: background transparent — only .search-result-dataset is filled. */
  background-color: var(--valentus-search-surface);
  border: 1px solid var(--valentus-search-rim);
  border-radius: 0.55rem;
  padding: 0;
  /* One scrollport for keyword results. Empty menus are hidden below. */
  max-height: min(65vh, calc(100vh - 12rem));
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--valentus-ink, #141820) 5%, transparent),
    0 0.45rem 1.25rem color-mix(in srgb, var(--valentus-ink, #141820) 14%, transparent);
}

.valentus-search-chat .search-result-dataset {
  background-color: var(--valentus-search-surface);
  border: none;
  border-radius: calc(0.55rem - 1px);
  color: var(--valentus-ink, #141820);
  /* Lunr sets overflow:auto and a max-height taller than the menu, which
     nested a second scrollbar. The menu (or a result zone) is the scrollport. */
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Lunr inserts an empty .search-result-dropdown-menu before any query.
   Its border paints a stray line until the first search. */
.valentus-search-chat .search-result-dropdown-menu:empty,
.valentus-search-chat .search-result-dropdown-menu:not(:has(.search-result-dataset)),
.valentus-search-chat .search-result-dropdown-menu.is-idle {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.valentus-search-chat .search-result-component-header,
.valentus-search-chat .search-result-document-title,
.valentus-search-chat .search-result-document-hit,
.valentus-search-chat .search-result-document {
  background-color: var(--valentus-search-surface);
}

.valentus-search-chat .search-result-component-header {
  border-bottom-color: var(--valentus-search-rim);
}

.valentus-search-chat .search-result-document-title {
  border-right-color: var(--valentus-search-rim);
}

.valentus-search-chat .search-result-document-hit:hover,
.valentus-search-chat .search-result-document-hit:focus-within {
  background-color: var(--valentus-search-surface-hover);
}

/* Disabled semantic / chat levels — footer inside the results menu only. */
.valentus-search-feature-hints {
  margin: 0;
  padding: 0.45rem 0.7rem 0.55rem;
  border-top: 1px solid var(--valentus-search-rim);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--valentus-search-muted);
  background-color: var(--valentus-search-surface);
}

/* Dock placement vacates the navbar slot. The dock node is moved into the
   page column, so this only collapses the empty host (no leftover gap). */
.valentus-navbar-search:has(> .valentus-search-chat[data-placement='dock']),
.valentus-navbar-search.valentus-search-slot-vacated,
.valentus-site-navbar .valentus-nav-search:has(> .valentus-search-chat[data-placement='dock']) {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* ——— In-flow sticky dock ———
   JS appends the dock to .valentus-shell (class valentus-search-dock-column), the
   page column that ends immediately before footer.footer. Sticky keeps the
   bar on screen while that column fills the viewport; the dock's own flow
   box stays between the article and the footer, so footer links, the edit
   link, and the extension lister are not under a fixed overlay.
   Scope menu, Lunr results, and Ask panel still open UPWARD. */
.valentus-search-chat[data-placement='dock'] {
  position: relative;
  z-index: var(--valentus-search-top-z);
  align-self: center;
  flex: 0 0 auto;
  width: min(42rem, calc(100% - 2rem));
  max-width: calc(100vw - 2rem);
  margin-top: 0.75rem;
  margin-bottom: max(0.75rem, env(safe-area-inset-bottom));
  margin-inline: auto;
  overflow-anchor: none;
  /* Layout shell only — chrome lives on .valentus-search-compound. */
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
  box-shadow: none;
  color: var(--valentus-ink, #141820);
  transition: var(--valentus-search-theme-transition);
}

/* Sticky only when the column ends before the footer (valentus-search-dock-column).
   Otherwise the dock stays in normal flow directly above the footer. */
.valentus-search-dock-column > .valentus-search-chat[data-placement='dock'] {
  position: sticky;
  bottom: var(--valentus-search-viewport-bottom-gap);
}

/* Dock: scope menu opens upward above the scope row. */
.valentus-search-chat[data-placement='dock'] .valentus-search-scope-menu {
  top: auto;
  bottom: calc(100% + 0.35rem);
  /* (top:auto above cancels the navbar drop-down anchor) */
  box-shadow: 0 -0.45rem 1.25rem color-mix(in srgb, currentColor 14%, transparent);
}

/* Dock: Lunr results pop above the input wrap instead of below it. */
.valentus-search-chat[data-placement='dock'] .search-result-dropdown-menu {
  top: auto !important;
  bottom: calc(100% + 0.35rem);
  box-shadow: 0 -0.45rem 1.25rem color-mix(in srgb, currentColor 14%, transparent);
}

/* Dock: JS portals the scope menu and Lunr results to direct children of the
   dock root, so they anchor above the whole outer box, not just above the input row. */
.valentus-search-chat[data-placement='dock'] > .valentus-search-scope-menu {
  top: auto;
  bottom: calc(100% + 0.5rem);
  inset-inline: 0;
  width: auto;
  min-width: 0;
  max-width: none;
}

.valentus-search-chat[data-placement='dock'] > .search-result-dropdown-menu {
  top: auto !important;
  bottom: calc(100% + 0.5rem);
  left: 0 !important;
  right: 0 !important;
  inset-inline: 0;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
  /* Anchored to the viewport bottom: cap height so the first results stay
     on screen; the list scrolls internally. */
  max-height: min(65vh, calc(100vh - 12rem));
  overflow-y: auto;
}

/* Semantic on: two stacked zones, each its own scrollport. The menu does not scroll. */
.valentus-search-chat .search-result-dropdown-menu.valentus-search-results--split {
  display: flex;
  flex-direction: column;
  height: min(65vh, calc(100vh - 12rem));
  max-height: min(65vh, calc(100vh - 12rem));
  overflow: hidden !important;
}

.valentus-search-chat[data-placement='dock'] > .search-result-dropdown-menu.valentus-search-results--split {
  overflow: hidden !important;
}

.valentus-search-zone {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--valentus-search-surface);
}

.valentus-search-zone + .valentus-search-zone {
  border-top: 1px solid var(--valentus-search-rim);
}

.valentus-search-zone__title {
  position: sticky;
  top: 0;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--valentus-search-muted);
  background-color: var(--valentus-search-surface);
  border-bottom: 1px solid var(--valentus-search-rim);
}

.valentus-search-zone__empty {
  margin: 0;
  padding: 0.55rem 0.75rem;
  color: var(--valentus-search-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.valentus-search-chat:not([data-semantic-enabled='true']) .valentus-search-zone--semantic {
  display: none !important;
}

/* Dock: Ask answers stay in-flow under the query field (same shell as search). */
.valentus-search-chat[data-placement='dock'] .valentus-search-chat__ask-result:not([hidden]) {
  max-height: min(40vh, 14rem);
  overflow-y: auto;
}

/* Valentus sets `.valentus-nav-search` (and :hover / :focus / :focus-within) to
   `background: transparent !important`. The dock root carries that class, so
   the overlay shell was see-through even when the inner card was solid.
   These selectors are more specific and !important, and every fill is a hex
   custom property (no rgba, no color-mix with a translucent theme token). */
.valentus-search-chat.valentus-nav-search,
.valentus-search-chat.valentus-tool-search,
.valentus-search-chat.valentus-nav-search:hover,
.valentus-search-chat.valentus-nav-search:focus,
.valentus-search-chat.valentus-nav-search:focus-within,
.valentus-search-chat.valentus-tool-search:hover,
.valentus-search-chat.valentus-tool-search:focus,
.valentus-search-chat.valentus-tool-search:focus-within,
.valentus-search-chat[data-placement='dock'],
.valentus-search-chat[data-placement='dock']:hover,
.valentus-search-chat[data-placement='dock']:focus,
.valentus-search-chat[data-placement='dock']:focus-within {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.valentus-search-chat .valentus-search-chat__popover,
.valentus-search-chat .valentus-search-compound,
.valentus-search-chat .valentus-search-scope-slot,
.valentus-search-chat .valentus-search-scope-menu,
.valentus-search-chat .valentus-search-scope-option,
.valentus-search-chat .valentus-search-chat__query-slot,
.valentus-search-chat .valentus-search-input-wrap,
.valentus-search-chat .valentus-search-ask-wrap,
.valentus-search-chat .valentus-search-chat__ask-input,
.valentus-search-chat .valentus-search-chat__tabs,
.valentus-search-chat .valentus-search-chat__tab,
.valentus-search-chat .valentus-search-chat__toggle,
.valentus-search-chat .search-result-dropdown-menu,
.valentus-search-chat .search-result-dataset,
.valentus-search-chat .valentus-search-zone,
.valentus-search-chat .valentus-search-zone__title,
.valentus-search-chat .search-result-component-header,
.valentus-search-chat .search-result-document-title,
.valentus-search-chat .search-result-document-hit,
.valentus-search-chat .search-result-document {
  background: var(--valentus-search-surface) !important;
}

.valentus-search-chat .valentus-search-scope-trigger,
.valentus-search-chat .valentus-search-scope-trigger:hover,
.valentus-search-chat .valentus-search-scope-trigger:focus,
.valentus-search-chat .valentus-search-scope-trigger:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
}

.valentus-search-chat .valentus-search-ph-code {
  background: var(--valentus-search-chip) !important;
  background-color: var(--valentus-search-chip) !important;
}

.valentus-search-compound #search-input,
.valentus-search-compound #search-input:hover,
.valentus-search-compound #search-input:focus,
.valentus-nav-search.valentus-search-chat #search-input,
.valentus-nav-search.valentus-search-chat #search-input:hover,
.valentus-nav-search.valentus-search-chat #search-input:focus,
.valentus-tool-search.valentus-search-chat #search-input,
.valentus-tool-search.valentus-search-chat #search-input:hover,
.valentus-tool-search.valentus-search-chat #search-input:focus {
  background: var(--valentus-search-surface) !important;
}

.valentus-search-chat .valentus-search-scope-slot:hover,
.valentus-search-chat .valentus-search-scope-slot:focus-within,
.valentus-search-chat .valentus-search-scope-slot.is-open,
.valentus-search-chat .valentus-search-scope-option:hover,
.valentus-search-chat .valentus-search-scope-option:focus,
.valentus-search-chat .search-result-document-hit:hover,
.valentus-search-chat .search-result-document-hit:focus-within,
.valentus-search-chat .search-result-document-hit > a:hover,
.valentus-search-chat .search-result-document-hit > a:focus,
.valentus-search-chat .valentus-search-chat__tab:hover,
.valentus-search-chat .valentus-search-chat__tab:focus-visible,
.valentus-search-chat .valentus-search-chat__tab.is-active,
.valentus-search-chat .valentus-search-chat__toggle:hover,
.valentus-search-chat .valentus-search-chat__toggle:focus-visible {
  background: var(--valentus-search-surface-hover) !important;
}

.valentus-search-chat .valentus-search-scope-slot.is-disabled,
.valentus-search-chat .valentus-search-scope-slot.is-disabled:hover,
.valentus-search-chat .valentus-search-scope-slot.is-disabled:focus-within,
.valentus-search-chat .valentus-search-feature-hints,
html.dark-theme .valentus-search-chat kbd.valentus-search-chat__hint,
html.dark-theme .valentus-search-chat kbd.valentus-search-chat__field-hint,
.valentus-search-chat kbd.valentus-search-chat__hint,
.valentus-search-chat kbd.valentus-search-chat__field-hint {
  background: var(--valentus-search-chip) !important;
  opacity: 1 !important;
}

.valentus-search-chat .valentus-search-chat__ask-result {
  background: var(--valentus-search-ask) !important;
}

.valentus-search-chat .valentus-search-chat__ask-result.is-error {
  background: var(--valentus-search-ask-error) !important;
}

.valentus-search-chat .search-result-highlight,
html.dark-theme .valentus-search-chat .search-result-document-hit .search-result-highlight {
  background: var(--valentus-search-hit) !important;
}