/* ========== 抠图弹窗 — ui-bootstrap windowClass: matting-modal ========== */

/* 基础 flex 工具类 */
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

/* ========== ui-bootstrap 覆盖 ========== */
.matting-modal {
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
}
.matting-modal .modal-dialog {
    width: 90%;
    height: 90%;
}
.matting-modal .modal-content {
    height: 100%; border: none; border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    background: #F5F7FA;
    font-family: PingFangSC-Regular, 'PingFang SC', 'Helvetica Neue', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    user-select: none; -webkit-user-select: none;
}

/* ========== 主容器 ========== */
.matting-container {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    overflow: hidden; position: relative;
    background-color: #FFF;
}

/* ========== 标题栏 ========== */
.matting-topbar {
    padding: 10px 16px; position: relative;
    height: 48px; flex-shrink: 0;
}
.matting-topbar-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    gap: 20px;
}
.matting-title {
    font-size: 18px; font-weight: 500; color: #333;
    font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;
    line-height: 25px;
}
.matting-undo-redo-top { gap: 8px; }
.matting-close-btn {
    font-size: 16px; color: #999;
    cursor: pointer; opacity: 0.6; transition: opacity 0.15s;
    flex-shrink: 0;
}
.matting-close-btn:hover { opacity: 1; }

.matting-apply-btn {
    width: 72px; height: 32px; flex-shrink: 0;
    border: none; border-radius: 4px;
    font-size: 13px; cursor: pointer;
    transition: opacity 0.15s;
    background: var(--webMainButtonBackColor);
    color: var(--webMainButtonTextColor);
}
.matting-apply-btn:active { opacity: 0.85; }

/* ========== 工具行 ========== */
.matting-tools-row {
    padding: 10px 16px 0 16px;
    align-items: center; flex-shrink: 0;
    gap: 8px;
}
.matting-tools-spacer { flex: 1; }
.matting-tool-item { width: 56px; height: 61px; cursor: pointer; }
.matting-tool-item span {
    font-size: 12px; text-align: center; line-height: 17px; color: #666;
}
.matting-tool-item.active span { color: #333; font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;background-color: #FFF !important; }
.matting-tool-item.active {
    background-color: #FFF !important;
}
.matting-tool-icon {
    width: 56px; height: 36px; border-radius: 8px; background: #FFF;
    align-items: center; justify-content: center; color: #666;
}
.matting-tool-icon.active { background: #F3F4F6 !important; color: var(--genericColor); }
.matting-tool-icon.erase-active { background: #F3F4F6; color: var(--genericColor); }

.matting-divider {
    width: 1px; height: 46px; background: #DDD;
    margin: 0 16px; flex-shrink: 0;
}

/* 滑动条 */
.matting-slider-group {
    width: 100px; margin-right: 16px; flex-shrink: 0;
    gap: 18px;
    height: 61px;
    justify-content: flex-end;
}
.matting-slider-label { margin-top: 2px; }
.matting-slider-label span:first-child { font-size: 12px; color: #666; line-height: 17px; }
.matting-slider-value { font-size: 12px; color: #333; line-height: 17px; }

.matting-slider-group input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100px; height: 6px;
    background: #EAECF1;
    border-radius: 3px; outline: none; margin: 0;
}
.matting-slider-group input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; background: transparent; border-radius: 3px;
}
.matting-slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px;
    background: #FFF; border: 1px solid #D0D0D0; border-radius: 50%; margin-top: -3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer;
    transition: transform 0.1s;
}
.matting-slider-group input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.3); }
.matting-slider-group input[type="range"]::-moz-range-track {
    height: 6px; background: transparent; border-radius: 3px; border: none;
}
.matting-slider-group input[type="range"]::-moz-range-thumb {
    width: 12px; height: 12px; background: #FFF; border: 1px solid #D0D0D0; border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer;
}

/* ========== 双画布区域 ========== */
.matting-canvas-area {
    flex: 1; min-height: 0; position: relative;
    margin: 12px 16px 16px 16px;
    background: #fafafa; border-radius: 4px; overflow: hidden;
}
.matting-canvas-panels { width: 100%; height: 100%; gap: 4px; }
.matting-canvas-panel {
    flex: 1; display: flex; flex-direction: column;
    background: #fafafa; position: relative;
}
.matting-panel-label {
    flex-shrink: 0; text-align: center;
    font-size: 12px; color: #999; line-height: 24px;
    background: rgba(0,0,0,0.03);
}
.matting-panel-canvas {
    flex: 1; min-height: 0; position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
#mattingLeftPanel .matting-panel-canvas { background: #F6F7F9; }
#mattingRightPanel .matting-panel-canvas {
    background-color: #ffffff;
    background-image: linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef),
                      linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

#mattingCanvasWrapperLeft,
#mattingCanvasWrapperRight {
    position: relative; display: inline-block; line-height: 0;
    border: 1px solid #ddd; border-radius: 2px; flex-shrink: 0;
}
#mattingImageCanvas,
#mattingEffectCanvas { display: block; border-radius: 1px; }
#mattingOverlayCanvas,
#mattingEffectOverlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    cursor: none; touch-action: none;
}

