/* ============================================================ v6 Context Menu — the dropdown behind "More options" ============================================================ ContextMenu.js has always built this markup, but its ONLY styles lived in the legacy style.css that v6 removed from index.html. With no rules at all the menu rendered `position: static` with a transparent background: a full-width, invisible 42px strip at the very bottom of . It was in the DOM and clickable, just nowhere near the pointer and impossible to see. */ /* NOT wrapped in @layer, deliberately. style-v2.css is entirely unlayered and opens with `*, *::before, *::after { margin: 0; padding: 0 }`. Unlayered CSS beats LAYERED css regardless of specificity, so every padding declared inside @layer v6-components computes to 0 — verified in the browser against this file and against the pre-existing .v6-versions__menu-header. Staying unlayered lets normal specificity apply (.toast 0,1,0 > * 0,0,0). None of the selectors below appear anywhere in style-v2.css, so nothing else competes for them. */ .context-menu { position: fixed; z-index: var(--z-popover, 1000); min-width: 200px; max-width: 280px; padding: 4px; background: var(--v6-panel-raised, var(--surface-400, #1f1f23)); border: 1px solid var(--v6-border-strong, rgba(255, 255, 255, 0.14)); border-radius: var(--radius-lg, 8px); box-shadow: var(--shadow-4, 0 24px 64px rgba(0, 0, 0, 0.7)); overflow: hidden; opacity: 0; transform: scale(0.96) translateY(-2px); transform-origin: top left; transition: opacity var(--duration-fast, 120ms) var(--ease-out-quart, ease), transform var(--duration-fast, 120ms) var(--ease-out-quart, ease); } .context-menu.active { opacity: 1; transform: scale(1) translateY(0); } .context-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: var(--radius-md, 6px); background: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 13px; line-height: 1.2; color: var(--text-primary, #fafafa); transition: background var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease; } .context-menu-item:hover, .context-menu-item:focus-visible { background: var(--v6-panel-hover, rgba(255, 255, 255, 0.07)); outline: none; } /* Keyboard nav focuses the first item on open, so a plain :focus ring would fire on every mouse-opened menu. Keep the hover treatment for :focus so arrow-key navigation is still visible. */ .context-menu-item:focus { background: var(--v6-panel-hover, rgba(255, 255, 255, 0.07)); outline: none; } .context-menu-item.danger { color: #f87171; } .context-menu-item.danger:hover, .context-menu-item.danger:focus { background: rgba(239, 68, 68, 0.14); color: #fca5a5; } .menu-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-secondary, #a1a1aa); } .context-menu-item:hover .menu-item-icon, .context-menu-item:focus .menu-item-icon { color: inherit; } .menu-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-item-shortcut { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-tertiary, var(--text-secondary, #a1a1aa)); } .context-menu-separator { height: 1px; margin: 4px 6px; background: var(--border-default, rgba(255, 255, 255, 0.1)); } @media (prefers-reduced-motion: reduce) { .context-menu { transition: none; } }