/**
 * 图片编辑工具 - 窗口浮层样式
 * 独立命名空间 .image-editor-window-*，仅本窗口使用，不与其他面板通用
 * 默认 1280×720，支持右下角等比缩放（16:9）
 * 字体：Microsoft YaHei
 */

.image-editor-window-wrap {
    position: fixed;
    z-index: 10000;
    min-width: 640px;
    min-height: 360px;
    max-width: 96vw;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    /* 主题 Token（范围化，仅窗口外壳；对齐《上传拼图通用工具配色文档说明》） */
    --bg-card: #1e1e1e;
    --bg-secondary: #2a2a2e;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --border-primary: rgba(255, 255, 255, 0.12);
    --text-primary: #e0e0e0;
    --text-secondary: #d0d1d2;
    --scrollbar-track: #2d2d2d;
    --scrollbar-thumb: #555555;

    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

.image-editor-window-wrap.image-editor-window-hidden {
    display: none;
}

.image-editor-window-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 40px;
    padding: 0 12px 0 14px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.image-editor-window-title-text {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

.image-editor-window-title-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
}

.image-editor-window-minimize {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #999;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.image-editor-window-minimize:hover {
    background: var(--bg-hover);
    color: #ffffff;
}

.image-editor-window-minimize:focus {
    outline: none;
}

.image-editor-window-minimize svg {
    width: 16px;
    height: 16px;
}

.image-editor-window-maximize {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #999;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.image-editor-window-maximize:hover {
    background: var(--bg-hover);
    color: #ffffff;
}

.image-editor-window-maximize:focus {
    outline: none;
}

.image-editor-window-maximize svg {
    width: 16px;
    height: 16px;
}

.image-editor-window-wrap.image-editor-window-maximized {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw;
    max-height: 100vh;
}

.image-editor-window-wrap.image-editor-window-maximized .image-editor-window-resize-se {
    display: none;
}

/* 最小化：窗口收起到页面左下角，仅保留标题条，内容区完全不显示 */
.image-editor-window-wrap.image-editor-window-minimized {
    left: 0 !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    width: 260px !important;
    height: 40px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 8px 8px 0 0;
}

.image-editor-window-wrap.image-editor-window-minimized .image-editor-window-body {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.image-editor-window-wrap.image-editor-window-minimized .image-editor-window-resize-se {
    display: none !important;
}

.image-editor-window-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #999;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.image-editor-window-close:hover {
    background: var(--bg-hover);
    color: #ffffff;
}

.image-editor-window-close:focus {
    outline: none;
}

.image-editor-window-close svg {
    width: 16px;
    height: 16px;
}

.image-editor-window-body {
    flex: 1;
    min-height: 0;
    position: relative;
    background: var(--bg-card);
}

.image-editor-window-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg-card);
}

/* 从个人文件拖入时由父页接管 drop 的透明遮层，覆盖在 iframe 之上 */
.image-editor-window-drop-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
}

.image-editor-window-drop-overlay[aria-hidden="false"] {
    pointer-events: auto;
}

.image-editor-window-resize-se {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 3;
    touch-action: none;
}

.image-editor-window-resize-se::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.18);
    border-bottom: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 0 0 2px 0;
}