/**
 * 视频反馈时间轴标注系统样式
 */

/* ==================== 背景主题系统 ==================== */

/* 主题1: 深空蓝 (默认) - 专业深邃 */
.theme-deep-space {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

/* 主题2: 碳纤灰 - 中性百搭 */
.theme-carbon-gray {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 50%, #2d3748 100%);
}

/* 主题3: 墨夜紫 - 现代时尚 */
.theme-ink-purple {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* 主题4: 极简白 - 清爽明亮 */
.theme-minimal-white {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f5f7fa 100%);
    color: #2d3748;
}

.theme-minimal-white .btn-close-annotation {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
    color: #2d3748;
}

.theme-minimal-white .btn-close-annotation:hover {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.4);
}

.theme-minimal-white .timeline-control-panel,
.theme-minimal-white .annotations-list-panel,
.theme-minimal-white .annotation-history-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
}

.theme-minimal-white .panel-header h4 {
    color: #2d3748;
}

.theme-minimal-white .collapse-btn {
    border-color: rgba(0, 0, 0, 0.2);
    color: #2d3748;
}

.theme-minimal-white .collapse-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.theme-minimal-white .control-btn {
    background: rgba(0, 0, 0, 0.1);
    color: #2d3748;
}

.theme-minimal-white .control-btn:hover {
    background: rgba(0, 0, 0, 0.15);
}

.theme-minimal-white .time-display {
    color: #2d3748;
}

.theme-minimal-white #playbackSpeed {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
    color: #2d3748;
}

.theme-minimal-white #playbackSpeed option {
    background: #fff;
    color: #2d3748;
}

.theme-minimal-white .timeline-track {
    background: rgba(0, 0, 0, 0.1);
}

.theme-minimal-white .annotation-item {
    background: rgba(0, 0, 0, 0.05);
}

.theme-minimal-white .annotation-item:hover {
    background: rgba(0, 0, 0, 0.08);
}

.theme-minimal-white .annotation-comment {
    color: rgba(0, 0, 0, 0.85);
}

.theme-minimal-white .annotation-time {
    color: #0891b2;
}

.theme-minimal-white .empty-annotations,
.theme-minimal-white .empty-history {
    color: rgba(0, 0, 0, 0.4);
}

.theme-minimal-white .close-history-btn {
    color: #2d3748;
}

.theme-minimal-white .close-history-btn:hover {
    color: #ff4d4f;
}

.theme-minimal-white .edit-annotation-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.theme-minimal-white .btn-history {
    background: rgba(24, 144, 255, 0.08);
    border-color: #1890ff;
    color: #1890ff;
}

.theme-minimal-white .btn-history:hover {
    background: rgba(24, 144, 255, 0.15);
}

/* ==================== 主容器 ==================== */
/* 主容器 */
.video-annotation-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
    color: #fff;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 【新增】视频比例控制条 */
.video-ratio-control {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ratio-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-right: 4px;
}

.theme-minimal-white .ratio-label {
    color: rgba(0, 0, 0, 0.7);
}

.ratio-btn {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.ratio-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.ratio-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.theme-minimal-white .ratio-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.7);
}

.theme-minimal-white .ratio-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.3);
}

.theme-minimal-white .ratio-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: #fff;
}

/* ==================== 视频比例适配系统 ==================== */

/* 默认：自动比例 */
.video-wrapper.ratio-auto video {
    max-height: 70vh;
    object-fit: contain;
}

/* 16:9 横屏宽屏 */
.video-wrapper.ratio-16-9 {
    aspect-ratio: 16 / 9;
    max-height: 70vh;
}

.video-wrapper.ratio-16-9 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 9:16 竖屏手机 (抖音/快手标准) */
.video-wrapper.ratio-9-16 {
    aspect-ratio: 9 / 16;
    max-height: 70vh;
    max-width: 400px;
    margin: 0 auto;
}

.video-wrapper.ratio-9-16 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 9:20 超长竖屏 (抖音长版) */
.video-wrapper.ratio-9-20 {
    aspect-ratio: 9 / 20;
    max-height: 70vh;
    max-width: 350px;
    margin: 0 auto;
}

.video-wrapper.ratio-9-20 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3:4 竖屏标准 */
.video-wrapper.ratio-3-4 {
    aspect-ratio: 3 / 4;
    max-height: 70vh;
    max-width: 500px;
    margin: 0 auto;
}

.video-wrapper.ratio-3-4 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 1:1 正方形 */
.video-wrapper.ratio-1-1 {
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    max-width: 600px;
    margin: 0 auto;
}

.video-wrapper.ratio-1-1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 【新增】主题切换器面板 - 位于右侧面板底部 */
.theme-switcher-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    flex-shrink: 0;
}

.theme-switcher-content {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 关闭按钮栏 */
.annotation-close-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

/* 【新增】主题切换器 */
.theme-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
}

.theme-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 4px;
    font-weight: 500;
}

.theme-minimal-white .theme-label {
    color: rgba(0, 0, 0, 0.6);
}

.theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.theme-btn:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-btn.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1.15);
}

.theme-minimal-white .theme-btn {
    border-color: rgba(0, 0, 0, 0.2);
}

.theme-minimal-white .theme-btn:hover {
    border-color: rgba(0, 0, 0, 0.4);
}

.theme-minimal-white .theme-btn.active {
    border-color: #2d3748;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 主题预览色块 */
.theme-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
}

.theme-btn[data-theme="deep-space"]::before {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.theme-btn[data-theme="carbon-gray"]::before {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}

.theme-btn[data-theme="ink-purple"]::before {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.theme-btn[data-theme="minimal-white"]::before {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}

/* 主题提示 */
.theme-btn {
    position: relative;
}

.theme-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.theme-minimal-white .theme-btn::after {
    background: rgba(255, 255, 255, 0.95);
    color: #2d3748;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    bottom: -36px;
}

.btn-close-annotation {
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s linear;
    backdrop-filter: blur(10px);
}

.btn-close-annotation:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
    transform: scale(1.05);
}

/* 【新增】主内容区 - 左右布局 */
.annotation-main-content {
    display: flex;
    gap: 20px;
    align-items: stretch; /* 【修复】让左右面板等高 */
    min-height: calc(100vh - 140px); /* 【修复】最小高度充满屏幕 */
}

/* 【新增】左侧面板 - 视频和时间轴 */
.annotation-left-panel {
    flex: 1;
    min-width: 0; /* 防止flex子元素溢出 */
}

/* 【新增】右侧面板 - 标注列表和历史 */
.annotation-right-panel {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: calc(100vh - 140px); /* 【修复】固定高度为视口高度减去顶部间距 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 视频播放器 */
.video-wrapper {
    width: 100%;
    background: #000; /* 【修复】纯黑背景，隔离视频黑边 */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); /* 【新增】阴影增强隔离感 */
}

.video-wrapper video {
    width: 100%;
    max-height: 70vh;
    display: block;
    background: #000; /* 【修复】确保视频本身也是黑色背景 */
}

/* 时间轴控制面板 */
.timeline-control-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

/* 播放控制 */
.playback-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    font-size: 20px;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s linear;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.time-display {
    font-size: 14px;
    font-family: 'Courier New', monospace;
    color: #fff;
}

#playbackSpeed {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

#playbackSpeed option {
    background: #333;
    color: #fff;
}

/* 时间轴 */
.timeline-wrapper {
    margin-bottom: 12px;
}

.timeline-track {
    position: relative;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    cursor: pointer;
    overflow: visible;
}

.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #1890ff 0%, #36cfc9 100%);
    border-radius: 20px;
    transition: width 0.1s linear;
}

.timeline-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #fff;
    border: 3px solid #1890ff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: left 0.1s linear;
}

.timeline-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

/* 时间轴标记 */
.timeline-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.timeline-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s linear, box-shadow 0.2s linear; /* 【修改】移除 left 的 transition 以支持拖拽 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    user-select: none; /* 【新增】防止拖拽时选中文字 */
}

.timeline-marker:hover {
    transform: translate(-50%, -50%) scale(1.5);
    z-index: 10;
}

/* 【新增】拖拽中的标注点样式 */
.timeline-marker.dragging {
    transform: translate(-50%, -50%) scale(1.8);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    cursor: grabbing;
    transition: none; /* 拖拽时禁用所有过渡动画，让标注点实时跟随鼠标 */
}

.timeline-marker.marker-error {
    background: #ff4d4f;
    border: 2px solid #fff;
}

.timeline-marker.marker-warning {
    background: #faad14;
    border: 2px solid #fff;
}

.timeline-marker.marker-suggestion {
    background: #52c41a;
    border: 2px solid #fff;
}

.timeline-marker.marker-praise {
    background: #1890ff;
    border: 2px solid #fff;
}

.timeline-marker.marker-question {
    background: #722ed1;
    border: 2px solid #fff;
}

/* 标注操作按钮 */
.annotation-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-annotate, .btn-save {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s linear;
}

.btn-annotate {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.btn-annotate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-save {
    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    color: #fff;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
}

/* 标注列表面板 */
.annotations-list-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1; /* 【修复】自适应高度，充满右侧面板剩余空间 */
    min-height: 0; /* 【新增】允许flex子元素收缩 */
    transition: all 0.3s linear;
}

/* 【新增】主题切换器在标注列表内部的样式 */
.annotations-list-panel .theme-switcher {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: center;
}

.annotations-list-panel.collapsed {
    max-height: 50px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0; /* 【新增】头部不压缩 */
}

.panel-header h4 {
    margin: 0;
    font-size: 15px;
    color: #fff;
}

.collapse-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s linear;
}

.collapse-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.annotations-list {
    flex: 1; /* 【修复】占据剩余空间 */
    overflow-y: auto;
    padding: 12px;
    min-height: 0; /* 【修复】允许flex子元素收缩 */
}

.annotations-list::-webkit-scrollbar {
    width: 6px;
}

.annotations-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.annotations-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* 【新增】标注历史面板 */
.annotation-history-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    max-height: 400px;
    overflow: hidden;
    transition: all 0.3s linear;
}

