/* ============================================================
   右键菜单 - 月白×乌木配色 优化版 v2
   配色:#f5f2ed (月白) / #13100c (乌木)
   变更:
   - 开合改为 .show 类驱动(配合新 JS),macOS 原生语义:
     打开瞬现、关闭 0.15s 淡出;并移除脆弱的
     [style*="display: block"] 属性选择器方案
   - 新增底部快捷键提示样式(.rm-hint,替代全屏 toast)
   - 菜单限高 + 可滚动,小屏不溢出
   ============================================================ */

/* ---------- CSS 变量定义 ---------- */
:root {
    /* 白天模式 */
    --rm-bg: rgba(245, 242, 237, 0.50);          /* 真玻璃档:透是主角,信号量优先 */
    --rm-glass: blur(11px) saturate(150%);       /* 糊掉细节、保住形体;刻意不加 brightness */
    --rm-haze: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 100%); /* 轻雾:玻璃上缘的奶白薄纱,0.22 是雾量旋钮 */
    --rm-border: rgba(0, 0, 0, 0.05);
    --rm-rim: linear-gradient(180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.14) 32%,
        rgba(255, 255, 255, 0.05) 68%,
        rgba(0, 0, 0, 0.07) 100%);               /* 环形受光:顶亮、侧衰、底暗 */
    --rm-shadow-1: rgba(0, 0, 0, 0.14);
    --rm-shadow-2: rgba(0, 0, 0, 0.06);
    --rm-text: #2c2c2c;
    --rm-text-secondary: #666666;
    --rm-hover-bg: rgba(0, 0, 0, 0.05);
    --rm-active-bg: rgba(0, 0, 0, 0.08);
    --rm-divider: rgba(0, 0, 0, 0.08);
    --rm-icon-color: #555555;

    /* 提示框 */
    --tooltip-bg: rgba(19, 16, 12, 0.88);
    --tooltip-text: #f5f2ed;
    --tooltip-shadow: rgba(0, 0, 0, 0.25);
}

[data-user-color-scheme="dark"] {
    /* 黑夜模式 */
    --rm-bg: rgba(19, 16, 12, 0.55);
    --rm-glass: blur(11px) saturate(140%);
    --rm-haze: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 55%, rgba(255, 255, 255, 0) 100%);
    --rm-border: rgba(255, 255, 255, 0.06);
    --rm-rim: linear-gradient(180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.05) 22%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0) 100%);            /* 深色:光只在上半圈,半程熄灭,底边交还外圈发丝 */
    --rm-shadow-1: rgba(0, 0, 0, 0.5);
    --rm-shadow-2: rgba(0, 0, 0, 0.25);
    --rm-text: #e8e4df;
    --rm-text-secondary: #a0a0a0;
    --rm-hover-bg: rgba(255, 255, 255, 0.08);
    --rm-active-bg: rgba(255, 255, 255, 0.12);
    --rm-divider: rgba(255, 255, 255, 0.1);
    --rm-icon-color: #b0b0b0;

    /* 提示框 */
    --tooltip-bg: rgba(245, 242, 237, 0.92);
    --tooltip-text: #13100c;
    --tooltip-shadow: rgba(0, 0, 0, 0.3);
}

/* ---------- 菜单容器:macOS 原生开合语义(瞬现 / 轻淡收场) ---------- */
div#rightmenu-wrapper {
    position: fixed;
    z-index: 2147483647;
    user-select: none;
    -webkit-user-select: none;
    visibility: hidden;
    pointer-events: none;
    /* mac 语义:出现即完整形态,无缩放生长。
       (怀念旧的"生长"入场时告诉我,可切回带弹性的版本)
       淡入淡出不放在 wrapper:祖先 opacity<1 会在过渡期间制造
       backdrop root,切断玻璃采样;opacity 由面板(ul)自持 */
    transition: visibility 0.15s; /* 基态过渡 = 关闭:visibility 等淡出播完再隐藏 */
    /* 注意:此处绝不能加 will-change / translateZ(0) 之类"硬件加速"——
       它们会让 wrapper 成为 backdrop root,玻璃将永远失效 */
}

