#debugbox{
	
	display: none;
}
/* Стили для чата */
.users-list {
    max-height: none !important;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.users-list::-webkit-scrollbar {
    width: 6px;
}

.users-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.users-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.users-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.users-list {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.user-item {
    cursor: pointer;
    transition: background-color 0.2s;
    margin: 0;
    padding: 12px 15px;
    border: none;
    border-bottom: 1px solid #e9ecef;
    width: 100%;
    box-sizing: border-box;
}

.user-item:last-child {
    border-bottom: none;
}

.user-item:hover,
#chatWithUser[role="button"]:hover,
#chatWithUser[role="button"]:focus-visible {
   /* background-color: #f8f9fa; */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-item.active {
   /* background-color: #e3f2fd;*/
}

/* Стили сообщений */
.message-container {
    max-height: none !important;
    height: 100%;
    overflow-y: auto;
    padding: 15px;
   /* background-color: #f8f9fa;*/
    border-radius: 0;
}

.message {
    margin-bottom: 20px;
    padding: 0;
    border-radius: 18px;
    max-width: 75%;
    position: relative;
    transition: all 0.2s ease;
}

.message:hover {
    transform: translateY(-1px);
}

.message.received {
    margin-right: auto;
    margin-left: 0;
}



.message.sent {
    margin-left: auto;
    margin-right: 0;
}



.message-content {
    word-wrap: break-word;
    line-height: 1.4;
    font-size: 14px;
}

.message-time {
    opacity: 0.7;
    font-size: 0.75em;
    margin-top: 4px;
    display: block;
}

.message.sent .message-time {
    color: rgb(15 109 132);
}

.message.received .message-time {
    color: #6c757d;
}

/* Аватары в чате */
.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    align-self: flex-end;
    margin-bottom: 5px;
}

.avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    align-self: flex-end;
    margin-bottom: 5px;
}

/* Статусы */
.online-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.online {
    background-color: #28a745;
}

.offline {
    background-color: #dc3545;
}

.unread-badge {
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
}

/* Галочки статуса прочтения */
.message-checkmark {
    font-size: 10px;
    color: #6c757d;
    transition: all 0.3s ease;
    min-width: 12px;
    text-align: right;
}

.message.sent .message-checkmark {
    color: rgba(255, 255, 255, 0.5);
}

.message-checkmark.read {
    color: #28a745;
}

.message.sent .message-checkmark.read {
    color: #0f5132;
}


/* Улучшенные стили для списка пользователей */
.user-item-content {
    cursor: pointer;
    padding: 4px 0;
}

.profile-avatar-container {
    position: relative;
    display: flex;
    align-items: center;
}

.profile-avatar-container .profile-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.profile-avatar-container .online-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid white;
    border-radius: 50%;
}

.user-info {
    padding-left: 8px;
}

.username-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Улучшенные стили для сообщений с именами */
.message-header {
    font-size: 0.8em;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: 0.9;
}





/* Унифицированные стили для аватаров в списке пользователей */
.user-list-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.user-list-avatar-placeholder {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 20px !important;
}

/* Стили для аватаров в чате */
.message-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 20px;
}

/* Расположение аватаров и контента */
.message .d-flex {
    gap: 10px;
    align-items: flex-end;
}

.message.received .d-flex {
    flex-direction: row;
}

.message.sent .d-flex {
    flex-direction: row-reverse;
}

/* Временные сообщения */
.temporary-message {
    opacity: 0.8;
}

.temporary-message .message-bubble {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}

.temporary-message .message-time {
    font-style: italic;
}

.temporary-message .message-header {
    opacity: 0.7;
}

/* Статус доставки */
.message-status {
    font-size: 0.7em;
    margin-left: 5px;
    opacity: 0.7;
}

/* Сообщения об ошибках */
.message-error {
    opacity: 0.6;
}

.message-error .message-bubble {
    background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%) !important;
    border: 1px solid #f1aeb5;
}



/* Стили для автоматически расшифрованных медиафайлов */
.auto-decrypt-media {
    cursor: pointer;
    transition: all 0.3s ease;
}

.auto-decrypt-media:hover {
    background-color: #f8f9fa;
}

.decrypted-image,
.decrypted-video {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.decrypted-audio {
    border-radius: 8px;
}

.file-info {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Стили для автоматически расшифрованных медиафайлов */
.auto-decrypt-media {
    transition: all 0.3s ease;
}

.decrypted-image,
.decrypted-video {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 100%;
}

.decrypted-audio {
    border-radius: 8px;
    width: 100%;
}

.file-info {
    font-size: 0.875rem;
    color: #6c757d;
}

.encryption-status {
    font-size: 0.8rem;
}

/* Индикатор загрузки */
.file-preview .spinner-border {
    width: 2rem;
    height: 2rem;
}

#messagesContainer{
	 max-height: none !important;  
	 height: 100%;
}

/* ВЫСОТА БЛОКОВ - ОБНОВЛЕНО */
#messagingTab .row {
    height: 100%;
    min-height: auto;
}

#messagingTab .col-md-4,
#messagingTab .col-md-8 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#messagingTab .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

#messagingTab .card-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
}

/* Список пользователей занимает всю доступную высоту */
.users-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* КРИТИЧЕСКИЙ СТИЛЬ ДЛЯ FLEXBOX */
}

/* Контейнер сообщений занимает всю доступную высоту */
.message-container {
    flex: 1;
    overflow-y: auto;
    max-height: none !important;
    margin-bottom: 0.5rem;
    min-height: 0; /* КРИТИЧЕСКИЙ СТИЛЬ ДЛЯ FLEXBOX */
}

/* Уменьшаем отступы в сообщениях */
.message {
    margin-bottom: 0.5rem;
}

.message-bubble {
    padding: 0.5rem 0.75rem;
}



/* Стили для сворачиваемых сообщений */
.message-text {
    word-wrap: break-word;
    line-height: 1.4;
    white-space: pre-wrap;
    transition: all 0.3s ease;
}

