/*
 * pwa.css — feature auth-pwa (spec 02 §9.4, §10.1).
 * "保存到桌面" install card (#pwaInstallPrompt, z 4300) and the pull-to-refresh pill
 * (#pullRefresh, z 420). `is-guide` and `data-mode` have no CSS (faithful); the card
 * appears/disappears without animation. Values verbatim from the spec.
 */

/* ---------------------------- install card ---------------------------- */
.pwa-install {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4300;
  display: flex;
  justify-content: center;
  padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  pointer-events: none;
}

.pwa-install[hidden] {
  display: none;
}

.pwa-install-card {
  position: relative;
  width: min(100%, 460px);
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(245, 216, 142, .52);
  border-radius: 16px;
  background: linear-gradient(180deg, #182b44fa, #08111ffc), radial-gradient(circle at 8% 0, rgba(95, 211, 255, .18), transparent 120px);
  box-shadow: inset 0 1px #ffffff14, 0 18px 44px #0000007a, 0 0 24px #5bc5ff1f;
  pointer-events: auto;
}

.pwa-install-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  box-shadow: 0 8px 18px #00000057, 0 0 0 1px #f5d88e47;
}

.pwa-install-copy {
  min-width: 0;
  padding-right: 24px;
}

.pwa-install-copy strong {
  display: block;
  color: #fff7df;
  font-size: 17px;
  line-height: 1.2;
}

.pwa-install-copy p {
  margin: 4px 0 0;
  color: #d9e4f4d1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.pwa-install-close {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff14;
  color: #fff7dfd6;
  font-size: 18px;
  line-height: 1;
}

.pwa-install-steps {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 8px 10px 8px 30px;
  border: 1px solid rgba(100, 199, 255, .18);
  border-radius: 10px;
  background: #040c186b;
  color: #ecf4ffd6;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.pwa-install-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: .72fr 1fr;
  gap: 8px;
}

.pwa-install-actions button {
  min-height: 38px;
  border-radius: 11px;
  font-size: 13px;
}

.pwa-install-later {
  border-color: #7999c257;
  background: #1a293fdb;
  color: #deeafadb;
  box-shadow: none;
}

.pwa-install-button {
  border-color: #ffeba0bd;
  background: linear-gradient(180deg, #fff4be47, #8152191a), linear-gradient(180deg, #8f692d, #453016);
}

/* --------------------------- pull to refresh -------------------------- */
/* opacity uses a length ÷ length calc; where unsupported the pill stays opaque (kept as is). */
.pull-refresh {
  position: fixed;
  left: 50%;
  top: max(8px, env(safe-area-inset-top));
  z-index: 420;
  min-width: 112px;
  height: 34px;
  border: 1px solid rgba(124, 212, 255, .42);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1a324ef5, #071322fa), radial-gradient(circle at 50% 0, rgba(245, 216, 142, .2), transparent 72%);
  color: #dcf4ff;
  font-size: 13px;
  font-weight: 850;
  box-shadow: inset 0 1px #ffffff14, 0 10px 28px #00000061;
  opacity: min(1, calc(var(--pull-distance, 0px) / 42px));
  pointer-events: none;
  transform: translate(-50%, calc(-46px + var(--pull-distance, 0px)));
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}

.pull-refresh[hidden] {
  display: none;
}

.pull-refresh.is-ready,
.pull-refresh.is-refreshing {
  border-color: #f5d88eb8;
  color: #fff2bf;
}

/* Spinner (keyframes roomLoadingSpin live in base.css). */
.pull-refresh.is-refreshing:before {
  content: "";
  width: 13px;
  height: 13px;
  margin-right: 6px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: #ffe59a;
  border-radius: 50%;
  animation: roomLoadingSpin .82s linear infinite;
}

.pull-refresh.is-refreshing {
  grid-auto-flow: column;
  gap: 0;
}

/* Manxiang Android shell: never show the install card (spec 02 §12.2). */
body.is-manxiang-app .pwa-install {
  display: none !important;
}