/* Своё меню по правой кнопке (context_menu.js). Светлое на старых страницах
   и в светлой теме, тёмное — в тёмной теме нового оформления. */

.ctxm {
    --cm-bg: #ffffff;
    --cm-tx: #1e2433;
    --cm-mut: #8a93a6;
    --cm-on: #eef2ff;
    --cm-on-tx: #3346c9;
    --cm-line: #e8ebf2;
    --cm-edge: rgba(20, 28, 48, .10);
    --cm-sh: 0 12px 32px -8px rgba(20, 28, 48, .28), 0 2px 6px rgba(20, 28, 48, .08);

    position: fixed;
    z-index: 2147483000;
    min-width: 232px;
    max-width: 300px;
    padding: 5px;
    border-radius: 12px;
    background: var(--cm-bg);
    color: var(--cm-tx);
    border: 1px solid var(--cm-edge);
    box-shadow: var(--cm-sh);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    user-select: none;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .12s ease-out, transform .12s ease-out;
}
.ctxm.show { opacity: 1; transform: none; }

.ctxm.is-dark {
    --cm-bg: #1b2030;
    --cm-tx: #e7e9f1;
    --cm-mut: #8790a6;
    --cm-on: rgba(120, 144, 255, .16);
    --cm-on-tx: #c7d0ff;
    --cm-line: rgba(255, 255, 255, .08);
    --cm-edge: rgba(255, 255, 255, .09);
    --cm-sh: 0 16px 40px -10px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .35);
}

.ctxm-it {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ctxm-it.is-on,
.ctxm-it:not(:disabled):hover { background: var(--cm-on); color: var(--cm-on-tx); }
.ctxm-it:disabled { opacity: .38; cursor: default; }

.ctxm-ic { display: flex; flex: none; color: var(--cm-mut); }
.ctxm-it.is-on .ctxm-ic,
.ctxm-it:not(:disabled):hover .ctxm-ic { color: inherit; }
.ctxm-tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctxm-kb { flex: none; margin-left: 16px; font-size: 11.5px; font-weight: 500; color: var(--cm-mut); font-variant-numeric: tabular-nums; }

.ctxm-sep { height: 1px; margin: 5px 6px; background: var(--cm-line); }

/* Подсказка, если браузер не дал доступ к буферу */
.ctxm-tip {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 2147483001;
    max-width: calc(calc(100vw / var(--fd-z, 1)) - 32px);
    padding: 10px 16px;
    border-radius: 10px;
    background: #1e2433;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .16s, transform .16s;
    pointer-events: none;
}
.ctxm-tip.show { opacity: 1; transform: translate(-50%, 0); }
.ctxm-tip.is-dark { background: #e7e9f1; color: #1b2030; }

@media (prefers-reduced-motion: reduce) {
    .ctxm, .ctxm-tip { transition: none; }
}