/* Ensure the page takes up the full viewport height */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

.explain-side-bar-main-content {
    padding: 20px;
    transition: margin-right 0.3s ease;
}

/* The Sidebar Popup */
.explain-sidebar {
    height: 100%;
    width: 500px;
    position: fixed;
    z-index: 1000; /* Stacks above main content */
    top: 0;
    right: -1000px; /* Initially hidden off-screen to the right */
    background-color: #f4f4f4;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    padding: 20px;
    transition: right 0.3s ease; /* Smooth slide-in effect */

    
    /* KEY UPDATES FOR SCROLLING */
    max-height: 80vh;       /* Limits the maximum height to 80% of viewport height */
    overflow-y: auto;       /* Adds a vertical scrollbar only when content overflows */
    box-sizing: border-box; /* Ensures padding doesn't break the height calculation */
}

/* Class added via JavaScript to show the sidebar */
.explain-sidebar.show {
    right: 25%;
}