/* QChat static document-shell styles.
   Kept outside index.html so CSP can eventually remove inline style allowances.
   This file intentionally contains the former index-only cascade overrides. */

/* Static equivalents of former style attributes in index.html. */
#notificationsContainer.qchat-notifications-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    width: 280px;
}

.qchat-auth-language-select {
    max-width: 190px;
}

.qchat-auth-progress {
    height: 8px;
}

.qchat-progress-zero {
    width: 0%;
}

.qchat-header-user-actions {
    padding-top: 15px;
}

.qchat-chat-column {
    border-left: 1px solid rgba(0, 0, 0, .125);
}

#callButtonsContainer.qchat-call-buttons-initially-hidden {
    display: none;
}

#profileBlogInput {
    min-height: 38px;
}

#createProfileBlogPostBtn {
    width: 120px;
}

/* P95: keep icon actions the same stable control size as the send lane.
   Bootstrap input-group still owns border joining/radii; these rules only stop
   hover/focus paint from looking smaller than its neighboring controls. */
#message_div.qchat-composer > #uploadFileBtn,
#message_div.qchat-composer > #emojiToggleBtn,
#message_div.qchat-composer > #voiceRecordBtn,
#profileBlogComposerInputGroup.qchat-profile-blog-composer-input > #profileBlogAttachFileBtn,
#profileBlogComposerInputGroup.qchat-profile-blog-composer-input > #profileBlogEmojiToggleBtn,
#profileBlogComposerInputGroup.qchat-profile-blog-composer-input > #profileBlogVoiceRecordBtn {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    box-sizing: border-box;
}

#message_div.qchat-composer > #sendMessageBtn,
#profileBlogComposerInputGroup.qchat-profile-blog-composer-input > #createProfileBlogPostBtn {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    align-self: flex-end;
    box-sizing: border-box;
}

/* P95: profile/update comment composer mirrors the multiline chat composer. */
.profile-blog-comment-form .input-group {
    align-items: flex-end;
}

.profile-blog-comment-form .profile-blog-comment-input {
    resize: none;
    overflow-y: hidden;
    min-height: 38px;
    max-height: 120px;
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.profile-blog-comment-form .profile-blog-comment-input.qchat-message-textarea-scroll {
    overflow-y: auto;
}

#cropImage {
    max-height: 300px;
}

#globalSearchOverlay {
    z-index: 9998;
}

#globalSearchOverlay .qchat-global-search-dialog {
    width: 90%;
    max-width: 500px;
    z-index: 9999;
}

/* Session restore paint guard */
/* Applied from <head> before body is parsed, so the login card never paints for
           already-authenticated users while Signal/IndexedDB restore is running. */
        html.qchat-session-restore-pending #authSection,
        html[data-qchat-session-restore-pending="1"] #authSection {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        html.qchat-session-restore-pending body,
        html[data-qchat-session-restore-pending="1"] body {
            background: var(--bs-body-bg, #fff);
        }

/* Application tabs */
#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.nav-tabs .nav-link {
            display: inline-flex !important;
            align-items: center;
            gap: 0.35rem;
            white-space: nowrap;
        }

        #appTabs.nav-tabs .nav-link > i,
        #appTabs.nav-tabs .nav-link > .fas,
        #appTabs.nav-tabs .nav-link > .far,
        #appTabs.nav-tabs .nav-link > .fab {
            margin-right: 0 !important;
            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;
        }

        #appTabs.nav-tabs .nav-link.active:focus,
        #appTabs.nav-tabs .nav-link.active:hover {
            border-bottom-color: var(--bs-nav-tabs-link-active-bg, var(--bs-body-bg, #fff)) !important;
        }

        body.dark-theme #appTabs.nav-tabs {
            background-image: linear-gradient(var(--qchat-dark-surface-3, #30363d), var(--qchat-dark-surface-3, #30363d));
        }

        body.dark-theme #appTabs.nav-tabs .nav-link.active::after,
        body.dark-theme #appTabs.nav-tabs .nav-item.show .nav-link::after {
            background: var(--qchat-dark-surface, #161b22);
        }

/* Application tabs scrollbar */
#appTabs {
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

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

/* Compact mobile application tabs */
@media (max-width: 600px) {
            #appTabs {
                flex-wrap: nowrap !important;
                overflow-x: auto;
                overflow-y: hidden;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }

            #appTabs::-webkit-scrollbar {
                display: none;
            }

            #appTabs .nav-item {
                flex: 1 1 0;
                min-width: 0;
                text-align: center;
            }

            #appTabs .nav-link {
                display: flex !important;
                align-items: center;
                justify-content: center;
                gap: .22rem;
                min-height: 42px;
                padding: .55rem .35rem !important;
                white-space: nowrap;
                font-size: 0 !important;
                line-height: 1;
            }

            #appTabs .nav-link > i,
            #appTabs .nav-link .fas,
            #appTabs .nav-link .far,
            #appTabs .nav-link .fab {
                margin: 0 !important;
                font-size: 1.1rem !important;
                line-height: 1;
            }

            #appTabs .nav-link > .badge {
                margin-left: .12rem !important;
                font-size: .62rem !important;
                line-height: 1;
                min-width: 1.25rem;
                padding: .25em .38em;
            }

            #appTabs .qchat-external-profile-tab-name {
                display: none !important;
            }
        }

