@layer components {
  /* Closed until <html> says this device does not receive while another one does, and not offered yet. */
  .push-offer {
    display: none; flex-direction: column; gap: 10px; margin: 12px 16px 4px; padding: 12px 14px;
    background: var(--jx-wait-soft); border: 1px solid var(--jx-wait); border-radius: 12px;
  }

  /* A cached copy cannot activate anything; on the phone the banner belongs to Accueil only. */
  @media (min-width: 1100px) {
    html[data-notifications="true"][data-push-elsewhere="true"]:not([data-offline-copy]):is([data-push-device="not_here"], [data-push-device="install"]):not([data-push-offer="done"]) .push-offer { display: flex; }
  }
  @media (max-width: 1099px) {
    html[data-notifications="true"][data-push-elsewhere="true"]:not([data-offline-copy]):is([data-push-device="not_here"], [data-push-device="install"]):not([data-push-offer="done"]) .app-shell[data-screen="home"] .push-offer { display: flex; }
  }
  .push-offer-head { display: flex; align-items: flex-start; gap: 10px; }
  .push-offer-head > svg { flex: none; margin-top: 1px; color: var(--jx-wait); }
  .push-offer-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .push-offer-title { margin: 0; font-size: var(--text-body); font-weight: 600; }
  .push-offer-lead, .push-offer-failed { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted-foreground); }
  .push-offer-failed { color: var(--foreground); }
  .push-offer-failed[hidden] { display: none; }
  .push-offer-actions { display: flex; gap: 8px; }
  .push-offer-actions .button { min-height: var(--tap); border-radius: 10px; white-space: normal; }
  .push-offer-actions .button--primary { flex: 1; }

  /* The desktop sidebar is 260 px wide: the two buttons stack, each at full width. */
  @media (min-width: 1100px) {
    .push-offer-actions { flex-direction: column; }
    .push-offer-actions .button { width: 100%; }
  }
}