/* QChat chat media layout v287
 * Static replacement for legacy runtime <style> injection from ChatManager.
 * This file is loaded by index.html and contains no executable code.
 */

        .qchat-audio-mini-cover,
        .qchat-audio-cover-preview {
            cursor: zoom-in;
        }

        .qchat-audio-mini-art:has(.qchat-audio-mini-cover),
        .qchat-audio-mini-art:has(.qchat-audio-cover-preview) {
            cursor: zoom-in;
        }

        .qchat-audio-mini-cover:hover,
        .qchat-audio-cover-preview:hover {
            filter: brightness(0.94);
        }
    

        /* QChat message lanes: every sent/received row is capped to 50% of the chat.
           This is deliberately placed at the message level, not only audio/images,
           so long text, replies, files, galleries, audio bundles and videos all obey it. */
        #messagesContainer {
            --qchat-message-lane-width: 50%;
            --qchat-message-row-gap: 8px;
            --qchat-message-mobile-lane-width: min(86%, calc(100% - 10px));
            --qchat-audio-mini-collapsed-width: 464px;
            --qchat-audio-mini-row-width: calc(var(--qchat-audio-mini-collapsed-width) + 78px);
            --qchat-audio-mini-controls-width: 122px;
        }

        #messagesContainer .message {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

        #messagesContainer .message > .d-flex {
            width: fit-content !important;
            max-width: var(--qchat-message-lane-width) !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            align-items: flex-end !important;
            gap: var(--qchat-message-row-gap) !important;
        }

        /* Audio messages should use the whole 50% lane instead of shrinking to content.
           The lane still includes avatar + gap, so the player fills all remaining bubble space. */
        #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex,
        #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex,
        #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex {
            width: fit-content !important;
            max-width: min(var(--qchat-audio-mini-row-width), 100%) !important;
        }

        #messagesContainer .message.received > .d-flex {
            margin-right: auto !important;
            margin-left: 0 !important;
            justify-content: flex-start !important;
        }

        #messagesContainer .message.sent > .d-flex {
            margin-left: auto !important;
            margin-right: 0 !important;
            justify-content: flex-end !important;
        }

        #messagesContainer .message .message-avatar {
            flex: 0 0 auto !important;
        }

        #messagesContainer .message .message-bubble {
            flex: 1 1 auto !important;
            width: fit-content !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
        }

        #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble,
        #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble,
        #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble {
            flex: 1 1 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        #messagesContainer .message .message-content-wrapper,
        #messagesContainer .message .message-header,
        #messagesContainer .message .message-content,
        #messagesContainer .message .message-footer,
        #messagesContainer .message .decrypted-file-content,
        #messagesContainer .message .file-caption {
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

        #messagesContainer .message .message-content,
        #messagesContainer .message .file-caption,
        #messagesContainer .message .reply-preview-text,
        #messagesContainer .message .reply-preview-caption,
        #messagesContainer .message .reply-preview-file-link {
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
        }

        #messagesContainer .message .message-header,
        #messagesContainer .message .message-footer,
        #messagesContainer .message .reply-preview-inner,
        #messagesContainer .message .reply-preview-title,
        #messagesContainer .message .reply-preview-text,
        #messagesContainer .message .reply-preview-file-with-caption,
        #messagesContainer .message .qchat-file-bundle-preview-meta,
        #messagesContainer .message .qchat-audio-mini-meta {
            min-width: 0 !important;
            max-width: 100% !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

        #messagesContainer .message .message-reply-preview,
        #messagesContainer .message .reply-preview-content {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
        }

        #messagesContainer .message .reply-preview-thumb-loader,
        #messagesContainer .message .message-reply-thumb {
            flex: 0 0 auto !important;
        }

        #messagesContainer .message .qchat-file-bundle-message,
        #messagesContainer .message .qchat-file-bundle-groups,
        #messagesContainer .message .qchat-file-bundle-group,
        #messagesContainer .message .qchat-file-bundle-grid,
        #messagesContainer .message .qchat-file-bundle-list,
        #messagesContainer .message .qchat-audio-mini-group,
        #messagesContainer .message .qchat-file-bundle-list-audio,
        #messagesContainer .message .qchat-file-bundle-group-audio,
        #messagesContainer .message .qchat-audio-mini-player,
        #messagesContainer .message .file-preview,
        #messagesContainer .message .video-preview {
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

        #messagesContainer .message .qchat-file-bundle-message {
            width: fit-content !important;
        }

        #messagesContainer .message .qchat-audio-mini-group,
        #messagesContainer .message .qchat-file-bundle-group-audio,
        #messagesContainer .message .qchat-file-bundle-list-audio {
            width: min(360px, 100%) !important;
        }

        #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper,
        #messagesContainer .message:has(.qchat-audio-mini-player) .message-content,
        #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-player {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

        #messagesContainer .message .file-preview.image-preview,
        #messagesContainer .message .qchat-chat-image-tile {
            max-width: 100% !important;
        }

        #messagesContainer .message video {
            max-width: 100% !important;
            height: auto !important;
        }

        /* Image thumbnails must keep their square/cropped preview shape.
           A broad max-width rule on img.chat-image-preview was squeezing them
           on narrow/mobile lanes, so image tiles get explicit dimensions here. */
        #messagesContainer .message .file-preview.image-preview > img.chat-image-preview,
        #messagesContainer .message .qchat-chat-image-tile > img.chat-image-preview {
            width: 100% !important;
            height: 100% !important;
            min-width: 100% !important;
            min-height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            object-fit: cover !important;
            object-position: center !important;
            display: block !important;
        }


        #messagesContainer .message .qchat-file-bundle-preview-name,
        #messagesContainer .message .qchat-file-bundle-preview-size,
        #messagesContainer .message .qchat-audio-mini-extra {
            min-width: 0 !important;
            max-width: 100% !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        #messagesContainer .message .qchat-audio-mini-progress {
            grid-template-columns: auto minmax(0, 1fr) auto !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }

        #messagesContainer .message .qchat-audio-mini-progress .timeline {
            min-width: 44px !important;
            width: 100% !important;
        }

        /* v54: compact chat audio starts narrow, then expands to the full available message lane (50%). */
        #messagesContainer {
            --qchat-audio-mini-collapsed-width: 464px;
            --qchat-audio-mini-row-width: calc(var(--qchat-audio-mini-collapsed-width) + 78px);
            --qchat-audio-mini-controls-width: 122px;
        }

        #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex,
        #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex,
        #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex {
            width: fit-content !important;
            max-width: min(var(--qchat-audio-mini-row-width), 100%) !important;
            transition: width 240ms cubic-bezier(.2,.8,.2,1), max-width 240ms cubic-bezier(.2,.8,.2,1) !important;
        }

        #messagesContainer .message:has(.qchat-audio-mini-player:hover) > .d-flex,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) > .d-flex,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) > .d-flex {
            width: fit-content !important;
            max-width: min(var(--qchat-audio-mini-row-width), 100%) !important;
        }

        #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble {
            flex: 0 1 auto !important;
            width: min(var(--qchat-audio-mini-collapsed-width), 100%) !important;
            max-width: min(var(--qchat-audio-mini-collapsed-width), 100%) !important;
            transition: width 240ms cubic-bezier(.2,.8,.2,1), max-width 240ms cubic-bezier(.2,.8,.2,1) !important;
        }

        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble {
            flex: 0 1 auto !important;
            width: min(var(--qchat-audio-mini-collapsed-width), 100%) !important;
            max-width: min(var(--qchat-audio-mini-collapsed-width), 100%) !important;
        }

        #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper,
        #messagesContainer .message:has(.qchat-audio-mini-player) .message-content,
        #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio,
        #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio {
            width: min(var(--qchat-audio-mini-collapsed-width), 100%) !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            transition: width 240ms cubic-bezier(.2,.8,.2,1), max-width 240ms cubic-bezier(.2,.8,.2,1) !important;
        }

        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-content-wrapper,
        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-content,
        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .decrypted-file-content,
        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .qchat-file-bundle-message,
        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .qchat-file-bundle-groups,
        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .qchat-file-bundle-group,
        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .qchat-file-bundle-list,
        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .qchat-audio-mini-group,
        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .qchat-file-bundle-group-audio,
        #messagesContainer .message:has(.qchat-audio-mini-player:hover) .qchat-file-bundle-list-audio,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-content-wrapper,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-content,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .decrypted-file-content,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .qchat-file-bundle-message,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .qchat-file-bundle-groups,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .qchat-file-bundle-group,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .qchat-file-bundle-list,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .qchat-audio-mini-group,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .qchat-file-bundle-group-audio,
        #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .qchat-file-bundle-list-audio,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-content-wrapper,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-content,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .decrypted-file-content,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .qchat-file-bundle-message,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .qchat-file-bundle-groups,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .qchat-file-bundle-group,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .qchat-file-bundle-list,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .qchat-audio-mini-group,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .qchat-file-bundle-group-audio,
        #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .qchat-file-bundle-list-audio {
            width: min(var(--qchat-audio-mini-collapsed-width), 100%) !important;
            max-width: min(var(--qchat-audio-mini-collapsed-width), 100%) !important;
        }

        #messagesContainer .message .qchat-audio-mini-player {
            width: 100% !important;
            max-width: 100% !important;
            transition: width 240ms cubic-bezier(.2,.8,.2,1), max-width 240ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease !important;
        }

        #messagesContainer .message .qchat-audio-mini-controls {
            max-width: 0 !important;
            transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), max-width 220ms cubic-bezier(.2,.8,.2,1), margin-left 220ms ease !important;
        }

        #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls,
        #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
        #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls {
            max-width: var(--qchat-audio-mini-controls-width) !important;
        }

        @media (max-width: 575.98px) {
            #messagesContainer {
                --qchat-audio-mini-collapsed-width: 100%;
                --qchat-audio-mini-controls-width: 122px;
            }
        }

        @media (max-width: 575.98px) {
            /* 50% desktop lanes are too narrow on phones once avatar + gap are included.
               Mobile keeps left/right alignment but gives media bubbles enough usable width. */
            #messagesContainer {
                --qchat-message-lane-width: var(--qchat-message-mobile-lane-width);
                --qchat-message-row-gap: 6px;
            }

            #messagesContainer .message > .d-flex,
            #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex,
            #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex,
            #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex {
                width: fit-content !important;
                max-width: var(--qchat-message-lane-width) !important;
            }

            #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex,
            #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex,
            #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex,
            #messagesContainer .message:has(.qchat-file-bundle-grid-images) > .d-flex,
            #messagesContainer .message:has(.file-preview.image-preview) > .d-flex {
                width: var(--qchat-message-lane-width) !important;
            }

            #messagesContainer .message .message-avatar {
                width: 30px !important;
                height: 30px !important;
                flex-basis: 30px !important;
            }

            #messagesContainer .message .message-bubble {
                min-width: 0 !important;
            }

            #messagesContainer .message .qchat-audio-mini-player {
                gap: 6px !important;
                padding: 6px !important;
            }

            #messagesContainer .message .qchat-file-bundle-preview-icon,
            #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-icon {
                width: 30px !important;
                min-width: 30px !important;
                height: 30px !important;
            }

            #messagesContainer .message .qchat-audio-mini-cover {
                width: 30px !important;
                height: 30px !important;
                border-radius: 999px !important;
            }

            #messagesContainer .message .qchat-audio-mini-controls {
                gap: 3px !important;
                flex: 0 0 auto !important;
            }

            #messagesContainer .message .qchat-audio-mini-btn {
                width: 24px !important;
                height: 24px !important;
                font-size: 0.72rem !important;
            }

            #messagesContainer .message .qchat-audio-mini-play {
                width: 28px !important;
                height: 28px !important;
            }

            #messagesContainer .message .qchat-audio-mini-progress {
                grid-template-columns: auto minmax(36px, 1fr) auto !important;
                gap: 4px !important;
                font-size: 0.64rem !important;
            }

            #messagesContainer .message .qchat-audio-mini-progress .timeline {
                min-width: 36px !important;
            }
        }
    

