<div
    id="pwa-install-banner"
    class="pwa-install-banner pointer-events-none fixed inset-x-0 bottom-0 z-[280] flex justify-center px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2"
    role="region"
    aria-label="{{ __('Install app') }}"
>
    <div
        data-install-panel
        class="pointer-events-auto w-full max-w-lg rounded-2xl border border-border/60 bg-card/95 p-4 shadow-lg ring-1 ring-black/[0.06] backdrop-blur-xl dark:bg-card/95 dark:ring-white/[0.08]"
    >
        <div class="flex items-start gap-3">
            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-foreground">
                <x-icons.utensils class="h-5 w-5 text-primary-foreground" />
            </div>
            <div class="min-w-0 flex-1 space-y-2">
                <p class="text-sm font-semibold text-foreground">{{ __('Install Collabs') }}</p>
                <div data-install-chrome-hint class="hidden text-xs leading-relaxed text-muted-foreground">
                    <p>{{ __('Add this app for a full-screen experience and faster access.') }}</p>
                    <button
                        type="button"
                        data-install-chrome
                        class="mt-2 inline-flex min-h-9 touch-manipulation items-center justify-center rounded-xl bg-foreground px-4 py-2 text-xs font-semibold text-primary-foreground shadow-sm hover:opacity-90"
                    >
                        {{ __('Install app') }}
                    </button>
                </div>
                <div data-install-safari-hint class="hidden text-xs leading-relaxed text-muted-foreground">
                    <p class="font-medium text-foreground">{{ __('On iPhone or iPad') }}</p>
                    <p class="mt-1">{{ __('Tap Share, then “Add to Home Screen”.') }}</p>
                    <p class="mt-3 font-medium text-foreground">{{ __('On Mac (Safari)') }}</p>
                    <p class="mt-1">{{ __('Use File → Add to Dock when available, or keep this tab in your Dock.') }}</p>
                </div>
            </div>
            <button
                type="button"
                data-install-dismiss
                class="touch-manipulation rounded-lg p-2 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                aria-label="{{ __('Dismiss') }}"
            >
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            </button>
        </div>
    </div>
</div>
