/* HeartLink v89 — one story-ring rule everywhere profile photos are shown.
   No active story = no ring. Unseen = blue/cyan. Seen = dark grey.
   Bottom/top navigation profile icons never receive a story ring. */

.hl-story-global{
  box-sizing:border-box!important;
  border-radius:50%!important;
  outline:0!important;
}

/* No active story: explicitly remove old pink/white/purple story borders. */
.hl-story-global.hl-story-ring-none{
  border:0!important;
  outline:0!important;
  box-shadow:0 6px 18px rgba(0,0,0,.20)!important;
}

/* Active + unseen: the old HeartLink blue/cyan family, no pink. */
.hl-story-global.hl-story-ring-unseen{
  border:0!important;
  outline:0!important;
  box-shadow:
    0 0 0 2px #090b0f,
    0 0 0 4px #3b82f6,
    0 0 0 5px rgba(34,211,238,.72),
    0 7px 20px rgba(0,0,0,.26)!important;
}

/* Active + already seen. */
.hl-story-global.hl-story-ring-seen{
  border:0!important;
  outline:0!important;
  box-shadow:
    0 0 0 2px #090b0f,
    0 0 0 4px #3c4149,
    0 7px 20px rgba(0,0,0,.22)!important;
}

/* Profile hero uses a real ring element instead of a theme-sensitive shadow.
   This survives late-loaded profile skins and mobile browser repainting. */
