/* 网页全屏样式 */
.web-fullscreen-mode {
    padding: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
}

.web-fullscreen-mode .container {
    max-width: 100% !important;
    padding: 0 !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.web-fullscreen-mode .header-section,
.web-fullscreen-mode .control-panel,
.web-fullscreen-mode .subtitle-preview-container {
    display: none !important;
}

.web-fullscreen-mode .layout-container {
    flex: 1 !important;
    gap: 0 !important;
    min-height: auto !important;
    align-items: stretch !important;
}

.web-fullscreen-mode .video-section {
    flex: 1 !important;
    position: static !important;
    min-width: auto !important;
}

.web-fullscreen-mode .video-container {
    flex: 1 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    max-height: none !important;
    position: relative !important;
    aspect-ratio: auto !important;
}

/* 强制在网页全屏时，让视频区域确实填满视口高度，避免被 layout.css 的 aspect-ratio/max-height 限制 */
.web-fullscreen-mode .video-section,
.web-fullscreen-mode .video-container {
    height: 100vh !important;
    min-height: 100vh !important;
}

.web-fullscreen-mode #videoCanvas {
    /* 让 canvas 以高度为优先进行自适应缩放，宽度自适应以保持宽高比
       这样在高屏（竖屏）或宽屏（横屏）下都不会裁剪视频，而是保留左右黑边 */
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.web-fullscreen-mode .controls {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    /* 确保控制栏在 canvas 之上，但低于模态/全局弹窗 */
    z-index: 2000 !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
    background: rgba(45, 45, 45, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    padding: 10px 15px !important;
    /* 隐藏时不拦截指针事件，避免遮挡底层区域 */
    pointer-events: none !important;
}

.web-fullscreen-mode .controls.visible {
    opacity: 1 !important;
    /* 仅在可见时响应交互 */
    pointer-events: auto !important;
}

/* 浏览器全屏样式 */
.browser-fullscreen-mode {
    /* 进入浏览器全屏时清除 body 的默认内边距，确保页面顶部紧贴屏幕顶端 */
    background: #000 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.browser-fullscreen-mode .container {
    max-width: 100% !important;
    padding: 0 !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.browser-fullscreen-mode .header-section,
.browser-fullscreen-mode .control-panel,
.browser-fullscreen-mode .subtitle-preview-container {
    display: none !important;
}

.browser-fullscreen-mode .layout-container {
    flex: 1 !important;
    gap: 0 !important;
    min-height: auto !important;
    align-items: stretch !important;
}

.browser-fullscreen-mode .video-section {
    flex: 1 !important;
    position: static !important;
    min-width: auto !important;
}

.browser-fullscreen-mode .video-container {
    flex: 1 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    max-height: none !important;
    position: relative !important;
    aspect-ratio: auto !important;
}

/* 同样在浏览器原生全屏时确保填满高度 */
.browser-fullscreen-mode .video-section,
.browser-fullscreen-mode .video-container {
    height: 100vh !important;
    min-height: 100vh !important;
}

.browser-fullscreen-mode #videoCanvas {
    /* 同上：浏览器全屏下也使用以高度为基准的缩放，避免裁剪 */
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.browser-fullscreen-mode .controls {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    /* 确保控制栏在 canvas 之上，但低于模态/全局弹窗 */
    z-index: 2000 !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
    background: rgba(45, 45, 45, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    padding: 10px 15px !important;
    /* 隐藏时不拦截指针事件，避免遮挡底层区域 */
    pointer-events: none !important;
}

.browser-fullscreen-mode .controls.visible {
    opacity: 1 !important;
    /* 仅在可见时响应交互 */
    pointer-events: auto !important;
}

.fullscreen-btn.active {
    color: #ff6b00 !important;
}

.play-pause-btn {
    font-size: 20px !important;
}