.message-text.collapsed {
    max-height: 4.5rem; /* Ограничение в ~3 строки */
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.message-text.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5rem;
    background: linear-gradient(transparent, var(--message-bg, #f8f9fa));
    pointer-events: none;
    border-radius: 0 0 8px 8px;
}

.message-text.collapsed:hover::after {
    background: linear-gradient(transparent, var(--message-hover-bg, #e9ecef));
}

/* Индикатор что сообщение свернуто */
.message-text.collapsed::before {
    content: '⋯';
    position: absolute;
    bottom: 0.25rem;
    right: 0.5rem;
    background: var(--message-bg, #f8f9fa);
    color: #6c757d;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    z-index: 2;
}



/* Анимация раскрытия */
.message-text.expanding {
    animation: expandMessage 0.3s ease-out;
}

@keyframes expandMessage {
    from {
        max-height: 4.5rem;
    }
    to {
        max-height: 1000px; /* Достаточно большое значение */
    }
}


.media-controls{
	text-align:right;
}



/* Стили для переключаемых сворачиваемых сообщений */
.message-text {
    word-wrap: break-word;
    line-height: 1.4;
    white-space: pre-wrap;
    transition: all 0.3s ease;
    position: relative;
}

.message-text.collapsible {
    cursor: pointer;
}

.message-text.collapsed {
    max-height: 4.5rem; /* Ограничение в ~3 строки */
    overflow: hidden;
}

.message-text.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5rem;
    background: linear-gradient(transparent, var(--message-bg, #f8f9fa));
    pointer-events: none;
    border-radius: 0 0 8px 8px;
}

.message-text.collapsed:hover::after {
    background: linear-gradient(transparent, var(--message-hover-bg, #e9ecef));
}

/* Индикаторы состояния */
.message-text.collapsed .expand-indicator {
    display: block;
}

.message-text:not(.collapsed) .collapse-indicator {
    display: block;
}

.message-text .expand-indicator,
.message-text .collapse-indicator {
    display: none;
    position: absolute;
    bottom: 0.25rem;
    right: 0.5rem;
    background: var(--message-bg, #f8f9fa);
    color: #6c757d;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    z-index: 2;
    border: 1px solid var(--border-color, #dee2e6);
}

.message-text .expand-indicator::after {
    content: '⋯';
}

.message-text .collapse-indicator::after {
    content: '▲';
}

.message-text:hover .expand-indicator,
.message-text:hover .collapse-indicator {
    background: var(--message-hover-bg, #e9ecef);
}

/* Анимации */
.message-text.expanding {
    animation: expandMessage 0.3s ease-out;
}

.message-text.collapsing {
    animation: collapseMessage 0.3s ease-out;
}

@keyframes expandMessage {
    from {
        max-height: 4.5rem;
    }
    to {
        max-height: 1000px;
    }
}

@keyframes collapseMessage {
    from {
        max-height: 1000px;
    }
    to {
        max-height: 4.5rem;
    }
}

/* Компактные индикаторы для мобильных */
@media (max-width: 768px) {
    .message-text .expand-indicator::after {
        content: '⋯';
    }
    
    .message-text .collapse-indicator::after {
        content: '▲';
    }
    
    .message-text.collapsed {
        max-height: 3.5rem;
    }
}


/* chat.css */
#messagingTab .col-md-3,
#messagingTab .col-md-9 {
    height: 100%;
    display: flex;
    flex-direction: column;
}


#chatWithUser {
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
}

/* The chat title opens chat details/attachments. Reuse the same interaction
   language as a contact row: neutral idle text, contact-like hover/focus and
   the same pressed selection state. */
#chatWithUser[role="button"] {
    cursor: pointer;
    border-radius: 0;
    text-decoration: none;
    outline: none;
    transition: background-color 0.2s;
}

/* КОНТЕЙНЕР ДЛЯ ГАРАНТИИ СКРОЛЛА СПИСКА ПОЛЬЗОВАТЕЛЕЙ */
.users-list-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0; /* КРИТИЧЕСКИЙ СТИЛЬ ДЛЯ FLEXBOX */
}



/* Стили для индикатора набора текста */
.typing-indicator {
    opacity: 0.7;
    margin: 5px 0;
}

.typing-content {
    display: flex;
    align-items: center;
    padding: 8px 12px;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 3px;
}

.typing-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6c757d;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-dots .dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Компактные стили для индикатора */
@media (max-width: 768px) {
    .typing-content {
        padding: 6px 10px;
    }
    
    .typing-dots .dot {
        width: 5px;
        height: 5px;
    }
}

/* Стили для темной темы */
body.dark-theme .typing-dots .dot {
    background-color: #adb5bd;
}

body.dark-theme .typing-indicator .text-muted {
    color: #adb5bd !important;
}



/* Добавить в существующие стили */



.user-info {
    min-width: 0;
}

.last-message-preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-width: 200px; */
    color: #6c757d;
    font-size: 0.875rem;
    line-height: 1.3;
}

.profile-avatar-container {
    position: relative;
    flex-shrink: 0;
}

.user-list-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.user-list-avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.online-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

.online-status.online {
    background-color: #28a745;
}

.online-status.offline {
    background-color: #6c757d;
}

.username-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    display: inline-block;
}

/* ДОБАВИТЬ в существующие стили */
.user-item.self-user {
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
}

.user-item.self-user:hover {
    background-color: #ffeaa7;
}

.last-message-preview.self-message {
    color: #856404;
    font-style: italic;
}


.badge {
 padding: .35em .65em;
 font-size: .75em;
 /* font-weight: 700; */
 line-height: 1;
 color: #fff;
 text-align: center;
 white-space: nowrap;
 vertical-align: top;
 border-radius: .25rem;
 /* position: absolute; */
 /* right: 20px; */
}

/* qchat v71: regular messages use the same wide mobile lane as audio below 768px. */
@media (max-width: 767.98px) {
    #messagesContainer {
        --qchat-message-lane-width: 100% !important;
        --qchat-message-mobile-lane-width: 100% !important;
        --qchat-message-row-gap: 6px !important;
    }

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

    #messagesContainer .message > .d-flex,
    #messagesContainer .message.sent > .d-flex,
    #messagesContainer .message.received > .d-flex,
    #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex,
    #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex,
    #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex,
    #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
        gap: var(--qchat-message-row-gap, 6px) !important;
    }

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

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

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

    #messagesContainer .message .message-bubble,
    #messagesContainer .message.sent .message-bubble,
    #messagesContainer .message.received .message-bubble,
    #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble,
    #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble,
    #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble,
    #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble {
        flex: 1 1 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

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

    #messagesContainer .message .qchat-file-bundle-message {
        width: 100% !important;
        max-width: 100% !important;
    }

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

/* qchat v72: single image messages keep the same compact tile sizing as image bundles below 768px. */
@media (max-width: 767.98px) {
    #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile,
    #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile {
        width: min(170px, 44vw) !important;
        max-width: min(170px, 44vw) !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
        align-self: flex-start !important;
    }

    #messagesContainer .message.received .message-content > .file-preview.image-preview.qchat-chat-image-tile,
    #messagesContainer .message.received .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    #messagesContainer .message.sent .message-content > .file-preview.image-preview.qchat-chat-image-tile,
    #messagesContainer .message.sent .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

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

@media (max-width: 575.98px) {
    #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile,
    #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile {
        width: min(148px, 44vw) !important;
        max-width: min(148px, 44vw) !important;
    }
}

/* qchat v74: photo attachment messages use the <=768px image sizing up to 1200px. */
@media (min-width: 576px) and (max-width: 1200px) {
    #messagesContainer {
        --qchat-photo-message-lane-width: 100% !important;
    }

    #messagesContainer .message:has(.qchat-chat-image-tile),
    #messagesContainer .message:has(.qchat-file-bundle-grid-images),
    #messagesContainer .message.sent:has(.qchat-chat-image-tile),
    #messagesContainer .message.sent:has(.qchat-file-bundle-grid-images),
    #messagesContainer .message.received:has(.qchat-chat-image-tile),
    #messagesContainer .message.received:has(.qchat-file-bundle-grid-images) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #messagesContainer .message:has(.qchat-chat-image-tile) > .d-flex,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) > .d-flex {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
        gap: var(--qchat-message-row-gap, 6px) !important;
    }

    #messagesContainer .message.received:has(.qchat-chat-image-tile) > .d-flex,
    #messagesContainer .message.received:has(.qchat-file-bundle-grid-images) > .d-flex {
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-content: flex-start !important;
    }

    #messagesContainer .message.sent:has(.qchat-chat-image-tile) > .d-flex,
    #messagesContainer .message.sent:has(.qchat-file-bundle-grid-images) > .d-flex {
        margin-left: auto !important;
        margin-right: 0 !important;
        justify-content: flex-end !important;
    }

    #messagesContainer .message:has(.qchat-chat-image-tile) .message-bubble,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) .message-bubble {
        flex: 1 1 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #messagesContainer .message:has(.qchat-chat-image-tile) .message-content-wrapper,
    #messagesContainer .message:has(.qchat-chat-image-tile) .message-header,
    #messagesContainer .message:has(.qchat-chat-image-tile) .message-content,
    #messagesContainer .message:has(.qchat-chat-image-tile) .message-footer,
    #messagesContainer .message:has(.qchat-chat-image-tile) .decrypted-file-content,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) .message-content-wrapper,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) .message-header,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) .message-content,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) .message-footer,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) .decrypted-file-content,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) .qchat-file-bundle-message,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) .qchat-file-bundle-groups,
    #messagesContainer .message:has(.qchat-file-bundle-grid-images) .qchat-file-bundle-group {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile,
    #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile {
        width: min(170px, 44vw) !important;
        max-width: min(170px, 44vw) !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
        align-self: flex-start !important;
    }

    #messagesContainer .message.received .message-content > .file-preview.image-preview.qchat-chat-image-tile,
    #messagesContainer .message.received .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    #messagesContainer .message.sent .message-content > .file-preview.image-preview.qchat-chat-image-tile,
    #messagesContainer .message.sent .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

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

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

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

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

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

    #messagesContainer .message.received .qchat-file-bundle-grid {
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-content: start !important;
    }
}



