:root {
    --vh: 1vh;
}

@media (max-width: 768px) {
    html, body {
        position: fixed;
        width: 100%;
        height: 100%;
        height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
    }
    
    .app-container {
        height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
    }
    
    .controls-area {
        position: sticky;
        bottom: 0;
        flex-shrink: 0;
        z-index: 100;
    }
    
    .chat-window {
        overflow-x: hidden;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
}

@media (display-mode: standalone) {
    .controls-area {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}