/* 
 * ui-wrapper-fix.css
 * 用于修复 ui-wrapper 和 masked-image 的样式问题
 * 使得 div.ui-wrapper 及其内部的 img 元素的宽高可以调整，而 div.masked-image 的宽高和位置不能调整
 */

/* 确保 ui-wrapper 可以自由调整大小 */
.ui-wrapper {
    overflow: visible !important; /* 允许内容溢出 */
    position: relative !important;
    /* 确保可以自由调整大小 */
    resize: both !important;
    /* 确保可以接收交互事件 */
    pointer-events: auto !important;
    /* 提高层级，确保在 masked-image 之上 */
    z-index: 10 !important;
}

/* 确保 masked-image 的宽高和位置保持不变，添加边框 */
.masked-image {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    /* 添加边框 */
    border: 2px solid #3498db !important;
    box-sizing: border-box !important;
    /* 防止调整大小 */
    resize: none !important;
    /* 禁止直接交互，确保不能调整大小 */
    pointer-events: none !important;
    user-select: none !important;
    /* 保持遮罩效果 */
    -webkit-mask-image: radial-gradient(circle at 0 0, black 0%, black 100%) !important;
    mask-image: radial-gradient(circle at 0 0, black 0%, black 100%) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
}

/* 允许 img 元素自由调整大小和位置 */
.masked-image img {
    position: relative !important;
    z-index: 5 !important;
    /* 移除 object-fit 限制，显示完整图片 */
    object-fit: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    /* 确保图片可以接收交互事件 */
    pointer-events: auto !important;
    /* 允许调整大小 */
    resize: both !important;
}

/* 确保 ui-resizable-handle 显示在正确的位置 */
.ui-resizable-handle {
    z-index: 90 !important;
}

/* 确保 masked-image-container 可以正常拖动 */
.masked-image-container {
    position: absolute !important;
    z-index: 25 !important;
    pointer-events: auto !important;
}