/* qchat v77: hard visual cap for compact audio. This must stay after v69/v70 full-width overrides. */
#messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble,
#messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble,
#messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble,
#messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble,
#messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble,
#messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble,
#messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble,
#messagesContainer .message:has(.qchat-audio-mini-player.playing) .message-bubble {
    flex: 0 1 464px !important;
    flex-basis: 464px !important;
    width: 100% !important;
    max-width: 464px !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 464px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#messagesContainer .message.sent:has(.qchat-audio-mini-player) .message-bubble,
#messagesContainer .message.sent:has(.qchat-audio-mini-group) .message-bubble,
#messagesContainer .message.sent:has(.qchat-file-bundle-group-audio) .message-bubble,
#messagesContainer .message.sent:has(.qchat-file-bundle-list-audio) .message-bubble {
    margin-left: auto !important;
    margin-right: 0 !important;
}

#messagesContainer .message.received:has(.qchat-audio-mini-player) .message-bubble,
#messagesContainer .message.received:has(.qchat-audio-mini-group) .message-bubble,
#messagesContainer .message.received:has(.qchat-file-bundle-group-audio) .message-bubble,
#messagesContainer .message.received:has(.qchat-file-bundle-list-audio) .message-bubble {
    margin-left: 0 !important;
    margin-right: auto !important;
}

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

.qchat-audio-mini-group,
.qchat-audio-mini-group .qchat-file-bundle-list,
.qchat-file-bundle-list-audio,
.qchat-file-bundle-group-audio,
.qchat-audio-mini-player,
.qchat-audio-mini-player:hover,
.qchat-audio-mini-player:focus-within,
.qchat-audio-mini-player.qchat-audio-controls-open,
.qchat-audio-mini-player.playing,
#messagesContainer .message .qchat-audio-mini-player,
#messagesContainer .message .qchat-audio-mini-player:hover,
#messagesContainer .message .qchat-audio-mini-player:focus-within,
#messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open,
#messagesContainer .message .qchat-audio-mini-player.playing,
.profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player {
    flex: 0 1 464px !important;
    width: 100% !important;
    max-width: 464px !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 464px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-meta,
#messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress.time,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress .timeline {
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 520px) {
    #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble,
    #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble,
    #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble,
    #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble,
    #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper,
    #messagesContainer .message:has(.qchat-audio-mini-player) .message-content,
    #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content,
    .qchat-audio-mini-group,
    .qchat-file-bundle-list-audio,
    .qchat-file-bundle-group-audio,
    .qchat-audio-mini-player,
    #messagesContainer .message .qchat-audio-mini-player {
        max-width: 100% !important;
        max-inline-size: 100% !important;
    }
}

/* qchat v78: keep avatars uniform on tablet/desktop. Audio messages were inheriting the compact 30px avatar from audio-only responsive rules. */
@media (min-width: 768px) {
    #messagesContainer .message .message-avatar,
    #messagesContainer .message:has(.qchat-audio-mini-player) .message-avatar,
    #messagesContainer .message:has(.qchat-audio-mini-group) .message-avatar,
    #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-avatar,
    #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-avatar,
    #messagesContainer .message .avatar-placeholder.encrypted-message-avatar,
    #messagesContainer .message:has(.qchat-audio-mini-player) .avatar-placeholder.encrypted-message-avatar,
    #messagesContainer .message:has(.qchat-audio-mini-group) .avatar-placeholder.encrypted-message-avatar,
    #messagesContainer .message:has(.qchat-file-bundle-group-audio) .avatar-placeholder.encrypted-message-avatar,
    #messagesContainer .message:has(.qchat-file-bundle-list-audio) .avatar-placeholder.encrypted-message-avatar {
        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;
        inline-size: 48px !important;
        block-size: 48px !important;
        object-fit: cover !important;
        box-sizing: border-box !important;
    }
}


/* qchat v81: Telegram-like 4-photo album grid for chat image bundles. */
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"],
#messagesContainer .message .qchat-file-bundle-message[data-file-bundle-count="4"] .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="4"] {
    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(420px, 100%) !important;
    max-width: 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;
}

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

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

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

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

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

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

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

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


/* qchat v82: Telegram-like 3-photo album grid for chat image bundles. */
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="3"],
#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"] {
    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(420px, 100%) !important;
    max-width: 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;
}

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

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

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

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

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

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

#messagesContainer .message.received .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="3"] {
    margin-left: 0 !important;
    margin-right: auto !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(420px, 100%) !important;
    max-width: 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(420px, 100%) !important;
    max-width: 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 / 760 !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"],
#messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="3"],
#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"] {
    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(420px, 100%) !important;
    max-width: 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 v90: ordinary chat single-image tiles must use the real image ratio, not the old square tile. */
html body #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"],
html body #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"] {
    display: block !important;
    width: min(var(--qchat-single-preview-width, 420px), 100%) !important;
    max-width: min(420px, 100%) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 300px !important;
    aspect-ratio: var(--qchat-single-ratio, 1.3333) !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"] > img.chat-image-preview,
html body #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"] > img.chat-image-preview {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
}


/* qchat v92: make 2-image chat albums use the maximum available message width.
   The grid still preserves image proportions through --qchat-album-ratio / columns,
   but the album shell no longer shrinks to the natural/fit-content width. */
html body #messagesContainer .message:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]) .message-bubble {
    flex: 1 1 0 !important;
    width: 100% !important;
    max-width: min(520px, 100%) !important;
    min-width: 0 !important;
}

html body #messagesContainer .message:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]) .message-content-wrapper,
html body #messagesContainer .message:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]) .message-content,
html body #messagesContainer .message:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]) .decrypted-file-content,
html body #messagesContainer .message:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]) .qchat-file-bundle-message,
html body #messagesContainer .message:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]) .qchat-file-bundle-groups,
html body #messagesContainer .message:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]) .qchat-file-bundle-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message .qchat-file-bundle-message[data-file-bundle-count="2"],
html body #messagesContainer .message .qchat-file-bundle-group[data-file-group-count="2"],
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="2"],
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"],
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message.sent:has(.qchat-file-bundle-grid-images[data-file-group-count="2"]) > .d-flex {
    justify-content: flex-end !important;
}

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

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


/* qchat calls: header buttons + modal */
.qchat-call-buttons {
    gap: 0.25rem;
    flex: 0 0 auto;
}

.qchat-call-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.qchat-call-btn i {
    font-size: 0.92rem;
}

#callModal .modal-content {
    border-radius: 1rem;
    overflow: hidden;
}

#remoteVideoContainer {
    border-radius: 1rem;
}

#remoteAvatarImg {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    object-fit: cover;
}

#localVideo {
    object-fit: cover;
    background: #111;
}



/* qchat search badge must stay inside the search button, not over call buttons */
#openGlobalSearchBtn {
    flex: 0 0 auto;
}

#openGlobalSearchBtn #searchCacheBadge {
    top: -6px !important;
    right: -6px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 18px;
}

.card-header #chatWithUser {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .qchat-call-btn {
        width: 30px;
        height: 30px;
    }

    #remoteVideoContainer {
        width: min(78vw, 320px) !important;
        height: min(78vw, 320px) !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(520px, 100%) !important;
    max-width: min(520px, 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;
}

.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-gallery-item,
.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-gallery-tile,
.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-attachment-preview,
.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"] img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
}

/* qchat v94: profile-blog 2-image albums use Telegram/chat-style corners:
   only the outside corners are rounded, the inner seam stays square. */
.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-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-2-side"] > .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-2-side"] > .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-2-side"] > .profile-blog-gallery-item:nth-child(1) img {
    border-radius: 12px 0 0 12px !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-2-side"] > .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-2-side"] > .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-2-side"] > .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-2-side"] > .profile-blog-gallery-item:nth-child(2) img {
    border-radius: 0 12px 12px 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-2-stack"] > .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-2-stack"] > .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-2-stack"] > .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-2-stack"] > .profile-blog-gallery-item:nth-child(1) img {
    border-radius: 12px 12px 0 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-2-stack"] > .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-2-stack"] > .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-2-stack"] > .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-2-stack"] > .profile-blog-gallery-item:nth-child(2) img {
    border-radius: 0 0 12px 12px !important;
    overflow: hidden !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 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(520px, 100%) !important;
    max-width: min(520px, 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(520px, 100%) !important;
    max-width: min(520px, 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(520px, 100%) !important;
    max-width: min(520px, 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 v108: Telegram-like media albums use 12 columns; do not collapse rows into 2 blind columns. */
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
}
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] > .qchat-file-bundle-item-image,
.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"] > .profile-blog-gallery-item {
    aspect-ratio: auto !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(520px, 100%) !important;
    max-width: min(520px, 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(520px, 100%) !important;
    max-width: min(520px, 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 v132: saved-blog audio players must use the same 464px player lane.
   Keep the whole saved blog card in the normal blog/message lane, but make the
   audio/file lane inside that card wide enough for a 464px player. */
html body #messagesContainer {
    --qchat-audio-player-max-width: 464px;
    --qchat-audio-saved-blog-card-width: min(620px, 100%);
}

/* Saved blog cards that contain audio: reserve enough width for the 464px player.
   This also feeds older inline styles that use --qchat-saved-blog-lane-width. */
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-group),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-group-audio),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio) {
    --qchat-saved-blog-lane-width: var(--qchat-audio-saved-blog-card-width) !important;
}

