/* Responsive overrides for the offline WhatsApp Web phone-number login page.
   The original atomic CSS pins containers to fixed pixel widths;
   on phones these overflow the viewport. Release them below 768 px. */

/* Only the containers we force to width:100% need border-box.
   Touching input or its overlay breaks the prefix alignment. */
.xy296fx,
.xp9ttsr,
.xbl0rts,
.app-wrapper-web {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}


@media (max-width: 768px) {

    /* Main centered login card */
    .xy296fx { width: 100% !important; max-width: 100% !important; }

    /* Inner panels with hard-coded min-widths */
    .xp9ttsr,
    .xbl0rts { min-width: 0 !important; width: 100% !important; }

    /* App chrome fills the screen */
    .app-wrapper-web {
        width: 100%      !important;
        height: 100%     !important;
        min-width: 0     !important;
        min-height: 0    !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Prevent iOS zoom-on-focus for phone number input */
    [data-testid="phone-number-input"] {
        font-size: 16px !important;
    }

    /* Anything still wider than viewport: clamp */
    body > div,
    #app,
    #app > div {
        max-width: 100vw !important;
    }

    /* Long text should wrap, not push width */
    p, span, div, a, h1, h2, h3 {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* Very narrow phones (iPhone SE ≈ 320 px) */
@media (max-width: 360px) {
    html { font-size: 14px; }
}

/* Short / landscape viewports */
@media (max-height: 600px) {
    .xbl0rts { overflow-y: auto; max-height: 100vh; }
}