/* Mobile Chat Sidebar Fix */

/* Messages page sidebar fix */
@media (max-width: 991px) {
    /* Messages sidebar - slide in from left */
    .messages-sidebar {
        position: fixed !important;
        left: -100%;
        top: 0;
        height: 100vh !important;
        width: 85%;
        max-width: 350px;
        z-index: 1045;
        background: white;
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
    }

    .messages-sidebar-active {
        left: 0 !important;
    }

    /* Make chat area full width on mobile */
    .messages-sidebar ~ div {
        width: 100% !important;
    }
}

/* Make chat toggle button visible and fixed on mobile */
@media (max-width: 991px) {
    /* Hide sidebar by default on mobile */
    .right-sidebar-mini {
        position: fixed;
        right: -100%;
        top: 0;
        height: 100vh;
        width: 85%;
        max-width: 350px;
        z-index: 1060;
        transition: right 0.3s ease-in-out;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    }

    /* Show sidebar when active */
    .right-sidebar-mini.right-sidebar-active {
        right: 0;
    }

    /* Toggle button - make it visible and fixed */
    .right-sidebar-toggle {
        position: fixed !important;
        bottom: 80px !important;
        right: 20px !important;
        z-index: 1050 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
        cursor: pointer !important;
        margin: 0 !important;
    }

    /* Add backdrop when sidebar is open */
    body.right-sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1055;
    }

    /* Ensure sidebar panel fills the height */
    .right-sidebar-mini .right-sidebar-panel {
        height: 100vh;
        overflow-y: auto;
    }

    /* Hide the "View All Conversation" button on mobile (optional) */
    .right-sidebar-mini .conversion-button {
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
    }
}

/* Desktop - keep original behavior */
@media (min-width: 992px) {
    .right-sidebar-mini {
        /* Original desktop styles */
    }

    .right-sidebar-toggle {
        /* Toggle button should be part of sidebar on desktop */
    }
}