/* ==========================================================================
   PWA UI: install prompt, iOS hint, update banner, offline indicator.
   All elements are position: fixed and injected/removed by pwa-ui.js.
   ========================================================================== */

/* Install button (floating, bottom-right) */
.pwa-install-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #3b82f6;
  color: white;
  border-radius: 9999px;
  padding: 4px 4px 4px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font: 600 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: pwa-slide-up 0.3s ease-out;
}
.pwa-install-btn__main {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 8px 8px;
  font: inherit;
}
.pwa-install-btn__close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: inherit;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwa-install-btn__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* iOS install hint (floating card, bottom) */
.pwa-ios-hint {
  position: fixed;
  bottom: 20px;
  left: 16px;
  right: 16px;
  max-width: 420px;
  margin: 0 auto;
  z-index: 10000;
  background: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  font: 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: pwa-slide-up 0.3s ease-out;
}
.pwa-ios-hint__inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pwa-ios-hint__text {
  flex: 1;
  line-height: 1.4;
}
.pwa-ios-hint__text strong {
  display: block;
  margin-bottom: 4px;
  color: #60a5fa;
}
.pwa-ios-hint__close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: inherit;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

/* Update banner (top, full width) */
.pwa-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background: #3b82f6;
  color: white;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: 500 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: pwa-slide-down 0.3s ease-out;
}
.pwa-update-banner__reload {
  background: white;
  color: #3b82f6;
  border: none;
  padding: 6px 14px;
  border-radius: 9999px;
  font: 600 13px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
}
.pwa-update-banner__close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
}

/* Offline banner (top thin bar) */
.pwa-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background: #7f1d1d;
  color: white;
  padding: 6px 16px;
  text-align: center;
  font: 13px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: pwa-slide-down 0.3s ease-out;
}

@keyframes pwa-slide-up {
  from { transform: translateY(calc(100% + 40px)); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes pwa-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* On small screens keep the bottom-right controls clear of the mobile header */
@media (max-width: 768px) {
  .pwa-install-btn { bottom: 80px; }
  .pwa-ios-hint { bottom: 80px; }
  .pwa-notify-prompt { bottom: 80px; left: 16px; right: 16px; max-width: none; }
}

/* ==========================================================================
   Post-tutorial notification prompt (shown once on /builder after the tutorial)
   ========================================================================== */
.pwa-notify-prompt {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 360px;
  z-index: 10000;
  background: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  font: 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: pwa-slide-up 0.3s ease-out;
}
.pwa-notify-prompt__title {
  font-weight: 600;
  color: #60a5fa;
  margin-bottom: 6px;
  font-size: 15px;
}
.pwa-notify-prompt__body {
  color: #d1d5db;
  line-height: 1.4;
  margin-bottom: 14px;
}
.pwa-notify-prompt__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.pwa-notify-prompt__enable {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font: 600 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
}
.pwa-notify-prompt__enable:hover { background: #2563eb; }
.pwa-notify-prompt__skip {
  background: transparent;
  color: #9ca3af;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font: 500 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
}
.pwa-notify-prompt__skip:hover { color: #f9fafb; }

/* ==========================================================================
   Settings page: standalone "Workflow notifications" toggle card
   ========================================================================== */
.settings-notifications-card {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  font: 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.settings-notifications-card .section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #f9fafb;
}
.settings-notifications-card .notifications-row {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.settings-notifications-card .notifications-copy { flex: 1; }
.settings-notifications-card .notifications-label {
  font-weight: 500;
  color: #f9fafb;
  margin-bottom: 4px;
}
.settings-notifications-card .notifications-desc {
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.4;
}
.settings-notifications-card .notifications-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 100px;
}
.settings-notifications-card .notifications-btn:hover:not(:disabled) { background: #2563eb; }
.settings-notifications-card .notifications-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.settings-notifications-card .notifications-btn[data-state="on"] {
  background: #374151;
  color: #f9fafb;
}
.settings-notifications-card .notifications-btn[data-state="on"]:hover:not(:disabled) {
  background: #4b5563;
}
.settings-notifications-card .notifications-hint {
  margin-top: 10px;
  font-size: 13px;
  color: #9ca3af;
}
.settings-notifications-card .notifications-hint.is-error { color: #fca5a5; }

/* ---- TWA context (Android Trusted Web Activity) ----------------------- */
/* twa-context.js sets html[data-twa="1"] synchronously in <head> when the
   session entered via the Android app. Purchase CTAs are hidden inside the
   TWA (Play payments policy); informational billing state stays visible.
   .gm-purchase-ui is THE class convention for server-rendered purchase UI
   (the standalone billing templates inline the same rule because they do
   not load this sheet). */
html[data-twa="1"] .gm-purchase-ui {
  display: none !important;
}
/* The header balance chip stays visible (the balance is useful) but must not
   navigate to the billing tab. billing.js also strips its href; this rule
   covers the pre-JS window. */
html[data-twa="1"] #credit-balance {
  pointer-events: none;
  cursor: default;
}
/* Replaces purchase buttons in billing.js-rendered modals/dashboards inside
   the TWA. Lives here (loaded by every pwa_head page) rather than in the
   orphaned billing.css — see backlog B-BILLING-CSS-ORPHANED. */
.billing-twa-notice {
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  margin: 12px 0;
}