/* search-palette.css — Design 091 Phase 1b: the shared ⌘K command palette.
   Theme tokens only (var(--color-*)); generous fallbacks so it works in either chrome (hub +
   runtime) even if a given token isn't defined there. */

.sp-no-scroll { overflow: hidden; }

.sp-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
  background: color-mix(in srgb, var(--color-text, #0b1020) 38%, transparent);
  backdrop-filter: blur(2px);
}
.sp-overlay.is-open { display: flex; }

.sp-box {
  width: 100%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e3e6ee);
  border-radius: 14px;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--color-text, #0b1020) 30%, transparent);
  overflow: hidden;
}

.sp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--color-border-subtle, var(--color-border, #eee)); }
.sp-icon { font-size: 18px; color: var(--color-text-muted, #6b7280); }
.sp-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 17px; color: var(--color-text, #111);
}
.sp-input::placeholder { color: var(--color-text-muted, #9aa1ad); }
.sp-esc {
  font-size: 11px; color: var(--color-text-muted, #6b7280);
  border: 1px solid var(--color-border, #e3e6ee); border-radius: 6px; padding: 2px 6px;
}

.sp-status { padding: 14px 18px; color: var(--color-text-muted, #6b7280); font-size: 14px; }

.sp-list { overflow-y: auto; padding: 6px 6px 10px; }

.sp-group {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.sp-group-app { font-weight: 700; color: var(--color-text, #111); }
.sp-group-model { color: var(--color-text-muted, #6b7280); }

.sp-hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; border-radius: 9px;
  padding: 9px 12px; font: inherit; color: var(--color-text, #111);
}
.sp-hit:hover, .sp-hit.is-sel { background: var(--color-surface-alt, color-mix(in srgb, var(--color-accent, #6366f1) 12%, transparent)); }
.sp-hit.is-sel { box-shadow: inset 0 0 0 1px var(--color-accent, #6366f1); }
.sp-hit-title { font-size: 15px; font-weight: 600; }
.sp-hit-snippet {
  margin-top: 2px; font-size: 13px; color: var(--color-text-muted, #6b7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* the visible trigger injected into each chrome's header */
.sp-trigger {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--color-border, #e3e6ee); border-radius: 999px;
  background: var(--color-surface, #fff); color: var(--color-text-muted, #6b7280);
  padding: 5px 10px; font: inherit; font-size: 13px;
}
.sp-trigger:hover { color: var(--color-text, #111); border-color: var(--color-accent, #6366f1); }
.sp-trigger-icon { font-size: 14px; }
.sp-trigger-kbd {
  font-size: 11px; color: var(--color-text-muted, #6b7280);
  border: 1px solid var(--color-border, #e3e6ee); border-radius: 5px; padding: 1px 5px;
}
/* Mobile (≤640px — the app's standard breakpoint): collapse the search pill to a compact
   38px icon button that MATCHES the notifications bell + theme toggle beside it, and drop the
   ⌘K hint (meaningless without a keyboard). Fixes the misaligned/oversized pill in the mobile
   header. */
@media (max-width: 640px) {
  .sp-trigger-label, .sp-trigger-kbd { display: none; }
  .sp-trigger {
    gap: 0; padding: 0; width: 38px; height: 38px;
    justify-content: center; border-radius: 10px;
  }
  .sp-trigger-icon { font-size: 18px; }
}