/* QChat media stability layer.
 *
 * Extracted verbatim from the former tail of mobile-polish.css so the fragile
 * gallery/single-image/standalone-video cascade has one explicit final owner.
 * Keep this stylesheet immediately after mobile-polish.css. The initial move is
 * intentionally semantics-preserving; later cleanup can simplify each section
 * behind visual regression tests instead of adding another numbered override.
 */

/* Legacy mobile media compatibility chain.
 *
 * v59-v60 used to live at the tail of mobile-polish.css. They are kept
 * byte-for-byte here, immediately before the newer v63+ repairs, so all fragile
 * chat gallery/single-image/standalone-video geometry has one stylesheet owner.
 * Load order is unchanged: mobile-polish.css -> qchat-media-stability.css.
 */

/* QChat mobile polish v59 — definitive mobile media lane.
 * Some older rules intentionally reserved 36px for a message avatar even though
 * the mobile media row is already edge-to-edge. A 360px smart album therefore
 * lived inside a narrower clipping bubble: the final grid column was present,
 * but only its left edge was visible. Make the *containing blocks* definite and
 * let every visual album derive its width from the actual message content box. */
@media (max-width: 767.98px) {
    html body #messagesContainer > .message:has(.qchat-file-bundle-grid.qchat-file-bundle-grid-images:not([data-file-group-count="1"])) > .d-flex,
    html body #messagesContainer > .message:has(.qchat-chat-blog-multi-image-host) > .d-flex,
    html body #messagesContainer > .message:has(.qchat-file-bundle-grid.qchat-file-bundle-grid-images:not([data-file-group-count="1"])) > .d-flex > .message-bubble,
    html body #messagesContainer > .message:has(.qchat-chat-blog-multi-image-host) > .d-flex > .message-bubble {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer > .message:has(.qchat-file-bundle-grid.qchat-file-bundle-grid-images:not([data-file-group-count="1"])) :is(
        .message-content-wrapper,
        .message-content,
        .decrypted-file-content,
        .qchat-file-bundle-message,
        .qchat-file-bundle-groups,
        .qchat-file-bundle-group
    ),
    html body #messagesContainer > .message:has(.qchat-chat-blog-multi-image-host) :is(
        .message-content-wrapper,
        .message-content,
        .decrypted-file-content,
        .qchat-chat-blog-multi-image-host,
        .qchat-chat-blog-file-bundle-message,
        .qchat-chat-blog-file-bundle-groups,
        .qchat-chat-blog-gallery-group
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer > .message:has(.qchat-file-bundle-grid.qchat-file-bundle-grid-images:not([data-file-group-count="1"])) .qchat-file-bundle-grid.qchat-file-bundle-grid-images,
    html body #messagesContainer > .message:has(.qchat-chat-blog-multi-image-host) .qchat-chat-blog-gallery {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images > .qchat-file-bundle-item,
    html body #messagesContainer .qchat-chat-blog-gallery > .qchat-chat-blog-gallery-item,
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images .qchat-deferred-video.qchat-video-preview-tile,
    html body #messagesContainer .qchat-chat-blog-gallery .qchat-deferred-video.qchat-video-preview-tile,
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images .qchat-deferred-video-surface,
    html body #messagesContainer .qchat-chat-blog-gallery .qchat-deferred-video-surface {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        aspect-ratio: auto !important;
        box-sizing: border-box !important;
    }

    /* One-image cards own their rounded corners on the media itself. */
    html body #messagesContainer > .message:has(.qchat-chat-blog-single-image-host) > .d-flex > .message-bubble,
    html body #messagesContainer > .message:has(.file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"]):not(:has(.qchat-file-bundle-grid-images)) > .d-flex > .message-bubble {
        border-radius: 0 !important;
    }
    html body #messagesContainer .qchat-chat-blog-single-image-host .qchat-chat-blog-gallery[data-file-group-count="1"],
    html body #messagesContainer .qchat-chat-blog-single-image-host .qchat-chat-blog-gallery[data-file-group-count="1"] :is(
        .qchat-chat-blog-gallery-item,
        .qchat-chat-blog-gallery-tile,
        .qchat-chat-blog-attachment-preview,
        img.qchat-chat-blog-image
    ),
    html body #messagesContainer .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"],
    html body #messagesContainer .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"] > img.chat-image-preview {
        border-radius: 12px !important;
        overflow: hidden !important;
    }
}

/* Standalone video previews should occupy the same compact media lane as a
 * single photo (250px bounding square), while preserving the source ratio.
 * Video tiles inside albums are excluded by the direct-child selector above. */
html body #messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"] {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 250px !important;
    max-height: 250px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
html body #messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="landscape-wide"] {
    width: min(250px, 100%) !important;
    aspect-ratio: 16 / 9 !important;
}
html body #messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="landscape-standard"] {
    width: min(250px, 100%) !important;
    aspect-ratio: 4 / 3 !important;
}
html body #messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="square"] {
    width: min(250px, 100%) !important;
    aspect-ratio: 1 / 1 !important;
}
html body #messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="portrait-standard"] {
    width: min(188px, 100%) !important;
    aspect-ratio: 3 / 4 !important;
}
html body #messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="portrait-tall"] {
    width: min(141px, 100%) !important;
    aspect-ratio: 9 / 16 !important;
}

/* QChat mobile polish v60 — compatibility media normalization.
 * Do not depend on :has() here. Older Android/WebView builds can parse the rest
 * of the stylesheet while silently ignoring every :has()-based repair rule.
 * qchat-media-layout-normalizer.js marks the concrete renderer shape instead. */
