/*
 * Unified mobile page contract.
 *
 * Feature styles are intentionally allowed to own their visual language. This
 * layer only owns the mobile frame: viewport sizing, document scrolling,
 * readable gutters, single-column flow, safe-area spacing and touch targets.
 * It is loaded last so older page-specific desktop rules cannot reintroduce a
 * fixed-width or nested-scroll layout on a phone.
 */

@media (max-width: 920px) {
    :root {
        --fuuvo-mobile-gutter: max(14px, env(safe-area-inset-left));
        --fuuvo-mobile-gutter-right: max(14px, env(safe-area-inset-right));
        --fuuvo-mobile-header-height: 64px;
    }

    html {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden !important;
        overflow-y: auto;
        overscroll-behavior-y: auto;
    }

    /* Public shells use the document as the only vertical scroller. */
    body > :is(.creation-app, .feature-shell, .portal-shell, .app-shell, .kc-app-shell),
    body > [data-fuuvo-app-shell="1"] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
    }

    body > :is(.creation-app, .feature-shell, .portal-shell, .app-shell, .kc-app-shell) > :is(.creation-workspace, .portal-content, .workspace, .content-shell, .kc-app-workspace),
    body > [data-fuuvo-app-shell="1"] [data-fuuvo-app-workspace="1"] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* The shared sidebar already has its drawer behavior. Custom legacy
     * sidebars need the same mobile affordance instead of stealing width. */
    body > .feature-shell > .feature-sidebar,
    body > .app-shell > .sidebar,
    body > .content-shell > .sidebar {
        display: none !important;
    }

    body :is(header[data-fuuvo-shared-topbar="1"], .workspace-chat-header, .creation-topbar, .portal-topbar, .kc-topbar, .topbar, .content-shell > .topbar) {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        width: 100% !important;
        min-height: var(--fuuvo-mobile-header-height) !important;
        height: var(--fuuvo-mobile-header-height) !important;
        max-height: var(--fuuvo-mobile-header-height) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: var(--fuuvo-mobile-gutter) !important;
        padding-right: var(--fuuvo-mobile-gutter-right) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
        background: color-mix(in srgb, var(--fuuvo-mobile-surface, #fff) 94%, transparent) !important;
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }

    body :is(.topbar, .kc-topbar, .content-shell > .topbar) {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    body :is(.topbar, .kc-topbar, .content-shell > .topbar) > * {
        min-width: 0;
    }

    body :is(.top-title, .topbar-title, .kc-topbar-title) {
        min-width: 0;
        max-width: 54vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px !important;
    }

    body :is(.top-actions, .topbar-actions, .kc-topbar-actions) {
        min-width: 0;
        gap: 6px !important;
        white-space: nowrap;
    }

    body :is(.top-safety-link, .portal-top-safety-link) span,
    body :is(.top-actions, .topbar-actions) .login-link span {
        display: none;
    }

    /* One predictable content gutter for every public page family. */
    body :is(
        .creation-main,
        .analysis-main,
        .food-main,
        .fortune-main,
        .office-main,
        .pricing-main,
        .membership-main,
        .ai-document-main,
        .main,
        .portal-main,
        .kc-container,
        .purchased-services-main,
        .payment-result
    ) {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body :is(.creation-main, .analysis-main, .food-main, .fortune-main, .office-main, .pricing-main, .membership-main, .ai-document-main, .main, .portal-main) {
        padding-top: 24px !important;
        padding-bottom: max(46px, env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }

    /* Page grids become a clear vertical reading order. Small repeat grids
     * remain two-up only where the cards are icon-sized or explicitly data
     * oriented. */
    body :is(
        .creation-layout,
        .creation-work-grid,
        .research-work-grid,
        .learning-layout,
        .analysis-layout,
        .analysis-setup-layout,
        .analysis-result-layout,
        .food-content-grid,
        .food-result-layout,
        .food-detail-layout,
        .fortune-layout,
        .fortune-result-layout,
        .office-tool-layout,
        .service-use-layout,
        .feature-layout,
        .kc-article-layout,
        .legal-article-layout,
        .safety-page-layout,
        .portal-layout,
        .data-control-layout,
        .account-data-layout,
        .ai-card-layout
    ) {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body :is(
        .creation-grid,
        .creation-inspiration-grid,
        .creation-visual-grid,
        .research-tool-grid,
        .research-result-cards,
        .food-quick-grid,
        .food-reference-grid,
        .fortune-reading-grid,
        .feature-grid,
        .control-grid,
        .report-cards,
        .membership-plan-grid,
        .purchased-service-grid,
        .recommendations,
        .kc-card-grid,
        .kc-flow,
        .stripe-plan-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body :is(.creation-sidebar, .research-side, .analysis-settings-side, .analysis-result-side, .food-method-panel, .food-refine-panel, .fortune-side-info, .office-result-card, .kc-article-nav, .kc-toc, .portal-side, .safety-page-toc) {
        width: 100% !important;
        margin: 16px 0 0 !important;
        position: static !important;
    }

    body :is(.settings-panel, .analysis-settings-side, .office-tool-form-card, .office-result-card, .food-info-panel, .fortune-setup, .fortune-continue, .kc-side-support, .legal-side-support) {
        padding: 16px !important;
    }

    body :is(.creation-card, .creation-visual-card, .research-tool-card, .research-result-card, .food-restaurant-card, .fortune-reading-grid > article, .feature-card, .control-card, .report-card, .membership-plan-card, .purchased-service-card, .kc-topic-card, .stripe-plan-card) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body :is(button, a, input, select, textarea, summary) {
        max-width: 100%;
    }

    body :is(button, [role="button"], a[class*="-button"], a[class*="-btn"], .primary-button, .outline-button, .login-link) {
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
        max-width: 100%;
        font-size: 16px !important;
    }

    body :is(textarea, .composer textarea, .research-input textarea, .analysis-prompt, .office-start-panel textarea, .office-tool-form-card textarea) {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 112px;
        line-height: 1.55;
    }

    body :is(.categories, .research-tabs, .creation-tabs, .office-tabs, .membership-period, .translation-tabs, .detail-option-row) {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    body :is(.categories, .research-tabs, .creation-tabs, .office-tabs, .membership-period, .translation-tabs, .detail-option-row)::-webkit-scrollbar {
        display: none;
    }

    body :is(.table-wrap, .data-preview-table, .office-result-table, .analysis-spreadsheet-preview, .spreadsheet-grid-wrap, .presentation-template-grid) {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body :is(table, .data-preview-table table, .office-result-table table) {
        max-width: none;
    }

    body :is(pre, code, .result-content, .service-result-content, .kc-copy) {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    body :is(dialog, .modal, .modal-backdrop .modal, .wechat-payment-dialog, .topbar-settings-drawer, .workspace-account-dropdown) {
        max-width: calc(100vw - 24px) !important;
    }

    body :is(.modal-backdrop, .wechat-payment-modal) {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    }

    /* Knowledge/legal pages have a three-column desktop reading layout. Keep
     * the article navigation available as a compact horizontal strip. */
    body :is(.kc-article-nav, .legal-document-nav) nav {
        display: flex !important;
        max-width: 100%;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    body :is(.kc-article-nav, .legal-document-nav) nav a {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 9px 12px !important;
        white-space: nowrap;
    }

    body :is(.kc-toc, .legal-page-toc) {
        display: none !important;
    }

    /* Media preview controls must stay visible above the safe area. */
    body.preview-embedded :is(.preview-toolbar, .preview-header, .preview-actions) {
        flex-wrap: wrap;
        gap: 6px;
    }

    body.preview-embedded :is(.preview-stage, .preview-frame-wrap, .preview-image-wrap) {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Auth screens are intentionally calm and single-column on phones. */
    body :is(.auth-page, .auth-shell) {
        min-height: 100dvh;
        width: 100%;
    }

    body :is(.auth-header, .auth-page .auth-header) {
        height: auto !important;
        min-height: 78px !important;
        padding: 14px var(--fuuvo-mobile-gutter) !important;
    }

    body :is(.auth-header .brand > img, .auth-brand > img) {
        width: min(190px, 62vw) !important;
        max-width: 100%;
    }

    body :is(.auth-main, .auth-content, .auth-layout) {
        width: calc(100% - 28px) !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        padding: 28px 0 max(48px, env(safe-area-inset-bottom)) !important;
        display: block !important;
    }

    body :is(.auth-card, .auth-panel, .auth-showcase-card) {
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 18px !important;
    }

}

@media (max-width: 430px) {
    body :is(.creation-main, .analysis-main, .food-main, .fortune-main, .office-main, .pricing-main, .membership-main, .ai-document-main, .main, .portal-main, .kc-container, .purchased-services-main) {
        width: calc(100% - 22px) !important;
        padding-top: 20px !important;
    }

    body :is(.hero h1, .creation-heading h1, .research-home-heading h1, .food-heading h1, .analysis-heading h1, .fortune-hero h1, .office-heading h1, .membership-hero h1, .portal-heading h1, .portal-hero h1) {
        font-size: clamp(23px, 8vw, 28px) !important;
        line-height: 1.28 !important;
    }

    body :is(.card, .feature-card, .kc-topic-card, .membership-plan-card, .purchased-service-card) {
        padding: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body :is(*, *::before, *::after) {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Keep desktop hover transforms from causing accidental movement on touch. */
@media (max-width: 920px) and (hover: none) {
    body :is(.feature-card, .kc-topic-card, .membership-plan-card, .purchased-service-card, .creation-card) {
        transform: none !important;
    }
}

@media (max-width: 920px) {
    html[data-theme="dark"] body :is(header[data-fuuvo-shared-topbar="1"], .workspace-chat-header, .creation-topbar, .portal-topbar, .kc-topbar, .topbar, .content-shell > .topbar),
    html[data-ui-theme="dark"] body :is(header[data-fuuvo-shared-topbar="1"], .workspace-chat-header, .creation-topbar, .portal-topbar, .kc-topbar, .topbar, .content-shell > .topbar),
    body[data-theme="dark"] :is(header[data-fuuvo-shared-topbar="1"], .workspace-chat-header, .creation-topbar, .portal-topbar, .kc-topbar, .topbar, .content-shell > .topbar),
    body[data-ui-theme="dark"] :is(header[data-fuuvo-shared-topbar="1"], .workspace-chat-header, .creation-topbar, .portal-topbar, .kc-topbar, .topbar, .content-shell > .topbar) {
        border-bottom-color: rgba(148, 163, 184, .2) !important;
        background: rgba(10, 23, 40, .94) !important;
    }
}