html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player) > .d-flex,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-group) > .d-flex,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-group-audio) > .d-flex,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio) > .d-flex,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player) > .d-flex.w-100,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-group) > .d-flex.w-100,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-group-audio) > .d-flex.w-100,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio) > .d-flex.w-100 {
    width: var(--qchat-audio-saved-blog-card-width) !important;
    max-width: var(--qchat-audio-saved-blog-card-width) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player) .message-bubble,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-group) .message-bubble,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-group-audio) .message-bubble,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio) .message-bubble,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player) .message-content-wrapper,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player) .message-content,
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player) .saved-profile-blog-post {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Only the audio lane inside the saved-blog card is capped to 464px.
   Images and galleries are intentionally not targeted here. */
html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-group,
html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-list,
html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-attachment,
html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-attachment > .profile-blog-attachment-preview,
html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-group,
html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-group > .qchat-file-bundle-list,
html body #messagesContainer .saved-profile-blog-post .qchat-file-bundle-group-audio,
html body #messagesContainer .saved-profile-blog-post .qchat-file-bundle-list-audio {
    width: min(var(--qchat-audio-player-max-width), 100%) !important;
    max-width: min(var(--qchat-audio-player-max-width), 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-player,
html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-player:hover,
html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-player:focus-within,
html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-player.qchat-audio-controls-open,
html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-player.playing {
    width: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 520px) {
    html body #messagesContainer {
        --qchat-audio-saved-blog-card-width: 100%;
    }

    html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-group,
    html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-list,
    html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-attachment,
    html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-attachment > .profile-blog-attachment-preview,
    html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-group,
    html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-group > .qchat-file-bundle-list,
    html body #messagesContainer .saved-profile-blog-post .qchat-file-bundle-group-audio,
    html body #messagesContainer .saved-profile-blog-post .qchat-file-bundle-list-audio {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* qchat v133: mobile forwarded text replies and saved-blog image lanes.
   - Below 768px forwarded text cards should not stretch across the whole chat.
   - Saved blog image grids should use the same compact media lane as chat image messages.
   This block is intentionally late and high-specificity because older mobile rules use
   width:100% !important on generic .message/.message-bubble selectors. */
@media (max-width: 767.98px) {
    html body #messagesContainer .message.qchat-saved-forwarded-reply:not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)),
    html body #messagesContainer .message:has(.qchat-forwarded-as-chat-card):not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message.qchat-saved-forwarded-reply:not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) > .d-flex,
    html body #messagesContainer .message:has(.qchat-forwarded-as-chat-card):not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) > .d-flex,
    html body #messagesContainer .message.qchat-saved-forwarded-reply:not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) > .d-flex.w-100,
    html body #messagesContainer .message:has(.qchat-forwarded-as-chat-card):not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) > .d-flex.w-100 {
        width: fit-content !important;
        max-width: min(430px, calc(100vw - 84px)) !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        box-sizing: border-box !important;
        gap: var(--qchat-message-row-gap, 6px) !important;
    }

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

    html body #messagesContainer .message.received.qchat-saved-forwarded-reply:not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) > .d-flex,
    html body #messagesContainer .message.received:has(.qchat-forwarded-as-chat-card):not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) > .d-flex {
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-content: flex-start !important;
    }

    html body #messagesContainer .message.qchat-saved-forwarded-reply:not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .message-bubble,
    html body #messagesContainer .message:has(.qchat-forwarded-as-chat-card):not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .message-bubble {
        flex: 0 1 auto !important;
        width: fit-content !important;
        max-width: min(430px, calc(100vw - 84px)) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body #messagesContainer .message.qchat-saved-forwarded-reply:not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .message-content-wrapper,
    html body #messagesContainer .message.qchat-saved-forwarded-reply:not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .message-content,
    html body #messagesContainer .message.qchat-saved-forwarded-reply:not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .forwarded-message-container,
    html body #messagesContainer .message.qchat-saved-forwarded-reply:not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .qchat-forwarded-as-chat-card,
    html body #messagesContainer .message:has(.qchat-forwarded-as-chat-card):not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .message-content-wrapper,
    html body #messagesContainer .message:has(.qchat-forwarded-as-chat-card):not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .message-content,
    html body #messagesContainer .message:has(.qchat-forwarded-as-chat-card):not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .forwarded-message-container,
    html body #messagesContainer .message:has(.qchat-forwarded-as-chat-card):not(:has(.qchat-chat-image-tile)):not(:has(.qchat-file-bundle-grid-images)):not(:has(.qchat-audio-mini-player)):not(:has(.saved-profile-blog-post)) .qchat-forwarded-as-chat-card {
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message.qchat-saved-forwarded-reply .forwarded-text-content,
    html body #messagesContainer .message:has(.qchat-forwarded-as-chat-card) .forwarded-text-content {
        max-width: min(360px, calc(100vw - 116px)) !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* Saved blog image posts without audio: Favorites uses the normal full mobile lane.
       Inline card styles may still use width:100% !important, so the row variable
       must also resolve to the complete message width for every image count. */
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)) {
        --qchat-saved-blog-lane-width: 100% !important;
    }

    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="1"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)) {
        --qchat-saved-blog-lane-width: 100% !important;
    }

    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="2"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)),
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)),
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)) {
        --qchat-saved-blog-lane-width: 100% !important;
    }

    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)),
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="4"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)),
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="5"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)),
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="6"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)),
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="7"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)),
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="8"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)),
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"]):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)) {
        --qchat-saved-blog-lane-width: 100% !important;
    }

    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)) > .d-flex,
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)) > .d-flex.w-100 {
        width: var(--qchat-saved-blog-lane-width) !important;
        max-width: var(--qchat-saved-blog-lane-width) !important;
        flex: 0 1 var(--qchat-saved-blog-lane-width) !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message.sent:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)) > .d-flex {
        margin-left: auto !important;
        margin-right: 0 !important;
        justify-content: flex-start !important;
    }

    html body #messagesContainer .message.received:has(.saved-profile-blog-post):has(.profile-blog-gallery.qchat-file-bundle-grid-images):not(:has(.qchat-audio-mini-player)):not(:has(.qchat-file-bundle-group-audio)):not(:has(.qchat-file-bundle-list-audio)) > .d-flex {
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-content: flex-start !important;
    }
}

/* qchat v80: keep the classic audio player compact inside Profile Blog too.
   Blog renderers may set width/max-width:100% !important on .audio_card;
   cap the blog audio lane wrappers so the inline 100% resolves to 300px. */
:root {
    --qchat-classic-audio-max-width: 300px;
}

.profile-blog-post .profile-blog-attachments:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .profile-blog-file-bundle-message:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .profile-blog-file-bundle-groups:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .profile-blog-audio-group:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .profile-blog-audio-list:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .profile-blog-audio-attachment:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .profile-blog-attachment-preview:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .qchat-file-bundle-group-audio:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .qchat-file-bundle-list-audio:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .qchat-file-bundle-item-audio:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .qchat-file-bundle-preview-item:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .qchat-file-bundle-item:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .profile-blog-attachment:has(.audio_card.qchat-audio-classic-card),
.profile-blog-post .profile-blog-file-list:has(.audio_card.qchat-audio-classic-card) {
    width: min(var(--qchat-classic-audio-max-width), 100%) !important;
    max-width: var(--qchat-classic-audio-max-width) !important;
    min-width: 0 !important;
    flex: 0 1 var(--qchat-classic-audio-max-width) !important;
    flex-basis: var(--qchat-classic-audio-max-width) !important;
    justify-self: start !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
}

.profile-blog-post .audio_card.qchat-audio-classic-card,
.profile-blog-post .qchat-audio-classic-card,
.profile-blog-post .audio_card.qchat-audio-classic-card .current-song,
.profile-blog-post .audio_card.qchat-audio-classic-card .qchat-audio-classic-player,
.profile-blog-post .qchat-audio-classic-player,
.profile-blog-post .blog-audio-current.qchat-audio-classic-player,
.profile-blog-audio-section .audio_card.qchat-audio-classic-card,
.profile-blog-audio-section .qchat-audio-classic-player,
.profile-blog-attachment-preview .audio_card.qchat-audio-classic-card,
.profile-blog-attachment-preview .qchat-audio-classic-player {
    width: min(var(--qchat-classic-audio-max-width), 100%) !important;
    max-width: var(--qchat-classic-audio-max-width) !important;
    min-width: 0 !important;
    flex: 0 1 var(--qchat-classic-audio-max-width) !important;
    flex-basis: var(--qchat-classic-audio-max-width) !important;
    justify-self: start !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.profile-blog-post .audio_card.qchat-audio-classic-card .song-name,
.profile-blog-post .audio_card.qchat-audio-classic-card .song-autor,
.profile-blog-post .qchat-audio-classic-player .song-name,
.profile-blog-post .qchat-audio-classic-player .song-autor,
.profile-blog-audio-section .qchat-audio-classic-player .song-name,
.profile-blog-audio-section .qchat-audio-classic-player .song-autor {
    max-width: calc(var(--qchat-classic-audio-max-width) - 24px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

@media (max-width: 300px) {
    .profile-blog-post .profile-blog-attachments:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .profile-blog-file-bundle-message:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .profile-blog-file-bundle-groups:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .profile-blog-audio-group:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .profile-blog-audio-list:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .profile-blog-audio-attachment:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .profile-blog-attachment-preview:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .qchat-file-bundle-group-audio:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .qchat-file-bundle-list-audio:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .qchat-file-bundle-item-audio:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .qchat-file-bundle-preview-item:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .qchat-file-bundle-item:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .profile-blog-attachment:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .profile-blog-file-list:has(.audio_card.qchat-audio-classic-card),
    .profile-blog-post .audio_card.qchat-audio-classic-card,
    .profile-blog-post .qchat-audio-classic-card,
    .profile-blog-post .audio_card.qchat-audio-classic-card .current-song,
    .profile-blog-post .audio_card.qchat-audio-classic-card .qchat-audio-classic-player,
    .profile-blog-post .qchat-audio-classic-player,
    .profile-blog-post .blog-audio-current.qchat-audio-classic-player,
    .profile-blog-audio-section .audio_card.qchat-audio-classic-card,
    .profile-blog-audio-section .qchat-audio-classic-player,
    .profile-blog-attachment-preview .audio_card.qchat-audio-classic-card,
    .profile-blog-attachment-preview .qchat-audio-classic-player {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
}


/* qchat v81: saved blog cards with the classic audio player must not inherit
   the wide audio/blog lane. The renderer writes inline width using
   --qchat-saved-blog-lane-width on the message row, so override that variable
   for classic-player saved-blog cards and keep only the player capped at 300px. */
html body #messagesContainer .message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card),
html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-classic-player),
.message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card),
.message:has(.saved-profile-blog-post .qchat-audio-classic-player) {
    --qchat-classic-audio-max-width: 300px;
    --qchat-saved-blog-classic-audio-card-width: min(360px, 100%);
    --qchat-saved-blog-lane-width: var(--qchat-saved-blog-classic-audio-card-width) !important;
    --qchat-audio-saved-blog-card-width: var(--qchat-saved-blog-classic-audio-card-width) !important;
}

html body #messagesContainer .message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) > .d-flex,
html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-classic-player) > .d-flex,
html body #messagesContainer .message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) > .d-flex.w-100,
html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-classic-player) > .d-flex.w-100,
.message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) > .d-flex,
.message:has(.saved-profile-blog-post .qchat-audio-classic-player) > .d-flex,
.message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) > .d-flex.w-100,
.message:has(.saved-profile-blog-post .qchat-audio-classic-player) > .d-flex.w-100 {
    width: var(--qchat-saved-blog-classic-audio-card-width) !important;
    max-width: var(--qchat-saved-blog-classic-audio-card-width) !important;
    min-width: 0 !important;
    flex: 0 1 var(--qchat-saved-blog-classic-audio-card-width) !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message.sent:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) > .d-flex,
