/* Базовые стили и переменные */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  --border-color: #dee2e6;
  --text-color: #212529;
  --text-muted: #6c757d;
  --bg-color: #ffffff;
  --card-bg: #ffffff;
  --header-bg: #f8f9fa;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.hidden { 
    display: none; 
}

.debug-container { 
    max-height: 300px; 
    overflow-y: auto; 
    font-family: monospace;
    font-size: 12px;
}

.tab-content {
 /*   padding: 20px 0;*/
}

.key-status-alert {
    border-left: 4px solid;
}

.key-status-alert.success {
    border-left-color: #198754;
}

.key-status-alert.warning {
    border-left-color: #ffc107;
}

.mnemonic-phrase {
    font-family: monospace;
    font-size: 18px;
    line-height: 1.8;
}

/* Анимации */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Скрытые элементы по умолчанию */
#keyStatus, #avatarUploadBtn {
    display: none;
}

/* Стили для ссылок на профили */
.profile-link {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.profile-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Стили для поля поиска пользователей */
#userSearchInput {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.2s ease;
}

#userSearchInput:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Убедимся, что внутренние элементы не выходят за границы */
.user-item .d-flex {
    flex-wrap: nowrap;
    align-items: center;
}

.user-item .d-flex > div {
    min-width: 0; /* Это важно для правильного обрезания длинного текста */
}


/* Уменьшаем общие отступы */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

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

/* Стили для логотипа */
.app-logo {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--primary-color);
	padding-top: 10px;
    padding-left: 15px;
}

#appTabs{
	padding-top: 20px;
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#appTabs.nav-tabs{
    border-bottom: 0 !important;
    background-image: linear-gradient(var(--bs-nav-tabs-border-color, #dee2e6), var(--bs-nav-tabs-border-color, #dee2e6));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1px;
}

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

#appTabs .nav-item{
    flex: 0 0 auto;
    white-space: nowrap;
}

#appTabs .nav-link{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

#appTabs .nav-link > i,
#appTabs .nav-link > .fas,
#appTabs .nav-link > .far,
#appTabs .nav-link > .fab{
    margin-right: 0 !important;
    flex: 0 0 auto;
}

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

#appTabs.nav-tabs .nav-link.active,
#appTabs.nav-tabs .nav-item.show .nav-link{
    position: relative;
    z-index: 2;
    border-bottom-color: var(--bs-nav-tabs-link-active-bg, var(--bs-body-bg, #fff)) !important;
}

#appTabs.nav-tabs .nav-link.active::after,
#appTabs.nav-tabs .nav-item.show .nav-link::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--bs-nav-tabs-link-active-bg, var(--bs-body-bg, #fff));
    pointer-events: none;
    z-index: 3;
}

.app-logo .logo-text {
    margin-left: 0.5rem;
    background: linear-gradient(135deg, var(--primary-color), #6f42c1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Уменьшаем отступы в карточках */
.card {
    margin-bottom: 0.75rem;
	border: none;
}

.card-body {
    padding: 1rem;
}

.card-header {
    padding: 0.75rem 1rem;
}

.profile-blog-composer-attachments,.toggle-profile-blog-pin, .copy-profile-blog-post-link, .delete-profile-blog-post, #profileBlogAttachFileBtn,#profileBlogEmojiToggleBtn, #profileBlogVoiceRecordBtn{
	border: none !important;
}



/* QChat v8: appTabs labels stay visible on small screens.
   The tabs row is horizontally scrollable now, so there is no need to switch tabs to icon-only mode. */
#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;
    min-width: 0 !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 .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,
#appTabs .badge {
    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;
}

@media (max-width: 768px) {
    #appTabs .nav-link,
    #appTabs .qchat-external-profile-tab {
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        font-size: inherit !important;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !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;
        max-width: none !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 v79: final override for classic audio player width. */
.audio_card.qchat-audio-classic-card,
.qchat-audio-classic-card,
.qchat-audio-classic-card .qchat-audio-classic-player,
.audio_card.qchat-audio-classic-card .current-song,
.audio_card.qchat-audio-classic-card .qchat-audio-classic-player,
.qchat-audio-classic-player,
.blog-audio-current.qchat-audio-classic-player {
    width: min(300px, 100%) !important;
    max-width: 300px !important;
    min-width: 0 !important;
    inline-size: min(300px, 100%) !important;
    max-inline-size: 300px !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
}
.audio_card.qchat-audio-classic-card,
.qchat-audio-classic-card {
    flex: 0 1 300px !important;
    align-self: flex-start !important;
    justify-self: start !important;
}
.qchat-audio-classic-player .song-name,
.qchat-audio-classic-player .song-autor {
    max-width: calc(300px - 24px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
@media (max-width: 300px) {
    .audio_card.qchat-audio-classic-card,
    .qchat-audio-classic-card,
    .qchat-audio-classic-card .qchat-audio-classic-player,
    .audio_card.qchat-audio-classic-card .current-song,
    .audio_card.qchat-audio-classic-card .qchat-audio-classic-player,
    .qchat-audio-classic-player,
    .blog-audio-current.qchat-audio-classic-player {
        width: 100% !important;
        max-width: 100% !important;
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        flex-basis: 100% !important;
    }
}

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

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

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

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

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


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

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

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

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

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

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

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

/* qchat v134 mirror: final non-classic compact audio width normalization. */
html body {
    --qchat-audio-mini-target-width: 464px;
    --qchat-audio-mini-saved-card-width: min(calc(var(--qchat-audio-mini-target-width) + 2rem + 2px), 100%);
}

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

html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-group-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) {
    --qchat-saved-blog-lane-width: var(--qchat-audio-mini-saved-card-width) !important;
    --qchat-audio-saved-blog-card-width: var(--qchat-audio-mini-saved-card-width) !important;
}

/* qchat v143: profile avatar online/offline dot — placed on avatar circle edge */
#profileAvatar .qchat-profile-avatar-edit-wrap.qchat-profile-avatar-status-wrap,
#modalProfileAvatar .qchat-profile-avatar-edit-wrap.qchat-profile-avatar-status-wrap,
#profileAvatar .qchat-profile-avatar-status-wrap,
#modalProfileAvatar .qchat-profile-avatar-status-wrap,
.qchat-profile-avatar-status-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    line-height: 0 !important;
    vertical-align: middle !important;
    max-width: 100% !important;
}

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

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

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

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

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


/* qchat v143: use original #profileStatus/#modalProfileStatus as avatar presence dots */
#profileAvatar .qchat-profile-avatar-status-wrap,
#modalProfileAvatar .qchat-profile-avatar-status-wrap,
#profileAvatar .qchat-profile-avatar-edit-wrap,
#modalProfileAvatar .qchat-profile-avatar-edit-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    line-height: 0 !important;
    vertical-align: middle !important;
}

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

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

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

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


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


/* qchat v160: removed duplicated v144-v149 image thumbnail hotfixes; unified rules live in responsive.css and chat-manager.js. */

/* qchat v151: saved blog audio cards in Favorites/messages stay content-height and give the mini player a real 464px content lane. */
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-player):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-audio-mini-group):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-group-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)),
html body #messagesContainer .message:has(.saved-profile-blog-post):has(.qchat-file-bundle-list-audio):not(:has(.audio_card.qchat-audio-classic-card)):not(:has(.qchat-audio-classic-player)) {
    --qchat-audio-mini-target-width: 464px;
    --qchat-audio-mini-saved-card-width: min(calc(var(--qchat-audio-mini-target-width) + 2rem + 2px), 100%);
}

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

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

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

@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;
    }
}


/* Profile tab menu: readable in every theme, with equal row spacing. */
#externalProfileTabContextMenu {
  padding: 4px !important;
  min-width: 190px;
  background: var(--card-bg, #fff) !important;
  color: var(--text-color, #212529) !important;
  border: 1px solid var(--border-color, #dee2e6);
}
#externalProfileTabContextMenu .dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 !important;
  padding: 8px 12px !important;
  color: var(--text-color, #212529) !important;
  background: transparent !important;
  opacity: 1 !important;
  border-radius: 3px;
  cursor: pointer;
}
#externalProfileTabContextMenu .dropdown-item:hover,
#externalProfileTabContextMenu .dropdown-item:focus-visible {
  color: #fff !important;
  background: var(--primary-color, #007bff) !important;
}

.qchat-deferred-video {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  width: 100%; min-width: 120px; min-height: 170px; max-width: 360px; padding: 16px;
  color: var(--text-color); background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 10px; cursor: pointer; overflow-wrap: anywhere;
}
.qchat-deferred-video-play { font-size: 32px; color: var(--primary-color); }
.qchat-deferred-video-status { font-size: 12px; color: var(--text-muted); }
.qchat-deferred-video[aria-busy="true"] .qchat-deferred-video-play {
  font-size: 0; width: 28px; height: 28px; border: 3px solid var(--border-color);
  border-top-color: var(--primary-color); border-radius: 50%; animation: spinner-border .75s linear infinite;
}
.qchat-demand-video-player { display: block; width: 100%; max-width: 640px; max-height: 70vh; background: #000; }

.qchat-deferred-video .qchat-video-poster { display: block; width: 100%; max-height: 240px; object-fit: contain; border-radius: 6px; }