/* Mobile Optimizations for SoulStream */

/* Prevent horizontal scrolling and overflow issues */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Main layout fixes for mobile */
@media (max-width: 768px) {
    /* Fix chat container layout */
    .chat-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }
    
    /* Ensure main content fills available space */
    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Chat messages should scroll properly */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
        /* Add safe area insets for modern phones */
        padding-bottom: env(safe-area-inset-bottom, 1rem);
    }
    
    /* Fix input container positioning */
    .chat-input-container {
        position: relative;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background-color: #ffffff;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    }
    
    /* Ensure modals are above everything */
    .settings-modal-overlay,
    .memory-suggestion-modal-overlay,
    .sources-modal-overlay {
        z-index: 9999;
    }
    
    /* Fix model selector dropdown positioning */
    .model-dropdown-container,
    .prompt-dropdown-container {
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        z-index: 1000;
    }
    
    /* Ensure dropdowns don't go off-screen */
    .model-dropdown,
    .prompt-dropdown {
        max-width: 90vw;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Fix message action buttons */
    .message-buttons {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
        flex-wrap: wrap;
    }
    
    .refresh-button,
    .sources-button {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    
    /* Improve code block scrolling */
    pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix memory bell positioning */
    #memoryBellContainer {
        position: relative;
        z-index: 100;
    }
    
    /* Ensure memory dropdown is visible */
    .memory-dropdown {
        position: fixed;
        top: auto;
        right: 1rem;
        left: 1rem;
        bottom: auto;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix sidebar z-index issues */
    .sidebar {
        z-index: 1100;
    }
    
    .menu-overlay {
        z-index: 1099;
    }
    
    .hamburger-menu {
        z-index: 1101;
    }
    
    /* Improve touch targets for conversation items */
    .conversation-item {
        min-height: 48px;
        padding: 12px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(74, 144, 226, 0.2);
    }
    
    /* Fix thinking content display */
    .thinking-content {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Landscape mode optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .selectors-container {
        padding: 0.25rem 0.5rem;
    }
    
    .chat-input-container {
        padding: 0.5rem;
    }
    
    .input-wrapper {
        padding: 0.25rem;
    }
    
    /* Hide less important elements in landscape */
    .message-timestamp {
        display: none;
    }
    
    /* Smaller avatars in landscape */
    .avatar {
        width: 32px !important;
        height: 32px !important;
    }
}

/* High contrast mode for accessibility */
@media (prefers-contrast: high) {
    .send-button:disabled {
        opacity: 0.5;
    }
    
    .chat-input {
        border: 2px solid #333;
    }
    
    .selector-icon {
        border: 2px solid #333;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix iOS rubber band scrolling issues */
    .chat-messages {
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }
    
    /* Fix iOS keyboard issues */
    .chat-input-container {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
}

/* Android-specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    /* Fix Android keyboard overlay issues */
    .chat-container {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }
}

/* PWA and standalone mode optimizations */
@media (display-mode: standalone) {
    /* Add padding for status bar in PWA mode */
    .chat-container {
        padding-top: env(safe-area-inset-top, 0);
    }
    
    .hamburger-menu {
        top: calc(10px + env(safe-area-inset-top, 0));
    }
    
    .mobile-settings-button {
        top: calc(10px + env(safe-area-inset-top, 0));
    }
}

/* Keyboard visible state (iOS) */
body.keyboard-visible {
    /* Adjust layout when keyboard is shown */
    .chat-messages {
        /* Temporarily reduce height to accommodate keyboard */
        max-height: 50vh;
    }
    
    /* Hide non-essential elements when typing */
    .selectors-container {
        opacity: 0.7;
    }
}