/**
 * Fullscreen Video Modal Styles
 * 
 * 全屏视频模态框样式
 * - 深色背景覆盖
 * - 视频居中显示
 * - 平滑过渡动画
 * - 移动端友好的关闭按钮
 * 
 * @version 1.0.0
 */

/* 模态框容器 */
.fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease-out, visibility 300ms ease-out;
}

.fullscreen-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* 头部信息区域 */
.fullscreen-modal__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
    z-index: 10;
}

.fullscreen-modal__channel-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.fullscreen-modal__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.fullscreen-modal__channel-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

/* 关闭按钮 - 最小 44x44px 触摸目标 */
.fullscreen-modal__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 200ms ease;
    -webkit-tap-highlight-color: transparent;
}

.fullscreen-modal__close:hover,
.fullscreen-modal__close:active {
    background: rgba(255, 255, 255, 0.2);
}

.fullscreen-modal__close svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

/* 视频容器 */
.fullscreen-modal__video-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: calc(100vh - 80px); /* 减去头部高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.95);
    transition: transform 300ms ease-out;
    padding: 60px 20px 20px; /* 顶部留出头部空间 */
    box-sizing: border-box;
}

.fullscreen-modal.is-open .fullscreen-modal__video-container {
    transform: scale(1);
}

/* 视频元素样式 - 关键修复：确保 Plyr 有正确的尺寸 */
.fullscreen-modal__video-container .plyr {
    position: relative !important;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: calc(100vh - 100px);
}

.fullscreen-modal__video-container video {
    max-width: 100%;
    max-height: calc(100vh - 100px);
    width: auto;
    height: auto;
    object-fit: contain;
}

.fullscreen-modal__video-container .plyr__video-wrapper {
    height: auto !important;
    max-height: calc(100vh - 100px);
}

/* 背景点击区域 */
.fullscreen-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* 静音指示器 */
.mute-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 5;
    pointer-events: none;
}

.mute-indicator svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

/* 全屏提示 - 悬停时显示 */
.fullscreen-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
    z-index: 5;
    white-space: nowrap;
}

.media-placeholder:hover .fullscreen-hint {
    opacity: 1;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .fullscreen-modal__header {
        padding: 12px 16px;
    }
    
    .fullscreen-modal__avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .fullscreen-modal__channel-name {
        font-size: 14px;
    }
    
    .fullscreen-modal__video-container {
        width: 100%;
        height: 100%;
    }
    
    .fullscreen-modal__video-container video,
    .fullscreen-modal__video-container .plyr {
        width: 100%;
        height: auto;
        max-height: 100vh;
    }
}

/* 横屏模式 */
@media (orientation: landscape) and (max-height: 500px) {
    .fullscreen-modal__header {
        padding: 8px 16px;
    }
    
    .fullscreen-modal__avatar {
        width: 32px;
        height: 32px;
    }
    
    .fullscreen-modal__close {
        width: 40px;
        height: 40px;
    }
}

/* 禁用双击缩放 */
.fullscreen-modal {
    touch-action: manipulation;
}

/* Plyr 在全屏模态框中的样式覆盖 */
.fullscreen-modal .plyr {
    --plyr-color-main: #667eea;
}

.fullscreen-modal .plyr__controls {
    padding: 10px 15px;
}

/* 隐藏 Plyr 的全屏按钮（我们已经在全屏模式了） */
.fullscreen-modal .plyr__control[data-plyr="fullscreen"] {
    display: none;
}

/* ============================================
 * Phase 2: 手势控制样式
 * ============================================ */

/* 亮度调节遮罩层 */
.video-brightness-overlay {
    position: absolute;
    inset: 0;
    background: black;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    z-index: 5;
}

/* 手势指示器 */
.gesture-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.gesture-indicator-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gesture-indicator-icon svg {
    width: 100%;
    height: 100%;
}

.gesture-indicator-value {
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 画中画按钮样式增强 */
.plyr__control[data-plyr="pip"] {
    position: relative;
}

.plyr__control[data-plyr="pip"]::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pip-active .plyr__control[data-plyr="pip"]::after {
    opacity: 1;
}

/* 画中画模式下的样式 */
video:pictures-in-pictures {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 视频错误状态样式优化 (Phase 2 - SVG图标) */
.video-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 20;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    padding: 24px 32px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 200px;
}

.video-error-icon {
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-error-message {
    font-size: 15px;
    opacity: 0.95;
}

.video-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.video-retry-btn:hover,
.video-retry-btn:active {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.video-retry-btn svg {
    width: 18px;
    height: 18px;
}

/* 视频加载动画优化 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.8);
    z-index: 10;
}

/* 移动端手势控制增强 */
@media (max-width: 768px) {
    .gesture-indicator {
        padding: 20px 28px;
    }

    .gesture-indicator-icon {
        width: 40px;
        height: 40px;
    }

    .gesture-indicator-value {
        font-size: 16px;
    }
}