/**
 * 图片模态框组件样式
 * 包含图片布局、图片容器等
 */

/* 新的图片布局容器（锁定布局：主区域与侧边栏固定占比，保证每次打开一致） */
.image-layout-container {
    display: flex;
    height: 100%;
    overflow: hidden;
    gap: 0;
    width: 100%;
}

/* 左侧图片主区域：占比约 7，高度 100% 由模态框决定，播放区不随图片比例变化（与视频一致） */
.image-main-area,
.review-image-main-area {
    flex: 7 1 0%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
}

/* 阶段六主区域组件根：填满主区域容器，保证播放区域锁定（与视频一致） */
.review-image-main-wrapper {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 单图区域：锁定布局，上方图片区填满，不随图片比例变化 */
.single-image-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 右侧工具架区域：与视频一致 440px，深灰底色 + 简单边框修饰（留言/反馈、文件属性等） */
.image-sidebar-area,
.review-image-sidebar-area {
    flex: 0 0 440px;
    width: 440px;
    min-width: 440px;
    max-width: 440px;
    background: #252525;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm, 6px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 图片容器：播放区锁定，高度由 flex 分配，不设 aspect-ratio（与视频一致） */
.image-container {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 0;
    overflow: hidden;
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    aspect-ratio: unset;
}

.image-container:active,
.image-container.dragging {
    cursor: grabbing;
}

/* 图片容器中的图片：在固定窗口内适配，不撑大容器（与视频 object-fit 一致） */
.image-container img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 图片模态框中的图片容器不需要圆角 */
.image-modal-content .image-container {
    border-radius: 0;
}

/* 原有的反馈输入区域样式（用于图片模态框） */
.feedback-input-area {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-primary);
    padding: var(--spacing-md);
    flex-shrink: 0;
}