/* Responsive стили - ОСНОВНЫЕ ИСПРАВЛЕНИЯ */

/* ОСНОВНЫЕ СТИЛИ БЕЗ СКРОЛЛИНГА */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container {
    max-width: 100% !important;
    padding: 0;
    margin: 0;
    height: 100vh;
}

.container.mt-5 {
    margin-top: 0 !important;
}

/* Основные мобильные стили */
@media (max-width: 768px) {
    /* Перестраиваем структуру в колонку */
    #messagingTab .row {
        flex-direction: column;
        height: calc(100vh - 150px) !important;
    }
    
    #messagingTab .col-md-3,
    #messagingTab .col-md-4,
    #messagingTab .col-md-8,
    #messagingTab .col-md-9 {
        width: 100% !important;
        /* height: 50vh; */
        /* min-height: 300px; */
    }
    
    /* Уменьшаем отступы для мобильных */
    #messagingTab .card-body {
        padding: 0.5rem;
    }
    
    /* Улучшаем отображение сообщений */
    .message {
        max-width: 95%;
        margin-bottom: 0.3rem;
    }
    
    .message-bubble {
        padding: 0.4rem 0.6rem;
    }
    
    .message-content {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    /* Компактные аватары */
    .message-avatar,
    .avatar-placeholder {
        width: 30px !important;
        height: 30px !important;
    }
    
    .user-list-avatar,
    .user-list-avatar-placeholder {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* Компактный ввод сообщений */
    .input-group {
        margin-top: 0.1rem;
    }
    
    .form-control {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
    
    .btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
    
    /* Улучшаем отображение файлов на мобильных */
    .file-message {
        max-width: 280px;
    }
    
    .file-preview img,
    .file-preview video {
        max-height: 150px !important;
    }
    
    /* Адаптируем плавающий плеер для мобильных */
    .floating-media-player {
        width: 95vw;
        right: 2.5vw;
        bottom: 10px;
        min-width: 280px;
    }
    
    .floating-player-body {
        padding: 10px;
    }
    
    #floatingVideoPlayer {
        height: 150px;
    }
    
    /* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Структура для мобильных */
    #messagingTab .col-md-3 {
        display: block !important;
    }
    
    #messagingTab .col-md-9 {
        display: none !important;
    }
    
    #messagingTab .col-md-9.active {
        display: block !important;
        height: 100% !important;
    }
    
    #messagingTab .col-md-3.hidden {
        display: none !important;
    }
    
    /* Кнопка "Назад" для мобильных */
    .back-to-contacts {
        display: block !important;
    }
}

/* Маленькие экраны */
@media (max-width: 350px) {
    #messagingTab .col-md-3,
    #messagingTab .col-md-4,
    #messagingTab .col-md-8,
    #messagingTab .col-md-9 {
        /* height: 45vh; */
        /* min-height: 250px; */
    }
    
	 .nav-tabs .nav-link {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }
    .message {
        max-width: 98%;
    }
    
    .message-bubble {
        padding: 0.3rem 0.5rem;
    }
}

/* Ландшафтная ориентация */
@media (max-width: 768px)   {
  
   
}



/* Десктопная версия */
@media (min-width: 769px) {
    #messagingTab .col-md-3,
    #messagingTab .col-md-4,
    #messagingTab .col-md-8,
    #messagingTab .col-md-9 {
        display: block !important;
    }
    
    .back-to-contacts {
        display: none !important;
    }
	
	 .user-item{
	   font-size: 16px  ;
   }
   
   .user-list-avatar-placeholder, .profile-avatar-container .avatar-placeholder, .profile-avatar-container img{
	   width: 48px !important;
	   height: 48px !important;
   }
    
    /* ДЕСКТОП: УБИРАЕМ СКРОЛЛИНГ И ДЕЛАЕМ ВО ВСЮ ВЫСОТУ */
    #appSection {
        height: 100vh;
        overflow: hidden;
    }
    
    .tab-content {
        height: calc(100vh - 120px);
        overflow: hidden;
    }
    
    .tab-pane {
        height: 100%;
    }
    
    #messagingTab .row {
        height: 100% !important;
        min-height: auto !important;
        margin: 0;
    }
    
    #messagingTab .col-md-3,
    #messagingTab .col-md-9 {
        height: 100%;
        padding: 0;
    }
    
    #messagingTab .card {
        height: 100%;
        margin: 0;
        border-radius: 0;
        border: none;
    }
    
    #messagingTab .card-body {
        height: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    
    /* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Гарантируем скролл для списка контактов */
    .users-list-container {
        flex: 1;
        min-height: 0; /* Важно для flexbox */
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .users-list {
        flex: 1;
        overflow-y: auto;
        min-height: 0; /* Важно для flexbox */
    }
}

