/**
 * 视频控制栏样式
 * 符合规范：使用review-前缀，独立命名空间
 * 使用Microsoft YaHei字体
 */

/* 控制栏容器 */
.review-video-controls-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card, #ffffff);
    border-top: 1px solid var(--border-primary, #e0e0e0);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 控制按钮基础样式 */
.review-control-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover, #f5f5f5);
    border: 1px solid var(--border-primary, #e0e0e0);
    border-radius: var(--radius-md, 6px);
    color: var(--text-primary, #333333);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    padding: 0;
}

.review-control-btn:hover {
    background: var(--bg-active, #ebebeb);
    border-color: var(--border-accent, #667eea);
    transform: translateY(-1px);
}

.review-control-btn:active {
    transform: translateY(0);
}

.review-control-btn svg {
    flex-shrink: 0;
}

/* 时间显示 */
.review-time-display {
    font-size: 13px;
    color: var(--text-secondary, #666666);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    min-width: 45px;
    text-align: center;
}

/* 帧数显示（当前帧/总帧数，倍速左侧） */
.review-frame-display {
    font-size: 12px;
    color: var(--text-secondary, #666666);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    min-width: 72px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* 进度条容器 */
.review-progress-container {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.review-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-hover, #f5f5f5);
    border-radius: var(--radius-sm, 3px);
    cursor: pointer;
    position: relative;
    overflow: visible; /* 允许进度条上方的反馈标记（top:-20px）显示，不裁剪 */
}

.review-progress {
    height: 100%;
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    border-radius: var(--radius-sm, 3px);
    width: 0%;
    transition: width 0.1s linear;
    pointer-events: none; /* 让点击事件穿透到进度条 */
}

/* 反馈标记 */
.review-feedback-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 倍速控制 */
.review-speed-control-container {
    display: flex;
    align-items: center;
}

.review-speed-selector {
    min-width: 65px;
    height: 36px;
    padding: 0 8px;
    background: var(--bg-hover, #f5f5f5);
    border: 1px solid var(--border-primary, #e0e0e0);
    border-radius: var(--radius-md, 6px);
    color: var(--text-primary, #333333);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.review-speed-selector:hover {
    background: var(--bg-active, #ebebeb);
    border-color: var(--border-accent, #667eea);
}

.review-speed-selector:focus {
    border-color: var(--border-accent, #667eea);
}

/* 音量控制容器 */
.review-volume-control-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 音量按钮 */
.review-volume-btn {
    position: relative;
}

/* 音量弹出控件 */
.review-volume-popup {
    position: absolute;
    bottom: calc(100% + 8px); /* 在按钮上方，留8px间距 */
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-primary, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    padding: 16px 12px;
    box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
    display: none; /* 默认隐藏 */
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 60px;
    z-index: 1000;
    animation: volumePopupFadeIn 0.2s ease;
}

/* 显示时的动画 */
@keyframes volumePopupFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 弹出框三角箭头 */
.review-volume-popup::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--bg-card, #ffffff);
}

.review-volume-popup::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--border-primary, #e0e0e0);
    z-index: -1;
}

.review-volume-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* 垂直滑竿 */
.review-volume-slider-popup {
    -webkit-appearance: slider-vertical; /* Chrome */
    appearance: slider-vertical;
    width: 6px;
    height: 120px; /* 垂直高度 */
    border-radius: var(--radius-sm, 3px);
    outline: none;
    background: var(--bg-hover, #f5f5f5);
    cursor: pointer;
    writing-mode: bt-lr; /* IE */
}

/* Webkit 浏览器的垂直滑块 */
.review-volume-slider-popup::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.review-volume-slider-popup::-webkit-slider-thumb:hover {
    width: 18px;
    height: 18px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* Firefox 浏览器的垂直滑块 */
.review-volume-slider-popup::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.review-volume-slider-popup::-moz-range-thumb:hover {
    width: 18px;
    height: 18px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* 音量百分比显示 */
.review-volume-value {
    font-size: 13px;
    color: var(--text-primary, #333333);
    font-weight: 500;
    text-align: center;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    min-width: 45px;
}

/* 静音按钮 */
.review-volume-mute-btn {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-hover, #f5f5f5);
    border: 1px solid var(--border-primary, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary, #333333);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.review-volume-mute-btn:hover {
    background: var(--bg-active, #ebebeb);
    border-color: var(--border-secondary, #cccccc);
}

.review-volume-mute-btn:active {
    transform: scale(0.95);
}

/* 特定按钮样式 */
.review-file-list-btn,
.review-compare-btn,
.review-drawing-btn,
.review-segment-btn {
    /* 继承基础样式 */
}

/* 与 index 中 #singleVideoArea.locked 配合：锁定状态下禁用控制栏 */
#singleVideoArea.locked .review-video-controls-bar {
    pointer-events: none;
    opacity: 0.5;
}

/* 移动端响应式已移除（项目仅支持 Windows 桌面端） */

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .review-progress-bar {
        height: 8px;
    }
    
    .review-progress {
        height: 8px;
    }
}