/* QChat static runtime UI styles v299
 * Migrated from legacy JavaScript <style> installers.
 * Keep this file self-hosted so strict CSP never needs style-src unsafe-inline for these rules.
 */

/* migrated from app.js */
html, body {
    min-height: 100%;
}

#authSection {
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

#authSection.hidden {
    display: none !important;
}

#authSection .card,
#authSection .auth-card,
#authSection .login-card,
#authSection .register-card {
    max-height: none;
}

.pending-device-approval-card {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-height: 760px) {
    #authSection,
    #authSection .min-vh-100,
    #authSection .vh-100 {
        align-items: flex-start !important;
    }

    #authSection .container,
    #authSection .container-fluid {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* migrated from app.js */
.profile-blog-pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    font-size: 0.74rem;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    color: #8a5a00;
    background: rgba(255, 193, 7, 0.16);
    border: 1px solid rgba(255, 193, 7, 0.28);
}

.toggle-profile-blog-pin.active {
    color: inherit;
    border-color: var(--bs-secondary-border-subtle, #6c757d);
    background: rgba(108, 117, 125, 0.08);
}

.profile-blog-comments {
    margin-left: 46px;
}

.profile-blog-comments-toggle {
    cursor: pointer;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.profile-blog-comments-toggle:hover,
.profile-blog-comments-toggle:focus {
    color: var(--bs-primary);
    text-decoration: underline;
}

.profile-blog-comments-body {
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
}

.profile-blog-comments-list {
    margin-top: 6px;
}

.profile-blog-comment {
    font-size: 0.875rem;
    background: var(--bs-body-bg);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.profile-blog-comment:last-child {
    margin-bottom: 0;
}

.profile-blog-comment .profile-blog-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 12px !important;
}

.profile-blog-comment .profile-blog-author .profile-user-link {
    font-size: 0.875rem;
}

.profile-blog-comment-date {
    font-size: 0.75rem;
    line-height: 1.1;
}

.profile-blog-comment-content {
    font-size: 0.875rem;
    line-height: 1.35;
    margin-left: 36px;
    color: var(--bs-body-color);
}

.profile-blog-comment-actions {
    margin-left: 36px;
    margin-top: 4px;
}

.profile-blog-comment-replies {
    margin-left: 36px;
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid rgba(0, 0, 0, 0.08);
}

.profile-blog-comment-reply {
    background: rgba(0, 0, 0, 0.018);
}

.profile-blog-reply-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

.profile-blog-comment-form {
    margin-top: 8px;
}

.profile-blog-attachments {
    display: grid;
    gap: 8px;
    margin: 8px 0 12px 46px;
}

.profile-blog-attachment {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.018);
}

.profile-blog-attachment.profile-blog-audio-attachment {
    border: 0;
    padding: 0;
    background: transparent;
}

.profile-blog-audio-attachment .profile-blog-attachment-preview {
    margin: 0;
}

.profile-blog-file-list,
.profile-blog-file-list .profile-blog-audio-attachment,
.profile-blog-file-list .profile-blog-audio-attachment .profile-blog-attachment-preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.profile-blog-file-list .profile-blog-audio-attachment .profile-blog-attachment-preview img.audio-cover,
.profile-blog-file-list .profile-blog-attachment-preview .audio_card .img-wrap img.audio-cover {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin-top: 0;
    border-radius: inherit;
}

.profile-blog-file-list .profile-blog-audio-attachment .profile-blog-attachment-preview .audio_card {
    margin-top: 0;
}

.profile-blog-file-list .profile-blog-audio-attachment .profile-blog-attachment-preview .current-song {
    margin-top: 0;
}

.profile-blog-file-list .profile-blog-attachment-preview .audio_card,
.profile-blog-file-list .profile-blog-audio-attachment .profile-blog-attachment-preview .audio_card,
.profile-blog-file-list .profile-blog-attachment-preview .current-song,
.profile-blog-file-list .profile-blog-audio-attachment .profile-blog-attachment-preview .current-song,
.profile-blog-file-list .profile-blog-attachment-preview .blog-audio-current,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-group,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-file-bundle-group-audio,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-file-bundle-list-audio {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Blog audio uses the same compact player box as message audio. The old
   .current-song/player styles are global, so keep these selectors stronger. */
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-group,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-file-bundle-group-audio {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-file-bundle-list,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-file-bundle-list-audio {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.current-song,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    max-height: none !important;
    padding: 7px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,0.045) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-file-bundle-preview-icon,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-art {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    transform-origin: center center !important;
    flex: 0 0 34px !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-cover {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 999px !important;
    transform-origin: center center !important;
    margin: 0 !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-meta,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-file-bundle-preview-meta {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

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

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-progress {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 6px !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 0.68rem !important;
    opacity: 0.82 !important;
    margin-top: 2px !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-progress .timeline {
    min-width: 44px !important;
    width: 100% !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,0.16) !important;
    position: relative !important;
    cursor: pointer !important;
    overflow: visible !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-progress .playhead {
    position: relative !important;
    z-index: 2 !important;
    height: 5px !important;
    width: var(--qchat-audio-progress, 0%) !important;
    border-radius: 999px !important;
    background: #0d6efd !important;
    box-shadow: 0 0 5px rgba(13,110,253,0.28) !important;
    opacity: 1 !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-progress .hover-playhead {
    position: absolute !important;
    z-index: 1 !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--qchat-audio-hover-progress, 0%) !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(13,110,253,0.38) !important;
    pointer-events: none !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    overflow: hidden !important;
    opacity: 0 !important;
    max-width: 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) !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:hover .qchat-audio-mini-controls,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls {
    opacity: 1 !important;
    max-width: 232px !important;
    transform: translateX(0) scale(1) !important;
    pointer-events: auto !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .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;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-play {
    width: 30px !important;
    height: 30px !important;
}

@media (max-width: 575.98px) {
    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player {
        gap: 6px !important;
        padding: 6px !important;
    }

    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-file-bundle-preview-icon,
    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-art,
    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-cover {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        flex-basis: 30px !important;
    }

    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-controls {
        gap: 3px !important;
    }

    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.72rem !important;
    }

    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-play {
        width: 28px !important;
        height: 28px !important;
    }

    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-progress {
        grid-template-columns: auto minmax(36px, 1fr) auto !important;
        gap: 4px !important;
        font-size: 0.64rem !important;
    }

    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-progress .timeline {
        min-width: 36px !important;
    }
}

.profile-blog-file-list .profile-blog-attachment-preview .current-song .song-name,
.profile-blog-file-list .profile-blog-attachment-preview .current-song .song-autor,
.profile-blog-file-list .profile-blog-attachment-preview .blog-audio-current .song-name,
.profile-blog-file-list .profile-blog-attachment-preview .blog-audio-current .song-autor {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-blog-file-list .profile-blog-attachment-preview .current-song .time,
.profile-blog-file-list .profile-blog-attachment-preview .current-song .timeline,
.profile-blog-file-list .profile-blog-attachment-preview .current-song .controls,
.profile-blog-file-list .profile-blog-attachment-preview .blog-audio-current .time,
.profile-blog-file-list .profile-blog-attachment-preview .blog-audio-current .timeline,
.profile-blog-file-list .profile-blog-attachment-preview .blog-audio-current .controls {
    max-width: 100%;
    min-width: 0;
}



.profile-blog-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.profile-blog-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    min-height: 118px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-blog-gallery-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    color: var(--bs-secondary-color);
}

.profile-blog-gallery-tile .profile-blog-attachment-preview {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: inherit;
    overflow: hidden;
}

.profile-blog-gallery-tile img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.profile-blog-gallery-tile:hover img {
    transform: scale(1.025);
    filter: brightness(0.96);
}

.profile-blog-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 7px 6px;
    font-size: 0.72rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.profile-blog-file-list {
    display: grid;
    gap: 8px;
}


.profile-blog-video-attachment,
.profile-blog-video-list .profile-blog-video-attachment.qchat-file-bundle-item {
    display: block !important;
    width: fit-content;
    max-width: min(320px, 100%);
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.profile-blog-video-attachment .profile-blog-attachment-preview {
    display: block !important;
    width: fit-content;
    max-width: min(320px, 100%);
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.profile-blog-video-attachment .profile-blog-attachment-preview video,
.profile-blog-video-list .profile-blog-attachment-preview video {
    display: block !important;
    width: auto !important;
    max-width: min(320px, 100%) !important;
    max-height: 320px !important;
    border-radius: 12px !important;
    background: #000;
    margin: 0 !important;
    object-fit: contain;
}

.profile-blog-video-list .profile-blog-video-attachment .file-name {
    display: block !important;
    width: 100%;
    max-width: 320px;
    margin-top: 4px;
    font-size: 0.875rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.profile-blog-video-attachment .qchat-file-bundle-preview-size,
.profile-blog-video-attachment .profile-blog-download-attachment-btn {
    display: none !important;
}

.profile-blog-video-attachment > .d-flex.align-items-center.gap-2.mt-1.min-width-0 {
    display: block !important;
    margin-top: 4px !important;
}

.profile-blog-video-list .profile-blog-video-attachment .profile-blog-attachment-preview + .file-name {
    display: block !important;
    clear: both;
}




/* Blog video attachments must look exactly like message video previews.
   Some legacy qchat-file-bundle-preview-item rules are injected as flex rows,
   so remove the flex layout at a very specific scope and also handle cached DOM. */
.profile-blog-video-list > .profile-blog-video-attachment,
.profile-blog-video-list > .profile-blog-video-attachment.qchat-file-bundle-item,
.profile-blog-video-list > .profile-blog-video-attachment.qchat-file-bundle-preview-item,
.profile-blog-video-list > .profile-blog-video-attachment.file-preview.video-preview,
.profile-blog-attachments .profile-blog-video-list > .profile-blog-video-attachment.file-preview.video-preview {
    display: block !important;
    flex-direction: initial !important;
    align-items: initial !important;
    gap: 0 !important;
    width: fit-content !important;
    max-width: min(320px, 100%) !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.profile-blog-video-list > .profile-blog-video-attachment > .profile-blog-attachment-preview {
    display: block !important;
    width: fit-content !important;
    max-width: min(320px, 100%) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.profile-blog-video-list > .profile-blog-video-attachment > .profile-blog-attachment-preview video {
    display: block !important;
    max-width: min(320px, 100%) !important;
    max-height: 320px !important;
    border-radius: 12px !important;
    margin: 0 !important;
    background: #000 !important;
}

.profile-blog-video-list > .profile-blog-video-attachment > .file-name {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    flex: none !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.profile-blog-file-list .profile-blog-attachment-preview img,
.profile-blog-file-list .profile-blog-attachment-preview video {
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    object-fit: contain;
    display: block;
    margin-top: 6px;
}

.profile-blog-attachment-preview audio {
    width: 100%;
    margin-top: 6px;
}


/* Blog attachment bundles mirror chat message bundles: same width, grid and thumbnail behavior. */
.profile-blog-attachments.qchat-profile-blog-bundle-host {
    display: grid;
    gap: 10px;
    width: fit-content;
    min-width: 0;
    max-width: min(500px, 100%);
    margin: 8px 0 12px 46px;
    box-sizing: border-box;
}

.profile-blog-attachments .profile-blog-file-bundle-message,
.profile-blog-attachments .qchat-file-bundle-message {
    display: grid !important;
    gap: 10px !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(500px, 100%) !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments .profile-blog-file-bundle-groups,
.profile-blog-attachments .qchat-file-bundle-groups {
    display: grid !important;
    gap: 10px !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

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

.profile-blog-attachments .qchat-file-bundle-group,
.profile-blog-attachments .profile-blog-gallery-group,
.profile-blog-attachments .profile-blog-file-group,
.profile-blog-attachments .profile-blog-audio-group {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments .qchat-file-bundle-group-audio,
.profile-blog-attachments .profile-blog-audio-group,
.profile-blog-attachments .profile-blog-audio-list,
.profile-blog-attachments .qchat-file-bundle-list-audio {
    width: min(360px, 100%) !important;
    max-width: 100% !important;
}

/* When a blog bundle contains an audio mini-player, mirror the chat lane behavior:
   the bundle itself takes the available blog lane and the player fills it.
   Without this override the old blog list rule caps audio at 360px, so it looks
   noticeably narrower than the same bundle in a message. */
.profile-blog-attachments.qchat-profile-blog-bundle-host:has(.qchat-audio-mini-player) {
    width: min(464px, 100%) !important;
    max-width: min(464px, 100%) !important;
}

.profile-blog-attachments:has(.qchat-audio-mini-player) .profile-blog-file-bundle-message,
.profile-blog-attachments:has(.qchat-audio-mini-player) .qchat-file-bundle-message,
.profile-blog-attachments:has(.qchat-audio-mini-player) .profile-blog-file-bundle-groups,
.profile-blog-attachments:has(.qchat-audio-mini-player) .qchat-file-bundle-groups,
.profile-blog-attachments:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio,
.profile-blog-attachments:has(.qchat-audio-mini-player) .profile-blog-audio-group,
.profile-blog-attachments:has(.qchat-audio-mini-player) .profile-blog-audio-list,
.profile-blog-attachments:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio,
.profile-blog-attachments:has(.qchat-audio-mini-player) .profile-blog-audio-attachment,
.profile-blog-attachments:has(.qchat-audio-mini-player) .profile-blog-audio-attachment > .profile-blog-attachment-preview,
.profile-blog-attachments:has(.qchat-audio-mini-player) .qchat-audio-mini-group,
.profile-blog-attachments: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;
}

.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    max-width: 100% !important;
    justify-content: start !important;
}

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

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

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

.profile-blog-attachments .profile-blog-gallery-item.qchat-file-bundle-item {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    background: transparent !important;
}

.profile-blog-attachments .profile-blog-gallery-tile.qchat-chat-image-tile,
.profile-blog-attachments .profile-blog-gallery-tile.file-preview.image-preview {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 118px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    cursor: zoom-in !important;
}

.profile-blog-attachments .profile-blog-gallery-tile .profile-blog-attachment-preview {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.profile-blog-attachments .profile-blog-gallery-tile img,
.profile-blog-attachments .profile-blog-gallery-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;
    display: block !important;
    border-radius: inherit !important;
    transition: transform 0.15s ease, filter 0.15s ease !important;
}

.profile-blog-attachments .profile-blog-gallery-tile:hover img,
.profile-blog-attachments .profile-blog-gallery-tile:hover .chat-image-preview {
    transform: scale(1.025);
    filter: brightness(0.96);
}

.profile-blog-attachments .profile-blog-gallery-tile .file-name,
.profile-blog-attachments .profile-blog-gallery-tile .file-meta {
    display: none !important;
}

.profile-blog-attachments .profile-blog-file-list.qchat-file-bundle-list {
    display: grid !important;
    gap: 8px !important;
    width: min(360px, 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}



/* Strong explicit blog-audio lane override. Do not rely on :has(): older/quirky
   browser builds can miss it, and the generic blog file-list rule below used to
   keep audio at min(360px, 100%). The chat bundle lane for 3+ thumbnails is
   486px, so blog audio must fill that same lane through every wrapper. */
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] {
    width: min(464px, 100%) !important;
    min-width: 0 !important;
    max-width: min(464px, 100%) !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .qchat-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .qchat-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .qchat-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .qchat-file-bundle-groups {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-audio-group,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-audio-group,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-audio-list,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-audio-list,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-audio-list.qchat-file-bundle-list,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-audio-list.qchat-file-bundle-list,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .qchat-file-bundle-list-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .qchat-file-bundle-list-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-audio-attachment,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-audio-attachment,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-audio-attachment > .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-audio-attachment > .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-attachment-preview > .qchat-file-bundle-group-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-attachment-preview > .qchat-file-bundle-group-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-attachment-preview > .qchat-audio-mini-group,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-attachment-preview > .qchat-audio-mini-group,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-attachment-preview .qchat-file-bundle-list-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-attachment-preview .qchat-file-bundle-list-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-attachment-preview .qchat-audio-mini-player,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-attachment-preview .qchat-audio-mini-player {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Single audio-only blog posts have no image grid to give the bundle a natural width,
   so keep that lane explicitly full-size as well. */
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-file-bundle-message[data-file-bundle-count="1"],
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-file-bundle-message[data-file-bundle-count="1"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 575.98px) {
    .profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio,
    .profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] {
        width: 100% !important;
        max-width: min(464px, 100%) !important;
        margin-left: 0 !important;
    }

    .profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-file-bundle-message,
    .profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-file-bundle-message,
    .profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-file-bundle-groups,
    .profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-file-bundle-groups {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

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

.profile-blog-attachments .profile-blog-downloadable-attachment.qchat-file-bundle-preview-item {
    cursor: pointer !important;
    transition: background-color 150ms ease, transform 150ms ease !important;
}

.profile-blog-attachments .profile-blog-downloadable-attachment.qchat-file-bundle-preview-item:hover,
.profile-blog-attachments .profile-blog-downloadable-attachment.qchat-file-bundle-preview-item:focus-visible {
    background: rgba(0,0,0,0.075) !important;
}

.profile-blog-attachments .profile-blog-downloadable-attachment.qchat-file-bundle-preview-item:active {
    transform: translateY(1px) !important;
}

.profile-blog-attachments .profile-blog-download-attachment-btn {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    opacity: 0.72 !important;
}

.profile-blog-attachments .profile-blog-downloadable-attachment:hover .profile-blog-download-attachment-btn,
.profile-blog-attachments .profile-blog-downloadable-attachment:focus-visible .profile-blog-download-attachment-btn,
.profile-blog-attachments .profile-blog-attachment-downloading .profile-blog-download-attachment-btn {
    opacity: 1 !important;
}

.profile-blog-attachments .profile-blog-audio-attachment.qchat-file-bundle-preview-item {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
}

.profile-blog-attachments .profile-blog-attachment-preview .qchat-audio-mini-group,
.profile-blog-attachments .profile-blog-attachment-preview .qchat-file-bundle-group-audio,
.profile-blog-attachments .profile-blog-attachment-preview .qchat-file-bundle-list-audio,
.profile-blog-attachments .profile-blog-attachment-preview .qchat-audio-mini-player {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 575.98px) {
    .profile-blog-attachments.qchat-profile-blog-bundle-host,
    .profile-blog-attachments.qchat-profile-blog-bundle-host:has(.qchat-audio-mini-player) {
        width: 100% !important;
        max-width: min(464px, 100%) !important;
        margin-left: 0;
    }

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

    .profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-one,
    .profile-blog-attachments .profile-blog-gallery[data-file-group-count="1"] {
        width: min(148px, 100%) !important;
    }
}

.profile-blog-composer-attachments {
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    padding: 8px;
    margin-top: 8px;
}

.profile-blog-selected-attachments {
    display: grid;
    gap: 8px;
}

.profile-blog-selected-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 8px;
    background: var(--bs-body-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.profile-blog-selected-attachment.dragging {
    opacity: 0.55;
    transform: scale(0.99);
}

.profile-blog-selected-attachment.drag-over {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.16);
}

.profile-blog-selected-attachment-drag-handle {
    width: 30px;
    min-width: 30px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.profile-blog-selected-attachment-drag-handle:active {
    cursor: grabbing;
}

.profile-blog-selected-attachment-preview {
    width: 58px;
    min-width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.045);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-blog-selected-attachment-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-blog-selected-attachment-icon {
    font-size: 1.35rem;
    color: var(--bs-secondary-color);
}

.profile-blog-selected-attachment-meta {
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.profile-blog-selected-attachment-name {
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-blog-selected-attachment-hint {
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remove-profile-blog-attachment {
    width: 30px;
    min-width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.profile-blog-notification-badge,
#profileBlogNotificationBadge {
    display: none !important;
}

.profile-blog-image-preview-modal .modal-dialog {
    max-width: min(1180px, calc(100vw - 24px));
}

.profile-blog-image-preview-body {
    min-height: 220px;
    overflow: hidden;
}

.profile-blog-image-preview-img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
}

.profile-blog-image-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    transform: translateY(-50%);
    opacity: 0.88;
}

.profile-blog-image-nav:hover {
    opacity: 1;
}

.profile-blog-image-nav:disabled {
    opacity: 0.25;
    pointer-events: none;
}

.profile-blog-image-nav-prev {
    left: 12px;
}

.profile-blog-image-nav-next {
    right: 12px;
}

.profile-blog-image-counter {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.profile-blog-post-focused {
    outline: 2px solid var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.18);
    transition: box-shadow 0.2s ease, outline-color 0.2s ease;
}

.profile-blog-link-actions,
.profile-blog-link-actions-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-blog-avatar[data-profile-avatar] {
    cursor: pointer;
}

#profileBlogVisitsStat.qchat-clickable-stat,
#profileBlogVisitsStat.qchat-clickable-stat * {
    cursor: pointer;
}

#profileBlogVisitsStat.qchat-clickable-stat {
    position: relative;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

#profileBlogVisitsStat.qchat-clickable-stat:hover,
#profileBlogVisitsStat.qchat-clickable-stat:focus {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    outline: none;
}

#profileBlogVisitsStat.qchat-clickable-stat .stat-label::after {
    content: "  ›";
    opacity: 0.7;
}

.qchat-blog-visitors-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

.qchat-blog-visitors-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    font-size: 0.84rem;
    font-weight: 600;
}

.qchat-blog-visitors-list {
    display: grid;
    gap: 10px;
}

.qchat-blog-visitor-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: var(--bs-body-bg);
    padding: 10px 12px;
}

.qchat-blog-visitor-count {
    width: fit-content;
    margin: 0 0 7px 42px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(var(--bs-success-rgb), 0.12);
    color: var(--bs-success);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.1;
}

.qchat-blog-visitor-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.qchat-blog-visitor-info {
    min-width: 0;
    flex: 1 1 auto;
}

.qchat-blog-visitor-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qchat-blog-visitor-meta {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    line-height: 1.2;
}

@media (max-width: 575.98px) {
    .qchat-blog-visitor-count {
        margin-left: 0;
    }
}

/* qchat v81: Telegram-like 4-photo album grid for profile/blog bundles.
   First image is a large hero tile; the other three form a compact bottom row. */
.profile-blog-attachments .profile-blog-gallery.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: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    aspect-ratio: 420 / 361 !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;
}

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

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

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

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

.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) > .profile-blog-gallery-item,
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) .profile-blog-gallery-tile,
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) .profile-blog-attachment-preview {
    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;
}

.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="4"]:not([data-qchat-album-layout]) img,
.profile-blog-attachments .profile-blog-gallery.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;
}


/* qchat v82: Telegram-like 3-photo album grid for profile/blog bundles.
   First image is a large hero tile; the other two form a compact bottom row. */
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 3.337fr) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 2px !important;
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    aspect-ratio: 420 / 361 !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;
}

.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]) > .profile-blog-gallery-item:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]) > .profile-blog-gallery-item:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

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

.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]) > .profile-blog-gallery-item,
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]) .profile-blog-gallery-tile,
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]) .profile-blog-attachment-preview {
    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;
}

