/* --- Fix for Mobile / Touch Overlays Blocking Canvas --- */
#courseCanvas { touch-action: none; }
/* Ensure UI overlay containers don't block touch/pointer interactions with the canvas underneath */
.toolbar-container-wrapper, 
.ui-overlay, 
.toolbar-sidebar {
    pointer-events: none;
}

/* Re-enable pointer events specifically on interactive elements inside those wrappers so buttons still work */
.toolbar-container-wrapper button, 
.toolbar-sidebar button, 
input, 
select, 
.interactive-element {
    pointer-events: auto;
}

@media screen and (orientation: landscape) and (max-height: 600px) and (pointer: coarse)
{
    body::before /* Landscape mode message */
    {
        content: "Please rotate your device back to portrait mode.";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #111;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2rem;
        z-index: 99999;
        font-family: sans-serif;
        font-size: 1.2rem;
    }
}

html,body /* HTML and body style */ 
{
    background-color: black;
    height: 85vh;
    width: 85vw;
    margin: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Add this wrapper class to whatever parent HTML element wraps your three toolbars */
.toolbar-container-wrapper {
    position: relative;
    min-height: 45px; /* Adjust this to match the actual height of your toolbars so the page doesn't collapse */
    width: 100%;
}