/* Search / Ask control — owns the centered navbar search slot (.adt-navbar-search). */
:root {
  /* Match Valentus --adt-transition so light↔dark does not snap the omnibox chrome. */
  --adt-search-theme-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.25s ease;
}

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

/* Navbar: one-row omnibox. Tabs are transitional; / and ? still switch modes. */
.adt-site-navbar .adt-search-chat,
.adt-navbar-search .adt-search-chat {
  gap: 0;
  min-height: 2.15rem;
}

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

.adt-site-navbar .adt-search-chat__panel[data-adt-search-panel='ask']:not([hidden]),
.adt-navbar-search .adt-search-chat__panel[data-adt-search-panel='ask']:not([hidden]) {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  inset-inline: 0;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--adt-accent, #0d9488) 28%, transparent);
  border-radius: 0.5rem;
  background: var(--adt-elevated, var(--color-background, #fff));
  box-shadow: 0 0.35rem 1rem color-mix(in srgb, currentColor 12%, transparent);
  transition: var(--adt-search-theme-transition);
}

html.dark-theme .adt-site-navbar .adt-search-chat__panel[data-adt-search-panel='ask']:not([hidden]),
html.dark-theme .adt-navbar-search .adt-search-chat__panel[data-adt-search-panel='ask']:not([hidden]) {
  background: var(--adt-elevated, var(--color-background, #1a1a1a));
}

/* ——— Collapse-to-icon (narrow / collision) ——— */
.adt-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 color-mix(in srgb, var(--adt-accent, #0d9488) 28%, var(--adt-border, #d9dee7));
  border-radius: 0.5rem;
  background: var(--adt-elevated, #fff);
  color: var(--adt-ink, #141820);
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--adt-search-theme-transition);
}

.adt-search-chat__toggle:hover,
.adt-search-chat__toggle:focus-visible {
  border-color: var(--adt-accent, #0d9488);
  background: var(--adt-accent-soft, color-mix(in srgb, var(--adt-accent, #0d9488) 12%, var(--adt-elevated, #fff)));
  outline: none;
}

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

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

html.dark-theme .adt-search-chat__toggle {
  background: var(--adt-elevated, #1a1a1a);
  color: var(--adt-ink, #e8eaed);
  border-color: color-mix(in srgb, var(--adt-accent, #2dd4bf) 28%, var(--adt-border, #3a4454));
}

html.dark-theme .adt-search-chat__toggle:hover,
html.dark-theme .adt-search-chat__toggle:focus-visible {
  background: var(--adt-accent-soft, color-mix(in srgb, var(--adt-accent, #2dd4bf) 16%, var(--adt-elevated, #1a1a1a)));
}

/* Expanded (default): popover is the in-flow omnibox; toggle stays hidden. */
.adt-search-chat__popover {
  position: relative;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

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

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

.adt-search-chat.is-collapsed .adt-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 color-mix(in srgb, var(--adt-accent, #0d9488) 28%, var(--adt-border, #d9dee7));
  border-radius: 0.65rem;
  background: var(--adt-elevated, var(--color-background, #fff));
  box-shadow: 0 0.45rem 1.25rem color-mix(in srgb, currentColor 14%, transparent);
  box-sizing: border-box;
  transition: var(--adt-search-theme-transition);
}

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

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

html.dark-theme .adt-search-chat.is-collapsed .adt-search-chat__popover {
  background: var(--adt-elevated, var(--color-background, #1a1a1a));
  border-color: color-mix(in srgb, var(--adt-accent, #2dd4bf) 28%, var(--adt-border, #3a4454));
}

/* In collapsed open mode, Ask panel is in-flow inside the popover (not a second absolute layer). */
.adt-search-chat.is-collapsed .adt-search-chat__panel[data-adt-search-panel='ask']:not([hidden]) {
  position: static;
  inset: auto;
  top: auto;
  margin-top: 0.5rem;
  box-shadow: none;
}

.adt-search-chat__tabs {
  display: flex;
  gap: 0.25rem;
}

.adt-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 color-mix(in srgb, var(--adt-accent, #0d9488) 28%, transparent);
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}

.adt-search-chat__hint,
.adt-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 color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.75;
}

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

/* Compound scope + input: one pill, shared border, inner rule (visual stub).
   Must stay overflow:visible — lunr's search-ui.js does
   searchInput.parentNode.appendChild(.search-result-dropdown-menu), and with
   compound markup that parent is .adt-search-input-wrap (not #search-field).
   Absolute results (top:100%) must not be clipped by compound or the wrap.
   container-type: inline-size → 100cqi = full pill width for results alignment. */
.adt-search-compound {
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.15rem;
  border: 1px solid color-mix(in srgb, var(--adt-accent, #0d9488) 28%, var(--adt-border, #d9dee7));
  border-radius: 0.5rem;
  background: var(--adt-elevated, #fff);
  overflow: visible;
  color: var(--adt-ink, #141820);
  container-type: inline-size;
  container-name: adt-search-compound;
  /* Opaque pill sits on the navbar — must transition with theme or it snaps. */
  transition: var(--adt-search-theme-transition);
}

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

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

/* Full-height left segment — owns the fill so hover/focus isn't a thin select slice. */
.adt-search-scope-slot {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 9.5rem;
  max-width: 14rem;
  min-height: 100%;
  box-sizing: border-box;
  border-inline-end: 1px solid color-mix(in srgb, var(--adt-ink, #141820) 18%, transparent);
  border-start-start-radius: calc(0.5rem - 1px);
  border-end-start-radius: calc(0.5rem - 1px);
  background-color: var(--adt-elevated, #fff);
  overflow: hidden;
  cursor: default;
  transition: var(--adt-search-theme-transition);
}

/* Dual-tone closed face (primary kind + muted current name/version).
   Select sits on top with transparent text so the menu still works. */
.adt-search-scope-face {
  position: absolute;
  inset: 0 1.65rem 0 0.65rem;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  pointer-events: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

.adt-search-scope-kind {
  flex: 0 0 auto;
  color: var(--adt-ink, #141820);
}

.adt-search-scope-current {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--adt-ink-muted, #5a6270);
  font-weight: 400;
}

.adt-search-scope-current:empty {
  display: none;
}

/* Chevron lives on the slot (::after), not dual CSS-gradient triangles on the
   select — those two half-squares misaligned into a “tongue” at the tip. */
.adt-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(--adt-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;
}

.adt-search-scope {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 1.65rem 0 0.65rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  /* Transparent closed text — face paints the dual-tone label. Options keep opaque ink. */
  color: transparent;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
}

.adt-search-scope option {
  color: var(--adt-ink, #141820);
  background-color: var(--adt-elevated, #fff);
}

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

html.dark-theme .adt-search-scope {
  color: transparent;
  background-color: transparent;
  background-image: none;
}

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

html.dark-theme .adt-search-scope-current {
  color: var(--adt-ink-muted, #9aa3b2);
}

html.dark-theme .adt-search-scope-slot {
  border-inline-end-color: color-mix(in srgb, var(--adt-ink, #e8eaed) 18%, transparent);
}

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

/* Soft fill on the whole left segment (not the native select content box). */
.adt-search-scope-slot:hover,
.adt-search-scope-slot:focus-within {
  background-color: var(--adt-accent-soft, color-mix(in srgb, var(--adt-accent, #0d9488) 12%, var(--adt-elevated, #fff)));
}

.adt-search-scope:focus,
.adt-search-scope:focus-visible,
.adt-search-scope:active {
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

html.dark-theme .adt-search-scope-slot:hover,
html.dark-theme .adt-search-scope-slot:focus-within {
  background-color: var(--adt-accent-soft, color-mix(in srgb, var(--adt-accent, #2dd4bf) 16%, var(--adt-elevated, #1a1a1a)));
}

html.dark-theme .adt-search-scope:focus,
html.dark-theme .adt-search-scope:focus-visible,
html.dark-theme .adt-search-scope:active {
  background-color: transparent;
  background-image: none;
}

/* Input + fake placeholder share one flex cell of the compound pill.
   overflow must stay visible: lunr mounts .search-result-dropdown-menu here
   (#search-input's parentNode). Clip only the scope slot, not this wrap. */
.adt-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  border-start-end-radius: calc(0.5rem - 1px);
  border-end-end-radius: calc(0.5rem - 1px);
  overflow: visible;
}

/* Lunr positions the menu against this wrap (not the full compound). A plain
   left:0 / width:100% (or lunr right:0 + min-width) leaves a large left inset
   under the scope and a tight/flush right edge. Anchor right:0 and set width to
   100cqi so the panel spans the whole pill — equal edges vs the search compound.
   Keep overflow:visible on wrap/compound so the leftward span is not clipped. */
.adt-search-compound .search-result-dropdown-menu,
.adt-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;
}

/* Beat theme .adt-nav-search #search-input !important rules.
   Clip typed text on the input itself (not the wrap that hosts lunr results). */
.adt-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 1.75rem 0.35rem 0.65rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: var(--adt-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;
}

.adt-search-compound #search-input:hover,
.adt-search-compound #search-input:focus {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}

/* Compound field uses .adt-search-chat__field-hint; hide theme ::after "/" badge. */
.adt-search-chat #search-field::after,
.adt-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. */
.adt-search-ph {
  position: absolute;
  inset-inline-start: 0.65rem;
  inset-inline-end: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: calc(100% - 2.4rem);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  color: color-mix(in srgb, var(--adt-ink, currentColor) 48%, transparent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}

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

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

/* Secondary note when Ask/AI is not configured — deader than the main "Search". */
.adt-search-ph-note {
  color: color-mix(in srgb, var(--adt-ink, currentColor) 28%, transparent);
  font-weight: 400;
}

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

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

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

.adt-search-chat__field--ask .adt-search-chat__ask-input {
  padding-inline-end: 1.75rem;
}

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

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

.adt-search-chat__panel[hidden] {
  display: none;
}

.adt-search-chat__ask-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.adt-search-chat__ask-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--adt-accent, #0d9488) 28%, transparent);
  border-radius: 0.35rem;
  background: var(--adt-elevated, transparent);
  color: var(--adt-ink, inherit);
  font: inherit;
  font-size: 0.875rem;
  resize: vertical;
  min-height: 2.5rem;
}

.adt-search-chat__ask-input:focus {
  outline: none;
  border-color: var(--adt-accent, #0d9488);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--adt-accent, #0d9488) 35%, transparent);
}

.adt-search-chat__ask-submit {
  align-self: flex-end;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--adt-accent, #0d9488);
  border-radius: 0.35rem;
  background: transparent;
  color: var(--adt-accent, #0d9488);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}

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

.adt-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-mix(in srgb, var(--adt-accent, #0d9488) 8%, transparent);
}

.adt-search-chat__ask-result.is-error {
  background: color-mix(in srgb, #b91c1c 10%, transparent);
}

.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;
}