/**
 * Mobile App UX - تیندر/شیطون استایل
 * تجربهٔ اپلیکیشن موبایل برای دوست‌یابی
 */

/* ===== فول اسکرین عین اپ موبایل ===== */
/* صفحات auth (login/register) را مستثنی کن — قفل overflow روی html باعث صفحه خالی/سفید می‌شد */
@media (max-width: 991px) {
    html:not(.auth-html) {
        height: 100%;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        -webkit-text-size-adjust: 100%;
        overflow: hidden;
    }
    body:not(.auth-app-body) {
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: none;
    }
    /* صفحه اول مهمان: main بدون padding اضافه */
    main:has(.mobile-app-welcome),
    main:has(.mobile-landing) {
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* پس‌زمینه صفحه اول موبایل (Blade و Vue) */
    body:has(.mobile-landing),
    body:has(.mobile-guest-layout) {
        background: linear-gradient(165deg, #1a1a2e 0%, #16213e 35%, #0f3460 70%, #e94560 100%) !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Vue موبایل صفحه اول: وسط‌چین کامل */
    #app:has(.mobile-guest-layout),
    #app:has(.mobile-guest-layout) > div {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 100dvh;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ===== لندینگ موبایل - طراحی ساده بر اساس دسکتاپ، ورود سریع ===== */
@media (max-width: 991px) {
    .mobile-landing {
        position: relative;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        background: linear-gradient(165deg, #1a1a2e 0%, #16213e 35%, #0f3460 70%, #e94560 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom) 20px;
        overflow-y: auto;
    }
    .mobile-landing-inner {
        width: 100%;
        max-width: min(94vw, 420px);
        text-align: center;
    }
    .mobile-landing-logo {
        display: inline-block;
        margin-bottom: 16px;
    }
    .mobile-landing-logo img {
        max-width: 160px;
        width: 32vw;
        height: auto;
        filter: brightness(1.1);
    }
    .mobile-landing-title {
        font-size: clamp(1.85rem, 6vw, 2.35rem);
        font-weight: 700;
        color: #fff;
        line-height: 1.35;
        margin: 0 0 10px;
        letter-spacing: -0.02em;
    }
    .mobile-landing-title span {
        background: linear-gradient(90deg, #ff1182, #e94560);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .mobile-landing-subtitle {
        font-size: 1.08rem;
        color: rgba(255, 255, 255, 0.8);
        margin: 0 0 20px;
    }
    .mobile-landing-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 20px;
    }
    .mobile-landing-badges span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        font-size: 14px;
        padding: 10px 16px;
        border-radius: 999px;
    }
    .mobile-landing-badges i {
        color: #ff1182;
        font-size: 12px;
    }
    .mobile-landing-stats {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-bottom: 24px;
    }
    .mobile-landing-stat {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 14px;
        padding: 18px 22px;
        min-width: 0;
        flex: 1;
        max-width: 200px;
    }
    .mobile-landing-stat strong {
        display: block;
        color: #fff;
        font-size: 1.65rem;
        margin-bottom: 4px;
    }
    .mobile-landing-stat span {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.75);
    }
    .mobile-landing-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .mobile-landing-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 20px 28px;
        border-radius: 14px;
        font-weight: 600;
        font-size: 1.15rem;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-landing-btn:active {
        transform: scale(0.98);
    }
    .mobile-landing-btn-primary {
        background: linear-gradient(135deg, #ff1182, #e94560);
        color: #fff;
        box-shadow: 0 8px 24px rgba(255, 17, 130, 0.4);
    }
    .mobile-landing-btn-outline {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.4);
    }
    .mobile-landing-terms {
        margin-top: 20px;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.6);
    }
    .mobile-landing-terms a {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: underline;
    }
}

/* ===== لندینگ اپ موبایل - مهمان‌ها (legacy mobile-app-welcome) ===== */
@media (max-width: 991px) {
    .mobile-app-welcome {
        position: fixed;
        inset: 0;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        background: linear-gradient(165deg, #1a1a2e 0%, #16213e 35%, #0f3460 70%, #e94560 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom) 24px;
        z-index: 1;
    }
    .mobile-app-welcome-inner {
        width: 100%;
        max-width: 340px;
        text-align: center;
    }
    .mobile-app-logo {
        display: inline-block;
        margin-bottom: 32px;
    }
    .mobile-app-logo img {
        max-width: 120px;
        height: auto;
        filter: brightness(1.1);
    }
    .mobile-app-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.35;
        margin-bottom: 8px;
        letter-spacing: -0.02em;
    }
    .mobile-app-title span {
        background: linear-gradient(90deg, #ff1182, #e94560);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .mobile-app-subtitle {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: 36px;
    }
    .mobile-app-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .mobile-app-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 24px;
        border-radius: 14px;
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-app-btn:active {
        transform: scale(0.98);
    }
    .mobile-app-btn-primary {
        background: linear-gradient(135deg, #ff1182, #e94560);
        color: #fff;
        box-shadow: 0 8px 24px rgba(255, 17, 130, 0.4);
    }
    .mobile-app-btn-outline {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.4);
    }
    .mobile-app-btn-outline:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.6);
    }
    .mobile-app-terms {
        margin-top: 28px;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.6);
    }
    .mobile-app-terms a {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: underline;
    }
    .mobile-app-fullscreen-btn {
        margin-top: 20px;
        padding: 12px 20px;
        background: rgba(255, 255, 255, 0.15);
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        font-family: inherit;
    }
    .mobile-app-fullscreen-btn:hover {
        background: rgba(255, 255, 255, 0.25);
    }
    .mobile-app-fullscreen-btn:active {
        transform: scale(0.98);
    }
    .mobile-app-store-btns {
        display: flex;
        gap: 10px;
        margin-top: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .mobile-app-store-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-app-store-btn:active {
        transform: scale(0.98);
    }
    .mobile-app-store-android,
    .mobile-app-store-ios {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
    .mobile-app-store-android:hover,
    .mobile-app-store-ios:hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.35);
    }
    .mobile-app-install-hint {
        margin-top: 20px;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 12px;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.85);
        line-height: 1.5;
    }
    .mobile-app-install-hint i {
        margin-left: 6px;
    }
}

