.chat-name-list {
    min-width: 360px;
    width: 360px;
    height: calc(100vh - 188px);
    overflow-y: auto;
}
.chat-name-list li{
    border-bottom: 1px dashed var(--bs-border-color);
}
.chat-name-list .chat-time{
    font-size: 12px;
}
.chat-name-list li:hover{
    background: rgba(var(--bs-primary-rgb), .1);
    cursor: pointer;
}
.chat-name-list li.active{
    background: rgba(var(--bs-primary-rgb), .1);
    border-color: var(--bs-primary);
}
.chat-details ul {
    height: calc(100vh - 270px);
    overflow-y: auto;
}
.chat-details .message{
    background: rgba(var(--bs-primary-rgb), .1);
}
.chat-details .message .time{
    top: 100%;
    font-size: 12px;
}
.chat-details .message:hover .time{
    transition: var(--transition-3s);
    opacity: .5 !important;
}

[data-bs-theme=dark] {
    .chat-details .message{
        background: rgba(var(--bs-primary-rgb), 1);
    }
}

@media (max-width: 991.98px) {
    .chat-name-list {
        min-width: 320px;
        width: auto;
    }
}

@media (min-width: 767.98px) {
    .chat-details .msg-left{
        width: 80%;
    }
}
@media (max-width: 767.98px) {
    .chat-name-list {
        height: auto;
        border-right: 0 !important;
    }
    .chat-name-list li {
        max-width: 100px;
    }

    .chat-small-msg p{
        font-size: 12px;
        line-height: 14px;
    }

    .chat-details ul {
        height: calc(100vh - 360px);
        overflow-y: auto;
    }

    .chat-typing {
        padding: 6px 12px;
        font-size: 13px;
        color: #888;
    }
}

.chat-load-older {
    flex: 0 0 auto;
}

.chat-load-older .btn {
    --bs-btn-padding-y: .25rem;
}

.chat-member-picker {
    max-height: 320px;
    overflow-y: auto;
}

.chat-user-choice {
    cursor: pointer;
}

.chat-user-choice:hover {
    background: rgba(var(--bs-primary-rgb), .06);
}

.chat-message-wrap {
    position: relative;
    max-width: 70%;
}

.chat-message-actions .dropdown-menu {
    min-width: 9rem;
}

.chat-reply-preview,
.chat-compose-context-card {
    background: rgba(var(--bs-primary-rgb), .08);
    border-left: 3px solid rgba(var(--bs-primary-rgb), .6);
}

.chat-reply-preview {
    border-radius: .65rem;
    padding: .45rem .6rem;
}

.chat-message-deleted-bubble {
    opacity: .82;
}

.chat-message-deleted {
    font-size: .92rem;
}

@media (max-width: 767.98px) {
    .chat-message-wrap {
        max-width: 88%;
    }
}

.chat-name-list .badge {
    margin-left: .35rem;
}

.chat-message-actions .dropdown-menu,
.chat-details-panel .dropdown-menu {
    font-size: .875rem;
}

.chat-avatar-presence {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.chat-presence-dot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
    background: var(--bs-secondary-color);
}

.chat-presence-dot.conversation {
    width: 13px;
    height: 13px;
}

.chat-presence-dot.online {
    background: var(--bs-success);
}

.chat-presence-dot.offline {
    background: var(--bs-secondary-color);
}

.chat-presence-label {
    font-size: .78rem;
}

.chat-notification-host {
    position: fixed;
    top: 88px;
    right: 18px;
    z-index: 1080;
    width: min(340px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}

.chat-notification-toast {
    pointer-events: auto;
    cursor: pointer;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    padding: .75rem .9rem;
}

.chat-notification-toast:hover {
    background: rgba(var(--bs-primary-rgb), .06);
}

.chat-file-card {
    max-width: min(420px, 100%);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    padding: .65rem;
}

.chat-file-card.is-image {
    padding: .5rem;
}

.chat-image-preview {
    display: block;
    width: 100%;
    max-width: 360px;
    max-height: 240px;
    overflow: hidden;
    border-radius: .85rem;
    background: rgba(var(--bs-secondary-rgb), .08);
    cursor: pointer;
}

.chat-image-preview img {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
}

.chat-file-preview {
    max-width: min(360px, 42vw);
}

.chat-selected-file {
    max-width: 100%;
    min-width: 220px;
    background: rgba(var(--bs-primary-rgb), .05);
}

.chat-selected-file-thumb {
    width: 48px;
    height: 48px;
    border-radius: .75rem;
    object-fit: cover;
}

.chat-selected-file-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background: rgba(var(--bs-secondary-rgb), .08);
}

@media (max-width: 767.98px) {
    .chat-file-preview {
        max-width: 100%;
    }

    .chat-send .d-flex.align-items-center {
        flex-wrap: wrap;
    }
}

.chat-search-panel {
    background: rgba(var(--bs-primary-rgb), .035);
}

.chat-search-results {
    max-height: 260px;
    overflow-y: auto;
}

.chat-search-result {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.chat-search-result:hover {
    border-color: rgba(var(--bs-primary-rgb), .45);
    background: rgba(var(--bs-primary-rgb), .055);
}

.chat-message-highlight {
    animation: chat-message-highlight 2.5s ease;
}

@keyframes chat-message-highlight {
    0%, 100% { background: transparent; }
    15%, 80% { background: rgba(var(--bs-warning-rgb), .24); }
}

/* Phase 12: chat stabilization, responsive layout and state surfaces */
html,
body.chat-page-body {
    height: 100%;
    overflow: hidden;
}

body.chat-page-body {
    min-height: 100vh;
}

.chat-page-wrapper {
    height: calc(100vh - 140px);
    overflow: hidden;
}

.chat-page-layout {
    height: 100%;
    min-height: 0;
}

.chat-name-list {
    height: 100%;
    overflow-x: hidden;
    min-height: 0;
}

.chat-details-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#chatEmpty {
    height: 100%;
}

#chatPanel {
    min-height: 0;
}

#messageList {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 12px;
    scroll-behavior: smooth;
}

.chat-send {
    flex: 0 0 auto;
    background: var(--bs-body-bg);
    position: sticky;
    bottom: 0;
    z-index: 2;
}

#typingIndicator {
    flex: 0 0 auto;
    min-height: 24px;
}

.chat-connection-banner {
    position: fixed;
    left: 50%;
    top: 72px;
    transform: translateX(-50%);
    z-index: 1081;
    width: min(560px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .12);
    font-size: .9rem;
}

.chat-connection-banner.is-warning {
    border-color: rgba(var(--bs-warning-rgb), .45);
    background: rgba(var(--bs-warning-rgb), .08);
}

.chat-connection-banner.is-danger {
    border-color: rgba(var(--bs-danger-rgb), .45);
    background: rgba(var(--bs-danger-rgb), .08);
}

.chat-empty-state {
    border: 1px dashed var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-secondary-rgb), .035);
}

.chat-panel-toolbar {
    flex-wrap: wrap;
}

.chat-message-wrap .message {
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .chat-page-wrapper {
        height: calc(100vh - 128px);
    }

    .chat-panel-toolbar {
        justify-content: flex-start !important;
    }
}

@media (max-width: 767.98px) {
    html,
    body.chat-page-body {
        overflow: auto;
    }

    .chat-page-wrapper {
        height: auto;
        overflow: visible;
    }

    .chat-page-layout {
        height: auto;
    }

    .chat-name-list {
        height: auto;
        max-height: 180px;
    }

    .chat-details-panel {
        height: calc(100vh - 300px);
        min-height: 420px;
    }

    #messageList {
        max-height: none;
    }

    .chat-connection-banner {
        top: 58px;
        border-radius: 1rem;
        align-items: flex-start;
        flex-direction: column;
    }

    .chat-send .d-flex.align-items-center {
        align-items: stretch !important;
    }

    #txtMessage {
        min-width: 100%;
    }

    #btnAttach,
    #btnSendMessage {
        flex: 1 1 auto;
    }
}

/* Responsive UX hardening: chat mobile list/thread split */
.chat-list-panel {
    min-width: 360px;
    width: 360px;
    height: 100%;
    min-height: 0;
}

.chat-list-panel .chat-name-list {
    width: 100%;
    min-width: 0;
}

.chat-conversation-item {
    min-width: 0;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.chat-conversation-item .avatar {
    flex: 0 0 auto;
}

.chat-thread-topbar {
    gap: .75rem;
}

.chat-thread-topbar > .min-w-0,
.chat-small-msg,
#activeConversationTitle {
    min-width: 0;
}

.chat-back-button {
    color: var(--bs-body-color);
    flex: 0 0 auto;
}

.chat-mobile-search {
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .chat-list-panel {
        min-width: 320px;
        width: 320px;
    }
}

@media (max-width: 767.98px) {
    html,
    body.chat-page-body {
        height: 100%;
        overflow: hidden;
    }

    body.chat-page-body {
        min-height: 100dvh;
        overscroll-behavior: none;
    }

    .chat-page-body .page-breadcrumbs {
        z-index: 1020;
    }

    .chat-page-body .page-breadcrumbs .container-fluid,
    .chat-page-wrapper > .container-fluid {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .chat-page-body .page-action {
        gap: .45rem !important;
        flex-wrap: nowrap;
    }

    .chat-page-body .page-action .btn-sm {
        --bs-btn-padding-x: .55rem;
        --bs-btn-padding-y: .28rem;
        font-size: .78rem;
    }

    .chat-page-body .page-action svg {
        width: 23px;
        height: 23px;
    }

    .chat-page-body .page-name {
        max-width: 110px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-page-wrapper {
        height: calc(100dvh - var(--chat-mobile-shell-offset, 232px));
        min-height: 0;
        overflow: hidden;
        padding-top: .75rem !important;
        padding-bottom: .5rem !important;
    }

    .chat-page-layout {
        display: block !important;
        position: relative;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .chat-list-panel,
    .chat-details-panel {
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 0;
        border-right: 0 !important;
        padding: 0 !important;
    }

    .chat-list-panel {
        display: flex !important;
    }

    .chat-page-layout.is-mobile-list .chat-details-panel,
    .chat-page-layout.is-mobile-list #chatEmpty {
        display: none !important;
    }

    .chat-page-layout.is-mobile-thread .chat-list-panel {
        display: none !important;
    }

    .chat-mobile-search .form-control {
        min-height: 42px;
        background: var(--bs-body-bg);
    }

    .chat-name-list {
        display: flex !important;
        flex-direction: column !important;
        gap: .5rem !important;
        height: auto;
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: .15rem .1rem .75rem !important;
        -webkit-overflow-scrolling: touch;
    }

    .chat-name-list li,
    .chat-name-list .chat-conversation-item {
        width: 100%;
        max-width: none;
        min-height: 72px;
        align-items: center !important;
        border: 1px solid rgba(var(--bs-secondary-rgb), .16);
        border-bottom: 1px solid rgba(var(--bs-secondary-rgb), .16);
        background: var(--bs-body-bg);
        box-shadow: 0 .25rem .75rem rgba(15, 23, 42, .035);
    }

    .chat-name-list .chat-conversation-item.active {
        border-color: rgba(var(--bs-primary-rgb), .42);
        background: rgba(var(--bs-primary-rgb), .08);
    }

    .chat-name-list .chat-small-msg p {
        max-width: 100%;
        font-size: .95rem;
        line-height: 1.25rem;
    }

    .chat-name-list .chat-last-message {
        margin-top: .15rem;
        font-size: .82rem;
    }

    .chat-name-list .chat-time {
        display: block !important;
        align-self: flex-start;
        margin-left: auto;
        padding-top: .15rem;
        font-size: .72rem;
    }

    .chat-details-panel {
        display: flex !important;
        background: var(--bs-body-bg);
        overflow: hidden;
    }

    #chatPanel {
        height: 100%;
        min-height: 0;
    }

    .chat-thread-topbar {
        flex: 0 0 auto;
        align-items: flex-start !important;
        gap: .6rem;
        margin-bottom: .55rem !important;
        padding-bottom: .55rem !important;
    }

    .chat-thread-topbar > .d-flex:first-child {
        flex: 1 1 auto;
        overflow: hidden;
        gap: .65rem !important;
    }

    .chat-thread-topbar .avatar.lg {
        width: 44px;
        height: 44px;
    }

    .chat-thread-topbar #activeConversationTitle {
        max-width: calc(100vw - 210px);
        font-size: 1.05rem;
        line-height: 1.25rem;
    }

    .chat-thread-topbar #activeConversationSubtitle {
        display: block;
        max-width: calc(100vw - 210px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .78rem;
    }

    .chat-panel-toolbar {
        flex: 0 0 auto;
        justify-content: flex-end !important;
        gap: .35rem !important;
        flex-wrap: wrap;
        max-width: 138px;
    }

    .chat-panel-toolbar .btn {
        --bs-btn-padding-x: .5rem;
        --bs-btn-padding-y: .28rem;
        font-size: .75rem;
        line-height: 1.1rem;
    }

    #btnRefreshMessages {
        display: none;
    }

    .chat-search-panel {
        flex: 0 0 auto;
        padding: .75rem !important;
        margin-bottom: .5rem !important;
    }

    #olderMessagesContainer {
        flex: 0 0 auto;
    }

    #messageList {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: .25rem .1rem .75rem !important;
        -webkit-overflow-scrolling: touch;
    }

    .chat-message-wrap {
        max-width: 86%;
    }

    .chat-send {
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        margin-top: .25rem !important;
        padding-top: .55rem !important;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: var(--bs-body-bg);
        border-top: 1px solid var(--bs-border-color) !important;
    }

    .chat-send .d-flex.align-items-center {
        display: grid !important;
        grid-template-columns: 1fr auto auto;
        gap: .5rem !important;
        align-items: center !important;
    }

    #txtMessage {
        min-width: 0;
        width: 100%;
        min-height: 44px;
        font-size: .95rem;
    }

    #btnAttach,
    #btnSendMessage {
        min-height: 42px;
        white-space: nowrap;
    }

    #btnAttach {
        min-width: 44px;
        padding-left: .6rem;
        padding-right: .6rem;
    }

    #filePreview {
        grid-column: 1 / -1;
        order: -1;
    }

    .chat-selected-file {
        min-width: 0;
    }

    .chat-connection-banner {
        top: 58px;
        border-radius: 1rem;
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 374.98px) {
    .chat-page-body .page-name {
        max-width: 86px;
    }

    .chat-thread-topbar #activeConversationTitle,
    .chat-thread-topbar #activeConversationSubtitle {
        max-width: calc(100vw - 188px);
    }

    .chat-panel-toolbar {
        max-width: 118px;
    }

    .chat-panel-toolbar .btn {
        font-size: .7rem;
        --bs-btn-padding-x: .42rem;
    }
}

