/* ====================== */
/*   Vue Messages Styles   */
/* ====================== */

/* Keyboard height fallback for linting and browsers without JS */
:root {
    --keyboard-height: 0px;
}

/* ====================== */
/*   Messages Modal Styles */
/* ====================== */

/* Desktop: generic bottom-sheet overrides (>= 768px) */
@media (min-width: 768px) {
    .modal.modal-bottom-sheet .bottom-sheet-handle {
        display: none;
    }
}

/* Desktop: messages modal slide-in from right (>= 768px) */
@media (min-width: 768px) {
    #messages-modal.modal.modal-bottom-sheet.fade .modal-dialog {
        position: fixed;
        top: 5rem;
        right: 1rem !important;
        left: auto !important;
        bottom: 5rem;
        width: 280px !important;
        max-width: calc(100% - 2rem) !important;
        min-width: auto !important;
        margin: 0 !important;
        transform: translateX(110%) !important;
        opacity: 0 !important;
        transition: transform 0.9s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.6s cubic-bezier(0.05, 0.65, 0.15, 1.0) !important;
        will-change: transform, width;
        contain: layout style;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    }

    #messages-modal.modal.modal-bottom-sheet.fade.show .modal-dialog {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    #messages-modal.modal.modal-bottom-sheet.fade.conversation-selected .modal-dialog {
        width: 520px !important;
    }

    #messages-modal.modal.modal-bottom-sheet .modal-content {
        position: relative;
        width: 100% !important;
        height: 100%;
        border-radius: 12px;
        border: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateZ(0);
        backface-visibility: hidden;
        contain: layout style;
    }

    #messages-modal .modal-body {
        padding: 0 !important;
        overflow: hidden;
        flex: 1;
        min-height: 0;
    }

    /* Conversation Menu Modal: override global .modal-bottom-sheet styles */
    .modal.conversation-menu-modal.fade .modal-dialog {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 90% !important;
        max-width: 320px !important;
        transform: scale(0.95) !important;
        opacity: 0 !important;
        transition: transform 0.9s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .modal.conversation-menu-modal.fade.show .modal-dialog {
        transform: scale(1) !important;
        opacity: 1 !important;
    }

    .modal.conversation-menu-modal .modal-content {
        border-radius: 16px !important;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25) !important;
    }

    .modal.conversation-menu-modal .bottom-sheet-handle {
        display: none !important;
    }

    .modal.conversation-menu-modal .bottom-sheet-close {
        display: block !important;
        position: absolute !important;
        top: -2.5rem !important;
        right: 0.5rem !important;
        z-index: 10 !important;
    }
}

/* Large screens - wider messages modal */
@media (min-width: 1200px) {
    #messages-modal.modal.modal-bottom-sheet.fade .modal-dialog {
        width: 320px !important;
    }

    #messages-modal.modal.modal-bottom-sheet.fade.conversation-selected .modal-dialog {
        width: 600px !important;
    }


    #messages-modal .col-messages-conversations {
        width: 320px !important;
        flex: 0 0 320px !important;
    }

    #messages-modal .col-messages-conversation {
        width: 600px !important;
    }

    #messages-modal.conversation-selected .col-messages-conversation {
        width: 600px !important;
    }
}

