:root {
    --menu-blur: 18px;
    --menu-opacity: 0.06;
    --menu-radius: 20px;
    --menu-shadow: 22;
    --menu-speed: 0.26s;
    --menu-highlight: 44;
    --menu-noise: 0.03;
    --menu-hover-brightness: 1.02;
    --menu-active-scale: 0.98;
    --menu-enter-offset: 22px;
    --menu-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --menu-surface-rgb: 255, 255, 255;
    --menu-surface-active-rgb: 255, 255, 255;
    --menu-border-rgb: 255, 255, 255;
    --menu-border-active-rgb: 255, 255, 255;
    --menu-text-rgb: 234, 242, 255;
    --menu-text-active-rgb: 234, 242, 255;
    --menu-divider-rgb: 220, 234, 255;
    --menu-divider-active-rgb: 220, 234, 255;
    --menu-button-rgb: 255, 255, 255;
    --menu-button-hover-rgb: 223, 241, 255;
    --menu-icon-rgb: 255, 255, 255;
    --menu-shadow-rgb: 4, 7, 14;
    --menu-accent-rgb: 165, 207, 255;
    --menu-panel-alpha-boost: 0;
    --menu-button-alpha-boost: 0;
    --menu-button-hover-alpha-boost: 0;
    --menu-icon-alpha-boost: 0;
    --menu-border-alpha-boost: 0;
    --menu-contrast-shadow-boost: 0;
    --menu-text-shadow-alpha: 0;
    --menu-text-glow-alpha: 0;
    --menu-text-filter-brightness: 1;
    --menu-text-filter-contrast: 1;
}

[data-context-menu-live] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.context-menu {
    --context-menu-x: 0px;
    --context-menu-y: 0px;
    position: fixed;
    inset: 0;
    z-index: 999999;
    visibility: hidden;
    pointer-events: none;
}

.context-menu[data-state="opening"],
.context-menu[data-state="open"] {
    visibility: visible;
    pointer-events: auto;
}