#messageList {
    height: auto;
}

@media (max-width: 767.98px) {
    #messageList {
        height: auto !important;
    }
}

/* Phase 13: chat mobile polish from device review */
@media (max-width: 767.98px) {
    .chat-page-body.breadcrumbs-primary .page-breadcrumbs .btn-outline-secondary,
    .chat-page-body .page-breadcrumbs .btn-outline-secondary {
        color: rgba(255, 255, 255, .96);
        border-color: rgba(255, 255, 255, .62);
        background-color: rgba(255, 255, 255, .06);
    }

    .chat-page-body.breadcrumbs-primary .page-breadcrumbs .btn-outline-secondary:hover,
    .chat-page-body .page-breadcrumbs .btn-outline-secondary:hover {
        color: var(--bs-primary);
        border-color: rgba(255, 255, 255, .9);
        background-color: rgba(255, 255, 255, .92);
    }

    .chat-page-body.chat-thread-open .page-action li:has(#btnToggleArchived),
    .chat-page-body.chat-thread-open .page-action li:has(#btnToggleUnreadOnly),
    .chat-page-body.chat-thread-open .page-action li:has(#btnNewDirect),
    .chat-page-body.chat-thread-open .page-action li:has(#btnNewGroup) {
        display: none !important;
    }

    .chat-thread-topbar {
        flex-direction: column;
        align-items: stretch !important;
        gap: .45rem;
    }

    .chat-thread-topbar > .d-flex:first-child {
        width: 100%;
        min-width: 0;
    }

    .chat-thread-topbar #activeConversationTitle,
    .chat-thread-topbar #activeConversationSubtitle {
        max-width: calc(100vw - 126px);
    }

    .chat-panel-toolbar {
        width: 100%;
        max-width: none;
        justify-content: flex-start !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: .15rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .chat-panel-toolbar::-webkit-scrollbar {
        display: none;
    }

    .chat-panel-toolbar .btn,
    .chat-panel-toolbar .dropdown {
        flex: 0 0 auto;
    }

    .chat-panel-toolbar .btn {
        --bs-btn-padding-x: .6rem;
        --bs-btn-padding-y: .25rem;
        font-size: .78rem;
        line-height: 1.15rem;
        white-space: nowrap;
    }

    #messageList {
        padding-right: .75rem !important;
        scrollbar-width: none;
        scrollbar-gutter: auto;
    }

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

    .chat-message-row {
        min-width: 0;
    }

    .chat-message-row.chat-message-mine {
        padding-left: 16%;
        padding-right: .15rem;
    }

    .chat-message-row.chat-message-other {
        padding-right: 8%;
    }

    .chat-message-row .chat-message-wrap {
        max-width: 100%;
        min-width: 0;
    }

    .chat-message-mine .chat-file-card {
        margin-left: auto;
    }

    .chat-file-card {
        max-width: min(100%, 330px);
    }

    .chat-image-preview,
    .chat-image-preview img {
        max-width: 100%;
        max-height: 280px;
    }

    .chat-send {
        box-shadow: 0 -.35rem .9rem rgba(255, 255, 255, .92);
    }

    .chat-send .d-flex.align-items-center {
        grid-template-columns: minmax(0, 1fr) 46px minmax(76px, auto);
    }

    #txtMessage {
        min-width: 0 !important;
    }

    #btnSendMessage {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .chat-page-body .modal-dialog {
        margin: .75rem;
        max-height: calc(100dvh - 1.5rem);
    }

    .chat-page-body .modal-content {
        max-height: calc(100dvh - 1.5rem);
        overflow: hidden;
    }

    .chat-page-body .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chat-page-body .modal-footer {
        flex-wrap: nowrap;
        gap: .5rem;
    }

    .chat-page-body .modal-footer .btn {
        white-space: nowrap;
    }

    #directUserList,
    #groupUserList,
    #addMemberList,
    #memberList {
        max-height: calc(100dvh - 270px);
        overflow-y: auto;
        padding-right: .15rem;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 374.98px) {
    .chat-message-row.chat-message-mine {
        padding-left: 10%;
    }

    .chat-send .d-flex.align-items-center {
        grid-template-columns: minmax(0, 1fr) 42px minmax(70px, auto);
        gap: .4rem !important;
    }

    #btnSendMessage {
        padding-left: .85rem;
        padding-right: .85rem;
    }
}


/* Phase 15: chat mobile action menu and readable connection states */
.chat-thread-topbar,
.chat-panel-toolbar,
.chat-panel-toolbar .dropdown,
.chat-message-actions,
.chat-details-panel .dropdown {
    position: relative;
    z-index: 30;
}

.chat-panel-toolbar .dropdown-menu,
.chat-message-actions .dropdown-menu,
.chat-details-panel .dropdown-menu {
    z-index: 2050;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.chat-connection-banner {
    border-width: 1px;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .22);
    font-weight: 600;
}

.chat-connection-banner.is-warning {
    color: #5b4300;
    border-color: rgba(var(--bs-warning-rgb), .85);
    background: #fff3cd;
}

.chat-connection-banner.is-danger {
    color: #6b111b;
    border-color: rgba(var(--bs-danger-rgb), .75);
    background: #f8d7da;
}

.chat-connection-banner .btn {
    background: var(--bs-body-bg);
}

#chatUploadHints:empty {
    display: none !important;
}

[data-bs-theme=dark] .chat-connection-banner {
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .55);
}

[data-bs-theme=dark] .chat-connection-banner.is-warning {
    color: #ffe8a3;
    border-color: rgba(var(--bs-warning-rgb), .85);
    background: rgba(var(--bs-warning-rgb), .24);
}

[data-bs-theme=dark] .chat-connection-banner.is-danger {
    color: #ffc4c9;
    border-color: rgba(var(--bs-danger-rgb), .85);
    background: rgba(var(--bs-danger-rgb), .24);
}

[data-bs-theme=dark] .chat-send {
    box-shadow: 0 -.35rem .9rem rgba(0, 0, 0, .32);
}

@media (max-width: 767.98px) {
    .chat-thread-topbar,
    .chat-details-panel,
    #chatPanel {
        overflow: visible;
    }

    .chat-panel-toolbar {
        overflow: visible !important;
        flex-wrap: wrap !important;
        padding-bottom: 0 !important;
        z-index: 60;
    }

    .chat-panel-toolbar .dropdown {
        position: relative;
        z-index: 70;
    }

    .chat-panel-toolbar .dropdown-menu {
        min-width: 11rem;
        max-width: calc(100vw - 1.5rem);
    }

    .chat-connection-banner {
        top: 64px;
        width: calc(100vw - 1rem);
        padding: .75rem .9rem;
        border-radius: 1rem;
        font-size: .88rem;
        line-height: 1.25rem;
    }

    .chat-send .d-flex.align-items-center {
        grid-template-columns: minmax(0, 1fr) 44px minmax(72px, auto);
    }
}

