@layer components {
  /* The state lines carry [hidden] until the page knows the browser's permission. */
  .notifications-card [hidden] { display: none; }
  .notifications-switch-form { margin: 0; }
  .notifications-states { margin: 0; }
  /* Receiving here: the line is empty, so it leaves the flow but stays a live region. */
  .notifications-states:has(> .notifications-state--active:not([hidden])) { position: absolute; margin: 0; }
  .notifications-state {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;
    font-size: 14px; line-height: 1.45; color: var(--muted-foreground);
  }
  .notifications-state p, .notifications-state .push-unblock { margin: 0; }
  /* Not receiving here: a warm box, the gesture under the sentence at full width. */
  .notifications-state--not_here {
    flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; color: var(--foreground);
    background: var(--jx-wait-soft); border: 1px solid var(--jx-wait); border-radius: 10px;
  }
  .notifications-state--not_here .button { width: 100%; min-height: var(--tap); }
  .notifications-state--active { color: var(--jx-ok); }
  .notifications-state--blocked, .notifications-state--taken, .notifications-state--failed { color: var(--foreground); }
  .notifications-state--blocked { flex-direction: column; align-items: flex-start; gap: 4px; }
  html[data-offline-copy] .notifications-state--not_here .button { display: none; }
  .notifications-head { display: flex; align-items: flex-start; gap: 12px; }
  .notifications-sound { margin-top: 12px; }
  .notifications-sound[hidden] { display: none; }
  .notifications-head .notifications-switch-form { flex: 1; min-width: 0; }
  .notifications-when-panel { padding: 16px; border-radius: var(--radius-md); background: var(--muted); }
  .notifications-when-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
  .notifications-when { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .notifications-when li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
  .notifications-when svg, .notifications-note svg { flex: none; color: var(--muted-foreground); }
  .notifications-unavailable { margin: 0 0 12px; color: var(--muted-foreground); }
  .notifications-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--muted-foreground);
  }
  .notifications-note svg { margin-top: 2px; }
  .notifications-empty { margin: 16px 0 0; color: var(--muted-foreground); }
  .notifications-browsers { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; }
  .notifications-browser .account-row__title { overflow-wrap: anywhere; }
  .notifications-test { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .notifications-test form { margin: 0; }
  /* « Ne plus prévenir » is a barred bell on the phone: the text stays for assistive technologies. */
  .notifications-remove__icon { display: none; }
  @media (max-width: 767px) {
    .notifications-remove__icon { display: inline-flex; }
    .notifications-remove__text {
      position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .notifications-remove { min-width: var(--tap); min-height: var(--tap); justify-content: center; }
  }
  .notifications-browser form { margin: 0; }
}