/**
 * CommandPalette Styles
 * @countermeasure/web-components
 *
 * Styles the vanilla `CommandPalette` component
 * (src/components/search/command-palette.ts). The component emits this DOM:
 *
 *   div.cmm-command-palette__overlay        <- ROOT, appended to <body>, fixed backdrop
 *     div.cmm-command-palette               <- centered panel
 *       input.cmm-command-palette__input    <- search input
 *       div.cmm-command-palette__results     <- scrollable results region
 *         div.cmm-command-palette__group      <- group heading (text only)
 *         div.cmm-command-palette__item[ .cmm-command-palette__item--active ]
 *           span                              <- command label (no class)
 *           span.cmm-command-palette__keybinding  <- optional shortcut (text only)
 *
 * Loaded after search.css so these rules supersede the stale, DOM-mismatched
 * `.cmm-command-palette*` block there via source order. Design tokens mirror
 * the conventions in copy-button.css / search.css (var(--color-*) family).
 */

/* ============================================================================
   OVERLAY (root / backdrop)
   ============================================================================ */
.cmm-command-palette__overlay {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 400);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 15vh 1rem 1rem;
  background-color: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cmm-command-palette-backdrop-in var(--transition-fast, 150ms) ease-out;
}

@keyframes cmm-command-palette-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================================
   PANEL
   ============================================================================ */
.cmm-command-palette {
  box-sizing: border-box;
  /* Reset stale layout from search.css: this is the panel, not the layout box. */
  position: relative;
  inset: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  width: 92%;
  max-width: 640px;
  max-height: 70vh;
  overflow: hidden;
  background-color: var(--color-popover);
  color: var(--color-popover-foreground);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl, 0 25px 50px -12px rgb(0 0 0 / 0.5));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: cmm-command-palette-in var(--transition-normal, 200ms) ease-out;
}

@keyframes cmm-command-palette-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================================================================
   INPUT
   ============================================================================ */
.cmm-command-palette__input {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-foreground);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-glass);
  outline: none;
}

.cmm-command-palette__input::placeholder {
  color: var(--color-foreground-muted);
}

.cmm-command-palette__input:focus-visible {
  outline: none;
}

/* ============================================================================
   RESULTS
   ============================================================================ */
.cmm-command-palette__results {
  flex: 1 1 auto;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.375rem;
  scrollbar-width: thin;
}

/* ============================================================================
   GROUP HEADER
   ============================================================================ */
.cmm-command-palette__group {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-foreground-muted);
  user-select: none;
}

/* ============================================================================
   ITEM
   ============================================================================ */
.cmm-command-palette__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-foreground);
  border-radius: var(--radius-lg);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-fast, 150ms) ease,
    color var(--transition-fast, 150ms) ease;
}

.cmm-command-palette__item > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmm-command-palette__item:hover,
.cmm-command-palette__item--active {
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
}

/* ============================================================================
   KEYBINDING / SHORTCUT
   ============================================================================ */
.cmm-command-palette__keybinding {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground-muted);
  background-color: var(--color-glass);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-sm);
}

.cmm-command-palette__item:hover .cmm-command-palette__keybinding,
.cmm-command-palette__item--active .cmm-command-palette__keybinding {
  color: var(--color-accent-foreground);
}

/* ============================================================================
   EMPTY STATE
   (component renders an empty results region; keep it visually settled)
   ============================================================================ */
.cmm-command-palette__results:empty {
  padding: 2rem 1rem;
}

.cmm-command-palette__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  font-size: 0.8125rem;
  color: var(--color-foreground-muted);
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .cmm-command-palette__overlay,
  .cmm-command-palette {
    animation: none;
  }

  .cmm-command-palette__item {
    transition: none;
  }
}
