/* 通用弹窗 - 移动端优化样式 */
/* 所有弹窗在手机端从底部滑出，电脑端保持不变 */
/* 注意：裁切弹窗(crop-modal)需要全屏显示，不受此样式影响 */

@media (max-width: 768px) {
    /* ========================================
       通用模态框遮罩
       ======================================== */
    .modal-overlay:not(.crop-modal-overlay),
    .custom-modal-overlay:not(.crop-modal-overlay),
    .dialog-overlay:not(.crop-modal-overlay),
    .share-modal,
    .image-detail-modal {
        align-items: flex-end !important;
    }
    
    /* ========================================
       通用模态框内容（排除裁切弹窗）
       ======================================== */
    .modal:not(.crop-modal),
    .custom-modal:not(.crop-modal),
    .dialog:not(.crop-modal),
    .modal-content:not(.crop-modal-content):not(.crop-canvas-wrapper),
    .share-content,
    .image-detail-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        animation: slideUpModal 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }
    
    @keyframes slideUpModal {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* 模态框顶部拖动指示条（排除裁切弹窗） */
    .modal:not(.crop-modal)::before,
    .custom-modal:not(.crop-modal)::before,
    .dialog:not(.crop-modal)::before,
    .share-content::before {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        background: #e0e0e0;
        border-radius: 3px;
        margin: 12px auto 8px;
        flex-shrink: 0;
    }
    
    /* ========================================
       裁切弹窗 - 保持原有显示逻辑，只优化样式
       ======================================== */
    /* 重要：确保裁切弹窗默认隐藏，不受其他样式影响 */
    .crop-modal {
        display: none !important;
    }
    
    /* 只有当 JS 设置了 display: flex 时才显示和应用样式 */
    .crop-modal[style*="display: flex"],
    .crop-modal[style*="display:flex"] {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 10000 !important;
        animation: none !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    
    .crop-modal::before {
        display: none !important;
    }
    
    /* 裁切弹窗内部元素 - 只有当弹窗显示时才应用样式 */
    .crop-modal[style*="display: flex"] .crop-modal-content,
    .crop-modal[style*="display: flex"] .crop-modal-backdrop,
    .crop-modal[style*="display: flex"] .crop-header,
    .crop-modal[style*="display: flex"] .crop-canvas-wrapper,
    .crop-modal[style*="display: flex"] .crop-controls,
    .crop-modal[style*="display: flex"] .crop-ratio-btns,
    .crop-modal[style*="display: flex"] .crop-action-btns,
    .crop-modal[style*="display: flex"] .ratio-btn,
    .crop-modal[style*="display: flex"] .crop-confirm-btn,
    .crop-modal[style*="display: flex"] .crop-cancel-btn,
    .crop-modal[style*="display: flex"] .crop-title,
    .crop-modal[style*="display: flex"] .crop-subtitle,
    .crop-modal[style*="display: flex"] .crop-close-btn,
    .crop-modal[style*="display: flex"] #cropCanvas,
    .crop-modal[style*="display:flex"] .crop-modal-content,
    .crop-modal[style*="display:flex"] .crop-modal-backdrop,
    .crop-modal[style*="display:flex"] .crop-header,
    .crop-modal[style*="display:flex"] .crop-canvas-wrapper,
    .crop-modal[style*="display:flex"] .crop-controls,
    .crop-modal[style*="display:flex"] .crop-ratio-btns,
    .crop-modal[style*="display:flex"] .crop-action-btns,
    .crop-modal[style*="display:flex"] .ratio-btn,
    .crop-modal[style*="display:flex"] .crop-confirm-btn,
    .crop-modal[style*="display:flex"] .crop-cancel-btn,
    .crop-modal[style*="display:flex"] .crop-title,
    .crop-modal[style*="display:flex"] .crop-subtitle,
    .crop-modal[style*="display:flex"] .crop-close-btn,
    .crop-modal[style*="display:flex"] #cropCanvas {
        animation: none !important;
        border-radius: unset;
    }
    
    /* 裁切弹窗内容区域特殊处理 */
    .crop-modal[style*="display: flex"] .crop-modal-content,
    .crop-modal[style*="display:flex"] .crop-modal-content {
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    .crop-modal[style*="display: flex"] .crop-canvas-wrapper,
    .crop-modal[style*="display:flex"] .crop-canvas-wrapper {
        border-radius: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* ========================================
       确认/提示弹窗
       ======================================== */
    .custom-modal {
        padding: 16px 20px 34px !important;
        padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .modal-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 28px !important;
        margin: 8px auto 20px !important;
    }
    
    .modal-title {
        font-size: 1.25rem !important;
        margin-bottom: 10px !important;
    }
    
    .modal-desc {
        font-size: 0.95rem !important;
        margin-bottom: 24px !important;
        line-height: 1.5 !important;
    }
    
    .modal-input,
    .modal-select,
    #modalSelect {
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: 14px !important;
        margin-bottom: 20px !important;
    }
    
    .modal-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }
    
    .modal-btn {
        width: 100% !important;
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: 14px !important;
    }
    
    /* ========================================
       自定义下拉选择器
       ======================================== */
    .custom-select-wrapper {
        margin-bottom: 20px !important;
    }
    
    .custom-select-trigger {
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: 14px !important;
    }
    
    .custom-select-options {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-height: 50vh !important;
        border-radius: 20px 20px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 16px) !important;
        z-index: 3000 !important;
    }
    
    .custom-select-options::before {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        background: #e0e0e0;
        border-radius: 3px;
        margin: 12px auto 8px;
    }
    
    .custom-select-option {
        padding: 16px 20px !important;
        font-size: 1rem !important;
    }
    
    /* ========================================
       分享弹窗
       ======================================== */
    .share-modal {
        padding: 0 !important;
    }
    
    .share-content {
        border-radius: 24px 24px 0 0 !important;
        max-height: 85vh !important;
        padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    }
    
    .share-header {
        padding: 8px 20px 16px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .share-title {
        font-size: 1.1rem !important;
    }
    
    .share-close {
        width: 36px !important;
        height: 36px !important;
    }
    
    .share-body {
        padding: 20px !important;
    }
    
    .poster-preview-container {
        border-radius: 16px !important;
        margin-bottom: 20px !important;
    }
    
    .share-actions {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
        padding-top: 20px !important;
        border-top: 1px solid #f0f0f0 !important;
    }
    
    .share-btn {
        font-size: 0.8rem !important;
    }
    
    .share-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.3rem !important;
        margin: 0 auto 8px !important;
    }
    
    /* 微信二维码区域 */
    .wx-qr-overlay {
        margin: 16px 0 !important;
        padding: 20px !important;
        border-radius: 16px !important;
    }
    
    #wxQrcode {
        padding: 12px !important;
        border-radius: 10px !important;
    }
    
    /* ========================================
       图片详情弹窗
       ======================================== */
    .image-detail-modal {
        padding: 0 !important;
    }
    
    .image-detail-content {
        flex-direction: column !important;
        border-radius: 24px 24px 0 0 !important;
        max-height: 90vh !important;
    }
    
    .image-detail-close {
        top: 12px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
        z-index: 20 !important;
    }
    
    .image-detail-preview {
        max-height: 40vh !important;
        padding: 16px !important;
        border-radius: 0 !important;
    }
    
    .image-detail-preview img {
        max-height: 35vh !important;
        border-radius: 12px !important;
    }
    
    .image-detail-info {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #eee !important;
        padding: 20px !important;
        max-height: 45vh !important;
        overflow-y: auto !important;
    }
    
    .image-detail-header {
        margin-bottom: 16px !important;
    }
    
    .image-detail-header h2 {
        font-size: 1.15rem !important;
    }
    
    .image-detail-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .detail-btn {
        flex: 1 !important;
        min-width: 100px !important;
        padding: 12px 14px !important;
        font-size: 0.9rem !important;
        justify-content: center !important;
    }
    
    .image-detail-section {
        margin-bottom: 20px !important;
    }
    
    .image-detail-section h3 {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }
    
    .detail-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .detail-item {
        padding: 12px !important;
        border-radius: 10px !important;
    }
    
    .detail-label {
        font-size: 0.7rem !important;
    }
    
    .detail-value {
        font-size: 0.9rem !important;
    }
    
    .detail-prompt {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    
    .detail-prompt pre {
        font-size: 0.85rem !important;
    }
    
    /* ========================================
       Toast 提示
       ======================================== */
    .toast-container {
        top: auto !important;
        bottom: 100px !important;
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
    }
    
    .toast {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 14px !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }
    
    /* ========================================
       确认删除弹窗
       ======================================== */
    .confirm-modal,
    .delete-modal,
    .alert-modal {
        padding: 24px 20px 34px !important;
        padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .confirm-modal .modal-icon,
    .delete-modal .modal-icon {
        width: 64px !important;
        height: 64px !important;
        font-size: 32px !important;
    }
    
    /* ========================================
       输入弹窗（重命名、新建文件夹等）
       ======================================== */
    .input-modal,
    .rename-modal,
    .create-modal {
        padding: 20px 20px 34px !important;
        padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .input-modal input,
    .rename-modal input,
    .create-modal input {
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: 14px !important;
    }
    
    /* ========================================
       视频/图片预览弹窗
       ======================================== */
    .preview-modal,
    .lightbox-modal,
    .fullscreen-modal {
        background: rgba(0, 0, 0, 0.95) !important;
        padding: 0 !important;
    }
    
    .preview-modal .close-btn,
    .lightbox-modal .close-btn {
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        z-index: 100 !important;
    }
    
    .preview-modal video,
    .preview-modal img,
    .lightbox-modal img {
        max-width: 100% !important;
        max-height: 80vh !important;
        object-fit: contain !important;
    }
    
    /* ========================================
       加载/进度弹窗
       ======================================== */
    .loading-modal,
    .progress-modal {
        width: 90% !important;
        max-width: 320px !important;
        border-radius: 20px !important;
        padding: 32px 24px !important;
        margin: auto !important;
    }
    
    .loading-spinner {
        width: 48px !important;
        height: 48px !important;
    }
    
    .loading-text,
    .progress-text {
        font-size: 1rem !important;
        margin-top: 16px !important;
    }
    
    /* ========================================
       底部操作菜单（Action Sheet）
       ======================================== */
    .action-sheet,
    .bottom-sheet {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 8px 16px !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
        z-index: 2000 !important;
    }
    
    .action-sheet.active,
    .bottom-sheet.active {
        transform: translateY(0) !important;
    }
    
    .action-sheet::before,
    .bottom-sheet::before {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        background: #e0e0e0;
        border-radius: 3px;
        margin: 4px auto 12px;
    }
    
    .action-sheet-item,
    .bottom-sheet-item {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 16px !important;
        font-size: 1rem !important;
        color: #1d1d1f !important;
        border-radius: 12px !important;
        transition: background 0.15s !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .action-sheet-item:active,
    .bottom-sheet-item:active {
        background: #f5f5f7 !important;
    }
    
    .action-sheet-item.danger,
    .bottom-sheet-item.danger {
        color: #ff3b30 !important;
    }
    
    .action-sheet-cancel,
    .bottom-sheet-cancel {
        margin-top: 8px !important;
        padding: 16px !important;
        text-align: center !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #007aff !important;
        background: #f5f5f7 !important;
        border-radius: 14px !important;
    }
    
    /* ========================================
       遮罩层
       ======================================== */
    .modal-backdrop,
    .overlay,
    [class*="-overlay"] {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
}

/* ========================================
   超小屏幕优化
   ======================================== */
@media (max-width: 375px) {
    .custom-modal,
    .share-content,
    .image-detail-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .modal-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
    }
    
    .modal-title {
        font-size: 1.15rem !important;
    }
    
    .modal-desc {
        font-size: 0.9rem !important;
    }
    
    .modal-btn {
        padding: 14px !important;
        font-size: 0.95rem !important;
    }
    
    .share-actions {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
    
    .share-icon {
        width: 46px !important;
        height: 46px !important;
    }
    
    .share-btn {
        font-size: 0.75rem !important;
    }
}