.qs-body-wrapper {
    display: flex;
    width: 100%; /* Full width of the viewport */
    position: relative;
    overflow-x: auto; /* Allow horizontal scrolling for the wrapper */
}

.qs-body-container {
    flex: 1; /* Take up the full available space */
    min-width: 0; /* Ensure proper flexbox handling for content overflow */
    transition: margin-right 0.3s ease; /* Smooth transition when help container is shown */
    overflow-x: auto; /* Allow horizontal scrolling if content overflows */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.qs-help-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 30%; /* Width of the help panel */
    height: 100%; /* Full height */
    background-color: #FFFFFF; /* Light blue background */
    transform: translateX(100%); /* Initially hidden */
    transition: transform 0.3s ease; /* Smooth slide animation */
    z-index: 9999; /* Ensure it appears on top */
    overflow-y: auto; /* Allow scrolling */
}

.qs-help-title {
    display: flex;
    justify-content: space-between; /* Distribute header and link */
    align-items: center; /* Align items vertically */
    padding:5px;
    text-align: center;
}

.qs-help-title h1 {
    margin: 0;
    font-size: 2.5rem;
    flex-shrink: 0;
}

.leave-feedback {
    margin-left: auto; /* Push to the far right */
    padding-right: 15px; /* Space from the edge of the screen */
    text-align: right;
    flex-shrink: 0;
}

.qs-help-title.small-container {
    flex-direction: column; /* Stack header and link */
    align-items: flex-start; /* Align items to the left */
}

.qs-help-title.small-container .leave-feedback {
    margin-left: 0; /* Reset margin */
    padding-right: 0; /* Reset padding */
    text-align: left; /* Align text to the left */
}

a.feedback-link {
    font-size: 1.3rem; /* Adjust font size */
    color: #2C85C7; /* Primary link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.2s ease;
}

a.feedback-link:hover {
    color: #58A7E0; /* Darker blue on hover */
    text-decoration: underline;
}

.qs-help-container .qs-help-drawer {
    left: 0;
    padding: 10px 20px 20px 30px;
}

.qs-help-container.open {
    transform: translateX(0); /* Slide into view */
}

.qs-body-container {
    transition: margin-right 0.3s ease; /* Smooth adjustment */
}

.qs-body-container.with-help-open {
    margin-right: 30%; /* Adjust space for the help panel */
    overflow-x: auto; /* Preserve scrolling when content overflows horizontally */
}

/* Styling for the resize handle */
.qs-resize-handle-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px; /* Perfect alignment between body and help container */
    width: 6px; /* Slightly wider for better usability */
    background-color: #ccc; /* Default handle color */
    cursor: col-resize; /* Horizontal resize cursor */
    z-index: 1002; /* Ensure it's above the help container */
    transition: background-color 0.2s ease, width 0.2s ease; /* Smooth interactions */
}

.qs-resize-handle {
    position: absolute;
    /* Set top to 50% of page height */
    top: 45%;
    left: 5px;
    width: 9px;
    height: 40px;
    /* Create vertical ellipsis background icon */
    background: #ccc;
    border: #ccc 1px solid;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    cursor: col-resize;
    z-index: 1003;
    transition: background-color 0.2s ease, width 0.2s ease;
}

.qs-resize-handle::before {
    content: '';
    position: absolute;
    top: 50%; /* Center the ellipsis vertically */
    left: 50%; /* Center the ellipsis horizontally */
    transform: translate(-50%, -50%);
    width: 9px; /* Width of the ellipsis */
    height: 24px; /* Height of the ellipsis */
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="24" viewBox="0 0 8 24"%3E%3Ccircle cx="4" cy="4" r="2" fill="%23fff"/%3E%3Ccircle cx="4" cy="12" r="2" fill="%23fff"/%3E%3Ccircle cx="4" cy="20" r="2" fill="%23fff"/%3E%3C/svg%3E') no-repeat center;
    background-size: contain;
}

.qs-resize-handle-container:hover {
    background-color: #999; /* Darker shade on hover */
    width: 8px; /* Slightly wider on hover for better UX */
}

.qs-resize-handle:hover {
    background-color: #999; /* Darker shade on hover */
    border: #999 1px solid;
}

/* Prevent text selection during dragging */
.no-select {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Hide resize handle for screens smaller than 768px (Tablets and Phones) */
@media (max-width: 768px) {
    .qs-resize-handle-container {
        display: none; /* Hide the resize handle */
    }

    .qs-help-title {
        flex-direction: column; /* Stack header and link */
        align-items: flex-start; /* Align items to the left */
    }

    .leave-feedback {
        margin-left: 0; /* Reset margin */
        padding-right: 0; /* Reset padding */
        text-align: left; /* Align text to the left */
    }
}

/* Responsive adjustments for parent container less than 400px */
@media (max-width: 400px) {
    .qs-help-title {
        flex-direction: column; /* Stack header and link */
        align-items: flex-start; /* Align items to the left */
    }

    .leave-feedback {
        margin-left: 0; /* Reset margin */
        padding-right: 0; /* Reset padding */
        text-align: left; /* Align text to the left */
    }
}