div#rightmenu-wrapper.show {
    visibility: visible;
    pointer-events: auto;
    transition: none; /* 瞬现:打开无过渡 */
}

/* 玻璃:打开瞬现,关闭 0.15s 轻轻隐去(mac 的收场) */
div#rightmenu-wrapper ul.list-v.rightmenu {
    opacity: 0;
    transition: opacity 0.15s ease; /* 基态过渡 = 关闭淡出 */
}
div#rightmenu-wrapper.show ul.list-v.rightmenu {
    opacity: 1;
    transition: none; /* 瞬现 */
}

/* ---------- 谷歌式"轻柔化"(菜单开启时,页面内容微模糊) ----------
   实现路径:模糊加在页面元素上(普通 filter,可靠),
   而非面板上(backdrop-filter,已在本站弃用)。
   轻重旋钮:blur(4px) */
.rm-soften-target {
    transition: filter 0.25s ease;
}
.rm-soften-target.rm-soften {
    /* MaterialView 三滤镜的轻度档移植
       (仓库示例:blurRadius 30 / saturation 1.8 / brightness +0.02)
       模糊沿用调定的 4px;饱和收敛至 1.4;亮度 1.02 照抄 */
    filter: blur(4px) saturate(140%) brightness(1.02);
}

/* 深色模式:亮度略压而非提,雾更沉 */
[data-user-color-scheme="dark"] .rm-soften-target.rm-soften {
    filter: blur(4px) saturate(130%) brightness(0.97);
}

/* ---------- 菜单主体 ---------- */
ul.list-v.rightmenu {
    display: block;
    position: relative;
    background-color: var(--rm-bg);
    background-image: var(--rm-haze); /* 着色雾层:材质配方的 tint 层 */
    backdrop-filter: var(--rm-glass);
    -webkit-backdrop-filter: var(--rm-glass);
    /* 真·局部玻璃:雾只在面板正下方那一块;悬案已结,玻璃是好的。
       若在某台设备上仍异常:删掉上面两行 backdrop-filter,
       并把 --rm-bg 的 alpha 升回 0.70,即回到纯透方案 */
    min-width: 180px;
    max-width: 220px;
    overflow: hidden;
    border-radius: 14px;
    border: 0.5px solid var(--rm-border); /* 视网膜屏上的发丝描边 */
    /* 纵深软阴影(受光环已移交 ::before 的渐变描边) */
    box-shadow:
        0 24px 48px var(--rm-shadow-1),
        0 10px 20px var(--rm-shadow-2),
        0 2px 6px var(--rm-shadow-2);
    padding: 6px;
    margin: 0;
    list-style: none;
    -webkit-font-smoothing: antialiased; /* 玻璃上的文字更细腻 */
}

/* 环形受光:1px 渐变描边,严格沿圆角行走——顶缘受光、两侧渐衰、底缘一线暗。
   与外圈暗发丝 border 构成 macOS 材质的"双描边"(一明一暗成对) */
ul.list-v.rightmenu::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px; /* 环的粗细 */
    background: var(--rm-rim);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* ---------- 导航按钮行 ---------- */
ul.list-v.rightmenu li.navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 4px 8px;
    margin: 0;
}

/* 导航按钮 */
ul.list-v.rightmenu li.navigation a.nav {
    position: relative;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* 同心圆角:外 14 − 边距 6 = 8 */
    color: var(--rm-icon-color);
    background: transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

ul.list-v.rightmenu li.navigation a.nav:hover {
    color: var(--rm-text);
    transform: translateY(-1px); /* 高亮背景由滑移 pill 接管 */
}

ul.list-v.rightmenu li.navigation a.nav:active {
    background: var(--rm-active-bg);
    transform: translateY(0) scale(0.95);
}

ul.list-v.rightmenu li.navigation a.nav i {
    margin: 0;
    width: auto;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* 刷新按钮旋转动画 */
ul.list-v.rightmenu li.navigation a.nav[aria-label="reload"]:hover i {
    transform: rotate(180deg);
}

/* ---------- 分割线 ---------- */
ul.list-v.rightmenu hr {
    margin: 4px 10px;
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--rm-divider) 20%,
        var(--rm-divider) 80%,
        transparent 100%
    );
}