html body #messagesContainer .message.sent:has(.saved-profile-blog-post .qchat-audio-classic-player) > .d-flex,
.message.sent:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) > .d-flex,
.message.sent:has(.saved-profile-blog-post .qchat-audio-classic-player) > .d-flex {
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
}

html body #messagesContainer .message.received:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) > .d-flex,
html body #messagesContainer .message.received:has(.saved-profile-blog-post .qchat-audio-classic-player) > .d-flex,
.message.received:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) > .d-flex,
.message.received:has(.saved-profile-blog-post .qchat-audio-classic-player) > .d-flex {
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
}

html body #messagesContainer .message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) .saved-profile-blog-post,
html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-classic-player) .saved-profile-blog-post,
.message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) .saved-profile-blog-post,
.message:has(.saved-profile-blog-post .qchat-audio-classic-player) .saved-profile-blog-post {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) .saved-profile-blog-header,
html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-classic-player) .saved-profile-blog-header,
.message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card) .saved-profile-blog-header,
.message:has(.saved-profile-blog-post .qchat-audio-classic-player) .saved-profile-blog-header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
}

@media (max-width: 360px) {
    html body #messagesContainer .message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card),
    html body #messagesContainer .message:has(.saved-profile-blog-post .qchat-audio-classic-player),
    .message:has(.saved-profile-blog-post .audio_card.qchat-audio-classic-card),
    .message:has(.saved-profile-blog-post .qchat-audio-classic-player) {
        --qchat-saved-blog-classic-audio-card-width: 100%;
    }
}

/* qchat v134: unify non-classic compact audio player width.
   The player itself must be 464px everywhere. In saved-blog cards the card
   gets only enough room for a 464px player plus its padding; in the real Blog
   tab we also override old inline 440px wrappers by forcing the audio lane's
   min-width to 464px when space allows. Classic player remains governed by
   the separate 300px rules. */
html body {
    --qchat-audio-mini-target-width: 464px;
    --qchat-audio-mini-saved-card-width: min(calc(var(--qchat-audio-mini-target-width) + 2rem + 2px), 100%);
}

html body #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)),
html body #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)),
html body #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)),
html body #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)) {
    --qchat-saved-blog-lane-width: var(--qchat-audio-mini-saved-card-width) !important;
    --qchat-audio-saved-blog-card-width: var(--qchat-audio-mini-saved-card-width) !important;
}

html body #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,
html body #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,
html body #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,
html body #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,
html body #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.w-100,
html body #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.w-100,
html body #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.w-100,
html body #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.w-100 {
    width: var(--qchat-audio-mini-saved-card-width) !important;
    max-width: var(--qchat-audio-mini-saved-card-width) !important;
    min-width: 0 !important;
    flex: 0 1 var(--qchat-audio-mini-saved-card-width) !important;
    box-sizing: border-box !important;
}

html body #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,
html body #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)) .saved-profile-blog-post,
html body #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)) .saved-profile-blog-post,
html body #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)) .saved-profile-blog-post {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body .profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-has-audio:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body .profile-blog-post .profile-blog-file-bundle-message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body .profile-blog-post .profile-blog-file-bundle-groups:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body .profile-blog-post .profile-blog-audio-group:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body .profile-blog-post .profile-blog-audio-list:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body .profile-blog-post .profile-blog-audio-attachment:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body .profile-blog-post .profile-blog-attachment-preview:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body .profile-blog-post .qchat-audio-mini-group:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body .profile-blog-post .qchat-file-bundle-group-audio:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body .profile-blog-post .qchat-file-bundle-list-audio:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) {
    width: min(var(--qchat-audio-mini-target-width), 100%) !important;
    min-width: min(var(--qchat-audio-mini-target-width), 100%) !important;
    max-width: min(var(--qchat-audio-mini-target-width), 100%) !important;
    max-inline-size: min(var(--qchat-audio-mini-target-width), 100%) !important;
    flex-basis: min(var(--qchat-audio-mini-target-width), 100%) !important;
    box-sizing: border-box !important;
}

html body .qchat-audio-mini-player:not(.qchat-audio-classic-player),
html body .qchat-audio-mini-player:not(.qchat-audio-classic-player):hover,
html body .qchat-audio-mini-player:not(.qchat-audio-classic-player):focus-within,
html body .qchat-audio-mini-player:not(.qchat-audio-classic-player).qchat-audio-controls-open,
html body .qchat-audio-mini-player:not(.qchat-audio-classic-player).playing {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-content-wrapper,
html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-content,
html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .decrypted-file-content,
html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-message,
html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-groups,
html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-group,
html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-list,
html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-audio-mini-group,
html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-group-audio,
html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.saved-profile-blog-post)):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-list-audio {
    width: min(var(--qchat-audio-mini-target-width), 100%) !important;
    max-width: min(var(--qchat-audio-mini-target-width), 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 520px) {
    html body {
        --qchat-audio-mini-saved-card-width: 100%;
    }
    html body .profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-has-audio:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body .profile-blog-post .profile-blog-file-bundle-message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body .profile-blog-post .profile-blog-file-bundle-groups:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body .profile-blog-post .profile-blog-audio-group:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body .profile-blog-post .profile-blog-audio-list:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body .profile-blog-post .profile-blog-audio-attachment:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body .profile-blog-post .profile-blog-attachment-preview:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body .profile-blog-post .qchat-audio-mini-group:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body .profile-blog-post .qchat-file-bundle-group-audio:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body .profile-blog-post .qchat-file-bundle-list-audio:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-inline-size: 100% !important;
        flex-basis: auto !important;
    }
}