.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]) img,
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]: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;
}


/* qchat v83: Telegram-like 5+ photo album overflow.
   First 4 photos stay visible; the 4th tile shows +N and the remaining photos stay in DOM for gallery navigation. */
.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] {
    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: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    aspect-ratio: 420 / 361 !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;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] > :nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] > :nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] > :nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] > :nth-child(4) {
    grid-column: 3 !important;
    grid-row: 2 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] > *,
.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] .file-preview.image-preview,
.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] .qchat-chat-image-tile,
.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] .profile-blog-gallery-tile,
.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] .profile-blog-attachment-preview {
    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;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] img,
.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] .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;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] .qchat-album-hidden,
.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] > [data-qchat-album-hidden="1"] {
    display: none !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] .qchat-album-more,
.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] > [data-qchat-album-more="1"] {
    position: relative !important;
    overflow: hidden !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] .qchat-album-more::after,
.qchat-file-bundle-grid-images[data-qchat-album-layout="telegram-overflow"] > [data-qchat-album-more="1"]::after {
    content: '+' attr(data-qchat-album-extra-count);
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.48) !important;
    color: #fff !important;
    font-size: clamp(1.45rem, 5vw, 2rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
    pointer-events: none !important;
}


/* qchat v83: Telegram-like smart album layout presets (count + media ratio driven). */
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] {
    display: grid !important;
    gap: 2px !important;
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !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;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] > *,
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] .file-preview.image-preview,
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] .qchat-chat-image-tile,
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] .profile-blog-gallery-tile,
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] .profile-blog-attachment-preview {
    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;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] img,
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] .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;
    display: block !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    aspect-ratio: 420 / 250 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    aspect-ratio: 420 / 470 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] {
    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;
}
.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; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-left"] {
    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;
}
.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; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-left"] > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
.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-file-bundle-grid-images[data-qchat-album-layout="tg-4-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    aspect-ratio: 1 / 1 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-top"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 3.337fr) minmax(0, 1fr) !important;
    aspect-ratio: 420 / 361 !important;
}
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-top"] > :nth-child(1) { grid-column: 1 / -1 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-top"] > :nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-top"] > :nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-top"] > :nth-child(4) { grid-column: 3 !important; grid-row: 2 !important; }

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-left"] {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    aspect-ratio: 420 / 465 !important;
}
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-left"] > :nth-child(1) { grid-column: 1 !important; grid-row: 1 / 4 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-left"] > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-left"] > :nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-4-hero-left"] > :nth-child(4) { grid-column: 2 !important; grid-row: 3 !important; }

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.65fr) minmax(0, 1fr) !important;
    aspect-ratio: 420 / 620 !important;
}
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(3) { grid-column: 1 / -1 !important; grid-row: 2 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; }

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, .92fr) minmax(0, 2.25fr) minmax(0, 1.05fr) !important;
    aspect-ratio: 420 / 620 !important;
}
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] > :nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] > :nth-child(2) { grid-column: 3 / 5 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] > :nth-child(3) { grid-column: 5 / 7 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] > :nth-child(4) { grid-column: 1 / 7 !important; grid-row: 2 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] > :nth-child(5) { grid-column: 1 / 4 !important; grid-row: 3 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] > :nth-child(6) { grid-column: 4 / 7 !important; grid-row: 3 !important; }

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, .95fr) minmax(0, 2fr) minmax(0, .95fr) !important;
    aspect-ratio: 420 / 650 !important;
}
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > :nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > :nth-child(2) { grid-column: 3 / 5 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > :nth-child(3) { grid-column: 5 / 7 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > :nth-child(4) { grid-column: 1 / 7 !important; grid-row: 2 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > :nth-child(5) { grid-column: 1 / 3 !important; grid-row: 3 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > :nth-child(6) { grid-column: 3 / 5 !important; grid-row: 3 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > :nth-child(7) { grid-column: 5 / 7 !important; grid-row: 3 !important; }

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    aspect-ratio: 420 / 760 !important;
}
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"] > :nth-child(1) { grid-column: 1 / 4 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"] > :nth-child(2) { grid-column: 4 / 7 !important; grid-row: 1 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"] > :nth-child(3) { grid-column: 1 / 3 !important; grid-row: 2 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"] > :nth-child(4) { grid-column: 3 / 7 !important; grid-row: 2 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"] > :nth-child(5) { grid-column: 1 / 5 !important; grid-row: 3 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"] > :nth-child(6) { grid-column: 5 / 7 !important; grid-row: 3 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"] > :nth-child(7) { grid-column: 1 / 4 !important; grid-row: 4 !important; }
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"] > :nth-child(8) { grid-column: 4 / 7 !important; grid-row: 4 !important; }

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    aspect-ratio: 1 / 1 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-10-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    aspect-ratio: 420 / 950 !important;
}

/* qchat v98: pair-row album layouts for 6, 7, 9, 10+ items.
   This avoids awkward 3+1+3 / 3+3+3+1 mosaics; large albums continue
   in two-column Telegram-like rows, with odd final item spanning full width. */
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-pairs"],
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    aspect-ratio: 420 / 570 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-pairs"],
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    aspect-ratio: 420 / 760 !important;
}
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-pairs"] > :nth-child(7),
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > :nth-child(7) { grid-column: 1 / -1 !important; }

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-pairs"],
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    aspect-ratio: 420 / 950 !important;
}
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-pairs"] > :nth-child(9),
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-grid"] > :nth-child(9) { grid-column: 1 / -1 !important; }

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-10-pairs"],
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-10-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    aspect-ratio: 420 / 950 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] .qchat-album-hidden,
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] > [data-qchat-album-hidden="1"] {
    display: none !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] .qchat-album-more,
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] > [data-qchat-album-more="1"] {
    position: relative !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] .qchat-album-more::before,
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] > [data-qchat-album-more="1"]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(0, 0, 0, 0.48);
    pointer-events: none;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] .qchat-album-more::after,
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] > [data-qchat-album-more="1"]::after {
    content: '+' attr(data-qchat-album-extra-count);
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.4rem, 7vw, 2.5rem);
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    pointer-events: none;
}

#messagesContainer .message.sent .qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] {
    margin-left: auto !important;
    margin-right: 0 !important;
}

#messagesContainer .message.received .qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"] {
    margin-left: 0 !important;
    margin-right: auto !important;
}


/* qchat v84: fix 3-photo hero-top proportions.
   With 2 bottom thumbnails, the old 3.337:1 row ratio made each bottom cell too wide
   and cropped 16:9 photos. 2:1 keeps the bottom cells close to 16:9 while preserving
   the Telegram-like large top tile. */
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"],
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]),
#messagesContainer .message .qchat-file-bundle-message[data-file-bundle-count="3"] .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="3"]:not([data-qchat-album-layout]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 2fr) minmax(0, 1fr) !important;
    aspect-ratio: 420 / 361 !important;
}


/* qchat v85: remove empty grey cells from smart Telegram-like albums.
   The grey was the album grid background showing through when a later count-based
   grid rule kept 3 columns while the tg-5-center item placement used only 2. */
.qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"],
.profile-blog-attachments .profile-blog-gallery.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-"] {
    background: transparent !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"],
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.65fr) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 2px !important;
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    aspect-ratio: 420 / 620 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(1),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(1),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(1) {
    grid-column: 1 / 4 !important;
    grid-row: 1 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(2),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(2),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(2) {
    grid-column: 4 / 7 !important;
    grid-row: 1 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(3),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(3),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(3) {
    grid-column: 1 / 7 !important;
    grid-row: 2 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(4),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(4),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(4) {
    grid-column: 1 / 4 !important;
    grid-row: 3 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(5),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(5),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > :nth-child(5) {
    grid-column: 4 / 7 !important;
    grid-row: 3 !important;
}


/* qchat v86: preserve source proportions for 1- and 2-image smart albums.
   Single images use their own aspect ratio. Two-image albums use proportional columns/rows,
   so each thumbnail cell is close to the original photo ratio instead of forcing square crops. */
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"],
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    aspect-ratio: var(--qchat-album-ratio, 1.3333) !important;
    width: min(var(--qchat-album-width, 420px), 100%) !important;
    max-width: min(420px, 100%) !important;
    max-height: 300px !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] > :nth-child(1),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] > :nth-child(1),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] > :nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"],
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] {
    grid-template-columns: minmax(0, var(--qchat-album-c1, 1fr)) minmax(0, var(--qchat-album-c2, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    aspect-ratio: var(--qchat-album-ratio, 2.35) !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] > :nth-child(1),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] > :nth-child(1),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] > :nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] > :nth-child(2),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] > :nth-child(2),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] > :nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"],
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, var(--qchat-album-rh1, 1fr)) minmax(0, var(--qchat-album-rh2, 1fr)) !important;
    aspect-ratio: var(--qchat-album-ratio, 0.86) !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] > :nth-child(1),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] > :nth-child(1),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] > :nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] > :nth-child(2),
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] > :nth-child(2),
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] > :nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] img,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] .chat-image-preview,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] img,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] .chat-image-preview,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] img,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] .chat-image-preview {
    object-fit: cover !important;
    object-position: center !important;
}


/* qchat v92: blog image albums with 2 photos should use the same max-width lane as chat messages.
   Older blog gallery CSS capped two-image galleries at 348px. Chat smart albums use a 520px media lane,
   so force blog tg-2 layouts to the same width while preserving their ratio-driven columns. */
.profile-blog-attachments .qchat-file-bundle-group-image[data-file-group-count="2"],
.profile-blog-attachments .profile-blog-gallery-group[data-file-group-count="2"] {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="2"],
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"],
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="2"] > .profile-blog-gallery-item,
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="2"] .profile-blog-gallery-tile,
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="2"] .profile-blog-attachment-preview {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}


/* qchat v93: profile blog 2-image albums should use the same 520px media lane as chat message bundles. */
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message[data-file-bundle-count="2"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-message[data-file-bundle-count="2"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message[data-file-bundle-count="2"] > .profile-blog-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-message[data-file-bundle-count="2"] > .qchat-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery-group[data-file-group-type="image"][data-file-group-count="2"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image[data-file-group-count="2"] {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-type="image"][data-file-group-count="2"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 2px !important;
    box-sizing: border-box !important;
}


/* qchat v95: profile-blog 5-image albums use Telegram/chat-style corners.
   Only the outside album corners are rounded; all internal seams stay square. */
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] {
    border-radius: 12px !important;
    overflow: hidden !important;
    gap: 2px !important;
}
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] .profile-blog-gallery-tile,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] img {
    border-radius: 0 !important;
    overflow: hidden !important;
}
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(1),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(1) .profile-blog-gallery-tile,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(1) .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(1) img {
    border-radius: 12px 0 0 0 !important;
}
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(2),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(2) .profile-blog-gallery-tile,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(2) .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(2) img {
    border-radius: 0 12px 0 0 !important;
}
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(4),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(4) .profile-blog-gallery-tile,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(4) .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(4) img {
    border-radius: 0 0 0 12px !important;
}
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(5),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(5) .profile-blog-gallery-tile,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(5) .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-5-center"] > .profile-blog-gallery-item:nth-child(5) img {
    border-radius: 0 0 12px 0 !important;
}




/* qchat v98: blog large image albums use the same lane and pair-row logic as chat. */
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message[data-file-bundle-count="6"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message[data-file-bundle-count="7"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message[data-file-bundle-count="8"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message[data-file-bundle-count="9"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message[data-file-bundle-count="10"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image[data-file-group-count="6"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image[data-file-group-count="7"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image[data-file-group-count="8"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image[data-file-group-count="9"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image[data-file-group-count="10"] {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-pairs"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-pairs"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-8-mosaic"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-pairs"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-grid"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-10-pairs"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-10-grid"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 2px !important;
    box-sizing: border-box !important;
}


/* Blog image album outer-corner normalization for 2..10+ images. */
.profile-blog-gallery.qchat-blog-album-corners-ready,
.qchat-profile-blog-bundle-host .qchat-file-bundle-grid-images.qchat-blog-album-corners-ready {
    overflow: hidden !important;
    border-radius: 12px !important;
}

.profile-blog-gallery.qchat-blog-album-corners-ready > .profile-blog-gallery-item,
.qchat-profile-blog-bundle-host .qchat-file-bundle-grid-images.qchat-blog-album-corners-ready > .qchat-file-bundle-item-image {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.profile-blog-gallery.qchat-blog-album-corners-ready .profile-blog-gallery-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready .qchat-chat-image-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready .file-preview,
.profile-blog-gallery.qchat-blog-album-corners-ready .profile-blog-attachment-preview,
.profile-blog-gallery.qchat-blog-album-corners-ready img {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tl,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tl .profile-blog-gallery-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tl .qchat-chat-image-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tl .profile-blog-attachment-preview,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tl img {
    border-top-left-radius: 12px !important;
}

.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tr,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tr .profile-blog-gallery-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tr .qchat-chat-image-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tr .profile-blog-attachment-preview,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-tr img {
    border-top-right-radius: 12px !important;
}

.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-bl,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-bl .profile-blog-gallery-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-bl .qchat-chat-image-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-bl .profile-blog-attachment-preview,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-bl img {
    border-bottom-left-radius: 12px !important;
}

.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-br,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-br .profile-blog-gallery-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-br .qchat-chat-image-tile,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-br .profile-blog-attachment-preview,
.profile-blog-gallery.qchat-blog-album-corners-ready > .qchat-album-corner-br img {
    border-bottom-right-radius: 12px !important;
}

/* qchat v99: force pair-row blog albums for 6/7/9/10 images.
   Older profile-blog gallery rules targeted data-file-group-count and could win with
   3-column auto placement (6 => 3+3, 10 => 3+3+3+1). These overrides are intentionally
   last and scoped to blog albums only. */
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-type="image"][data-file-group-count="6"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-pairs"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] {
    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: 520 / 780 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 2px !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-type="image"][data-file-group-count="7"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-pairs"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    aspect-ratio: 520 / 1040 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 2px !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-type="image"][data-file-group-count="9"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-pairs"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    aspect-ratio: 520 / 1300 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 2px !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-type="image"][data-file-group-count="10"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-10-pairs"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-10-grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    aspect-ratio: 520 / 1300 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 2px !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="6"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="7"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="9"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="10"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-pairs"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-6-center"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-pairs"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-pairs"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-grid"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-10-pairs"] > .profile-blog-gallery-item,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-10-grid"] > .profile-blog-gallery-item {
    grid-column: auto !important;
    grid-row: auto !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="7"] > .profile-blog-gallery-item:nth-child(7),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-pairs"] > .profile-blog-gallery-item:nth-child(7),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-7-center"] > .profile-blog-gallery-item:nth-child(7),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="9"] > .profile-blog-gallery-item:nth-child(9),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-pairs"] > .profile-blog-gallery-item:nth-child(9),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-9-grid"] > .profile-blog-gallery-item:nth-child(9) {
    grid-column: 1 / -1 !important;
}

/* Saved blog cards embedded in Favorites/messages should not expose blog comments UI. */
.saved-profile-blog-post .profile-blog-comments {
    display: none !important;
}


/* qchat v101: profile-blog 5-image clusters use 8 row variants x 32 V/H orientation variants.
   10+ image albums are rendered as 5+5 clusters; exactly 5 images use the same cluster engine. */
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-blog-album-split-5,
.profile-blog-gallery.qchat-blog-album-split-5[data-qchat-album-layout="tg-10-split-5"],
.profile-blog-gallery.qchat-blog-album-split-5[data-qchat-album-layout="tg-5-pattern"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message[data-file-bundle-count="5"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message[data-file-bundle-count="10"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image[data-file-group-count="5"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image[data-file-group-count="10"] {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
}

.qchat-blog-album-five-cluster {
    display: grid !important;
    grid-auto-flow: row !important;
    gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.qchat-blog-album-five-cluster > .profile-blog-gallery-item,
.qchat-blog-album-five-cluster > .qchat-file-bundle-item-image {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

.qchat-blog-album-five-cluster > .profile-blog-gallery-item > .profile-blog-gallery-tile,
.qchat-blog-album-five-cluster > .qchat-file-bundle-item-image > .profile-blog-gallery-tile,
.qchat-blog-album-five-cluster > .profile-blog-gallery-item .profile-blog-attachment-preview,
.qchat-blog-album-five-cluster > .profile-blog-gallery-item img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

.qchat-blog-album-five-cluster .file-name {
    display: none !important;
}

.profile-blog-gallery.qchat-blog-album-split-5 > .profile-blog-gallery-item,
.profile-blog-gallery.qchat-blog-album-split-5 > .qchat-file-bundle-item-image {
    grid-column: auto !important;
    grid-row: auto !important;
}


/* qchat v102: chat message image albums also use the V/H-aware 5-image cluster engine. */
.qchat-file-bundle-grid-images.qchat-blog-album-split-5[data-qchat-album-layout="tg-5-pattern"],
.qchat-file-bundle-grid-images.qchat-blog-album-split-5[data-qchat-album-layout="tg-10-split-5"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-split-5[data-qchat-album-layout="tg-5-pattern"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-split-5[data-qchat-album-layout="tg-10-split-5"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 2px !important;
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
}

#messagesContainer .message .qchat-file-bundle-group-image[data-file-group-count="5"],
#messagesContainer .message .qchat-file-bundle-group-image[data-file-group-count="10"] {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
}

.qchat-blog-album-five-cluster > .qchat-file-bundle-item-image > .file-preview.image-preview,
.qchat-blog-album-five-cluster > .qchat-file-bundle-item-image > .qchat-chat-image-tile,
.qchat-blog-album-five-cluster > .qchat-file-bundle-item-image .file-preview.image-preview,
.qchat-blog-album-five-cluster > .qchat-file-bundle-item-image .qchat-chat-image-tile,
.qchat-blog-album-five-cluster > .qchat-file-bundle-item-image img,
.qchat-blog-album-five-cluster > .qchat-file-bundle-item-image .chat-image-preview {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
}

.qchat-file-bundle-grid-images.qchat-blog-album-split-5 > .qchat-file-bundle-item-image,
.qchat-file-bundle-grid-images.qchat-blog-album-split-5 > .profile-blog-gallery-item {
    grid-column: auto !important;
    grid-row: auto !important;
}



/* qchat v103: V/H-aware row albums for 5-10 images.
   The row pattern is calculated from real image width/height and written as
   inline grid-row/grid-column per item, so count-based fallbacks cannot force
   6/7/8/9-photo albums back into blind pairs/mosaics. */
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"],
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 2px !important;
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image:has(.qchat-blog-album-vh-rows),
#messagesContainer .message .qchat-file-bundle-group-image:has(.qchat-blog-album-vh-rows) {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] > .profile-blog-gallery-item,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] > .qchat-file-bundle-item-image {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .file-preview.image-preview,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .qchat-chat-image-tile,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .profile-blog-gallery-tile,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .profile-blog-attachment-preview,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] img,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .chat-image-preview {
    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;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
}

.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .file-name,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .file-meta {
    display: none !important;
}


/* qchat v104: blog V/H image albums must use the same 520px media lane as chat.
   Runtime JS also writes these inline, but keeping CSS here prevents a pre-hydration flash. */
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-qchat-blog-image-lane="1"],
.profile-blog-attachments.qchat-profile-blog-bundle-host:has(.profile-blog-gallery[data-qchat-album-layout="tg-vh-rows"]),
.profile-blog-attachments.qchat-profile-blog-bundle-host:has(.qchat-blog-album-vh-rows),
.profile-blog-attachments.qchat-profile-blog-bundle-host [data-qchat-blog-image-lane="1"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message:has(.profile-blog-gallery[data-qchat-album-layout="tg-vh-rows"]),
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-groups:has(.profile-blog-gallery[data-qchat-album-layout="tg-vh-rows"]),
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image:has(.profile-blog-gallery[data-qchat-album-layout="tg-vh-rows"]) {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="0"]:has(.profile-blog-gallery[data-qchat-album-layout="tg-vh-rows"]),
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="0"]:has(.qchat-blog-album-vh-rows) {
    margin: 8px 0 12px 0 !important;
}

.profile-blog-gallery[data-qchat-album-layout="tg-vh-rows"] .file-name,
.profile-blog-gallery[data-qchat-album-layout="tg-vh-rows"] .file-meta,
.profile-blog-gallery.qchat-blog-album-vh-rows .file-name,
.profile-blog-gallery.qchat-blog-album-vh-rows .file-meta {
    display: none !important;
}





/* qchat v121: compact profile/blog image albums.
   Blog posts used the same 520px media lane as chat messages, which made photo groups
   too tall and wide in the profile feed. Keep chat images unchanged, but make blog
   image bundles smaller and centered/left-aligned in the blog content lane. */
.profile-blog-attachments.qchat-profile-blog-bundle-host:not([data-profile-blog-has-audio="1"]),
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-qchat-blog-image-lane="1"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery-group,
.profile-blog-attachments.qchat-profile-blog-bundle-host [data-qchat-blog-image-lane="1"] {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host:not([data-profile-blog-has-audio="1"]) {
    margin-left: 46px !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images,
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-blog-album-vh-rows,
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] {
    width: min(300px, 100%) !important;
    max-width: min(300px, 100%) !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="2"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"],
.profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
}

@media (max-width: 575.98px) {
    .profile-blog-attachments.qchat-profile-blog-bundle-host,
    .profile-blog-attachments.qchat-profile-blog-bundle-host:not([data-profile-blog-has-audio="1"]),
    .profile-blog-attachments.qchat-profile-blog-bundle-host[data-qchat-blog-image-lane="1"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-file-bundle-grid-images,
    .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery.qchat-blog-album-vh-rows,
    .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-grid-images[data-qchat-album-layout^="tg-"],
    .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] {
        width: min(360px, 100%) !important;
        max-width: 100% !important;
    }
}

/* qchat v121: final hard compact override for profile/blog image albums.
   Runtime code also writes inline styles, but this catches cached DOM and older posts. */
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host:not([data-profile-blog-has-audio="1"]),
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host[data-qchat-blog-image-lane="1"],
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-message,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-groups,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-groups,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery-group,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host:not([data-profile-blog-has-audio="1"]),
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host[data-qchat-blog-image-lane="1"],
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-message,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-groups,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-groups,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery-group {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images,
.profile-blog-post .profile-blog-gallery.qchat-blog-album-vh-rows,
.saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images,
.saved-profile-blog-post .profile-blog-gallery.qchat-blog-album-vh-rows {
    width: min(360px, 100%) !important;
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
}

.profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"],
.profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"],
.saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"],
.saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] {
    width: min(300px, 100%) !important;
    max-width: min(300px, 100%) !important;
}

@media (max-width: 575.98px) {
    .profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host,
    .saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}


/* qchat v122: blog image sizing parity with message images.
   Single blog images stay compact at 300px; blog image albums/groups use a 360px lane. */
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host:not([data-profile-blog-has-audio="1"]),
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host[data-qchat-blog-image-lane="1"],
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-message,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-groups,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-groups,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image,
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery-group,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host:not([data-profile-blog-has-audio="1"]),
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host[data-qchat-blog-image-lane="1"],
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-message,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-groups,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-groups,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery-group,
.profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images:not([data-file-group-count="1"]):not([data-qchat-album-layout="tg-single"]),
.profile-blog-post .profile-blog-gallery.qchat-blog-album-vh-rows,
.saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images:not([data-file-group-count="1"]):not([data-qchat-album-layout="tg-single"]),
.saved-profile-blog-post .profile-blog-gallery.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;
}

.profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"],
.profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"],
.saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"],
.saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] {
    width: min(300px, 100%) !important;
    max-width: min(300px, 100%) !important;
}

/* qchat v109: hard override for Telegram-like V/H albums in chat messages.
   Older count-based bundle rules have #messagesContainer selectors and !important;
   if they win over tg-vh-rows the grid becomes thin vertical "sausages".
   Keep this block late and more specific than the generic count fallbacks. */
html body #messagesContainer .message .qchat-file-bundle-message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"],
html body #messagesContainer .message .qchat-file-bundle-message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"],
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 2px !important;
    width: min(320px, 100%) !important;
    max-width: min(320px, 100%) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

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

html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] > .qchat-file-bundle-item,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] > .qchat-file-bundle-item-image,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows > .qchat-file-bundle-item,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows > .qchat-file-bundle-item-image {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .file-preview.image-preview,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .qchat-chat-image-tile,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] img,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .chat-image-preview,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows .file-preview.image-preview,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows .qchat-chat-image-tile,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows img,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows .chat-image-preview {
    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;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: hidden !important;
}

html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .file-name,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] .file-meta,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows .file-name,
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows .file-meta {
    display: none !important;
}

/* qchat v122: saved blog cards in Favorites/messages use the available message width.
   Do not cap embedded blog albums to 360px here; the saved card itself is fluid. */
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host,
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-message,
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-message,
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-file-bundle-groups,
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-groups,
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .qchat-file-bundle-group-image,
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host .profile-blog-gallery-group,
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images,
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-gallery.qchat-blog-album-vh-rows {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message .saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"],
html body #messagesContainer .message .saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-single"] {
    width: 100% !important;
    max-width: 100% !important;
}

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

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-images[data-qchat-album-layout="tg-single"] {
    width: min(300px, 100%) !important;
    max-width: min(300px, 100%) !important;
}



/* Blog audio lane: match message audio player width, but do not stretch across the whole blog column.
   Keep image/video album sizing untouched; this targets only bundles with audio. */
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"],
.profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio,
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"],
.saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"],
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio {
    width: min(464px, 100%) !important;
    max-width: min(464px, 100%) !important;
    min-width: 0 !important;
    margin: 8px 0 12px 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .qchat-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .qchat-file-bundle-message,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .qchat-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .qchat-file-bundle-groups,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .qchat-file-bundle-group-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .qchat-file-bundle-group-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-audio-group,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-audio-group,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-audio-list,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-audio-list,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .qchat-file-bundle-list-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .qchat-file-bundle-list-audio,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-audio-attachment,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-audio-attachment,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-audio-attachment > .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-audio-attachment > .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .qchat-audio-mini-group,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .qchat-audio-mini-group,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .qchat-audio-mini-player,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .qchat-audio-mini-player,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .audio_card,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .audio_card,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .blog-audio-current,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .blog-audio-current,
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-video-attachment:has(.qchat-audio-mini-player),
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-video-attachment:has(.qchat-audio-mini-player),
.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-video-attachment:has(.qchat-audio-mini-player) > .profile-blog-attachment-preview,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-video-attachment:has(.qchat-audio-mini-player) > .profile-blog-attachment-preview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.profile-blog-attachments.qchat-profile-blog-bundle-host[data-profile-blog-has-audio="1"] .profile-blog-video-attachment:has(.qchat-audio-mini-player) > .file-name,
.profile-blog-attachments.qchat-profile-blog-bundle-host.qchat-profile-blog-bundle-has-audio .profile-blog-video-attachment:has(.qchat-audio-mini-player) > .file-name {
    display: none !important;
}

/* migrated from app.js */
#profileAvatar .qchat-profile-avatar-status-wrap,
        #modalProfileAvatar .qchat-profile-avatar-status-wrap,
        #profileAvatar .qchat-profile-avatar-edit-wrap,
        #modalProfileAvatar .qchat-profile-avatar-edit-wrap {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 0 !important;
            max-width: 100% !important;
            overflow: visible !important;
            vertical-align: middle !important;
        }

        #profileAvatar .profile-avatar,
        #modalProfileAvatar .profile-avatar,
        #profileAvatar .avatar-placeholder,
        #modalProfileAvatar .avatar-placeholder {
            display: block !important;
        }

        #profileStatus.qchat-profile-avatar-presence,
        #modalProfileStatus.qchat-profile-avatar-presence,
        #profileAvatar .qchat-profile-avatar-presence,
        #modalProfileAvatar .qchat-profile-avatar-presence {
            position: absolute !important;
            /* right: 13.5% !important; */
            bottom: 0px !important;
            /* left: auto !important; */
            /* top: auto !important; */
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            min-width: 16px !important;
            min-height: 16px !important;
            max-width: 16px !important;
            max-height: 16px !important;
            padding: 0 !important;
            margin: 0 !important;
            border-radius: 999px !important;
            border: 3px solid var(--bs-body-bg, #fff) !important;
            background: #6c757d !important;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) !important;
            box-sizing: border-box !important;
            z-index: 30 !important;
            pointer-events: none !important;
            transform: translate(50%, 50%) !important;
            font-size: 0 !important;
            line-height: 0 !important;
            overflow: visible !important;
        }

        #profileStatus.qchat-profile-avatar-presence *,
        #modalProfileStatus.qchat-profile-avatar-presence *,
        #profileAvatar .qchat-profile-avatar-presence *,
        #modalProfileAvatar .qchat-profile-avatar-presence * {
            display: none !important;
        }

        #profileStatus.qchat-profile-avatar-presence.online,
        #modalProfileStatus.qchat-profile-avatar-presence.online,
        #profileAvatar .qchat-profile-avatar-presence.online,
        #modalProfileAvatar .qchat-profile-avatar-presence.online {
            background: #28a745 !important;
        }

        #profileStatus.qchat-profile-avatar-presence.offline,
        #modalProfileStatus.qchat-profile-avatar-presence.offline,
        #profileAvatar .qchat-profile-avatar-presence.offline,
        #modalProfileAvatar .qchat-profile-avatar-presence.offline {
            background: #6c757d !important;
        }

        body.dark-theme #profileStatus.qchat-profile-avatar-presence,
        body.dark-theme #modalProfileStatus.qchat-profile-avatar-presence,
        body.dark-theme #profileAvatar .qchat-profile-avatar-presence,
        body.dark-theme #modalProfileAvatar .qchat-profile-avatar-presence,
        [data-bs-theme="dark"] #profileStatus.qchat-profile-avatar-presence,
        [data-bs-theme="dark"] #modalProfileStatus.qchat-profile-avatar-presence,
        [data-bs-theme="dark"] #profileAvatar .qchat-profile-avatar-presence,
        [data-bs-theme="dark"] #modalProfileAvatar .qchat-profile-avatar-presence {
            border-color: var(--qchat-dark-surface-2, #161b22) !important;
        }

/* migrated from app.js:qchatNotificationCenterStyles */
.notification-center-badge,
                .profile-blog-notification-badge { align-items: center; justify-content: center; min-width: 1.35em; }
                #notificationsTab .notification-center-list { max-height: calc(100vh - 240px); overflow-y: auto; }
                .notification-center-item { transition: background-color 120ms ease, border-color 120ms ease; cursor: pointer; }
                .notification-center-item:hover { background: rgba(13,110,253,0.055); border-color: rgba(13,110,253,0.24) !important; }
                .notification-center-item.notification-center-unread { border-left: 3px solid #dc3545 !important; }
                .notification-center-icon { width: 34px; height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(13,110,253,0.1); }
                .notification-center-item-title { font-size: 0.92rem; }
                .notification-center-preview { font-size: 0.84rem; }
                .notification-center-actions { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
                .notification-center-post-preview { font-size: 0.78rem; }
                .profile-blog-comment-highlight { animation: qchatCommentFlash 2.2s ease; box-shadow: 0 0 0 2px rgba(13,110,253,0.28); border-radius: 10px; }
                @keyframes qchatCommentFlash { 0%, 100% { background: transparent; } 18%, 78% { background: rgba(255, 193, 7, 0.22); } }

/* migrated from qchat-context-menu-boundary.js */
#externalProfileTabContextMenu {
    min-width: 190px;
    z-index: 2147483000;
}
.qchat-external-profile-tab-pinned .qchat-external-profile-pin-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72em;
    opacity: .78;
}
.qchat-external-profile-tab .qchat-external-profile-pin-mark.d-none {
    display: none !important;
}
.qchat-external-profile-tab-item-pinned {
    cursor: grab;
    position: relative;
}
.qchat-external-profile-tab-item-pinned:active {
    cursor: grabbing;
}
.qchat-external-profile-tab-item-pinned.qchat-external-profile-tab-dragging {
    opacity: .42;
    transform: scale(.96);
}
.qchat-external-profile-tab-item-pinned .qchat-external-profile-tab,
.qchat-external-profile-tab-is-dragging #appTabs .qchat-external-profile-tab-item-pinned:not(.qchat-external-profile-tab-dragging) .qchat-external-profile-tab {
    user-select: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.qchat-external-profile-tab-drop-before::before,
.qchat-external-profile-tab-drop-after::after {
    content: '';
    position: absolute;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 999px;
    background: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,.14);
    z-index: 5;
}
.qchat-external-profile-tab-drop-before::before {
    left: -3px;
}
.qchat-external-profile-tab-drop-after::after {
    right: -3px;
}
.qchat-external-profile-tab-drag-image {
    filter: drop-shadow(0 10px 22px rgba(15,23,42,.22));
}
.qchat-external-profile-tab-drag-image .qchat-external-profile-tab {
    border-radius: .375rem !important;
    background: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.18) !important;
}
.qchat-external-profile-tab-drag-image .qchat-external-profile-pin-mark {
    color: inherit !important;
}
.qchat-external-profile-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0;
}
.qchat-external-profile-tab-avatar {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    font-size: 11px !important;
    overflow: hidden !important;
    line-height: 1 !important;
}
.qchat-external-profile-tab-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.qchat-external-profile-tab-name {
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .qchat-external-profile-tab-name {
        max-width: 92px;
    }
    .qchat-external-profile-tab-avatar {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        font-size: 10px !important;
    }
}

/* migrated from qchat-file-send-boundary.js */
.message-pending-attachments {
            display: grid;
            gap: 8px;
            margin-bottom: 8px;
            max-height: min(32vh, 260px);
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 4px;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
        }
        .message-pending-attachment {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            min-width: 0;
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 12px;
            padding: 8px;
            background: var(--bs-body-bg, #fff);
            transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
        }
        .message-pending-attachment.dragging {
            opacity: 0.55;
            transform: scale(0.99);
        }
        .message-pending-attachment.drag-over {
            border-color: var(--bs-primary, #0d6efd);
            box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.16);
        }
        .message-pending-attachment-drag-handle {
            width: 30px;
            min-width: 30px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--bs-secondary-color, #6c757d);
            cursor: grab;
            touch-action: none;
            user-select: none;
            flex: 0 0 30px;
        }
        .message-pending-attachment-drag-handle:active {
            cursor: grabbing;
        }
        .message-pending-attachment-preview {
            width: 58px;
            min-width: 58px;
            height: 58px;
            overflow: hidden;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.045);
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 58px;
        }
        .message-pending-attachment-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .message-pending-attachment-icon {
            font-size: 1.35rem;
            color: var(--bs-secondary-color, #6c757d);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .message-pending-attachment-icon i {
            font-size: 1.35rem;
        }
        .message-pending-attachment-meta {
            min-width: 0;
            overflow: hidden;
            flex: 1 1 auto;
        }
        .message-pending-attachment-name {
            font-size: 0.9rem;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .message-pending-attachment-hint {
            font-size: 0.74rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .remove-message-pending-attachment {
            width: 30px;
            min-width: 30px;
            height: 30px;
            flex: 0 0 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
        }

/* migrated from qchat-profile-blog-boundary.js */
.profile-blog-composer {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
    
            .qchat-profile-blog-composer-input {
                align-items: flex-end;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                min-height: 50px;
                height: auto !important;
                flex-wrap: nowrap;
            }
    
            .qchat-profile-blog-composer-input > .btn {
                min-height: 38px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
            }
    
            .qchat-profile-blog-composer-input .qchat-profile-blog-voice-btn {
                min-width: 42px;
                flex: 0 0 auto;
            }
    
            #profileBlogVoiceRecordingPanel {
                z-index: 1081;
                min-width: min(320px, calc(100vw - 24px));
            }
    
            .qchat-profile-blog-composer-input .qchat-profile-blog-emoji-toggle {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 42px;
                flex: 0 0 auto;
            }
    
            .qchat-profile-blog-composer-input .qchat-profile-blog-textarea {
                resize: none;
                overflow-y: hidden;
                min-height: 38px;
                max-height: 140px;
                line-height: 1.35;
                white-space: pre-wrap;
                overflow-wrap: break-word;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                width: 1%;
                min-width: 0;
                flex: 1 1 auto;
            }
    
            .qchat-profile-blog-composer-input .qchat-profile-blog-textarea.qchat-message-textarea-scroll {
                overflow-y: auto;
            }
    
            .profile-blog-composer-meta {
                gap: 8px;
                flex-wrap: wrap;
            }
    
            .profile-blog-composer-meta .profile-blog-attachments-hint {
                text-align: right;
            }
    
            .profile-blog-composer > .profile-blog-composer-attachments {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
                clear: both;
            }
    
            .qchat-profile-blog-composer-input > .profile-blog-composer-attachments {
                flex: 0 0 100%;
                width: 100%;
            }
    
            #profileBlogEmojiPicker.qchat-emoji-picker {
                position: fixed;
                z-index: 2000;
                width: min(340px, calc(100vw - 16px));
                height: min(430px, calc(100vh - 16px));
                max-height: min(430px, calc(100vh - 16px));
                background: var(--bs-body-bg, #fff);
                color: var(--bs-body-color, #212529);
                border: 1px solid rgba(0,0,0,.16);
                border-radius: 14px;
                box-shadow: 0 10px 30px rgba(0,0,0,.18);
                overflow: hidden;
                flex-direction: column;
            }
    
            #profileBlogEmojiPicker.qchat-emoji-picker.qchat-emoji-picker-open {
                display: flex !important;
            }
    
            #profileBlogEmojiPicker.qchat-emoji-picker:not(.qchat-emoji-picker-open) {
                display: none;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-picker-header {
                padding: 8px 8px 4px;
                border-bottom: 1px solid rgba(0,0,0,.08);
                flex: 0 0 auto;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-category-tabs {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 2px !important;
                overflow: hidden !important;
                scrollbar-width: none;
                width: 100% !important;
                max-width: 100% !important;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-category-tabs::-webkit-scrollbar {
                display: none;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-category-tab {
                border: 0 !important;
                background: transparent !important;
                border-radius: 8px !important;
                padding: 0 !important;
                line-height: 1 !important;
                width: 30px !important;
                height: 30px !important;
                min-width: 30px !important;
                min-height: 30px !important;
                max-width: 30px !important;
                max-height: 30px !important;
                flex: 0 0 30px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                box-sizing: border-box !important;
                font-size: 18px !important;
                overflow: hidden !important;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-category-tab.active,
            #profileBlogEmojiPicker .qchat-emoji-category-tab:hover {
                background: rgba(0,0,0,.08);
            }
    
            #profileBlogEmojiPicker .qchat-emoji-body {
                flex: 1 1 auto;
                min-height: 0;
                overflow: auto;
                padding: 8px;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-section-title {
                font-size: .8rem;
                color: var(--bs-secondary-color, #6c757d);
                margin: 2px 0 8px;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-grid {
                display: grid !important;
                grid-template-columns: repeat(8, 34px) !important;
                grid-auto-rows: 34px !important;
                gap: 4px !important;
                align-items: center !important;
                justify-content: start !important;
                width: auto !important;
                max-width: 100% !important;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-grid > .text-muted {
                grid-column: 1 / -1 !important;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-btn {
                border: 0 !important;
                background: transparent !important;
                border-radius: 8px !important;
                padding: 4px !important;
                width: 34px !important;
                height: 34px !important;
                min-width: 34px !important;
                min-height: 34px !important;
                max-width: 34px !important;
                max-height: 34px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex: 0 0 34px !important;
                box-sizing: border-box !important;
                line-height: 1 !important;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-btn:hover {
                background: rgba(0,0,0,.08) !important;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-btn img {
                width: 24px !important;
                height: 24px !important;
                max-width: 24px !important;
                max-height: 24px !important;
                object-fit: contain !important;
                flex: 0 0 auto !important;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-fallback {
                font-size: 22px !important;
                line-height: 1 !important;
                width: 24px !important;
                height: 24px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                overflow: hidden !important;
            }
    
            #profileBlogEmojiPicker .qchat-emoji-btn img + .qchat-emoji-fallback {
                display: none !important;
            }
    
            @media (max-width: 380px) {
                #profileBlogEmojiPicker .qchat-emoji-grid {
                    grid-template-columns: repeat(7, 34px) !important;
                }
            }
    
            #profileBlogEmojiPicker .qchat-emoji-search-wrap {
                flex: 0 0 auto;
                padding: 8px;
                border-top: 1px solid rgba(0,0,0,.08);
                background: var(--bs-body-bg, #fff);
            }
    
            #profileBlogEmojiPicker .qchat-emoji-search {
                width: 100%;
                border: 1px solid rgba(0,0,0,.18);
                border-radius: 10px;
                padding: 7px 10px;
                background: var(--bs-body-bg, #fff);
                color: inherit;
            }
    
            @media (max-width: 600px) {
                .qchat-profile-blog-composer-input > .btn {
                    padding-left: 0.65rem;
                    padding-right: 0.65rem;
                }
    
                .qchat-profile-blog-composer-input .qchat-profile-blog-emoji-toggle,
                .qchat-profile-blog-composer-input .qchat-profile-blog-voice-btn {
                    min-width: 40px;
                }
    
                .qchat-profile-blog-composer-input .qchat-profile-blog-send-btn {
                    width: 96px !important;
                }
            }

/* migrated from qchat-profile-blog-card-renderer.js */
#messagesContainer {
                --qchat-saved-blog-lane-width: min(500px, var(--qchat-message-lane-width, 50%));
            }
            #messagesContainer .message:has(.saved-profile-blog-post) > .d-flex,
            #messagesContainer .message:has(.saved-profile-blog-comment) > .d-flex {
                width: fit-content !important;
                max-width: var(--qchat-message-lane-width, 50%) !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
            }
            #messagesContainer .message:has(.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;
            }
            #messagesContainer .message:has(.saved-profile-blog-post) .message-bubble,
            #messagesContainer .message:has(.saved-profile-blog-comment) .message-bubble {
                flex: 0 1 auto !important;
                width: min(500px, 100%) !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
            }
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-grid-images) .message-bubble {
                flex: 1 1 0 !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            #messagesContainer .message:has(.saved-profile-blog-post) .message-content-wrapper,
            #messagesContainer .message:has(.saved-profile-blog-post) .message-content,
            #messagesContainer .message:has(.saved-profile-blog-comment) .message-content-wrapper,
            #messagesContainer .message:has(.saved-profile-blog-comment) .message-content {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
            }
            .message-content .saved-profile-blog-post,
            .message-content .saved-profile-blog-comment {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }
            .message-content .saved-profile-blog-header {
                display: grid !important;
                grid-template-columns: auto minmax(0, 1fr) auto !important;
                align-items: start !important;
                gap: 8px !important;
                position: relative !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
                padding-right: 0 !important;
                direction: ltr !important;
                text-align: left !important;
            }
            .message-content .saved-profile-blog-author-line {
                display: contents !important;
                min-width: 0 !important;
                max-width: 100% !important;
            }
            .message-content .saved-profile-blog-author-line > .profile-blog-avatar {
                grid-column: 1 !important;
                grid-row: 1 !important;
                align-self: start !important;
                justify-self: start !important;
                margin: 0 !important;
                float: none !important;
                order: 0 !important;
            }
            .message-content .saved-profile-blog-author-line > .min-width-0,
            .message-content .saved-profile-blog-author-line > .flex-grow-1 {
                grid-column: 2 !important;
                grid-row: 1 !important;
                min-width: 0 !important;
                max-width: 100% !important;
                align-self: center !important;
                justify-self: stretch !important;
                text-align: left !important;
                order: 0 !important;
            }
            .message-content .saved-profile-blog-badge-wrap {
                position: static !important;
                grid-column: 3 !important;
                grid-row: 1 !important;
                z-index: 1 !important;
                display: inline-flex !important;
                align-items: flex-start !important;
                justify-content: flex-end !important;
                justify-self: end !important;
                align-self: start !important;
                width: max-content !important;
                min-width: max-content !important;
                max-width: none !important;
                overflow: visible !important;
                margin: 0 !important;
                float: none !important;
                order: 0 !important;
            }
            .message-content .qchat-saved-blog-badge-link,
            .message-content .qchat-saved-blog-badge-static {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex: 0 0 auto !important;
                width: max-content !important;
                min-width: max-content !important;
                max-width: none !important;
                overflow: visible !important;
                box-sizing: border-box !important;
                padding-inline: 0.58em !important;
                line-height: 1.25 !important;
                white-space: nowrap !important;
            }
            .message-content .qchat-saved-blog-badge-link {
                cursor: pointer !important;
                text-decoration: none !important;
            }
            .message-content .qchat-saved-blog-link-button {
                color: var(--bs-secondary, #6c757d) !important;
                background-color: transparent !important;
                border-color: transparent !important;
                box-shadow: none !important;
                text-decoration: none !important;
            }
            .message-content .qchat-saved-blog-link-button i {
                color: currentColor !important;
            }
            .message-content .qchat-saved-blog-link-button:hover,
            .message-content .qchat-saved-blog-link-button:focus,
            .message-content .qchat-saved-blog-link-button:focus-visible {
                color: var(--bs-secondary, #6c757d) !important;
                background-color: transparent !important;
                border-color: var(--bs-secondary, #6c757d) !important;
                box-shadow: none !important;
                text-decoration: none !important;
            }
            .message-content .qchat-saved-blog-badge-link:hover,
            .message-content .qchat-saved-blog-badge-link:focus {
                text-decoration: none !important;
            }
            .message-content .saved-profile-blog-post .profile-blog-content,
            .message-content .saved-profile-blog-comment .profile-blog-content,
            .message-content .saved-profile-blog-comment .profile-blog-comment-content,
            .message-content .saved-profile-blog-comment .profile-blog-comment-related {
                max-width: 100% !important;
                overflow-wrap: anywhere !important;
                word-break: break-word !important;
            }
            #messagesContainer .message .message-content:has(> .saved-profile-blog-post),
            #messagesContainer .message .message-content:has(> .saved-profile-blog-comment) {
                min-width: 0 !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }
            .message-content .saved-profile-blog-post .profile-blog-attachments,
            .message-content .saved-profile-blog-post .qchat-profile-blog-bundle-host,
            .message-content .saved-profile-blog-post .profile-blog-file-bundle-message,
            .message-content .saved-profile-blog-post .qchat-file-bundle-message,
            .message-content .saved-profile-blog-post .qchat-file-bundle-groups,
            .message-content .saved-profile-blog-post .profile-blog-file-bundle-groups,
            .message-content .saved-profile-blog-post .qchat-file-bundle-group-image,
            .message-content .saved-profile-blog-post .profile-blog-gallery-group {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                justify-self: stretch !important;
            }
            .message-content .saved-profile-blog-post .profile-blog-gallery,
            .message-content .saved-profile-blog-post .qchat-file-bundle-grid-images {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                justify-self: stretch !important;
            }
            #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-file-group-count="3"],
            #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"],
            #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-left"] {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                justify-self: stretch !important;
                display: grid !important;
                gap: 2px !important;
                height: auto !important;
                min-height: 0 !important;
                overflow: hidden !important;
                border-radius: 12px !important;
            }
            #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] {
                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;
            }
            #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"] {
                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;
            }
            #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; }
            .message-content .saved-profile-blog-post .profile-blog-gallery-item,
            .message-content .saved-profile-blog-post .qchat-file-bundle-item-image,
            .message-content .saved-profile-blog-post .profile-blog-gallery-tile,
            .message-content .saved-profile-blog-post .profile-blog-attachment-preview,
            .message-content .saved-profile-blog-post .profile-blog-gallery img,
            .message-content .saved-profile-blog-post .qchat-file-bundle-grid-images img {
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
            }

            /* qchat v151: saved blog audio in messages: card includes padding, player itself stays 464px and height is content-sized. */
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-group-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .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;
            }
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-bubble,
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-bubble,
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-group-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-bubble,
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-bubble,
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-content-wrapper,
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-content,
            #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .saved-profile-blog-post {
                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;
            }

            @media (max-width: 600px) {
                #messagesContainer {
                    --qchat-saved-blog-lane-width: min(500px, 100%);
                }
                #messagesContainer .message:has(.saved-profile-blog-post) > .d-flex,
                #messagesContainer .message:has(.saved-profile-blog-comment) > .d-flex {
                    width: fit-content !important;
                    max-width: var(--qchat-message-lane-width, 100%) !important;
                }
                .message-content .saved-profile-blog-post {
                    padding: 10px !important;
                }
                .message-content .saved-profile-blog-header {
                    grid-template-columns: auto minmax(0, 1fr) auto !important;
                    gap: 6px !important;
                    padding-right: 0 !important;
                }
                .message-content .saved-profile-blog-badge-wrap {
                    margin-left: 0 !important;
                }
            }

/* migrated from qchat-search-boundary.js */
.message-search-term-highlight {
                    background: #ffe66d;
                    color: #111827;
                    border-radius: 3px;
                    padding: 0 2px;
                    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
                }
                .current-search-match .message-search-term-highlight,
                .search-current-message .message-search-term-highlight {
                    background: #ffbf47;
                    color: #111827;
                    box-shadow: 0 0 0 2px rgba(255,191,71,.35);
                }
                .search-current-message,
                .current-search-match {
                    outline: 2px solid rgba(255,191,71,.75);
                    outline-offset: 2px;
                }

/* migrated from qchat-settings-boundary.js */
html.font-small {
            font-size: 14px;
            --qchat-message-line-height: 1.34;
        }

        html.font-medium {
            font-size: 16px;
            --qchat-message-line-height: 1.38;
        }

        html.font-large {
            font-size: 18px;
            --qchat-message-line-height: 1.44;
        }

        body.font-small,
        body.font-medium,
        body.font-large {
            font-size: 1rem;
        }

        body.font-small .qchat-text-fixed,
        body.font-medium .qchat-text-fixed,
        body.font-large .qchat-text-fixed {
            font-size: inherit;
        }

        body.font-small .form-control,
        body.font-small .form-select,
        body.font-small .btn,
        body.font-small .dropdown-menu,
        body.font-small .modal,
        body.font-small .list-group-item,
        body.font-small .nav-link,
        body.font-small .badge,
        body.font-medium .form-control,
        body.font-medium .form-select,
        body.font-medium .btn,
        body.font-medium .dropdown-menu,
        body.font-medium .modal,
        body.font-medium .list-group-item,
        body.font-medium .nav-link,
        body.font-medium .badge,
        body.font-large .form-control,
        body.font-large .form-select,
        body.font-large .btn,
        body.font-large .dropdown-menu,
        body.font-large .modal,
        body.font-large .list-group-item,
        body.font-large .nav-link,
        body.font-large .badge {
            font-size: 1rem;
        }

        /* v75: compact pinned counter must beat the global body.font-* .badge rule.
           Some cached DOM may still miss .pinned-counter-badge, so target the pinned bar too. */
        #pinnedMessagesBar .badge,
        #pinnedMessagesBar .pinned-counter-badge,
        body.font-small #pinnedMessagesBar .badge,
        body.font-medium #pinnedMessagesBar .badge,
        body.font-large #pinnedMessagesBar .badge,
        body.font-small .badge.pinned-counter-badge,
        body.font-medium .badge.pinned-counter-badge,
        body.font-large .badge.pinned-counter-badge {
            font-size: 0.8rem !important;
            line-height: 1 !important;
            padding: 0.22em 0.48em !important;
            vertical-align: baseline;
            transform: translateY(-0.04em);
        }

        /* v60: last-message preview must use the same text scale as chat messages.
           Bootstrap .small / older inline styles otherwise keep it visually smaller. */
        body.font-small .last-message-preview,
        body.font-medium .last-message-preview,
        body.font-large .last-message-preview,
        body.font-small .last-message-preview .last-message-content,
        body.font-medium .last-message-preview .last-message-content,
        body.font-large .last-message-preview .last-message-content,
        body.font-small .last-message-preview .last-message-time,
        body.font-medium .last-message-preview .last-message-time,
        body.font-large .last-message-preview .last-message-time {
            font-size: 1rem !important;
            line-height: var(--qchat-message-line-height, 1.38) !important;
        }

        #messagesContainer .message .message-content,
        #messagesContainer .message .message-content .message-link,
        #messagesContainer .message .file-caption,
        #messagesContainer .message .decrypting-placeholder {
            font-size: 1rem !important;
            line-height: var(--qchat-message-line-height, 1.38) !important;
        }

        #messagesContainer .message .message-time,
        #messagesContainer .message .message-status,
        #messagesContainer .message .reply-preview-text,
        #messagesContainer .message .reply-preview-caption,
        #messagesContainer .message .reply-preview-file-link {
            font-size: 0.9rem !important;
            line-height: 1.32 !important;
        }

        /* v62: multiline composer. <input type="text"> cannot insert newlines,
           so #messageInput is now a textarea and Shift+Enter works natively. */
        #message_div.qchat-composer {
            height: auto !important;
            min-height: 50px;
            align-items: flex-end;
        }

        #messageInput.qchat-message-textarea {
            resize: none;
            overflow-y: hidden;
            min-height: 38px;
            max-height: 140px;
            line-height: 1.35;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        #messageInput.qchat-message-textarea.qchat-message-textarea-scroll {
            overflow-y: auto;
        }

/* migrated from qchat-social-friends-privacy-boundary.js */
.qchat-social-actions { gap: .4rem; flex-wrap: wrap; }
            .qchat-social-friend-card { transition: background-color 120ms ease, border-color 120ms ease; }
            .qchat-social-friend-card:hover { background: rgba(13,110,253,.045); border-color: rgba(13,110,253,.22) !important; }
            .qchat-social-avatar-wrap { position: relative; width: 42px; min-width: 42px; height: 42px; display: inline-flex; flex: 0 0 42px; }
            .qchat-social-avatar { width: 42px; height: 42px; min-width: 42px; border-radius: 999px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--bs-primary); color: #fff; font-weight: 700; }
            .qchat-social-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
            .qchat-social-avatar-status { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 999px; border: 2px solid #fff; box-sizing: border-box; background: #6c757d; box-shadow: 0 0 0 1px rgba(0,0,0,.04); }
            .qchat-social-avatar-status.online { background: #28a745; }
            .qchat-social-avatar-status.offline { background: #6c757d; }
            body.dark-theme .qchat-social-avatar-status { border-color: var(--qchat-dark-surface-2, #161b22); }
            .qchat-social-badge { align-items:center; justify-content:center; min-width:1.35em; }
            #friendsTab .qchat-friends-list { max-height: calc(100vh - 210px); overflow-y:auto; }
            #friendsTab .qchat-friends-panel { width: 100%; }
            #friendsTab .qchat-friends-footer { min-height: 34px; }
            .qchat-social-name-link { max-width: 100%; color: inherit; text-align: left; }
            .qchat-social-name-link:hover { color: var(--bs-primary); text-decoration: underline !important; }
            .qchat-profile-social-actions { gap: .4rem; flex-wrap: wrap; }
            .qchat-profile-social-actions .btn { white-space: nowrap; }

/* migrated from qchat-ui-boundary.js */
#appMessage.qchat-app-message-toast-host {
    position: fixed !important;
    right: 28px !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483646 !important;
    width: auto !important;
    max-width: min(500px, calc(100vw - 56px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    min-width: 288px !important;
    max-width: min(500px, calc(100vw - 56px)) !important;
    padding: 13px 18px 14px !important;
    border-radius: 18px !important;
    background: rgba(12, 18, 28, 0.90) !important;
    color: #fff !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(14px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.35) !important;
    opacity: 0 !important;
    transform: translate3d(0, 18px, 0) scale(0.94) !important;
    transition: opacity 150ms ease, transform 170ms cubic-bezier(.2,.8,.2,1) !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    text-align: left !important;
    pointer-events: none !important;
}
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast::before {
    content: "";
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: rgba(125, 164, 255, 0.95) !important;
}
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast-success::before { background: rgba(52, 211, 153, 0.95) !important; }
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast-danger::before { background: rgba(248, 113, 113, 0.95) !important; }
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast-warning::before { background: rgba(251, 191, 36, 0.95) !important; }
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast-info::before { background: rgba(96, 165, 250, 0.95) !important; }
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast-icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin-top: 1px !important;
}
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast-title {
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    opacity: 0.78 !important;
    margin-bottom: 5px !important;
}
#appMessage.qchat-app-message-toast-host .qchat-app-message-toast-text {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.012em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
@media (max-width: 640px) {
    #appMessage.qchat-app-message-toast-host {
        right: 10px !important;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: calc(100vw - 20px) !important;
    }
    #appMessage.qchat-app-message-toast-host .qchat-app-message-toast {
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        padding: 11px 13px 12px !important;
        border-radius: 16px !important;
        grid-template-columns: 26px minmax(0, 1fr) !important;
        gap: 9px !important;
    }
    #appMessage.qchat-app-message-toast-host .qchat-app-message-toast-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 15px !important;
    }
    #appMessage.qchat-app-message-toast-host .qchat-app-message-toast-text {
        font-size: 15px !important;
    }
}

/* v313: hide the live source card only after its server delete succeeds;
   the fixed burn snapshot remains visible until the effect completes. */
.qchat-delete-burn-source-hidden { visibility: hidden !important; }

/* migrated from file-manager.js inline audio-group <style> */
.qchat-audio-mini-group { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.qchat-audio-mini-group .qchat-file-bundle-list { display: grid; gap: 8px; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.qchat-audio-mini-player { display: flex; align-items: center; min-width: 0; padding: 7px; border-radius: 10px; background: rgba(0,0,0,0.045); gap: 9px; width: 100%; max-width: 100%; box-sizing: border-box; }
.qchat-audio-mini-player .qchat-file-bundle-preview-icon { width: 34px; min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.qchat-audio-mini-player .qchat-file-bundle-preview-meta { min-width: 0; flex: 1 1 auto; }
.qchat-audio-mini-player .qchat-file-bundle-preview-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; }
.qchat-audio-mini-player .qchat-file-bundle-preview-size { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.74rem; }
.qchat-audio-mini-art { overflow: hidden; border-radius: 999px; background: rgba(0,0,0,0.06); transform-origin: center center; }
.qchat-audio-mini-cover { width: 34px; height: 34px; object-fit: cover; display: block; border-radius: 999px; cursor: zoom-in; transform-origin: center center; }
.qchat-audio-mini-meta { display: grid; gap: 2px; }
.qchat-audio-mini-extra { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; }
.qchat-audio-mini-progress { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 0.68rem; opacity: 0.82; margin-top: 2px; }
.qchat-audio-mini-progress .timeline { min-width: 70px; height: 5px; border-radius: 999px; background: rgba(108,117,125,0.28); position: relative; cursor: pointer; overflow: visible; isolation: isolate; }
/* Keep the real playback progress above the hover/seek preview.
   Without an explicit stacking order the later .hover-playhead sibling paints on
   top of .playhead, making the listened portion look like it disappeared while
   the pointer moves across the timeline. */
.qchat-audio-mini-progress .playhead { position: relative; z-index: 2; height: 5px; width: var(--qchat-audio-progress, 0%); border-radius: 999px; background: #0d6efd; box-shadow: 0 0 5px rgba(13,110,253,0.28); opacity: 1; pointer-events: none; transition: width 120ms linear; }
.qchat-audio-mini-progress .hover-playhead { background: rgba(13,110,253,0.38); }
.qchat-audio-mini-progress .hover-playhead { position: absolute; z-index: 1; left: 0; top: 0; width: var(--qchat-audio-hover-progress, 0%); height: 5px; border-radius: 999px; pointer-events: none; }
.qchat-audio-mini-controls { position: relative; display: block; flex: 0 0 82px; width: 82px; min-width: 82px; max-width: 82px; height: 48px; min-height: 48px; max-height: 48px; margin-left: auto; overflow: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; box-sizing: border-box; }
.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; width: 82px; min-width: 82px; max-width: 82px; height: 48px; min-height: 48px; max-height: 48px; transform: none; pointer-events: auto; } .qchat-audio-volume-wrap { position: absolute; left: 0; right: 0; bottom: 1px; display: block; width: 82px; height: 16px; overflow: visible; pointer-events: auto; transform: none; } .qchat-audio-mini-volume { display: none; } .qchat-audio-mini-controls .prev, .qchat-audio-mini-controls .play, .qchat-audio-mini-controls .next { position: absolute; top: 0; display: inline-flex; align-items: center; justify-content: center; margin: 0; transform: none; } .qchat-audio-mini-controls .prev { left: 0; } .qchat-audio-mini-controls .play { left: 27px; } .qchat-audio-mini-controls .next { right: 0; } .qchat-audio-volume-range { position: absolute; left: 4px; top: 5px; width: 74px; min-width: 74px; max-width: 74px; height: 10px; opacity: 1; transform: none; cursor: pointer; appearance: none; -webkit-appearance: none; background: transparent; } .qchat-audio-title-copy-clone { display: none; } .qchat-audio-mini-player.playing .song-name.qchat-audio-title-overflow .qchat-audio-title-copy-clone { display: inline-block; }
.qchat-audio-mini-btn { width: 26px; height: 26px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: rgba(0,0,0,0.07); color: inherit; cursor: pointer; }
.qchat-audio-mini-play { width: 30px; height: 30px; }

/* QChat CSP phase 2: static runtime presentation moved out of HTML attributes. */
.qchat-file-preview-neutral {
    background: #f8f9fa;
    border-radius: 8px;
}

.qchat-file-preview-missing {
    background: #f8f9fa;
    border: 1px dashed rgba(0, 0, 0, 0.16);
    border-radius: 8px;
}

.qchat-file-preview-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
}

.qchat-file-icon-48 { font-size: 48px; }
.qchat-file-icon-49 { font-size: 49px; }
.qchat-file-icon-36 { font-size: 36px; }
.qchat-file-icon-36-tight { font-size: 36px; line-height: 1; }
.qchat-file-icon-34-tight { font-size: 34px; line-height: 1; }
.qchat-empty-state-icon { font-size: 1.6rem; }

#voiceRecordingPanel {
    z-index: 1080;
    min-width: 320px;
}

.user-item-content,
.user-item-content .user-info {
    min-width: 0;
}

.last-message-content { max-width: 70%; }
.qchat-user-avatar-44 { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

.chat-image-preview-body {
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#forwardContactsList,
.forward-contacts-scrollable { max-height: 300px; }
.forward-contacts-scrollable { overflow-y: auto; overflow-x: hidden; }
.qchat-forward-avatar-32 { width: 32px; height: 32px; border-radius: 50%; }
.qchat-forward-avatar-32-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.qchat-forward-avatar-32-clip { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.qchat-forward-checkbox { margin-right: 5px; }

#selectionModePanel {
    display: none;
    flex: 0 0 auto;
    position: relative;
    z-index: 45;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
body.qchat-selection-mode-active #selectionModePanel { display: block; }
#selectionModePanel .qchat-selection-actions { justify-content: flex-end; }
@media (max-width: 575.98px) {
    #selectionModePanel .qchat-selection-count-wrap { width: 100%; }
    #selectionModePanel .qchat-selection-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: nowrap !important;
    }
    #selectionModePanel .qchat-selection-actions .btn {
        flex: 0 0 38px;
        width: 38px;
        height: 34px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #selectionModePanel .qchat-selection-actions .forward-selected-label,
    #selectionModePanel .qchat-selection-actions .delete-selected-label,
    #selectionModePanel .qchat-selection-actions .cancel-selection-label {
        display: none !important;
    }
    #selectionModePanel .qchat-selection-actions .svg-inline--fa,
    #selectionModePanel .qchat-selection-actions i {
        margin-right: 0 !important;
    }
}
#messageContextMenu {
    display: none;
    position: fixed;
    z-index: 1060;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.qchat-history-top-sentinel {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bs-body-bg, #fff);
    overflow-anchor: none;
}

.qchat-reply-thumb-38,
.qchat-reply-file-icon-38 {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    margin-right: 8px;
    flex: 0 0 38px;
}
.qchat-reply-thumb-38 { object-fit: cover; }
.qchat-reply-file-icon-38 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.08);
}
.qchat-reply-thumb-42 {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 8px;
}