/* 画笔光标 */
#mattingBrushCursorLeft,
#mattingBrushCursorRight {
    position: absolute;
    border: 1.5px solid rgba(16,141,254,0.9);
    background: rgba(16,141,254,0.1);
    border-radius: 50%; pointer-events: none;
    transform: translate(-50%,-50%);
    display: none; z-index: 10;
    transition: width 0.08s ease, height 0.08s ease;
}
#mattingBrushCursorLeft.erase-mode,
#mattingBrushCursorRight.erase-mode {
    border-color: rgba(239,68,68,0.9);
    background: rgba(239,68,68,0.1);
}

#mattingBrushSizeHint {
    position: fixed; left: 50%; top: 44%;
    transform: translate(-50%,-50%);
    border: 2px solid var(--genericColor);
    background: rgba(16,141,254,0.1);
    border-radius: 50%; pointer-events: none;
    z-index: 2200; display: none; opacity: 0;
    transition: opacity 0.3s ease;
}
#mattingBrushSizeHint.show { opacity: 1; }
#mattingBrushSizeHint.erase-hint {
    border-color: #ef4444; background: rgba(239,68,68,0.12);
}

#mattingLoadingOverlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    background: #fafafa; z-index: 100;
    color: #999; font-size: 13px;
}
.matting-spinner {
    width: 28px; height: 28px; border: 3px solid #eee;
    border-top-color: var(--genericColor); border-radius: 50%;
    animation: matting-spin 0.8s linear infinite;
}
@keyframes matting-spin { to { transform: rotate(360deg); } }

/* 画布图标 */
.matting-canvas-icon {
    font-size: 18px; color: #555;
    cursor: pointer; opacity: 0.7; transition: opacity 0.15s;
}
.matting-canvas-icon:hover { opacity: 1; }
.matting-canvas-icon.disabled { opacity: 0.25; pointer-events: none; }

/* 工具图标 */
.matting-tool-icon .iconfont {
    font-size: 20px;
}

/* 绘制时隐藏浮层 */
.matting-float-hidden { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.15s; }

/* ========== 缩放控件：底部中间 ========== */
.matting-pan-btn.active { opacity: 1; color: var(--genericColor); background-color: transparent !important; }

.matting-zoom {
    position: absolute; bottom: 10px; left: 50%;
    transform: translateX(-50%);
    align-items: center; gap: 8px; z-index: 30;
    padding: 8px 12px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 8px; border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: opacity 0.15s;
}
.matting-zoom-percent {
    font-size: 12px; color: #666; line-height: 17px;
    min-width: 40px; text-align: center;
}

/* ========== imageMasking 移动端抠图组件 ========== */
.im-container {
    width: 100%; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    background: #F5F7FA; color: #333;
    font-family: PingFangSC-Regular, 'PingFang SC', 'Helvetica Neue', Roboto, sans-serif;
    overflow: hidden; user-select: none; -webkit-user-select: none;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    position: fixed; left: 0; top: 0; z-index: 1003;
}

/* 顶部导航 */
.im-top-bar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    height: 48px; background: #FFF; position: relative; z-index: 50;
    border-bottom: 1px solid #EEE;
    box-shadow: 0 4px 12px 0px rgba(19,20,26,0.1);
}
.im-title {
    font-size: 17px; font-weight: 500; color: #333;
    position: absolute; left: 50%; transform: translateX(-50%);
    font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;
}
.im-btn-icon {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 50%;
    color: #999; cursor: pointer; font-size: 18px; opacity: 0.6;
    transition: opacity 0.15s;
}
.im-btn-icon:hover { opacity: 1; }
.im-btn-icon:active { transform: scale(0.92); }
.im-btn-confirm { color: var(--genericColor); opacity: 1; }

/* 主区域 */
.im-main-area { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }

/* 画布容器 */
.im-canvas-container {
    flex: 1; min-height: 0; position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #efefef 25%, transparent 25%),
        linear-gradient(-45deg, #efefef 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #efefef 75%),
        linear-gradient(-45deg, transparent 75%, #efefef 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

#imCanvasWrapper {
    position: relative; display: inline-block; line-height: 0;
    border: 1px solid #ddd; border-radius: 2px;
}
#imImageCanvas { display: block; border-radius: 2px; }
#imOverlayCanvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    cursor: none; touch-action: none;
}

/* 画笔光标 */
#imBrushCursor {
    position: absolute;
    border: 1.5px solid rgba(16,141,254,0.9);
    background: rgba(16,141,254,0.1);
    border-radius: 50%; pointer-events: none;
    transform: translate(-50%,-50%);
    display: none; z-index: 10;
    transition: width 0.08s ease, height 0.08s ease;
}
#imBrushCursor.erase-mode {
    border-color: rgba(239,68,68,0.9);
    background: rgba(239,68,68,0.1);
}

