/* Index page (editor) specific styles */

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.top-nav {
    flex-shrink: 0;
}

/* Editor takes remaining space */
exprua-editor {
    flex: 1;
    min-height: 0;
}

footer {
    flex-shrink: 0;
}

footer span[style*="color: #3e3e42"] {
    color: #3e3e42;
}

/* Mobile-specific layout adjustments */
@media (max-width: 768px) {
    body {
        height: 100vh;
        height: 100dvh; /* Use dynamic viewport height on mobile */
        overflow-x: hidden; /* Prevent horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    
    /* Ensure editor takes full available height on mobile */
    exprua-editor {
        flex: 1;
        min-height: 0;
        width: 100%;
        max-width: 100vw; /* Prevent overflow */
    }
    
    /* Prevent horizontal scroll on mobile */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    body {
        height: 100vh;
        height: 100dvh;
    }
}