/**
 * External Service View — Mobile Overrides
 * =========================================
 * Uses html body prefix (0,2,2) to beat desktop specificity (0,2,1)
 * Load order: AFTER all desktop feature CSS
 */

@media screen and (max-width: 1024px) {
    html body.external-service-mode .external-service-view {
        height: 100vh;
        height: 100dvh;  /* Dynamic viewport height for mobile browser chrome */
    }

    html body.external-service-mode .external-service-view__loading-spinner {
        width: 32px;
        height: 32px;
    }

    html body.external-service-mode .external-service-view__error-actions {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

    html body.external-service-mode .external-service-view__retry,
    html body.external-service-mode .external-service-view__newtab {
        width: 100%;
        text-align: center;
    }

    /* Disable desktop cinematic transitions on mobile (per project CSS rules) */
    html body .external-service-view.transitioning-in,
    html body .external-service-view.transitioned {
        transition: none;
        transform: none;
        opacity: 1;
    }
}