#imBrushSizeHint {
    position: fixed; left: 50%; top: 40%;
    transform: translate(-50%,-50%);
    border: 2px solid var(--genericColor);
    background: rgba(16,141,254,0.1);
    border-radius: 50%; pointer-events: none;
    z-index: 100; display: none; opacity: 0;
    transition: opacity 0.3s ease;
}
#imBrushSizeHint.show { opacity: 1; }
#imBrushSizeHint.erase-hint {
    border-color: #ef4444; background: rgba(239,68,68,0.12);
}

/* 加载 */
#imLoadingOverlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    background: #fafafa; z-index: 100; color: #999; font-size: 13px;
}
.im-spinner {
    width: 28px; height: 28px; border: 3px solid #eee;
    border-top-color: var(--genericColor); border-radius: 50%;
    animation: im-spin 0.8s linear infinite;
}
@keyframes im-spin { to { transform: rotate(360deg); } }

/* 浮层基础 */
.im-float { transition: opacity 0.15s ease; }
.im-float-hidden { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.15s; }

/* 浮层按钮 */
.im-float-btn {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid #e0e0e0; border-radius: 30px;
    color: #555; cursor: pointer; font-size: 16px;
    transition: all 0.15s ease; width: 36px; height: 36px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.im-float-btn:active { transform: scale(0.92);background: none !important; }
.im-float-btn:disabled { opacity: 0.25; pointer-events: none; }
.im-float-btn.actived { color: var(--genericColor); }

/* 视图切换（右上角） */
.im-view-toggle {
    position: absolute; top: 12px; right: 12px; z-index: 30;
    display: flex;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}
.im-vt-btn {
    padding: 7px 0px; border: none; background: transparent;
    color: #999; font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 0.15s ease; white-space: nowrap;
    width: 56px;
}
.im-vt-btn.actived { 
    background: var(--genericColor);
    border-radius: 14px;color: #FFF;
 }
.im-vt-btn:active { transform: scale(0.96); }

/* 撤销/重做/重置（左下角） */
.im-undo-redo {
    position: absolute; bottom: 12px; left: 12px; z-index: 30;
    display: flex; gap: 16px;
}

/* 拖拽按钮（右下角） */
.im-zoom-group {
    position: absolute; bottom: 12px; right: 12px; z-index: 30;
    display: flex; align-items: center;gap: 16px;
}
.im-zoom-group .im-float-btn {
    width: 32px; height: 32px; font-size: 14px;padding: 8px;
    background: transparent; border: none; border-radius: 13px;background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 16px; border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 底部控制栏 */
.im-bottom-bar {
    flex-shrink: 0; position: relative;
    background: #FFF;
    border-top: 1px solid #EEE;
    padding: 8px 12px;
    z-index: 40;
    box-shadow: 0 2px 20px 0px rgba(201,201,201,0.5);
}

/* 画笔设置弹窗 */
.im-brush-popup {
    position: absolute; bottom: 100%; left: 12px; right: 12px;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 12px; border: 1px solid #e0e0e0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    margin-bottom: 8px;
    opacity: 0; pointer-events: none;
    transform: translateY(8px);
    transition: all 0.2s ease;
}
.im-brush-popup.visible {
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
}
.im-popup-item { display: flex; align-items: center; gap: 10px; }
.im-popup-label {
    font-size: 11px; color: #999;
    width: 36px; flex-shrink: 0;
}
.im-popup-value {
    font-size: 11px; font-weight: 600; color: #333;
    width: 28px; text-align: right; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.im-brush-popup input[type="range"] {
    flex: 1; height: 4px;
    -webkit-appearance: none; appearance: none;
    background: #EAECF1; outline: none; margin: 0; border-radius: 2px;
}
.im-brush-popup input[type="range"]::-webkit-slider-runnable-track {
    height: 3px; background: transparent; border-radius: 2px;
}
.im-brush-popup input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px;
    background: #FFF; border: 1px solid #D0D0D0; border-radius: 50%; cursor: pointer;
    margin-top: -6.5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform 0.1s ease;
}
.im-brush-popup input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.2); }

/* 工具按钮行 */
.im-tools-row { display: flex; gap: 8px; }
.im-tool-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px;
    background: #F5F7FA; border: none; border-radius: 10px;
    color: #999; cursor: pointer;
    transition: all 0.15s ease; min-height: 48px;
}
.im-tool-btn:active { transform: scale(0.96); }
.im-tool-btn.actived { color: var(--genericColor); }
.im-tool-btn.erase-actived { color: var(--genericColor) }
.im-tool-btn .iconfont { font-size: 20px; }
.im-tool-btn span { font-size: 10px; font-weight: 500; }

/* Toast */
.im-toast {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-10px);
    background: rgba(0,0,0,0.75); color: #fff; padding: 10px 20px; border-radius: 20px;
    font-size: 14px; font-weight: 500; z-index: 2000;
    opacity: 0; pointer-events: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.im-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }