@layer components {
  /* The ⌘K palette: 640 px under the top of the window, over the voile. */
  .search-palette {
    width: min(640px, calc(100vw - 32px)); max-width: none; max-height: 80dvh; margin: 112px auto auto; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden;
    background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-float); font-size: 14px;
  }
  .search-palette[open] { display: flex; flex-direction: column; }
  .search-palette::backdrop { background: var(--scrim); }
  .search-palette-search {
    display: flex; align-items: center; gap: 10px; flex: none; min-height: 52px; padding: 14px 14px 14px 16px;
    box-sizing: border-box; border-bottom: 1px solid var(--border); color: var(--muted-foreground);
  }
  .search-palette-search:has(.search-palette-input:focus) { box-shadow: inset 0 -2px 0 var(--jx-accent); }
  .search-palette-field { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
  .search-palette-field svg { flex: none; }
  .search-palette-input {
    flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--foreground);
    font: inherit; font-size: 16px; box-shadow: none; appearance: none;
  }
  .search-palette-input::placeholder { color: var(--muted-foreground); opacity: 1; }
  .search-palette-input::-webkit-search-cancel-button { appearance: none; display: none; }
  .search-palette-close, .search-palette-foot kbd {
    display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--surface); color: var(--muted-foreground); font: inherit; font-size: 13px;
  }
  .search-palette-foot kbd {
    box-sizing: border-box; min-width: 22px; height: 24px; justify-content: center; padding: 0 6px;
    border-radius: 4px; background: var(--background);
  }
  .search-palette-foot kbd:has(> svg) { padding: 0; }
  .search-palette-close { cursor: pointer; }
  .search-palette-close:focus-visible, .search-palette-cancel:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 1px; }
  .search-palette-cancel { display: none; }
  .search-palette-close-word { display: none; }
  .search-palette-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
  .search-palette-body:has(.search-palette-list:empty):not(:has(.search-palette-error:not([hidden]))) { padding: 0; }
  .search-palette-loading { margin: 0; padding: 10px; color: var(--muted-foreground); }
  .search-palette-loading[hidden], .search-palette-error[hidden] { display: none; }
  .search-palette-error {
    display: flex; align-items: center; gap: 12px; margin-bottom: 4px; padding: 10px; color: var(--jx-no);
  }
  .search-palette-heading { padding: 8px 10px 4px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
  .search-palette-option {
    display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 2px; padding: 8px 10px;
    border-radius: 8px; cursor: pointer;
  }
  .search-palette-option:hover { background: var(--muted); }
  .search-palette-option[aria-selected=true] {
    background: var(--jx-accent-soft); outline: 1px solid var(--jx-accent-line); outline-offset: -1px;
  }
  .search-palette-option--more { color: var(--jx-accent); font-size: 13px; font-weight: 500; }
  .search-palette-visual {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px;
    color: var(--muted-foreground);
  }
  .search-palette-visual:not(.icon-tile) { border-radius: 999px; }
  /* A group's stack is wider than the 24px slot. */
  .search-palette-visual--group { width: auto; min-width: 24px; justify-content: flex-start; }
  .search-palette-visual--agent { color: var(--agent-color); background: color-mix(in oklch, var(--agent-color) 12%, transparent); }
  .search-palette-text { display: flex; flex: 1; align-items: baseline; gap: 10px; min-width: 0; }
  .search-palette-label { min-width: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .search-palette-option--more .search-palette-label { font-size: 13px; }
  .search-palette-meta {
    min-width: 0; overflow: hidden; color: var(--muted-foreground); font-size: 13px; text-overflow: ellipsis; white-space: nowrap;
  }
  .search-palette-meta--phone { display: none; }
  .search-palette-enter {
    display: none; flex: none; margin-left: auto; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px;
    background: var(--background); color: var(--muted-foreground); font-size: 13px;
  }
  .search-palette-option[aria-selected=true] .search-palette-enter { display: inline-flex; }
  .search-palette-separator { height: 1px; margin: 6px 0; background: var(--border); }
  .search-palette-none { margin: 0; padding: 32px 24px; text-align: center; color: var(--muted-foreground); }
  .search-palette-limit { margin: 0; padding: 4px 10px 8px; color: var(--muted-foreground); font-size: 13px; }
  .search-palette-foot {
    display: flex; flex: none; gap: 14px; min-height: 40px; padding: 8px 14px; box-sizing: border-box;
    border-top: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); font-size: 13px;
  }
  .search-palette-foot > span { display: inline-flex; align-items: center; gap: 4px; }

  /* Phones: the palette is the whole screen, clear of the notch; « Annuler » replaces the key hint. */
  @media (max-width: 767px) {
    .search-palette {
      width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; border: 0; border-radius: 0;
    }
    .search-palette-search {
      gap: 12px; min-height: 0; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px 16px; border-bottom: 0;
    }
    .search-palette-close, .search-palette-foot { display: none; }
    .search-palette-field {
      gap: 8px; height: 44px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--border);
      border-radius: 8px; background: var(--background);
    }
    .search-palette-field:focus-within {
      border-color: color-mix(in oklch, var(--jx-accent) 55%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--jx-accent) 55%, transparent);
    }
    .search-palette-search:has(.search-palette-input:focus) { box-shadow: none; }
    .search-palette-field svg { width: 14px; height: 14px; color: var(--muted-foreground); }
    .search-palette-input { min-height: 0; font-size: 15px; color: var(--foreground); }
    .search-palette-cancel {
      display: inline-flex; align-items: center; flex: none; min-height: var(--tap); padding: 0; border: 0;
      background: transparent; color: var(--jx-accent); font: inherit; font-size: 16px; cursor: pointer;
    }
    .search-palette-heading { padding: 10px 16px; line-height: 14px; }
    .search-palette-limit { padding: 4px 16px 8px; }
    .search-palette-separator { margin: 6px 16px; }
    .search-palette-option { min-height: var(--tap); padding: 10px 16px; border-radius: 0; }
    .search-palette-option--more { min-height: var(--tap); }
    .search-palette-meta--desk { display: none; }
    .search-palette-meta--phone { display: block; }
    .search-palette-body { padding: 0 0 var(--safe-bottom, 0px); }
  }

  /* Touch tablets: the desktop palette with « Fermer » for the key hint, until a physical key is struck. */
  @media (min-width: 768px) and (pointer: coarse) {
    .search-palette:not([data-keys]) .search-palette-foot { display: none; }
    .search-palette:not([data-keys]) .search-palette-close-esc { display: none; }
    .search-palette:not([data-keys]) .search-palette-close-word { display: inline; }
    .search-palette-close, .search-palette-input { min-height: var(--tap); }
    .search-palette-option { min-height: var(--tap); }
  }

  /* Forced colors drop shadows: the focus cue becomes an outline. */
  @media (forced-colors: active) {
    .search-palette-search:has(.search-palette-input:focus) { outline: 2px solid Highlight; outline-offset: -2px; }
    @media (max-width: 767px) {
      .search-palette-search:has(.search-palette-input:focus) { outline: 0; }
      .search-palette-field:focus-within { outline: 2px solid Highlight; outline-offset: -2px; }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .search-palette[open] { animation: search-palette-in 150ms var(--ease-out); }
    @keyframes search-palette-in { from { opacity: 0; } }
  }
}