.context-menu[data-measuring="true"] {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* The panel carries the whole design system so theme authors can restyle
   the component by overriding a compact token set instead of many selectors. */
.context-menu__panel {
    position: absolute;
    left: var(--context-menu-x);
    top: var(--context-menu-y);
    width: min(272px, calc(100vw - 24px));
    padding: 10px;
    overflow: hidden;
    isolation: isolate;
    contain: layout paint style;
    border-radius: calc(var(--menu-radius) + 4px);
    color: rgb(var(--menu-text-active-rgb));
    border: 1px solid rgba(var(--menu-border-active-rgb), calc(0.08 + (var(--menu-highlight) / 520) + var(--menu-border-alpha-boost)));
    background: rgba(var(--menu-surface-active-rgb), calc(0.06 + (var(--menu-opacity) * 0.22) + var(--menu-panel-alpha-boost)));
    box-shadow:
        0 calc(18px + (var(--menu-shadow) * 0.1px)) calc(32px + (var(--menu-shadow) * 0.18px)) rgba(var(--menu-shadow-rgb), calc(0.19 + var(--menu-contrast-shadow-boost))),
        0 1px 0 rgba(255, 255, 255, calc(0.09 + (var(--menu-highlight) / 1000)));
    -webkit-backdrop-filter: blur(var(--menu-blur)) saturate(168%);
    backdrop-filter: blur(var(--menu-blur)) saturate(168%);
    transform: translate3d(0, var(--menu-enter-offset), 0);
    transform-origin: center bottom;
    opacity: 0;
    pointer-events: auto;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition:
        transform var(--menu-speed) var(--menu-ease),
        opacity var(--menu-speed) var(--menu-ease),
        box-shadow var(--menu-speed) var(--menu-ease);
}

.context-menu[data-state="open"] .context-menu__panel {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.context-menu[data-luminance-mode="bright"] .context-menu__panel {
    border-color: rgba(var(--menu-border-active-rgb), calc(0.12 + (var(--menu-highlight) / 580) + var(--menu-border-alpha-boost)));
    background: rgba(var(--menu-surface-active-rgb), calc(0.14 + (var(--menu-opacity) * 0.2) + var(--menu-panel-alpha-boost)));
    box-shadow:
        0 calc(22px + (var(--menu-shadow) * 0.12px)) calc(40px + (var(--menu-shadow) * 0.2px)) rgba(var(--menu-shadow-rgb), calc(0.26 + var(--menu-contrast-shadow-boost))),
        0 1px 0 rgba(255, 255, 255, 0.06);
}

.context-menu[data-performance="low"] .context-menu__panel,
.context-menu[data-no-blur="true"] .context-menu__panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.context-menu[data-performance="low"] .context-menu__panel {
    background: rgba(40, 49, 67, 0.78);
    box-shadow:
        0 20px 36px rgba(var(--menu-shadow-rgb), 0.18),
        0 1px 0 rgba(255, 255, 255, 0.08);
}

.context-menu__list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu__item {
    list-style: none;
}

.context-menu__button {
    appearance: none;
    width: 100%;
    border: 1px solid rgba(var(--menu-border-active-rgb), calc(0.04 + (var(--menu-noise) * 1.4) + (var(--menu-border-alpha-boost) * 0.7)));
    border-radius: max(10px, calc(var(--menu-radius) - 6px));
    background: rgba(var(--menu-button-rgb), calc(0.045 + (var(--menu-opacity) * 0.48) + var(--menu-button-alpha-boost)));
    color: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
    cursor: pointer;
    font: 500 14px/1.2 "Inter", "Segoe UI", sans-serif;
    transition:
        transform var(--menu-speed) var(--menu-ease),
        filter var(--menu-speed) var(--menu-ease),
        border-color var(--menu-speed) var(--menu-ease),
        background var(--menu-speed) var(--menu-ease),
        box-shadow var(--menu-speed) var(--menu-ease);
}

.context-menu__button--no-icon {
    gap: 0;
}

.context-menu[data-luminance-mode="bright"] .context-menu__button {
    border-color: rgba(var(--menu-border-active-rgb), calc(0.08 + (var(--menu-noise) * 1.2) + (var(--menu-border-alpha-boost) * 0.8)));
    background: rgba(var(--menu-button-rgb), calc(0.1 + (var(--menu-opacity) * 0.4) + var(--menu-button-alpha-boost)));
}

.context-menu__button:hover,
.context-menu__button:focus-visible {
    border-color: rgba(var(--menu-border-active-rgb), calc(0.05 + (var(--menu-highlight) / 1220) + var(--menu-border-alpha-boost)));
    background: rgba(var(--menu-button-hover-rgb), calc(0.085 + (var(--menu-highlight) / 920) + var(--menu-button-hover-alpha-boost)));
    filter: brightness(var(--menu-hover-brightness));
    box-shadow:
        0 8px 18px rgba(var(--menu-accent-rgb), 0.09),
        0 1px 0 rgba(255, 255, 255, 0.1);
    outline: none;
}

.context-menu[data-luminance-mode="bright"] .context-menu__button:hover,
.context-menu[data-luminance-mode="bright"] .context-menu__button:focus-visible {
    background: rgba(var(--menu-button-hover-rgb), calc(0.14 + (var(--menu-highlight) / 980) + var(--menu-button-hover-alpha-boost)));
    box-shadow:
        0 10px 22px rgba(var(--menu-shadow-rgb), 0.18),
        0 1px 0 rgba(255, 255, 255, 0.08);
}

.context-menu__button:active {
    transform: scale(var(--menu-active-scale));
}

.context-menu__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(var(--menu-icon-rgb), calc(0.062 + var(--menu-icon-alpha-boost)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(var(--menu-border-active-rgb), calc(0.07 + (var(--menu-border-alpha-boost) * 0.55)));
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: rgba(var(--menu-text-active-rgb), 0.99);
    filter:
        brightness(var(--menu-text-filter-brightness))
        contrast(var(--menu-text-filter-contrast))
        drop-shadow(0 1px 1px rgba(var(--menu-shadow-rgb), var(--menu-text-shadow-alpha)));
    transition:
        color var(--menu-speed) var(--menu-ease),
        filter var(--menu-speed) var(--menu-ease),
        background var(--menu-speed) var(--menu-ease),
        border-color var(--menu-speed) var(--menu-ease);
}

.context-menu[data-luminance-mode="bright"] .context-menu__icon {
    filter:
        brightness(calc(var(--menu-text-filter-brightness) + 0.04))
        contrast(calc(var(--menu-text-filter-contrast) + 0.05))
        drop-shadow(0 1px 1px rgba(var(--menu-shadow-rgb), calc(var(--menu-text-shadow-alpha) + 0.05)));
}

.context-menu[data-luminance-mode="bright"] .context-menu__label {
    filter: brightness(calc(var(--menu-text-filter-brightness) + 0.04)) contrast(calc(var(--menu-text-filter-contrast) + 0.05));
}

.context-menu__icon[data-icon-mode="class"] {
    font-size: 14px;
}

.context-menu__icon[data-icon-mode="class"] i,
.context-menu__icon[data-icon-mode="class"] svg {
    display: block;
    font-size: 14px;
    line-height: 1;
    color: currentColor;
}

.context-menu__label {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: 0.01em;
    color: rgba(var(--menu-text-active-rgb), 0.98);
    text-shadow:
        0 1px 1px rgba(var(--menu-shadow-rgb), var(--menu-text-shadow-alpha)),
        0 0 12px rgba(var(--menu-shadow-rgb), var(--menu-text-glow-alpha));
    filter: brightness(var(--menu-text-filter-brightness)) contrast(var(--menu-text-filter-contrast));
    transition:
        color var(--menu-speed) var(--menu-ease),
        text-shadow var(--menu-speed) var(--menu-ease),
        filter var(--menu-speed) var(--menu-ease);
}

.context-menu__divider {
    height: 1px;
    margin: 7px 4px;
    background: linear-gradient(90deg, transparent, rgba(var(--menu-divider-active-rgb), calc(0.36 + (var(--menu-border-alpha-boost) * 0.5))), transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .context-menu__panel {
        background: rgba(40, 49, 67, 0.78);
    }
}

@media (hover: none) and (pointer: coarse) {
    .context-menu[data-no-blur="true"] .context-menu__panel {
        background: rgba(40, 49, 67, 0.76);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --menu-speed: 0.01ms;
    }

    .context-menu,
    .context-menu__panel,
    .context-menu__button {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}