/* 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);
  /* Только прозрачность. Здесь стоял общий fadeUp — а он анимирует TRANSFORM, и этим затирал
     translateX(-50%), которым полоса и держится по центру. Пока шла анимация, элемент стоял левым
     краем на середине экрана и на 10px ниже, то есть уезжал вправо вниз; в последнем кадре
     transform возвращался к своему — и полоса ПРЫГАЛА в центр. Отсюда и «показывается в углу, а
     потом сразу в центре, за два грубых шага». Правило общее: элемент, центрированный
     трансформацией, нельзя анимировать ключевыми кадрами, которые трансформацию трогают. */
  animation:pwaBarIn .3s ease;
}
@keyframes pwaBarIn{from{opacity:0}to{opacity:1}}
/* В переписке не лезем поверх ввода: предложение — дело экрана со списком. */
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}
/* Полоса фирменного оранжевого, а НЕ var(--accent) (просьба владельца). Акцент человек меняет в
   пульте — у владельца он синий, — и полоса под оранжевым знаком становилась синей. Но здесь
   говорит оболочка, а не переписка: знак, имя и полоса — одно сообщение и один цвет. Тот же
   #e8571f, что стоит акцентом по умолчанию. */
#pwa-applying .pwa-upd-fill{width:0;height:100%;border-radius:99px;background:#e8571f}
/* Экран входа на время подъёма экрана обновления. #auth-screen видим в разметке с самого начала —
   браузер рисует его сразу, как только разобрал body, а экран обновления поднимает js/pwa.js,
   последний скрипт страницы: между этими двумя моментами и мелькал вход. Класс на <html> ставит
   крошечный скрипт в <head> (index.php) — он успевает ДО первой отрисовки; снимает его pwa.js,
   когда решил судьбу экрана, и на всякий случай сам скрипт по таймеру.
   visibility, а не display: показ входа завязан на его style.display (showScreen, pwaAppVisible),
   и трогать это свойство снаружи нельзя — иначе экран решит, что вход уже убран. */
html.upd-boot #auth-screen{visibility:hidden}
/* Заслонка первого кадра для того, кто УЖЕ вошёл (пара — крошечный скрипт в <head>, index.php).
   #auth-screen видим в разметке с самого начала, и у человека с сохранённым токеном карточка
   «Вход по токену» мелькала на долю секунды при каждом холодном старте — браузер рисует её,
   едва разобрав body, а решение «показать список, а не вход» скрипты принимают сильно позже.
   Токен в localStorage — достаточный знак, что вход тут не первый экран. Прячем ОБА слоя:
   вход — чтобы не мелькала карточка с полем токена; #app — чтобы из-под спрятанного входа не
   выглядывал пустой каркас (поиск, навигация и ни одного диалога — то же мелькание, только
   другое). До снятия класса человек видит ровный фон приложения — продолжение заставки.
   visibility, а не display — по той же причине, что у upd-boot выше: показ обоих экранов
   завязан на их style.display/visibility (showScreen), и инлайновое значение от showScreen
   само перебивает это правило — момент появления решает приложение, а не таймер.
   Снимает класс js/bootfx.js на первом содержательном showScreen; страховки — в самом скрипте
   <head> (load+900мс и жёсткие 8 секунд), рабочим путём они не являются. */
html.tok-boot #auth-screen{visibility:hidden}
html.tok-boot #app{visibility:hidden}
/* Гашение (#147): «плавненько открывался интерфейс» — экран уходит прозрачностью, а не пропадает
   кадром. pointer-events снимаем сразу: гаснущий слой не должен съедать тапы по приложению. */
#pwa-applying{transition:opacity .38s ease}
#pwa-applying.upd-done{opacity:0;pointer-events:none}

/* Второе плечо (после перезагрузки) продолжает начатое, а не появляется впервые: карточка не
   выпрыгивает popIn'ом заново, а весь экран коротко проявляется. Обои под ним те же самые, поэтому
   на глаз это выглядит как «полоса просто поехала дальше», без разрыва на месте перезагрузки. */
#pwa-applying.upd-resume .glass-card{animation:none}
#pwa-applying.upd-resume{animation:updResumeIn .22s ease}
@keyframes updResumeIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  #pwa-applying.upd-resume{animation:none}
  #pwa-bar{animation:none}
}