/* Mobile Viewport Fixes */

/* Prevent iOS Safari address bar issues */
@supports (-webkit-touch-callout: none) {
    .welcome-card {
        height: -webkit-fill-available !important;
    }
}

/* Android Chrome viewport fix - ONLY for welcome page */
@media screen and (max-width: 767px) {
    /* Only prevent scroll when welcome page is visible */
    body:has(#welcome[style*="opacity: 1"]) {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    #welcome {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        display: flex !important;
        align-items: stretch !important;
    }
    
    /* Ensure welcome card fills container */
    #welcome .welcome-card {
        height: 100% !important;
        min-height: 100% !important;
    }
    
    /* Allow normal scroll for main content */
    #root {
        overflow-y: auto !important;
        height: auto !important;
    }
}

/* iPhone notch and home indicator safe areas - ONLY welcome page */
@media screen and (max-width: 767px) {
    #welcome .welcome-card {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    /* Adjust ulos for safe areas - ONLY welcome page */
    #welcome .welcome-card > div:first-child {
        margin-top: calc(-1 * env(safe-area-inset-top));
    }
    
    #welcome .welcome-card > div:last-child {
        margin-bottom: calc(-1 * env(safe-area-inset-bottom));
    }
}

/* Prevent zoom on input focus (iOS) */
input, select, textarea {
    font-size: 16px !important;
}

/* Hide address bar on scroll (mobile browsers) */
@media screen and (max-width: 767px) {
    .welcome-card {
        /* Force hardware acceleration */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
    }
}