/**
 * بهینه‌سازی موبایل - تجربه اپ‌مانند
 * Mobile App-like Experience
 */

/* === پایه === */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-inline: env(safe-area-inset-start, 0);
    min-height: 100dvh;
    min-height: -webkit-fill-available;
}
input, select, textarea, button {
    font-size: max(16px, 1rem);
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.2);
}

/* === هدر اپ موبایل - ثابت بالا === */
.mobile-header {
    display: none;
}
@media (max-width: 768px) {
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        inset-inline: 0;
        height: 56px;
        padding: 0 16px;
        padding-top: env(safe-area-inset-top);
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 1px 0 rgba(0,0,0,0.08);
        z-index: 200;
    }
    body.dark-mode .mobile-header {
        background: rgba(30,30,30,0.95);
        box-shadow: 0 1px 0 rgba(255,255,255,0.1);
    }
    .mobile-header-title {
        font-size: 1.25rem;
        font-weight: 700;
        background: linear-gradient(135deg, #6c5ce7, #a29bfe);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin: 0;
    }
    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .mobile-dark-toggle .slider { transform: scale(0.9); }
    .mobile-user-menu {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mobile-user-menu .nav-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    .mobile-user-menu .user-name {
        font-size: 0.85rem;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .desktop-header, .desktop-only { display: none !important; }
}

/* === حداقل اندازه لمسی === */
@media (pointer: coarse) {
    .upload-btn, .process-btn, .batch-btn, .nav-btn, .action-btn {
        min-height: 48px;
        min-width: 48px;
        touch-action: manipulation;
    }
    .action-btn { padding: 12px; }
    .format-select, .rename-input, .search-input, .imgsize-setting {
        min-height: 48px;
        padding: 12px 16px;
    }
}

/* === تبلت === */
@media (max-width: 992px) {
    .container { margin: 1rem auto; padding: 0 12px; }
    .tool-container { padding: 1.25rem; }
    .option-card { min-width: 100%; }
}

/* === موبایل اصلی === */
@media (max-width: 768px) {
    .container {
        margin: 0;
        padding: 0;
        padding-top: calc(56px + env(safe-area-inset-top) + 12px);
        padding-bottom: 100px;
        padding-inline: 12px;
    }
    .tool-container {
        padding: 16px;
        margin-bottom: 12px;
        border-radius: 16px;
    }
    .tool-container::before { border-radius: 16px 16px 0 0; }
    .header h1 { font-size: 1.35rem; line-height: 1.3; }
    .header p { display: none; }
    
    /* آپلود - تمام عرض، بزرگ */
    .upload-section {
        padding: 28px 16px;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        margin-bottom: 20px;
    }
    .upload-icon { font-size: 2.5rem; }
    .drag-text { font-size: 1rem; margin-bottom: 12px; }
    .upload-btn {
        padding: 16px 28px;
        font-size: 1.05rem;
        min-height: 52px;
        border-radius: 12px;
    }
    .supported-formats { margin-top: 12px; font-size: 0.8rem; }
    .save-hint { font-size: 0.8rem; }
    .tool-container:hover { transform: none; }
    
    /* آپشن‌ها - شبکه دو ستونه فشرده */
    .options-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }
    .option-card {
        min-width: 0;
        padding: 12px;
    }
    .option-card:nth-child(5),
    .option-card:nth-child(6),
    .option-card:nth-child(7) { grid-column: 1 / -1; }
    .option-card .select-label { font-size: 0.8rem; margin-bottom: 6px; }
    .option-card select, .option-card input { font-size: 0.9rem; }
    
    /* آمار - یک ردیف فشرده */
    .real-time-stats {
        flex-wrap: nowrap;
        gap: 16px;
        padding: 12px 16px;
        border-radius: 12px;
        margin-bottom: 16px;
    }
    .real-time-stats .stat-item { font-size: 0.9rem; }
    
    /* دکمه پردازش - مخفی در دسکتاپ موبایل (نوار پایین داریم) */
    .process-btn { 
        display: none;
        min-height: 52px;
        border-radius: 12px;
    }
    
    /* پیشرفته - اکوردیون */
    .advanced-options {
        padding: 16px;
        border-radius: 12px;
        margin-top: 16px;
    }
    .option-grid { grid-template-columns: 1fr; gap: 12px; }
    
    /* تصاویر من - شبکه فشرده */
    .my-images-section { margin: 16px 0; padding: 12px; }
    .my-images-section h3 { font-size: 1rem; }
    .saved-images-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .saved-image-item img { height: 70px; }
    
    /* Features - مخفی یا خیلی فشرده */
    .features-section {
        margin: 0;
        padding: 20px 0;
    }
    .features-container { padding: 0; }
    .section-title h2 { font-size: 1.25rem; }
    .section-title p { display: none; }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .feature-card {
        padding: 12px;
    }
    .feature-icon { font-size: 1.5rem; }
    .feature-card h3 { font-size: 0.9rem; }
    .feature-card p { font-size: 0.75rem; display: none; }
}

/* === جدول → کارت‌های لمسی === */
@media (max-width: 768px) {
    .table-container { overflow: visible; }
    .images-table { display: block; border: none; }
    .images-table thead { display: none; }
    .images-table tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }
    body.dark-mode .images-table tbody tr {
        background: var(--dark-card);
    }
    .images-table tbody tr.no-files {
        display: table-row;
        box-shadow: none;
    }
    .images-table td {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border: none;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    body.dark-mode .images-table td { border-bottom-color: rgba(255,255,255,0.1); }
    .images-table td:last-child { border-bottom: none; }
    .images-table td[data-label="Preview"] {
        padding: 0;
        order: -1;
    }
    .images-table td[data-label="Preview"] .thumbnail {
        width: 100%;
        max-height: 220px;
        object-fit: contain;
    }
    .images-table td::before {
        content: attr(data-label);
        font-weight: 600;
        min-width: 75px;
        font-size: 0.8rem;
        margin-inline-end: 10px;
    }
    .images-table td[data-label="Actions"] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .images-table td[data-label="Actions"]::before { display: none; }
    .images-table .action-btn {
        flex: 1;
        min-width: 48px;
        min-height: 48px;
    }
}

/* === نوار عملیات پایین - مثل اپ === */
.mobile-bottom-bar { display: none; }
@media (max-width: 768px) {
    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        inset-inline: 0;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        gap: 10px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
        z-index: 100;
    }
    body.dark-mode .mobile-bottom-bar {
        background: rgba(28,28,28,0.98);
        box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    }
    .mobile-bottom-bar .process-btn {
        display: flex !important;
        flex: 1;
        max-width: 100%;
        min-height: 54px;
        font-size: 1.1rem;
        border-radius: 14px;
        justify-content: center;
    }
}

/* === پیش‌نمایش موبایل === */
@media (max-width: 768px) {
    .preview-container { padding: 16px; }
    .preview-comparison { flex-direction: column; gap: 16px; }
    .preview-box img { max-height: 220px; object-fit: contain; border-radius: 12px; }
}

/* === Toast === */
@media (max-width: 768px) {
    .toast {
        inset-inline: 16px;
        bottom: max(100px, calc(100px + env(safe-area-inset-bottom)));
    }
}

/* === batch actions موبایل === */
@media (max-width: 768px) {
    .batch-actions {
        flex-direction: column;
        gap: 10px;
    }
    .batch-right-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .batch-btn {
        width: 100%;
        justify-content: center;
        min-height: 50px;
        border-radius: 12px;
    }
}