/* ============================================================
   css/chat/chat-video-player.css — 聊天视频全屏播放器（控件全部自绘）
   位置：挂在 #app 内，但用 fixed + left:50% + max-width:480px 铺满整屏
        （这样连聊天页顶栏也盖住，才是「点播放键＝放大看」；不用 body 级 inset:0，
         那是本项目 iOS 全屏层的禁忌写法，见 KSTAR-案例库 附录 B）
   防闪：隐藏态插入 → 关闭先淡出再清内容
   ⚠ 横屏/平板（终审 F-03 的答复）：铺满的对象是「应用这一列」而不是整个设备视口 ——
     本项目 #app 本身就是 max-width:480px 居中的竖屏列，横屏时两侧露出的是页面底色，
     不是聊天界面；所以这里 max-width:480px 是「正好盖住应用」，不需要也不许改成 100vw
     （改了会破坏竖屏限宽 + iOS 全屏层铁律）。安全区用 --safe-top/--safe-bottom。
   ============================================================ */

.video-player-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 480px;
    transform: translateX(-50%);
    z-index: 2370;                      /* 高于视频发送面板 2360；body 级 viewer 仍在最上 */
    background: #08070a;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.32,0.72,0,1), visibility 0.22s;
}
.video-player-overlay.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* ---- 画面 ---- */
.vpv-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #08070a;
}
.vpv-video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #08070a;
}
.vpv-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.88);
    width: 62px;
    height: 62px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.vpv-center.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.vpv-center:active { transform: translate(-50%, -50%) scale(0.94); }
.vpv-center svg { width: 24px; height: 24px; margin-left: 3px; }

/* ---- 顶栏 ---- */
.vpv-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(10px + var(--safe-top)) 12px 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.vpv-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.vpv-btn:active { transform: scale(0.92); background: rgba(255,255,255,0.24); }
.vpv-btn svg { width: 18px; height: 18px; }
.vpv-title {
    flex: 1;
    min-width: 0;
    color: rgba(255,255,255,0.86);
    font-size: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 底部控制条 ---- */
.vpv-bar {
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(14px + var(--safe-bottom));
    background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.12));
}
.vpv-play {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.vpv-play:active { transform: scale(0.92); }
.vpv-play svg { width: 15px; height: 15px; }
.vpv-time {
    flex: 0 0 auto;
    font-size: 11px;
    color: rgba(255,255,255,0.82);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}
.vpv-track {
    position: relative;
    flex: 1;
    height: 22px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}
.vpv-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.24);
}
.vpv-fill {
    position: absolute;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ffffff, #f2d2d8);
    width: 0;
}
.vpv-knob {
    position: absolute;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(-50%);
    box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.vpv-speed {
    flex: 0 0 auto;
    min-width: 46px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 13px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.vpv-speed:active { background: rgba(255,255,255,0.2); }

/* ---- 提示条 ---- */
.vpv-msg {
    position: absolute;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%);
    max-width: 80%;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(0,0,0,0.62);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.vpv-msg.show { opacity: 1; }