@if (open) {
  <div class="gs-overlay" (click)="close()">
    <div class="gs-modal" (click)="$event.stopPropagation()">
      <div class="gs-input-row">
        <lucide-icon [img]="Search" [size]="18" class="gs-search-icon"></lucide-icon>
        <input
          #searchInput
          type="text"
          class="gs-input"
          placeholder="Rechercher dans LoreMind..."
          [ngModel]="query"
          (ngModelChange)="onQueryChange($event)" />
        <span class="gs-kbd">ESC</span>
      </div>
      @if (results.length > 0) {
        <div class="gs-results">
          @for (r of results; track r; let i = $index) {
            <button
              class="gs-result"
              [class.active]="i === activeIndex"
              (mouseenter)="activeIndex = i"
              (click)="select(r)">
              <lucide-icon [img]="iconFor(r.kind)" [size]="16" class="gs-result-icon"></lucide-icon>
              <div class="gs-result-body">
                <div class="gs-result-title">{{ r.title }}</div>
                @if (r.subtitle) {
                  <div class="gs-result-subtitle">{{ r.subtitle }}</div>
                }
                <div class="gs-result-tag">{{ r.tag }}</div>
              </div>
            </button>
          }
        </div>
      }
      @if (!loading && query.trim().length >= 2 && results.length === 0) {
        <div class="gs-empty">
          Aucun résultat
        </div>
      }
      @if (query.trim().length < 2) {
        <div class="gs-empty">
          Tape au moins 2 caractères
        </div>
      }
      <div class="gs-footer">
        <div class="gs-hints">
          <span><kbd>↑</kbd><kbd>↓</kbd> naviguer</span>
          <span><kbd>↵</kbd> sélectionner</span>
          <span><kbd>ESC</kbd> fermer</span>
        </div>
        @if (results.length > 0) {
          <span class="gs-count">
            {{ results.length }} résultat{{ results.length > 1 ? 's' : '' }}
          </span>
        }
      </div>
    </div>
  </div>
}