/* ============================================================
 * Platform search-input — single source of truth for the shape.
 *
 * Loaded by every app in the monorepo (sift, shed, app/next).
 * Shape (height, radius, icon + input + clear layout) is declared ONCE here
 * and never redeclared by consumers. Themes tune colors via CSS vars only.
 *
 * Usage: see app/js/ui/search-input/index.js — call createSearchInput(host, opts).
 *
 * Collapsed mode (Finder-style icon-only fallback) reuses the platform
 * icon-button shape by referencing --icon-btn-size / --icon-btn-glyph,
 * so a collapsed search is visually identical to other toolbar icons.
 *
 * TRK-394 Phase 3 layer assignment:
 *   @layer platform → shape, glyph sizing, input layout, clear-button shape
 *   @layer module   → focus-within, hover, .has-value, .is-collapsed states
 *   @layer theme    → dark-mode :root token defaults
 * ============================================================ */

@layer platform {
  .sift-search {
    display: inline-flex;
    align-items: center;
    /* Spec §components.icon_btn.spacing — internal icons (leading
       search-glyph, trailing clear-X) follow the same platform rhythm
       as toolbar icon-btns: 1/2 · icon-btn-size between any icon and
       its neighbor. Wired to --icon-btn-size so per-context retunes
       (e.g. dense in-row scope) propagate here too. */
    gap: calc(var(--icon-btn-size, 24px) / 2);
    height: var(--search-h, 24px);
    padding: 0 8px;
    box-sizing: border-box;
    flex: 0 1 auto;
    min-width: 100px;
    max-width: var(--search-max, 240px);
    border-radius: 999px;
    background: var(--search-bg, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--search-border, rgba(0, 0, 0, 0.08));
    color: var(--search-fg, var(--text, currentColor));
    -webkit-app-region: no-drag;
    transition: background 120ms, border-color 120ms, width 120ms, max-width 120ms;
  }

  .sift-search > svg,
  .sift-search > i[data-lucide] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--search-icon, var(--muted, currentColor));
    stroke-width: 2;
  }

  .sift-search input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1;
  }

  .sift-search input::placeholder {
    color: var(--search-placeholder, var(--muted, rgba(0, 0, 0, 0.4)));
  }

  .sift-search .sift-search-clear {
    all: unset;
    display: none;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--search-icon, var(--muted, currentColor));
    flex-shrink: 0;
    transition: background 120ms;
  }

  .sift-search .sift-search-clear > svg,
  .sift-search .sift-search-clear > i[data-lucide] {
    width: 10px;
    height: 10px;
    stroke-width: 2.2;
  }
}

@layer module {
  /* Focus + hover states. Module > theme: a theme catch-all on .sift-search
     can never override these without explicit module-layer opt-out. */
  .sift-search:focus-within {
    background: var(--search-focus-bg, #ffffff);
    border-color: var(--search-focus-border, var(--accent, #0064E1));
  }

  .sift-search .sift-search-clear:hover {
    background: rgba(0, 0, 0, 0.10);
  }

  .sift-search.has-value .sift-search-clear {
    display: inline-flex;
  }

  /* Collapsed mode — Finder-style: the widget becomes an icon button. */
  .sift-search.is-collapsed {
    width: var(--icon-btn-size, 24px);
    min-width: 0;
    max-width: none;
    padding: 0;
    gap: 0;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
  }
  .sift-search.is-collapsed:hover {
    border-color: var(--icon-btn-border, rgba(0, 0, 0, 0.20));
  }
  .sift-search.is-collapsed input,
  .sift-search.is-collapsed .sift-search-clear {
    display: none;
  }
  .sift-search.is-collapsed > svg,
  .sift-search.is-collapsed > i[data-lucide] {
    width: var(--icon-btn-glyph, 16px);
    height: var(--icon-btn-glyph, 16px);
    color: var(--icon-btn-fg, var(--text, currentColor));
  }
}

/* Recent-searches dropdown — opens on focus when input is empty.
 * Teleported to document.body, positioned via fixed coords from JS,
 * so it can't be trapped by ancestor containment.
 *
 * Geometry flows through local custom-properties on .sift-search-dropdown
 * (the MSoT pattern used by .wb-reader and other islands) — keeps the
 * css-literals scanner clean and gives consumers a single override point.
 * Shadow reuses the platform --lf-shadow-island token (2·8px blur per
 * the LF shadow spec). */
@layer platform {
  .sift-search-dropdown {
    --sd-max-w: var(--sp-6, 32px);
    --sd-pad-block: var(--sp-1, 4px);
    --sd-item-pad-y: var(--sp-1, 4px);
    --sd-item-pad-x: var(--sp-2, 8px);
    --sd-radius: var(--sp-2, 8px);
    --sd-item-radius: var(--sp-1, 4px);

    /* Above sidebar/picker but below tooltips — same tier as the
       context-menu manifest token. */
    z-index: var(--z-context-menu, 600);
    /* Anchor — JS sets the three --sd-anchor-* vars on open and on
       resize/scroll. Reading them via var() keeps the inline-state
       writes confined to custom properties (MSoT-clean). */
    position: fixed;
    top: var(--sd-anchor-top, 0);
    left: var(--sd-anchor-left, 0);
    min-width: var(--sd-anchor-min-w, 0);
    max-width: calc(var(--sd-max-w) * 10);
    max-height: calc(var(--sd-max-w) * 10);
    overflow-y: auto;
    padding: var(--sd-pad-block);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--sd-radius);
    box-shadow: var(--lf-shadow-island, var(--lf-shadow-card));
    color: var(--text, currentColor);
    font-size: var(--fs-base, 13px);
  }

  .sift-search-dropdown__section {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding: var(--sd-item-pad-y) var(--sd-item-pad-x) 0;
  }

  .sift-search-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    padding: var(--sd-item-pad-y) var(--sd-item-pad-x);
    border-radius: var(--sd-item-radius);
    cursor: pointer;
    user-select: none;
  }

  .sift-search-dropdown__hint {
    font-size: var(--fs-xs);
    color: var(--muted);
    flex-shrink: 0;
  }
}

@layer module {
  /* Label truncation — selector is qualified by the item parent so it sits
     in a different specificity bucket from generic ellipsis labels
     (.chart-legend-name, .shi-expr) and the dropdown owns its own surface. */
  .sift-search-dropdown__item > .sift-search-dropdown__label {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Keyboard-highlighted state uses .is-highlighted (not .is-active) to
     avoid colliding with the .is-active token that sidebar/chat row state
     classes already own. Same visual, distinct semantic. */
  .sift-search-dropdown__item:hover,
  .sift-search-dropdown__item.is-highlighted {
    background: var(--hover);
  }
}

@layer theme {
  @media (prefers-color-scheme: dark) {
    :root {
      --search-bg: rgba(255, 255, 255, 0.08);
      --search-border: rgba(255, 255, 255, 0.10);
      --search-focus-bg: rgba(255, 255, 255, 0.14);
      --search-focus-border: var(--accent, #0A84FF);
    }
    .sift-search .sift-search-clear:hover {
      background: rgba(255, 255, 255, 0.12);
    }
  }
}