@media (max-width: 767px) {
    .h-screen {
        width: 100% !important;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    #leftPanel {
        left: 25%;
        width: 100%;
        height: 100vh;
        margin: auto;
        transition: left 0.5s ease;
        /* Smooth transition */
        z-index: 1000;
    }

    #leftPanel.show {
        left: 0;
    }

    #rightPanel {
        display: none;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: transform 0.3s ease-in-out;
        padding: 0;
    }

    #rightPanel.hide {
        transform: translateX(100%);
    }

    .connected #rightPanel {
        border-radius: 1.5rem;
        display: block !important;
        min-width: 100%;
        min-height: 100%;
    }

    .connected #leftPanel {
        display: none;
    }
}