@media (max-width: 767.98px) {
    html body #messagesContainer .message.qchat-media-gallery-message {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message.qchat-media-gallery-message > .d-flex {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message.sent.qchat-media-gallery-message > .d-flex {
        justify-content: flex-end !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body #messagesContainer .message.received.qchat-media-gallery-message > .d-flex {
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body #messagesContainer .message.qchat-media-gallery-message .message-bubble {
        width: min(360px, calc(100vw - 28px)) !important;
        max-width: min(360px, calc(100vw - 28px)) !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message.qchat-media-gallery-message :is(
        .message-content-wrapper,
        .message-content,
        .decrypted-file-content,
        .qchat-file-bundle-message,
        .qchat-file-bundle-groups,
        .qchat-file-bundle-group,
        .qchat-chat-blog-multi-image-host,
        .qchat-chat-blog-file-bundle-message,
        .qchat-chat-blog-file-bundle-groups,
        .qchat-chat-blog-gallery-group
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .qchat-media-gallery-normalized {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        contain: layout paint !important;
    }

    html body #messagesContainer .qchat-media-gallery-normalized > * {
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* A video poster is only paint inside a grid track. It must never
       contribute an intrinsic width that can widen the final column. */
    html body #messagesContainer .qchat-media-gallery-normalized .qchat-normalized-grid-video-item,
    html body #messagesContainer .qchat-media-gallery-normalized .qchat-normalized-grid-video {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .qchat-media-gallery-normalized .qchat-normalized-grid-video {
        position: relative !important;
        display: block !important;
        contain: layout paint !important;
    }

    html body #messagesContainer .qchat-media-gallery-normalized .qchat-normalized-grid-video > .qchat-deferred-video-surface {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .qchat-media-gallery-normalized .qchat-normalized-grid-video :is(.qchat-video-poster, video) {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    /* Explicitly lock the layouts that showed the clipped right-hand cell. */
    html body #messagesContainer .qchat-media-gallery-normalized[data-qchat-album-layout="tg-3-hero-top"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    html body #messagesContainer .qchat-media-gallery-normalized[data-qchat-album-layout="tg-4-hero-top"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    html body #messagesContainer .qchat-media-gallery-normalized[data-qchat-album-layout="tg-4-grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Single-image renderers evolved several times (direct file tile and
       source/blog renderer). Normalize the actual image edge, not whichever
       outer bubble happened to receive border-radius in that generation. */
    html body #messagesContainer .message.qchat-single-image-message .message-bubble {
        border-radius: 0 !important;
    }

    html body #messagesContainer .qchat-single-image-normalized,
    html body #messagesContainer .qchat-single-image-normalized :is(
        .qchat-file-bundle-item-image,
        .file-preview.image-preview,
        .qchat-chat-blog-gallery-item,
        .qchat-chat-blog-gallery-tile,
        .qchat-chat-blog-attachment-preview
    ) {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .qchat-single-image-normalized img.chat-image-preview {
        border-radius: 12px !important;
        clip-path: inset(0 round 12px) !important;
        overflow: hidden !important;
    }
}

/* QChat mobile polish v63 — gallery inner content-box repair.
 * Previous v60-v62 rules could make the album and all wrappers as wide as the
 * OUTER message bubble. Since the bubble itself has padding, the album then
 * overflowed its content box and the right-hand cells were clipped. */
