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

/* 播放器主容器背景 */
body .mejs-container,
html body .mejs-container {
    /* 兼容性回退：先设置纯色背景 */
    background-color: var(--primary-color, #667eea) !important;
    /* 兼容性回退：简单渐变 */
    background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, var(--mejs-primary-dark, #5a6fd8) 100%) !important;
    /* 现代浏览器：使用color-mix的高级渐变 */
    background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, color-mix(in srgb, var(--primary-color, #667eea) 85%, #000 15%) 100%) !important;
    border-radius: 8px !important;
    overflow: visible !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: rgba(var(--theme-rgb, 102, 126, 234), 0.85) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    overflow: visible !important;
}

/* WordPress包装器也应用背景 */
body .wp-video,
body .wp-audio-shortcode,
html body .wp-video,
html body .wp-audio-shortcode {
    /* 兼容性回退：先设置纯色背景 */
    background-color: var(--primary-color, #667eea) !important;
    /* 兼容性回退：简单渐变 */
    background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, var(--mejs-primary-dark, #5a6fd8) 100%) !important;
    /* 现代浏览器：使用color-mix的高级渐变 */
    background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, color-mix(in srgb, var(--primary-color, #667eea) 85%, #000 15%) 100%) !important;
    border-radius: 8px !important;
    overflow: visible !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: rgba(255, 255, 255, 0.9) !important;
    /* 现代浏览器：使用主题色的高对比度版本 */
    background: color-mix(in srgb, #fff 70%, var(--mejs-primary) 30%) !important;
}

/* 悬停时的已播放色 - 完全白色 */
body .mejs-time-rail:hover .mejs-time-current,
html body .mejs-time-rail:hover .mejs-time-current {
    background: #fff !important;
}


/* 音量条样式 */
body .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
html body .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background: rgba(255, 255, 255, 0.28) !important;
}

body .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
html body .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: var(--mejs-primary) !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: var(--mejs-primary) !important;
    border-color: var(--mejs-primary-600) !important;
    color: #fff !important;
}

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

/* 三角形使用主色调 */
body .mejs-time-float-corner,
html body .mejs-time-float-corner {
    border-top-color: var(--mejs-primary) !important;
}

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

@media screen and (max-width: 768px) {
    /* 进度条优化 */
    body .mejs-time-rail .mejs-time-current,
    html body .mejs-time-rail .mejs-time-current {
        background: rgba(255, 255, 255, 0.95) !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;
    }
    
    /* 隐藏音量控件 */
    body .mejs-volume-button,
    html body .mejs-volume-button,
    body .mejs-mute,
    html body .mejs-mute,
    body .mejs-unmute,
    html body .mejs-unmute,
    body .mejs-horizontal-volume-slider,
    html body .mejs-horizontal-volume-slider,
    body .mejs-volume-slider,
    html body .mejs-volume-slider,
    body .mejs-volume-container,
    html body .mejs-volume-container {
        display: none !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;
    }
    
    /* 隐藏音量控件 */
    body .mejs-volume-button,
    html body .mejs-volume-button,
    body .mejs-mute,
    html body .mejs-mute,
    body .mejs-unmute,
    html body .mejs-unmute,
    body .mejs-horizontal-volume-slider,
    html body .mejs-horizontal-volume-slider,
    body .mejs-volume-slider,
    html body .mejs-volume-slider,
    body .mejs-volume-container,
    html body .mejs-volume-container {
        display: none !important;
    }
}