/* ===== شرط: فقط موبایل + کاربر لاگین‌شده ===== */
@media (max-width: 991px) {
    body.has-mobile-bottom-nav {
        /* PWA/Standalone feel */
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    body.has-mobile-bottom-nav.has-mobile-app-mode {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* مخفی کردن header و footer چیدمان اصلی سایت — نه هدر/فوتر داخل صفحهٔ چت Inertia */
    body.has-mobile-bottom-nav.has-mobile-app-mode header:not(.chat-header),
    body.has-mobile-bottom-nav.has-mobile-app-mode .container.py-2:has(.x-ad-slot[slot="header_banner"]),
    body.has-mobile-bottom-nav.has-mobile-app-mode footer:not(.chat-composer):not(.pe-step-card__footer),
    body.has-mobile-bottom-nav.has-mobile-app-mode .container.py-3:has(.x-ad-slot[slot="footer_banner"]) {
        display: none !important;
    }

    /* Main full-screen — فقط app-main سطح بالا (نه mainهای تو در تو مثل chat-messages) */
    body.has-mobile-bottom-nav.has-mobile-app-mode .app-layout:not(.app-layout-no-nav) > .app-main {
        min-height: calc(100dvh - 72px);
        min-height: calc(100dvh - 72px - env(safe-area-inset-bottom));
        padding: 0 !important;
        padding-top: env(safe-area-inset-top) !important;
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
    /* صفحه بدون منوی پایین (چت، اشتراک و...) — فقط app-main سطح بالا، نه mainهای تو در تو مثل chat-messages */
    body.has-mobile-bottom-nav.has-mobile-app-mode .app-layout-no-nav > .app-main {
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        padding: 0 !important;
        padding-top: env(safe-area-inset-top) !important;
    }

    /* main تو در تو در چت (chat-messages) نباید min-height بگیره، وگرنه باکس ارسال زیر صفحه میره */
    body.has-mobile-bottom-nav.has-mobile-app-mode main.chat-messages {
        min-height: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
    }

    /* Bottom nav - تیندر استایل */
    body.has-mobile-bottom-nav .mobile-bottom-nav {
        padding: 8px 0 max(12px, env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    }

    body.has-mobile-bottom-nav .mobile-bottom-nav-item {
        padding: 8px 6px;
        min-height: 56px;
        -webkit-tap-highlight-color: transparent;
    }

    body.has-mobile-bottom-nav .mobile-bottom-nav-item i {
        font-size: 22px;
        margin-bottom: 4px;
    }

    body.has-mobile-bottom-nav .mobile-bottom-nav-item span:not(.mobile-bottom-nav-badge):not(.mobile-bottom-nav-credits) {
        font-size: 11px;
        font-weight: 600;
    }

    body.has-mobile-bottom-nav .mobile-bottom-nav-item.active {
        color: var(--main-color, #ff1182);
    }

    body.has-mobile-bottom-nav .mobile-bottom-nav-primary i {
        font-size: 28px;
    }
}

/* ===== صفحه سواپ - تمام‌صفحه موبایل ===== */
@media (max-width: 1023.98px) {
    body.has-mobile-bottom-nav .discover-page,
    body .discover-page {
        padding: 0 !important;
        max-width: 100%;
        margin: 0 !important;
        background: #000 !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body.has-mobile-bottom-nav .discover-stack-outer,
    body .discover-stack-outer {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.has-mobile-bottom-nav .discover-card,
    body .discover-card {
        max-width: 100%;
        border-radius: 0 !important;
        box-shadow: none !important;
        min-height: 100%;
        background: #000;
    }

    body.has-mobile-bottom-nav .discover-user-card-shell article,
    body .discover-user-card-shell article {
        border-radius: 0 !important;
    }

    body.has-mobile-bottom-nav .discover-user-card-shell article > img,
    body .discover-user-card-shell article > img {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }

    body.has-mobile-bottom-nav .discover-overlay,
    body .discover-overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%) !important;
    }

    body.has-mobile-bottom-nav .action-buttons,
    body .action-buttons {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 10030 !important;
    }
}

/* ===== داشبورد موبایل - اپ‌مانند ===== */
@media (max-width: 991px) {
    body.has-mobile-bottom-nav.dashboard-fullpage .dashboard-modern {
        padding-top: env(safe-area-inset-top);
        min-height: 100dvh;
    }

    body.has-mobile-bottom-nav.dashboard-fullpage .dashboard-modern .dashboard-sidebar {
        border-radius: 20px 20px 0 0;
    }

    body.has-mobile-bottom-nav.dashboard-fullpage .dashboard-modern .dashboard-content {
        border-radius: 20px 20px 0 0;
        padding: 16px;
    }
}

/* ===== چت موبایل — باکس ارسال Teleport / غیر-Vue ثابت پایین (Vue داخل flex است) ===== */
@media (max-width: 991px) {
    body > .chat-composer,
    body > .chat-composer-fixed,
    .chat-show-page .chat-composer:not(.chat-vue-composer) {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1060 !important;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px !important;
        background: #fff !important;
        border-top: 1px solid #eef2f7 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .chat-show-page:has(.chat-composer:not(.chat-vue-composer)) .chat-messages,
    .chat-show-page:has(.chat-input-area) .chat-messages {
        padding-bottom: 100px !important;
    }
}

/* ===== چت موبایل - واتساپ/تلگرام استایل (Blade) ===== */
@media (max-width: 991px) {
    body.has-mobile-bottom-nav .chat-container {
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    body.has-mobile-bottom-nav .chat-sidebar {
        height: calc(100dvh - 72px - env(safe-area-inset-bottom));
        border-radius: 0;
    }

    /* باکس ارسال ثابت فقط برای کامپوزر غیر-Vue (چت Blade / Teleport) */
    .chat-show-page .chat-composer:not(.chat-vue-composer) {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px !important;
        background: #fff !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== Safe area برای ناچ و دکمه‌های gesture ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body.has-mobile-bottom-nav .mobile-bottom-nav {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ===== Pull-to-refresh ظاهری (اختیاری) ===== */
body.has-mobile-bottom-nav {
    -webkit-tap-highlight-color: transparent;
}

/* ===== جلوگیری از zoom ناخواسته روی input ===== */
@media (max-width: 991px) {
    body.has-mobile-bottom-nav input,
    body.has-mobile-bottom-nav textarea,
    body.has-mobile-bottom-nav select {
        font-size: 16px !important; /* جلوگیری از zoom در iOS */
    }
}

/* ===== اسپلش اسکرین اپ‌مانند ===== */
@media (max-width: 991px) {
    body.has-mobile-bottom-nav .preloader {
        background: linear-gradient(135deg, #ff1182 0%, #6d28d9 50%, #1a1a2e 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body.has-mobile-bottom-nav .preloader-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    body.has-mobile-bottom-nav .loader {
        color: rgba(255,255,255,0.9);
    }
    body.has-mobile-bottom-nav .loader:after {
        color: rgba(255,255,255,0.7);
    }
}

/* ===== انیمیشن ورود صفحه (فقط app-main، نه mainهای تو در تو) ===== */
@media (max-width: 991px) {
    body.has-mobile-bottom-nav.has-mobile-app-mode .app-layout > .app-main {
        animation: mobilePageIn 0.35s ease-out;
    }

    body.has-mobile-bottom-nav:has(.members-app-page) {
        scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    body.has-mobile-bottom-nav:has(.pe-wizard) {
        scroll-padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px));
    }
}
@keyframes mobilePageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* صفحات ورود/ثبت‌نام (layouts/auth): overflow:hidden روی html مانع اسکرول به فیلدهای پایین بود */
@media (max-width: 991.98px) {
    html.auth-html {
        overflow: visible !important;
        height: auto !important;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
    }
    body.auth-app-body {
        height: auto !important;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        overflow-x: hidden;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }
}