/* ==================== v6 U2（2026-09-27）图片候选编辑器 ====================
   全屏编辑层。z=13500：在聊天灯箱 chat-image-lightbox（13000）之上、cloud 接管页
   （99999）之下；已登记返回键层表 azoth-overlay-history.js（chat-image-lightbox 之后）。 */

.image-editor-layer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 13500;
    flex-direction: column;
    background: rgba(12, 12, 14, 0.97);
    color: #eee;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.image-editor-layer .ie-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.image-editor-layer .ie-title {
    font-size: 1rem;
    font-weight: 600;
    color: #ddd;
}

.image-editor-layer .ie-btn {
    border: none;
    background: transparent;
    color: #eee;
    font-size: 1rem;
    padding: 8px 10px;
    cursor: pointer;
}

.image-editor-layer .ie-done {
    color: var(--accent, #4a9eff);
    font-weight: 700;
}

.image-editor-layer .ie-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px 0;
}

.image-editor-layer .ie-canvas-wrap {
    position: relative;
    max-width: 96%;
    max-height: 100%;
    touch-action: none;
}

.image-editor-layer .ie-canvas {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 260px);
    width: auto;
    height: auto;
}

/* 裁剪框：四角手柄 + 半透明遮罩感 */
.image-editor-layer .ie-crop-rect {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}

.image-editor-layer .ie-crop-handle {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.35);
}

.image-editor-layer .ie-handle-nw { left: -11px; top: -11px; cursor: nwse-resize; }
.image-editor-layer .ie-handle-ne { right: -11px; top: -11px; cursor: nesw-resize; }
.image-editor-layer .ie-handle-sw { left: -11px; bottom: -11px; cursor: nesw-resize; }
.image-editor-layer .ie-handle-se { right: -11px; bottom: -11px; cursor: nwse-resize; }

/* 控制行 */
.image-editor-layer .ie-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
}

.image-editor-layer .ie-chip,
.image-editor-layer .ie-op {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #eee;
    border-radius: 16px;
    font-size: 0.85rem;
    padding: 6px 12px;
    cursor: pointer;
}

.image-editor-layer .ie-chip.active {
    background: var(--accent, #4a9eff);
    border-color: var(--accent, #4a9eff);
    color: #fff;
}

.image-editor-layer .ie-text-input {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #eee;
    font-size: 0.9rem;
    padding: 7px 10px;
}

.image-editor-layer .ie-footer {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}

/* ==================== v6 U2b（2026-09-27）：分层工具栏 + 涂鸦 + 文字色板 ==================== */

/* 顶栏右侧：全局撤销/重做 + 完成 */
.image-editor-layer .ie-head-right { display: flex; align-items: center; gap: 6px; }
.image-editor-layer .ie-mini {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    border-radius: 6px;
    padding: 4px 9px;
}

/* 裁剪视图容器（CSS transform 只作用这层；rect 内相对坐标经 getBoundingClientRect 反解，免换算） */
.image-editor-layer .ie-view {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    touch-action: none;
    transform-origin: center center;
    will-change: transform;
}

/* 一级工具切换栏 */
.image-editor-layer .ie-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px 0;
}

.image-editor-layer .ie-tab {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #eee;
    border-radius: 8px;
    font-size: 0.88rem;
    padding: 7px 18px;
    cursor: pointer;
}

.image-editor-layer .ie-tab.active {
    background: var(--accent, #4a9eff);
    border-color: var(--accent, #4a9eff);
    color: #fff;
}

/* 二级面板（每工具一份） */
.image-editor-layer .ie-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
}

.image-editor-layer .ie-hint {
    text-align: center;
    font-size: 0.72rem;
    color: rgba(238, 238, 238, 0.45);
    padding-top: 2px;
}

/* 色板 */
.image-editor-layer .ie-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
}

.image-editor-layer .ie-swatch.active {
    border-color: var(--accent, #4a9eff);
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.4);
}

.image-editor-layer .ie-del {
    color: #ff9d9d;
    border-color: rgba(255, 120, 120, 0.5);
}