@media (max-width: 900px) {
	  .user-list-avatar-placeholder, .profile-avatar-container .avatar-placeholder, .profile-avatar-container img{
	   width: 30px !important;
	   height: 30px !important;
   }
    	 .user-item{
	   font-size: 14px  ;
   }
   
}

/* Touch устройства */
@media (max-width: 768px) {
    .user-item {
        padding: 10px 8px;
    }
    
    .btn {
        min-height: 32px;
    }
    
    .users-list::-webkit-scrollbar,
    .message-container::-webkit-scrollbar {
        width: 4px;
    }
	
		  	 .user-item{
	   font-size: 16px  ;
   }
   .user-list-avatar-placeholder, .profile-avatar-container .avatar-placeholder, .profile-avatar-container img{
	   width: 60px !important;
	   height: 60px !important;
   }
   
}


@media (min-width: 1100px) {
	 .user-list-avatar-placeholder, .profile-avatar-container .avatar-placeholder, .profile-avatar-container img{
	   width: 60px !important;
	   height: 60px !important;
   }
   
   	 .user-item{
	   font-size: 16px  ;
   }
   
}
#openGlobalSearchBtn:disabled,
#openGlobalSearchBtn.btn-secondary {
    opacity: 0.6;
    cursor: not-allowed;
}

#globalSearchOverlay * {
    pointer-events: all !important;
}

#globalSearchInput {
    pointer-events: all !important;
    border: 2px solid #0d6efd;
}

#openGlobalSearchBtn {
    pointer-events: all !important;
}



 /* Стили для модального окна пересылки */
#forwardMessageModal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    margin: 0 auto;
    padding: 20px;
}

#forwardMessageModal .modal-content {
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#forwardMessageModal .modal-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 16px 20px;
}

#forwardMessageModal .modal-title {
    font-weight: 600;
    color: #212529;
}

#forwardMessageModal .modal-body {
    padding: 20px;
    overflow-y: hidden;
    max-height: 60vh;
}

#forwardMessageModal .modal-footer {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 16px 20px;
}

/* Стили для скроллируемого списка контактов */
.forward-contacts-scrollable {
    max-height: 300px;
    min-height: 200px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

.forward-contact-item {
    padding: 10px 12px;
    border-radius: 6px;
    transition: background-color 0.2s;
    margin-bottom: 4px;
}

.forward-contact-item:hover {
    background-color: #f8f9fa;
}

.forward-contact-item:last-child {
    margin-bottom: 0;
}

.forward-contact-item .form-check-input {
    margin-top: 0;
    cursor: pointer;
}

.forward-contact-item .form-check-label {
    cursor: pointer;
    width: 100%;
}
 

/* Анимация появления модального окна */
#forwardMessageModal.fade .modal-dialog {
    transform: translateY(-50px);
    transition: transform 0.3s ease-out;
}

#forwardMessageModal.show .modal-dialog {
    transform: translateY(0);
}
 
 
 
 
 /* Адаптивная ширина модального окна */
#forwardMessageModal .modal-dialog {
    max-width: 500px; /* modal-md по умолчанию */
    width: auto;
}

 

/* На очень маленьких экранах - почти на всю ширину */
@media (max-width: 576px) {
    #forwardMessageModal .modal-dialog {
       max-width: 300px; /* modal-sm */
        margin: 0.5rem auto;
    }
	
	.username_inmodal{
		font-size: 12px;
	}
	
	#forwardMessageModal .modal-title{
		font-size: 18px;
	}
}


/* Центрирование чекбоксов в модальном окне пересылки */
.forward-contact-item .form-check {
    margin-bottom: 0;
}

.forward-contact-item .form-check-input {
    margin-top: 0;
    margin-left: auto; /* Отправляет чекбокс вправо */
    transform: scale(1.2); /* Немного увеличиваем */
}

.forward-contact-item .form-check-label {
    cursor: pointer;
    padding: 5px 0;
}

