/* ═══════════════════════════════════════════════════════════════
   pwa-install.css — Settings "Install app" button + iOS hint sheet.
   Loaded after styles.css so the button styling sits cleanly inside
   the existing .mb-section / .mb-tools-grid surface.
   ═══════════════════════════════════════════════════════════════ */

#installAppBtn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(232, 163, 61, 0.45);
  background: rgba(232, 163, 61, 0.10);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
#installAppBtn:hover,
#installAppBtn:focus-visible {
  background: rgba(232, 163, 61, 0.18);
  border-color: var(--amber);
  outline: none;
  transform: translateY(-1px);
}
#installAppBtn:active { transform: translateY(0); }
.install-app-emoji {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}
.install-app-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.install-app-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--amber);
}
.install-app-sub {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.35;
}
#installAppStatus {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
  text-align: center;
  min-height: 1.1em;
}

.light-mode #installAppBtn { color: #2a2a2a; }
.light-mode .install-app-sub { color: rgba(0,0,0,0.55); }
.light-mode #installAppStatus { color: rgba(0,0,0,0.5); }

/* ── iOS "Add to Home Screen" hint sheet ─────────────────────── */

.install-ios-hint {
  position: fixed;
  inset: 0;
  z-index: 400;                /* above SeeToSpeak (300), live cam (350) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-sans);
}
.install-ios-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.install-ios-card {
  position: relative;
  width: min(92vw, 420px);
  background: #1a1820;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 22px 22px 18px;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.install-ios-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-ios-close:hover { background: rgba(255, 255, 255, 0.15); }
.install-ios-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--amber);
  margin-bottom: 14px;
  padding-right: 32px;
}
.install-ios-steps {
  margin: 0 0 12px 22px;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}
.install-ios-steps li { margin-bottom: 8px; }
.install-ios-steps strong { color: var(--amber); }
.install-ios-note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
}