/* Responsive overrides for the offline WhatsApp Web login snapshot.
   The original atomic CSS pins a few containers to fixed pixel widths
   (.xy296fx 774px, .xp9ttsr min 580px, .xbl0rts min 466px). On phones
   these overflow the viewport. Release them below 768px. */

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

*, *::before, *::after {
    box-sizing: border-box;
}

@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; }

    /* QR code: keep square, scale down so it always fits */
    .x8idabb { height: auto !important; aspect-ratio: 1 / 1; max-width: 80vw; max-height: 80vw; }
    .x9r4l05 { width: 100% !important; max-width: 80vw; }
    .x9r4l05 img,
    .x9r4l05 canvas,
    .x9r4l05 svg { width: 100% !important; height: auto !important; }

    /* WhatsApp's app-wrapper enforces a desktop chrome — let it fill 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;
    }

    /* Anything still wider than the 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 ≈ 320px): nudge typography down */
@media (max-width: 360px) {
    html { font-size: 14px; }
}

/* Short / landscape viewports: don't lock vertical heights */
@media (max-height: 600px) {
    .x8idabb { height: auto !important; }
}