/* ---------- 菜单项通用 ---------- */
ul.list-v.rightmenu > li {
    white-space: nowrap;
    word-break: keep-all;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.list-v.rightmenu li.menuLoad-Content {
    margin: 2px 0;
}

/* ---------- 滑移高亮:整张菜单只有一枚高亮,在条目间滑行 ---------- */
ul.list-v.rightmenu .rm-pill {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    background: var(--rm-hover-bg);
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    list-style: none;
    transition:
        transform 0.22s cubic-bezier(0.3, 0.9, 0.35, 1),
        width 0.22s cubic-bezier(0.3, 0.9, 0.35, 1),
        height 0.22s cubic-bezier(0.3, 0.9, 0.35, 1),
        opacity 0.15s ease;
}
ul.list-v.rightmenu .rm-pill.on {
    opacity: 1;
}

/* ---------- 菜单项链接 ---------- */
ul.list-v.rightmenu a.vlts-menu {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
    padding: 0 14px;
    margin: 0 4px;
    border-radius: 8px; /* 同心圆角:外 14 − 边距 6 = 8 */
    color: var(--rm-text);
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* hover 背景动画 */
ul.list-v.rightmenu a.vlts-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rm-hover-bg);
    border-radius: 8px; /* 同心圆角:外 14 − 边距 6 = 8 */
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 悬停与键盘落点的高亮背景已由滑移 pill 接管 */

ul.list-v.rightmenu a.vlts-menu:active {
    transform: scale(0.985); /* 按下的触觉回缩 */
}

ul.list-v.rightmenu a.vlts-menu:active::before {
    opacity: 1;
    transform: scale(1);
    background: var(--rm-active-bg); /* 按压时的深色回馈,保留 */
}

/* 键盘巡航:落点高亮由 pill 跟随(JS focusin),仅需压掉默认 outline */
ul.list-v.rightmenu a.vlts-menu:focus-visible {
    outline: none;
}
ul.list-v.rightmenu li.navigation a.nav:focus-visible {
    outline: none;
    color: var(--rm-text);
}

/* 确保文字在伪元素上方 */
ul.list-v.rightmenu a.vlts-menu span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

/* 图标样式 */
ul.list-v.rightmenu a.vlts-menu i {
    width: 22px;
    margin-right: 10px;
    font-size: 15px;
    text-align: center;
    color: var(--rm-icon-color);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

ul.list-v.rightmenu a.vlts-menu:hover i {
    color: var(--rm-text);
    transform: scale(1.1);
}

/* 特定图标动画 */
ul.list-v.rightmenu a.vlts-menu:hover i.fa-copy {
    animation: rmCopyShake 0.4s ease;
}

ul.list-v.rightmenu a.vlts-menu:hover i.fa-image {
    animation: rmImagePop 0.3s ease;
}

@keyframes rmCopyShake {
    0%, 100% { transform: scale(1.1) rotate(0); }
    25% { transform: scale(1.1) rotate(-8deg); }
    75% { transform: scale(1.1) rotate(8deg); }
}

@keyframes rmImagePop {
    0% { transform: scale(1.1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1.1); }
}

/* 切换类图标的开关效果 */
ul.list-v.rightmenu a.vlts-menu:hover i.fa-toggle-on,
ul.list-v.rightmenu a.vlts-menu:hover i.fa-toggle-off {
    animation: rmToggleSlide 0.3s ease;
}

@keyframes rmToggleSlide {
    0%, 100% { transform: scale(1.1) translateX(0); }
    50% { transform: scale(1.1) translateX(3px); }
}

/* ---------- 底部快捷键提示(常驻,替代全屏 toast) ----------
   与菜单分割线同款渐隐 hairline,一行素文字,不抢戏
   (选择器不依赖 ul 的具体 class,任何结构均生效) */
ul.list-v.rightmenu li.rm-hint,
li.rm-hint {
    position: relative;
    display: block;
    text-align: center;
    margin: 6px 0 0;
    padding: 9px 12px 6px;
    font-size: 10px;
    letter-spacing: 1px;
    text-indent: 1px; /* 抵消末字字距,视觉居中 */
    color: var(--rm-text-secondary);
    opacity: 0.85;
    cursor: default;
    list-style: none;
    white-space: nowrap;
    transition: opacity 0.25s ease;
}

/* 想细看时更清晰:悬停提至全浓 */
ul.list-v.rightmenu li.rm-hint:hover,
li.rm-hint:hover {
    opacity: 1;
}

/* 落款式短 hairline:居中 56px,呼应分割线的渐隐气质 */
ul.list-v.rightmenu li.rm-hint::before,
li.rm-hint::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 56px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--rm-divider) 30%,
        var(--rm-divider) 70%,
        transparent 100%
    );
}

/* ---------- 隐藏元素的过渡 ---------- */
ul.list-v.rightmenu li[hidden] {
    display: none !important;
}

ul.list-v.rightmenu hr[hidden] {
    display: none !important;
}

/* ============================================================
   提示框样式(仅用于操作反馈,如"已复制")
   ============================================================ */

.tooltip-rightmenu {
    position: fixed;
    top: 12%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--tooltip-bg);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    color: var(--tooltip-text);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    opacity: 0;
    visibility: hidden;
    z-index: 2147483648;
    box-shadow:
        0 8px 32px var(--tooltip-shadow),
        0 2px 8px var(--tooltip-shadow);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.tooltip-rightmenu strong {
    font-weight: 600;
    padding: 2px 6px;
    margin: 0 2px;
    background: rgba(128, 128, 128, 0.15);
    border-radius: 4px;
}

.show-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   响应式和兼容性
   ============================================================ */

/* 降级保护:浏览器不支持玻璃时,底色增稠保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --rm-bg: rgba(245, 242, 237, 0.88); }
    [data-user-color-scheme="dark"] { --rm-bg: rgba(19, 16, 12, 0.90); }
}

/* 尊重系统"降低透明度"偏好(与 macOS 材质的无障碍行为一致) */
@media (prefers-reduced-transparency: reduce) {
    :root { --rm-bg: rgba(245, 242, 237, 0.96); --rm-glass: none; }
    [data-user-color-scheme="dark"] { --rm-bg: rgba(19, 16, 12, 0.96); }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    ul.list-v.rightmenu .rm-pill {
        transition: none; /* 高亮瞬移,不滑行 */
    }

    div#rightmenu-wrapper,
    div#rightmenu-wrapper.show {
        transition: none;
        transform: none;
    }

    div#rightmenu-wrapper ul.list-v.rightmenu,
    div#rightmenu-wrapper.show ul.list-v.rightmenu {
        transition: none;
    }

    .rm-soften-target {
        transition: none;
    }

    ul.list-v.rightmenu a.vlts-menu,
    ul.list-v.rightmenu a.vlts-menu::before,
    ul.list-v.rightmenu a.vlts-menu i,
    ul.list-v.rightmenu li.navigation a.nav,
    .tooltip-rightmenu {
        transition: none;
    }

    ul.list-v.rightmenu a.vlts-menu:hover i {
        animation: none;
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    ul.list-v.rightmenu {
        min-width: 160px;
    }

    ul.list-v.rightmenu a.vlts-menu {
        height: 42px;
        font-size: 15px;
    }

    ul.list-v.rightmenu li.navigation a.nav {
        width: 38px;
        height: 38px;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    ul.list-v.rightmenu {
        border-width: 2px;
    }

    ul.list-v.rightmenu .rm-pill {
        border: 1px solid var(--rm-text);
    }
}