/**
 * 模态框基础样式
 * 包含通用模态框样式、关闭按钮等
 */

/* 视频模态框 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.95);
    backdrop-filter: blur(10px);
}

/* 视频/图片预览弹窗置于顶栏（Logo、用户信息）之上，打开时完全盖住背景 */
#videoModal,
#imageModal {
    z-index: 10050;
}

/* 图片预览模态框背景半透明，凸显图片效果 */
#imagePreviewModal {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px) !important;
}

/* 系统反馈模态框背景模糊效果 - 与邀请码窗口一致 */
.modal#systemFeedbackModal,
#systemFeedbackModal.modal {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 系统反馈提交成功窗口背景模糊效果 - 与邀请码窗口一致 */
.modal#systemFeedbackSuccessModal,
#systemFeedbackSuccessModal.modal {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 上传模态框背景模糊效果，降低不透明度 */
#uploadModal {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(16px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
}

/* 审核：上传文件 / 上传文件夹 — 高于顶栏 .search-section（z-index:10002），整窗与卡片叠在 Logo、导航之上 */
#uploadModal.modal,
.modal#folderUploadModal {
    z-index: 10040 !important;
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    margin: 2% auto;
    padding: 0;
    width: 95%;
    max-width: 1400px;
    height: 90vh;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
}

/* 视频模态框：高度填满模态层（100%），避免 98vh 锁定导致底部黑条 */
#videoModal .video-modal-content {
    width: 99%;
    height: 100%;
    margin: 0 auto;
    max-width: none;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}

/* 图片模态框：与视频预览一致，填满模态层 */
#imageModal .image-modal-content {
    width: 99%;
    height: 100%;
    margin: 0 auto;
    max-width: none;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}

/* 兜底：视频/图片壳容器与主区域根（若未加载 video-modal.css/image-modal.css 时保证高度链不断） */
#videoModal .review-video-main-area,
#videoModal #videoMainAreaContainer {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#videoModal .review-video-main-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#imageModal .review-image-main-area,
#imageModal #imageMainAreaContainer {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#imageModal .review-image-main-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 模态框缩放与背景动画 */
@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#videoModal .video-modal-content.modal-zoom-in {
    animation: modalZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#imageModal .image-modal-content.modal-zoom-in {
    animation: modalZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#videoModal.modal-show,
#imageModal.modal-show {
    animation: modalFadeIn 0.3s ease-out forwards;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: var(--text-primary);
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
    background: var(--bg-card);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-primary);
}

.close:hover {
    color: #ff6b6b;
    background: var(--bg-hover);
    transform: scale(1.1);
    border-color: #ff6b6b;
}

/* 隐藏视频和图片预览弹窗的关闭按钮 */
#videoModal .close,
#imageModal .close,
#imagePreviewModal .close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
}

/* 保持原有的媒体容器样式用于向后兼容 */
.media-container {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.media-preview-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feedback-history-area {
    width: 350px;
    background: var(--bg-tertiary);
    border-left: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}