/* ════════════════════════════════════════════════════════════════
   PWA.CSS — стили, активные ТОЛЬКО в установленном PWA
   ════════════════════════════════════════════════════════════════
   Подключается из base.html через
       <link rel="stylesheet" href="/static/css/pwa.css?v=..."
             media="(display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen)">

   media-атрибут на <link> делает файл non-render-blocking в обычной
   вкладке (браузер скачает в фоне с низким приоритетом, но не будет
   парсить и применять правила). Это значит:

   - В обычном браузере правила НЕ применяются → splash-overlay в DOM
     остаётся скрытым (`.app-splash { display: none }` в styles.css —
     дефолтный off-state). Всё остальное PWA-only тоже игнорируется.
   - В установленном PWA (Android Chrome standalone, iOS A2HS) — link
     matchает display-mode и правила перекрывают дефолты.

   Файл использует токены из styles.css (--bg-app, --primary-500,
   --accent-cool, --primary-600, --gradient-warm, --motion-ease-standard).
   styles.css должен подключаться раньше pwa.css в base.html.

   Сюда же будут попадать в будущем: install-banner для iOS Safari,
   permission UI для Web Push, safe-area подгонки под нативный wrapper
   (Capacitor/WebView), iOS apple-touch-startup-image media-queries и
   другие splash/PWA-специфичные правки.
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   SAFE-AREA ПОДЛОЖКА
   Android Chrome PWA: gesture nav bar полупрозрачен, цвет берётся с
   контента под ним. На splash-экране (.app-splash, position:fixed;inset:0)
   nav bar выглядит окрашенным в --bg-app. После скрытия сплеша основной
   layout (body: display:flex; height:100%; overflow:hidden) физически не
   достигает низа экрана под nav bar — Chrome возвращает системный фон
   (белый на светлой системе). Фиксированная подложка цвета --bg-app
   высотой safe-area-inset-bottom гарантирует консистентный цвет под
   nav bar независимо от состояния основного layout-а.
   На iOS PWA это также подкрашивает home-indicator зону.
   ════════════════════════════════════════════════════════════════ */

body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: env(safe-area-inset-bottom, 0);
    background-color: var(--bg-app);
    z-index: -1;
    pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════
   SPLASH SCREEN
   First-paint экран при cold start PWA. Halo использует ту же
   конструкцию градиента, что .chat-input-state-host.is-recording::before
   в styles.css — фирменный acid-glow при записи в композере.
   Markup живёт в app/templates/components/_app_splash.html.
   Скрытие — классом .app-splash-ready на body после window.load.
   ════════════════════════════════════════════════════════════════ */

.app-splash {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-app);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: opacity 380ms var(--motion-ease-standard), visibility 0s linear 380ms;
}

body.app-splash-ready .app-splash {
    opacity: 0;
    visibility: hidden;
}

/* Halo появляется с задержкой ~280мс — чтобы переход от OS-сплеша
   Android (плоский bg + лого) к нашему был неощутим: первый кадр
   визуально совпадает с OS-сплешем, halo «загорается» уже после. */
.app-splash__halo {
    position: absolute;
    inset: -10rem -2rem;
    border-radius: 38% 62% 54% 46% / 42% 34% 66% 58%;
    background-image:
        conic-gradient(from 132deg at 50% 50%,
            transparent 0deg,
            color-mix(in srgb, var(--primary-500) 48%, transparent) 38deg,
            transparent 88deg,
            color-mix(in srgb, var(--accent-cool) 32%, transparent) 148deg,
            transparent 212deg,
            color-mix(in srgb, var(--primary-600) 42%, transparent) 286deg,
            transparent 360deg),
        radial-gradient(ellipse 70% 28% at 18% 54%,
            color-mix(in srgb, var(--primary-500) 50%, transparent) 0%,
            transparent 72%),
        radial-gradient(ellipse 60% 26% at 78% 46%,
            color-mix(in srgb, var(--accent-cool) 32%, transparent) 0%,
            transparent 70%),
        linear-gradient(104deg,
            transparent 12%,
            color-mix(in srgb, var(--primary-500) 30%, transparent) 32%,
            transparent 48%,
            color-mix(in srgb, var(--gradient-warm) 22%, transparent) 62%,
            color-mix(in srgb, var(--accent-cool) 26%, transparent) 76%,
            transparent 92%);
    background-size: 170% 160%, 122% 112%, 130% 116%, 180% 140%;
    background-position: 0% 52%, 7% 58%, 92% 42%, 100% 48%;
    filter: blur(64px) saturate(1.2);
    opacity: 0;
    pointer-events: none;
    animation:
        app-splash-halo-in 520ms var(--motion-ease-standard) 280ms forwards,
        app-splash-flow 9s ease-in-out 800ms infinite;
}

/* Лого: размер и позиция как у Android OS splash icon (~30vmin, по центру).
   Сначала статичный — это тот же кадр, что в OS-сплеше. Pulse запускается
   с задержкой, синхронно с halo, чтобы появился «hand-off» effect. */
.app-splash__logo {
    position: relative;
    z-index: 1;
    width: clamp(96px, 30vmin, 144px);
    height: clamp(96px, 30vmin, 144px);
    filter: drop-shadow(0 12px 32px color-mix(in srgb, var(--primary-500) 0%, transparent));
    animation:
        app-splash-pulse 2.4s ease-in-out 280ms infinite,
        app-splash-glow-in 600ms var(--motion-ease-standard) 280ms forwards;
}

@keyframes app-splash-flow {
    0%   { background-position: 0% 52%, 7% 58%, 92% 42%, 100% 48%; }
    50%  { background-position: 100% 48%, 93% 42%, 8% 58%, 0% 52%; }
    100% { background-position: 0% 52%, 7% 58%, 92% 42%, 100% 48%; }
}

@keyframes app-splash-halo-in {
    from { opacity: 0; }
    to   { opacity: 0.72; }
}

@keyframes app-splash-glow-in {
    to { filter: drop-shadow(0 12px 32px color-mix(in srgb, var(--primary-500) 28%, transparent)); }
}

@keyframes app-splash-pulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .app-splash__halo,
    .app-splash__logo { animation: none; }
    .app-splash__halo { opacity: 0.55; }
}