/* Адаптация для мобильных устройств */
@media (max-width: 576px) {
    .forward-contact-item .form-check-input {
        transform: scale(1.1);
    }
}


/* Сделаем всю область контакта кликабельной */
.forward-contact-item .contact-info {
    cursor: pointer;
    
}

 
 
 
 /* Общий стиль для вкладок с внутренним скроллом */
.profile-tab-scroll,
.settings-tab-scroll {
    height: calc(100vh - 200px); /* Адаптивная высота: отнимаем шапку, табы и отступы */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px; /* компенсация под скроллбар */
}

/* Красивый скроллбар (опционально, но очень рекомендуется) */
.profile-tab-scroll::-webkit-scrollbar,
.settings-tab-scroll::-webkit-scrollbar {
    width: 6px;
}

.profile-tab-scroll::-webkit-scrollbar-track,
.settings-tab-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.profile-tab-scroll::-webkit-scrollbar-thumb,
.settings-tab-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 10px;
}

.profile-tab-scroll::-webkit-scrollbar-thumb:hover,
.settings-tab-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.5);
}

/* Для Firefox */
.profile-tab-scroll,
.settings-tab-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent;
}


@media (max-width: 768px) {
    .profile-tab-scroll,
    .settings-tab-scroll {
        height: calc(100vh - 180px); /* чуть больше места на мобильных */
    }
}


#voiceRecordBtn{
	border: none;
}

#voiceRecordBtn:hover{
	border: none;
}

#remoteAvatarOverlay { 
    transition: opacity 0.3s; 
}
#remoteVideo { 
    transition: opacity 0.3s; 
}




.reply-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    margin: 8px 0;
    
    background: rgba(79, 140, 255, 0.08);
    border-radius: 10px;
}

.reply-preview-content {
    min-width: 0;
    flex: 1;
}

.reply-preview-title {
    font-size: 13px;
    font-weight: 600;
    color: #4f8cff;
}

.reply-preview-text {
    font-size: 13px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-preview-close {
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.7;
}


.user-item.active,
.user-item.selected,
.user-item.current-chat,
#chatWithUser[role="button"]:active {
    background: linear-gradient(
        90deg,
        rgba(79, 140, 255, 0.22),
        rgba(79, 140, 255, 0.08)
    );
}


.message.search-highlight {
     
    border-radius: 12px;
}

.message.current-search-match {
    
    background: rgba(255, 193, 7, 0.18);
    border-radius: 12px;
    transition: background 0.25s ease, outline 0.25s ease;
}

/* Pinned-message navigation highlight is deliberately transient.
   qchat-message-jump-boundary removes this class after the jump timeout,
   and unpin removes it immediately. Keep it visually independent from
   search selection so pinned navigation cannot leave search state behind. */
.message.pinned-message-highlight {
    background: rgba(255, 193, 7, 0.18);
    border-radius: 12px;
    outline: 2px solid rgba(255, 191, 71, 0.75);
    outline-offset: 2px;
    transition: background 0.25s ease, outline 0.25s ease;
}


.message-link {
    color: #0d6efd;
    text-decoration: underline;
    word-break: break-all;
}

.message.outgoing .message-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}


.message-reply-preview {
    margin-bottom: 8px;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    cursor: pointer;
    max-width: 100%;
}

.reply-preview-bar {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
}

.reply-preview-accent {
    width: 3px;
    align-self: stretch;
    min-height: 34px;
    border-radius: 999px;
    background: #4f8cff;
    margin-right: 8px;
    flex-shrink: 0;
}

.reply-preview-inner {
    min-width: 0;
    flex: 1;
}

.message-reply-sender,
.reply-preview-title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.message-reply-text,
.reply-preview-text {
    font-size: 13px;
    line-height: 1.25;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.reply-forwarded-mini {
    max-width: 100%;
}

.reply-forwarded-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 3px;
    opacity: 0.9;
}

.reply-forwarded-icon {
    font-size: 11px;
    opacity: 0.75;
}

.reply-forwarded-label {
    opacity: 0.75;
}

.reply-forwarded-content {
    font-size: 13px;
    line-height: 1.25;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forwarded-sender-link,
.forwarded-sender-link:hover {
    text-decoration: none;
}


.message-reply-file-link{
	color: #000;
	    text-decoration: none;
}


#pinnedMessagesBar:hover{
	background: linear-gradient(
        90deg,
        rgba(79, 140, 255, 0.22),
        rgba(79, 140, 255, 0.08)
    );
}

.profile-user-link {
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.profile-user-link:hover {
    text-decoration: underline;
}

.profile-avatar-link {
    border: 0;
    background: transparent;
    padding: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.profile-blog-avatar {
    border-radius: 50%;
    overflow: hidden;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    user-select: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#uploadFileBtn, #emojiToggleBtn{
	border: none;
}

/* qchat v69: tablet/mobile audio layout — keep the <=575px wide style up to 1200px. */
@media (max-width: 1200px) {
    #messagesContainer .message:has(.qchat-audio-mini-player),
    #messagesContainer .message:has(.qchat-audio-mini-group),
    #messagesContainer .message:has(.qchat-file-bundle-group-audio),
    #messagesContainer .message:has(.qchat-file-bundle-list-audio) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

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

    #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 {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
    }

    #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble,
    #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble,
    #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble,
    #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: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,
    #messagesContainer .message .qchat-audio-mini-player {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

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

    #messagesContainer .message .qchat-audio-mini-meta,
    #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #messagesContainer .message .qchat-audio-mini-progress,
    #messagesContainer .message .qchat-audio-mini-progress.time {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: auto minmax(72px, 1fr) auto !important;
        gap: 4px !important;
        font-size: 0.64rem !important;
    }

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

    #messagesContainer .message .qchat-audio-mini-controls {
        display: grid !important;
        grid-template-areas: "prev play next" "range range range" !important;
    grid-template-rows: 30px 16px !important;
        grid-template-columns: 24px 28px 24px !important;
        column-gap: 3px !important;
        row-gap: 2px !important;
        flex: 0 0 82px !important;
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin-left: auto !important;
        margin-bottom: 0 !important;
        align-self: center !important;
        opacity: 1 !important;
        transform: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
        transition: none !important;
    }

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

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

/* The volume UI is intentionally not visible; wheel volume is handled on the mini-player itself. */
.qchat-audio-mini-player .qchat-audio-volume-wrap,
.qchat-audio-mini-player .qchat-audio-mini-volume,
.qchat-audio-mini-player .qchat-audio-volume-range,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* qchat v70: stable compact-audio width. Keep the <=575px wide layout up to 1200px and do not resize on click/focus/play. */
#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,
#messagesContainer .message:has(.qchat-audio-mini-player:hover) > .d-flex,
#messagesContainer .message:has(.qchat-audio-mini-player:focus-within) > .d-flex,
#messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) > .d-flex,
#messagesContainer .message:has(.qchat-audio-mini-player.playing) > .d-flex,
#messagesContainer .message:has(.qchat-audio-mini-player) .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,
#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 .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 {
    transition-property: background-color, box-shadow, transform !important;
    transition-duration: 0s !important;
    box-sizing: border-box !important;
}

#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 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !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 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
}

#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:hover .qchat-audio-mini-progress.time,
#messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-progress.time,
#messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-progress.time,
#messagesContainer .message .qchat-audio-mini-player.playing .qchat-audio-mini-progress.time {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: auto minmax(72px, 1fr) auto !important;
}

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

.qchat-audio-mini-player .qchat-audio-mini-controls,
.qchat-audio-mini-player:hover .qchat-audio-mini-controls,
.qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
.qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls,
.qchat-audio-mini-player.playing .qchat-audio-mini-controls,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls,
#messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls,
#messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
#messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls,
#messagesContainer .message .qchat-audio-mini-player.playing .qchat-audio-mini-controls {
    display: grid !important;
    grid-template-areas: "prev play next" "range range range" !important;
    grid-template-rows: 30px 16px !important;
    grid-template-columns: 24px 28px 24px !important;
    column-gap: 3px !important;
    row-gap: 2px !important;
    flex: 0 0 82px !important;
    flex-basis: 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin-left: auto !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transition: none !important;
}

.qchat-audio-mini-player .qchat-audio-volume-wrap,
.qchat-audio-mini-player .qchat-audio-mini-volume,
.qchat-audio-mini-player .qchat-audio-volume-range,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume,
#messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 1200px) {
    #messagesContainer {
        --qchat-audio-mini-collapsed-width: 100% !important;
        --qchat-audio-mini-controls-width: 82px !important;
    }

    #messagesContainer .message:has(.qchat-audio-mini-player),
    #messagesContainer .message:has(.qchat-audio-mini-group),
    #messagesContainer .message:has(.qchat-file-bundle-group-audio),
    #messagesContainer .message:has(.qchat-file-bundle-list-audio),
    #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,
    #messagesContainer .message:has(.qchat-audio-mini-player:hover) > .d-flex,
    #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) > .d-flex,
    #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) > .d-flex,
    #messagesContainer .message:has(.qchat-audio-mini-player.playing) > .d-flex,
    #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 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }

    #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 {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !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,
    #messagesContainer .message .qchat-audio-mini-player {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        transition: none !important;
    }

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

/* 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 v160: removed old v72 square single-image mobile block. */

/* 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 v79: keep Send button size/style stable when viewport width changes.
   Bootstrap/input-group and compact responsive rules can otherwise shrink the
   button's intrinsic height while the textarea/composer keeps a 38px control lane. */
#message_div.qchat-composer > #sendMessageBtn,
#message_div.qchat-composer > button#sendMessageBtn.btn,
.input-group.qchat-composer > #sendMessageBtn {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 100px !important;
    align-self: flex-end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#message_div.qchat-composer > #sendMessageBtn .spinner-border,
.input-group.qchat-composer > #sendMessageBtn .spinner-border {
    flex: 0 0 auto !important;
}


/* qchat v81: Telegram-like 4-photo album grid for profile/blog bundles.
   First image is a large hero tile; the other three form a compact bottom row. */
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="4"] {
    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;
}

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

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

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

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

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

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


/* 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 profile/blog bundles.
   First image is a large hero tile; the other two form a compact bottom row. */
.profile-blog-attachments .profile-blog-gallery.qchat-file-bundle-grid-images[data-file-group-count="3"] {
    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;
}

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

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

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

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

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


/* 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 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;
}

/* 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 v131: keep audio players at 464px without breaking saved blog cards.
   Pure audio messages shrink the whole row to the player + avatar.
   Saved blog cards keep their normal message lane; only audio saved-blog lanes are capped
   through the CSS variable that the inline style already reads. */
html body #messagesContainer {
    --qchat-audio-player-max-width: 464px;
    --qchat-audio-row-max-width: calc(var(--qchat-audio-player-max-width) + 64px);
}

/* Pure audio / voice messages: do NOT apply this to saved blog cards. */
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-player),
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-group),
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-group-audio),
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-list-audio) {
    width: fit-content !important;
    max-width: min(var(--qchat-audio-row-max-width), 100%) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message.sent:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-player),
html body #messagesContainer .message.sent:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-group),
html body #messagesContainer .message.sent:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-group-audio),
html body #messagesContainer .message.sent:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-list-audio) {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html body #messagesContainer .message.received:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-player),
html body #messagesContainer .message.received:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-group),
html body #messagesContainer .message.received:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-group-audio),
html body #messagesContainer .message.received:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-list-audio) {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-player) > .d-flex,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-group) > .d-flex,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-group-audio) > .d-flex,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-list-audio) > .d-flex,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-player) > .d-flex.w-100,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-group) > .d-flex.w-100,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-group-audio) > .d-flex.w-100,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-list-audio) > .d-flex.w-100 {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    gap: 10px !important;
    align-items: flex-end !important;
}

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

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

html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-player) .message-bubble,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-group) .message-bubble,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-group-audio) .message-bubble,
html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-list-audio) .message-bubble {
    flex: 0 1 var(--qchat-audio-player-max-width) !important;
    flex-basis: min(var(--qchat-audio-player-max-width), calc(100vw - 96px)) !important;
    width: min(var(--qchat-audio-player-max-width), calc(100vw - 96px)) !important;
    max-width: var(--qchat-audio-player-max-width) !important;
    min-width: 0 !important;
    inline-size: min(var(--qchat-audio-player-max-width), calc(100vw - 96px)) !important;
    max-inline-size: var(--qchat-audio-player-max-width) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

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

/* Audio widgets themselves are capped at 464px when CSS can control them. */
html body #messagesContainer .message .qchat-audio-mini-player,
html body #messagesContainer .message .qchat-audio-mini-player:hover,
html body #messagesContainer .message .qchat-audio-mini-player:focus-within,
html body #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open,
html body #messagesContainer .message .qchat-audio-mini-player.playing {
    max-width: var(--qchat-audio-player-max-width) !important;
    max-inline-size: var(--qchat-audio-player-max-width) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Saved blog cards: do not let the generic audio rules turn the whole blog message into a tiny audio row. */
html body #messagesContainer .message: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.sent:has(.saved-profile-blog-post) > .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) > .d-flex {
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
}

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-file-bundle-group-audio),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio) {
    --qchat-saved-blog-lane-width: min(var(--qchat-audio-row-max-width), var(--qchat-message-lane-width, 50%));
}

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

@media (max-width: 520px) {
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-player),
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-group),
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-group-audio),
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-list-audio),
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-player) > .d-flex,
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-group) > .d-flex,
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-group-audio) > .d-flex,
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-list-audio) > .d-flex {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-player) .message-bubble,
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-audio-mini-group) .message-bubble,
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-group-audio) .message-bubble,
    html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.qchat-file-bundle-list-audio) .message-bubble {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        inline-size: 100% !important;
    }

    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-file-bundle-group-audio),
    html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio) {
        --qchat-saved-blog-lane-width: 100%;
    }
}

/* 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 v8: keep appTabs labels visible on mobile because appTabs scrolls horizontally. */
@media (max-width: 768px) {
    #appTabs,
    #appTabs.nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    #appTabs .nav-item {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    #appTabs .nav-link,
    #appTabs .qchat-external-profile-tab {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-indent: 0 !important;
        letter-spacing: normal !important;
    }

    #appTabs .qchat-external-profile-tab-name,
    #appTabs .nav-link > span:not(.badge):not(.qchat-external-profile-tab-avatar):not(.qchat-external-profile-pin-mark),
    #appTabs .qchat-external-profile-pin-mark {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }
}

/* QChat v9: appTabs remain full-label horizontally scrollable on mobile.
   Do not force zero badges visible: unread/request badges are controlled by .hidden/.d-none. */
#appTabs,
#appTabs.nav,
#appTabs.nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
}

#appTabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#appTabs > .nav-item,
#appTabs .nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
}

#appTabs .nav-link,
#appTabs .qchat-external-profile-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
}

#appTabs .nav-link > i,
#appTabs .nav-link > .fas,
#appTabs .nav-link > .far,
#appTabs .nav-link > .fab,
#appTabs .qchat-external-profile-tab-avatar,
#appTabs .qchat-external-profile-pin-mark {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#appTabs .qchat-external-profile-tab-name,
#appTabs .nav-link > span:not(.badge):not(.qchat-external-profile-tab-avatar):not(.qchat-external-profile-pin-mark) {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
}

#appTabs .badge {
    flex: 0 0 auto !important;
}

#appTabs .badge.hidden,
#appTabs .badge.d-none,
#appTabs .qchat-social-badge.d-none,
#appTabs .notification-center-badge.d-none,
#appTabs #unreadMessagesBadge.hidden,
#appTabs #friendsRequestsBadge.d-none,
#appTabs #notificationCenterBadge.d-none {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    #appTabs,
    #appTabs.nav,
    #appTabs.nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    #appTabs .nav-link,
    #appTabs .qchat-external-profile-tab {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        height: auto !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-indent: 0 !important;
        letter-spacing: normal !important;
    }

    #appTabs .nav-link > i,
    #appTabs .nav-link > .fas,
    #appTabs .nav-link > .far,
    #appTabs .nav-link > .fab,
    #appTabs .qchat-external-profile-tab-avatar,
    #appTabs .qchat-external-profile-pin-mark {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 0 0 auto !important;
    }

    #appTabs .qchat-external-profile-tab-name,
    #appTabs .nav-link > span:not(.badge):not(.qchat-external-profile-tab-avatar):not(.qchat-external-profile-pin-mark) {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
        text-indent: 0 !important;
        white-space: nowrap !important;
    }

    #appTabs .badge.hidden,
    #appTabs .badge.d-none,
    #appTabs .qchat-social-badge.d-none,
    #appTabs .notification-center-badge.d-none,
    #appTabs #unreadMessagesBadge.hidden,
    #appTabs #friendsRequestsBadge.d-none,
    #appTabs #notificationCenterBadge.d-none {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}


/* QChat v10: keep appTabs labels visible below 600px.
   At very small widths older runtime/mobile CSS may hide plain text nodes.
   We render labels from attributes, while preserving badge visibility rules. */
