/* Плашка установки PWA (js/pwa-install.js). Палитра, радиусы, тени и шрифты —
 * из css/zachet-theme.css; тёмная тема — через тот же html[data-theme="dark"]. */

.pwa-install {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  /* Ниже таб-бара (200) и тостов (100 — они сверху справа, не пересекаются),
   * выше контента. Модальные окна приложения — 1000+, плашку не перекроют. */
  z-index: 150;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  pointer-events: none; /* сама подложка кликов не ловит — только карточка */
}
.pwa-install[hidden] { display: none; }

.pwa-install__card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-smd);
  width: 100%;
  max-width: 640px;
  padding: var(--space-smd) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transform: translateY(16px);
  opacity: 0;
  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), opacity .25s ease;
}
.pwa-install.is-visible .pwa-install__card { transform: none; opacity: 1; }
[data-theme="dark"] .pwa-install__card { background: rgba(14, 19, 38, 0.82); }

.pwa-install__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pwa-install__icon img { display: block; width: 44px; height: 44px; }

.pwa-install__body { flex: 1 1 0%; min-width: 0; } /* basis 0 — при flex-wrap текст остаётся рядом с иконкой */
.pwa-install__title { font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.pwa-install__text { font-size: 0.85rem; line-height: 1.4; color: var(--text-secondary); margin-top: 2px; }
.pwa-install__text b { color: var(--text-primary); font-weight: 600; }

.pwa-install__actions { flex: 0 0 auto; display: flex; gap: var(--space-sm); }
.pwa-install__btn { padding: 0.55rem 0.9rem; font-size: 0.85rem; white-space: nowrap; }
.pwa-install__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

/* На узком экране кнопки уходят под текст — иначе карточка не влезет. */
@media (max-width: 480px) {
  .pwa-install__card { flex-wrap: wrap; }
  .pwa-install__actions { flex-basis: 100%; justify-content: flex-end; }
}

/* В режиме приложения на мобайле снизу живёт таб-бар (64px + safe-area) —
 * плашка встаёт над ним, а не поверх кнопок навигации. */
@media (max-width: 768px) {
  html[data-app="true"] .pwa-install {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--space-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install__card { transition: none; transform: none; }
}