/* ============================================================
 * 右键菜单样式（Right.css）
 *
 * 作用域：自定义页面右键弹出菜单（刷新 / 全屏 / 返回 / 关闭 / 查看图片等）。
 * 注意：虽然文件名 Right.css，但此文件控制的是"右键菜单"而非右侧内容区。
 *       （右侧内容区样式位于 style.css §5。）
 *
 * 设计策略：
 *   - 配色固定为深色（rgba 深灰背景），不随 data-theme 主题切换，
 *     保证菜单项在任何主题背景下都清晰可读。
 *   - z-index: 999999 确保弹出菜单在最顶层。
 *   - 状态切换：.is-active 控制 opacity/visibility 的显示/隐藏。
 *
 * 目录（Table of Contents）：
 *   §1  弹出容器（.menu / .is-active）
 *   §2  菜单列表与项（.menu-list01 / .menu-item）
 *   §3  分隔线与危险项（.menu-item-divider / .menu-item-danger）
 *   §4  SVG / 图标对齐
 * ============================================================ */


/* ============================================================
 * §1  右键菜单悬浮弹出容器
 *
 *   .menu：
 *     — position:fixed 跟随鼠标位置
 *     — opacity:0 + visibility:hidden 默认隐藏
 *     — .is-active 时显示（由 JS 在 contextmenu 事件中 toggle）
 *     — transition 同时作用于 opacity/height/visibility
 *     — z-index: 999999 高于所有页面元素
 * ============================================================ */

.menu {
    position: fixed;
    width: 88px;
    padding: 4px;
    box-shadow: 0 1px 4px rgba(33, 33, 33, 0.846), 0 8px 24px rgba(5, 5, 5, 0.859);
    border-radius: 10px;
    background: rgba(19, 19, 19, 0.802);  /* 深色半透背景，不随主题变化 */
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity .2s ease, height .3s ease, visibility .3s ease;
    z-index: 999999;
}

/* 激活态：弹出菜单可见 */
.is-active {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
 * §2  菜单列表与项
 *
 *   .menu-item：
 *     — 每项 16px 字号、22px 行高，浅色文字（#f0f1f7）
 *     — Hover 时蓝色背景（#127de7f7）高亮当前项
 *     — 使用 Flex 实现图标 + 文字横向对齐
 * ============================================================ */

.menu-list01 {
    list-style: none;
}

.menu-item {
    line-height: 22px;
    color: #f0f1f7;
    font-size: 16px;
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: background .3s ease;
}

/* 菜单项内的链接：白色文字 + 填充父容器宽度，便于点击 */
.menu-item a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    width: 100%;
}

.menu-item:hover {
    background: #127de7f7;               /* 悬停蓝底高亮 */
}

.menu-item svg {
    margin-right: 8px;
}


/* ============================================================
 * §3  分隔线与危险项
 *
 *   .menu-item-divider：浅灰分隔线，视觉上分区
 *   .menu-item-danger：危险操作（橙色文字 + 悬停深红背景）
 * ============================================================ */

/* FontAwesome 图标：与上方 SVG 图标保持对齐（固定 16px 宽） */
.menu-item i {
    margin-right: 8px;
    width: 16px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 菜单分隔线 */
.menu-item-divider {
    height: 1px;
    margin: 4px 8px;
    background: #f5f5f6;
}

/* 危险操作项：橙色文字（#f94a05f7），hover 深红背景 */
.menu-item-danger {
    color: #f94a05f7;
}

.menu-item-danger svg path {
    fill: #ee7f7f;                       /* 危险图标用浅红填充 */
}

.menu-item-danger:hover {
    background: #b32c2c95;               /* 悬停：半透明深红背景 */
}


/* ============================================================
 * §4  图标全局定义
 *
 *   普通菜单项的 SVG 图标填充白色（#f3f5f8），
 *   危险项的 SVG 图标填充浅红（#ee7f7f）。
 * ============================================================ */

.menu-item svg path {
    fill: #f3f5f8;
}