/* qchat v154: image message thumbnails use the 767px compact style only on >=768px.
   Below 768px the existing mobile image behavior is left untouched. */
@media (min-width: 768px) {
    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)),
    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) {
        --qchat-message-lane-width: min(420px, calc(100vw - 24px)) !important;
        --qchat-photo-message-lane-width: min(420px, calc(100vw - 24px)) !important;
    }

    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
    html body #messagesContainer .message.sent.qchat-sent-media-fit-row:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
    html body #messagesContainer .message.sent.qchat-sent-media-fit-row:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
    html body #messagesContainer .message.received:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
    html body #messagesContainer .message.received:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex {
        width: fit-content !important;
        max-width: min(420px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        box-sizing: border-box !important;
        gap: var(--qchat-message-row-gap, 6px) !important;
    }

    html body #messagesContainer .message.sent:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
    html body #messagesContainer .message.sent:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex {
        margin-left: auto !important;
        margin-right: 0 !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
    }

    html body #messagesContainer .message.received:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
    html body #messagesContainer .message.received:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex {
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-content: flex-start !important;
        align-items: flex-end !important;
    }

    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-bubble,
    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-bubble,
    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-content-wrapper,
    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-content-wrapper,
    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-content,
    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-content,
    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .decrypted-file-content,
    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .decrypted-file-content,
    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .qchat-file-bundle-message,
    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .qchat-file-bundle-message,
    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .qchat-file-bundle-groups,
    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .qchat-file-bundle-groups,
    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .qchat-file-bundle-group,
    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .qchat-file-bundle-group {
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message:has(.message-content > .file-preview.image-preview.qchat-chat-image-tile):not(:has(.qchat-file-bundle-grid-images)):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-bubble,
    html body #messagesContainer .message:has(.decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile):not(:has(.qchat-file-bundle-grid-images)):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-bubble {
        max-width: min(148px, 44vw) !important;
    }

    html body #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"]:not(.profile-blog-gallery-tile),
    html body #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"]:not(.profile-blog-gallery-tile) {
        width: min(148px, 44vw) !important;
        max-width: min(148px, 44vw) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: var(--qchat-single-ratio, 1) !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images[data-file-group-count="1"]):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-bubble,
    html body #messagesContainer .message .qchat-file-bundle-message:has(.qchat-file-bundle-grid-images[data-file-group-count="1"]),
    html body #messagesContainer .message .qchat-file-bundle-group:has(.qchat-file-bundle-grid-images[data-file-group-count="1"]),
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="1"],
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-one {
        width: min(148px, 44vw) !important;
        max-width: min(148px, 44vw) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-bubble,
    html body #messagesContainer .message .qchat-file-bundle-message:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]),
    html body #messagesContainer .message .qchat-file-bundle-group:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]),
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="2"],
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"],
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"],
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-two {
        width: min(304px, 88vw, calc(100vw - 88px)) !important;
        max-width: min(304px, 88vw, calc(100vw - 88px)) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message:has(.qchat-file-bundle-grid-images):not(:has(.qchat-file-bundle-grid-images[data-file-group-count="1"])):not(:has(.qchat-file-bundle-grid-images[data-file-group-count="2"])):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .message-bubble,
    html body #messagesContainer .message .qchat-file-bundle-message:has(.qchat-file-bundle-grid-images):not(:has(.qchat-file-bundle-grid-images[data-file-group-count="1"])):not(:has(.qchat-file-bundle-grid-images[data-file-group-count="2"])),
    html body #messagesContainer .message .qchat-file-bundle-group:has(.qchat-file-bundle-grid-images):not(:has(.qchat-file-bundle-grid-images[data-file-group-count="1"])):not(:has(.qchat-file-bundle-grid-images[data-file-group-count="2"])),
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images:not([data-file-group-count="1"]):not([data-file-group-count="2"]) {
        width: min(360px, 92vw, calc(100vw - 88px)) !important;
        max-width: min(360px, 92vw, calc(100vw - 88px)) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message.sent .qchat-chat-image-tile,
    html body #messagesContainer .message.sent .qchat-file-bundle-grid-images {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    html body #messagesContainer .message.received .qchat-chat-image-tile,
    html body #messagesContainer .message.received .qchat-file-bundle-grid-images {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

        /* Chat images now follow the blog gallery style: equal square thumbnails. */
        .file-preview.image-preview {
            width: min(170px, 44vw);
            aspect-ratio: 1 / 1;
            min-height: 118px;
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            padding: 0;
            margin: 0;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.08);
            cursor: pointer;
        }

        .file-preview.image-preview .chat-image-preview {
            width: 100% !important;
            height: 100% !important;
            min-width: 100% !important;
            min-height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            object-fit: cover !important;
            object-position: center !important;
            display: block !important;
            border-radius: inherit !important;
            cursor: pointer;
            transition: transform 0.15s ease, filter 0.15s ease;
        }

        .file-preview.image-preview:hover .chat-image-preview {
            transform: scale(1.025);
            filter: brightness(0.96);
        }

        .file-preview.image-preview .file-name,
        .file-preview.image-preview .file-meta {
            display: none !important;
        }

        .qchat-file-bundle-message {
            width: fit-content !important;
            min-width: 0 !important;
            max-width: min(520px, 100%) !important;
        }

        .qchat-file-bundle-title {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            font-weight: 600 !important;
        }

        .qchat-file-bundle-preview-list {
            display: grid !important;
            gap: 7px !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }

        .qchat-file-bundle-preview-item {
            display: flex !important;
            align-items: center !important;
            gap: 9px !important;
            min-width: 0 !important;
            padding: 7px !important;
            border-radius: 10px !important;
            background: rgba(0,0,0,0.045) !important;
            box-sizing: border-box !important;
        }

        .qchat-file-bundle-preview-icon {
            width: 34px !important;
            min-width: 34px !important;
            height: 34px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 1.15rem !important;
        }

        .qchat-file-bundle-preview-meta {
            min-width: 0 !important;
            flex: 1 1 auto !important;
        }

        .qchat-file-bundle-preview-name {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            font-size: 0.9rem !important;
        }

        .qchat-file-bundle-preview-size {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            font-size: 0.74rem !important;
        }

        .message.sent .decrypted-file-content {
            display: grid;
            justify-items: end;
        }

        .message.sent .qchat-file-bundle-message,
        .message.sent .message-content > .file-preview.image-preview,
        .message.sent .decrypted-file-content > .file-preview.image-preview {
            margin-left: auto;
            margin-right: 0;
        }

        .qchat-file-bundle-groups {
            display: grid !important;
            gap: 10px !important;
            min-width: 0;
            width: fit-content;
            max-width: 100%;
        }

        .qchat-file-bundle-group {
            min-width: 0;
            width: fit-content;
            max-width: 100%;
        }

        .qchat-file-bundle-grid {
            display: grid !important;
            gap: 8px !important;
            width: min(328px, 100%);
            max-width: 100% !important;
            justify-content: start;
        }

        .qchat-file-bundle-list {
            display: grid !important;
            gap: 8px !important;
            width: min(360px, 100%);
            max-width: 100% !important;
        }

        .message.sent .qchat-file-bundle-groups,
        .message.sent .qchat-file-bundle-group,
        .message.sent .qchat-file-bundle-list {
            margin-left: auto;
            margin-right: 0;
            justify-items: stretch;
        }

        /* QChat audio mini: one source of truth for single audio and bundle audio.
           Old cached messages may still contain inline <style> blocks, so these
           rules keep !important while cache sanitization removes those blocks. */
        .qchat-audio-mini-group,
        .qchat-file-bundle-group-audio,
        .qchat-file-bundle-list-audio {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

        .qchat-audio-mini-player {
            display: flex !important;
            align-items: center !important;
            gap: 9px !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            padding: 7px !important;
            border-radius: 10px !important;
            background: rgba(0,0,0,0.045) !important;
            overflow: hidden !important;
        }

        .qchat-audio-mini-art {
            border-radius: 999px !important;
            overflow: hidden !important;
            transform-origin: center center !important;
        }

        .qchat-audio-mini-cover,
        .qchat-audio-mini-player .qchat-audio-cover-preview {
            border-radius: 999px !important;
            object-fit: cover !important;
            transform-origin: center center !important;
        }

        .qchat-audio-mini-player .qchat-file-bundle-preview-meta,
        .qchat-audio-mini-meta {
            min-width: 0 !important;
            flex: 1 1 auto !important;
        }

        .qchat-audio-mini-controls {
            display: grid !important;
            grid-template-columns: 26px 30px 26px !important;
            grid-template-areas:
                "volume volume volume"
                "prev play next"
                "range range range" !important;
            align-items: center !important;
            justify-items: center !important;
            column-gap: 4px !important;
            row-gap: 3px !important;
            flex: 0 0 auto !important;
            margin-left: auto !important;
            overflow: hidden !important;
            opacity: 0 !important;
            width: 112px !important;
            max-width: 0 !important;
            max-height: 0 !important;
            transform: translateX(-18px) scale(0.96) !important;
            transform-origin: left center !important;
            pointer-events: none !important;
            transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), max-width 220ms cubic-bezier(.2,.8,.2,1), max-height 220ms cubic-bezier(.2,.8,.2,1) !important;
        }

        .qchat-audio-mini-player:hover .qchat-audio-mini-controls,
        .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
        .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls {
            opacity: 1 !important;
            max-width: 122px !important;
            max-height: 94px !important;
            transform: translateX(0) scale(1) !important;
            pointer-events: auto !important;
        }

        .qchat-audio-mini-player .qchat-audio-volume-wrap { display: contents !important; }
        .qchat-audio-mini-player .qchat-audio-mini-volume { grid-area: volume !important; }
        .qchat-audio-mini-player .prev { grid-area: prev !important; }
        .qchat-audio-mini-player .play { grid-area: play !important; }
        .qchat-audio-mini-player .next { grid-area: next !important; }
        .qchat-audio-mini-player .qchat-audio-volume-range {
            grid-area: range !important;
            width: 108px !important;
            min-width: 108px !important;
            max-width: 108px !important;
            height: 16px !important;
            opacity: 1 !important;
            transform: none !important;
            cursor: pointer !important;
        }
        .qchat-audio-mini-player .song-name .qchat-audio-title-copy-clone { display: none !important; }
        .qchat-audio-mini-player.playing .song-name.qchat-audio-title-overflow .qchat-audio-title-copy-clone { display: inline-block !important; }

        .qchat-audio-mini-btn {
            width: 26px !important;
            height: 26px !important;
            border: 0 !important;
            border-radius: 999px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            background: rgba(0,0,0,0.07) !important;
            color: inherit !important;
            cursor: pointer !important;
        }

        .qchat-audio-mini-play {
            width: 30px !important;
            height: 30px !important;
        }

        /* qchat v55 compact audio stacked volume override */
        #messagesContainer .message .qchat-audio-mini-player .song-name .qchat-audio-title-copy-clone { display: none !important; }
        #messagesContainer .message .qchat-audio-mini-player.playing .song-name.qchat-audio-title-overflow .qchat-audio-title-copy-clone { display: inline-block !important; }
        #messagesContainer .message .qchat-audio-mini-controls {
            display: grid !important;
            grid-template-columns: 26px 30px 26px !important;
            grid-template-areas: "volume volume volume" "prev play next" "range range range" !important;
            align-items: center !important;
            justify-items: center !important;
            column-gap: 4px !important;
            row-gap: 3px !important;
            width: 112px !important;
            max-width: 0 !important;
            max-height: 0 !important;
        }
        #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls,
        #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
        #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls {
            max-width: 122px !important;
            max-height: 94px !important;
        }
        #messagesContainer .message .qchat-audio-volume-wrap { display: contents !important; }
        #messagesContainer .message .qchat-audio-mini-volume { grid-area: volume !important; }
        #messagesContainer .message .qchat-audio-mini-controls .prev { grid-area: prev !important; }
        #messagesContainer .message .qchat-audio-mini-controls .play { grid-area: play !important; }
        #messagesContainer .message .qchat-audio-mini-controls .next { grid-area: next !important; }
        #messagesContainer .message .qchat-audio-volume-range {
            grid-area: range !important;
            width: 108px !important;
            min-width: 108px !important;
            max-width: 108px !important;
            opacity: 1 !important;
            transform: none !important;
        }

        .qchat-audio-mini-progress .playhead {
            background: #0d6efd !important;
            opacity: 1 !important;
        }

        .qchat-audio-mini-progress .hover-playhead {
            background: rgba(13,110,253,0.18) !important;
        }

        .qchat-file-bundle-message[data-file-bundle-count="1"] .qchat-file-bundle-grid {
            grid-template-columns: minmax(0, 1fr);
            width: min(170px, 100%);
        }

        .qchat-file-bundle-message[data-file-bundle-count="2"] .qchat-file-bundle-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: min(348px, 100%);
        }

        .qchat-file-bundle-message[data-file-bundle-count="3"] .qchat-file-bundle-grid,
        .qchat-file-bundle-message[data-file-bundle-count="4"] .qchat-file-bundle-grid,
        .qchat-file-bundle-message[data-file-bundle-count="5"] .qchat-file-bundle-grid,
        .qchat-file-bundle-message[data-file-bundle-count="6"] .qchat-file-bundle-grid,
        .qchat-file-bundle-message[data-file-bundle-count="7"] .qchat-file-bundle-grid,
        .qchat-file-bundle-message[data-file-bundle-count="8"] .qchat-file-bundle-grid,
        .qchat-file-bundle-message[data-file-bundle-count="9"] .qchat-file-bundle-grid,
        .qchat-file-bundle-message[data-file-bundle-count="10"] .qchat-file-bundle-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            width: min(486px, 100%);
        }

        .qchat-file-bundle-grid.qchat-file-bundle-grid-one:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="1"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]) {
            grid-template-columns: minmax(0, 1fr) !important;
            width: min(170px, 100%) !important;
        }

        .qchat-file-bundle-grid.qchat-file-bundle-grid-two:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="2"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]) {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            width: min(348px, 100%) !important;
        }

        .qchat-file-bundle-grid.qchat-file-bundle-grid-many:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="3"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="4"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="5"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="6"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="7"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="8"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="9"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
        .qchat-file-bundle-grid[data-file-group-count="10"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]) {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            width: min(486px, 100%) !important;
        }

        .message.sent .qchat-file-bundle-grid {
            margin-left: auto;
            margin-right: 0;
            justify-content: end;
        }

        .qchat-file-bundle-grid .qchat-file-bundle-item {
            min-width: 0;
            overflow: hidden;
            border-radius: 12px;
        }

        .qchat-file-bundle-grid .file-preview.image-preview {
            width: 100%;
            min-width: 0;
        }



        /* v150: single chat photos keep their aspect ratio; they are not cropped as square thumbnails. */
        #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"]:not(.profile-blog-gallery-tile),
        #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"]:not(.profile-blog-gallery-tile),
        #messagesContainer .message .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"],
        #messagesContainer .message .qchat-file-bundle-grid-images[data-file-group-count="1"][data-qchat-album-layout="tg-single"],
        #messagesContainer .message .qchat-file-bundle-grid-images[data-file-group-count="1"] > .qchat-file-bundle-item,
        #messagesContainer .message .qchat-file-bundle-grid-images[data-file-group-count="1"] .file-preview.image-preview,
        #messagesContainer .message .qchat-file-bundle-grid-images[data-file-group-count="1"] .qchat-chat-image-tile {
            width: min(var(--qchat-single-preview-width, var(--qchat-album-width, 300px)), 74vw, calc(100vw - 88px)) !important;
            max-width: min(var(--qchat-single-preview-width, var(--qchat-album-width, 300px)), 74vw, calc(100vw - 88px)) !important;
            aspect-ratio: var(--qchat-single-ratio, var(--qchat-album-ratio, 1)) !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: min(420px, 62vh) !important;
            overflow: hidden !important;
        }

        #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"] > img.chat-image-preview,
        #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"] > img.chat-image-preview,
        #messagesContainer .message .qchat-file-bundle-grid-images[data-file-group-count="1"] img.chat-image-preview,
        #messagesContainer .message .qchat-file-bundle-grid-images[data-file-group-count="1"] .chat-image-preview {
            width: 100% !important;
            height: 100% !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
            object-position: center !important;
            background: rgba(0,0,0,0.035) !important;
        }

        .chat-image-preview-counter {
            font-size: 0.78rem;
            color: rgba(255, 255, 255, 0.68);
        }

        /* v177: fullscreen image preview must fit inside the modal viewport. */
        #chatImagePreviewModal .modal-dialog {
            width: auto !important;
            max-width: min(96vw, 1400px) !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        #chatImagePreviewModal .modal-content {
            max-height: 96vh !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
        }

        #chatImagePreviewModal .modal-header,
        #chatImagePreviewModal .modal-footer {
            flex: 0 0 auto !important;
        }

        #chatImagePreviewModal .chat-image-preview-body {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow: hidden !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0.75rem !important;
        }

        .chat-image-preview-modal-img {
            display: block !important;
            width: auto !important;
            height: auto !important;
            max-width: calc(96vw - 48px) !important;
            max-height: calc(96vh - 150px) !important;
            object-fit: contain !important;
            object-position: center center !important;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        .chat-image-preview-modal-img.chat-image-audio-cover-modal-img {
            width: min(520px, calc(96vh - 150px), calc(96vw - 48px)) !important;
            height: min(520px, calc(96vh - 150px), calc(96vw - 48px)) !important;
            max-width: calc(96vw - 48px) !important;
            max-height: calc(96vh - 150px) !important;
            object-fit: contain !important;
            border-radius: 16px;
            background: rgba(255,255,255,0.035);
        }

        .chat-image-nav {
            position: absolute;
            top: 50%;
            z-index: 5;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.88;
            transform: translateY(-50%);
        }

        .chat-image-nav-prev {
            left: 14px;
        }

        .chat-image-nav-next {
            right: 14px;
        }

        .chat-image-nav.d-none {
            display: none !important;
        }

        @media (max-width: 575.98px) {
            .file-preview.image-preview {
                width: min(148px, 44vw);
                min-height: 0;
            }

            #messagesContainer .message .file-preview.image-preview .chat-image-preview,
            #messagesContainer .message .qchat-chat-image-tile .chat-image-preview {
                width: 100% !important;
                height: 100% !important;
                min-width: 100% !important;
                min-height: 100% !important;
                max-width: none !important;
                max-height: none !important;
                object-fit: cover !important;
                object-position: center !important;
            }

            .qchat-file-bundle-grid,
            .qchat-file-bundle-message[data-file-bundle-count="3"] .qchat-file-bundle-grid,
            .qchat-file-bundle-message[data-file-bundle-count="4"] .qchat-file-bundle-grid,
            .qchat-file-bundle-message[data-file-bundle-count="5"] .qchat-file-bundle-grid,
            .qchat-file-bundle-message[data-file-bundle-count="6"] .qchat-file-bundle-grid,
            .qchat-file-bundle-message[data-file-bundle-count="7"] .qchat-file-bundle-grid,
            .qchat-file-bundle-message[data-file-bundle-count="8"] .qchat-file-bundle-grid,
            .qchat-file-bundle-message[data-file-bundle-count="9"] .qchat-file-bundle-grid,
            .qchat-file-bundle-message[data-file-bundle-count="10"] .qchat-file-bundle-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                width: min(304px, 100%);
                max-width: 100% !important;
            }

            .qchat-file-bundle-message[data-file-bundle-count="1"] .qchat-file-bundle-grid {
                grid-template-columns: minmax(0, 1fr);
                width: min(148px, 100%);
            }


            .qchat-file-bundle-grid.qchat-file-bundle-grid-one:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="1"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]) {
                grid-template-columns: minmax(0, 1fr) !important;
                width: min(148px, 100%) !important;
            }

            .qchat-file-bundle-grid.qchat-file-bundle-grid-two:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid.qchat-file-bundle-grid-many:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="2"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="3"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="4"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="5"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="6"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="7"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="8"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="9"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]),
            .qchat-file-bundle-grid[data-file-group-count="10"]:not(.qchat-file-bundle-grid-images[data-qchat-album-layout]) {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                width: min(304px, 100%) !important;
                max-width: 100% !important;
            }
        }


/* qchat v81: Telegram-like 4-photo album grid for chat image bundles. */
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]),
#messagesContainer .message .qchat-file-bundle-message[data-file-bundle-count="4"] .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 3.337fr) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 2px !important;
    width: 360px !important;
    max-width: min(360px, calc(100vw - 96px)) !important;
    aspect-ratio: 360 / 275 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}

#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) > .qchat-file-bundle-item:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) > .qchat-file-bundle-item:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) > .qchat-file-bundle-item:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) > .qchat-file-bundle-item:nth-child(4) {
    grid-column: 3 !important;
    grid-row: 2 !important;
}

#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) > .qchat-file-bundle-item,
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) .file-preview.image-preview,
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) .qchat-chat-image-tile {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) img,
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) .chat-image-preview {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
}

#messagesContainer .message.sent .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"] {
    margin-left: auto !important;
    margin-right: 0 !important;
}

#messagesContainer .message.received .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"] {
    margin-left: 0 !important;
    margin-right: auto !important;
}

#messagesContainer .message .qchat-file-bundle-group-image,
#messagesContainer .message .qchat-file-bundle-group-image .qchat-file-bundle-grid-images,
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images,
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="1"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] {
    width: 300px !important;
    max-width: min(300px, calc(100vw - 96px)) !important;
}

