/* ============================================ Custom Context Menu ============================================ */ .ctx-menu { position: fixed; z-index: 10000; min-width: 200px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); padding: 4px 0; animation: ctxFadeIn 0.12s ease-out; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Menu item */ .ctx-menu-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.85rem; border: none; background: none; cursor: pointer; font-size: 0.875rem; color: #1f2937; text-align: left; border-radius: 0; transition: background 0.1s ease; } .ctx-menu-item:hover:not(:disabled) { background: #f3f4f6; } .ctx-menu-item:active:not(:disabled) { background: #e5e7eb; } /* Disabled state */ .ctx-menu-item-disabled, .ctx-menu-item:disabled { color: #9ca3af; cursor: not-allowed; } /* Icon */ .ctx-menu-icon { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; } .ctx-menu-label { flex: 1; } /* Divider */ .ctx-menu-divider { height: 1px; background: #e5e7eb; margin: 4px 0; } /* Animation */ @keyframes ctxFadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }