/* Chat sender pictures and the online ring.
   One look wherever a profile picture appears (chat bubbles, chat header, inbox, the home row of
   round pictures, the profile page): online pictures get a deep-pink ring that glows and gently
   pulses OUTSIDE the picture, so it never covers the face and never changes the tap area. Offline
   pictures get no ring. With reduced motion the ring stays on without pulsing. */
:root{--mr-on:#ffab2d;--mr-on-soft:#ffd18c;--mr-on-glow:#ffab2d8c}

/* Message rows: a small round picture beside each bubble; mine on the right. */
.mr-message-row{display:flex;align-items:flex-end;gap:8px;width:100%;min-width:0}
.mr-message-row.user{justify-content:flex-end}
.mr-message-row.user .bubble{order:1}
.mr-message-row.user .mr-chat-photo{order:2}
.mr-message-row .bubble{min-width:0;max-width:min(83%,420px)}
.mr-chat-photo{position:relative;display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;margin:0 0 2px;border:0;border-radius:50%;padding:0;background:#fdf5e9;color:#b46c23;font-size:13px;font-weight:900;line-height:1;overflow:visible}
.mr-chat-photo img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.mr-chat-photo-link{cursor:pointer}
/* A 44px touch target around the small picture without making it look bigger. */
.mr-chat-photo-link::before{content:"";position:absolute;inset:-7px;border-radius:50%}
.mr-chat-photo-link:focus-visible{outline:3px solid #147fe5;outline-offset:3px}
#chatAvatar.mr-chat-photo-link{cursor:pointer}

/* The ring itself. */
.mr-on-ring,.thread img.mr-on-ring,#chatAvatar.mr-on-ring,.mr-ring.mr-on-ring,.pf .pf-avatar.on,.pc-avatar.on{
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mr-on),0 0 9px 3px var(--mr-on-glow);
  animation:mrOnPulse 1.4s ease-in-out infinite alternate}
.mr-ring.mr-on-ring{border-color:var(--mr-on)}
/* The old green dot is replaced by the ring, so online looks the same everywhere. */
.pf .pf-avatar.on::after,.pc-avatar.on::after{display:none}
@keyframes mrOnPulse{
  from{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mr-on),0 0 5px 1px #ffab2d55}
  to{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mr-on-soft),0 0 15px 5px #ffab2dcc}}
@media (prefers-reduced-motion:reduce){
  .mr-on-ring,.thread img.mr-on-ring,#chatAvatar.mr-on-ring,.mr-ring.mr-on-ring,.pf .pf-avatar.on,.pc-avatar.on{animation:none}}