#messagesContainer .message:has(.qchat-file-bundle-group-image) .message-bubble {
    max-width: min(380px, 100%) !important;
}

/* qchat saved blog cards: override the generic 360px chat-image cap.
   Saved blog cards in messages must use the normal 50% message lane uniformly,
   so 3-photo and 5+ photo blog forwards have the same available width. */
#messagesContainer .message:has(.message-content > .saved-profile-blog-post):has(.qchat-file-bundle-grid-images) > .d-flex {
    width: var(--qchat-message-lane-width, 50%) !important;
    max-width: var(--qchat-message-lane-width, 50%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#messagesContainer .message:has(.message-content > .saved-profile-blog-post):has(.qchat-file-bundle-grid-images) .message-bubble,
#messagesContainer .message:has(.message-content > .saved-profile-blog-post):has(.qchat-file-bundle-grid-images) .message-content-wrapper,
#messagesContainer .message:has(.message-content > .saved-profile-blog-post):has(.qchat-file-bundle-grid-images) .message-content,
#messagesContainer .message:has(.message-content > .saved-profile-blog-post):has(.qchat-file-bundle-grid-images) .saved-profile-blog-post {
    flex: 1 1 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-group-image,
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-group-image .qchat-file-bundle-grid-images,
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid.qchat-file-bundle-grid-images,
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"],
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"],
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 3.337fr) minmax(0, 1fr) !important;
    aspect-ratio: 420 / 361 !important;
    height: auto !important;
    overflow: hidden !important;
}
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(1) { grid-column: 1 / -1 !important; grid-row: 1 !important; }
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }

#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-left"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    aspect-ratio: 420 / 420 !important;
    height: auto !important;
    overflow: hidden !important;
}
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-left"] > :nth-child(1) { grid-column: 1 !important; grid-row: 1 / 3 !important; }
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-left"] > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-left"] > :nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }

/* QChat canonical source-media layout v295.
 * Replaces legacy v143/v146/v151/v173-v176 runtime <style>/MutationObserver patches.
 * Layout changes are CSS-driven; JS only records real image dimensions after load.
 */
html body #messagesContainer {
    overflow-x: hidden !important;
}

html body #messagesContainer .message:has(.qchat-chat-blog-image-host) {
    overflow-x: clip !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message:has(.qchat-chat-blog-image-host) > .d-flex {
    width: fit-content !important;
    max-width: min(100%, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    gap: var(--qchat-message-row-gap, 8px) !important;
    flex: 0 1 auto !important;
    align-items: flex-end !important;
}

html body #messagesContainer .message.sent:has(.qchat-chat-blog-image-host) > .d-flex {
    margin-left: auto !important;
    margin-right: 0 !important;
    /* Sent rows use row-reverse; flex-start keeps the compact media row on the right. */
    justify-content: flex-start !important;
}

html body #messagesContainer .message.received:has(.qchat-chat-blog-image-host) > .d-flex {
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
}

