/* ============================================================
   ph-player.css — B站风格高级播放器主题（主用版本）
   支持播放器：MediaElement.js、Video.js、Plyr
   配色主题：B站蓝 (#00a1d6) + 深色背景 + 烛玻璃菜单
   ============================================================ */

/* ── 寻容器基础 ─────────────────────────────────────────────── */
.mejs__container {
    font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif !important;
    background: #000 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    position: relative !important;
}
.mejs__container * {
    box-sizing: border-box;
}
.mejs__inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* ── 居中圆形播放按鈕（B站风格 overlay） ────────────────────────── */
.mejs__overlay-play {
    cursor: pointer !important;
}
.mejs__overlay-button {
    width: 64px !important;
    height: 64px !important;
    background: rgba(0,0,0,0.55) !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.85) !important;
    margin: -32px 0 0 -32px !important;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), background 0.25s !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.mejs__overlay-button::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 22px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}
.mejs__overlay-button:hover {
    transform: scale(1.12) !important;
    background: rgba(0,161,214,0.65) !important;
}

/* ── 隐藏顶部覆盖层 ───────────────────────────────────────────── */
.ph-top-overlay {
    display: none !important;
}

/* ── 控制栏：底部渐变背景 + 游标悬浮显示 ──────────────────────── */
.mejs__controls {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 44px !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 60%, transparent 100%) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    z-index: 10 !important;
    opacity: 0;
    transition: opacity 0.3s ease !important;
    box-shadow: none !important;
    border: none !important;
}
/* Show controls on hover */
.mejs__container:hover .mejs__controls,
.mejs__container.mejs__controls-visible .mejs__controls {
    opacity: 1 !important;
}

/* ── 进度条：浮层在控制栏上方（B站风格） ──────────────────────── */
.mejs__time-rail {
    position: absolute !important;
    top: -6px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    cursor: pointer !important;
    z-index: 20 !important;
}
.mejs__time-total {
    position: relative !important;
    width: 100% !important;
    height: 3px !important;
    margin: 0 !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 1.5px !important;
    overflow: visible !important;
    transition: height 0.15s ease !important;
}
.mejs__time-rail:hover .mejs__time-total {
    height: 6px !important;
}

/* 缓冲已加载部分 */
.mejs__time-loaded {
    position: absolute !important;
    top: 0; left: 0;
    height: 100% !important;
    background: rgba(255,255,255,0.25) !important;
    border-radius: inherit !important;
}

/* 播放进度—— B站蓝色 (#00a1d6) */
.mejs__time-current {
    position: absolute !important;
    top: 0; left: 0;
    height: 100% !important;
    background: linear-gradient(90deg, #00a1d6, #00b5e5) !important;
    border-radius: inherit !important;
    z-index: 2 !important;
}

/* 晶较区域（鼠标悬浮时显示） */
.mejs__time-hovered {
    position: absolute !important;
    top: 0; left: 0;
    height: 100% !important;
    background: rgba(255,255,255,0.15) !important;
    z-index: 1 !important;
    display: none;
}
.mejs__time-rail:hover .mejs__time-hovered {
    display: block !important;
}

/* ── 拖拽圆点（Scrubber） ─────────────────────────────────────────── */
.mejs__time-handle,
.mejs__time-handle-content {
    position: absolute !important;
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #00a1d6 !important;
    border: 2px solid #fff !important;
    z-index: 5 !important;
    opacity: 0 !important;
    transform: translateY(-50%) scale(0) !important;
    transition: opacity 0.2s, transform 0.2s cubic-bezier(.175,.885,.32,1.275) !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.4) !important;
    cursor: pointer !important;
    margin: 0 !important;
}
.mejs__time-rail:hover .mejs__time-handle,
.mejs__time-rail:hover .mejs__time-handle-content {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
}

/* ── 时间提示浮层（Tooltip） ─────────────────────────────────────── */
.mejs__time-float {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0,0,0,0.85) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 4px !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    overflow: hidden !important;
    z-index: 30 !important;
}
.mejs__time-float-current {
    display: block !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    text-align: center !important;
    color: #fff !important;
    margin: 0 !important;
    background: transparent !important;
}
.mejs__time-float-corner {
    display: none !important;
}

