.menu-contextual {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  width: min(18.5rem, calc(100vw - 1rem));
  display: grid;
  gap: 0.42rem;
  padding: 0.5rem;
  border: 1px solid rgba(208, 217, 235, 0.96);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.97));
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(22px);
}

.menu-contextual[hidden] {
  display: none;
}

.menu-contextual-head {
  display: grid;
  gap: 0.12rem;
  padding: 0.3rem 0.45rem 0.15rem;
}

.menu-contextual-head strong {
  color: #20324d;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.15;
}

.menu-contextual-head small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.menu-contextual-list {
  display: grid;
  gap: 0.16rem;
}

.menu-contextual-separator {
  height: 1px;
  margin: 0.15rem 0.35rem;
  background: linear-gradient(90deg, rgba(203, 213, 225, 0), rgba(203, 213, 225, 0.96), rgba(203, 213, 225, 0));
}

.menu-contextual-item {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.82rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #223654;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.menu-contextual-item:hover,
.menu-contextual-item:focus-visible {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-deep);
  transform: translateY(-1px);
  outline: none;
}

.menu-contextual-item[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
}

.menu-contextual-item[disabled]:hover,
.menu-contextual-item[disabled]:focus-visible {
  background: transparent;
  color: #223654;
}

.menu-contextual-item-icon {
  width: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.96rem;
  line-height: 1;
}

.menu-contextual-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-contextual-item-danger {
  color: #9f3453;
}

.menu-contextual-item-danger:hover,
.menu-contextual-item-danger:focus-visible {
  background: rgba(159, 52, 83, 0.1);
  color: #872846;
}

.data-table tbody tr.is-context-menu-active td,
.audit-change-table tbody tr.is-context-menu-active td {
  background: rgba(var(--accent-rgb), 0.08);
}

.task-board-card.is-context-menu-active,
.messaging-conversation-item.is-context-menu-active,
.workgroup-document-card.is-context-menu-active {
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb), 0.18),
    var(--shadow-soft);
}

body[data-theme="dark"] .menu-contextual {
  border-color: rgba(93, 111, 130, 0.92);
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.14), transparent 36%),
    linear-gradient(180deg, rgba(11, 13, 16, 0.98), rgba(11, 13, 16, 0.97));
  box-shadow:
    0 26px 50px rgba(23, 28, 34, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .menu-contextual-head strong,
body[data-theme="dark"] .menu-contextual-item {
  color: #E7EEF5;
}

body[data-theme="dark"] .menu-contextual-head small {
  color: #5D6F82;
}

body[data-theme="dark"] .menu-contextual-separator {
  background: linear-gradient(90deg, rgba(93, 111, 130, 0), rgba(93, 111, 130, 0.96), rgba(93, 111, 130, 0));
}

body[data-theme="dark"] .menu-contextual-item:hover,
body[data-theme="dark"] .menu-contextual-item:focus-visible {
  background: rgba(34, 211, 238, 0.14);
  color: #ffffff;
}

body[data-theme="dark"] .menu-contextual-item[disabled]:hover,
body[data-theme="dark"] .menu-contextual-item[disabled]:focus-visible {
  background: transparent;
  color: #E7EEF5;
}

body[data-theme="dark"] .menu-contextual-item-danger {
  color: #fda4af;
}

body[data-theme="dark"] .menu-contextual-item-danger:hover,
body[data-theme="dark"] .menu-contextual-item-danger:focus-visible {
  background: rgba(244, 114, 182, 0.14);
  color: #ffe4e6;
}

@media (max-width: 640px) {
  .menu-contextual {
    width: min(16.5rem, calc(100vw - 0.75rem));
    padding: 0.42rem;
  }

  .menu-contextual-item {
    min-height: 40px;
    padding: 0.68rem 0.76rem;
  }
}