/* Strict Mobile Font-Size Locking (Prevents system font zoom from breaking UI) */
*, *::before, *::after {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    font-size-adjust: none !important;
}
html, body {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    font-size-adjust: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    -webkit-tap-highlight-color: transparent;
}
input, button, select, textarea {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    font-size-adjust: none !important;
}

/* PWA Install Button */
#pwa-install-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    z-index: 1000;
    transition: all 0.3s ease;
    display: none;
}

#pwa-install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

#pwa-install-btn:active {
    transform: translateY(0);
}

/* Offline styles */
body.offline::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #ef4444);
    background-size: 200% 100%;
    animation: slideGradient 3s ease infinite;
    z-index: 9998;
}

/* Offline message banner */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ef4444;
    color: white;
    padding: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    z-index: 9997;
    display: none;
}

body.offline .offline-banner {
    display: block;
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes slideGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #pwa-install-btn {
        bottom: 15px;
        right: 15px;
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* Ensure PWA elements don't interfere with existing UI */
#pwa-install-btn {
    pointer-events: auto;
}

/* Shift PWA install button up if there's a bottom navigation bar or action container */
body:has(.fixed.bottom-0) #pwa-install-btn,
#pwa-install-btn.has-bottom-nav {
    bottom: 90px;
}

@media (max-width: 640px) {
    body:has(.fixed.bottom-0) #pwa-install-btn,
    #pwa-install-btn.has-bottom-nav {
        bottom: 85px;
    }
}

/* Safe area insets for mobile devices */
@supports (padding: max(0px)) {
    #pwa-install-btn {
        bottom: max(20px, env(safe-area-inset-bottom));
        right: max(20px, env(safe-area-inset-right));
    }

    body:has(.fixed.bottom-0) #pwa-install-btn,
    #pwa-install-btn.has-bottom-nav {
        bottom: calc(90px + env(safe-area-inset-bottom));
    }

    @media (max-width: 640px) {
        body:has(.fixed.bottom-0) #pwa-install-btn,
        #pwa-install-btn.has-bottom-nav {
            bottom: calc(85px + env(safe-area-inset-bottom));
        }
    }

    /* Safe area bottom padding for fixed/absolute bottom bars */
    .fixed.bottom-0 {
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }
}

/* Global Font Size Reduction and Motion Removal - Driver Theme Only */
html.driver-theme {
    font-size: 14px !important;
}

body.driver-theme {
    font-size: 14px !important;
}

.driver-theme *, .driver-theme *::before, .driver-theme *::after {
    animation: none !important;
    transition: none !important;
}

/* Safe area top padding for sticky/fixed headers */
header,
.sticky.top-0,
.fixed.top-0 {
    padding-top: env(safe-area-inset-top, 0px) !important;
}

/* Prevent duplicate safe-area-inset-top when header is inside sticky/fixed top container */
.sticky.top-0 header,
.fixed.top-0 header,
header header,
#stickyTopContainer header {
    padding-top: 0 !important;
}

/* Maintain original padding-top for elements that have Tailwind padding classes directly */
header.py-1, .sticky.top-0.py-1, .fixed.top-0.py-1 {
    padding-top: calc(0.25rem + env(safe-area-inset-top, 0px)) !important;
}
header.py-2, .sticky.top-0.py-2, .fixed.top-0.py-2 {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
}
header.py-2\.5, .sticky.top-0.py-2\.5, .fixed.top-0.py-2\.5,
header[class*="py-2.5"], .sticky.top-0[class*="py-2.5"], .fixed.top-0[class*="py-2.5"] {
    padding-top: calc(0.625rem + env(safe-area-inset-top, 0px)) !important;
}
header.py-3, .sticky.top-0.py-3, .fixed.top-0.py-3 {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
}
header.py-4, .sticky.top-0.py-4, .fixed.top-0.py-4 {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
}
header.py-5, .sticky.top-0.py-5, .fixed.top-0.py-5 {
    padding-top: calc(1.25rem + env(safe-area-inset-top, 0px)) !important;
}
header.py-6, .sticky.top-0.py-6, .fixed.top-0.py-6 {
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
}
header.p-1, .sticky.top-0.p-1, .fixed.top-0.p-1 {
    padding-top: calc(0.25rem + env(safe-area-inset-top, 0px)) !important;
}
header.p-2, .sticky.top-0.p-2, .fixed.top-0.p-2 {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
}
header.p-3, .sticky.top-0.p-3, .fixed.top-0.p-3 {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
}
header.p-4, .sticky.top-0.p-4, .fixed.top-0.p-4 {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
}
header.p-5, .sticky.top-0.p-5, .fixed.top-0.p-5 {
    padding-top: calc(1.25rem + env(safe-area-inset-top, 0px)) !important;
}
header.p-6, .sticky.top-0.p-6, .fixed.top-0.p-6 {
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
}
header.pt-1, .sticky.top-0.pt-1, .fixed.top-0.pt-1 {
    padding-top: calc(0.25rem + env(safe-area-inset-top, 0px)) !important;
}
header.pt-2, .sticky.top-0.pt-2, .fixed.top-0.pt-2 {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
}
header.pt-3, .sticky.top-0.pt-3, .fixed.top-0.pt-3 {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
}
header.pt-4, .sticky.top-0.pt-4, .fixed.top-0.pt-4 {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
}
header.pt-5, .sticky.top-0.pt-5, .fixed.top-0.pt-5 {
    padding-top: calc(1.25rem + env(safe-area-inset-top, 0px)) !important;
}
header.pt-6, .sticky.top-0.pt-6, .fixed.top-0.pt-6 {
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
}
header.pt-8, .sticky.top-0.pt-8, .fixed.top-0.pt-8 {
    padding-top: calc(2rem + env(safe-area-inset-top, 0px)) !important;
}

/* Offset fixed top layouts (like chat messages container) when safe area top is present */
.fixed.top-16 {
    top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
}
.fixed.top-20 {
    top: calc(5rem + env(safe-area-inset-top, 0px)) !important;
}
.fixed.top-24 {
    top: calc(6rem + env(safe-area-inset-top, 0px)) !important;
}

/* Fallback: Add safe-area top padding directly to the body on pages that do NOT have a header or top-sticky/fixed layout */
body:not(:has(header)):not(:has(.sticky.top-0)):not(:has(.fixed.top-0)) {
    padding-top: env(safe-area-inset-top, 0px) !important;
}

/* Universal Toast & Floating Notification Visibility Enhancement */
#loadingIndicator,
.toast-notification,
.fancy-toast,
.toast-msg,
#toast,
#toastNotification,
#errorToast,
.notification-toast,
[id*="toast"],
[id*="Toast"],
[class*="toast"],
[class*="Toast"] {
    z-index: 999999 !important;
}

/* Guarantee top notifications and loading pills sit safely below the dynamic island and status bar */
#loadingIndicator,
.toast-notification,
.fancy-toast,
.toast-msg.show,
#toast.fixed,
#toastNotification.fixed,
#errorToast.fixed,
.fixed.top-3:not(header):not(nav),
.fixed.top-4:not(header):not(nav),
.fixed.top-5:not(header):not(nav),
.fixed.top-6:not(header):not(nav) {
    top: max(calc(env(safe-area-inset-top, 0px) + 16px), 20px) !important;
}