/* Mobile bottom sheet (< 768px) - reuse existing modal-bottom-sheet */
@media (max-width: 767.98px) {
    .modal.modal-bottom-sheet.fade .modal-dialog {
        margin: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        transform: translateY(100%) !important;
        opacity: 0 !important;
        transition: transform 0.9s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: transform;
        padding: 0 0 env(safe-area-inset-bottom, 0);
    }

    .modal.modal-bottom-sheet.fade.show .modal-dialog {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    .modal.modal-bottom-sheet .modal-content {
        border-radius: 20px 20px 0 0;
        border: none;
        max-height: calc(100dvh - 0.5rem);
        min-height: 280px;
        display: flex;
        flex-direction: column;
        position: relative;
        height: calc(92dvh);
        overflow: hidden;
        overscroll-behavior: contain;
        contain: layout style;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .modal.modal-bottom-sheet .bottom-sheet-handle {
        width: 48px;
        height: 4px;
        border-radius: 999px;
        margin: 0.75rem auto 0.5rem;
        flex-shrink: 0;
        touch-action: none;
        cursor: grab;
        z-index: 10;
    }

    .modal.modal-bottom-sheet .bottom-sheet-handle:active {
        cursor: grabbing;
    }

    #messages-modal.modal.modal-bottom-sheet .modal-body {
        flex: 1;
        overflow: hidden;
        overscroll-behavior: contain;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .modal.modal-bottom-sheet .close.bottom-sheet-close {
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        z-index: 10;
    }

    /* Override custom.css padding for messages modal */
    #messages-modal .modal-body {
        padding: 0 !important;
        overflow: hidden;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    #messages-modal .messages-vue-root {
        height: 100%;
        min-height: 100%;
    }

    /* Conversation Menu Modal mobile overrides */
    .modal.conversation-menu-modal.fade .modal-dialog {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        transform: translateY(100%) !important;
        opacity: 0 !important;
        transition: transform 0.9s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .modal.conversation-menu-modal.fade.show .modal-dialog {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    .modal.conversation-menu-modal .modal-content {
        height: auto !important;
        min-height: auto !important;
        max-height: calc(100vh - 2rem) !important;
    }

    .modal.conversation-menu-modal .conversation-menu-items {
        flex: 0 0 auto !important;
        overflow-y: visible !important;
        padding: 1.5rem 1.5rem 1rem;
    }

    .modal.conversation-menu-modal .bottom-sheet-close {
        display: none !important;
    }
}

/* Embedded Mode Styles */
/* Default: show conversations, hide conversation */
#messages-modal .messages-embedded .col-messages-conversations,
#messages-modal .messages-embedded .col-md-4,
#messages-modal .messages-embedded .col-lg-3 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    overflow: hidden !important;
}

#messages-modal .messages-embedded .col-messages-conversation {
    display: none !important;
}

#messages-modal .messages-embedded .col-messages-conversation.hide-messages {
    display: none !important;
}

/* When conversation is selected: hide conversations, show conversation full-width */
#messages-modal .messages-embedded.conversation-selected .col-messages-conversations {
    display: none !important;
}

#messages-modal .messages-embedded.conversation-selected .col-messages-conversation {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column;
}

#messages-modal .messages-embedded.conversation-selected .col-messages-conversation.hide-messages {
    display: flex !important;
}

/* Override body-messages rules in modal context — columns are flex containers, NOT scrollable */
#messages-modal .messages-vue-root .col-messages-conversations {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#messages-modal .messages-vue-root .col-messages-conversations.active {
    /* display: flex !important; */
    /* flex-direction: column !important; */
    /* overflow: hidden !important; */
}

#messages-modal .messages-vue-root .col-messages-conversation {
    display: none !important;
}

#messages-modal .messages-vue-root .col-messages-conversation.hide-messages {
    display: none !important;
}

/* Override body-messages rules when body has body-messages class */
body.body-messages #messages-modal .messages-vue-root .col-messages-conversations {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.body-messages #messages-modal .messages-vue-root .col-messages-conversations.active {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.body-messages #messages-modal .messages-vue-root .col-messages-conversation {
    display: none !important;
}

body.body-messages #messages-modal .messages-vue-root .col-messages-conversation.hide-messages {
    display: none !important;
}

/* conversation-selected overrides — must come AFTER all hide-conversation rules to win cascade */
#messages-modal .messages-vue-root .messages-embedded.conversation-selected .col-messages-conversations {
    display: none !important;
}

#messages-modal .messages-vue-root .messages-embedded.conversation-selected .col-messages-conversation {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column;
}

#messages-modal .messages-vue-root .messages-embedded.conversation-selected .col-messages-conversation.hide-messages {
    display: flex !important;
}

body.body-messages #messages-modal .messages-embedded.conversation-selected .col-messages-conversations {
    display: none !important;
}

body.body-messages #messages-modal .messages-embedded.conversation-selected .col-messages-conversation {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column;
}

body.body-messages #messages-modal .messages-embedded.conversation-selected .col-messages-conversation.hide-messages {
    display: flex !important;
}

/* Ensure conversations column is always visible in modal on mobile */
@media (max-width: 767.98px) {
    #messages-modal .messages-vue-root .col-messages-conversations {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #messages-modal .messages-vue-root .col-messages-conversations.active {
        /* display: flex !important; */
        /* width: 100% !important; */
        /* max-width: 100% !important; */
        /* flex: 0 0 100% !important; */
    }

    #messages-modal .messages-vue-root .col-messages-conversations.active,
    #messages-modal .col-messages-conversations.active,
    #messages-modal .col-md-4.active,
    #messages-modal .col-lg-3.active {
        /* display: flex !important; */
        /* flex-direction: column !important; */
        /* width: 100% !important; */
        /* max-width: 100% !important; */
        /* flex: 0 0 100% !important; */
        /* overflow: hidden !important; */
    }

    #messages-modal .messages-vue-root .col-messages-conversation {
        display: none !important;
    }

    #messages-modal .messages-vue-root .col-messages-conversation.hide-messages {
        display: none !important;
    }

    /* Direct selector for conversations column in modal */
    #messages-modal .col-messages-conversations {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #messages-modal .col-messages-conversations.active {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #messages-modal .col-messages-conversation {
        display: none !important;
    }

    #messages-modal .col-messages-conversation.hide-messages {
        display: none !important;
    }

    /* Override body-messages rules that might be applied globally */
    body.body-messages #messages-modal .col-messages-conversations {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    body.body-messages #messages-modal .col-messages-conversations.active {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    body.body-messages #messages-modal .col-messages-conversation {
        display: none !important;
    }

    body.body-messages #messages-modal .col-messages-conversation.hide-messages {
        display: none !important;
    }

    /* conversation-selected overrides for mobile */
    body.body-messages #messages-modal .messages-embedded.conversation-selected .col-messages-conversations {
        display: none !important;
    }

    body.body-messages #messages-modal .messages-embedded.conversation-selected .col-messages-conversation {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    body.body-messages #messages-modal .messages-embedded.conversation-selected .col-messages-conversation.hide-messages {
        display: flex !important;
    }
}

/* Mobile specific overrides */
@media (max-width: 767.98px) {
    #messages-modal .messages-embedded .col-messages-conversations,
    #messages-modal .messages-embedded .col-md-4,
    #messages-modal .messages-embedded .col-lg-3 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        overflow: hidden !important;
        max-height: 100% !important;
    }

    #messages-modal .messages-embedded .col-messages-conversation,
    #messages-modal .messages-embedded .col-md-8,
    #messages-modal .messages-embedded .col-lg-9 {
        display: none !important;
    }

    #messages-modal .messages-embedded.conversation-selected .col-messages-conversations,
    #messages-modal .messages-embedded.conversation-selected .col-md-4,
    #messages-modal .messages-embedded.conversation-selected .col-lg-3 {
        display: none !important;
    }

    #messages-modal .messages-embedded.conversation-selected .col-messages-conversation,
    #messages-modal .messages-embedded.conversation-selected .col-md-8,
    #messages-modal .messages-embedded.conversation-selected .col-lg-9 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        overflow: hidden !important;
        max-height: 100% !important;
    }

    /* Override hide-messages class in modal */
    #messages-modal .messages-embedded .col-messages-conversation.hide-messages {
        display: none !important;
    }

    #messages-modal .messages-embedded.conversation-selected .col-messages-conversation.hide-messages {
        display: flex !important;
    }
}

/* Reset small-mobile position:fixed rules inside modal context */
@media (max-width: 575.98px) {
    #messages-modal .messages-vue-root .col-messages-conversations,
    #messages-modal .col-messages-conversations {
        position: static !important;
        transform: translateZ(0) !important;
        height: auto !important;
        z-index: auto !important;
        transition: none !important;
    }

    #messages-modal .messages-vue-root .col-messages-conversations.active,
    #messages-modal .col-messages-conversations.active {
        /* position: static !important; */
        /* transform: translateZ(0) !important; */
    }

    #messages-modal .messages-vue-root .col-messages-conversation,
    #messages-modal .col-messages-conversation {
        position: static !important;
        transform: translateZ(0) !important;
        height: auto !important;
        z-index: auto !important;
        transition: none !important;
    }

    #messages-modal .messages-vue-root .col-messages-conversation:not(.hide-messages),
    #messages-modal .col-messages-conversation:not(.hide-messages) {
        transform: translateZ(0) !important;
    }
}

/* Dark mode */
/* ====================== */
/*   Vue Messages Styles   */
/* ====================== */

/* Chrome-specific fixes for search filter visibility */
.messages-conversations-filter {
  display: block !important;
  visibility: visible !important;
}

/* Ручная темная тема через класс */
body.dark .messages-vue-root {
    --vue-avatar-bg: #303040;
    --vue-typing-bg: #1e1e24;
    --vue-typing-color: #edf2f9;
    --vue-file-border: #323243;
    --vue-file-bg: #303040;
    --vue-file-name-color: #b6c1d2;
    --vue-file-size-color: #9da9bb;
    --vue-mobile-bg: #121220;
    --vue-border-color: #243040;
    --vue-header-bg: #252530;
    --vue-text-color: #fefefe;
    --vue-muted-color: #9da9bb;
}

/* Override AngularJS avatar conflicts */
/*.messages-vue-root .avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: var(--bs-gray-100) !important;
}*/

/* Vue specific avatar sizes */
.messages-vue-root .conversation-header .avatar {
    width: 2rem !important;
    height: 2rem !important;
}

/* Vue message animations override AngularJS */
.messages-vue-root .conversation-items .item {
    /* Disable AngularJS animations */
    animation: none !important;
    transition: none !important;
    margin-bottom: 1.5rem;
}

/* Vue message list container padding */
.messages-vue-root .items {
    padding: 1.25rem;
}

@media (max-width: 767.98px) {
    .messages-vue-root .items {
        padding: 0.75rem;
    }
}

/* Vue 3 Transition animations — transition-based, matching modal window pattern */
/* Selectors include .item to outrank the .item { transition: none } rule above (0,4,0 > 0,3,0) */
.messages-vue-root .conversation-items .item.message-enter-active {
    transition: transform 0.35s cubic-bezier(0.05, 0.65, 0.15, 1.0),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, opacity;
}

.messages-vue-root .conversation-items .item.message-enter-from {
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

.messages-vue-root .conversation-items .item.message-move {
    transition: transform 0.35s cubic-bezier(0.05, 0.65, 0.15, 1.0) !important;
}

.messages-vue-root .conversation-items .item.message-leave-active {
    position: absolute !important;
    width: 100% !important;
    transition: transform 0.35s cubic-bezier(0.05, 0.65, 0.15, 1.0),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.messages-vue-root .conversation-items .item.message-leave-to {
    opacity: 0 !important;
    transform: translateX(20px) !important;
}

/* Vue typing indicator */
.messages-vue-root .typing-indicator {
    padding: 10px 15px !important;
    margin: 5px 0 !important;
    border-radius: 18px !important;
    display: inline-block !important;
    font-size: 14px !important;
}

/* Vue message input */
.messages-vue-root .conversation-input .message-input {
    resize: none !important;
    min-height: 38px !important;
    max-height: 140px !important;
    overflow-y: hidden !important;
    white-space: pre-wrap !important;
    transition: height 0.2s ease !important;
}

.messages-vue-root .conversation-input {
    position: relative !important;
    min-height: 64px !important;
    max-height: none !important;
    height: auto !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    transition: height 0.2s ease !important;
}

/* Mobile-specific height adjustments */
@media (max-width: 767.98px) {
    .messages-vue-root .conversation-input {
        height: auto !important;
    }
}

/* Vue emoji panel - consistent with modal Viber style */
.messages-vue-root .emoji-panel {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    transform: none !important;
    transition: max-height 0.3s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.messages-vue-root .emoji-panel.is-open {
    max-height: var(--emoji-panel-height, 180px) !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: max-height 0.3s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mobile emoji panel - consistent with modal */
@media (max-width: 767.98px) {
    .messages-vue-root .emoji-panel {
        will-change: max-height, opacity !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }
    
    .messages-vue-root .emoji-panel.is-open {
        max-height: var(--emoji-panel-height, 180px) !important;
        position: relative !important;
        z-index: 1000 !important;
    }
}

/* Vue message items */
.messages-vue-root .conversation-items .item .text {
    word-wrap: break-word !important;
}

.messages-vue-root .conversation-items .item.sent .text {
    margin-left: auto !important;
}

/* Vue mobile responsiveness - соответствует AngularJS */
/* Tablet and mobile styles */
@media (max-width: 767.98px) {
    /* Base mobile layout - как в AngularJS */
    .body-messages .page-fill .content .card {
        height: calc(100% - 45px);
    }
    
    .body-messages.messages-mobile-chat-active .page-fill .content .card {
        height: 100%;
    }
    
    /* Conversations sidebar - как в AngularJS */
    .body-messages .messages-vue-root .col-messages-conversations {
        display: none !important;
        border-right: 0 !important;
        overflow: hidden;
    }
    
    .body-messages .messages-vue-root .col-messages-conversations.active {
        display: flex !important;
    }
    
    /* Conversation area - как в AngularJS */
    .body-messages .messages-vue-root .col-messages-conversation {
        &.hide-messages {
            display: none;
        }
    }
    
    /* Mobile chat active state - как в AngularJS */
    .body-messages.messages-mobile-chat-active .messages-vue-root .conversation-header-sticky {
        position: sticky !important;
        top: max(0px, env(safe-area-inset-top, 0)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    
}

/* Small mobile styles */
@media (max-width: 575.98px) {
    /* Vue sidebar mobile styles - как в AngularJS */
    .body-messages .messages-vue-root .col-messages-conversations {
        position: fixed !important;
        top: 3.5rem !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100dvh - 3.5rem) !important;
        z-index: 1040 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.6s cubic-bezier(0.05, 0.65, 0.15, 1.0) !important;
    }
    
    .body-messages .messages-vue-root .col-messages-conversations.active {
        transform: translateX(0) !important;
    }
    
    /* Vue conversation mobile styles - как в AngularJS */
    .body-messages .messages-vue-root .col-messages-conversation {
        position: fixed !important;
        top: 3.5rem !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100dvh - 3.5rem) !important;
        z-index: 1070 !important;
        transform: translateX(100%) !important;
        transition: transform 0.6s cubic-bezier(0.05, 0.65, 0.15, 1.0) !important;
    }
    
    .body-messages .messages-vue-root .col-messages-conversation:not(.hide-messages) {
        transform: translateX(0) !important;
    }
    
    /* Vue conversation mobile styles - как в AngularJS */
    .messages-vue-root .col-messages-conversation {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        z-index: 1070 !important;
        /* Убираем жесткий фон - наследуется из темы */
        transform: translateX(100%) !important;
        transition: transform 0.6s cubic-bezier(0.05, 0.65, 0.15, 1.0) !important;
    }
    
    .messages-vue-root .col-messages-conversation:not(.hide-messages) {
        transform: translateX(0) !important;
    }
    
    .messages-vue-root .conversations {
        height: 100% !important;
        margin-bottom: 0 !important;
    }
    
    .messages-vue-root .conversation {
        padding: 12px 16px !important;
        margin: 0 !important;
    }
    
    .messages-vue-root .conversation:last-child {
        border-bottom: none !important;
    }
    
    .messages-vue-root .conversation .avatar {
        width: 48px !important;
        height: 48px !important;
    }
    
    .messages-vue-root .conversation .message-preview {
        font-size: 14px !important;
        max-width: 200px !important;
    }
    
    .messages-vue-root .conversation .name {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
    
    .messages-vue-root .conversation-header-sticky {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
    }

    @media (min-width: 768px) {
        .messages-vue-root .conversation-header-sticky {
            position: relative !important;
            top: auto !important;
        }
    }

    /* Hide conversations when chat is active on mobile */
    .messages-vue-root.messages-mobile-chat-active .messages-conversations {
        display: none !important;
    }
    
    /* Show conversation when chat is active on mobile */
    .messages-vue-root.messages-mobile-chat-active .messages-conversation {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    
    /* Mobile layout adjustments */
    .messages-vue-root .card-messages {
        height: calc(100dvh - 120px) !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .messages-vue-root .card-messages .card-body {
        padding: 0 !important;
        height: 100% !important;
    }
}

/* Глобальное правило для принудительного показа заголовков в модальном окне */
body.bottom-sheet-open .header.header-main.d-none,
body.bottom-sheet-open .header.header-mobile-nav.d-none,
body.modal-open .header.header-main.d-none,
body.modal-open .header.header-mobile-nav.d-none {
    display: block !important;
    visibility: visible !important;
}

/* Шапки всегда видимы — скрытие при открытии модалки сообщений убрано */

/* Индикаторы в меню должны быть выше самого меню */
.header-mobile-nav .nav-item {
    position: relative !important;
}

.header-mobile-nav .badge,
.header-mobile-nav .notification-indicator,
.header-mobile-nav .unread-counter,
.header-mobile-nav .nav-unread {
    position: absolute !important;
    z-index: 1060 !important;
    top: -0.2rem !important;
    right: -0.35rem !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    line-height: 16px !important;
    text-align: center !important;
    padding: 0 4px !important;
}

.header-mobile-nav .nav-unread {
    min-width: 8px !important;
    min-height: 8px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    top: -0.2rem !important;
    right: -0.35rem !important;
    padding: 0 !important;
    display: block !important;
}

/* Disable AngularJS specific classes in Vue */
.messages-vue-root .ng-enter,
.messages-vue-root .ng-enter-stagger,
.messages-vue-root .ng-leave,
.messages-vue-root .ng-leave-stagger,
.messages-vue-root .ng-move,
.messages-vue-root .ng-move-stagger {
    animation: none !important;
    transition: none !important;
}

/* Vue lazy loading images */
.messages-vue-root .lazy-loading {
    opacity: 0.6 !important;
    filter: blur(2px) !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.messages-vue-root .lazy-loaded {
    opacity: 1 !important;
    filter: blur(0) !important;
}

/* Vue file previews */
.messages-vue-root .file-preview {
    border-radius: 8px !important;
    padding: 8px !important;
    margin: 4px 0 !important;
}

.messages-vue-root .file-preview .file-icon {
    font-size: 24px !important;
    margin-right: 8px !important;
}

.messages-vue-root .file-preview .file-name {
    font-size: 14px !important;
}

.messages-vue-root .file-preview .file-size {
    font-size: 12px !important;
}

/* Sidebar unread badge animations */
.sidebar-unread-badge-pulse {
    animation: sidebar-badge-pulse 0.6s ease-out !important;
}

@keyframes sidebar-badge-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================ */
/*   Messages Modal layout/scroll/emoji styles  */
/*   (вынесено из partials/messages-modal.php)   */
/* ============================================ */

/* Scroll isolation: prevent scroll chaining to page */
#messages-modal {
    overflow: hidden !important;
}
#messages-modal .modal-dialog {
    overflow: hidden !important;
}
#messages-modal .modal-content {
    overflow: hidden !important;
}
#messages-modal .modal-body {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Custom width for messages modal on desktop to avoid overlapping dashboard content */
@media (min-width: 992px) {
    #messages-modal .modal-dialog {
        max-width: 800px !important;
    }
}
@media (min-width: 1200px) {
    #messages-modal .modal-dialog {
        max-width: 900px !important;
    }
}
#messages-modal .messages-vue-root {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
#messages-modal .row {
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
}
/* Column containers: NO scroll, only flex layout */
#messages-modal .col-messages-conversations {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    overflow: hidden !important;
    min-height: 0 !important;
}
#messages-modal .col-messages-conversation {
    display: none !important;
}
/* Search filter: fixed at top */
#messages-modal .messages-conversations-filter {
    flex-shrink: 0 !important;
    display: block !important;
    visibility: visible !important;
}
/* Contact list wrapper: SCROLLABLE */
#messages-modal .messages-conversations {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y pinch-zoom !important;
}

/* Empty state: fill wrapper and center */
#messages-modal .conversations-empty-state {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}
/* Conversation layout: flex column, no scroll */
#messages-modal .messages-conversation {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
/* Conversation header and input: fixed */
#messages-modal .conversation-header {
    flex-shrink: 0 !important;
}
@media (min-width: 768px) {
    #messages-modal .col-messages-conversations {
        width: 280px !important;
        flex: 0 0 280px !important;
    }

    #messages-modal .col-messages-conversation {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 520px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 2 !important;
        transform: translateX(100%) !important;
        transition: transform 0.6s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #messages-modal.conversation-selected .col-messages-conversation {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
        width: 520px !important;
        max-width: none !important;
        flex: none !important;
    }

    #messages-modal .conversation-header {
        position: relative !important;
        z-index: 1060 !important;
    }
    #messages-modal .conversation-items {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #messages-modal .wrapper-items {
        position: relative !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    #messages-modal .conversation-input {
        max-height: none !important;
        height: auto !important;
        min-height: 64px !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
    /* Desktop: emoji panel stays in normal flow (not absolute) */
    #messages-modal .emoji-panel {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        transition: max-height 0.9s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}
@media (max-width: 767.98px) {
    #messages-modal .conversation-header-sticky {
        z-index: 1010 !important;
    }
    #messages-modal .conversation-header {
        flex-shrink: 0 !important;
    }
    #messages-modal .conversation-items {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #messages-modal .wrapper-items {
        position: relative !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    #messages-modal .conversation-input {
        max-height: none !important;
        height: auto !important;
        min-height: 64px !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
}
#messages-modal .conversation-input {
    flex-shrink: 0 !important;
    overflow: visible !important;
}
/* Message list wrapper: SCROLLABLE */
#messages-modal .wrapper-items {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y pinch-zoom !important;
    flex: 1 !important;
    min-height: 0 !important;
}
/* When conversation selected: hide contacts, show conversation */
#messages-modal .conversation-selected .col-messages-conversations {
    display: none !important;
}
#messages-modal .conversation-selected .col-md-4,
#messages-modal .conversation-selected .col-lg-3 {
    display: none !important;
}
#messages-modal .conversation-selected .col-messages-conversation {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    min-height: 0 !important;
}
#messages-modal .conversation-selected .col-messages-conversation.hide-messages {
    display: flex !important;
}
/* Show back button on desktop inside modal */
#messages-modal .d-md-none {
    display: block !important;
}
#messages-modal .btn-back-feedback {
    display: inline-flex !important;
}
@media (max-width: 767.98px) {
    #messages-modal .col-messages-conversations {
        max-height: 100% !important;
    }
    #messages-modal .conversation-selected .col-messages-conversation {
        max-height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Hide search filter when conversation is selected on mobile */
    #messages-modal .conversation-selected .messages-conversations-filter {
        display: none !important;
    }
    /* Ensure message input is visible on mobile */
    #messages-modal .conversation-input {
        display: block !important;
    }
}
/* Emoji panel styles - Viber style: below input field */
#messages-modal .emoji-panel {
    max-height: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    transform: none !important;
    transition: max-height 0.3s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@media (max-width: 767.98px) {
    #messages-modal .emoji-panel {
        will-change: max-height, opacity !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }
}
#messages-modal .emoji-panel.is-open {
    max-height: var(--emoji-panel-height, 180px) !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: max-height 0.3s cubic-bezier(0.05, 0.65, 0.15, 1.0), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#messages-modal .emoji-panel :deep(.emoji-picker) {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}
@media (min-width: 768px) {
    #messages-modal .emoji-panel :deep(.emoji-picker) {
        height: var(--emoji-picker-height, 164px) !important;
    }
}
@media (max-width: 767.98px) {
    #messages-modal .emoji-panel.is-open {
        max-height: var(--emoji-panel-height, 180px) !important;
        position: relative !important;
        z-index: 1000 !important;
    }
}

/* ============================== */
/*   Bootbox Confirm Dialog Styles */
/* ============================== */

/* Hide modal-header — it visually duplicates the question in modal-body */
.bootbox-confirm .modal-header {
    display: none !important;
}

/* Center buttons, equal width, remove top border (no header above anymore) */
.bootbox-confirm .modal-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: 320px;
    margin: 0 auto;
    border-top: none !important;
}

/* Add top padding to body since header is hidden */
.bootbox-confirm .modal-body {
    padding-top: 1.5rem !important;
}

/* Center question text */
.bootbox-confirm .bootbox-body {
    text-align: center !important;
}

/* Ensure bootbox dialog appears above messages modal, centered and lower on screen */
.bootbox-confirm {
    z-index: 1070 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 30vh !important;
}

.bootbox-confirm .modal-dialog {
    min-width: 320px !important;
}

/* ================================
   Messages Empty State Icon
   ================================ */
@keyframes messages-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes messages-bubble-glow {
    0%, 100% { stroke-opacity: 0.5; }
    30%, 65% { stroke-opacity: 1; }
}

@keyframes messages-dot-pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

@keyframes messages-heart-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
}

.messages-empty-icon {
    animation: messages-icon-float 4s ease-in-out infinite;
    color: #adb5bd;
}

.messages-empty-icon .chat-bubble {
    animation: messages-bubble-glow 3s ease-in-out infinite;
}

.messages-empty-icon .chat-dot-1 {
    animation: messages-dot-pulse 2s ease-in-out infinite;
}

.messages-empty-icon .chat-dot-2 {
    animation: messages-dot-pulse 2s ease-in-out 0.3s infinite;
}

.messages-empty-icon .chat-dot-3 {
    animation: messages-dot-pulse 2s ease-in-out 0.6s infinite;
}

.messages-empty-icon .heart-icon {
    animation: messages-heart-pulse 1.8s ease-in-out infinite;
    transform-origin: 62px 60px;
}

/* Browse people button — messages empty state */
.no-contacts-wrapper .btn-browse-people {
    border-radius: 2rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(43, 122, 228, 0.25);
}

.no-contacts-wrapper .btn-browse-people:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(43, 122, 228, 0.35);
}

.no-contacts-wrapper .btn-browse-people:active {
    transform: scale(0.98);
}