html body #messagesContainer .message:has(.qchat-chat-blog-image-host) .message-bubble,
html body #messagesContainer .message:has(.qchat-chat-blog-image-host) .message-content-wrapper,
html body #messagesContainer .message:has(.qchat-chat-blog-image-host) .message-content,
html body #messagesContainer .message:has(.qchat-chat-blog-image-host) .decrypted-file-content {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

html body #messagesContainer .message:has(.qchat-chat-blog-image-host) .message-bubble {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body #messagesContainer .message:has(.qchat-chat-blog-image-host) .message-content-wrapper {
    display: block !important;
}

html body #messagesContainer .message:has(.qchat-chat-blog-image-host) .message-footer {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}

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

html body #messagesContainer .qchat-chat-blog-single-image-host,
html body #messagesContainer .qchat-chat-blog-single-image-host .qchat-chat-blog-file-bundle-message,
html body #messagesContainer .qchat-chat-blog-single-image-host .qchat-chat-blog-file-bundle-groups,
html body #messagesContainer .qchat-chat-blog-single-image-host .qchat-chat-blog-gallery-group,
html body #messagesContainer .qchat-chat-blog-single-image-host .qchat-chat-blog-gallery {
    /* The source renderer/runtime owns the exact lone-image lane. Do not force
       every portrait/landscape preview to 300px, otherwise its fixed source
       height no longer matches the real image ratio. */
    max-width: min(300px, 100%) !important;
}

