/* OpenClaw Mobile Fix - iPhone 13 & Safe Area Support */
/* Created: 2026-05-05 */

/* Force proper viewport handling */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Safe area support for notch devices */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    * {
        max-width: 100vw !important;
    }
    
    /* Fix header */
    header, [role="banner"], nav {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Fix sidebar/menu */
    aside, [role="navigation"], .sidebar, .menu {
        max-width: 80vw !important;
        touch-action: pan-y !important;
    }
    
    /* Fix chat input area */
    .input-area, .message-input, [role="textbox"], textarea {
        position: sticky !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 100 !important;
    }
    
    /* Fix chat messages area */
    .messages, .chat-area, main {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100vw !important;
    }
    
    /* Fix buttons */
    button, .btn, [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
    }
    
    /* Word wrap for long text */
    p, span, div, pre {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    
    /* Fix code blocks */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}

/* iPhone 13 specific (390px width) */
@media (max-width: 390px) {
    /* Reduce padding for small screens */
    .container, .wrapper, main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Smaller font for very small screens */
    body {
        font-size: 14px !important;
    }
}

/* iPhone SE (375px width) */
@media (max-width: 375px) {
    .container, .wrapper, main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    body {
        font-size: 13px !important;
    }
}

/* Landscape mode */
@media (max-height: 500px) and (orientation: landscape) {
    header, [role="banner"] {
        position: sticky !important;
        top: 0 !important;
    }
    
    .input-area, .message-input {
        position: sticky !important;
        bottom: 0 !important;
    }
}

/* PWA standalone mode */
@media (display-mode: standalone) {
    body {
        padding-top: max(env(safe-area-inset-top), 20px) !important;
        padding-bottom: max(env(safe-area-inset-bottom), 20px) !important;
    }
}