/*
 * 智能手表下拉菜单显示修复方案
 * 解决动画样式冲突和渲染问题
 */

/* ===== 核心修复：强制显示逻辑 ===== */
.watch-options-dropdown {
    /* 基础定位和层级 */
    position: absolute !important;
    top: 0 !important; /* 改为顶部对齐 */
    left: 100% !important; /* 改为右侧显示 */
    right: auto !important;
    width: 280px !important; /* 固定宽度 */
    z-index: 1050 !important; /* 提高层级 */
    
    /* 默认隐藏状态 */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-10px) !important; /* 改为水平方向动画 */
    
    /* 背景和边框 */
    background: #333 !important; /* 深色背景 */
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    
    /* 内容样式 */
    padding: 12px 0 !important;
    margin-left: 8px !important; /* 左侧间距 */
    max-height: none !important; /* 移除高度限制 */
    overflow-y: visible !important;
    
    /* 硬件加速优化 */
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
    
    /* 平滑过渡 */
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ===== 显示状态：多重保险 ===== */
.watch-options-dropdown.show,
.category-item.expanded .watch-options-dropdown,
.category-item[data-category="watch"].active .watch-options-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important; /* 水平方向动画 */
}

/* ===== 强制覆盖内联样式 ===== */
.watch-options-dropdown[style*="display: none"] {
    display: none !important;
}

.watch-options-dropdown[style*="display: block"],
.watch-options-dropdown.show[style] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== 菜单项样式优化 ===== */
.watch-option {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    margin: 8px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: rgba(255, 255, 255, 0.1) !important; /* 半透明背景 */
    border: none !important;
    
    /* 防止动画冲突 */
    transform: translateZ(0) !important;
    will-change: transform, background-color !important;
}

.watch-option:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateZ(0) scale(1.02) !important; /* 轻微放大效果 */
}

.watch-option:active {
    background-color: rgba(255, 255, 255, 0.25) !important;
    transform: scale(0.98) translateZ(0) !important;
}

/* 选中状态 */
.watch-option.selected {
    background-color: rgba(255, 105, 0, 0.3) !important;
    box-shadow: 0 0 0 2px #ff6900 !important;
}

.watch-option-img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.watch-option-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.watch-option-info h6 {
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important; /* 白色文字 */
    line-height: 1.3 !important;
}

.watch-option-info p {
    margin: 0 !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important; /* 半透明白色 */
    line-height: 1.4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ===== 父容器修复 ===== */
.category-item[data-category="watch"] {
    position: relative !important;
    overflow: visible !important; /* 关键：允许下拉菜单溢出 */
    z-index: 1050 !important; /* 提高层级 */
}

/* ===== 动画冲突修复 ===== */
.category-item-animated.expanded {
    overflow: visible !important; /* 覆盖动画CSS的overflow: hidden */
    background-color: #ff6900 !important; /* 强调激活状态 */
}

.category-item-animated.expanded::before {
    display: none !important; /* 禁用可能干扰的伪元素 */
}

/* 添加箭头指示器 */
.category-item[data-category="watch"].expanded::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: -8px !important;
    transform: translateY(-50%) !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 8px solid #ff6900 !important;
    z-index: 1051 !important;
}

/* ===== 层级关系修复 ===== */
.category-sidebar {
    position: relative !important;
    z-index: 100 !important;
}

.category-list {
    position: relative !important;
    z-index: 101 !important;
}

.category-item {
    position: relative !important;
    z-index: 102 !important;
}

/* 确保智能手表分类在展开时有更高的层级 */
.category-item[data-category="watch"].expanded {
    z-index: 1000 !important;
}

/* 添加过渡效果 */
.category-item[data-category="watch"] {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* 添加阴影效果增强视觉层次 */
.watch-options-dropdown.show {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
    .watch-options-dropdown {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 280px !important;
        border-radius: 8px !important;
        max-height: none !important;
        transform: translateY(0) !important;
        margin-top: 44px !important; /* 菜单项高度 */
        margin-left: 0 !important;
    }
    
    .watch-options-dropdown.show {
        transform: translateY(0) !important;
    }
    
    .watch-option {
        padding: 14px 16px !important;
        margin: 6px !important;
    }
    
    .watch-option-img {
        width: 42px !important;
        height: 42px !important;
        margin-right: 12px !important;
    }
    
    .watch-option-info h6 {
        font-size: 14px !important;
    }
    
    .watch-option-info p {
        font-size: 12px !important;
        white-space: normal !important;
        max-height: 32px !important;
        overflow: hidden !important;
    }
    
    /* 移动端箭头位置调整 */
    .category-item[data-category="watch"].expanded::after {
        top: auto !important;
        right: 50% !important;
        bottom: -8px !important;
        transform: translateX(50%) rotate(90deg) !important;
    }
}

/* ===== 性能优化 ===== */
.watch-options-dropdown * {
    box-sizing: border-box !important;
}

/* 减少重绘 */
.watch-option-img {
    transform: translateZ(0) !important;
}

/* ===== 调试辅助（开发时可启用） ===== */
/*
.watch-options-dropdown {
    border: 2px solid red !important;
    background: yellow !important;
}

.watch-options-dropdown.show {
    border: 2px solid green !important;
    background: lightgreen !important;
}
*/

/* ===== 兼容性修复 ===== */
/* Safari 修复 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .watch-options-dropdown {
        -webkit-transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
    }
}

/* Firefox 修复 */
@-moz-document url-prefix() {
    .watch-options-dropdown {
        transform: translateZ(0) !important;
    }
}

/* Edge 修复 */
@supports (-ms-ime-align: auto) {
    .watch-options-dropdown {
        transform: translateZ(0) !important;
    }
}

/* ===== 无障碍支持 ===== */
@media (prefers-reduced-motion: reduce) {
    .watch-options-dropdown {
        transition: none !important;
        transform: none !important;
    }
    
    .watch-options-dropdown.show {
        transform: none !important;
    }
    
    .watch-option {
        transition: none !important;
    }
}

/* ===== 高对比度模式支持 ===== */
@media (prefers-contrast: high) {
    .watch-options-dropdown {
        border: 2px solid #000 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    }
    
    .watch-option:hover {
        background-color: #000 !important;
        color: #fff !important;
    }
}

/* ===== 深色模式适配 ===== */
@media (prefers-color-scheme: dark) {
    .watch-options-dropdown {
        background: #2a2a2a !important;
        border-color: #444 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    .watch-option:hover {
        background-color: #3a3a3a !important;
    }
    
    .watch-option:active {
        background-color: #1a4a5a !important;
    }
    
    .watch-option-info h6 {
        color: #fff !important;
    }
    
    .watch-option-info p {
        color: #ccc !important;
    }
    
    .watch-option-img {
        border-color: #555 !important;
    }
}