/* qchat v314: runtime-static.css still carries the legacy Profile Blog rule
   `.profile-blog-attachments .profile-blog-gallery[data-file-group-count="1"]`
   with width:170px!important. Chat source previews intentionally reuse those
   Profile Blog classes, so that later rule squeezed a 300px single-image lane
   down to 170px while the message/file header stayed at the correct width.
   Keep the source-rendered chat gallery pinned to its runtime-sized host. */
html body #messagesContainer .qchat-chat-blog-single-image-host .qchat-chat-blog-gallery[data-file-group-count="1"] {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body #messagesContainer .qchat-chat-blog-multi-image-host,
html body #messagesContainer .qchat-chat-blog-multi-image-host .qchat-chat-blog-file-bundle-message,
html body #messagesContainer .qchat-chat-blog-multi-image-host .qchat-chat-blog-file-bundle-groups,
html body #messagesContainer .qchat-chat-blog-multi-image-host .qchat-chat-blog-gallery-group,
html body #messagesContainer .qchat-chat-blog-multi-image-host .qchat-chat-blog-gallery {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
}

html body #messagesContainer .qchat-chat-blog-gallery {
    overflow: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-chat-blog-gallery-item,
html body #messagesContainer .qchat-chat-blog-gallery-tile,
html body #messagesContainer .qchat-chat-blog-attachment-preview {
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-chat-blog-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* A lone image is a preview, not an album tile: keep the full source visible.
   Its natural-ratio variable is refreshed from naturalWidth/naturalHeight by
   qchat-chat-media-boundary.js after decryption/blob hydration. */
html body #messagesContainer .qchat-chat-blog-single-image-host .qchat-chat-blog-image {
    object-fit: contain !important;
}

/* Direct sent media no longer requires the qchat-sent-media-fit-row class or a DOM observer. */
html body #messagesContainer .message.sent:has(.message-content > .file-preview.image-preview.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
html body #messagesContainer .message.sent:has(.decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
html body #messagesContainer .message.sent:has(.qchat-file-bundle-grid-images):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex {
    width: fit-content !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-items: flex-end !important;
    gap: var(--qchat-message-row-gap, 8px) !important;
    box-sizing: border-box !important;
}

@media (max-width: 520.98px) {
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body #messagesContainer .message:has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body #messagesContainer .message:has(.qchat-file-bundle-group-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body #messagesContainer .message:has(.qchat-file-bundle-list-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
    html body #messagesContainer .message:has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
    html body #messagesContainer .message:has(.qchat-file-bundle-group-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
    html body #messagesContainer .message:has(.qchat-file-bundle-list-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-bubble,
    html body #messagesContainer .message:has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-bubble,
    html body #messagesContainer .message:has(.qchat-file-bundle-group-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-bubble,
    html body #messagesContainer .message:has(.qchat-file-bundle-list-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-bubble {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: calc(100% - 36px) !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* Saved profile/blog mini-audio uses a stable content-height lane without an observer. */
html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-mini-player, .saved-profile-blog-post .qchat-audio-mini-group) > .d-flex {
    width: fit-content !important;
    max-width: min(574px, 100%) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-end !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-mini-player, .saved-profile-blog-post .qchat-audio-mini-group) .message-bubble,
html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-mini-player, .saved-profile-blog-post .qchat-audio-mini-group) .message-content-wrapper,
html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-mini-player, .saved-profile-blog-post .qchat-audio-mini-group) .message-content,
html body #messagesContainer .saved-profile-blog-post:has(.qchat-audio-mini-player, .qchat-audio-mini-group) {
    width: min(calc(464px + 2rem + 2px), 100%) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .saved-profile-blog-post:has(.qchat-audio-mini-player, .qchat-audio-mini-group) :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,
    .qchat-file-bundle-group-audio,
    .profile-blog-audio-group,
    .profile-blog-audio-list,
    .qchat-file-bundle-list-audio,
    .qchat-audio-mini-group,
    .qchat-audio-mini-player
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
}


