/**
 * 增强的模态框拖拽样式
 * 提供流畅的拖拽体验和视觉反馈
 * 
 * 功能特性：
 * 1. 拖拽过程中的视觉反馈
 * 2. 平滑的动画过渡效果
 * 3. 高性能的GPU加速
 * 4. 响应式设计支持
 * 
 * @author AI魔方团队
 * @version 1.0.0
 */

/* 拖拽相关的基础样式 */
.modal-content[data-draggable="true"] {
    /* 启用GPU加速，提升拖拽性能 */
    will-change: transform;
    transform-origin: center center;
    
    /* 平滑的过渡效果 */
    transition: box-shadow 0.2s ease-in-out;
}

/* 拖拽头部样式 */
.modal-header {
    /* 确保拖拽区域有足够的点击空间 */
    min-height: 50px;
    position: relative;
    
    /* 拖拽时的光标样式 */
    cursor: move;
    cursor: grab;
}

.modal-header:active {
    cursor: grabbing;
}

/* 拖拽中的样式 */
.modal-content.dragging {
    /* 拖拽时的阴影效果，增强视觉反馈 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
                0 10px 20px rgba(0, 0, 0, 0.2);
    
    /* 轻微的缩放效果 */
    transform-style: preserve-3d;
    
    /* 禁用文本选择 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    /* 提高层级，确保在最前面 */
    z-index: 1060;
}

/* 拖拽时的头部样式 */
.modal-content.dragging .modal-header {
    /* 拖拽时的背景色变化 */
    background-color: rgba(0, 123, 255, 0.1);
    
    /* 边框高亮 */
    border-bottom: 2px solid #007bff;
    
    /* 平滑过渡 */
    transition: background-color 0.2s ease-in-out,
                border-bottom-color 0.2s ease-in-out;
}

/* 拖拽指示器 */
.modal-header::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 20px;
    height: 12px;
    background-image: 
        linear-gradient(90deg, #ccc 0%, #ccc 2px, transparent 2px, transparent 4px),
        linear-gradient(90deg, #ccc 0%, #ccc 2px, transparent 2px, transparent 4px),
        linear-gradient(90deg, #ccc 0%, #ccc 2px, transparent 2px, transparent 4px);
    background-size: 4px 2px;
    background-position: 0 0, 0 4px, 0 8px;
    background-repeat: repeat-x;
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}

.modal-header:hover::before {
    opacity: 0.8;
}

.modal-content.dragging .modal-header::before {
    opacity: 1;
    background-image: 
        linear-gradient(90deg, #007bff 0%, #007bff 2px, transparent 2px, transparent 4px),
        linear-gradient(90deg, #007bff 0%, #007bff 2px, transparent 2px, transparent 4px),
        linear-gradient(90deg, #007bff 0%, #007bff 2px, transparent 2px, transparent 4px);
}

/* 防止拖拽时选中其他元素 */
body.dragging-modal {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: move !important;
}

/* 拖拽时禁用模态框内容的指针事件 */
.modal-content.dragging * {
    pointer-events: none;
}

/* 但保持关闭按钮可用 */
.modal-content.dragging .close,
.modal-content.dragging .btn-secondary {
    pointer-events: auto;
}

/* 响应式设计 - 移动设备优化 */
@media (max-width: 768px) {
    .modal-header {
        /* 移动设备上增加触摸区域 */
        min-height: 60px;
        padding: 15px 20px;
    }
    
    .modal-header::before {
        /* 移动设备上的拖拽指示器更明显 */
        width: 24px;
        height: 16px;
        right: 20px;
    }
    
    .modal-content.dragging {
        /* 移动设备上减少阴影效果，提升性能 */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
}

/* 高DPI显示器优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .modal-header::before {
        /* 高DPI显示器上的更清晰的拖拽指示器 */
        background-size: 2px 1px;
        background-position: 0 0, 0 2px, 0 4px;
    }
}

/* 深色主题支持 */
@media (prefers-color-scheme: dark) {
    .modal-content.dragging .modal-header {
        background-color: rgba(255, 255, 255, 0.1);
        border-bottom-color: #0d6efd;
    }
    
    .modal-header::before {
        background-image: 
            linear-gradient(90deg, #666 0%, #666 2px, transparent 2px, transparent 4px),
            linear-gradient(90deg, #666 0%, #666 2px, transparent 2px, transparent 4px),
            linear-gradient(90deg, #666 0%, #666 2px, transparent 2px, transparent 4px);
    }
    
    .modal-content.dragging .modal-header::before {
        background-image: 
            linear-gradient(90deg, #0d6efd 0%, #0d6efd 2px, transparent 2px, transparent 4px),
            linear-gradient(90deg, #0d6efd 0%, #0d6efd 2px, transparent 2px, transparent 4px),
            linear-gradient(90deg, #0d6efd 0%, #0d6efd 2px, transparent 2px, transparent 4px);
    }
}

/* 减少动画的用户偏好支持 */
@media (prefers-reduced-motion: reduce) {
    .modal-content[data-draggable="true"],
    .modal-content.dragging .modal-header {
        transition: none;
    }
    
    .modal-content.dragging {
        /* 保持基本的阴影效果，但移除动画 */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
}

/* 打印样式 */
@media print {
    .modal-header::before {
        display: none;
    }
    
    .modal-content.dragging {
        box-shadow: none;
    }
}

/* 辅助功能支持 */
.modal-header[aria-grabbed="true"] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* 键盘导航支持 */
.modal-header:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.modal-header:focus:not(:focus-visible) {
    outline: none;
}

/* 性能优化 - 使用transform3d触发硬件加速 */
.modal-content[data-draggable="true"] {
    transform: translate3d(0, 0, 0);
}

/* 拖拽边界提示 */
.modal-content.dragging.at-boundary {
    animation: boundary-pulse 0.3s ease-in-out;
}

@keyframes boundary-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* 拖拽轨迹提示（可选功能） */
.drag-trail {
    position: fixed;
    width: 4px;
    height: 4px;
    background: #007bff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1050;
    opacity: 0.6;
    animation: trail-fade 0.5s ease-out forwards;
}

@keyframes trail-fade {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}