.qchat-own-avatar-32 { width: 32px; height: 32px; object-fit: cover; }
.qchat-own-avatar-preview { max-width: 150px; max-height: 150px; object-fit: cover; }
.qchat-avatar-placeholder-32 { width: 32px; height: 32px; font-size: 14px; }
.qchat-avatar-placeholder-100 { width: 100px; height: 100px; font-size: 36px; }
.qchat-message-avatar-fallback {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    flex: 0 0 auto;
}

.qchat-profile-modal-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}
.qchat-profile-modal-avatar-initial { font-size: 42px; }
.qchat-profile-modal-avatar-loading { font-size: 20px; }
#modalProfileAvatar .profile-avatar { object-fit: cover; }
.qchat-profile-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qchat-profile-avatar-img-compact {
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-width: 22px;
    min-height: 22px;
    max-height: 22px;
    object-fit: cover;
    display: block;
    border-radius: 999px;
    overflow: hidden;
}
.qchat-external-profile-tab-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-width: 22px;
    min-height: 22px;
    max-height: 22px;
    font-size: 11px;
    line-height: 1;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

.qchat-chat-blog-title {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}
.qchat-chat-blog-more {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
.qchat-chat-blog-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    font-size: 22px;
}
.qchat-hidden-file-name { display: none !important; }
.qchat-video-preview-320 { max-width: 320px; max-height: 320px; border-radius: 12px; }

