/**
 * MEJS Beautify - MediaElement.js 播放器美化样式
 * 修复背景颜色间断问题，确保连续渐变
 */

/* 播放器主容器背景 - 清新浅橡木风格 */
body .mejs-container,
html body .mejs-container {
    background-color: #D4C4A8 !important;
    /* 多层渐变模拟浅色木纹 */
    background: 
        /* 木纹光泽层 */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(255,255,255,0.4) 1px,
            transparent 2px,
            transparent 35px
        ),
        /* 主木纹层 - 柔和水平纹理 */
        repeating-linear-gradient(
            0deg,
            rgba(139,119,87,0.08) 0px,
            transparent 1px,
            transparent 3px,
            rgba(160,140,110,0.06) 4px,
            transparent 5px,
            transparent 30px
        ),
        /* 基础木色渐变 - 浅橡木色调 */
        linear-gradient(180deg, 
            #E8DCC8 0%,
            #DDD0B8 20%,
            #D4C4A8 40%,
            #C9B89A 60%,
            #BEAC8C 80%,
            #B5A280 100%
        ) !important;
    border-radius: 10px !important;
    overflow: visible !important;
    box-shadow: 
        inset 0 1px 3px rgba(255,255,255,0.5),
        inset 0 -1px 2px rgba(139,119,87,0.2),
        0 3px 12px rgba(139,119,87,0.25) !important;
}

/* 确保视频和音频元素不覆盖背景 */
body .mejs-container video,
body .mejs-container audio,
html body .mejs-container video,
html body .mejs-container audio {
    background: transparent !important;
}

/* 媒体元素容器 */
body .mejs-mediaelement,
html body .mejs-mediaelement {
    background: transparent !important;
}

/* 内部容器保持透明 */
body .mejs-inner,
html body .mejs-inner {
    background: transparent !important;
}

/* 控制栏背景 - 清新浅木风格 */
body .mejs-controls,
html body .mejs-controls {
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(160,140,110,0.1) 0px,
            transparent 1px,
            transparent 4px,
            rgba(180,160,130,0.08) 5px,
            transparent 6px,
            transparent 25px
        ),
        linear-gradient(180deg, 
            rgba(201, 184, 154, 0.95) 0%, 
            rgba(190, 172, 140, 0.98) 50%,
            rgba(181, 162, 128, 1) 100%
        ) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    overflow: visible !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* WordPress包装器也应用背景 - 清新浅橡木风格 */
body .wp-video,
body .wp-audio-shortcode,
html body .wp-video,
html body .wp-audio-shortcode {
    background-color: #D4C4A8 !important;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(255,255,255,0.4) 1px,
            transparent 2px,
            transparent 35px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(139,119,87,0.08) 0px,
            transparent 1px,
            transparent 3px,
            rgba(160,140,110,0.06) 4px,
            transparent 5px,
            transparent 30px
        ),
        linear-gradient(180deg, 
            #E8DCC8 0%,
            #DDD0B8 20%,
            #D4C4A8 40%,
            #C9B89A 60%,
            #BEAC8C 80%,
            #B5A280 100%
        ) !important;
    border-radius: 10px !important;
    overflow: visible !important;
    box-shadow: 
        inset 0 1px 3px rgba(255,255,255,0.5),
        inset 0 -1px 2px rgba(139,119,87,0.2),
        0 3px 12px rgba(139,119,87,0.25) !important;
}

/* 确保所有子元素不干扰主背景 */
body .mejs-container *:not(.mejs-controls):not(.mejs-controls *) {
    background: transparent !important;
}

/* ======================
   主题色变量系统
   ====================== */
:root {
    --mejs-primary: var(--primary-color, #667eea);
    --mejs-rgb: var(--theme-rgb, 102, 126, 234);
    --mejs-primary-600: color-mix(in srgb, var(--mejs-primary), #000 15%);
    /* 兼容性回退色彩 - 用于不支持color-mix的浏览器 */
    --mejs-primary-dark: #5a6fd8;
    --mejs-primary-light: rgba(102, 126, 234, 0.8);
}

/* ======================
   进度条样式 - 增强对比度和兼容性
   ====================== */

/* 仅修改颜色，不影响定位和尺寸 */
body .mejs-time-rail .mejs-time-total,
html body .mejs-time-rail .mejs-time-total {
    background: rgba(255, 255, 255, 0.25) !important;
}

body .mejs-time-rail .mejs-time-loaded,
html body .mejs-time-rail .mejs-time-loaded {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* 已播放进度条 - 清新琥珀色 */
body .mejs-time-rail .mejs-time-current,
html body .mejs-time-rail .mejs-time-current {
    background: linear-gradient(180deg, #E8A668 0%, #D4955A 50%, #E8A668 100%) !important;
    box-shadow: 0 0 4px rgba(212, 149, 90, 0.4) !important;
}

/* 悬停时的已播放色 - 亮琥珀色 */
body .mejs-time-rail:hover .mejs-time-current,
html body .mejs-time-rail:hover .mejs-time-current {
    background: linear-gradient(180deg, #F0B87A 0%, #E8A668 50%, #F0B87A 100%) !important;
    box-shadow: 0 0 6px rgba(232, 166, 104, 0.5) !important;
}


/* 音量条样式 - 清新琥珀色 */
body .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
html body .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background: rgba(181, 162, 128, 1) !important;
    border-radius: 2px !important;
}

body .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
html body .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: linear-gradient(180deg, #D4A574 0%, #C49464 100%) !important;
    border-radius: 2px !important;
}

/* 移除播放器内链接的虚线边框 */
.article-content .mejs-container a,
.article-content .mejs-controls a {
    border-bottom: none !important;
}

/* ======================
   桌面端 Tooltip 美化
   ====================== */

/* 允许 tooltip 越界显示 */
body .mejs-time-rail,
html body .mejs-time-rail {
    overflow: visible !important;
}

/* Tooltip - 清新浅木风格 */
body .mejs-time-float,
html body .mejs-time-float {
    background: linear-gradient(180deg, #C9B89A 0%, #BEAC8C 100%) !important;
    border-color: #B5A280 !important;
    color: #5A4A3A !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(139,119,87,0.25) !important;
}

body .mejs-time-float-current,
html body .mejs-time-float-current {
    color: #5A4A3A !important;
}

/* 三角形使用浅木色调 */
body .mejs-time-float-corner,
html body .mejs-time-float-corner {
    border-top-color: #C9B89A !important;
}

/* ======================
   移动端适配 (768px及以下)
   ====================== */

@media screen and (max-width: 768px) {
    /* 进度条优化 - 清新琥珀色 */
    body .mejs-time-rail .mejs-time-current,
    html body .mejs-time-rail .mejs-time-current {
        background: linear-gradient(180deg, #E8A668 0%, #D4955A 50%, #E8A668 100%) !important;
    }

    /* 隐藏时间提示框 */
    body .mejs-time-float,
    html body .mejs-time-float,
    body .mejs-time-float-current,
    html body .mejs-time-float-current,
    body .mejs-time-float-corner,
    html body .mejs-time-float-corner {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* ======================
   触摸设备适配
   ====================== */

@media (hover: none) and (pointer: coarse) {
    /* 隐藏时间提示框 */
    body .mejs-time-float,
    html body .mejs-time-float,
    body .mejs-time-float-current,
    html body .mejs-time-float-current,
    body .mejs-time-float-corner,
    html body .mejs-time-float-corner {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}