/* Profile statistics responsive layout */
#profileTab .profile-info-section,
        #profileTab .stats-section,
        #profileTab .profile-content,
        #profileTab .card-body {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        #profileTab .stats-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: .75rem;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

        #profileTab .stat-item {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        #profileTab .stat-number,
        #profileTab .stat-label {
            min-width: 0;
            max-width: 100%;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        #profileTab .stat-label {
            line-height: 1.15;
        }

        #profileTab .qchat-stats-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
        }

        #profileTab .qchat-stats-toggle-chevron {
            display: none;
        }

        @media (max-width: 600px) {
            #profileTab .stats-section .qchat-stats-toggle {
                margin: 0;
                padding: .72rem .82rem;
                border: 0 !important;
                border-radius: .75rem;
                background: rgba(127, 127, 127, .09);
                cursor: pointer;
                user-select: none;
                -webkit-tap-highlight-color: transparent;
            }

            #profileTab .stats-section .qchat-stats-toggle:focus-visible {
                outline: 2px solid currentColor;
                outline-offset: 2px;
            }

            #profileTab .qchat-stats-toggle-chevron {
                display: inline-block;
                flex: 0 0 auto;
                transition: transform .18s ease;
            }

            #profileTab .stats-section .stats-grid {
                display: none !important;
                margin-top: .65rem;
            }

            #profileTab .stats-section.qchat-stats-expanded .stats-grid {
                display: grid !important;
            }

            #profileTab .stats-section.qchat-stats-expanded .qchat-stats-toggle-chevron {
                transform: rotate(180deg);
            }

            #profileTab .profile-tab-scroll,
            #profileTab .profile-content,
            #profileTab .profile-info-section,
            #profileTab .stats-section {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden;
            }

            #profileTab .stats-grid {
                grid-template-columns: 1fr !important;
                gap: .5rem;
            }

            #profileTab .stat-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: .75rem;
                text-align: left !important;
                padding: .6rem .7rem;
                border-radius: .75rem;
            }

            #profileTab .stat-number {
                flex: 0 0 auto;
                min-width: 2.5rem;
                text-align: left;
                white-space: nowrap;
            }

            #profileTab .stat-label {
                flex: 1 1 auto;
                text-align: right;
                font-size: .82rem;
            }
        }

/* Profile two-column responsive layout */
@media (min-width: 1024px) {
            body .qchat-root-container.qchat-profile-wide-mode {
                width: 100% !important;
                max-width: 100% !important;
            }

            #profileTab,
            #profileTab > .row,
            #profileTab > .row > [class*="col-"],
            #profileTab .card,
            #profileTab .profile-tab-scroll,
            #profileTab .profile-content {
                height: 100%;
                min-height: 0;
            }

            #profileTab > .row {
                width: 100%;
                margin-left: 0;
                margin-right: 0;
            }

            #profileTab > .row > [class*="col-"] {
                flex: 0 0 100% !important;
                width: 100% !important;
                max-width: 100% !important;
                padding-left: .75rem;
                padding-right: .75rem;
            }

            #profileTab .profile-tab-scroll {
                overflow: hidden !important;
                padding: 0 !important;
            }

            #profileTab .qchat-profile-two-column-layout {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                width: 100%;
                height: 100%;
                min-height: 0;
                gap: 0;
            }

            #profileTab .qchat-profile-left-block,
            #profileTab .qchat-profile-right-block {
                min-width: 0;
                min-height: 0;
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 1rem;
                box-sizing: border-box;
                scrollbar-width: thin;
            }

            #profileTab .qchat-profile-left-block {
                border-right: 1px solid rgba(0, 0, 0, .08);
            }

            #profileTab .qchat-profile-right-block {
                background: rgba(0, 0, 0, .015);
            }

            #profileTab .qchat-profile-right-block .profile-blog-posts {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }

            #profileTab .qchat-profile-left-block .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
            }
        }

        /* QChat v351: optional classic single-page desktop profile layout.
           Split stays the default; mobile/tablet already use the single-column flow. */
        @media (min-width: 1024px) {
            body.qchat-profile-layout-single #profileTab > .row > [class*="col-"] {
                flex: 0 0 50% !important;
                width: 50% !important;
                max-width: 50% !important;
            }

            body.qchat-profile-layout-single #profileTab .profile-tab-scroll {
                overflow-y: auto !important;
                overflow-x: hidden !important;
                padding: 0 !important;
            }

            body.qchat-profile-layout-single #profileTab .profile-content,
            body.qchat-profile-layout-single #profileTab .qchat-profile-two-column-layout {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                min-height: 100% !important;
            }

            body.qchat-profile-layout-single #profileTab .qchat-profile-left-block,
            body.qchat-profile-layout-single #profileTab .qchat-profile-right-block {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                height: auto !important;
                min-height: 0 !important;
                overflow: visible !important;
                padding: 1rem !important;
                border: 0 !important;
                background: transparent !important;
                box-sizing: border-box !important;
            }

            body.qchat-profile-layout-single #profileTab .qchat-profile-right-block {
                padding-top: 0 !important;
            }
        }

        @media (max-width: 1023.98px) {
            /* Prevent Bootstrap col-md/col-lg widths from creating a half/tablet profile layout. */
            #profileTab,
            #profileTab > .row,
            #profileTab > .row > [class*="col-"] {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
            }

            #profileTab > .row {
                margin-left: 0 !important;
                margin-right: 0 !important;
                justify-content: stretch !important;
            }

            #profileTab > .row > [class*="col-"] {
                flex: 0 0 100% !important;
                padding-left: .75rem !important;
                padding-right: .75rem !important;
            }

            #profileTab .card,
            #profileTab .profile-tab-scroll,
            #profileTab .profile-content {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
            }

            #profileTab .profile-tab-scroll {
                overflow-y: auto !important;
                overflow-x: hidden !important;
            }

            #profileTab .qchat-profile-two-column-layout,
            #profileTab .qchat-profile-left-block,
            #profileTab .qchat-profile-right-block {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                height: auto !important;
                overflow: visible !important;
                padding: 0 !important;
                border: 0 !important;
                background: transparent !important;
            }
        }

/* Profile avatar sizing override */
body #profileAvatar .qchat-profile-avatar-edit-wrap {
            position: relative !important;
            display: inline-block !important;
            width: auto !important;
            height: auto !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: 100% !important;
            max-height: none !important;
            border-radius: 50% !important;
            overflow: hidden !important;
            border: 1px solid rgba(0, 0, 0, .10) !important;
            box-shadow: 0 8px 22px rgba(0, 0, 0, .12) !important;
            background: var(--bs-body-bg, #fff) !important;
        }

        body #profileAvatar .qchat-profile-avatar-edit-wrap > img.profile-avatar {
            display: block !important;
            width: auto !important;
            height: auto !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: 100% !important;
            max-height: none !important;
            margin: 0 auto !important;
            border-radius: 50% !important;
            object-fit: contain !important;
            align-self: auto !important;
        }

        body #profileAvatar .qchat-profile-avatar-edit-wrap > .avatar-placeholder {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 160px !important;
            height: 160px !important;
            min-width: 160px !important;
            min-height: 160px !important;
            max-width: 100% !important;
            border-radius: 50% !important;
            margin: 0 !important;
            align-self: auto !important;
            font-size: 52px !important;
        }


/* QChat patch v325: comments/updates polish. */
#updatesTab .profile-blog-post .profile-blog-comments {
    margin-left: 0 !important;
}

.profile-blog-comment-form .profile-blog-comment-input {
    min-height: 38px !important;
}

.profile-blog-comment-form .input-group > .btn[type="submit"] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    align-self: flex-end !important;
    box-sizing: border-box !important;
}

/* QChat patch v326: one comment surface for Profile Blog and Updates.
 * The Profile Blog layout is the canonical shape: flat comments body/cards,
 * no nested rounded shell, and one shared composer geometry everywhere. */
:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comments {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 10px !important;
    border-top: 0 !important;
    box-sizing: border-box !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comments-body,
:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comments-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comments-body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comments-list {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    line-height: 1.45 !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment + .profile-blog-comment {
    margin-top: 4px !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment-date {
    margin-top: 3px !important;
    line-height: 1.3 !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment-content {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment-actions {
    margin-top: 9px !important;
    line-height: 1.35 !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment-replies {
    width: auto !important;
    max-width: none !important;
    margin-top: 12px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment-reply {
    border: 0 !important;
    box-shadow: none !important;
}

:is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 16px 16px !important;
    box-sizing: border-box !important;
}

/* Keep the composer control and Send button exactly the same outer height.
 * The button stretches with the textarea if a multiline comment grows. */
.profile-blog-comment-form .input-group {
    align-items: stretch !important;
    min-height: 38px !important;
}

.profile-blog-comment-form .profile-blog-comment-input {
    min-height: 38px !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.profile-blog-comment-form .input-group > .btn[type="submit"] {
    height: auto !important;
    min-height: 38px !important;
    max-height: none !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Match the existing Profile Blog zebra surfaces in Updates too. */
body.light-theme :is(#profileTab, #updatesTab) .profile-blog-comments-list > .profile-blog-comment:nth-child(odd),
body.auto-theme :is(#profileTab, #updatesTab) .profile-blog-comments-list > .profile-blog-comment:nth-child(odd) {
    background: rgba(13, 110, 253, 0.035) !important;
}
body.light-theme :is(#profileTab, #updatesTab) .profile-blog-comments-list > .profile-blog-comment:nth-child(even),
body.auto-theme :is(#profileTab, #updatesTab) .profile-blog-comments-list > .profile-blog-comment:nth-child(even) {
    background: rgba(108, 117, 125, 0.075) !important;
}
body.dark-theme :is(#profileTab, #updatesTab) .profile-blog-comments-list > .profile-blog-comment:nth-child(odd) {
    background: rgba(255, 255, 255, 0.035) !important;
}
body.dark-theme :is(#profileTab, #updatesTab) .profile-blog-comments-list > .profile-blog-comment:nth-child(even) {
    background: rgba(255, 255, 255, 0.075) !important;
}

@media (prefers-color-scheme: dark) {
    body.auto-theme :is(#profileTab, #updatesTab) .profile-blog-comments-list > .profile-blog-comment:nth-child(odd) {
        background: rgba(255, 255, 255, 0.035) !important;
    }
    body.auto-theme :is(#profileTab, #updatesTab) .profile-blog-comments-list > .profile-blog-comment:nth-child(even) {
        background: rgba(255, 255, 255, 0.075) !important;
    }
}

@media (min-width: 768px) {
    :is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment-content,
    :is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment-actions {
        margin-left: 44px !important;
        margin-right: 0 !important;
    }

    :is(#profileTab, #updatesTab) .profile-blog-post .profile-blog-comment-replies {
        margin-left: 28px !important;
    }
}

/* QChat v349 — desktop Profile transition stability.
 * Bootstrap's generic .fade cross-fades the outgoing tab and the dense profile feed,
 * producing a visible translucent flash/jitter.  JS adds this class only for the
 * short interval while entering #profileTab on desktop. */
@media (min-width: 768px) {
    #appSection.qchat-profile-tab-instant-switch .tab-pane.fade {
        transition: none !important;
        animation: none !important;
    }
}