/* Context Menu Component — Native Popover API + Floating UI cursor anchoring
   Same visual vocabulary as Dropdown: floating surface, polite elevation,
   calm voice for items, danger semantics for destructive actions. */

.context-menu {
  @apply w-56 rounded-xl p-1;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--elevation-floating);

  /* Override browser popover defaults — Floating UI positions via fixed strategy */
  position: fixed;
  inset: unset;
  margin: 0;

  transition: opacity var(--motion-micro) var(--ease-natural),
              transform var(--motion-micro) var(--ease-natural),
              overlay var(--motion-micro) var(--ease-natural) allow-discrete,
              display var(--motion-micro) var(--ease-natural) allow-discrete;

  opacity: 0;
  transform: scale(0.97);
}

.context-menu:popover-open {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .context-menu:popover-open {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* Item — calm voice, icon at start, label fills available space */
.context-menu-item {
  @apply w-full text-left flex items-center gap-3 rounded-lg text-sm cursor-pointer;
  padding: var(--space-breath) calc(var(--space-breath) * 1.25);
  color: var(--color-text-primary);
  font-weight: var(--tone-calm);
  transition: all var(--motion-micro) var(--ease-natural);
  background: transparent;
  border: 0;
}

.context-menu-item:hover,
.context-menu-item:focus,
.context-menu-item[data-highlighted] {
  background-color: var(--color-surface-muted);
  outline: none;
}

.context-menu-item[aria-disabled="true"],
.context-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.context-menu-item-icon {
  @apply flex-shrink-0 flex items-center justify-center;
  color: var(--color-text-secondary);
}

.context-menu-item:hover .context-menu-item-icon,
.context-menu-item:focus .context-menu-item-icon,
.context-menu-item[data-highlighted] .context-menu-item-icon {
  color: var(--color-text-primary);
}

.context-menu-item-label {
  @apply flex-1;
}

/* Danger variant — destructive actions */
.context-menu-item-danger {
  @apply w-full text-left flex items-center gap-3 rounded-lg text-sm cursor-pointer;
  padding: var(--space-breath) calc(var(--space-breath) * 1.25);
  color: var(--color-error-600);
  font-weight: var(--tone-calm);
  transition: all var(--motion-micro) var(--ease-natural);
  background: transparent;
  border: 0;
}

.context-menu-item-danger:hover,
.context-menu-item-danger:focus,
.context-menu-item-danger[data-highlighted] {
  background-color: color-mix(in oklch, var(--color-error-500), transparent 92%);
  outline: none;
}

.context-menu-item-danger .context-menu-item-icon {
  color: var(--color-error-600);
}

.context-menu-item-danger:hover .context-menu-item-icon,
.context-menu-item-danger:focus .context-menu-item-icon,
.context-menu-item-danger[data-highlighted] .context-menu-item-icon {
  color: var(--color-error-700);
}

[data-theme="dark"] .context-menu-item-danger:hover,
[data-theme="dark"] .context-menu-item-danger:focus,
[data-theme="dark"] .context-menu-item-danger[data-highlighted] {
  background-color: color-mix(in oklch, var(--color-error-500), transparent 80%);
}

/* Separator */
.context-menu-divider {
  @apply h-px my-1;
  background-color: var(--color-border);
}