/* "Connected now": a green ring that beats like a heart around an avatar. Any avatar drawn by avatarHtml()
   (class .pj-av) or the header's own (.user-avatar) carries data-uid and gets .is-online while that person's
   ChemLib is open and visible (core/presence.py). Use the same class on a future avatar and it works. */
.pj-av.is-online,.user-avatar.is-online{--pr:var(--green);outline:2px solid color-mix(in srgb,var(--pr) 60%,transparent);outline-offset:1px;animation:presence-beat var(--mo-loop) ease-in-out infinite}
/* Subtle on purpose: nothing grows or moves — only the ring's opacity swells and fades into the background, twice and
   then a long rest, like a quiet heartbeat. */
@keyframes presence-beat{
  0%,100%{outline-color:color-mix(in srgb,var(--pr) 22%,transparent)}
  12%{outline-color:color-mix(in srgb,var(--pr) 72%,transparent)}
  26%{outline-color:color-mix(in srgb,var(--pr) 30%,transparent)}
  38%{outline-color:color-mix(in srgb,var(--pr) 60%,transparent)}
  54%{outline-color:color-mix(in srgb,var(--pr) 22%,transparent)}
}
@media (prefers-reduced-motion:reduce){.pj-av.is-online,.user-avatar.is-online{animation:none;outline-color:color-mix(in srgb,var(--pr) 55%,transparent)}}
/* While their status blocks notifications the ring is red instead of green (the person is here but not to be bothered). */
/* It does not beat: a beat says "here and available", a still ring says "here, do not disturb". */
.pj-av.is-online.is-paused,.user-avatar.is-online.is-paused{--pr:var(--red);animation:none;outline-color:color-mix(in srgb,var(--pr) 55%,transparent)}

/* A person's status as a small badge on their avatar (from 20 px up; the data-st attribute is kept by core.js), and
   as a line of text in lists that show their name. The ring above and this badge are both drawn from the same
   poll, so an avatar built from nothing but {id, name} gets them too. */
.pj-av[data-st]{position:relative;overflow:visible}
.pj-av[data-st] img{border-radius:50%}
.pj-av[data-st]::after{content:attr(data-st);position:absolute;right:calc(var(--av-sz,24px) * -.12);bottom:calc(var(--av-sz,24px) * -.12);font-size:max(9px,calc(var(--av-sz,24px) * .42));line-height:1;padding:1px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px var(--border2);letter-spacing:0;font-weight:400;pointer-events:none}
.pj-stline{display:block;font-size:var(--ui-caption);color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pj-stline[hidden]{display:none}