/* ═══════════════════════════════════════════
   HQ Command Palette (Cmd+K / Ctrl+K)
   Floating action launcher. One panel, three result kinds:
   builtin actions (next-task), agents, projects.

   Mirrors the modal idiom used elsewhere in HQ (.tag-modal,
   .path-collision-modal) — fixed overlay + centered panel + amber accents.
   Uses the global :focus-visible ring from base.css for a11y.
   ═══════════════════════════════════════════ */

.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  /* Slightly darker than tag-modal-overlay (0.55) so the page recedes more
     when the palette is open — Cmd+K is a "focus your attention here"
     gesture, the panel earns a stronger backdrop. */
  background: rgba(0, 0, 0, 0.65);
  /* Above task-drawer (z=200) and tag-modal (z=300) — Cmd+K is the most
     interruptive surface and should always paint on top. */
  z-index: 400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Vertical: panel sits ~12% down on desktop so the eye lands on it
     naturally (research shows users miss top-anchored modals).
     `max()` keeps the 12vh visual rhythm but ensures iOS notch /
     status bar / Dynamic Island never cover the panel. Pattern from
     hq@e37c073. */
  padding-top: max(12vh, env(safe-area-inset-top));
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  animation: fade-in 0.12s ease;
}

.cmd-palette {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65),
              0 0 0 1px var(--color-amber-dim);
  display: flex;
  flex-direction: column;
  /* Cap height so very long agent rosters don't run off screen. The inner
     results pane has its own scroll. */
  max-height: 70vh;
  overflow: hidden;
}

.cmd-palette__input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.cmd-palette__prompt {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-amber);
  font-weight: 600;
  letter-spacing: 0.04em;
  /* Fixed width so the input field doesn't shift when the prompt loads. */
  min-width: 36px;
}

.cmd-palette__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  padding: 0;
  /* Browsers add a tiny native search-input clear button; suppress for
     visual consistency. */
  -webkit-appearance: none;
}

.cmd-palette__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

.cmd-palette__results {
  /* Inner scroller — caps the panel. When result count is small the area
     collapses to fit, which is fine. */
  overflow-y: auto;
  flex: 1;
  padding: var(--space-2) 0;
  /* Reserve enough room that the empty state (single-line) still feels
     intentional rather than a thin sliver. */
  min-height: 60px;
}

.cmd-palette__empty {
  padding: var(--space-5) var(--space-5);
  color: var(--color-dim);
  font-size: var(--text-md);
  text-align: center;
}

.cmd-palette__result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  /* No transition — selection feedback should be instant for keyboard nav. */
  border-left: 2px solid transparent;
}

.cmd-palette__result.is-selected {
  background: var(--color-panel2);
  border-left-color: var(--color-amber);
}

/* Mouse hover behaves like keyboard selection — the JS layer updates
   _selected on mousemove, so visually we only need to react to the class. */

.cmd-palette__result-icon {
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.cmd-palette__result-text {
  flex: 1;
  min-width: 0;
}

.cmd-palette__result-label {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmd-palette__result-hint {
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmd-palette__result-kind {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.cmd-palette__hint {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-panel2);
  font-size: var(--text-sm);
  color: var(--color-dim);
}

/* ═══════════════════════════════════════════
   Mobile (≤480px)
   - Panel takes full width with a smaller top inset.
   - Input font stays at 16px-equivalent (--text-xl is 16px) so iOS
     doesn't auto-zoom on focus (matches base.css minimum).
   - Hint footer hidden — keyboard nav hints aren't meaningful on touch.
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .cmd-palette-overlay {
    padding-top: 4vh;
  }

  .cmd-palette {
    max-height: 90vh;
  }

  .cmd-palette__input {
    /* Already 16px via --text-xl, but pin explicitly so a future scale
       change doesn't accidentally re-introduce iOS auto-zoom. */
    font-size: 16px;
  }

  .cmd-palette__hint {
    display: none;
  }

  .cmd-palette__result {
    /* 44px-min touch target — match the 44px target invariant the rest of
       HQ enforces. Padding-y of 14px + content height ≈ 44px. */
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* ═══════════════════════════════════════════
   Unread / new-since-last-visit divider
   Shared by feed.js and chat.js. Kept in this file (rather than feed.css /
   chat.css) so the rule lives next to its conceptual neighbor — both are
   "global UX affordances" added in the same wave.
   ═══════════════════════════════════════════ */

.unread-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  /* Subtle by default — the divider is informational, not alarming. The
     amber accent picks up the brand color but at low saturation. */
  color: var(--color-amber);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  user-select: none;
}

.unread-divider::before,
.unread-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-amber-dim);
}

/* Inside the chat message list, the divider sits between message bubbles.
   Add a small vertical breathing room so it doesn't feel jammed against
   the prior bubble. */
.chat-messages .unread-divider {
  margin: var(--space-2) var(--space-2);
}

/* Inside the feed panel, the divider matches the feed-event row gutter so
   alignment with rows above and below stays clean. */
.feed-panel .unread-divider {
  margin: var(--space-2) 0;
}