.forwarded-from { font-style: italic; opacity: 0.9; }
.qchat-file-actions-centered { text-align: center; }
.preview-image { max-width: 300px; min-width: 300px; cursor: pointer; }
.original-audio { display: none; }
.hover-playhead { width: var(--qchat-audio-hover-progress, 0%); }
.video-preview video { max-width: 400px; min-width: 300px; max-height: 300px; }
#imagePreviewModal .modal-body img { max-height: 80vh; }

.qchat-emoji-native,
.qchat-message-emoji {
    display: inline-block;
    font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
    font-variant-emoji: emoji;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: -0.12em;
    white-space: nowrap;
}
.qchat-emoji-native { vertical-align: middle; }
.qchat-emoji-category-tab {
    width: 30px;
    height: 30px;
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    box-sizing: border-box;
    padding: 0;
    line-height: 1;
}
#profileBlogEmojiPicker .qchat-emoji-btn {
    min-width: 34px;
    max-width: 34px;
    min-height: 34px;
    max-height: 34px;
    flex: 0 0 34px;
    box-sizing: border-box;
}

.qchat-profile-author-name { max-width: 180px; }
.qchat-saved-blog-card-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

#remoteVideoContainer {
    width: 320px;
    height: 320px;
    background: #111;
    position: relative;
}
#remoteVideo { width: 100%; height: 100%; object-fit: cover; }
#remoteAudio { display: none; }
#remoteAvatarOverlay { display: none; pointer-events: none; }
#remoteAvatarOverlay p { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.qchat-local-preview-container { width: 100px; height: 100px; background: #111; overflow: hidden; }
#localVideo { width: 100%; height: 100%; object-fit: cover; display: block; }
#localAvatarOverlay { display: none; pointer-events: none; background: #111; }
#localAvatarImg { width: 100%; height: 100%; object-fit: cover; display: block; }

.qchat-player-format-help {
    margin-top: 10px;
    padding: 8px;
    background: #d1ecf1;
    color: #0c5460;
    border-radius: 4px;
    font-size: 11px;
}
.player-error {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    background: #f8d7da;
    color: #721c24;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    border: 1px solid #f5c6cb;
}

.message-reply-thumb-placeholder { color: rgba(0, 0, 0, 0.45); }
.qchat-profile-blog-avatar-28 { width: 28px; height: 28px; min-width: 28px; font-size: 13px; overflow: hidden; }
.qchat-profile-blog-avatar-38 { width: 38px; height: 38px; min-width: 38px; font-size: 16px; overflow: hidden; }


/* v299: Windows Chrome does not render Unicode regional-indicator country flags
   as emoji. QChat uses same-origin raster flag assets while keeping Unicode in
   encrypted/plaintext storage and copy/paste. */
.qchat-message-flag {
    display: inline-block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: -0.28em;
}


/* QChat audio cover parity v303
 * Use the same 48px rotating cover in chat, forwarded blog cards and the blog itself.
 * Older profile-blog rules shrank the art to 34px (30px on phones) and expanded the
 * controls column only on hover, which could change the forwarded message width.
 */
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-file-bundle-preview-icon,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-art,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-cover,
.profile-blog-post .qchat-audio-mini-player .qchat-file-bundle-preview-icon,
.profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-art,
.profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-cover,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-player .qchat-file-bundle-preview-icon,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-art,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-cover {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
    flex-basis: 48px !important;
    object-fit: cover !important;
    transform-origin: center center !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player,
.profile-blog-post .qchat-audio-mini-player,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-player {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
}

.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:hover .qchat-audio-mini-controls,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.playing .qchat-audio-mini-controls,
.profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-controls,
.profile-blog-post .qchat-audio-mini-player:hover .qchat-audio-mini-controls,
.profile-blog-post .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
.profile-blog-post .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls,
.profile-blog-post .qchat-audio-mini-player.playing .qchat-audio-mini-controls,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-controls,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-player:hover .qchat-audio-mini-controls,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-player.playing .qchat-audio-mini-controls {
    flex: 0 0 82px !important;
    flex-basis: 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
}

#messagesContainer .saved-profile-blog-post .profile-blog-audio-group,
#messagesContainer .saved-profile-blog-post .profile-blog-audio-list,
#messagesContainer .saved-profile-blog-post .profile-blog-audio-attachment,
#messagesContainer .saved-profile-blog-post .profile-blog-attachment-preview,
#messagesContainer .saved-profile-blog-post .qchat-audio-mini-group,
#messagesContainer .saved-profile-blog-post .qchat-file-bundle-list-audio {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 575.98px) {
    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-file-bundle-preview-icon,
    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-art,
    .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-cover,
    .profile-blog-post .qchat-audio-mini-player .qchat-file-bundle-preview-icon,
    .profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-art,
    .profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-cover,
    #messagesContainer .saved-profile-blog-post .qchat-audio-mini-player .qchat-file-bundle-preview-icon,
    #messagesContainer .saved-profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-art,
    #messagesContainer .saved-profile-blog-post .qchat-audio-mini-player .qchat-audio-mini-cover {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        flex: 0 0 48px !important;
        flex-basis: 48px !important;
    }
}

/* QChat Updates feed + shared blog/update editor (2026-09-08) */
#updatesTab,
#updatesTab > .row,
#updatesTab > .row > [class*="col-"] {
    min-height: 0;
}

#updatesTab .qchat-updates-card {
    min-height: 0;
}

#updatesTab .qchat-updates-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.qchat-updates-composer {
    padding: .75rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-radius: .5rem;
}

.qchat-update-selected-file {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    margin-bottom: .45rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-radius: .45rem;
    min-width: 0;
}

.qchat-update-selected-file[data-kind="audio"] {
    align-items: flex-start;
    flex-wrap: wrap;
}

.qchat-update-selected-meta {
    flex: 1 1 auto;
}

.qchat-update-selected-thumb,
.qchat-update-selected-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: .4rem;
}

.qchat-update-selected-thumb {
    display: block;
    object-fit: cover;
    background: rgba(127, 127, 127, .12);
}

.qchat-update-selected-audio {
    width: min(340px, 100%);
    min-width: 220px;
    max-width: 100%;
}

.qchat-update-selected-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: rgba(127, 127, 127, .12);
}

.qchat-release-media {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem;
}

.qchat-release-media-item {
    min-width: 0;
    border-radius: .55rem;
    overflow: hidden;
}

.qchat-release-media-image {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
}

.qchat-release-media-image img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: .55rem;
}

.qchat-release-media-video {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .15));
    background: rgba(127, 127, 127, .08);
}

.qchat-release-media-play {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: #fff;
}

.qchat-release-media-file {
    display: block;
    padding: .75rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .15));
    text-decoration: none;
}

.qchat-release-media-caption {
    padding: 0 .15rem;
}

.qchat-release-modal-image,
.qchat-release-modal-video {
    max-height: 78vh;
    object-fit: contain;
}

.qchat-post-editor-composer textarea {
    min-width: 0;
}

#updatesTab .profile-blog-post {
    overflow: visible;
}

#updatesTab .profile-blog-comments-body {
    overflow: visible;
}

.qchat-updates-card-heading {
    display: flex;
    align-items: center;
    min-width: 0;
}

.qchat-updates-subtitle {
    font-size: 1rem;
    color: var(--bs-body-color, inherit) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-profile-blog-post {
    text-decoration: none !important;
}

#qchatPostEditorModal .modal-dialog {
    max-width: none;
    margin: 0;
}

#qchatPostEditorModal .modal-content {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
}

#qchatPostEditorModal .modal-header {
    padding: 1rem 1.25rem;
}

#qchatPostEditorModal .modal-body {
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
}

#qchatPostEditorModal .qchat-post-editor-composer {
    align-items: stretch;
    gap: .75rem;
}

#qchatPostEditorModal .qchat-post-editor-composer textarea {
    min-height: 220px;
    resize: vertical;
}

#qchatPostEditorModal #qchatPostEditorSaveBtn {
    min-width: 170px;
}

#qchatPostEditorModal .qchat-post-editor-section {
    padding: 1rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-radius: .75rem;
    background: rgba(127, 127, 127, .05);
}



@media (max-width: 767.98px) {
    #updatesTab .qchat-updates-scroll {
        padding: .65rem !important;
    }

    .qchat-release-media {
        grid-template-columns: 1fr;
    }

    .qchat-update-selected-thumb,
    .qchat-update-selected-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    #qchatPostEditorModal .qchat-post-editor-composer {
        flex-wrap: wrap;
    }

    #qchatPostEditorModal .qchat-post-editor-composer textarea {
        flex-basis: calc(100% - 46px);
        min-height: 180px;
    }

    #qchatPostEditorSaveBtn {
        width: 100%;
        border-radius: .375rem;
        margin-top: .5rem;
    }

    .qchat-update-selected-audio {
        min-width: 0;
        width: 100%;
    }
}


#qchatPostEditorModal .qchat-post-editor-composer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: start;
}

#qchatPostEditorModal .qchat-post-editor-action {
    align-self: start;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#qchatPostEditorModal .qchat-post-editor-save {
    min-width: 160px;
}

#qchatPostEditorModal .qchat-post-editor-input-wrap {
    min-width: 0;
}

#qchatPostEditorModal #qchatPostEditorInput {
    min-height: 220px;
}

#qchatPostEditorAttachments {
    display: grid;
    gap: .85rem;
}

.qchat-editor-existing-file {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: start;
    padding: .85rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-radius: .75rem;
    background: rgba(127, 127, 127, .03);
}

.qchat-editor-existing-preview {
    min-width: 0;
}

.qchat-editor-existing-preview .profile-blog-attachment-preview {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 120px;
}

.qchat-editor-existing-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: .6rem;
    object-fit: cover;
}

.qchat-editor-existing-meta {
    padding-top: .1rem;
}

.qchat-editor-existing-file[data-kind="audio"] {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr) auto;
}

.qchat-editor-existing-file[data-kind="audio"] .qchat-editor-existing-preview .profile-blog-attachment-preview,
.qchat-editor-existing-file[data-kind="video"] .qchat-editor-existing-preview .profile-blog-attachment-preview {
    min-height: 0;
}

.qchat-editor-existing-file .qchat-editor-remove-existing {
    padding-top: .15rem;
}

@media (max-width: 991.98px) {
    #qchatPostEditorModal .qchat-post-editor-composer {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #qchatPostEditorModal .qchat-post-editor-save {
        grid-column: 1 / -1;
        width: 100%;
    }

    .qchat-editor-existing-file,
    .qchat-editor-existing-file[data-kind="audio"] {
        grid-template-columns: 1fr;
    }

    .qchat-editor-existing-preview img {
        max-width: min(240px, 100%);
    }
}


/* updates editor thumbnail/list polish */
#qchatPostEditorModal .qchat-post-editor-composer {
    display: block;
}

#qchatPostEditorModal #qchatPostEditorInput {
    min-height: 220px;
}

#qchatPostEditorModal .qchat-post-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

#qchatPostEditorModal .qchat-post-editor-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    min-width: 0;
}

#qchatPostEditorModal .qchat-post-editor-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-left: auto;
}

#qchatPostEditorModal .qchat-post-editor-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#qchatPostEditorModal .qchat-post-editor-save {
    min-width: 160px;
}

#qchatPostEditorModal #qchatPostEditorAttachments,
#qchatPostEditorModal #qchatPostEditorNewFiles {
    display: grid;
    gap: .85rem;
}

#qchatPostEditorModal .qchat-update-selected-file {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: start;
    padding: .85rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-radius: .75rem;
    background: rgba(127, 127, 127, .03);
}

#qchatPostEditorModal .qchat-update-selected-thumb,
#qchatPostEditorModal .qchat-update-selected-icon,
#qchatPostEditorModal .qchat-update-selected-thumb-shell,
#qchatPostEditorModal .qchat-update-selected-thumb-shell .profile-blog-attachment-preview {
    width: 112px;
    min-width: 112px;
    height: 112px;
    border-radius: .75rem;
    overflow: hidden;
}

#qchatPostEditorModal .qchat-update-selected-thumb,
#qchatPostEditorModal .qchat-update-selected-thumb-shell img,
#qchatPostEditorModal .qchat-update-selected-thumb-shell video {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: .75rem;
}

#qchatPostEditorModal .qchat-update-selected-thumb-shell .profile-blog-attachment-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 127, 127, .12);
}

#qchatPostEditorModal .qchat-update-selected-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(127, 127, 127, .12);
}

#qchatPostEditorModal .qchat-update-selected-file[data-kind="audio"] {
    grid-template-columns: minmax(0, 1fr) auto;
}

#qchatPostEditorModal .qchat-update-selected-file[data-kind="audio"] .qchat-update-selected-audio,
#qchatPostEditorModal .qchat-update-selected-file[data-kind="audio"] .qchat-update-selected-audio-wrap audio {
    width: 100%;
    min-width: 0;
}

#qchatPostEditorModal .qchat-update-selected-audio-wrap,
#qchatPostEditorModal .qchat-update-selected-audio-wrap .profile-blog-attachment-preview {
    width: 100%;
    min-width: 0;
    height: auto;
    border-radius: .75rem;
    overflow: visible;
    background: transparent;
}

#qchatPostEditorModal .qchat-update-selected-meta {
    padding-top: .15rem;
}

#qchatPostEditorModal .qchat-update-selected-file .btn-link {
    padding-top: .15rem;
}

@media (max-width: 991.98px) {
    #qchatPostEditorModal .qchat-post-editor-toolbar {
        align-items: stretch;
    }

    #qchatPostEditorModal .qchat-post-editor-toolbar-meta,
    #qchatPostEditorModal .qchat-post-editor-toolbar-actions {
        width: 100%;
    }

    #qchatPostEditorModal .qchat-post-editor-toolbar-actions {
        justify-content: flex-end;
    }

    #qchatPostEditorModal .qchat-update-selected-file {
        grid-template-columns: 96px minmax(0, 1fr) auto;
    }

    #qchatPostEditorModal .qchat-update-selected-thumb,
    #qchatPostEditorModal .qchat-update-selected-icon,
    #qchatPostEditorModal .qchat-update-selected-thumb-shell,
    #qchatPostEditorModal .qchat-update-selected-thumb-shell .profile-blog-attachment-preview,
    #qchatPostEditorModal .qchat-update-selected-thumb-shell img,
    #qchatPostEditorModal .qchat-update-selected-thumb-shell video {
        width: 96px;
        min-width: 96px;
        height: 96px;
    }

    #qchatPostEditorModal .qchat-update-selected-file[data-kind="audio"] {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* updates composer/editor shared with profile blog composer */
.profile-blog-selected-attachment-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#updatesTab .qchat-updates-card,
#updatesTab .qchat-updates-scroll,
#updatesTab .qchat-updates-posts {
    width: 100%;
}

#qchatPostEditorModal .qchat-post-editor-modal-body {
    overflow-y: auto;
}

#qchatPostEditorModal .qchat-post-editor-shared-composer {
    width: 100%;
    max-width: 100%;
}

#qchatPostEditorModal .qchat-post-editor-shared-composer .qchat-profile-blog-composer-input {
    width: 100%;
    max-width: 100%;
}

#qchatPostEditorModal #qchatPostEditorInput {
    min-width: 0;
    min-height: 220px;
    resize: vertical;
}

#qchatPostEditorModal .qchat-post-editor-section {
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-radius: .85rem;
    padding: 1rem;
    background: rgba(127, 127, 127, .03);
}

#qchatPostEditorModal #qchatPostEditorAttachments,
#qchatPostEditorModal #qchatPostEditorNewFiles {
    display: block;
}

#qchatPostEditorModal .qchat-editor-existing-preview {
    padding: 0;
}

#qchatPostEditorModal .qchat-editor-existing-preview .profile-blog-attachment-preview,
#qchatPostEditorModal .qchat-editor-existing-preview img,
#qchatPostEditorModal .qchat-editor-existing-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

#qchatPostEditorModal .qchat-editor-existing-preview .file-hydration-placeholder {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2026-09-09: desktop Updates scrolling + stable on-demand video poster tiles */
#updatesTab,
#updatesTab > .row,
#updatesTab > .row > [class*="col-"],
#updatesTab > .row > [class*="col-"] > .qchat-updates-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

#updatesTab > .row > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
}

#updatesTab .qchat-updates-card {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#updatesTab .qchat-updates-scroll {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    box-sizing: border-box !important;
}

html body .qchat-deferred-video.qchat-video-preview-tile {
    position: relative !important;
    display: block !important;
    width: 520px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #111 !important;
    color: inherit !important;
    cursor: pointer !important;
}

/* Video previews use the source/poster orientation instead of forcing every clip
   into one 16:9 box. Ratio buckets keep the geometry deterministic under the
   strict CSP while still matching the real V/H shape on desktop and phones. */
html body .qchat-deferred-video[data-qchat-video-ratio-bucket="landscape-wide"] {
    width: 520px !important;
    aspect-ratio: 16 / 9 !important;
}

html body .qchat-deferred-video[data-qchat-video-ratio-bucket="landscape-standard"] {
    width: 460px !important;
    aspect-ratio: 4 / 3 !important;
}

html body .qchat-deferred-video[data-qchat-video-ratio-bucket="square"] {
    width: 380px !important;
    aspect-ratio: 1 / 1 !important;
}

html body .qchat-deferred-video[data-qchat-video-ratio-bucket="portrait-standard"] {
    width: 320px !important;
    aspect-ratio: 3 / 4 !important;
}

html body .qchat-deferred-video[data-qchat-video-ratio-bucket="portrait-tall"] {
    width: 292px !important;
    aspect-ratio: 9 / 16 !important;
}

html body .qchat-deferred-video-surface {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #111 !important;
}

html body .qchat-deferred-video .qchat-video-poster {
    position: absolute !important;
    inset: 0 !important;
    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;
    pointer-events: none !important;
}

html body .qchat-deferred-video-placeholder-icon {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    color: var(--text-muted) !important;
    pointer-events: none !important;
}

html body .qchat-deferred-video[data-qchat-poster-ready="1"] .qchat-deferred-video-placeholder-icon {
    display: none !important;
}

html body .qchat-deferred-video .qchat-deferred-video-play {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .55) !important;
    color: var(--primary-color, #0d6efd) !important;
    font-size: 26px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

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

@media (max-width: 767.98px) {
    html body .qchat-deferred-video.qchat-video-preview-tile {
        max-width: 100% !important;
    }

    html body .qchat-deferred-video[data-qchat-video-orientation="landscape"] {
        width: 100% !important;
    }

    html body .qchat-deferred-video[data-qchat-video-orientation="square"] {
        width: min(86vw, 380px) !important;
    }

    html body .qchat-deferred-video[data-qchat-video-orientation="portrait"] {
        width: min(72vw, 320px) !important;
    }
}

/* qchat v video reconcile: consistent preview geometry + updates scrollbar parity */
@media (min-width: 768px) {
    /* Standalone video messages must contribute a real intrinsic width to the
       fit-content message lane. Using max-width:100% here creates a circular
       shrink-to-fit calculation and can collapse the preview to ~100-170px. */
    html body #messagesContainer .decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile,
    html body #messagesContainer .message-content > .qchat-deferred-video.qchat-video-preview-tile {
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    html body #messagesContainer .message:has(.decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile) > .d-flex,
    html body #messagesContainer .message:has(.message-content > .qchat-deferred-video.qchat-video-preview-tile) > .d-flex {
        width: fit-content !important;
        max-width: var(--qchat-message-lane-width, 50%) !important;
    }

    html body #messagesContainer .message:has(.decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile) .message-bubble,
    html body #messagesContainer .message:has(.message-content > .qchat-deferred-video.qchat-video-preview-tile) .message-bubble,
    html body #messagesContainer .message:has(.decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile) .message-content-wrapper,
    html body #messagesContainer .message:has(.message-content > .qchat-deferred-video.qchat-video-preview-tile) .message-content-wrapper,
    html body #messagesContainer .message:has(.decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile) .message-content,
    html body #messagesContainer .message:has(.message-content > .qchat-deferred-video.qchat-video-preview-tile) .message-content,
    html body #messagesContainer .message:has(.decrypted-file-content > .qchat-deferred-video.qchat-video-preview-tile) .decrypted-file-content {
        width: fit-content !important;
        max-width: 100% !important;
    }

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

    /* Video tiles inside albums still belong to the album grid and must fill
       their assigned cell instead of using the standalone message dimensions. */
    html body .qchat-file-bundle-item-video > .qchat-deferred-video.qchat-video-preview-tile,
    html body .qchat-file-bundle-grid .qchat-deferred-video.qchat-video-preview-tile {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
    }
}

#updatesTab .qchat-updates-scroll::-webkit-scrollbar {
    width: 6px;
}
#updatesTab .qchat-updates-scroll::-webkit-scrollbar-track {
    background: transparent;
}
#updatesTab .qchat-updates-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .3);
    border-radius: 10px;
}
#updatesTab .qchat-updates-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .5);
}
#updatesTab .qchat-updates-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .3) transparent;
}
body.dark-theme #updatesTab .qchat-updates-scroll::-webkit-scrollbar-track {
    background: #0d1117;
}
body.dark-theme #updatesTab .qchat-updates-scroll::-webkit-scrollbar-thumb {
    background: #30363d;
}
body.dark-theme #updatesTab .qchat-updates-scroll {
    scrollbar-color: #30363d #0d1117;
}

/* QChat v318: media-grid video tiles must never inherit the standalone
 * 520/460/380/320/292px ratio-bucket widths. Those widths overflow narrow grid
 * tracks and the album clips its rightmost column on phones. */
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-ratio-bucket],
html body #messagesContainer .qchat-chat-blog-gallery .qchat-deferred-video.qchat-video-preview-tile[data-qchat-video-ratio-bucket] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
}
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;
    box-sizing: border-box !important;
}

/* Compact standalone video previews: same 250px bounding lane as a single
 * source-rendered photo, with the actual video ratio retained. */
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;
    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; }

/* Draggable call preview and full-window local/remote video swap. */
#callVideoStage { width: min(320px, 100%); height: 320px; max-height: 55dvh; display: inline-block; }
#callVideoStage .qchat-call-main { position: absolute !important; width: 100% !important; height: 100% !important; inset: 0 !important; z-index: 0; border: 0 !important; }
#callVideoStage .qchat-call-mini { position: absolute !important; width: min(100px, 30%) !important; height: min(100px, 30%) !important; right: auto !important; bottom: auto !important; z-index: 2; cursor: grab; touch-action: none; user-select: none; border: 1px solid #fff !important; }
#callVideoStage .qchat-call-mini:active { cursor: grabbing; }
#callVideoStage .qchat-call-mini:focus-visible { outline: 3px solid #60a5fa; outline-offset: -3px; }
#callVideoStage video, #callVideoStage img { pointer-events: none; }
#callVideoStage .qchat-call-mini #remoteAvatarImg { width: 65px; height: 65px; }
#callVideoStage .qchat-call-mini #remoteAvatarOverlay p { display: none; }
#callVideoStage .qchat-call-main video { object-fit: contain; }
#callVideoStage .qchat-call-main #localAvatarImg { object-fit: contain; }
#callModal .qchat-call-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#switchCameraBtn[hidden] { display: none !important; }
#callModal.qchat-call-expanded .modal-dialog { width: 100%; max-width: none; height: 100dvh; margin: 0; }
#callModal.qchat-call-expanded .modal-content { height: 100%; border: 0; border-radius: 0; }
#callModal.qchat-call-expanded .modal-body { display: flex; flex-direction: column; min-height: 0; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important; }
#callModal.qchat-call-expanded #callStatus { flex: 0 0 auto; margin-bottom: 10px !important; }
#callModal.qchat-call-expanded #callVideoStage { flex: 1 1 auto; width: 100%; height: auto; max-height: none; min-height: 0; }
#callModal.qchat-call-expanded .qchat-call-controls { flex: 0 0 auto; margin-top: 12px !important; }

/* Clipboard rich-text transcript: CSP-safe replacement for the former inline style. */
.qchat-copy-transcript {
    white-space: pre-wrap;
}

/* QChat Noto Animated Emoji v365: animate only a message that is exactly one emoji. */
.qchat-message-animated-emoji-wrap {
    display: inline-grid;
    width: 64px;
    height: 64px;
    place-items: center;
    vertical-align: middle;
}
.qchat-message-animated-emoji-wrap > * {
    grid-area: 1 / 1;
}
.qchat-message-animated-emoji {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    pointer-events: none;
}
.qchat-message-animated-fallback {
    display: none;
    font-size: 48px;
    line-height: 1;
}
.qchat-message-animated-fallback.qchat-message-animated-fallback-visible {
    display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
    .qchat-message-animated-emoji,
    .qchat-emoji-animated-image {
        display: none !important;
    }
    .qchat-message-animated-fallback,
    .qchat-emoji-animation-fallback {
        display: inline-block !important;
    }
}

/* QChat v383: iOS owns external-profile tab long-press; suppress native callout. */
#appTabs .qchat-external-profile-tab {
    -webkit-touch-callout: none;
}

/* Keep inline image/canvas emoji in normal text flow, including iOS zoom. */
.qchat-message-static-emoji,
.qchat-message-static-poster {
    width: 1em;
    height: 1em;
    min-width: 0;
    object-fit: contain;
    vertical-align: -0.08em;
}

/* Sidebar previews must match the surrounding text size. The old 1.15em box made
   emoji look larger than preview text and left the following text touching the
   image edge on narrow rows. */
.qchat-preview-emoji {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    margin-inline-end: 0.1em;
    vertical-align: -0.08em;
    line-height: 1;
}
.qchat-preview-emoji-source { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.qchat-preview-emoji > img.qchat-message-static-emoji,
.qchat-preview-emoji > canvas.qchat-message-static-poster { width: 100%; height: 100%; vertical-align: top; object-fit: contain; }

/* Keep the Play SVG out of the loading ring (including Font Awesome SVG replacement).
   Rotate only the ring; the centered host retains its translate transform. */
html body .qchat-deferred-video[aria-busy="true"] .qchat-deferred-video-play {
    animation: none !important;
    border: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
html body .qchat-deferred-video[aria-busy="true"] .qchat-deferred-video-play > * {
    display: none !important;
}
html body .qchat-deferred-video[aria-busy="true"] .qchat-deferred-video-play::before {
    content: none !important;
}
html body .qchat-deferred-video[aria-busy="true"] .qchat-deferred-video-play::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: 3px solid rgba(255, 255, 255, .35) !important;
    border-top-color: var(--primary-color, #0d6efd) !important;
    border-radius: 50% !important;
    background: transparent !important;
    animation: qchat-video-loading-ring .75s linear infinite !important;
    pointer-events: none !important;
}
@keyframes qchat-video-loading-ring {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}