{ 
    "name": "Azatell",
    "short_name": "Azatell",
    "description": "Voice chat rooms and community platform",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#000000",
    "theme_color": "#E53935",
    "orientation": "portrait-primary",
    "icons": [
        {
            "src": "/assets/img/logo-192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "/assets/img/logo-512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "/assets/img/badge-96.png",
            "sizes": "96x96",
            "type": "image/png",
            "purpose": "badge"
        }
    ],
    "splash_pages": null
} you already see the public/sw.js, footer-items.php <!-- PWA Install Banner + iOS Guide Modal (Fixed 2026) -->
<div id="pwaInstallBanner" class="fixed bottom-0 left-0 right-0 bg-gradient-to-r from-blue-900 to-blue-900 text-text p-4 shadow-2xl z-50 transform translate-y-full transition-transform duration-300">
    <div class="max-w-4xl mx-auto flex items-center justify-between gap-4">
        <!-- Logo -->
        <img src="/assets/img/logo.png" alt="Azatell Logo" class="w-14 h-14 rounded-full object-cover flex-shrink-0 shadow-lg">
        <!-- Text & Instructions -->
        <div class="flex-1">
            <p class="font-bold text-white text-lg">Install Azatell App</p>
            <p class="text-sm text-white opacity-90">
                Add to home screen for quick access.
                <span id="installInstruction" class="font-semibold"></span>
            </p>
        </div>
        <!-- Buttons -->
        <div class="flex gap-3">
            <button id="installPWA" class="bg-white text-purple-900 px-6 py-2 rounded-full font-bold hover:bg-gray-100 transition">
                Install
            </button>
            <button id="closeInstallBanner" class="text-text/70 hover:text-text transition">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
    </div>
</div>

<!-- iOS Full-Screen Guide Modal -->
<div id="iosPwaModal" class="fixed inset-0 bg-bg dark:bg-white z-50 hidden flex items-center justify-center">
    <div class="bg-gray-900 rounded-2xl p-6 max-w-md w-11/12 relative">
        <button id="closeIosModal" class="absolute top-4 right-4 text-text text-2xl hover:text-gray-300">
            <i class="fas fa-times"></i>
        </button>
        <h2 class="text-2xl font-bold text-center mb-4 text-text dark:text-white ">Add Azatell to Home Screen</h2>
        <p class="text-gray-300 text-center mb-6">Follow these steps:</p>
        <img src="/assets/img/pwaguide.jpg" alt="iOS Install Guide" class="w-[80%] rounded-lg shadow-2xl mb-6 border border-gray-700">
        <ol class="text-gray-200 space-y-3 list-decimal pl-6">
            <li>Tap the <strong>Share</strong> button (square with arrow up) in Safari</li>
            <li>Scroll down and tap <strong>Add to Home Screen</strong></li>
            <li>Tap <strong>Add</strong> in the top-right corner</li>
            <li>Done! Open from your home screen</li>
        </ol>
        <button id="closeIosModalBtn" class="mt-6 w-full bg-primary text-black py-3 rounded-full font-bold hover:bg-primary/90 transition">
            Got It!
        </button>
    </div>
</div>

<script>
// PWA Install Banner + iOS Guide Modal – FINAL FIXED VERSION
let deferredPrompt = null;

// Super-reliable standalone detection
const isInStandaloneMode = () => {
    return (
        window.navigator.standalone === true || // iOS
        window.matchMedia('(display-mode: standalone)').matches ||
        window.matchMedia('(display-mode: fullscreen)').matches ||
        window.matchMedia('(display-mode: minimal-ui)').matches ||
        window.matchMedia('(display-mode: browser)').matches === false // Extra safety
    );
};

// Banner & modal elements
const banner = document.getElementById('pwaInstallBanner');
const installInstruction = document.getElementById('installInstruction');
const installBtn = document.getElementById('installPWA');
const closeBtn = document.getElementById('closeInstallBanner');
const iosModal = document.getElementById('iosPwaModal');
const closeIosBtns = [
    document.getElementById('closeIosModal'),
    document.getElementById('closeIosModalBtn')
];

const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const dismissedKey = 'pwaBannerDismissed';
const dismissedTime = localStorage.getItem(dismissedKey);

// Hide everything if already installed OR recently dismissed
if (isInStandaloneMode() || (dismissedTime && parseInt(dismissedTime) > Date.now() - 7 * 24 * 60 * 60 * 1000)) {
    console.log('[PWA] Already installed or recently dismissed → hidden');
} else {
    // Show banner after short delay (better UX)
    setTimeout(() => {
        banner.classList.remove('translate-y-full');
        banner.classList.add('translate-y-0');
    }, 5000); // 5 seconds delay

    if (isIOS) {
        installInstruction.textContent = '(Tap Share → Add to Home Screen)';
        installBtn.textContent = 'Show Guide';
        installBtn.onclick = () => {
            iosModal.classList.remove('hidden');
            banner.classList.add('translate-y-full');
            banner.classList.remove('translate-y-0');
        };
    } else {
        // Android/Chrome: Capture native prompt
        window.addEventListener('beforeinstallprompt', (e) => {
            console.log('[PWA] beforeinstallprompt fired');
            e.preventDefault();
            deferredPrompt = e;
            installInstruction.textContent = 'Tap Install to add to home screen';
            banner.classList.remove('translate-y-full');
            banner.classList.add('translate-y-0');
        });

        installBtn.onclick = async () => {
            if (!deferredPrompt) {
                console.warn('[PWA] No deferred prompt available – already installed or blocked');
                alert('To install: Tap the browser menu (three dots) → Add to Home screen');
                return;
            }
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            console.log('[PWA] Install outcome:', outcome);
            banner.classList.add('translate-y-full');
            banner.classList.remove('translate-y-0');
            deferredPrompt = null;
        };
    }

    // Close banner & remember for 7 days
    closeBtn.onclick = () => {
        banner.classList.add('translate-y-full');
        banner.classList.remove('translate-y-0');
        localStorage.setItem(dismissedKey, Date.now().toString());
    };

    // Close iOS modal
    closeIosBtns.forEach(btn => {
        btn?.addEventListener('click', () => {
            iosModal.classList.add('hidden');
        });
    });

    // Detect successful install (Android)
    window.addEventListener('appinstalled', () => {
        console.log('[PWA] App installed!');
        banner.classList.add('translate-y-full');
        banner.classList.remove('translate-y-0');
        localStorage.setItem(dismissedKey, Date.now().toString());
    });
}
</script>