/* 删除可以用 Tailwind 替代的样式，保留特殊的自定义样式 */

/* 删除这些基础样式，使用 Tailwind 的替代
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*/

/* 修改容器样式，部分使用 Tailwind 类 */
.container {
    /* 这些可以删除，使用 Tailwind 类替代
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    height: 100vh;
    background: #f5f5f5;
    */
}

/* 保留特殊的自定义样式 */
.signature-wrapper .control-btn {
    position: absolute;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 0;
    pointer-events: auto;
}

/* 其他特殊样式保持不变... */

#images-container {
    @apply w-full flex flex-col items-center gap-4 bg-white rounded-lg shadow-sm p-4;
    transition: all 0.3s ease-in-out;
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
}

.canvas-container {
    position: relative;
    background: #fff;
    overflow: visible;
    transition: all 0.3s ease-in-out;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overscroll-behavior: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    max-width: 100%;
    overflow-x: hidden;
}

/* 添加悬停效果 */
.canvas-container:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.drawing-layer {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
}

.drawing-layer.active {
    pointer-events: auto;
}

.signature-wrapper {
    position: absolute;
    transform-origin: center;
    pointer-events: all;
    width: fit-content;
    height: fit-content;
    border: 1px dashed #999;
    padding: 4px;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 1000;
}

.signature-wrapper.interacting {
    z-index: 1000;
}

/* 在交互时禁用页面滚动 */
.signature-wrapper.interacting ~ * {
    pointer-events: none;
}

.signature-wrapper .resize-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 50%;
}

.signature-wrapper .resize-handle.tl { top: -4px; left: -4px; cursor: nw-resize; }
.signature-wrapper .resize-handle.tr { top: -4px; right: -4px; cursor: ne-resize; }
.signature-wrapper .resize-handle.bl { bottom: -4px; left: -4px; cursor: sw-resize; }
.signature-wrapper .resize-handle.br { bottom: -4px; right: -4px; cursor: se-resize; }

.signature-wrapper.resizing {
    touch-action: none;
    user-select: none;
}

.signature-on-image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: all;
}

.signature-on-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

body {
    overscroll-behavior: none; /* 防止页面弹性滚动 */
    overflow-x: hidden; /* 禁止水平滚动 */
    width: 100vw; /* 限制宽度为视口宽度 */
    position: relative; /* 确保溢出内容相对于 body 定位 */
}

/* 确保没有全局的 touch-action: none */
.canvas-container,
.drawing-layer,
#images-container,
#signature-pad {
    touch-action: auto;
}

/* 只在绘制模式时禁用触摸 */
.drawing-mode {
    touch-action: none;
}

/* 确保容器不会造成水平溢出 */
.flex {
    max-width: 100%;
}

/* 添加弹窗动画相关样式 */
#modal {
    transition: opacity 0.3s ease-in-out;
}

#modal > div {
    transition: all 0.3s ease-in-out;
}

/* 按钮悬停效果 */
#modal button {
    transition: all 0.2s ease-in-out;
}

#modal button:hover {
    transform: translateY(-1px);
}

#modal button:active {
    transform: translateY(0);
}

button[onclick="toggleDrawingMode()"] {
    transition: all 0.3s ease-in-out;
}

/* 添加 Toast 消息样式 */
.toast-message {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}