/**
 * 图片工具栏样式（右侧竖条，与视频预览一致）
 * 独立命名空间：review-image-toolbar-*，仅作用于图片预览面板
 * 符合规范：使用 review- 前缀，Microsoft YaHei 字体
 */

/* ========== 单图区布局：左侧内容 + 右侧竖条（与视频 singleVideoArea 一致） ========== */
#singleImageArea.single-image-area {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* 左侧：图片区域，占据剩余空间 */
#singleImageArea .review-image-main-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 工具架挂载点：占满整列高度，便于竖条延伸到底（与视频一致） */
#singleImageArea #imageToolbarMount {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    flex-shrink: 0;
    min-height: 0;
}

/* ========== 右侧竖条容器（与历史反馈区域一致的深灰底色 + 四边边框，整列延伸到底，与视频一致） ========== */
.review-image-toolbar-strip {
    width: 56px;
    flex-shrink: 0;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-card, #1e1e1e);
    border: 1px solid var(--border-primary, #333333);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 竖条内按钮列 */
.review-image-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0;
    flex: 1;
    min-height: 0;
}

/* ========== 竖排按钮（深色主题，与视频一致） ========== */
.review-image-toolbar .review-toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 52px;
    padding: 8px 6px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #A0A0A0;
    font-size: 11px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.review-image-toolbar .review-toolbar-btn:hover,
.review-image-toolbar .review-toolbar-btn.active {
    background: #40465B;
    color: rgba(255, 255, 255, 0.95);
}

.review-image-toolbar .review-toolbar-btn svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.review-image-toolbar .review-toolbar-btn .review-toolbar-btn-text {
    font-size: 11px;
    line-height: 1.2;
}

/* 标记按钮：隐藏状态时显示“已关闭”样式（审核面板独立） */
.review-image-toolbar .review-image-toolbar-markers-btn.review-markers-hidden {
    opacity: 0.6;
    color: #707070;
}

.review-image-toolbar .review-image-toolbar-markers-btn.review-markers-hidden:hover {
    opacity: 0.9;
    color: #A0A0A0;
}