/* iOS Safe Area Insets */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Full screen immersive experience */
html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Prevent pull-to-refresh on iOS */
    touch-action: pan-y;
}

/* Standalone PWA mode specific styles */
@media all and (display-mode: standalone) {
    body {
        /* Add padding for iOS notch/status bar */
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
        padding-left: var(--safe-area-left);
        padding-right: var(--safe-area-right);
    }
    
    /* Settings button safe area adjustment */
    #settings-container {
        top: calc(1rem + var(--safe-area-top)) !important;
        right: calc(1rem + var(--safe-area-right)) !important;
    }
}

/* Custom Scrollbar for Heatmap if needed */
.heatmap-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.heatmap-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.heatmap-scroll-container::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 20px;
}

.heatmap-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #d1d5db;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}