/* ─────────────────────────────────────────────────────────────────────────
   ZdaContextMenu — a reusable, enterprise-grade context menu for the whole app
   (messenger, notifications, requests, files, tables, user management, …).
   RTL-first, solid surface, design-system tokens only. Driven by context-menu.js.
   ───────────────────────────────────────────────────────────────────────── */

/* Transparent hit-layer that captures the outside click. */
.zda-ctx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: transparent;
}

.zda-ctx {
  position: fixed;
  z-index: 2001;
  box-sizing: border-box;
  min-inline-size: 13.75rem;              /* ~220px */
  max-inline-size: 16.25rem;              /* ~260px */
  padding: var(--space-1);
  background: var(--surface-1);            /* solid — no glassmorphism */
  border: 1px solid var(--border);
  border-radius: 15px;                     /* 14–16px */
  box-shadow: var(--shadow-3);
  font-family: var(--font-base);
  color: var(--text);
  /* fade + scale, emanating from the corner nearest the cursor */
  opacity: 0;
  transform: scale(.96);
  transform-origin: var(--zda-ctx-origin, top center);
  transition: opacity .16s var(--easing), transform .16s var(--easing);
  will-change: transform, opacity;
}
.zda-ctx.is-open { opacity: 1; transform: scale(1); }

.zda-ctx__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: 2.625rem;                /* ~42px, equal height */
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--line-tight);
  text-align: start;
  transition: background var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
  -webkit-user-select: none;
  user-select: none;
}
.zda-ctx__item:hover:not(:disabled),
.zda-ctx__item.is-active:not(:disabled) {
  background: var(--brand-soft);
  color: var(--brand-hover);
}
.zda-ctx__item:active:not(:disabled) { transform: translateY(.5px); }
.zda-ctx__item:focus-visible { outline: none; box-shadow: var(--focus); }
.zda-ctx__item:disabled,
.zda-ctx__item[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  color: var(--text-soft);
}

/* Danger action (delete) — uses the app danger color, tinted hover. */
.zda-ctx__item--danger { color: var(--danger); }
.zda-ctx__item--danger:hover:not(:disabled),
.zda-ctx__item--danger.is-active:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.zda-ctx__icon {
  flex: 0 0 auto;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  display: grid;
  place-items: center;
  opacity: .9;
}
.zda-ctx__icon svg {
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zda-ctx__label {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Optional trailing shortcut / hint on the far (trailing) edge. */
.zda-ctx__hint {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-soft);
  opacity: .8;
}

.zda-ctx__sep {
  block-size: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--border);
  border: 0;
}

/* Quick-reaction emoji bar at the top of the menu. */
.zda-ctx__reactions {
  display: flex; gap: var(--space-1); justify-content: space-between;
  padding: var(--space-1) var(--space-2) var(--space-2);
  margin-block-end: var(--space-1);
  border-block-end: 1px solid var(--border);
}
.zda-ctx__reaction {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: .2rem .3rem; border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--easing), background var(--duration-fast) var(--easing);
}
.zda-ctx__reaction:hover { transform: scale(1.3); background: var(--surface-3); }
.zda-ctx__reaction.is-active { background: var(--brand-soft); }

@media (prefers-reduced-motion: reduce) {
  .zda-ctx { transition: none; }
  .zda-ctx__item { transition: none; }
}