/* pwa.css — только своё у оболочки: предложение установить и шаги в подсказке.
   Подсказка и строка в настройках сидят на родных классах из components.css (.modal-overlay,
   .modal-sheet, .set-group/.set-row) — оболочка не заводит второй дизайн. */

#pwa-bar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:44;                                   /* ниже модалок (45) и тоста (70) */
  width:min(440px,calc(100vw - 24px));
  display:flex;align-items:center;gap:11px;
  padding:10px 10px 10px 12px;border-radius:18px;
  background:var(--panel2);
  backdrop-filter:blur(var(--blur)) saturate(1.4);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);
  border:1px solid var(--border);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  animation:fadeUp .28s ease;
}
/* В переписке не лезем поверх ввода: предложение — дело экрана со списком. */
body.inchat #pwa-bar{display:none}

/* Настоящая иконка приложения — она же со своими скруглёнными углами, второй раз не скругляем. */
#pwa-bar .pwa-ic{width:34px;height:34px;flex-shrink:0;display:block}
#pwa-bar .pwa-body{flex:1;min-width:0}
#pwa-bar .pwa-main{font-size:13.5px;font-weight:600;color:var(--text)}
#pwa-bar .pwa-sub{font-size:12px;color:var(--text2);margin-top:2px}
#pwa-bar .pwa-go{
  flex-shrink:0;padding:9px 14px;border:none;border-radius:12px;
  background:var(--bubble-out);color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;
}
#pwa-bar .pwa-go:hover{filter:brightness(1.06)}
#pwa-bar .pwa-x{
  flex-shrink:0;width:28px;height:28px;border:none;border-radius:9px;
  background:transparent;color:var(--text2);font-size:13px;cursor:pointer;
}
#pwa-bar .pwa-x:hover{background:var(--hover)}

/* Шаги в подсказке. */
.pwa-step{display:flex;gap:10px;align-items:flex-start;padding:7px 4px}
.pwa-step b{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;margin-top:1px;
}
.pwa-step span{font-size:13.5px;line-height:1.45;color:var(--text)}
.pwa-note{
  margin-top:10px;padding:10px 12px;border-radius:12px;
  background:var(--hover);font-size:12.5px;line-height:1.45;color:var(--text2);
}

@media(max-width:760px){
  /* На мобильном внизу живёт #mobnav — встаём над ним, а не на него. */
  #pwa-bar{bottom:calc(78px + env(safe-area-inset-bottom))}
}


/* Полоса «Вышло обновление» (задумка владельца, 20.07): значок рисуем svg, а не <img> с иконкой
   приложения — это сообщение оболочки, не визитка. Размеры — как у .pwa-ic. */
#pwa-bar .pwa-upd-ic{display:flex;align-items:center;justify-content:center;color:var(--accent)}
#pwa-bar .pwa-upd-ic svg{width:26px;height:26px}

/* #118 (задумка владельца): экран «Идёт обновление» по «Обновить»/«Применить обновление».
   Тот же слой и знак, что у входа (.overlay-screen/.glass-card в st-wait) — обновление говорит на
   языке входа. Поверх всего: z-index выше модалок (45) и тоста (70). */
#pwa-applying{z-index:80}
#pwa-applying .card-sub{margin-top:2px}
/* Полоса-статус: ширину ведёт WAAPI. Задумка #147 разложила её на два плеча вокруг reload —
   до перезагрузки и после неё, — а до 100% доводит только настоящая готовность интерфейса. */
#pwa-applying .pwa-upd-track{width:100%;height:4px;border-radius:99px;background:var(--hover);overflow:hidden;margin-top:6px}
#pwa-applying .pwa-upd-fill{width:0;height:100%;border-radius:99px;background:var(--accent)}
/* Гашение (#147): «плавненько открывался интерфейс» — экран уходит прозрачностью, а не пропадает
   кадром. pointer-events снимаем сразу: гаснущий слой не должен съедать тапы по приложению. */
#pwa-applying{transition:opacity .38s ease}
#pwa-applying.upd-done{opacity:0;pointer-events:none}