{{-- Всплывающая подсказка установки PWA. Только на телефонах (md:hidden),
     нормальный поток над шапкой. Логика — Alpine-компонент pwaInstall в app.js:
     Android/Chrome → нативная установка, iOS Safari → инструкция Share.

     Внутри мобильного приложения (WebView-обёртка) баннер бессмыслен — предлагать
     установить приложение тому, кто уже в нём. Проверка стоит здесь, а не в
     layouts/app: так правило не потеряется, если баннер подключат ещё где-то.
     Разметка не отдаётся вовсе, поэтому Alpine-компонент даже не монтируется. --}}
@unless (app(\App\Services\Mobile\MobileAppContext::class)->isApp())
<div class="md:hidden">
    <div x-data="pwaInstall" x-cloak x-show="show"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="-translate-y-full opacity-0"
         x-transition:enter-end="translate-y-0 opacity-100"
         class="flex items-center gap-3 bg-[var(--color-primary)] px-4 py-2.5 text-white">
        <img src="{{ asset('images/icons/icon-192.png') }}" alt="" class="h-9 w-9 shrink-0 rounded-[10px] bg-white/15 p-1">

        <div class="min-w-0 flex-1">
            <p class="text-[13px] font-bold leading-tight">Установите приложение teeu</p>
            <p x-show="mode === 'android'" class="text-[12px] leading-tight text-white/80">Быстрый доступ с домашнего экрана</p>
            <p x-show="mode === 'ios'" class="text-[12px] leading-snug text-white/85">
                Нажмите <span class="font-semibold">Поделиться</span>
                <i data-lucide="share" class="inline h-3 w-3 align-[-1px]"></i>
                → «На экран&nbsp;„Домой"»
            </p>
        </div>

        <button x-show="mode === 'android'" type="button" @click="install()"
                class="shrink-0 rounded-[var(--radius-md)] bg-white px-3.5 py-1.5 text-[13px] font-bold text-[var(--color-primary)]">
            Установить
        </button>
        <button type="button" @click="dismiss()" class="shrink-0 rounded-md p-1 text-white/80 transition hover:text-white" aria-label="Закрыть">
            <i data-lucide="x" class="h-4 w-4"></i>
        </button>
    </div>
</div>
@endunless