/* iOS-specific CSS Fixes - Improved version */

/* Enable viewport-fit=cover in all pages */
@viewport {
    viewport-fit: cover;
}

/* Fix for safe areas on iOS */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --app-height: 100vh;
}

/* Body adjustments for iOS fullscreen */
body {
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
    margin: 0;
    min-height: 100vh;
    min-height: var(--app-height);
    overflow-x: hidden;
}

/* iOS standalone app specific fixes */
body.ios-standalone {
    padding-top: max(0px, var(--safe-area-inset-top));
    padding-bottom: max(0px, var(--safe-area-inset-bottom));
}

/* Fix for iOS momentum scrolling */
.chat-messages, 
.sessions-list,
.upgrades-container,
.modal,
.form-container {
    -webkit-overflow-scrolling: touch;
}

/* Fix for iOS input zoom issues */
input, 
select, 
textarea {
    font-size: 16px !important;
}

/* Fix the chat container positioning on iOS */
.chat-container {
    bottom: max(0px, var(--safe-area-inset-bottom));
    right: max(20px, var(--safe-area-inset-right));
    height: calc(500px - var(--safe-area-inset-bottom));
}

.chat-container.chat-hidden {
    transform: translateY(calc(100% - 40px - var(--safe-area-inset-bottom)));
}

/* Position the toggle chat button with safe area consideration */
.toggle-chat-btn {
    bottom: max(20px, calc(20px + var(--safe-area-inset-bottom)));
    right: max(20px, var(--safe-area-inset-right));
}

/* Fix header height and padding for iOS notches */
.ford-header .ford-brand-bar {
    padding-top: max(1.5rem, calc(1.5rem + var(--safe-area-inset-top)));
}

/* Fix for bottom navigation/buttons */
.chat-input, 
.modal-footer {
    padding-bottom: max(10px, calc(10px + var(--safe-area-inset-bottom)));
}

/* Fix for iOS form elements */
button, 
input[type="submit"],
.btn,
.modal-btn {
    -webkit-appearance: none;
    border-radius: var(--border-radius);
}

/* Fix iOS scroll bounce effect for modal */
.modal {
    max-height: calc(90vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
}

/* Ford Header specific fixes */
.ford-header-container {
    padding-top: var(--safe-area-inset-top);
}

.ford-mobile-nav {
    padding-bottom: var(--safe-area-inset-bottom);
}

/* Specific iPhone fix for the chat interface - optimizes for smaller screens */
@media (max-width: 430px) {
    .chat-interface {
        grid-template-columns: 1fr;
    }
    
    .chat-sidebar {
        height: auto;
        max-height: 300px;
    }
    
    .chat-main {
        height: calc(100vh - 400px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
    }
    
    .chat-options {
        grid-template-columns: 1fr;
    }
    
    .expert-intro {
        flex-direction: column;
        padding: 1rem;
    }
    
    .chat-header, 
    .sidebar-header {
        padding: 0.75rem;
    }
    
    .section-header {
        padding: 0.75rem;
    }
    
    /* Improve filter toolbar for small screens */
    .filter-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .total-amount {
        width: 100%;
        text-align: center;
    }
}

/* Fix for orientation changes */
@media screen and (orientation: landscape) {
    .chat-main {
        height: calc(100vh - 200px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
    }
    
    .chat-container {
        width: 400px;
        height: calc(300px - var(--safe-area-inset-bottom));
    }
}

/* Fix for notched devices in landscape */
@media screen and (orientation: landscape) {
    .ford-brand-bar,
    .ford-nav-wrapper,
    .info-container,
    .upgrades-container {
        padding-left: var(--safe-area-inset-left);
        padding-right: var(--safe-area-inset-right);
    }
}