/* QChat chat interactions — static CSP-safe styles v316. */

/* Message footer/mobile timestamp. */
#messagesContainer .message .message-time,
#messagesContainer .message.sent .message-time,
#messagesContainer .message.received .message-time,
#messagesContainer .message .message-time-wrap,
#messagesContainer .message.sent .message-time-wrap,
#messagesContainer .message.received .message-time-wrap {
    color: var(--bs-secondary-color, #6c757d) !important;
}

#messagesContainer .message .message-time {
    opacity: 0.95 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
}

#messagesContainer .message .message-time-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.18rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1.05 !important;
}

#messagesContainer .message .message-edited-label {
    color: var(--bs-secondary-color, #6c757d) !important;
}

/* Compact Telegram-style metadata for ordinary text/call/emoji messages.
 * The footer shares the same final row as message content instead of creating
 * a dedicated strip underneath the bubble. Complex/file/media rows keep their
 * existing footer geometry. */
#messagesContainer .message.qchat-message-inline-meta .message-content-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, auto) max-content !important;
    grid-template-areas:
        "header header"
        "reply reply"
        "content meta" !important;
    align-items: end !important;
    column-gap: 0.38rem !important;
    row-gap: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#messagesContainer .message.qchat-message-inline-meta .message-header {
    grid-area: header !important;
}

#messagesContainer .message.qchat-message-inline-meta .message-reply-preview {
    grid-area: reply !important;
    min-width: 0 !important;
}

#messagesContainer .message.qchat-message-inline-meta .message-content {
    grid-area: content !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: end !important;
}

#messagesContainer .message.qchat-message-inline-meta .message-footer,
#messagesContainer .message.qchat-message-inline-meta.sent .message-footer,
#messagesContainer .message.qchat-message-inline-meta.received .message-footer {
    grid-area: meta !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    align-self: end !important;
    gap: 0.18rem !important;
    margin: 0 0 0.04rem 0 !important;
    padding: 0 !important;
    line-height: 1.05 !important;
    text-align: right !important;
    overflow: visible !important;
}

#messagesContainer .message.qchat-message-inline-meta .message-footer.justify-content-between {
    justify-content: flex-end !important;
}

#messagesContainer .message.qchat-message-inline-meta .message-time-wrap,
#messagesContainer .message.qchat-message-inline-meta .message-checkmark,
#messagesContainer .message.qchat-message-inline-meta .message-status {
    flex: 0 0 auto !important;
    margin: 0 !important;
    line-height: 1.05 !important;
}

/* Telegram-style history date overlay.
 * There is exactly one floating pill for the chat. It is shown only while the
 * user is actively scrolling into an older day, then fades away. This avoids
 * persistent "Yesterday" at the bottom and prevents sticky day labels from
 * stacking over one another. */
#messagesContainer {
    position: relative !important;
}

#messagesContainer > .qchat-history-scroll-date {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--qchat-history-scroll-date-top, 0px) !important;
    z-index: 18 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-0.18rem) !important;
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms !important;
}

#messagesContainer > .qchat-history-scroll-date.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 120ms ease, transform 120ms ease !important;
}

#messagesContainer > .qchat-history-scroll-date > .qchat-history-scroll-date-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1.35rem !important;
    max-width: min(80%, 22rem) !important;
    padding: 0.12rem 0.55rem !important;
    border-radius: 999px !important;
    background: rgba(92, 118, 96, 0.82) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.dark-theme #messagesContainer > .qchat-history-scroll-date > .qchat-history-scroll-date-pill {
    background: rgba(50, 62, 72, 0.88) !important;
}

body.light-theme #messagesContainer > .qchat-history-scroll-date > .qchat-history-scroll-date-pill {
    background: rgba(90, 116, 94, 0.76) !important;
}


/* Stable message audio controls. */
/* v73: keep chat audio controls visible and stable, and prevent prev/play/next overlap. Some message-level injected CSS
   still hides .qchat-audio-mini-controls until hover, which can make Play/Pause vanish
   right after click. This high-specificity override applies only inside messages. */
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls,
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls.controls,
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-stacked,
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-fixed,
html body #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls,
html body #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls,
html body #messagesContainer .message .qchat-audio-mini-player.playing .qchat-audio-mini-controls,
html body #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls,
html body #messagesContainer .message .qchat-audio-mini-player:has(.qchat-audio-play-btn .fa-pause) .qchat-audio-mini-controls {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 24px 28px 24px !important;
    grid-template-areas: "prev play next" "range range range" !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: 3px !important;
    row-gap: 3px !important;
    flex: 0 0 82px !important;
    flex-basis: 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin-left: auto !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .prev,
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .play,
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .next,
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-mini-btn,
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-play-btn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    z-index: 3 !important;
}
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .prev { grid-area: prev !important; }
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .play { grid-area: play !important; width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; }
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .next { grid-area: next !important; }
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap {
    grid-area: range !important;
    display: block !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 4px !important;
    min-height: 4px !important;
    line-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(var(--qchat-volume-align-y, 0px)) !important;
}
html body #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range {
    grid-area: range !important;
    display: block !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 4px !important;
    min-height: 4px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Voice transcription UI. */
#messagesContainer .qchat-voice-transcript-action-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    min-width: 0;
}
#messagesContainer .qchat-voice-transcript-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    max-width: 100%;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.2;
    font-size: 0.74rem;
    white-space: nowrap;
}
#messagesContainer .qchat-voice-transcript-btn .fa-spinner {
    font-size: 0.72rem;
}
#messagesContainer .qchat-voice-transcript {
    display: none;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.14);
    color: inherit;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.88rem;
    line-height: 1.35;
}
#messagesContainer .qchat-voice-transcript.qchat-voice-transcript-visible {
    display: block;
}
#messagesContainer .qchat-voice-transcript-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 0.76rem;
    font-weight: 600;
    opacity: 0.75;
}
#messagesContainer .qchat-voice-transcript-text {
    white-space: pre-wrap;
}
#messagesContainer .qchat-voice-transcript-error {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.18);
}

/* Audio hash-anchor focus. */
.qchat-audio-anchor-active {
                        outline: 2px solid rgba(13, 110, 253, 0.45);
                        outline-offset: 2px;
                        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
                        transition: outline-color 180ms ease, box-shadow 180ms ease;
                    }


/* QChat v314: chat history scrollbar parity with Profile/Settings.
 * Keep the message lane scrollbar thin, rounded and unobtrusive instead of
 * falling back to the browser/default dark scrollbar. */
#messagesContainer.message-container,
#messagesContainer {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

#messagesContainer.message-container::-webkit-scrollbar,
#messagesContainer::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#messagesContainer.message-container::-webkit-scrollbar-track,
#messagesContainer::-webkit-scrollbar-track {
    background: transparent !important;
}

#messagesContainer.message-container::-webkit-scrollbar-thumb,
#messagesContainer::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 10px;
    min-height: 36px;
}

#messagesContainer.message-container::-webkit-scrollbar-thumb:hover,
#messagesContainer::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme #messagesContainer.message-container,
body.dark-theme #messagesContainer {
    scrollbar-color: #30363d transparent;
}

body.dark-theme #messagesContainer.message-container::-webkit-scrollbar-track,
body.dark-theme #messagesContainer::-webkit-scrollbar-track {
    background: transparent !important;
}

body.dark-theme #messagesContainer.message-container::-webkit-scrollbar-thumb,
body.dark-theme #messagesContainer::-webkit-scrollbar-thumb {
    background-color: #30363d !important;
}

body.dark-theme #messagesContainer.message-container::-webkit-scrollbar-thumb:hover,
body.dark-theme #messagesContainer::-webkit-scrollbar-thumb:hover {
    background-color: #484f58 !important;
}

@media (max-width: 768px) {
    #messagesContainer.message-container::-webkit-scrollbar,
    #messagesContainer::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* v26.5 public hashtags */
.qchat-hashtag{display:inline!important;border:0!important;padding:0!important;margin:0!important;background:transparent!important;color:var(--bs-link-color,#0d6efd)!important;font:inherit!important;font-weight:600!important;line-height:inherit!important;vertical-align:baseline!important;cursor:pointer!important}
.qchat-hashtag:hover,.qchat-hashtag:focus-visible{text-decoration:underline!important;color:var(--bs-link-hover-color,#0a58ca)!important;outline:none!important}
.qchat-hashtag-search-dialog{max-width:min(680px,calc(100vw - 24px))!important}.qchat-hashtag-search-results{display:grid!important;gap:.65rem!important}.qchat-hashtag-result{display:grid!important;gap:.5rem!important;padding:.8rem!important;border:1px solid var(--bs-border-color,#dee2e6)!important;border-radius:.75rem!important;background:var(--bs-body-bg,#fff)!important}.qchat-hashtag-result-meta,.qchat-hashtag-result-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.75rem!important;min-width:0!important}.qchat-hashtag-result-text{overflow-wrap:anywhere!important;white-space:pre-wrap!important}

/* v412: hashtag search is a different modal from chat-info/attachments.
 * Bound the actual hashtag modal to the visual viewport and stop any preview
 * payload from expanding the dialog on narrow phones. */
#qchatHashtagSearchModal {
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#qchatHashtagSearchModal .qchat-hashtag-search-dialog {
    width: min(680px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#qchatHashtagSearchModal .modal-content,
#qchatHashtagSearchModal .modal-header,
#qchatHashtagSearchModal .modal-body,
#qchatHashtagSearchModal .modal-footer,
#qchatHashtagSearchModal .qchat-hashtag-search-results,
#qchatHashtagSearchModal .qchat-hashtag-result,
#qchatHashtagSearchModal .qchat-hashtag-result-preview {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
#qchatHashtagSearchModal .modal-content {
    overflow: hidden !important;
}
/* Keep exactly one scroll owner. Setting overflow-x:hidden on each result
 * makes overflow-y compute to auto in browsers, turning every card into its
 * own clipped scrollbox. The modal body scrolls; cards keep natural height. */
#qchatHashtagSearchModal .modal-body {
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
#qchatHashtagSearchModal .qchat-hashtag-search-results {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .65rem !important;
}
#qchatHashtagSearchModal .qchat-hashtag-result {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
#qchatHashtagSearchModal .qchat-hashtag-result-meta,
#qchatHashtagSearchModal .qchat-hashtag-result-bottom,
#qchatHashtagSearchModal .qchat-hashtag-comment-match,
#qchatHashtagSearchModal .qchat-link-preview,
#qchatHashtagSearchModal .profile-blog-attachments,
#qchatHashtagSearchModal .profile-blog-file-bundle-message,
#qchatHashtagSearchModal .qchat-file-bundle-message {
    min-width: 0 !important;
    max-width: 100% !important;
}
@media (max-width: 575.98px) {
    #qchatHashtagSearchModal .qchat-hashtag-search-dialog {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        margin: 6px auto !important;
    }
    #qchatHashtagSearchModal .modal-content {
        max-height: calc(100dvh - 12px) !important;
    }
    #qchatHashtagSearchModal .modal-body {
        padding-left: .65rem !important;
        padding-right: .65rem !important;
    }
    #qchatHashtagSearchModal .qchat-hashtag-result {
        padding: .65rem !important;
    }
}

/* v26.7 hashtag search media preview */
.qchat-hashtag-result-preview{max-width:100%!important;align-self:start!important}
.qchat-hashtag-result-preview .qchat-file-bundle-title{display:none!important}
.qchat-hashtag-result-preview .profile-blog-attachments,.qchat-hashtag-result-preview .profile-blog-file-bundle-message,.qchat-hashtag-result-preview .qchat-file-bundle-message,.qchat-hashtag-result-preview .qchat-file-bundle-groups,.qchat-hashtag-result-preview .profile-blog-file-bundle-groups,.qchat-hashtag-result-preview .qchat-file-bundle-group{max-width:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"]{width:min(220px,100%)!important;overflow:hidden!important;border-radius:.65rem!important}
.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-gallery{display:block!important;width:100%!important;max-width:220px!important;height:132px!important;min-height:132px!important;margin:0!important;padding:0!important;overflow:hidden!important;border-radius:.65rem!important}
.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-gallery-item,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-gallery-tile,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-attachment-preview{display:block!important;width:100%!important;max-width:100%!important;height:132px!important;min-height:132px!important;margin:0!important;padding:0!important;border:0!important;border-radius:.65rem!important;overflow:hidden!important}
.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-attachment-preview img,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-gallery-tile img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;border-radius:.65rem!important}
.qchat-hashtag-result-preview[data-qchat-hashtag-preview="gif"]{width:fit-content!important;max-width:100%!important;overflow:visible!important;border-radius:.65rem!important}
.qchat-hashtag-result-preview[data-qchat-hashtag-preview="gif"] .profile-blog-gallery,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="gif"] .profile-blog-gallery-item,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="gif"] .profile-blog-gallery-tile,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="gif"] .profile-blog-attachment-preview{width:fit-content!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;overflow:visible!important}
.qchat-hashtag-result-preview[data-qchat-hashtag-preview="gif"] .profile-blog-attachment-preview img,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="gif"] .profile-blog-gallery-tile img{display:block!important;width:auto!important;height:auto!important;max-width:min(360px,calc(100vw - 64px))!important;max-height:min(70vh,720px)!important;object-fit:contain!important;object-position:left top!important;border-radius:.65rem!important}
.qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"],.qchat-hashtag-result-preview[data-qchat-hashtag-preview="video"],.qchat-hashtag-result-preview[data-qchat-hashtag-preview="file"],.qchat-hashtag-result-preview[data-qchat-hashtag-preview="mixed"],.qchat-hashtag-result-preview[data-qchat-hashtag-preview="link"]{width:min(460px,100%)!important;overflow:visible!important}
.qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .current-song,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="audio"] .audio_card,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="video"] video,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="link"] .qchat-link-preview{max-width:100%!important}
.qchat-hashtag-result-preview .file-name,.qchat-hashtag-result-preview [data-qchat-album-more]::after{display:none!important}
.qchat-hashtag-result-preview-failed{display:none!important}
.qchat-hashtag-comment-match{display:grid!important;gap:.2rem!important;padding:.45rem .6rem!important;border-left:3px solid var(--bs-link-color,#0d6efd)!important;background:rgba(var(--bs-primary-rgb,13,110,253),.06)!important;border-radius:.35rem!important;overflow-wrap:anywhere!important}
.qchat-hashtag-comment-match-label{font-size:.76rem!important;color:var(--bs-link-color,#0d6efd)!important}.qchat-hashtag-comment-match-text{font-size:.88rem!important;white-space:pre-wrap!important}
@media (max-width:575.98px){.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"]{width:180px!important}.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-gallery,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-gallery-item,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-gallery-tile,.qchat-hashtag-result-preview[data-qchat-hashtag-preview="image"] .profile-blog-attachment-preview{height:108px!important;min-height:108px!important}}

/* v405 hashtag result profile links */
.qchat-hashtag-profile-link{display:inline!important;border:0!important;padding:0!important;margin:0!important;background:transparent!important;color:var(--bs-link-color,#0d6efd)!important;font:inherit!important;font-weight:600!important;line-height:inherit!important;text-align:left!important;cursor:pointer!important}
.qchat-hashtag-profile-link:hover,.qchat-hashtag-profile-link:focus-visible{text-decoration:underline!important;color:var(--bs-link-hover-color,#0a58ca)!important;outline:none!important}