/* ==========================================================================
   STERRA - MOBILE ARCHITECTURE PREPARATION & LAYOUT BRIDGE
   ========================================================================== 
   This stylesheet establishes the abstraction layer between the VS Code Desktop 
   Interface and a future, completely independent mobile web layout.
   ========================================================================== */

/* Layout Switcher Hooks */
body[data-layout="desktop"] #mobile-layout-root {
    display: none !important;
}

body[data-layout="mobile"] #desktop-layout-root {
    display: none !important;
}

body[data-layout="mobile"] #mobile-layout-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

/* 
   --------------------------------------------------------------------------
   FUTURE MOBILE LAYOUT STUBS & DESIGN SYSTEM HOOKS
   (Ready to be expanded into a dedicated mobile experience)
   -------------------------------------------------------------------------- 
*/
.mobile-app-container {
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-app);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    padding-bottom: 70px; /* Space for bottom mobile nav */
}

.mobile-header {
    height: 56px;
    background: var(--bg-titlebar);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-titlebar);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1000;
}

/* 
   --------------------------------------------------------------------------
   DESKTOP FALLBACK / TABLET ADAPTATION (FOR DESKTOP MODE)
   -------------------------------------------------------------------------- 
*/
@media (max-width: 900px) {
    .vscode-titlebar .titlebar-menu {
        display: none;
    }
    
    .editor-content-pane {
        padding: 20px 16px 40px 16px;
    }

    .worlds-container {
        grid-template-columns: 1fr;
    }
}