/* 图片生成页面 - 移动端响应式样式 */

/* ========================================
   平板设备 (768px - 1024px)
   ======================================== */
@media (max-width: 1024px) {
    .main-container {
        padding: 40px 24px !important;
    }
    
    .headline h1 {
        font-size: 2rem !important;
    }
    
    .headline p {
        font-size: 1rem !important;
    }
    
    .create-section {
        gap: 30px !important;
    }
    
    .upload-box {
        min-height: 180px !important;
    }
    
    .preview-box {
        min-height: 380px !important;
    }
    
    .profile-fab {
        width: 64px !important;
        height: 64px !important;
        bottom: 30px !important;
        right: 30px !important;
    }
}

/* ========================================
   手机设备 (小于768px)
   ======================================== */
@media (max-width: 768px) {
    body {
        padding-top: 56px !important;
        padding-bottom: 80px !important;
    }
    
    /* 主容器 */
    .main-container {
        padding: 24px 16px !important;
        max-width: 100% !important;
    }
    
    /* 标题区 */
    .headline {
        margin-bottom: 32px !important;
        text-align: left !important;
    }
    
    .headline h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    .headline p {
        font-size: 0.9rem !important;
    }
    
    /* 创作区域 - 垂直布局 */
    .create-section {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .upload-area, .preview-area {
        width: 100% !important;
        flex: none !important;
    }
    
    .upload-area {
        gap: 12px !important;
    }
    
    /* 上传框 */
    .upload-box {
        min-height: 140px !important;
        border-radius: 14px !important;
    }
    
    .upload-box .upload-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 22px !important;
        margin-bottom: 8px !important;
    }
    
    .upload-box span {
        font-size: 0.9rem !important;
    }
    
    .upload-box small {
        font-size: 0.75rem !important;
    }
    
    .upload-box .remove-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }
    
    /* 输入框 */
    .input-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .input-group label {
        font-size: 0.8rem !important;
        margin-bottom: 6px !important;
    }
    
    .input-group input {
        padding: 14px 16px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
    
    /* 预览区域 */
    .preview-box {
        min-height: 280px !important;
        border-radius: 14px !important;
    }
    
    .preview-placeholder .icon {
        font-size: 36px !important;
    }
    
    .preview-placeholder p {
        font-size: 0.9rem !important;
    }
    
    /* 操作按钮组 - 移动端适配 */
    .action-btn-group {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 16px !important;
    }
    
    .action-btn-group .action-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }
    
    /* 底部操作栏 */
    .action-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid #f0f0f0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
        z-index: 100 !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .action-left {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }
    
    .action-right {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }
    
    .mode-btn {
        flex: 1 !important;
        justify-content: center !important;
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
    }
    
    .param-select {
        flex: 1 !important;
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
    }
    
    .send-btn {
        width: 48px !important;
        height: 48px !important;
        flex-shrink: 0 !important;
    }
    
    /* 模式下拉菜单 - 底部弹出 */
    .mode-dropdown {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 8px 16px 24px !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateY(100%) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
    }
    
    .mode-dropdown.active {
        transform: translateY(0) !important;
    }
    
    .mode-dropdown::before {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        background: #e0e0e0;
        border-radius: 3px;
        margin: 8px auto 16px;
    }
    
    .mode-option {
        padding: 16px !important;
        border-radius: 14px !important;
        margin-bottom: 8px !important;
    }
    
    .mode-option-icon {
        font-size: 1.8rem !important;
    }
    
    .mode-option-title {
        font-size: 1rem !important;
    }
    
    .mode-option-desc {
        font-size: 0.85rem !important;
    }
    
    /* 进度遮罩 */
    .progress-overlay {
        padding: 24px !important;
    }
    
    .progress-content {
        width: 100% !important;
    }
    
    .progress-title {
        font-size: 1.25rem !important;
    }
    
    .progress-bar-container {
        width: 100% !important;
        max-width: 280px !important;
    }
    
    .progress-percent {
        font-size: 1.75rem !important;
    }
    
    .progress-text {
        font-size: 0.9rem !important;
    }
    
    /* 悬浮按钮 */
    .profile-fab {
        width: 52px !important;
        height: 52px !important;
        bottom: 90px !important;
        right: 16px !important;
    }
    
    .fab-content span {
        font-size: 0.7rem !important;
    }
}

/* ========================================
   小屏手机 (小于480px)
   ======================================== */
@media (max-width: 480px) {
    .headline h1 {
        font-size: 1.3rem !important;
    }
    
    .headline p {
        font-size: 0.85rem !important;
    }
    
    .upload-box {
        min-height: 120px !important;
    }
    
    .upload-box .upload-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    
    .preview-box {
        min-height: 240px !important;
    }
    
    .mode-btn, .param-select {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }
    
    .send-btn {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ========================================
   横屏模式优化
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .main-container {
        padding: 16px 24px !important;
    }
    
    .headline {
        margin-bottom: 20px !important;
    }
    
    .headline h1 {
        font-size: 1.3rem !important;
    }
    
    /* 横屏时恢复水平布局 */
    .create-section {
        flex-direction: row !important;
        gap: 20px !important;
    }
    
    .upload-area, .preview-area {
        flex: 1 !important;
    }
    
    .upload-box {
        min-height: 100px !important;
    }
    
    .preview-box {
        min-height: 200px !important;
    }
    
    /* 底部操作栏 */
    .action-bar {
        flex-wrap: nowrap !important;
    }
    
    .action-left, .action-right {
        width: auto !important;
    }
    
    .profile-fab {
        bottom: 80px !important;
    }
}

/* ========================================
   骨架屏移动端适配
   ======================================== */
@media (max-width: 768px) {
    .skeleton-card {
        border-radius: 14px !important;
    }
    
    .skeleton-thumbnail {
        aspect-ratio: 1/1 !important;
        border-radius: 14px 14px 0 0 !important;
    }
    
    .skeleton-info {
        padding: 10px 12px !important;
    }
    
    .skeleton-title {
        height: 14px !important;
    }
    
    .skeleton-meta {
        height: 10px !important;
    }
}