/* QChat v311: strict CSP fallback for dynamic media ratios.
   style-src-attr 'none' forbids CSSOM writes to element.style, so image geometry
   is selected from bounded data-attribute buckets instead. */
html body #messagesContainer .qchat-chat-blog-gallery[data-qchat-single-ratio-bucket="portrait"] {
    width: min(200px, 100%) !important;
    max-width: min(200px, 100%) !important;
    aspect-ratio: 0.72 !important;
}
html body #messagesContainer .qchat-chat-blog-gallery[data-qchat-single-ratio-bucket="square"] {
    width: min(260px, 100%) !important;
    max-width: min(260px, 100%) !important;
    aspect-ratio: 1 !important;
}
html body #messagesContainer .qchat-chat-blog-gallery[data-qchat-single-ratio-bucket="landscape"] {
    width: min(300px, 100%) !important;
    max-width: min(300px, 100%) !important;
    aspect-ratio: 1.55 !important;
}
html body #messagesContainer .qchat-chat-blog-gallery[data-qchat-pair-ratio-buckets="portrait-landscape"] {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) !important;
}
html body #messagesContainer .qchat-chat-blog-gallery[data-qchat-pair-ratio-buckets="landscape-portrait"] {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr) !important;
}
html body #messagesContainer .qchat-chat-blog-gallery[data-qchat-pair-ratio-buckets="portrait-portrait"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    aspect-ratio: 1.25 !important;
}
html body #messagesContainer .qchat-chat-blog-gallery[data-qchat-pair-ratio-buckets="landscape-landscape"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    aspect-ratio: 2.4 !important;
}

.qchat-history-unavailable-placeholder {
    display: grid;
    gap: .35rem;
    justify-items: start;
}

/* Deferred video tiles stay as thumbnails. Playback always opens the dedicated
   video viewer, so the chat tile never turns into an inline native <video>. */
html body .qchat-deferred-video {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #111 !important;
}

html body .qchat-deferred-video .qchat-deferred-video-play {
    position: relative !important;
    z-index: 2 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 34px !important;
    line-height: 1 !important;
    color: var(--primary-color) !important;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .8));
}

html body .qchat-deferred-video[aria-busy="true"] .qchat-deferred-video-play {
    font-size: 0 !important;
    width: 34px !important;
    height: 34px !important;
    border: 3px solid rgba(255, 255, 255, .35) !important;
    border-top-color: var(--primary-color) !important;
    border-radius: 50% !important;
    animation: spinner-border .75s linear infinite !important;
}

html body .qchat-deferred-video .qchat-video-poster {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}

/* QChat v315: mixed image/video bundles share one visual album.
   Video tiles intentionally look like photo tiles; tapping one opens the real player. */
html body #messagesContainer .qchat-file-bundle-grid-images .qchat-file-bundle-item-visual-video,
html body #messagesContainer .qchat-file-bundle-grid-images .qchat-file-bundle-item-video {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-file-bundle-grid-images .qchat-deferred-video {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #111 !important;
}

html body #messagesContainer .qchat-file-bundle-grid-images .qchat-file-bundle-video-tile {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #111 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

html body #messagesContainer .qchat-file-bundle-grid-images .qchat-file-bundle-video-thumb {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    pointer-events: none !important;
    background: #111 !important;
}

html body #messagesContainer .qchat-file-bundle-video-badge {
    position: absolute !important;
    right: 7px !important;
    bottom: 7px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .62) !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3) !important;
}

html body #messagesContainer .qchat-file-bundle-video-placeholder-icon {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 28px !important;
    pointer-events: none !important;
}

#chatVideoPreviewModal .qchat-video-preview-modal-dialog {
    width: auto !important;
    max-width: min(96vw, 1400px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#chatVideoPreviewModal .qchat-video-preview-modal-content {
    max-height: 96vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#chatVideoPreviewModal .qchat-video-preview-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: .75rem !important;
    background: #000 !important;
}

#chatVideoPreviewModal .qchat-video-preview-modal-player {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(96vw - 48px) !important;
    max-height: calc(96vh - 150px) !important;
    object-fit: contain !important;
    background: #000 !important;
}

@media (max-width: 767.98px) {
    #chatVideoPreviewModal .modal-dialog {
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        margin: 0 !important;
    }

    #chatVideoPreviewModal .qchat-video-preview-modal-content {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    #chatVideoPreviewModal .qchat-video-preview-modal-player {
        max-width: 100vw !important;
        max-height: calc(100dvh - 126px) !important;
    }
}

/* QChat v393: deterministic four-photo geometry on phones.
   Smart desktop layouts (hero-top/hero-left) are attractive on wide screens,
   but WebKit can make the hero cell dominate the narrow chat lane. Match the
   compact Android presentation on all mobile engines: a stable 2x2 square. */
@media (max-width: 767.98px) {
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"],
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="4"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 2px !important;
        overflow: hidden !important;
    }

    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"] > :nth-child(1),
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="4"] > :nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"] > :nth-child(2),
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="4"] > :nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"] > :nth-child(3),
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="4"] > :nth-child(3) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"] > :nth-child(4),
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="4"] > :nth-child(4) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
}


/* QChat v400: deterministic five-photo geometry on narrow phones.
   WebKit can collapse the dynamic VH row weights into very shallow strips.
   Keep upload order, but pin the five visible cells to a stable 1+2+2 grid. */
@media (max-width: 767.98px) {
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="5"],
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="5"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        aspect-ratio: 1 / 1.18 !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 2px !important;
        overflow: hidden !important;
    }

    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="5"] > :nth-child(1),
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="5"] > :nth-child(1) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="5"] > :nth-child(2),
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="5"] > :nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="5"] > :nth-child(3),
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="5"] > :nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="5"] > :nth-child(4),
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="5"] > :nth-child(4) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
    html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="5"] > :nth-child(5),
    html body #messagesContainer .profile-blog-gallery.qchat-chat-blog-gallery[data-file-group-count="5"] > :nth-child(5) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }
}