/* CAM100 native HEVC player */

.cam100-native-active {
    position: relative !important;
    background: #000 !important;
    overflow: hidden !important;
}

/* 原 Canvas 留作 fallback，但 native 成功后隐藏 */
.cam100-native-active canvas {
    visibility: hidden !important;
}

/* 真正 video */
.cam100-native-hevc-video.cam100-native-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    background: #000 !important;
    pointer-events: auto !important;

    z-index: 5 !important;
}

/* 水印始终位于 video 上方 */
.cam100-native-active .cam-stream-watermark {
    display: block !important;
    position: absolute !important;

    right: 14px !important;
    bottom: 14px !important;

    z-index: 30 !important;

    font-size: clamp(16px, 2.4vh, 24px) !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;

    color: rgba(255,255,255,.55) !important;

    text-shadow:
        0 1px 3px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.65) !important;

    pointer-events: none !important;
}

/* ===== 沉浸播放器控制栏 ===== */

.cam100-native-active .monitor-controls {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 40 !important;

    padding:
        30px
        max(14px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left)) !important;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.55) 45%,
            rgba(0,0,0,0) 100%
        ) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translateY(8px);

    transition:
        opacity .20s ease,
        transform .20s ease,
        visibility .20s ease !important;

    pointer-events: none !important;
}

/* 点一下画面才显示 */
.cam100-native-active.cam100-controls-show .monitor-controls {
    opacity: 1 !important;
    visibility: visible !important;

    transform: translateY(0);

    pointer-events: auto !important;
}

/* 工具按钮 */
.cam100-native-active .control-btn,
.cam100-native-active .cam-media-btn,
.cam100-native-active .icon-btn {
    min-width: 40px !important;
    min-height: 40px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: rgba(18,25,36,.72) !important;
    color: #fff !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.10),
        0 4px 16px rgba(0,0,0,.30) !important;
}

/* 顶部原卡片标题在沉浸模式隐藏 */
.cam100-native-active.cam100-native-fullscreen .monitor-head {
    display: none !important;
}

/* ===== 网页 fullscreen fallback ===== */

.monitor-card.cam100-native-fullscreen {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #000 !important;

    z-index: 2147483000 !important;
}

.monitor-card.cam100-native-fullscreen .video-wrap {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #000 !important;
}

html.cam100-native-fs,
html.cam100-native-fs body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* 手机横屏 */
@media (orientation: landscape) and (max-height: 700px) {

    .monitor-card.cam100-native-fullscreen {
        width: 100vw !important;
        height: 100dvh !important;
    }

    .cam100-native-active .monitor-controls {
        padding-bottom:
            max(10px, env(safe-area-inset-bottom)) !important;
    }

    .cam100-native-active .cam-stream-watermark {
        right:
            max(14px, env(safe-area-inset-right)) !important;

        bottom:
            max(12px, env(safe-area-inset-bottom)) !important;
    }
}