/* 图片标注编辑器样式 - Figma 风格简约设计 */

/* 局部重绘按钮样式 */
.inpaint-image-btn {
    bottom: 6px;
    right: 6px; /* 右下角位置，与移除按钮错开 */
}

.image-preview-item:hover .inpaint-image-btn {
    opacity: 1;
}

/* 已添加遮罩状态的局部重绘按钮 */
.inpaint-image-btn--active {
    background-color: rgba(147, 51, 234, 0.8) !important; /* 紫色背景表示已添加遮罩 */
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.3);
}

.inpaint-image-btn--active:hover {
    background-color: rgba(147, 51, 234, 1) !important;
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.5);
}

/* 标注模态窗口 */
.image-annotation-modal .modal__content {
    max-width: 1400px;
    width: 90vw;
    max-height: 90vh;
    height: auto;
    min-height: 600px;
    padding: 0 !important; /* 使用!important确保覆盖全局样式 */
    margin: 0 auto; /* 确保水平居中 */
    overflow: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(20px);
    gap: 0; /* 确保子元素之间没有间隙 */
    /* 确保弹窗内容完全居中 */
    align-self: center;
    justify-self: center;
}

/* 确保图片标注模态窗口使用flexbox居中布局 */
.image-annotation-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* 确保使用flexbox居中 */
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 显示状态时启用flexbox */
.image-annotation-modal.modal--visible {
    display: flex !important; /* 确保显示时使用flex布局 */
    opacity: 1;
    pointer-events: auto;
}

/* 编辑器头部 */
.image-annotation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px; /* 与工具栏保持一致的内边距 */
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 10;
    margin: 0; /* 移除默认边距 */
}

.image-annotation-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.image-annotation-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #86868b;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    transition: all 0.2s ease;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-annotation-close-btn:hover {
    color: #1d1d1f;
    background-color: rgba(0, 0, 0, 0.06);
}

/* 编辑器主体 - 垂直布局 */
.image-annotation-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    margin: 0; /* 移除默认边距 */
    padding: 0; /* 移除默认内边距 */
}

/* 顶部工具栏 */
.image-annotation-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 16px 20px; /* 增加上下内边距，让工具栏更加居中 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 5;
    position: relative;
    min-height: 72px; /* 增加最小高度，确保工具栏有足够空间 */
    box-sizing: border-box;
    margin: 0; /* 移除默认边距 */
    background: #ffffff; /* 确保背景色一致 */
}

/* 工具组 */
.annotation-tools-group {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-self: start;
}

/* 颜色选择器容器 - 网格居中显示 */
.annotation-colors-container {
    display: flex;
    justify-content: center;
    justify-self: center;
    align-items: center;
}

/* 工具按钮 */
.annotation-tools-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: 44px; /* 固定高度确保对齐 */
    box-sizing: border-box;
}

.annotation-tool-btn {
    width: 36px;
    height: 36px;
    border: none;
    background-color: transparent;
    color: #1d1d1f;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0; /* 移除内边距确保SVG居中 */
}

.annotation-tool-btn svg {
    display: block;
    transition: color 0.2s ease;
    width: 18px;
    height: 18px;
}

.annotation-tool-btn:hover {
    background-color: rgba(0, 122, 255, 0.1);
}

.annotation-tool-btn.active {
    background-color: #007AFF;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

/* 分隔线 */
.annotation-divider {
    width: 1px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.1);
}

/* 画笔粗细调节器 */
.brush-size-control {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    height: 44px;
    box-sizing: border-box;
    animation: fadeIn 0.3s ease-in-out;
}

.brush-size-control.show {
    display: flex;
}

.brush-size-thin,
.brush-size-thick {
    font-size: 11px;
    font-weight: 500;
    color: #86868b;
    white-space: nowrap;
    user-select: none;
}

.brush-size-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.1);
    outline: none;
    transition: all 0.2s ease;
}

.brush-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #007AFF;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.brush-size-slider::-webkit-slider-thumb:hover {
    background-color: #0056CC;
    transform: scale(1.1);
}

.brush-size-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #007AFF;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

/* 预览圆点样式已移除 */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 颜色调色板 */
.annotation-colors-palette {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: 44px; /* 固定高度确保对齐 */
    box-sizing: border-box;
}

.annotation-color-btn {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    outline: none;
    background-clip: content-box; /* 确保背景不覆盖边框 */
    flex-shrink: 0;
    padding: 0; /* 移除可能影响圆形的内边距 */
    box-sizing: border-box; /* 确保边框计算在内 */
}

