/* Плашка установки приложения — общая для обоих PWA.
   Собственных цветов не заводит: берёт переменные приложения (--accent, --ink,
   --surface, --line-2, --nav-h, --safe-bot), поэтому в «сопровождающем» она
   бирюзовая, а во «встречах» — своя, и обе выглядят частью приложения. */
.pwa-bn{
  position:fixed;left:0;right:0;
  bottom:calc(var(--nav-h, 0px) + var(--safe-bot, 0px) + 10px);
  z-index:50;max-width:480px;margin:0 auto;
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;margin-left:12px;margin-right:12px;
  background:var(--surface,#fff);color:var(--ink,#1a1f1e);
  border:1px solid var(--line-2,rgba(0,0,0,.16));border-radius:14px;
  box-shadow:0 8px 26px rgba(16,24,32,.16);
  /* до появления — сдвинута вниз и прозрачна (класс .on включает показ) */
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,.7,.2,1);
}
.pwa-bn.on{opacity:1;transform:none}
.pwa-bn[hidden]{display:none}

.pwa-ic{flex:0 0 auto;font-size:20px;line-height:1;width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft,rgba(0,0,0,.05))}
.pwa-tx{flex:1 1 auto;min-width:0}
.pwa-tx b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.pwa-tx span{display:block;font-size:11.5px;line-height:1.35;color:var(--ink-2,#5c6563);margin-top:3px}
.pwa-tx svg{vertical-align:-3px;margin:0 1px;color:var(--accent-2,#0c6f68)}
.pwa-tx b + span b{display:inline;font-size:inherit;color:var(--ink,#1a1f1e)}

.pwa-go{flex:0 0 auto;border:0;border-radius:10px;padding:10px 13px;cursor:pointer;
  font:600 12.5px/1 inherit;color:#fff;background:var(--accent-2,#0c6f68)}
.pwa-go:active{opacity:.85}
.pwa-x{flex:0 0 auto;border:0;background:transparent;cursor:pointer;
  color:var(--ink-3,#939c9a);font-size:15px;line-height:1;padding:6px;border-radius:8px}
.pwa-x:active{background:var(--line,#ebeeee)}

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

/* Экран «сначала установите» — перекрывает всё: с телефона работать можно
   только из установленного приложения. Свой фон, а не прозрачность: под ним
   форма входа, и её не должно быть видно даже краем. */
html.pwa-gated,html.pwa-gated body{overflow:hidden;height:100%}
.pwa-gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:22px calc(16px + env(safe-area-inset-left,0px)) 22px calc(16px + env(safe-area-inset-right,0px));
  background:var(--bg,#f4f6f6);color:var(--ink,#1a1f1e);
  -webkit-overflow-scrolling:touch;overflow:auto;
}
.pwa-gate-card{
  width:100%;max-width:420px;text-align:center;
  background:var(--surface,#fff);border:1px solid var(--line-2,rgba(0,0,0,.12));
  border-radius:18px;padding:26px 20px 20px;box-shadow:0 10px 34px rgba(16,24,32,.12);
}
.pwa-gate-ic{font-size:34px;line-height:1;margin-bottom:12px}
.pwa-gate h1{margin:0 0 10px;font-size:19px;font-weight:650;line-height:1.25}
.pwa-gate p{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--ink-2,#5c6563)}
.pwa-gate p b{color:var(--ink,#1a1f1e);font-weight:600}
.pwa-gate p svg{vertical-align:-3px;margin:0 2px;color:var(--accent-2,#0c6f68)}
.pwa-gate-go{width:100%;border:0;border-radius:12px;padding:14px;cursor:pointer;
  font:600 15px/1 inherit;color:#fff;background:var(--accent-2,#0c6f68)}
.pwa-gate-go:active{opacity:.85}
.pwa-gate-re{width:100%;margin-top:10px;border:0;background:transparent;cursor:pointer;
  font:500 13px/1 inherit;color:var(--ink-3,#939c9a);padding:11px;border-radius:10px}
.pwa-gate-re:active{background:var(--line,#ebeeee)}
/* Выход из тупика: если приложение не ставится, отсюда можно написать нам.
   Спокойной ссылкой, а не кнопкой, — она не должна спорить с «уже установил». */
.pwa-gate-help{display:block;margin-top:14px;text-align:center;font-size:13px;
  color:var(--ink-2,#5b6b6b);text-decoration:underline}
.pwa-gate-help:active{color:var(--accent-2,#0c6f68)}