.close-history-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 1;
    transition: all 0.2s linear;
}

.close-history-btn:hover {
    color: #ff4d4f;
    transform: rotate(90deg);
}

.history-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 12px;
}

.history-list::-webkit-scrollbar {
    width: 6px;
}

.history-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.history-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.empty-history {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.empty-annotations {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* 标注列表项 */
.annotation-item {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s linear;
    border-left: 3px solid transparent;
}

.annotation-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
}

.annotation-item.highlighted {
    background: rgba(24, 144, 255, 0.2);
    border-left-color: #1890ff;
    box-shadow: 0 0 12px rgba(24, 144, 255, 0.3);
}

.annotation-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.annotation-time {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #36cfc9;
    font-weight: 600;
}

.annotation-type-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.edit-annotation-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s linear;
}

.edit-annotation-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.annotation-comment {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-wrap;
}

/* 标注附图 */
.annotation-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.annotation-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: zoom-in;
    transition: all 0.2s linear;
    position: relative;
    flex-shrink: 0;
}

.annotation-thumb:hover {
    transform: scale(1.1);
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.4);
    z-index: 1;
}

/* 【新增】附图悬浮操作按钮 */
.annotation-thumb-wrapper {
    position: relative;
    display: inline-block;
}

.annotation-thumb-actions {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s linear;
    pointer-events: none;
}

.annotation-thumb-wrapper:hover .annotation-thumb-actions {
    opacity: 1;
    pointer-events: auto;
}

.annotation-action-btn {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s linear;
    backdrop-filter: blur(4px);
}

.annotation-action-btn:hover {
    background: #1890ff;
    border-color: #1890ff;
    transform: scale(1.15);
}

/* 标注编辑器模态框 */
.annotation-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    animation: fadeIn 0.2s linear;
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.editor-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.editor-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.close-btn {
    background: transparent;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #333;
}

.editor-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 140px);
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.time-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    background: #f5f5f5;
    color: #666;
}

.type-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

.comment-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
}

.comment-textarea:focus {
    outline: none;
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

/* 图片上传区域 */
.image-upload-area {
    margin-bottom: 12px;
}

.btn-upload-images {
    padding: 8px 16px;
    background: #f0f0f0;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s linear;
}

.btn-upload-images:hover {
    background: #e6f7ff;
    border-color: #1890ff;
    color: #1890ff;
}

/* 图片预览网格 */
.image-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.image-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #d9d9d9;
}

.remove-image-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #ff4d4f;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s linear;
}

.remove-image-btn:hover {
    background: #ff7875;
    transform: scale(1.1);
}

/* 历史按钮 */
.btn-history {
    padding: 6px 12px;
    background: rgba(24, 144, 255, 0.1);
    border: 1px solid #1890ff;
    border-radius: 4px;
    color: #1890ff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s linear;
}

.btn-history:hover {
    background: rgba(24, 144, 255, 0.2);
    transform: scale(1.05);
}

.editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.btn-cancel, .btn-delete, .btn-save {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s linear;
}

.btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.btn-cancel:hover {
    background: #e8e8e8;
}

.btn-delete {
    background: #ff4d4f;
    color: #fff;
}

.btn-delete:hover {
    background: #ff7875;
}

.btn-save {
    background: #1890ff;
    color: #fff;
}

.btn-save:hover {
    background: #40a9ff;
}

/* 【已废弃】标注历史模态框 - 改用侧边面板 */
/* .annotation-history-modal { ... } */

/* 【新增】自定义确认对话框 */
.custom-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); /* 【新增】背景模糊效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
    animation: fadeIn 0.2s ease-out;
}

.custom-confirm-box {
    background: #fff;
    border-radius: 12px;
    padding: 28px; /* 【优化】增加内边距 */
    max-width: 420px;
    width: 90%;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4); /* 【优化】更强的阴影 */
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 【优化】弹性动画 */
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.custom-confirm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.custom-confirm-icon {
    font-size: 24px;
}

.custom-confirm-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.custom-confirm-body {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.custom-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.custom-confirm-btn {
    padding: 10px 24px; /* 【优化】更大的点击区域 */
    border: none;
    border-radius: 8px; /* 【优化】更大的圆角 */
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* 【优化】更流畅的过渡 */
    font-weight: 500;
    letter-spacing: 0.3px; /* 【新增】字间距 */
}

.custom-confirm-btn:hover {
    transform: translateY(-2px); /* 【优化】更大的悬浮效果 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-confirm-btn:active {
    transform: translateY(0) scale(0.98); /* 【优化】按下时的缩放效果 */
}

.btn-confirm-cancel {
    background: #f5f5f5;
    color: #666;
}

.btn-confirm-cancel:hover {
    background: #e8e8e8;
}

.btn-confirm-ok {
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
}

.btn-confirm-ok:hover {
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4);
}

/* 【新增】响应式布局 - 小屏幕上下排列 */
@media (max-width: 1200px) {
    .annotation-main-content {
        flex-direction: column;
    }
    
    .annotation-right-panel {
        width: 100%;
    }
}