/* 移动端预设网格布局强制修复 - 最高优先级 */

@media (max-width: 768px) {
    /* 覆盖所有可能的预设网格选择器 */
    .quick-presets-grid,
    #quick-presets-container .quick-presets-grid,
    .i2i-horizontal-layout .quick-presets-grid,
    .mobile-quick-select-row .quick-presets-grid,
    #img2img-panel .quick-presets-grid,
    #img2img-panel .mobile-quick-select-row .quick-presets-grid,
    .tab-content .quick-presets-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, auto) !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 同时覆盖风格网格以保持一致性 */
    .quick-styles-grid,
    #quick-styles-container .quick-styles-grid,
    .t2i-horizontal-layout .quick-styles-grid,
    .mobile-quick-select-row .quick-styles-grid,
    #text2img-panel .quick-styles-grid,
    #text2img-panel .mobile-quick-select-row .quick-styles-grid,
    .tab-content .quick-styles-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, auto) !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 强制"更多"按钮与预设卡片高度完全一致 */
    .more-styles-item,
    .more-presets-item,
    #quick-presets-container .more-presets-item,
    #quick-styles-container .more-styles-item,
    .i2i-horizontal-layout .more-presets-item,
    .t2i-horizontal-layout .more-styles-item {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px dashed #cbd5e1 !important;
        background: #f8fafc !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }
    
    /* "更多"按钮内部元素样式 */
    .more-presets-icon,
    .more-styles-icon {
        font-size: 14px !important;
        color: #9ca3af !important;
        margin-bottom: 2px !important;
        height: auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .more-styles-item .quick-style-name,
    .more-presets-item .quick-preset-name {
        font-size: 10px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        color: #64748b !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    
    /* 统一预设和风格容器高度，移除过多留白 */
    .quick-select-container,
    #quick-presets-container,
    #quick-styles-container,
    .mobile-quick-select-row,
    .t2i-horizontal-layout .quick-select-container,
    .i2i-horizontal-layout .quick-select-container {
        min-height: auto !important;
        height: auto !important;
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
        margin-top: 0 !important;
    }
    
    /* 移除横向布局的固定最小高度 */
    .t2i-horizontal-layout,
    .i2i-horizontal-layout {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* 统一网格容器高度 */
    .quick-presets-grid,
    .quick-styles-grid,
    #img2img-panel .mobile-quick-select-row .quick-presets-grid,
    #text2img-panel .mobile-quick-select-row .quick-styles-grid {
        min-height: auto !important;
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* 减少头部留白 */
    .quick-select-header {
        margin-bottom: 0.5rem !important;
    }
    
    /* 统一头部高度 */
    .quick-select-header h4 {
        margin: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
}