/* ── Control Button Base ──────────────────────────────────── */
.mejs__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    width: auto !important;
    min-width: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    position: relative !important;
}
.mejs__button > button {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 4px !important;
    padding: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none !important;
    cursor: pointer !important;
    /* Make default sprite icons white */
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s, transform 0.2s !important;
    transform: scale(1) !important;
}
.mejs__button:hover > button {
    opacity: 1 !important;
    transform: scale(1.15) !important;
    /* Bilibili blue tint on hover */
    filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(175deg) !important;
}

/* ── Flex 布局顺序（B站排列） ─────────────────────────────────────── */
.mejs__controls > * {
    order: 50;
    flex-shrink: 0;
}
/* Left side */
.mejs__playpause-button     { order: 1 !important; }
.mejs__time                 { order: 2 !important; flex-shrink: 1 !important; }
/* Spacer */
.mejs__time:last-of-type    { margin-right: auto !important; }
/* Right side */
.mejs__qualities-button     { order: 10 !important; }
.mejs__speed-button         { order: 11 !important; }
.mejs__pip-button           { order: 12 !important; }
.mejs__webfullscreen-button { order: 13 !important; }
.mejs__volume-button        { order: 14 !important; }
.mejs__horizontal-volume-slider { order: 15 !important; width: 60px !important; }
.mejs__fullscreen-button    { order: 16 !important; }

/* 隐藏不需要的控制按鈕：跳过/快进/投屏/章节标记等 */
.mejs__skipback-button,
.mejs__skip-back-button,
.mejs__jumpforward-button,
.mejs__jump-forward-button,
.mejs__chromecast-button,
.mejs__contextmenu,
.mejs__markers,
.mejs__captions-button,
.ph-autoplay-toggle {
    display: none !important;
}

/* ── 时间显示区域 ───────────────────────────────────────────────── */
.mejs__time {
    color: rgba(255,255,255,0.9) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 44px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    height: 44px !important;
    width: auto !important;
}
.mejs__time span {
    color: inherit !important;
    font-size: 13px !important;
}
.mejs__currenttime-container {
    margin: 0 !important;
    padding: 0 !important;
}
.mejs__duration-container {
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0.6;
}
.mejs__currenttime-container::after {
    content: ' / ';
    opacity: 0.5;
    margin: 0 2px;
}
.mejs__time-divider {
    display: none !important;
}

/* ── 画质选择按鈕 ─────────────────────────────────────────────── */
.mejs__qualities-button > button {
    background-image: none !important;
    background: transparent !important;
    filter: none !important;
    width: auto !important;
    min-width: 36px !important;
    height: 28px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    opacity: 0.85 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
    letter-spacing: 0.3px;
}
.mejs__qualities-button:hover > button {
    color: #00a1d6 !important;
    filter: none !important;
    opacity: 1 !important;
}

/* 播放速度按鈕 */
.mejs__speed-button > button {
    background-image: none !important;
    background: transparent !important;
    filter: none !important;
    width: auto !important;
    min-width: 36px !important;
    height: 28px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #fff !important;
    opacity: 0.85 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
}
.mejs__speed-button:hover > button {
    color: #00a1d6 !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ── 下拉菜单（画质 / 速度）——烛玻璃性背景 ─────────────────── */
.mejs__qualities-selector,
.mejs__speed-selector {
    position: absolute !important;
    bottom: 44px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(20,20,22,0.96) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    padding: 6px 0 !important;
    min-width: 80px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) !important;
    z-index: 100 !important;
}
.mejs__qualities-selector-list,
.mejs__speed-selector-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mejs__qualities-selector-list-item,
.mejs__speed-selector-list-item {
    padding: 8px 20px !important;
    margin: 0 !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    white-space: nowrap !important;
}
.mejs__qualities-selector-list-item:hover,
.mejs__speed-selector-list-item:hover {
    background: rgba(0,161,214,0.12) !important;
    color: #00a1d6 !important;
}
.mejs__qualities-selected {
    color: #00a1d6 !important;
    font-weight: 600 !important;
}
.mejs__qualities-selector-input,
.mejs__speed-selector-input {
    display: none !important;
}
.mejs__qualities-selector-label,
.mejs__speed-selector-label {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    cursor: pointer !important;
    font-size: inherit !important;
}