@media (max-width: 767.98px) {
    html body #messagesContainer .message.qchat-media-gallery-message .message-content-wrapper,
    html body #messagesContainer .message.qchat-media-gallery-message .message-content,
    html body #messagesContainer .message.qchat-media-gallery-message .decrypted-file-content,
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-file-bundle-message,
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-file-bundle-groups,
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-file-bundle-group,
    html body #messagesContainer .message.qchat-media-gallery-message .profile-blog-attachments,
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-chat-blog-multi-image-host,
    html body #messagesContainer .message.qchat-media-gallery-message .profile-blog-file-bundle-message,
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-chat-blog-file-bundle-message,
    html body #messagesContainer .message.qchat-media-gallery-message .profile-blog-file-bundle-groups,
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-chat-blog-file-bundle-groups,
    html body #messagesContainer .message.qchat-media-gallery-message .profile-blog-gallery-group,
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-chat-blog-gallery-group,
    html body #messagesContainer .message.qchat-media-gallery-message .profile-blog-gallery,
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-chat-blog-gallery,
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-file-bundle-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message.qchat-media-gallery-message .qchat-media-gallery-normalized {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* QChat mobile polish v64 — CSP-safe measured gallery inner-lane cap.
 * qchat-media-layout-normalizer.js measures the narrowest content box between
 * the gallery and its message bubble after layout has settled, then exposes it
 * as --qchat-mobile-gallery-fit-width via QChatRuntimeStyleBoundary. This keeps
 * 3/4-cell albums inside nested mobile padding without element.style writes. */
@media (max-width: 767.98px) {
    html body #messagesContainer .message.qchat-media-gallery-message .qchat-media-gallery-normalized {
        width: min(100%, var(--qchat-mobile-gallery-fit-width, 100%)) !important;
        max-width: min(100%, var(--qchat-mobile-gallery-fit-width, 100%)) !important;
        inline-size: min(100%, var(--qchat-mobile-gallery-fit-width, 100%)) !important;
        max-inline-size: min(100%, var(--qchat-mobile-gallery-fit-width, 100%)) !important;
        min-width: 0 !important;
        min-inline-size: 0 !important;
        box-sizing: border-box !important;
    }
}


/* QChat mobile polish v65 — restore v322 media-bubble geometry without inline styles.
 * v324 only capped the gallery itself. That left the surrounding media bubble at
 * the older narrow-phone width, so the smart grid could still be painted wider
 * than the bubble content box and its right-most cell was clipped. The normalizer
 * now measures the real row/avatar reserve and exposes --qchat-mobile-gallery-bubble-width
 * through QChatRuntimeStyleBoundary. Everything below is static CSP-safe CSS. */
@media (max-width: 767.98px) {
    html body #messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message > .d-flex {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer > .message.sent.qchat-media-gallery-message.qchat-media-gallery-message > .d-flex {
        justify-content: flex-end !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body #messagesContainer > .message.received.qchat-media-gallery-message.qchat-media-gallery-message > .d-flex {
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body #messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message > .d-flex > .message-bubble {
        width: min(360px, var(--qchat-mobile-gallery-bubble-width, 100%)) !important;
        max-width: min(360px, var(--qchat-mobile-gallery-bubble-width, 100%)) !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer > .message.sent.qchat-media-gallery-message.qchat-media-gallery-message > .d-flex > .message-bubble {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    html body #messagesContainer > .message.received.qchat-media-gallery-message.qchat-media-gallery-message > .d-flex > .message-bubble {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    html body #messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message :is(
        .message-content-wrapper,
        .message-content,
        .decrypted-file-content,
        .qchat-file-bundle-message,
        .qchat-file-bundle-groups,
        .qchat-file-bundle-group,
        .profile-blog-attachments,
        .qchat-chat-blog-multi-image-host,
        .profile-blog-file-bundle-message,
        .qchat-chat-blog-file-bundle-message,
        .profile-blog-file-bundle-groups,
        .qchat-chat-blog-file-bundle-groups,
        .profile-blog-gallery-group,
        .qchat-chat-blog-gallery-group,
        .profile-blog-gallery,
        .qchat-chat-blog-gallery,
        .qchat-file-bundle-grid
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* v64's measured gallery cap is intentionally superseded here. The old
       working v322 behaviour was to widen the bubble correctly and let the album
       consume 100% of the bubble CONTENT box, not to squeeze the album itself. */
    html body #messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message .qchat-media-gallery-normalized {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        min-width: 0 !important;
        min-inline-size: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message .qchat-media-gallery-normalized > :is(
        .qchat-file-bundle-item,
        .qchat-chat-blog-gallery-item,
        .profile-blog-gallery-item,
        .profile-blog-attachment
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* QChat mobile polish v66 — direct gallery grid-track containment.
 *
 * The v325 runtime marker was working, but two older high-specificity rules still
 * won the cascade on outgoing media messages:
 *   - sent image rows stayed width:fit-content (mobile-polish v6), and
 *   - .message.sent .decrypted-file-content stayed an auto-column CSS grid
 *     (chat-media.css).
 *
 * The latter is the important clipping mechanism. The decrypted content box can
 * be ~48px narrower after the two nested 12px message paddings, while its auto
 * grid track takes the wider file-bundle min-content width. The gallery therefore
 * starts at the correct inset but keeps the wider track and paints off the right
 * edge. v322 hid this by forcing the full ancestor chain through inline styles.
 *
 * Keep the CSP-safe marker approach and fix the actual containing grids instead:
 * make the sent/received media row definite, keep the bubble at the original
 * 360px mobile cap, and force the two internal grid wrappers to minmax(0,1fr).
 * The duplicated #messagesContainer selector deliberately outranks the legacy
 * :has(...):not(:has(...)) !important rules without requiring inline styles. */
@media (max-width: 767.98px) {
    html body #messagesContainer#messagesContainer > .message.sent.qchat-media-gallery-message > .d-flex,
    html body #messagesContainer#messagesContainer > .message.received.qchat-media-gallery-message > .d-flex {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body #messagesContainer#messagesContainer > .message.sent.qchat-media-gallery-message > .d-flex {
        justify-content: flex-end !important;
    }

    html body #messagesContainer#messagesContainer > .message.received.qchat-media-gallery-message > .d-flex {
        justify-content: flex-start !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message > .d-flex > .message-bubble {
        width: min(360px, 100%) !important;
        max-width: min(360px, 100%) !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body #messagesContainer#messagesContainer > .message.sent.qchat-media-gallery-message.qchat-media-gallery-message > .d-flex > .message-bubble {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    html body #messagesContainer#messagesContainer > .message.received.qchat-media-gallery-message.qchat-media-gallery-message > .d-flex > .message-bubble {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Critical fix: don't let an auto/min-content grid track become wider than
       the actual decrypted-file-content content box. */
    html body #messagesContainer#messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message .decrypted-file-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        justify-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message .qchat-file-bundle-groups {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-media-gallery-message.qchat-media-gallery-message :is(
        .qchat-file-bundle-message,
        .qchat-file-bundle-group,
        .qchat-file-bundle-grid.qchat-file-bundle-grid-images,
        .qchat-chat-blog-file-bundle-message,
        .qchat-chat-blog-file-bundle-groups,
        .qchat-chat-blog-gallery-group,
        .qchat-chat-blog-gallery,
        .profile-blog-file-bundle-message,
        .profile-blog-file-bundle-groups,
        .profile-blog-gallery-group,
        .profile-blog-gallery
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* QChat mobile polish v67 — runtime-marked single-image corner ownership.
 *
 * One-image messages arrive through three renderer families:
 *   1) direct chat tiles with data-qchat-single-image="1",
 *   2) file-bundle grids with data-file-group-count="1",
 *   3) source/profile-blog galleries with count=1.
 *
 * Earlier fixes mixed :has()-only detection with layout-specific selectors, so on
 * some mobile builds the rounded frame stayed on the outer message bubble, while
 * on others it landed on the real image tile or disappeared entirely. The runtime
 * normalizer now adds qchat-single-image-message / qchat-single-image-normalized
 * to the concrete nodes. Keep the bubble neutral and give the actual media surface
 * the rounded corners with strong static CSS. */
@media (max-width: 767.98px) {
    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message > .d-flex > .message-bubble {
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized,
    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized :is(
        .qchat-file-bundle-item,
        .qchat-chat-blog-gallery-item,
        .profile-blog-gallery-item,
        .profile-blog-attachment,
        .file-preview.image-preview,
        .qchat-chat-image-tile,
        .qchat-chat-blog-gallery-tile,
        .qchat-chat-blog-attachment-preview,
        .profile-blog-attachment-preview
    ) {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background-clip: padding-box !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized:is(
        .qchat-file-bundle-grid,
        .qchat-chat-blog-gallery,
        .profile-blog-gallery,
        .file-preview.image-preview,
        .qchat-chat-image-tile
    ) {
        display: block !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized :is(
        img.chat-image-preview,
        img.qchat-chat-blog-image,
        .chat-image-preview
    ) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        clip-path: inset(0 round 12px) !important;
        background-clip: padding-box !important;
    }
}

/* QChat mobile polish v69 — single-photo geometry follows the loaded bitmap.
 *
 * A tg-single shell can be created before the decrypted image has natural
 * dimensions. If its fallback metadata ratio differs from the real bitmap,
 * object-fit:contain paints a narrower/taller rectangle inside the rounded shell.
 * qchat-media-layout-normalizer.js now publishes the loaded IMG natural ratio as
 * --qchat-single-effective-ratio through QChatRuntimeStyleBoundary. Make that
 * ratio own the single-photo shell, strip cosmetic rounding/background from the
 * intermediate wrappers, and clip only the real IMG surface. */
@media (max-width: 767.98px) {
    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message > .d-flex > .message-bubble {
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized {
        aspect-ratio: var(--qchat-single-effective-ratio, var(--qchat-album-ratio, var(--qchat-single-ratio, 1))) !important;
        height: auto !important;
        min-height: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized > :is(
        .qchat-file-bundle-item,
        .qchat-file-bundle-item-image,
        .qchat-chat-blog-gallery-item,
        .profile-blog-gallery-item,
        .profile-blog-attachment
    ),
    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized :is(
        .file-preview.image-preview,
        .qchat-chat-image-tile,
        .qchat-file-bundle-image-tile,
        .qchat-chat-blog-gallery-tile,
        .qchat-chat-blog-attachment-preview,
        .profile-blog-attachment-preview
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized :is(
        img.chat-image-preview,
        img.qchat-chat-blog-image
    ),
    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized img[data-qchat-media-ratio] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        clip-path: inset(0 round 12px) !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
}

/* QChat mobile polish v70 — single image uses the IMG's intrinsic box.
 *
 * Source single-image markup may be restored with a stale 250x250 tg-single
 * runtime shell while the actual image ratio is portrait/landscape. If the IMG
 * remains width:100%;height:100%;object-fit:contain, its visible pixels do not
 * reach the shell corners, so rounding the shell cannot round the photograph.
 * Collapse every single-image media wrapper to normal-flow auto height and let
 * the replaced IMG size itself from its intrinsic aspect ratio. Only the IMG
 * owns the visible 12px corners. */
@media (max-width: 767.98px) {
    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message > .d-flex > .message-bubble {
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        gap: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized :is(
        .qchat-file-bundle-item,
        .qchat-file-bundle-item-image,
        .qchat-chat-blog-gallery-item,
        .profile-blog-gallery-item,
        .profile-blog-attachment,
        .file-preview.image-preview,
        .qchat-chat-image-tile,
        .qchat-file-bundle-image-tile,
        .qchat-chat-blog-gallery-tile,
        .qchat-chat-blog-attachment-preview,
        .profile-blog-attachment-preview
    ) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer#messagesContainer > .message.qchat-single-image-message .qchat-single-image-normalized :is(
        img.chat-image-preview,
        img.qchat-chat-blog-image,
        img[data-qchat-media-ratio]
    ) {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 300px !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 12px !important;
        clip-path: inset(0 round 12px) !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
}

/* QChat mobile polish v71 — desktop standalone-video shrink-to-fit repair.
 *
 * runtime-static.css already gives standalone deferred videos definite desktop
 * widths and max-width:none to avoid a circular shrink-to-fit calculation. This
 * stylesheet is loaded later, however, and the older global compact-video rule
 * above (v59) reintroduced width:min(...,100%) + max-width:250px on every
 * viewport. Inside the desktop fit-content message lane that percentage can
 * resolve against the shrink-to-fit width being calculated and collapse the
 * button/surface to almost zero even though the poster remains mounted in DOM.
 *
 * Reassert the stable desktop geometry at the end of the final stylesheet. Album
 * videos are excluded by the direct-child + bundle-index=-1 selector. */
@media (min-width: 768px) {
    html body #messagesContainer#messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"] {
        display: block !important;
        position: relative !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer#messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="landscape-wide"] {
        width: min(420px, 42vw) !important;
        aspect-ratio: 16 / 9 !important;
    }
    html body #messagesContainer#messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="landscape-standard"] {
        width: min(420px, 42vw) !important;
        aspect-ratio: 4 / 3 !important;
    }
    html body #messagesContainer#messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="square"] {
        width: min(360px, 36vw) !important;
        aspect-ratio: 1 / 1 !important;
    }
    html body #messagesContainer#messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="portrait-standard"] {
        width: min(315px, 31vw) !important;
        aspect-ratio: 3 / 4 !important;
    }
    html body #messagesContainer#messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"][data-qchat-video-ratio-bucket="portrait-tall"] {
        width: min(236px, 24vw) !important;
        aspect-ratio: 9 / 16 !important;
    }

    html body #messagesContainer#messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-bundle-index="-1"] > .qchat-deferred-video-surface {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* QChat P101 — final Profile Blog single-image clipping.
 * The actual decrypted IMG is replaced asynchronously during hydration.  Make
 * the semantic hydrated bitmap the only visible corner owner in the latest
 * media-stability layer, after all legacy blog/gallery rules. */
html body #profileTab .profile-blog-post
.profile-blog-gallery[data-file-group-count="1"]
.profile-blog-attachment-preview > img.qchat-profile-blog-single-image-live[data-qchat-profile-blog-single-image="1"] {
    display: block !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
    background-clip: padding-box !important;
}

/* QChat P105 — final Profile Blog single-image clip + 560px mini-audio lane.
 *
 * The profile page still inherits two legacy contracts after P104:
 *   1. .profile-blog-post audio-list rules resolve --qchat-audio-mini-target-width
 *      from html body (464px), so the inner list stays 464px even when every
 *      outer Profile Blog wrapper is already 560px.
 *   2. tg-* album rules can own border-radius on intermediate image wrappers.
 *
 * This stylesheet is loaded last.  Scope the audio target variable to the
 * semantic P103/P104 host marker and make the final single-image clip owner the
 * complete hydrated 360xratio chain rather than relying on one IMG rule. */
html body #profileTab .profile-blog-post
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-qchat-audio-mini-lane="560"] {
    --qchat-audio-mini-target-width: 560px !important;
    width: min(560px, 100%) !important;
    max-width: min(560px, 100%) !important;
    inline-size: min(560px, 100%) !important;
    max-inline-size: min(560px, 100%) !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
}

html body #profileTab .profile-blog-post
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-qchat-audio-mini-lane="560"] :is(
    .profile-blog-file-bundle-message,
    .profile-blog-file-bundle-groups,
    .profile-blog-audio-group,
    .profile-blog-audio-list,
    .profile-blog-audio-attachment,
    .profile-blog-audio-attachment > .profile-blog-attachment-preview,
    .qchat-file-bundle-group-audio,
    .qchat-audio-mini-group,
    .qchat-file-bundle-list-audio,
    .qchat-audio-mini-player
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    box-sizing: border-box !important;
}

html body #profileTab .profile-blog-post
.profile-blog-gallery[data-file-group-count="1"][data-qchat-single-image-geometry] {
    border-radius: 12px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body #profileTab .profile-blog-post
.profile-blog-gallery[data-file-group-count="1"][data-qchat-single-image-geometry] > .profile-blog-gallery-item,
html body #profileTab .profile-blog-post
.profile-blog-gallery[data-file-group-count="1"][data-qchat-single-image-geometry] .profile-blog-gallery-tile,
html body #profileTab .profile-blog-post
.profile-blog-gallery[data-file-group-count="1"][data-qchat-single-image-geometry] .profile-blog-attachment-preview,
html body #profileTab .profile-blog-post
.profile-blog-gallery[data-file-group-count="1"][data-qchat-single-image-geometry]
.profile-blog-attachment-preview > img.qchat-profile-blog-single-image-live[data-qchat-profile-blog-single-image="1"] {
    border-radius: 12px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
    background-clip: padding-box !important;
}

/* QChat P106 — Profile Blog single-image geometry is owned by the final layer.
 *
 * P103 already calculates the correct 360xratio geometry (for example 360x416)
 * and stores it in data-qchat-single-image-geometry, but the direct runtime
 * `height` declaration is carried by a low-specificity generated class. Legacy
 * Profile Blog !important rules can still resolve the gallery as a 360x360 box.
 * P106 consumes the resolved pixel dimensions through dedicated custom properties
 * from this last-loaded, high-specificity stability layer, so the clipping box and
 * the visible bitmap are the same rectangle. */
html body #profileTab #profileBlogPostsList .profile-blog-post
.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"][data-qchat-single-image-geometry]:not([data-qchat-single-image-geometry="intrinsic-gif"]) {
    width: min(var(--qchat-profile-single-width, 360px), 100%) !important;
    max-width: min(var(--qchat-profile-single-width, 360px), 100%) !important;
    min-width: 0 !important;
    height: var(--qchat-profile-single-height, auto) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
    box-sizing: border-box !important;
}

html body #profileTab #profileBlogPostsList .profile-blog-post
.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"][data-qchat-single-image-geometry]:not([data-qchat-single-image-geometry="intrinsic-gif"]) > .profile-blog-gallery-item,
html body #profileTab #profileBlogPostsList .profile-blog-post
.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"][data-qchat-single-image-geometry]:not([data-qchat-single-image-geometry="intrinsic-gif"]) .profile-blog-gallery-tile,
html body #profileTab #profileBlogPostsList .profile-blog-post
.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"][data-qchat-single-image-geometry]:not([data-qchat-single-image-geometry="intrinsic-gif"]) .profile-blog-attachment-preview,
html body #profileTab #profileBlogPostsList .profile-blog-post
.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"][data-qchat-single-image-geometry]:not([data-qchat-single-image-geometry="intrinsic-gif"])
.profile-blog-attachment-preview > img.qchat-profile-blog-single-image-live[data-qchat-profile-blog-single-image="1"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
    box-sizing: border-box !important;
}

html body #profileTab #profileBlogPostsList .profile-blog-post
.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"][data-qchat-single-image-geometry]:not([data-qchat-single-image-geometry="intrinsic-gif"])
.profile-blog-attachment-preview > img.qchat-profile-blog-single-image-live[data-qchat-profile-blog-single-image="1"] {
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}



/* QChat P107 — Saved Blog audio reuses the saved link-preview content lane.
 *
 * The Saved Blog card renderer owns the outer responsive card width.  Audio must
 * fill that card's content box (the same box used by .qchat-link-preview-blog)
 * instead of reintroducing the legacy 464px mini-player contract on an inner list.
 * Keep the image lane independent; only the audio chain is made fluid. */
html body #messagesContainer .message.qchat-saved-blog-audio-message
.saved-profile-blog-post[data-qchat-saved-blog-mini-audio-lane="link-fluid"] {
    --qchat-audio-mini-target-width: 100% !important;
}

html body #messagesContainer .message.qchat-saved-blog-audio-message
.saved-profile-blog-post[data-qchat-saved-blog-mini-audio-lane="link-fluid"] :is(
    .profile-blog-attachments.qchat-profile-blog-bundle-host,
    .profile-blog-file-bundle-message,
    .qchat-file-bundle-message,
    .profile-blog-file-bundle-groups,
    .qchat-file-bundle-groups,
    .profile-blog-audio-group,
    .profile-blog-audio-list,
    .profile-blog-audio-attachment,
    .profile-blog-audio-attachment > .profile-blog-attachment-preview,
    .qchat-file-bundle-group-audio,
    .qchat-audio-mini-group,
    .qchat-file-bundle-list-audio,
    .qchat-audio-mini-player
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    box-sizing: border-box !important;
}

/* QChat P108 — Saved Blog audio outer row shares the link-preview lane.
 *
 * P107 made the inner audio chain fluid, but the message row can still shrink to
 * the single-image/card intrinsic width before the player gets its 100% width.
 * The verified desktop geometry is row 500px -> card 474px -> content/player
 * 442px, which matches the saved Blog link-preview content lane exactly.
 * Keep the 500px row as a shrinkable desktop basis; max-width:100% preserves
 * narrow/mobile layouts. */
html body #messagesContainer#messagesContainer > .message.qchat-saved-blog-audio-message > .d-flex {
    width: min(500px, 100%) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: min(500px, 100%) !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    flex: 0 1 500px !important;
    flex-basis: 500px !important;
    box-sizing: border-box !important;
}

/* QChat P109 — Mobile Saved Blog audio outer row matches ordinary Saved Blog lane.
 *
 * P108's 500px desktop basis is correct, but the mobile row still inherits 4px
 * inline padding from the audio-message layout.  On a 393px viewport that moves
 * the bubble/card inward by exactly 4px on each side versus a link-only Saved Blog
 * message.  Remove only that mobile row padding; desktop P108 geometry remains
 * unchanged. */
@media (max-width: 767.98px) {
    html body #messagesContainer#messagesContainer > .message.qchat-saved-blog-audio-message > .d-flex {
        padding-inline: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* QChat P110 — Saved Blog cards own their author header on desktop too.
 *
 * The embedded Saved Blog card already renders the author/avatar/date, so the
 * outer chat message header duplicates the sender on desktop.  Mobile already
 * hides this header in mobile-polish.css; make the same semantic rule global for
 * Saved Blog messages without affecting ordinary chat messages. */
html body #messagesContainer#messagesContainer > .message.qchat-saved-blog-message
.message-content-wrapper > .message-header {
    display: none !important;
}


/* QChat v310 — Saved Blog single-image cards use the same compact media geometry
 * as ordinary one-photo chat messages. The blog card keeps its author/date/link
 * chrome, but the bitmap itself is no longer stretched/cropped by Profile Blog
 * gallery rules when embedded in Favorites. */
html body #messagesContainer > .message.qchat-saved-blog-image-message
.saved-profile-blog-post .profile-blog-gallery[data-file-group-count="1"],
html body #messagesContainer > .message.qchat-saved-blog-image-message
.saved-profile-blog-post .profile-blog-gallery[data-file-group-count="1"] > .profile-blog-gallery-item,
html body #messagesContainer > .message.qchat-saved-blog-image-message
.saved-profile-blog-post .profile-blog-gallery[data-file-group-count="1"] .profile-blog-gallery-tile,
html body #messagesContainer > .message.qchat-saved-blog-image-message
.saved-profile-blog-post .profile-blog-gallery[data-file-group-count="1"] .profile-blog-attachment-preview {
    width: fit-content !important;
    max-width: min(340px, 76vw, calc(100vw - 96px)) !important;
    height: auto !important;
    max-height: min(420px, 62vh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body #messagesContainer > .message.qchat-saved-blog-image-message
.saved-profile-blog-post .profile-blog-gallery[data-file-group-count="1"] .profile-blog-attachment-preview {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background: transparent !important;
}

html body #messagesContainer > .message.qchat-saved-blog-image-message
.saved-profile-blog-post .profile-blog-gallery[data-file-group-count="1"] img {
    display: block !important;
    width: auto !important;
    max-width: min(340px, 76vw, calc(100vw - 96px)) !important;
    height: auto !important;
    max-height: min(420px, 62vh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
}


/* QChat v321: video-only multi-file bundles.
 * The bundle renderer intentionally uses qchat-file-bundle-list-video instead
 * of the visual album grid. A legacy desktop override forced every deferred
 * video child to height:100% + aspect-ratio:auto. Because the list item itself
 * has no explicit height, that creates a zero-height cycle and leaves only the
 * bundle header visible. Give the video-only list a definite media lane and let
 * each button derive height from its ratio. */
html body #messagesContainer .qchat-file-bundle-group-video,
html body #messagesContainer .qchat-file-bundle-list-video {
    width: min(360px, calc(100vw - 96px)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-file-bundle-list-video > .qchat-file-bundle-item-video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-file-bundle-list-video > .qchat-file-bundle-item-video > .qchat-deferred-video.qchat-video-preview-tile {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-file-bundle-list-video > .qchat-file-bundle-item-video > .qchat-deferred-video[data-qchat-video-ratio-bucket="landscape-standard"] {
    aspect-ratio: 4 / 3 !important;
}
html body #messagesContainer .qchat-file-bundle-list-video > .qchat-file-bundle-item-video > .qchat-deferred-video[data-qchat-video-ratio-bucket="square"] {
    aspect-ratio: 1 / 1 !important;
}
html body #messagesContainer .qchat-file-bundle-list-video > .qchat-file-bundle-item-video > .qchat-deferred-video[data-qchat-video-ratio-bucket="portrait-standard"] {
    aspect-ratio: 3 / 4 !important;
}
html body #messagesContainer .qchat-file-bundle-list-video > .qchat-file-bundle-item-video > .qchat-deferred-video[data-qchat-video-ratio-bucket="portrait-tall"] {
    aspect-ratio: 9 / 16 !important;
}

/* QChat v377 — source-rendered 3-photo albums must not inherit the old
 * Profile Blog 2/3-column gallery rules. The source renderer carries a fixed
 * 12-column Telegram-like layout; make that geometry authoritative in chat so
 * the second row cannot collapse into two thin strips on iOS. */
html body #messagesContainer .qchat-chat-blog-multi-image-host[data-qchat-chat-blog-renderer="source"]
    .qchat-chat-blog-gallery[data-file-group-count="3"][data-qchat-album-layout="chat-blog-3"] {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1.15fr) minmax(0, .85fr) !important;
    gap: 2px !important;
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    aspect-ratio: 1.12 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-chat-blog-multi-image-host[data-qchat-chat-blog-renderer="source"]
    .qchat-chat-blog-gallery[data-file-group-count="3"][data-qchat-album-layout="chat-blog-3"]
    > .qchat-chat-blog-gallery-item[data-qchat-chat-blog-gallery-index="0"] {
    grid-area: 1 / 1 / auto / 13 !important;
}

html body #messagesContainer .qchat-chat-blog-multi-image-host[data-qchat-chat-blog-renderer="source"]
    .qchat-chat-blog-gallery[data-file-group-count="3"][data-qchat-album-layout="chat-blog-3"]
    > .qchat-chat-blog-gallery-item[data-qchat-chat-blog-gallery-index="1"] {
    grid-area: 2 / 1 / auto / 7 !important;
}

html body #messagesContainer .qchat-chat-blog-multi-image-host[data-qchat-chat-blog-renderer="source"]
    .qchat-chat-blog-gallery[data-file-group-count="3"][data-qchat-album-layout="chat-blog-3"]
    > .qchat-chat-blog-gallery-item[data-qchat-chat-blog-gallery-index="2"] {
    grid-area: 2 / 7 / auto / 13 !important;
}

html body #messagesContainer .qchat-chat-blog-multi-image-host[data-qchat-chat-blog-renderer="source"]
    .qchat-chat-blog-gallery[data-file-group-count="3"][data-qchat-album-layout="chat-blog-3"]
    > .qchat-chat-blog-gallery-item,
html body #messagesContainer .qchat-chat-blog-multi-image-host[data-qchat-chat-blog-renderer="source"]
    .qchat-chat-blog-gallery[data-file-group-count="3"][data-qchat-album-layout="chat-blog-3"]
    :is(.qchat-chat-blog-gallery-tile, .qchat-chat-blog-attachment-preview, img.qchat-chat-blog-image) {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

/* QChat v26.4.3 — one attachment category language/order across chat and blog. */
.qchat-chat-info .qchat-attachment-category-label,
.qchat-profile-blog-attachments-browser .qchat-attachment-category-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.qchat-chat-info .qchat-attachment-category-label > i,
.qchat-profile-blog-attachments-browser .qchat-attachment-category-label > i {
    width: 1.1em;
    text-align: center;
    flex: 0 0 1.1em;
}
.qchat-chat-info .qchat-attachment-category-count,
.qchat-profile-blog-attachments-browser .qchat-attachment-category-count {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* QChat v26.4.3 — Profile Blog Photo/GIF attachment browser uses the same
 * chronological square contact-sheet geometry as chat attachments. The normal
 * blog renderer still owns E2EE hydration and click/open behavior inside each tile. */
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: #80808025;
}
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile > .profile-blog-attachments,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .profile-blog-file-bundle-message,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .qchat-file-bundle-groups,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .qchat-file-bundle-group-image,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .profile-blog-gallery,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .profile-blog-gallery-item,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .profile-blog-gallery-tile,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .profile-blog-attachment-preview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .profile-blog-gallery {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    aspect-ratio: 1 !important;
}
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .file-name,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile .qchat-file-bundle-title {
    display: none !important;
}
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile img,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-photo-tile video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* QChat v26.4.3 — GIFs keep intrinsic geometry in the actual blog post and in
 * Saved/Favorites cards. Never enlarge a small GIF merely to fill the blog lane. */
html body #profileTab #profileBlogPostsList .profile-blog-post
.profile-blog-gallery:has(> .qchat-profile-blog-gif),
html body #messagesContainer .saved-profile-blog-post
.profile-blog-gallery:has(> .qchat-profile-blog-gif) {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background: transparent !important;
}
html body #profileTab #profileBlogPostsList .profile-blog-post
.profile-blog-gallery > .qchat-profile-blog-gif,
html body #profileTab #profileBlogPostsList .profile-blog-post
.qchat-profile-blog-gif .profile-blog-gallery-tile,
html body #profileTab #profileBlogPostsList .profile-blog-post
.qchat-profile-blog-gif .profile-blog-attachment-preview,
html body #messagesContainer .saved-profile-blog-post
.profile-blog-gallery > .qchat-profile-blog-gif,
html body #messagesContainer .saved-profile-blog-post
.qchat-profile-blog-gif .profile-blog-gallery-tile,
html body #messagesContainer .saved-profile-blog-post
.qchat-profile-blog-gif .profile-blog-attachment-preview {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background: transparent !important;
}
html body #profileTab #profileBlogPostsList .profile-blog-post
.qchat-profile-blog-gif .profile-blog-attachment-preview > img,
html body #messagesContainer .saved-profile-blog-post
.qchat-profile-blog-gif .profile-blog-attachment-preview > img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 76vw) !important;
    max-height: min(70vh, 720px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
}

/* QChat v26.4.3 — audio in the Blog Attachments modal must remain visible on
 * light themes and expose a clear playing state. */
body.light-theme .qchat-profile-blog-attachments-browser .qchat-audio-classic-player,
body.light-theme .qchat-profile-blog-attachments-browser .qchat-audio-mini-player,
body.light-theme .qchat-profile-blog-attachments-browser .audio_card,
body.light-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-classic-player,
body.light-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-mini-player,
body.light-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .audio_card,
body.auto-theme .qchat-profile-blog-attachments-browser .qchat-audio-classic-player,
body.auto-theme .qchat-profile-blog-attachments-browser .qchat-audio-mini-player,
body.auto-theme .qchat-profile-blog-attachments-browser .audio_card,
body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-classic-player,
body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-mini-player,
body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .audio_card {
    background: #f3f5f8 !important;
    border: 1px solid #d7dde6 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .10) !important;
    border-radius: 12px !important;
}
body.light-theme .qchat-profile-blog-attachments-browser .qchat-audio-classic-player.playing,
body.light-theme .qchat-profile-blog-attachments-browser .qchat-audio-mini-player.playing,
body.light-theme .qchat-profile-blog-attachments-browser .audio_card.playing,
body.light-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-classic-player.playing,
body.light-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-mini-player.playing,
body.light-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .audio_card.playing,
body.auto-theme .qchat-profile-blog-attachments-browser .qchat-audio-classic-player.playing,
body.auto-theme .qchat-profile-blog-attachments-browser .qchat-audio-mini-player.playing,
body.auto-theme .qchat-profile-blog-attachments-browser .audio_card.playing,
body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-classic-player.playing,
body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-mini-player.playing,
body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .audio_card.playing {
    background: #e8f1ff !important;
    border-color: #76a9fa !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .14), 0 4px 14px rgba(15, 23, 42, .12) !important;
}
@media (prefers-color-scheme: dark) {
    body.auto-theme .qchat-profile-blog-attachments-browser .qchat-audio-classic-player,
    body.auto-theme .qchat-profile-blog-attachments-browser .qchat-audio-mini-player,
    body.auto-theme .qchat-profile-blog-attachments-browser .audio_card,
    body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-classic-player,
    body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-mini-player,
    body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .audio_card {
        background: var(--bs-dark, #212529) !important;
        border-color: rgba(255, 255, 255, .14) !important;
        box-shadow: none !important;
    }
    body.auto-theme .qchat-profile-blog-attachments-browser .qchat-audio-classic-player.playing,
    body.auto-theme .qchat-profile-blog-attachments-browser .qchat-audio-mini-player.playing,
    body.auto-theme .qchat-profile-blog-attachments-browser .audio_card.playing,
    body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-classic-player.playing,
    body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .qchat-audio-mini-player.playing,
    body.auto-theme .qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .audio_card.playing {
        background: rgba(13, 110, 253, .18) !important;
        border-color: rgba(118, 169, 250, .75) !important;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, .18) !important;
    }
}

/* QChat v26.4.4 — chat and Profile Blog category lists share one row geometry. */
.qchat-chat-info .qchat-attachment-category-row,
.qchat-profile-blog-attachments-browser .qchat-attachment-category-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
}
.qchat-chat-info .qchat-attachment-category-row .qchat-attachment-category-label,
.qchat-profile-blog-attachments-browser .qchat-attachment-category-row .qchat-attachment-category-label {
    flex: 1 1 auto !important;
}
.qchat-chat-info .qchat-attachment-category-row .qchat-attachment-category-count,
.qchat-profile-blog-attachments-browser .qchat-attachment-category-row .qchat-attachment-category-count {
    flex: 0 0 auto !important;
    float: none !important;
    margin-left: auto !important;
    text-align: right !important;
}

/* Blog link results use the same rich preview-card lane as chat media links. */
.qchat-profile-blog-attachments-browser .qchat-profile-blog-link-result {
    padding: 12px 0 !important;
    border-bottom: 1px solid #80808035 !important;
}
.qchat-profile-blog-attachments-browser .qchat-profile-blog-link-result .qchat-media-link,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-link-result .qchat-link-preview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* QChat v408 — Profile Blog attachment browser exposes the profile's public hashtags. */
.qchat-profile-blog-attachments-browser .qchat-profile-blog-tag-cloud,
#qchatChatInfoModal .qchat-profile-blog-tag-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 4px 0 !important;
}
.qchat-profile-blog-attachments-browser .qchat-profile-blog-tag-chip,
#qchatChatInfoModal .qchat-profile-blog-tag-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 7px 11px !important;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    border-radius: 999px !important;
    background: var(--bs-body-bg, #fff) !important;
    color: var(--bs-link-color, #0d6efd) !important;
    font: inherit !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.qchat-profile-blog-attachments-browser .qchat-profile-blog-tag-chip:hover,
.qchat-profile-blog-attachments-browser .qchat-profile-blog-tag-chip:focus-visible,
#qchatChatInfoModal .qchat-profile-blog-tag-chip:hover,
#qchatChatInfoModal .qchat-profile-blog-tag-chip:focus-visible {
    border-color: var(--bs-link-color, #0d6efd) !important;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), .08) !important;
    outline: none !important;
}
.qchat-profile-blog-attachments-browser .qchat-profile-blog-tag-chip-count,
#qchatChatInfoModal .qchat-profile-blog-tag-chip-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), .12) !important;
    color: inherit !important;
    font-size: .78rem !important;
    line-height: 1 !important;
}


/* QChat v26.4.7 — one centered, hoverable close control for both attachment browsers. */
#qchatChatInfoModal .modal-header,
#qchatProfileBlogAttachmentsModal .modal-header {
    position: relative !important;
    padding-right: 64px !important;
}
#qchatChatInfoModal .qchat-chat-info-close,
#qchatProfileBlogAttachmentsModal .qchat-chat-info-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 0 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    appearance: none !important;
}
#qchatChatInfoModal .qchat-chat-info-close::before,
#qchatProfileBlogAttachmentsModal .qchat-chat-info-close::before {
    content: "×";
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-1px);
}
#qchatChatInfoModal .qchat-chat-info-close:hover,
#qchatProfileBlogAttachmentsModal .qchat-chat-info-close:hover {
    background: rgba(128, 128, 128, .18) !important;
}
#qchatChatInfoModal .qchat-chat-info-close:focus-visible,
#qchatProfileBlogAttachmentsModal .qchat-chat-info-close:focus-visible {
    outline: 2px solid #579fff !important;
    outline-offset: 1px !important;
}


