/* Slash commands in the composer: the `/` list, the option chips, the choice menu
   (pwa/app/command-menu.js, Plan 131.0). */

/* The panel itself is `.suggest-popover` (compose.css, shared with the emoji dropdown). */
.command-list,
.command-choices {
  position: fixed;
  max-height: 260px;
}

.command-list { max-width: none; }

.command-list-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.command-list-item:hover,
.command-list-item.selected { background: oklch(var(--p) / 12%); }
.command-list-item.selected { border-left: 2px solid oklch(var(--p)); }

.command-list-name { font-family: monospace; font-weight: 600; }

.command-list-desc {
  font-size: 0.8rem;
  color: oklch(var(--bc) / 65%);
}

#command-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem 0.2rem;
}

#command-chips[hidden] { display: none; }

.command-chip-head {
  font-family: monospace;
  font-weight: 600;
  color: oklch(var(--p));
  margin-right: 0.15rem;
}

.command-choices {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.4rem;
  max-width: 280px;
}

.command-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border: 1px dashed oklch(var(--bc) / 30%);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: oklch(var(--bc) / 75%);
  background: transparent;
  cursor: pointer;
}

.command-chip:hover { background: oklch(var(--p) / 10%); }

.command-chip.is-set {
  border-style: solid;
  border-color: oklch(var(--p) / 55%);
  color: oklch(var(--bc));
  background: oklch(var(--p) / 12%);
}

.command-chip-x { opacity: 0.6; padding-left: 0.1rem; }
.command-chip-x:hover { opacity: 1; }

.command-error {
  flex-basis: 100%;
  font-size: 0.78rem;
  color: oklch(var(--er));
}

/* Buttons under a command's result (file-output.js) and its running card (tool-trace.js). */

.command-actions {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.command-action {
  padding: 0.25rem 0.75rem;
  border: 1px solid oklch(var(--p) / 45%);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: oklch(var(--bc));
  background: oklch(var(--p) / 8%);
  cursor: pointer;
}

.command-action:hover { background: oklch(var(--p) / 18%); }

.command-job .tool-label { font-family: monospace; text-transform: none; }