@layer components {
  dialog.command {
    border: none; border-radius: var(--radius-xl);
    background: var(--popover); color: var(--popover-foreground);
    padding: 0; max-width: 32rem; width: calc(100% - 2rem);
    box-shadow: var(--shadow-lg); margin: auto; position: fixed; inset: 0;
    top: 15%; bottom: auto; overflow: hidden;
    opacity: 0; transform: scale(0.98);
    transition: opacity 150ms ease, transform 150ms ease, display 150ms allow-discrete;

    &[open] { opacity: 1; transform: scale(1); }
    &::backdrop { background: oklch(0 0 0 / 0); transition: all 150ms ease, display 150ms allow-discrete; }
    &[open]::backdrop { background: oklch(0 0 0 / 0.45); }
  }

  @starting-style {
    dialog.command[open] { opacity: 0; transform: scale(0.98); }
    dialog.command[open]::backdrop { background: oklch(0 0 0 / 0); }
  }

  .command-input-wrapper {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
    & svg { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }
  }

  .command-input {
    flex: 1; border: none; background: transparent;
    font-size: 0.875rem; color: var(--foreground); outline: none; font-family: inherit;
    &::placeholder { color: var(--muted-foreground); }
  }

  .command-list { max-height: 18rem; overflow-y: auto; padding: 0.25rem; }
  .command-group { padding: 0.25rem 0; }
  .command-group-heading { margin: 0; padding: 0.375rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }

  .command-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.5rem 0.5rem; border: none; border-radius: var(--radius-md);
    background: transparent; color: var(--foreground); font-size: 0.8125rem;
    font-family: inherit; text-align: left; cursor: pointer;
    &:hover, &[data-highlighted] { background-color: var(--accent); }
    & svg { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }
  }

  .command-separator { height: 1px; background-color: var(--border); margin: 0.25rem -0.25rem; }
  .command-shortcut { margin-left: auto; font-size: 0.6875rem; color: var(--muted-foreground); font-family: var(--font-mono); }
  .command-empty { padding: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }
}