/* QChat v410 — chat attachment browser hashtag inventory. */
#qchatChatInfoModal .qchat-chat-tag-results {
    display: grid !important;
    gap: 6px !important;
}
#qchatChatInfoModal .qchat-chat-tag-result {
    align-items: center !important;
}
#qchatChatInfoModal .qchat-chat-tag-result-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
#qchatChatInfoModal .qchat-chat-tag-result > small {
    flex: 0 0 auto !important;
    margin-left: 12px !important;
    white-space: nowrap !important;
}

/* QChat v411 — chat Tags are a compact launcher for public blog hashtag search. */
#qchatChatInfoModal .modal-dialog {
    width: min(680px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#qchatChatInfoModal .modal-content,
#qchatChatInfoModal .modal-body {
    min-width: 0 !important;
    max-width: 100% !important;
}
#qchatChatInfoModal .modal-content {
    overflow: hidden !important;
}
#qchatChatInfoModal .modal-body {
    overflow-x: hidden !important;
}
#qchatChatInfoModal .qchat-chat-tag-cloud {
    min-width: 0 !important;
    max-width: 100% !important;
}
#qchatChatInfoModal .qchat-chat-tag-chip {
    max-width: 100% !important;
}
@media (max-width: 575.98px) {
    #qchatChatInfoModal .modal-dialog {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        margin: 6px auto !important;
    }
    #qchatChatInfoModal .modal-content {
        max-height: calc(100dvh - 12px) !important;
    }
}