/* qchat v-profile-link-button-hover: saved blog link button has no border until hover */
.message-content .qchat-saved-blog-link-button,
#messagesContainer .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,
#messagesContainer .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,
#messagesContainer .qchat-saved-blog-link-button:hover,
#messagesContainer .qchat-saved-blog-link-button:focus,
#messagesContainer .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;
}


/* qchat v143: sent media rows keep avatar/name attached to media bubble */
#messagesContainer .message.sent.qchat-sent-media-fit-row > .d-flex {
    width: fit-content !important;
    max-width: var(--qchat-message-lane-width, 50%) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    gap: var(--qchat-message-row-gap, 8px) !important;
    box-sizing: border-box !important;
}
#messagesContainer .message.sent.qchat-sent-media-fit-row .message-bubble {
    flex: 0 1 auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
#messagesContainer .message.sent.qchat-sent-media-fit-row .message-content-wrapper,
#messagesContainer .message.sent.qchat-sent-media-fit-row .message-header,
#messagesContainer .message.sent.qchat-sent-media-fit-row .message-content,
#messagesContainer .message.sent.qchat-sent-media-fit-row .message-footer,
#messagesContainer .message.sent.qchat-sent-media-fit-row .decrypted-file-content {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
#messagesContainer .message.sent.qchat-sent-media-fit-row .message-header,
#messagesContainer .message.sent.qchat-sent-media-fit-row .message-footer {
    align-self: stretch !important;
}
#messagesContainer .message.sent.qchat-sent-media-fit-row .qchat-chat-image-tile,
#messagesContainer .message.sent.qchat-sent-media-fit-row .file-preview.image-preview.qchat-chat-image-tile,
#messagesContainer .message.sent.qchat-sent-media-fit-row .qchat-file-bundle-grid-images,
#messagesContainer .message.sent.qchat-sent-media-fit-row .qchat-file-bundle-message,
#messagesContainer .message.sent.qchat-sent-media-fit-row .qchat-file-bundle-groups,
#messagesContainer .message.sent.qchat-sent-media-fit-row .qchat-file-bundle-group {
    margin-left: auto !important;
    margin-right: 0 !important;
}
@media (max-width: 520px) {
    #messagesContainer .message.sent.qchat-sent-media-fit-row > .d-flex {
        width: 100% !important;
        max-width: 100% !important;
    }
    #messagesContainer .message.sent.qchat-sent-media-fit-row .message-bubble,
    #messagesContainer .message.sent.qchat-sent-media-fit-row .message-content-wrapper,
    #messagesContainer .message.sent.qchat-sent-media-fit-row .message-content,
    #messagesContainer .message.sent.qchat-sent-media-fit-row .decrypted-file-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* qchat v144: small-screen image tile sizes must not jump at 768px.
   Keep 1-2 image messages compact earlier, like the dense 8+ image layouts. */
@media (max-width: 767.98px) {
    html body #messagesContainer .message:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
    html body #messagesContainer .message.sent.qchat-sent-media-fit-row:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex,
    html body #messagesContainer .message.received:has(.qchat-chat-image-tile):not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) > .d-flex {
        width: fit-content !important;
        max-width: min(420px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        box-sizing: border-box !important;
        gap: var(--qchat-message-row-gap, 6px) !important;
    }

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

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

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

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

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

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

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

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

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

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


/* qchat v145: small screens must cap vertical image height too.
   Width compacting alone is not enough for portrait photos: 1-2 vertical
   images can become taller at 768px than at 769px. Keep the same compact
   lane, but crop inside a capped-height tile. */
@media (max-width: 767.98px) {
    html body #messagesContainer {
        --qchat-small-image-max-height: 220px;
        --qchat-small-image-max-height-tight: 220px;
    }

    html body #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"],
    html body #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"],
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="1"],
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-one {
        max-height: var(--qchat-small-image-max-height) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="2"],
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"],
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"],
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-two {
        max-height: var(--qchat-small-image-max-height) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="1"] > .qchat-file-bundle-item,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="2"] > .qchat-file-bundle-item,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] > .qchat-file-bundle-item,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] > .qchat-file-bundle-item,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-one > .qchat-file-bundle-item,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-two > .qchat-file-bundle-item {
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message .message-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"] > img.chat-image-preview,
    html body #messagesContainer .message .decrypted-file-content > .file-preview.image-preview.qchat-chat-image-tile[data-qchat-single-image="1"] > img.chat-image-preview,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="1"] img.chat-image-preview,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count="2"] img.chat-image-preview,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-side"] img.chat-image-preview,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-2-stack"] img.chat-image-preview,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-one img.chat-image-preview,
    html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-two img.chat-image-preview {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }
}

@media (max-width: 575.98px) {
    html body #messagesContainer {
        --qchat-small-image-max-height: 220px;
    }
}

/* qchat v146: equal mini audio width below 521px. Keeps all non-classic mini audio players the same width on phones. */
@media (max-width: 520.98px) {
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body #messagesContainer .message:has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body #messagesContainer .message:has(.qchat-file-bundle-group-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
    html body #messagesContainer .message:has(.qchat-file-bundle-list-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
    html body #messagesContainer .message:has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
    html body #messagesContainer .message:has(.qchat-file-bundle-group-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
    html body #messagesContainer .message:has(.qchat-file-bundle-list-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        gap: var(--qchat-message-row-gap, 6px) !important;
        align-items: flex-end !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message.sent:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
    html body #messagesContainer .message.sent:has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex {
        margin-left: auto !important;
        margin-right: 0 !important;
        justify-content: flex-end !important;
    }

    html body #messagesContainer .message.received:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex,
    html body #messagesContainer .message.received:has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) > .d-flex {
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-content: flex-start !important;
    }

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

    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-content-wrapper,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .message-content,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .decrypted-file-content,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-message,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-groups,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-group,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-list,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-group-audio,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-file-bundle-list-audio,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-audio-mini-group,
    html body #messagesContainer .message:has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) .qchat-audio-mini-player {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}


/* qchat v147: global 220px max-height for image thumbnails in messages.
   Applies regardless of viewport width and keeps portrait thumbnails compact. */
html body #messagesContainer .file-preview.image-preview.qchat-chat-image-tile,
html body #messagesContainer .profile-blog-gallery-tile.file-preview.image-preview.qchat-chat-image-tile,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-one,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-two,
html body #messagesContainer .profile-blog-attachment-preview {
    max-height: 220px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .file-preview.image-preview.qchat-chat-image-tile > img.chat-image-preview,