.annotation-color-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.annotation-color-btn.active {
    border-color: #1d1d1f;
    box-shadow: 0 0 0 2px rgba(29, 29, 31, 0.2),
                0 2px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.annotation-color-btn.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none; /* 确保不影响按钮点击 */
}

/* 白色按钮特殊处理 */
.annotation-color-btn[data-color="#FFFFFF"] {
    border-color: rgba(0, 0, 0, 0.2);
}

.annotation-color-btn[data-color="#FFFFFF"].active::after {
    color: #1d1d1f;
    text-shadow: none;
}

/* 操作按钮组 */
.annotation-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
    height: 44px; /* 固定高度确保对齐 */
}

.annotation-clear-btn,
.annotation-save-btn,
.annotation-undo-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background-color: rgba(255, 255, 255, 0.8);
    color: #1d1d1f;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    padding: 0; /* 确保SVG图标居中 */
}

.annotation-clear-btn svg,
.annotation-save-btn svg,
.annotation-undo-btn svg {
    display: block;
    transition: color 0.2s ease;
    width: 18px;
    height: 18px;
}

.annotation-undo-btn:hover:not(:disabled) {
    background-color: rgba(0, 122, 255, 0.1);
    border-color: rgba(0, 122, 255, 0.2);
    color: #007AFF;
}

.annotation-undo-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.5);
    color: #999;
}

.annotation-clear-btn:hover {
    background-color: rgba(255, 59, 48, 0.1);
    border-color: rgba(255, 59, 48, 0.2);
    color: #FF3B30;
}

.annotation-save-btn {
    background-color: #007AFF;
    color: #ffffff;
    border-color: #007AFF;
}

.annotation-save-btn:hover {
    background-color: #0056CC;
    border-color: #0056CC;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

/* 画布容器 */
.image-annotation-canvas-container {
    flex: 1;
    padding: 20px; /* 减少内边距，让工具栏在视觉上更居中 */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    overflow: auto;
    margin: 0; /* 确保没有默认边距 */
}

.image-annotation-canvas {
    max-width: 100%;
    max-height: 100%;
    border: none;
    border-radius: 12px;
    cursor: crosshair;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

/* 马克笔工具的自定义鼠标指针 */
.image-annotation-canvas.marker-cursor {
    cursor: none;
}

.brush-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    border: 2px solid rgba(0, 122, 255, 0.8);
    background-color: rgba(0, 122, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease;
    box-sizing: border-box;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .image-annotation-modal .modal__content {
        max-width: 95vw;
        max-height: 95vh;
        border-radius: 12px;
        height: 90vh;
    }
    
    .image-annotation-topbar {
        display: flex;
        flex-direction: column;
        padding: 8px 16px;
        gap: 12px;
    }
    
    .annotation-tools-group {
        gap: 12px;
        justify-content: flex-start;
        justify-self: auto;
    }
    
    .annotation-colors-container {
        justify-content: center;
        justify-self: auto;
    }
    
    .annotation-actions-group {
        justify-content: center;
        justify-self: auto;
    }
    
    .annotation-tools-buttons,
    .annotation-colors-palette {
        gap: 2px;
        padding: 2px;
    }
    
    .annotation-tool-btn {
        width: 32px;
        height: 32px;
    }
    
    .annotation-tool-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .annotation-color-btn {
        width: 20px;
        height: 20px;
    }
    
    .annotation-clear-btn,
    .annotation-save-btn,
    .annotation-undo-btn {
        width: 32px;
        height: 32px;
    }
    
    .annotation-clear-btn svg,
    .annotation-save-btn svg,
    .annotation-undo-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .annotation-actions-group {
        position: static;
        margin-top: 8px;
    }
    
    .image-annotation-canvas-container {
        padding: 16px;
    }
}

/* 编辑按钮样式 */
.edit-image-btn {
    background-color: #007AFF !important;
    color: white !important;
    border-color: #007AFF !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.edit-image-btn:hover {
    background-color: #0056CC !important;
    border-color: #0056CC !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important;
}

/* 已编辑指示器 - 隐藏，现在主要通过编辑按钮颜色来表示状态 */
.edited-indicator {
    display: none; /* 隐藏原来的编辑指示器 */
    position: absolute;
    top: 8px;
    right: 40px;
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    z-index: 10;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
    backdrop-filter: blur(10px);
}

.edited-indicator::before {
    content: '✏';
    font-size: 10px;
}

/* 直接文字输入样式 - 现在通过 JavaScript 动态设置 */

/* 响应式调整 */
@media (max-width: 768px) {
    /* 文字输入框的移动端样式现在通过 JavaScript 动态调整 */
}