html body.hlv401-profile-body .hlp33-avatar-shell>.hl-profile-story-ring{
  display:block!important;
  position:absolute!important;
  z-index:5!important;
  top:50%!important;
  left:50%!important;
  width:calc(100% + 6px)!important;
  height:calc(100% + 6px)!important;
  transform:translate(-50%,-50%)!important;
  border:2px solid #3b82f6!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  background:transparent!important;
  pointer-events:none!important;
}
html body.hlv401-profile-body .hlp33-avatar-shell>.hl-profile-story-ring.is-unseen{
  border-color:#3b82f6!important;
  box-shadow:none!important;
}
html body.hlv401-profile-body .hlp33-avatar-shell>.hl-profile-story-ring.is-seen{
  border-color:#3b82f6!important;
  box-shadow:none!important;
}
html body.hlv401-profile-body .hlp33-avatar-shell>.hl-profile-story-hit{
  display:block!important;
  position:absolute!important;
  z-index:4!important;
  inset:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* Never show a story ring on the Profile icon inside navigation. */
.hl-story-nav-no-ring,
nav .hl-story-global,
#hlGlobalBottomNav .hl-story-global,
.hl76-global-nav .hl-story-global,
.hl72-nav-item .hl-story-global,
.app-bottom-nav .hl-story-global{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* Normalize places that already carry server-side story-state classes. */
html body .hl-avatar.story-unseen,
html body .hl-story-card.has-story.story-unseen .hl-story-avatar,
html body .hlv51-meta-avatar.hl-story-ring-unseen{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:
    0 0 0 2px #090b0f,
    0 0 0 4px #3b82f6,
    0 0 0 5px rgba(34,211,238,.72)!important;
}
html body .hl-avatar.story-seen,
html body .hl-story-card.has-story.story-seen .hl-story-avatar,
html body .hlv51-meta-avatar.hl-story-ring-seen{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:0 0 0 2px #090b0f,0 0 0 4px #3c4149!important;
}

/* Profile page used to have a permanent white/purple halo. v89 makes it story-aware. */
html body .hlp33-avatar.hl-story-ring-none{
  border:0!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
}
html body .hlp33-avatar.hl-story-ring-unseen{
  border:0!important;
  box-shadow:0 0 0 2px #090b0f,0 0 0 5px #3b82f6,0 0 0 6px rgba(34,211,238,.70),0 12px 30px rgba(0,0,0,.30)!important;
}
html body .hlp33-avatar.hl-story-ring-seen{
  border:0!important;
  box-shadow:0 0 0 2px #090b0f,0 0 0 5px #3c4149,0 12px 30px rgba(0,0,0,.26)!important;
}

/* Final component-specific rules. These intentionally mirror the selectors
   used by the late-loaded profile/chat themes so story state wins the cascade. */
html body.hlv401-profile-body .hlp33-avatar.hl-story-ring-unseen{
  box-shadow:0 0 0 2px #090b0f,0 0 0 5px #3b82f6,0 0 0 6px rgba(34,211,238,.72),0 12px 30px rgba(0,0,0,.30)!important;
}
html body.hlv401-profile-body .hlp33-avatar.hl-story-ring-seen{
  box-shadow:0 0 0 2px #090b0f,0 0 0 5px #3c4149,0 12px 30px rgba(0,0,0,.26)!important;
}

/* Comment themes load after this file and intentionally clear all avatar
   shadows. State-specific selectors include the same sheet id plus extra
   classes so real story rings win without restoring decorative fake rings. */
html body.hl-home-v71.hl79-comments-open #hlc84CommentSheet .hlc84-avatar.hl-story-global.hl-story-ring-unseen,
html body.hl-home-v71.hl79-comments-open #hlc84CommentSheet .hlc84-composer-avatar.hl-story-global.hl-story-ring-unseen{
  border:0!important;
  overflow:visible!important;
  box-shadow:0 0 0 2px #080910,0 0 0 4px #3b82f6,0 0 0 5px rgba(34,211,238,.78)!important;
}
html body.hl-home-v71.hl79-comments-open #hlc84CommentSheet .hlc84-avatar.hl-story-global.hl-story-ring-seen,
html body.hl-home-v71.hl79-comments-open #hlc84CommentSheet .hlc84-composer-avatar.hl-story-global.hl-story-ring-seen{
  border:0!important;
  overflow:visible!important;
  box-shadow:0 0 0 2px #080910,0 0 0 4px #3c4149!important;
}
html body .hl-chat-app.list-view .hl-person-row .hl-avatar.story-unseen,
html body .hl-chat-app.list-view .hl-person-row .hl-avatar.hl-story-ring-unseen{
  border:0!important;
  outline:0!important;
  overflow:visible!important;
  box-shadow:0 0 0 2px #000,0 0 0 4px #3b82f6,0 0 0 5px rgba(34,211,238,.72)!important;
}
html body .hl-chat-app.list-view .hl-person-row .hl-avatar.story-seen,
html body .hl-chat-app.list-view .hl-person-row .hl-avatar.hl-story-ring-seen{
  border:0!important;
  outline:0!important;
  overflow:visible!important;
  box-shadow:0 0 0 2px #000,0 0 0 4px #3c4149!important;
}
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-unseen,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.hl-story-ring-unseen{
  border:0!important;
  outline:0!important;
  padding:3px!important;
  overflow:hidden!important;
  background:conic-gradient(from 220deg,#22d3ee,#3b82f6 42%,#6d5dfc 72%,#22d3ee)!important;
  box-shadow:none!important;
}
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-seen,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.hl-story-ring-seen{
  border:0!important;
  outline:0!important;
  padding:3px!important;
  overflow:hidden!important;
  background:#3c4149!important;
  box-shadow:none!important;
}
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-unseen>img,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-unseen>i,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-seen>img,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-seen>i,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.hl-story-ring-unseen>img,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.hl-story-ring-seen>img{
  border:2px solid #0a0e13!important;
  box-sizing:border-box!important;
}
html body .hl-chat-app.conversation-view .hl-message-avatar.hl-story-ring-unseen{
  padding:2px!important;
  border:0!important;
  overflow:hidden!important;
  background:#3b82f6!important;
  box-shadow:none!important;
}
html body .hl-chat-app.conversation-view .hl-message-avatar.hl-story-ring-seen{
  padding:2px!important;
  border:0!important;
  overflow:hidden!important;
  background:#3c4149!important;
  box-shadow:none!important;
}
html body .hl-chat-app.conversation-view .hl-message-avatar.hl-story-ring-unseen>img,
html body .hl-chat-app.conversation-view .hl-message-avatar.hl-story-ring-seen>img{
  border:1.5px solid #0a0e13!important;
  box-sizing:border-box!important;
}

/* v270 canonical ring component.
   Every non-navigation DP uses the same 2px gap + 2px state ring. */
html body .hl-profile-story-ring{
  display:none!important;
}
html body .hl-story-global.hl-story-ring-unseen,
html body .hl-avatar.story-unseen,
html body .hl-story-card.has-story.story-unseen .hl-story-avatar,
html body .hlv51-meta-avatar.hl-story-ring-unseen,
html body .hlc84-avatar.hl-story-ring-unseen,
html body .hlc84-composer-avatar.hl-story-ring-unseen,
html body .hl-chat-app .hl-avatar.hl-story-ring-unseen,
html body .hl-chat-app .hl-message-avatar.hl-story-ring-unseen{
  border:0!important;
  outline:0!important;
  box-shadow:0 0 0 2px #090b0f,0 0 0 4px #3b82f6!important;
}
html body .hl-story-global.hl-story-ring-seen,
html body .hl-avatar.story-seen,
html body .hl-story-card.has-story.story-seen .hl-story-avatar,
html body .hlv51-meta-avatar.hl-story-ring-seen,
html body .hlc84-avatar.hl-story-ring-seen,
html body .hlc84-composer-avatar.hl-story-ring-seen,
html body .hl-chat-app .hl-avatar.hl-story-ring-seen,
html body .hl-chat-app .hl-message-avatar.hl-story-ring-seen{
  border:0!important;
  outline:0!important;
  box-shadow:0 0 0 2px #090b0f,0 0 0 4px #3c4149!important;
}
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.hl-story-ring-unseen,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.hl-story-ring-seen,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-unseen,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-seen,
html body .hl-chat-app.conversation-view .hl-message-avatar.hl-story-ring-unseen,
html body .hl-chat-app.conversation-view .hl-message-avatar.hl-story-ring-seen{
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  filter:none!important;
}
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-unseen>img,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-unseen>i,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-seen>img,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.story-seen>i,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.hl-story-ring-unseen>img,
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar.hl-story-ring-seen>img,
html body .hl-chat-app.conversation-view .hl-message-avatar.hl-story-ring-unseen>img,
html body .hl-chat-app.conversation-view .hl-message-avatar.hl-story-ring-seen>img{
  border:0!important;
  border-radius:50%!important;
}
html body nav .hl-story-global,
html body #hlGlobalBottomNav .hl-story-global,
html body .hl76-global-nav .hl-story-global,
html body .hl72-nav-item .hl-story-global,
html body .app-bottom-nav .hl-story-global{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}