/* install-prompt.css — the public app's own install sheet. Mirrors
   frontend/teams/teams.css's install-sheet rules (same shape, own class
   prefix so nothing here can collide with the Teamwork app's sheet, which
   lives on its own page and never shares a DOM with this one anyway).
   Uses the base app's own tokens from css/app.css; nothing here redefines
   a colour token. Phone first (375×812), then desk. */

.asg-install-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above the opening/status screen and the account overlay (both z-index
     90 in css/app.css, css/opening.css, css/account.css) so the sheet is
     reachable on first visit rather than sitting hidden behind them; still
     below the NDA wall (z-index 400, css/wall.css) — a legal-consent gate
     always outranks an install nudge. */
  z-index: 150;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) 12px;
  display: flex;
  justify-content: center;
}

.asg-install-card {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg);
  padding: 12px;
}

.asg-install-icon img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }

.asg-install-copy { flex: 1 1 auto; min-width: 0; }
.asg-install-title { font-weight: 700; font-size: 14px; color: var(--text); }
.asg-install-text { font-size: 12px; color: var(--text-muted); }

.asg-install-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.asg-install-actions .asg-install-btn {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: var(--radius-md, 12px);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
  white-space: nowrap;
  cursor: pointer;
}
.asg-install-actions .asg-install-btn-primary {
  background: var(--accent);
  color: var(--accent-contrast, var(--bg));
  border-color: var(--accent);
}

.asg-install-ios-arrow {
  position: fixed;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  color: var(--accent);
  z-index: 151;
  animation: asg-install-arrow-bounce 1.2s ease-in-out infinite;
}

@keyframes asg-install-arrow-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

/* iPad Share-button arrow lives top-right instead of bottom-centre. */
.asg-install-ios-arrow.ipad {
  bottom: auto;
  top: 10px;
  left: auto;
  right: 60px;
  transform: none;
}
@keyframes asg-install-arrow-bounce-ipad {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.asg-install-ios-arrow.ipad { animation-name: asg-install-arrow-bounce-ipad; }

/* ---------- desk width ---------- */

@media (min-width: 900px) {
  .asg-install-sheet { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ---------- phone-first hard rules (kept at the end, !important where a
   desktop rule would otherwise win — canon §13) ---------- */

@media (max-width: 480px) {
  .asg-install-card { flex-wrap: wrap; }
  .asg-install-actions { flex-direction: row; width: 100%; }
  .asg-install-actions .asg-install-btn { flex: 1 1 0; }
}