/* ── 音量条 ───────────────────────────────────────────────────────── */
.mejs__horizontal-volume-slider {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    width: 60px !important;
    cursor: pointer !important;
    margin: 0 4px !important;
}
.mejs__horizontal-volume-total {
    width: 100% !important;
    height: 3px !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 1.5px !important;
    position: relative !important;
}
.mejs__horizontal-volume-current {
    height: 100% !important;
    background: #00a1d6 !important;
    border-radius: inherit !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}
.mejs__horizontal-volume-handle {
    display: none !important;
}

/* ── 画中画（PiP）/网页全屏自定义 SVG 按鈕 ─────────────────────── */
.mejs__pip-button > button,
.mejs__webfullscreen-button > button {
    background-image: none !important;
    background: transparent !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    filter: none !important;
}
.mejs__pip-button > button > svg,
.mejs__webfullscreen-button > button > svg {
    width: 18px !important;
    height: 18px !important;
    stroke: rgba(255,255,255,0.8) !important;
    fill: none !important;
    transition: stroke 0.2s !important;
}
.mejs__pip-button:hover > button > svg,
.mejs__webfullscreen-button:hover > button > svg {
    stroke: #00a1d6 !important;
}
.mejs__pip-button:hover > button,
.mejs__webfullscreen-button:hover > button {
    filter: none !important;
    transform: scale(1.15) !important;
}

/* ── 进度条悬浮预览容器 ───────────────────────────────────────── */
.bili-hover-preview {
    position: absolute;
    bottom: 46px;
    left: 0;
    z-index: 200;
    display: none;
    pointer-events: none;
}
.bili-hover-preview-inner {
    width: 160px;
    background: #000;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    border-radius: 6px;
    overflow: hidden;
}
.bili-hover-preview-video {
    width: 160px;
    height: 90px;
    object-fit: cover;
    display: block;
}
.bili-hover-preview-time {
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 3px 0;
    letter-spacing: 0.5px;
}

/* ── 网页全屏（剧场模式） ─────────────────────────────────────────── */
body.bili-webfullscreen {
    overflow: hidden !important;
}
body.bili-webfullscreen .mejs__container,
body.bili-webfullscreen .top-video.video-player-page {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    z-index: 999999 !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.bili-webfullscreen video,
body.bili-webfullscreen iframe {
    width: 100% !important;
    height: 100% !important;
}

/* ── Expand icon in top-right corner (keep subtle) ─────── */
.mejs__container .mejs__layer[class*="overlay"]:not(.mejs__overlay-play) {
    pointer-events: none;
}

/* ============================================================
   VIDEO.JS B站主题
   ============================================================ */

.video-js {
    font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif !important;
}
.video-js .vjs-control-bar {
    background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 60%, transparent 100%) !important;
    height: 44px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
}
.video-js .vjs-progress-control {
    position: absolute !important;
    top: -8px !important;
    left: 0 !important;
    width: 100% !important;
    height: 14px !important;
}
.video-js .vjs-progress-holder {
    height: 3px !important;
    margin: 11px 0 0 0 !important;
    transition: height 0.15s, margin 0.15s !important;
}
.video-js .vjs-progress-control:hover .vjs-progress-holder {
    height: 6px !important;
    margin-top: 8px !important;
}
.video-js .vjs-play-progress {
    background: linear-gradient(90deg, #00a1d6, #00b5e5) !important;
}
.video-js .vjs-play-progress:before {
    font-size: 14px !important;
    top: -4px !important;
    color: #fff !important;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s !important;
    transform: scale(0);
}
.video-js .vjs-progress-control:hover .vjs-play-progress:before {
    opacity: 1 !important;
    transform: scale(1);
}
.video-js .vjs-load-progress {
    background: rgba(255,255,255,0.25) !important;
}
.video-js .vjs-load-progress div {
    background: transparent !important;
}
.video-js .vjs-slider {
    background-color: rgba(255,255,255,0.2) !important;
}

/* VideoJS Flex 排列顺序 */
.video-js .vjs-play-control        { order: 1 !important; }
.video-js .vjs-current-time        { display: block !important; order: 2 !important; font-size: 13px !important; }
.video-js .vjs-time-divider         { display: block !important; order: 3 !important; min-width: 0 !important; padding: 0 2px !important; }
.video-js .vjs-duration             { display: block !important; order: 4 !important; font-size: 13px !important; opacity: 0.6; }
.video-js .vjs-remaining-time       { display: none !important; }
.video-js .vjs-custom-control-spacer { display: block !important; order: 5 !important; flex: 1 !important; }
.video-js .vjs-resolution-button    { order: 10 !important; }
.video-js .vjs-playback-rate        { order: 11 !important; }
.video-js .vjs-bili-pip              { order: 12 !important; }
.video-js .vjs-bili-webfs            { order: 13 !important; }
.video-js .vjs-volume-panel          { order: 14 !important; display: flex !important; }
.video-js .vjs-fullscreen-control    { order: 15 !important; }

/* VideoJS 悬浮页色 / 时间提示 */
.video-js .vjs-control:hover {
    color: #00a1d6 !important;
}
.video-js .vjs-time-tooltip {
    background: rgba(0,0,0,0.85) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

/* VideoJS 菜单 */
.video-js .vjs-menu-button-popup .vjs-menu {
    bottom: 44px !important;
}
.video-js .vjs-menu-button-popup .vjs-menu-content {
    background: rgba(20,20,22,0.96) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important;
}
.video-js .vjs-menu-item {
    padding: 8px 20px !important;
    font-size: 13px !important;
}
.video-js .vjs-menu-item:hover,
.video-js .vjs-menu-item:focus {
    background: rgba(0,161,214,0.12) !important;
    color: #00a1d6 !important;
}
.video-js .vjs-menu-item.vjs-selected {
    color: #00a1d6 !important;
    background: rgba(0,161,214,0.08) !important;
}

/* VideoJS 进度条预览容器 */
.vjs-bili-preview {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 90px;
    background: #000;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    border-radius: 4px;
    display: none;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
}
.vjs-bili-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vjs-bili-time {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 8px 0 3px;
    z-index: 10;
}

/* ============================================================
   PLYR B站主题
   ============================================================ */

.plyr {
    font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif !important;
}
.plyr--video .plyr__controls {
    background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 60%, transparent 100%) !important;
    padding: 20px 12px 8px !important;
}
.plyr__control:hover {
    background: transparent !important;
    color: #00a1d6 !important;
}
.plyr--full-ui input[type=range] {
    color: #00a1d6 !important;
}
.plyr__progress__buffer {
    background: rgba(255,255,255,0.25) !important;
}
.plyr__tooltip {
    background: rgba(0,0,0,0.85) !important;
    border-radius: 4px !important;
    color: #fff !important;
}
.plyr__tooltip:before {
    border-top-color: rgba(0,0,0,0.85) !important;
}
.plyr__time {
    font-size: 13px !important;
}
.plyr__menu__container {
    background: rgba(20,20,22,0.96) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important;
    color: #fff !important;
}
.plyr__menu__container .plyr__control {
    color: #fff !important;
}
.plyr__menu__container .plyr__control:hover {
    background: rgba(0,161,214,0.12) !important;
    color: #00a1d6 !important;
}
.plyr__menu__container .plyr__control[aria-checked=true]:before {
    background: #00a1d6 !important;
}
.plyr__menu__container:after {
    border-top-color: rgba(20,20,22,0.96) !important;
}