@layer components {
  /* A dot at the avatar's bottom right: a disc online, a ring away, nothing offline. Its cutout takes the colour of
     what lies behind (--presence-cutout, set by each place). */
  .presence {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    --presence-cutout: var(--background); --presence-dot: 7px; --presence-ring: 2px; --presence-inset: 0px;
  }
  .presence--xl { --presence-dot: 13px; --presence-ring: 2.5px; --presence-inset: 2px; }
  .presence--sm { --presence-dot: 6px; --presence-ring: 1.5px; --presence-inset: 0.5px; }
  .presence-avatar { position: relative; display: inline-flex; flex: none; }
  .presence-avatar::after {
    content: ""; display: none; position: absolute; right: var(--presence-inset); bottom: var(--presence-inset);
    width: var(--presence-dot); height: var(--presence-dot); box-sizing: border-box; border-radius: 999px;
    box-shadow: 0 0 0 var(--presence-ring) var(--presence-cutout);
  }
  .presence[data-presence="online"] > .presence-avatar::after { display: block; background: var(--jx-ok); }
  .presence[data-presence="away"] > .presence-avatar::after {
    display: block; background: var(--presence-cutout); border: 1.5px solid var(--muted-foreground);
  }

  /* The word of the current state only: for screen readers, or shown after the dot in a header. */
  .presence-label { display: none; }
  .presence[data-presence="online"] > .presence-label[data-state="online"],
  .presence[data-presence="away"] > .presence-label[data-state="away"],
  .presence[data-presence="offline"] > .presence-label[data-state="offline"] {
    display: inline; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .presence--labelled { --presence-dot: 8px; --presence-ring: 0px; }
  .presence--labelled > .presence-avatar { width: var(--presence-dot); height: var(--presence-dot); }
  .presence--labelled[data-presence="offline"] > .presence-avatar { display: none; }
  .presence.presence--labelled[data-presence] > .presence-label[data-state] {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    font-size: 13px; color: var(--muted-foreground);
  }

  /* Cutouts: the sidebar, its hovered or current row. The header and the panel keep the page background. */
  .app-sidebar .presence { --presence-cutout: var(--sidebar); }
  .sidebar-link:is(:hover, :active) .presence, .sidebar-link[aria-current="page"] .presence,
  .sidebar-me:is(:hover, :active, .is-current, [aria-expanded="true"]) .presence { --presence-cutout: var(--sidebar-accent); }
  /* The mobile screens paint the sidebar with the page background; hovered and current rows keep their own. */
  @media (max-width: 1099px) {
    :where(.app-shell[data-screen]) .app-sidebar .presence { --presence-cutout: var(--background); }
  }
}