// ==UserScript==
// @name         MoeMail 操作优化
// @namespace    https://docs.scriptcat.org/
// @version      1.0.0
// @description  优化 MoeMail 交互：限制下拉列表高度并启用平滑滚动，新增选项悬停动画与边框高亮。
// @author       3184832121
// @match        *://*.moe/*
// @match        *://*/*/moe
// @grant        none
// @tag          MoeMail
// ==/UserScript==

(function() {
    'use strict';

    // 【参数调整区】
    const CONFIG = {
        scrollSpeed: 0.25,    // 映射滚轮步长，值越小滑动越细腻
        maxHeight: '40vh',    // 限制弹出层最大高度为屏幕的 40%
        transition: 'all 0.2s ease-out', // 动画过渡曲线：快出平停
        floatUp: '-1.5px',    // 悬停时的垂直位移距离
    };

    // 1. 静态样式注入：控制 DOM 节点的视觉表现
    const injectStyles = () => {
        if (document.getElementById('moemail-opt-style')) return;
        const style = document.createElement('style');
        style.id = 'moemail-opt-style';
        style.innerHTML = `
            /* 强制抹除系统自带滚动条，保持界面一体化 */
            [data-radix-select-viewport], [role="listbox"] {
                max-height: ${CONFIG.maxHeight} !important;
                overflow-y: auto !important;
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }
            [data-radix-select-viewport]::-webkit-scrollbar { 
                display: none !important; 
            }

            /* 列表选项交互逻辑：加入位移和边框反馈 */
            [data-radix-select-viewport] [role="option"] {
                transition: ${CONFIG.transition} !important;
                position: relative;
                border: 1px solid transparent !important;
                background-clip: padding-box;
                cursor: pointer;
            }

            /* 悬停态：通过位移提升交互深度感 */
            [data-radix-select-viewport] [role="option"]:hover {
                transform: translateY(${CONFIG.floatUp}) !important;
                border-color: var(--border, rgba(0, 0, 0, 0.1)) !important;
                background-color: var(--accent, rgba(0, 0, 0, 0.02)) !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
                z-index: 2;
            }

            /* 选中态：通过背景和字体粗细进行视觉强调 */
            [data-radix-select-viewport] [role="option"][aria-selected="true"] {
                background-color: var(--accent, rgba(0, 0, 0, 0.04)) !important;
                border-color: var(--border, rgba(0, 0, 0, 0.15)) !important;
                font-weight: 500 !important;
            }

            /* 顶层容器：解除点击拦截，确保指针事件穿透 */
            [data-radix-popper-content-wrapper] {
                pointer-events: auto !important;
                z-index: 9999 !important;
            }
        `;
        document.head.appendChild(style);
    };

    // 2. 滚轮事件接管：补偿因隐藏滚动条而丢失的原生滚动体验
    const handleWheel = (e) => {
        const el = e.currentTarget;
        if (el.scrollHeight > el.clientHeight) {
            // 阻止父级容器滚动穿透
            e.preventDefault();
            e.stopPropagation();
            // 手动执行坐标累加
            el.scrollTop += e.deltaY * CONFIG.scrollSpeed;
        }
    };

    // 3. 异步监听：捕捉框架动态生成的下拉层节点
    const observer = new MutationObserver(() => {
        // 定位 Radix UI 标准的弹出层视口
        const target = document.querySelector('[data-radix-select-viewport]') || 
                       document.querySelector('[role="listbox"]');
        
        if (target && !target.dataset.isMoeFixed) {
            target.dataset.isMoeFixed = "true";
            // 修正点击响应
            target.style.pointerEvents = 'auto';
            // 挂载滚轮逻辑
            target.addEventListener('wheel', handleWheel, { passive: false });
        }
    });

    // 逻辑入口
    injectStyles();
    observer.observe(document.body, { childList: true, subtree: true });

})();