html body #messagesContainer .profile-blog-gallery-tile.file-preview.image-preview.qchat-chat-image-tile img,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images img.chat-image-preview,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images img,
html body #messagesContainer .profile-blog-attachment-preview img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* qchat v148: thumbnail blocks should be exactly capped visually at 220px tall.
   v147 only used max-height, so narrow 2-image galleries could stay around 98px
   because their inline aspect-ratio calculated a smaller height. */
html body #messagesContainer .file-preview.image-preview.qchat-chat-image-tile,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-one,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-two,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-many,
html body #messagesContainer .profile-blog-attachment-preview {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images > .qchat-file-bundle-item,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images > .profile-blog-attachment,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images > .profile-blog-gallery-item {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images .file-preview.image-preview.qchat-chat-image-tile,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images .profile-blog-gallery-tile.file-preview.image-preview.qchat-chat-image-tile,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images .profile-blog-attachment-preview {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .file-preview.image-preview.qchat-chat-image-tile > img.chat-image-preview,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images img.chat-image-preview,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images img,
html body #messagesContainer .profile-blog-attachment-preview img {
    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 center !important;
    display: block !important;
}

/* qchat v149: thumbnails keep natural/image-layout proportions and are only capped by 220px height. */
html body #messagesContainer .file-preview.image-preview.qchat-chat-image-tile:not(.profile-blog-gallery-tile),
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-one,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-two,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-many {
    height: auto !important;
    min-height: 0 !important;
    max-height: 220px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images > .qchat-file-bundle-item,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images > .profile-blog-attachment,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images > .profile-blog-gallery-item,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images .file-preview.image-preview.qchat-chat-image-tile,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images .profile-blog-gallery-tile.file-preview.image-preview.qchat-chat-image-tile,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images .profile-blog-attachment-preview {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .file-preview.image-preview.qchat-chat-image-tile:not(.profile-blog-gallery-tile) > img.chat-image-preview {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 220px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images img.chat-image-preview,
html body #messagesContainer .profile-blog-gallery.qchat-file-bundle-grid-images img,
html body #messagesContainer .qchat-file-bundle-grid.qchat-file-bundle-grid-images .profile-blog-attachment-preview img {
    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 center !important;
    display: block !important;
}


/* qchat v151: saved blog audio cards in Favorites/messages stay content-height and give the mini player a real 464px content lane. */
html body #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)),
html body #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)),
html body #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)),
html body #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)) {
    --qchat-audio-mini-target-width: 464px;
    --qchat-audio-mini-saved-card-width: min(calc(var(--qchat-audio-mini-target-width) + 2rem + 2px), 100%);
}

html body #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,
html body #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,
html body #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,
html body #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,
html body #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.w-100,
html body #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.w-100,
html body #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.w-100,
html body #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.w-100 {
    width: fit-content !important;
    max-width: min(574px, 100%) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: flex-end !important;
    box-sizing: border-box !important;
}

html body #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,
html body #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,
html body #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,
html body #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,
html body #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,
html body #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,
html body #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: var(--qchat-audio-mini-saved-card-width) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: auto !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .saved-profile-blog-post .profile-blog-attachments.qchat-profile-blog-bundle-has-audio,
html body #messagesContainer .saved-profile-blog-post .profile-blog-attachments[data-profile-blog-has-audio="1"],
html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-group,
html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-list,
html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-attachment,
html body #messagesContainer .saved-profile-blog-post .profile-blog-audio-attachment > .profile-blog-attachment-preview,
html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-group,
html body #messagesContainer .saved-profile-blog-post .qchat-file-bundle-list-audio,
html body #messagesContainer .saved-profile-blog-post .qchat-audio-mini-player {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: auto !important;
    box-sizing: border-box !important;
}

/* qchat v153: keep in-message reply previews compact at the 768px breakpoint. */
@media (max-width: 768px) {
    html body #messagesContainer .message .message-reply-preview.in-message-reply-preview,
    html body #messagesContainer .message .message-reply-preview[data-reply-message-id] {
        display: inline-block !important;
        width: fit-content !important;
        max-width: min(320px, calc(100vw - 120px)) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex: 0 1 auto !important;
        align-self: flex-start !important;
    }

    html body #messagesContainer .message .message-reply-preview.in-message-reply-preview .reply-preview-content,
    html body #messagesContainer .message .message-reply-preview[data-reply-message-id] .reply-preview-content {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message .message-reply-preview.in-message-reply-preview .reply-preview-inner,
    html body #messagesContainer .message .message-reply-preview[data-reply-message-id] .reply-preview-inner {
        min-width: 0 !important;
        max-width: min(260px, calc(100vw - 168px)) !important;
        flex: 0 1 auto !important;
        box-sizing: border-box !important;
    }

    html body #messagesContainer .message .message-reply-preview.in-message-reply-preview .reply-preview-title,
    html body #messagesContainer .message .message-reply-preview.in-message-reply-preview .reply-preview-text,
    html body #messagesContainer .message .message-reply-preview[data-reply-message-id] .reply-preview-title,
    html body #messagesContainer .message .message-reply-preview[data-reply-message-id] .reply-preview-text {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 768px) {
/* qchat v152: direct 3+ image albums stay stable after browser tab/resize re-normalization. */
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-file-group-count]:not([data-file-group-count="1"]):not([data-file-group-count="2"]),
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-vh-rows"],
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):not(:has(.saved-profile-blog-comment)) .qchat-file-bundle-grid.qchat-file-bundle-grid-images.qchat-blog-album-vh-rows {
    width: min(360px, 92vw, calc(100vw - 88px)) !important;
    max-width: min(360px, 92vw, calc(100vw - 88px)) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

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

}

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

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

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

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

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

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

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

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

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

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

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

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


/* qchat v193: saved/forwarded profile-blog cards in messages must keep the
   same album proportions as the Blog tab. The generic chat thumbnail rules
   cap image grids at 220px; that is correct for normal chat images, but it
   flattens blog albums with 3 images. Override the cap only inside saved
   blog cards. */
html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-attachments,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-file-bundle-message,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-file-bundle-groups,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-group-image,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid.qchat-file-bundle-grid-images {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid.qchat-file-bundle-grid-images {
    overflow: hidden !important;
}

html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-gallery-item,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-attachment,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-item,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-gallery-tile,
html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-attachment-preview {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

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

html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(1),
html body #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid.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;
}

html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(2),
html body #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

html body #messagesContainer .message .message-content > .saved-profile-blog-post .profile-blog-gallery.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(3),
html body #messagesContainer .message .message-content > .saved-profile-blog-post .qchat-file-bundle-grid.qchat-file-bundle-grid-images[data-qchat-album-layout="tg-3-hero-top"] > :nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

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

/* qchat v280: pinned-message header uses stylesheet-owned interaction styles. */
#pinnedMessagesBar.pinned-messages-bar {
    cursor: pointer;
}


/* QChat patch v281: the message lane starts flush under the chat header. */
#messagesContainer.message-container,
#messagesContainer {
    padding-top: 0 !important;
}