/* PWA extras — loaded AFTER the app's own styles so it can fine-tune them. */

/* ---- Install buttons: hidden until pwa.js says installing is possible ---- */
.install-btn{ display:none; }
html.can-install .install-btn{ display:inline-flex; }
html.can-install .nav-item.install-btn{ display:flex; }
.who .tb-install{ white-space:nowrap; }
@media (max-width: 699px){
  /* the app hides the other top-bar buttons on phones; keep Install visible */
  html.can-install .who .tb-install{ display:inline-flex; min-height:34px; padding:6px 12px; }
}

/* ---- "New version available" bar ---- */
.pwa-update{
  position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:95;
  width:min(560px, calc(100vw - 28px));
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px 12px 18px; border-radius:16px; color:#fff; font-size:13.5px;
  background:linear-gradient(120deg, var(--blue-deep, #0B2257), var(--blue, #1F4FB4));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 14px 34px rgba(11,34,87,.35);
  animation:pwaUp .25s ease-out;
}
.pwa-update-text span{ opacity:.85; }
.pwa-update-actions{ display:flex; align-items:center; gap:6px; }
.pwa-update .btn.light{ background:#fff; color:var(--blue-dark, #153A8A); box-shadow:none; }
.pwa-update-later{ background:none; border:none; color:rgba(255,255,255,.85); font-size:13px; font-weight:600; padding:8px 10px; border-radius:10px; }
.pwa-update-later:hover{ background:rgba(255,255,255,.14); }
@media (max-width: 699px){
  /* sit above the bottom tab bar */
  .pwa-update{ bottom:calc(var(--tabbar-h, 66px) + 12px + env(safe-area-inset-bottom)); }
}
@keyframes pwaUp{ from{ opacity:0; transform:translate(-50%, 10px); } to{ opacity:1; transform:translate(-50%, 0); } }

/* ---- Installed on iPhone/iPad: the status bar overlaps the page ("black-translucent"),
        so keep the blue top bar clear of the notch / clock. Harmless elsewhere (inset = 0). ---- */
.topbar{ padding-top:calc(12px + env(safe-area-inset-top)); }
@media (max-width: 699px){ .topbar{ padding-top:calc(10px + env(safe-area-inset-top)); } }
@media (min-width: 700px){
  .nav{ top:calc(62px + env(safe-area-inset-top)); height:calc(100vh - 62px - env(safe-area-inset-top)); }
}

/* ---- When running as an installed app, stop accidental text selection on buttons ---- */
@media (display-mode: standalone){
  .btn, .tab, .nav-item, .quick, .tile, .chip{ -webkit-user-select:none; user-select:none; }
}

/* ---- Install help pop-ups ---- */
.pwa-help-btns{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.pwa-help .modal a{ color:var(--blue-dark, #153A8A); font-weight:600; }
.pwa-help .modal{ max-height:90vh; overflow-y:auto; }

/* ---- One-time "Install" banner (phones) ---- */
.pwa-banner{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom)); z-index:55;
  width:min(560px, calc(100vw - 24px));
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px;
  background:#fff; border:1px solid var(--line, #DCE4F1); box-shadow:0 16px 40px rgba(11,34,87,.24);
  animation:pwaUp .25s ease-out;
}
body:has(.tabbar) .pwa-banner{ bottom:calc(var(--tabbar-h, 66px) + 12px + env(safe-area-inset-bottom)); }
.pwa-banner img{ border-radius:12px; flex:none; }
.pwa-banner-text{ flex:1; min-width:0; }
.pwa-banner-text b{ display:block; font-size:15px; color:var(--ink, #0F1B33); }
.pwa-banner-text span{ display:block; font-size:12.5px; color:var(--ink-soft, #5A6784); line-height:1.3; margin-top:2px; }
.pwa-banner-actions{ display:flex; flex-direction:column; align-items:stretch; gap:2px; flex:none; }
.pwa-banner-no{ background:none; border:none; color:var(--ink-soft, #5A6784); font-size:12px; font-weight:600; padding:5px 4px; }

/* ---- Arrow that points at Safari's Share button (iPhone / iPad) ---- */
.pwa-arrow{ position:fixed; left:0; right:0; z-index:96; display:flex; flex-direction:column; align-items:center; }
.pwa-arrow.down{ bottom:calc(6px + env(safe-area-inset-bottom)); animation:pwaBounceD 1s ease-in-out infinite; }
.pwa-arrow.up{ top:calc(6px + env(safe-area-inset-top)); align-items:flex-end; padding-right:60px; animation:pwaBounceU 1s ease-in-out infinite; }
.pwa-arrow-text{ background:#153A8A; color:#fff; padding:10px 16px; border-radius:14px; font-size:15px; line-height:1.3; text-align:center; max-width:300px; border:1px solid rgba(255,255,255,.4); box-shadow:0 10px 28px rgba(11,34,87,.45); }
.pwa-arrow svg{ filter:drop-shadow(0 0 3px #fff) drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
@keyframes pwaBounceD{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }
@keyframes pwaBounceU{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }