/**
 * 视频工具栏样式（右侧竖条）
 * 独立命名空间：review-video-toolbar-*，仅作用于视频播放面板，不与其他面板共用
 */

/* ========== 单视频区布局：播放区域锁定，控制栏贴底，视频在窗口内适配 ========== */
#singleVideoArea.video-main-area {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* 左侧：播放空间锁定 - 上方视频区 + 下方控制栏，控制栏固定在最下方 */
#singleVideoArea .review-video-main-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 不随视频比例变化，由父级高度决定 */
}

/* 控制栏挂载点：固定在最下方，不压缩 */
#videoControlsBarMount {
    flex-shrink: 0;
}

/* 工具架挂载点：占满整列高度，便于竖条延伸到底 */
#singleVideoArea #videoToolbarMount {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}

/* ========== 右侧竖条容器（与历史反馈区域一致的深灰底色 + 四边边框，整列延伸到底） ========== */
.review-video-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-video-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0;
    flex: 1;
    min-height: 0;
}

/* ========== 竖排按钮（深色主题，默认与悬停均柔和） ========== */
.review-video-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-video-toolbar .review-toolbar-btn:hover,
.review-video-toolbar .review-toolbar-btn.active {
    background: #40465B;
    color: rgba(255, 255, 255, 0.95);
}

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

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