@media (max-width: 600px) {
    #appTabs,
    #appTabs.nav,
    #appTabs.nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #appTabs::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #appTabs > .nav-item,
    #appTabs .nav-item {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    #appTabs .nav-link,
    #appTabs .qchat-external-profile-tab {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        height: auto !important;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-indent: 0 !important;
        letter-spacing: normal !important;
        line-height: 1.5 !important;
        font-size: 0 !important; /* hide plain text node labels; pseudo-label below renders them */
    }

    #appTabs .nav-link > i,
    #appTabs .nav-link > .fas,
    #appTabs .nav-link > .far,
    #appTabs .nav-link > .fab {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        order: 1 !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1rem !important;
        margin-right: 0 !important;
    }

    #appTabs .qchat-external-profile-tab-avatar {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        order: 1 !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-right: 0 !important;
    }

    #appTabs .nav-link:not(.qchat-external-profile-tab)[title]::before {
        content: attr(title) !important;
        display: inline-block !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        color: currentColor !important;
    }

    #appTabs .qchat-external-profile-tab[data-external-username]::before {
        content: attr(data-external-username) !important;
        display: inline-block !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        color: currentColor !important;
    }

    #appTabs .qchat-external-profile-tab-name,
    #appTabs .nav-link > span:not(.badge):not(.qchat-external-profile-tab-avatar):not(.qchat-external-profile-pin-mark) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #appTabs .qchat-external-profile-pin-mark {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        order: 3 !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.85rem !important;
        margin-left: 0.2rem !important;
    }

    #appTabs .badge:not(.hidden):not(.d-none) {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        order: 4 !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        min-width: var(--bs-badge-min-width, auto) !important;
        max-width: none !important;
        height: auto !important;
        padding: var(--bs-badge-padding-y, 0.35em) var(--bs-badge-padding-x, 0.65em) !important;
        margin-left: 0.25rem !important;
        overflow: visible !important;
        font-size: 0.75rem !important;
    }

    #appTabs .badge.hidden,
    #appTabs .badge.d-none,
    #appTabs .qchat-social-badge.d-none,
    #appTabs .notification-center-badge.d-none,
    #appTabs #unreadMessagesBadge.hidden,
    #appTabs #friendsRequestsBadge.d-none,
    #appTabs #notificationCenterBadge.d-none {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        pointer-events: none !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 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 v160: removed duplicated v144-v149 responsive image thumbnail hotfixes. */

/* 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 v160 unified image layout fallback.
   JS in chat-manager.js applies exact natural pixel sizes for single images.
   CSS here only provides safe defaults and keeps multi-image albums cropped. */
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-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="1"] .file-preview.image-preview.qchat-chat-image-tile {
    width: auto !important;
    max-width: min(340px, 76vw, calc(100vw - 96px)) !important;
    height: auto !important;
    max-height: min(420px, 62vh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !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 {
    display: block !important;
    width: auto !important;
    max-width: min(340px, 76vw, calc(100vw - 96px)) !important;
    height: auto !important;
    max-height: min(420px, 62vh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images:not([data-file-group-count="1"]),
html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images:not([data-file-group-count="1"]) > .qchat-file-bundle-item {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body #messagesContainer .message .qchat-file-bundle-grid.qchat-file-bundle-grid-images:not([data-file-group-count="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 center !important;
    display: block !important;
}

/* qchat v194: Friends and notifications tabs should use the full tab viewport.
   These tabs do not have the chat composer at the bottom, so their internal lists
   must not reserve extra space under the scroll area. */
#friendsTab,
#notificationsTab,
#friendsTab > .row,
#notificationsTab > .row {
    height: 100% !important;
    min-height: 0 !important;
}

#friendsTab > .row > [class*="col-"],
#notificationsTab > .row > [class*="col-"] {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#friendsTab .card,
#notificationsTab .card,
#friendsTab .qchat-friends-panel {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#friendsTab .card-body,
#notificationsTab .card-body {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#notificationsTab .notification-center-toolbar {
    flex: 0 0 auto !important;
}

#friendsTab .qchat-friends-list,
#notificationsTab .notification-center-list {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* Keep editable controls readable at focus on touch WebKit. Do not disable pinch zoom. */
@supports (-webkit-touch-callout: none) {
    @media (hover: none) and (pointer: coarse) {
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
        textarea,
        select,
        #userSearchInput,
        #globalSearchInput,
        #messageInput,
        #profileBlogInput {
            font-size: max(16px, 1rem) !important;
        }
    }
}