/* 1. Hide the main container by default */
body:not(.app-ready) .container,
body:not(.app-ready) .main-title-container,
body:not(.app-ready) #topRightControls {
    opacity: 0;
    pointer-events: none;
    /* Optional: display: none if opacity causes layout shifts */
}

/* 2. Fade in when app is ready */
body.app-ready .container,
body.app-ready .main-title-container,
body.app-ready #topRightControls {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 1.5s ease; /* Smooth fade in */
}



body { 
    font-family: var(--font-family-sans); 
    display: flex; flex-direction: column; align-items: center; 
    min-height: 100vh; background-color: var(--bg-primary); 
    color: var(--text-primary); margin: 0; padding: 1rem; 
    transition: background-color 0.3s, color 0.3s; 
    overflow-x: hidden;
}
mjx-container {
    display: inline !important; 
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}
mjx-container[display="true"] {
    display: block !important;
    text-align: center !important;
    margin: 1.2rem 0 !important;
    width: 100%;
}
mjx-math {
    line-height: 0; 
}

/* =========================================
   8. RESTORED PROMPTS & TOOLTIPS
   ========================================= */
@keyframes pulseHorizontal {
    0% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(5px); }
    100% { transform: translateY(-50%) translateX(0); }
}

/* Hide main browser scrollbar */
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}