/* Mobile chat composer safe-area fix: keep the input/send row above Android/iOS bottom chrome
   after removing the visible upload hint text. */
@media (max-width: 767.98px) {
    .chat-send {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px) !important;
    }

    #chatStatus:empty,
    #chatUploadHints {
        display: none !important;
    }
}


/* Chat quality phase: clearer filters, centered search, scrollable direct modal, drag-drop, attachment preview */
.chat-page-body .page-breadcrumbs .chat-filter-toggle {
    color: rgba(255, 255, 255, .96) !important;
    border-color: rgba(255, 255, 255, .68) !important;
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    font-weight: 600;
}

.chat-page-body .page-breadcrumbs .chat-filter-toggle:hover,
.chat-page-body .page-breadcrumbs .chat-filter-toggle:focus-visible {
    color: var(--bs-primary) !important;
    border-color: rgba(255, 255, 255, .95) !important;
    background: rgba(255, 255, 255, .95) !important;
}

.chat-page-body .page-breadcrumbs .chat-filter-toggle.is-active {
    color: var(--bs-primary) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    background: var(--bs-white) !important;
    box-shadow: 0 .35rem .9rem rgba(15, 23, 42, .12);
}

.chat-page-body .page-breadcrumbs #PageSearchInput {
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    height: 36px;
    z-index: 2 !important;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .14);
}

.chat-page-body .page-breadcrumbs #PageSearchInput.active {
    width: min(280px, calc(100vw - 220px));
    padding-right: 2.4rem !important;
}

#directModal .modal-body,
#groupModal .modal-body,
#membersModal .modal-body {
    min-height: 0;
}

#directUserList.chat-member-picker {
    max-height: min(58vh, 520px);
    overflow-y: auto;
    padding-right: .15rem;
    -webkit-overflow-scrolling: touch;
}

.chat-drop-zone {
    position: absolute;
    inset: .75rem;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(var(--bs-primary-rgb), .55);
    border-radius: 1.25rem;
    background: rgba(var(--bs-body-bg-rgb), .92);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.chat-drop-zone-inner {
    text-align: center;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-body-color);
}

.chat-drop-zone-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: .5rem;
}

#chatPanel.is-dragging-file #messageList,
#chatPanel.is-dragging-file .chat-send,
#chatPanel.is-dragging-file .chat-thread-topbar {
    filter: blur(1px);
}

.chat-file-info {
    min-width: 0;
    color: var(--bs-body-color) !important;
}

.chat-file-info:hover .fw-medium,
.chat-image-preview:hover + .d-flex .chat-file-info .fw-medium {
    color: var(--bs-primary);
}

.chat-file-preview-modal .modal-body {
    background: rgba(var(--bs-secondary-rgb), .035);
}

.chat-file-preview-modal-body {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-file-preview-modal-image {
    display: block;
    max-width: 100%;
    max-height: min(72vh, 760px);
    object-fit: contain;
    border-radius: 1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .14);
}

.chat-file-preview-modal-frame {
    width: 100%;
    min-height: min(72vh, 760px);
    border: 0;
    border-radius: 1rem;
    background: var(--bs-body-bg);
}

.chat-file-preview-placeholder,
.chat-file-preview-error,
.chat-file-preview-loading {
    width: 100%;
    border: 1px dashed var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
}

.chat-file-preview-large-icon {
    font-size: 4rem;
    line-height: 1;
}

[data-bs-theme=dark] .chat-drop-zone {
    background: rgba(20, 22, 28, .9);
}

@media (max-width: 767.98px) {
    .chat-page-body .page-breadcrumbs #PageSearchInput.active {
        width: min(220px, calc(100vw - 124px));
    }

    #directUserList.chat-member-picker {
        max-height: calc(100dvh - 230px);
    }

    .chat-drop-zone {
        inset: .5rem;
    }

    .chat-file-card .d-flex.align-items-center.justify-content-between {
        align-items: flex-start !important;
    }

    .chat-file-card .d-flex.align-items-center.gap-2.flex-shrink-0 {
        flex-direction: column;
        align-items: stretch !important;
    }

    .chat-file-preview-modal-body {
        min-height: 220px;
    }
}

/* Chat quality phase 2: clearer message actions and attachment-only layout */
.chat-message-meta {
    min-height: 24px;
}

.chat-message-action-trigger {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 999px;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 1px solid transparent;
    opacity: .72;
}

.chat-message-action-trigger:hover,
.chat-message-action-trigger:focus-visible,
.chat-message-actions.show .chat-message-action-trigger {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .08);
    border-color: rgba(var(--bs-primary-rgb), .18);
    opacity: 1;
}

.chat-action-trigger-icon,
.chat-action-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.chat-action-trigger-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.chat-action-menu {
    padding: .35rem;
    border-radius: .85rem;
}

.chat-action-menu-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    border-radius: .65rem;
    padding: .55rem .7rem;
}

.chat-action-menu-item:hover,
.chat-action-menu-item:focus {
    background: rgba(var(--bs-primary-rgb), .08);
}

.chat-action-menu-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.chat-message-file-only .message:empty,
.chat-message-file-only .message .chat-message-text:empty {
    display: none !important;
}

.chat-message-mine.chat-message-file-only .chat-file-card {
    margin-left: auto;
}

.chat-message-file-only .chat-file-card {
    margin-top: 0 !important;
}

.chat-message-text:empty {
    display: none;
}

.chat-seen-marker {
    color: var(--bs-secondary-color);
    line-height: 1.2;
}

.chat-file-preview-placeholder {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .chat-message-actions {
        opacity: .45;
        transition: opacity .16s ease, transform .16s ease;
    }

    .chat-message-row:hover .chat-message-actions,
    .chat-message-actions.show,
    .chat-message-action-trigger:focus-visible {
        opacity: 1;
    }
}

.chat-member-row {
    background: rgba(255, 255, 255, .75);
}

.chat-member-actions {
    min-width: 150px;
}

.chat-member-actions .btn {
    --bs-btn-padding-y: .18rem;
    --bs-btn-padding-x: .55rem;
    font-size: .75rem;
}

.chat-role-badge {
    vertical-align: middle;
    font-size: .68rem;
}

@media (max-width: 575.98px) {
    .chat-member-row {
        align-items: flex-start !important;
    }

    .chat-member-actions {
        width: 100%;
        justify-content: flex-start !important;
        margin-top: .35rem;
    }
}

/* Chat media/files and forward experience */
.chat-info-modal .modal-body {
    min-height: 420px;
}

.chat-info-tabs .nav-link {
    border-radius: 999px;
    font-size: .9rem;
}

.chat-info-stat {
    background: rgba(var(--bs-primary-rgb), .06);
    border: 1px solid rgba(var(--bs-primary-rgb), .12);
}

.chat-info-member-list {
    max-height: 340px;
    overflow-y: auto;
    padding-right: .25rem;
}

.chat-info-member .chat-presence-dot {
    position: static;
    flex: 0 0 auto;
}

.chat-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: .75rem;
}

.chat-media-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-secondary-rgb), .08);
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.chat-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}

.chat-media-item:hover img {
    transform: scale(1.035);
}

.chat-media-item > span:not(.chat-media-caption) {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.chat-media-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .45rem .55rem;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62));
    color: #fff;
    font-size: .75rem;
}

.chat-info-file-row,
.chat-info-audio-row {
    background: var(--bs-body-bg);
}

.chat-info-file-row:hover,
.chat-info-audio-row:hover {
    background: rgba(var(--bs-primary-rgb), .04);
}

.chat-audio-list {
    max-height: 420px;
    overflow-y: auto;
    padding-right: .25rem;
}

.chat-forward-preview {
    overflow: hidden;
}

.chat-forward-list {
    max-height: 360px;
    overflow-y: auto;
}

.chat-forward-target {
    border-left: 0;
    border-right: 0;
}

@media (max-width: 575.98px) {
    .chat-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-info-file-row,
    .chat-info-audio-row {
        align-items: stretch !important;
        flex-direction: column;
    }

    .chat-info-file-row .d-flex.align-items-center.gap-2,
    .chat-info-audio-row .d-flex.align-items-center.gap-2 {
        justify-content: flex-end;
    }
}

.chat-pin-marker {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: rgba(var(--bs-warning-rgb), .16);
    color: var(--bs-warning-text-emphasis, #7a4b00);
    font-size: .72rem;
    font-weight: 600;
}

.chat-pinned-bar {
    background: linear-gradient(135deg, rgba(var(--bs-warning-rgb), .16), rgba(var(--bs-primary-rgb), .06));
}

.chat-message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.chat-reaction-chip,
.chat-reaction-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border: 1px solid rgba(var(--bs-primary-rgb), .16);
    background: var(--bs-body-bg);
    border-radius: 999px;
    min-height: 1.7rem;
    padding: .15rem .45rem;
    font-size: .88rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.chat-reaction-chip:hover,
.chat-reaction-choice:hover {
    background: rgba(var(--bs-primary-rgb), .08);
    border-color: rgba(var(--bs-primary-rgb), .35);
    transform: translateY(-1px);
}

.chat-reaction-chip.reacted-by-me,
.chat-reaction-choice.active {
    background: rgba(var(--bs-primary-rgb), .12);
    border-color: rgba(var(--bs-primary-rgb), .45);
    color: var(--bs-primary);
    font-weight: 700;
}

.chat-reaction-menu {
    min-width: 210px;
}

.chat-pinned-results {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left;
}

.chat-pinned-result {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    border-radius: 1rem;
    padding: .75rem .9rem;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.chat-pinned-result:hover {
    background: rgba(var(--bs-primary-rgb), .06);
}

.chat-delivery-state {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.chat-delivery-ticks {
    font-weight: 700;
    letter-spacing: -.18rem;
    padding-right: .18rem;
}

.chat-delivery-ticks.seen {
    color: var(--bs-success);
}

.chat-mention-suggestions {
    position: relative;
    z-index: 20;
}

.chat-mention-suggestions-card {
    position: absolute;
    left: 0;
    right: auto;
    bottom: .35rem;
    width: min(420px, 100%);
    background: var(--bs-body-bg);
    max-height: 280px;
    overflow-y: auto;
}

.chat-mention-suggestion {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 0;
    background: transparent;
    padding: .55rem .85rem;
    text-align: left;
    color: var(--bs-body-color);
}

.chat-mention-suggestion:hover,
.chat-mention-suggestion.active {
    background: rgba(var(--bs-primary-rgb), .08);
}

.chat-mention-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
    font-weight: 800;
    flex: 0 0 auto;
}

.chat-mention-highlight {
    display: inline-flex;
    align-items: center;
    border-radius: .65rem;
    padding: 0 .3rem;
    margin: 0 .05rem;
    background: rgba(var(--bs-primary-rgb), .14);
    color: var(--bs-primary);
    font-weight: 700;
}

.chat-bulk-toolbar {
    border: 1px solid rgba(var(--bs-primary-rgb), .18);
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .08), rgba(var(--bs-primary-rgb), .03));
    border-radius: 1rem;
    padding: .75rem 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .06);
}

.chat-bulk-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 800;
}

.chat-message-row {
    position: relative;
}

.chat-message-row.chat-message-selected .chat-message-wrap {
    filter: saturate(1.04);
}

.chat-message-row.chat-message-selected .chat-message-bubble,
.chat-message-row.chat-message-selected .chat-file-card,
.chat-message-row.chat-message-selected .chat-image-attachment,
.chat-message-row.chat-message-selected .chat-file-attachment {
    outline: 2px solid rgba(var(--bs-primary-rgb), .38);
    outline-offset: 2px;
}

.chat-message-select {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--bs-primary-rgb), .42);
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 .45rem .35rem;
    align-self: center;
    box-shadow: 0 .35rem .9rem rgba(15, 23, 42, .08);
}

.chat-message-select svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.chat-message-select.selected {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.chat-message-select:not(.selected)::after {
    content: "";
    width: .65rem;
    height: .65rem;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .16);
}

@media (max-width: 767.98px) {
    .chat-bulk-toolbar {
        padding: .65rem .75rem;
    }

    .chat-message-select {
        width: 1.85rem;
        height: 1.85rem;
        margin-inline: .25rem;
    }
}

.chat-message-row.chat-message-selected .message {
    outline: 2px solid rgba(var(--bs-primary-rgb), .38);
    outline-offset: 2px;
}


.chat-file-card.is-audio {
    max-width: min(460px, 100%);
}

.chat-voice-player {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem;
    border-radius: 1rem;
    background: rgba(var(--bs-primary-rgb), .06);
}

.chat-voice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--bs-body-bg);
    flex: 0 0 auto;
}

.chat-audio-player,
.chat-selected-audio {
    width: 100%;
    min-width: 180px;
}

.chat-selected-file.is-audio {
    min-width: min(420px, 100%);
}

.chat-voice-record-button {
    min-width: 44px;
}

.chat-voice-record-button.is-recording {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .18);
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.chat-voice-record-status {
    margin-top: .45rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.chat-voice-record-status.is-recording {
    color: var(--bs-danger);
    font-weight: 600;
}