/* One avatar primitive across feed, profile, Markets and chat. Image size stays
   stable; rings and LIVE are independent layers without layout animation. */
.creator-avatar{--avatar-size:var(--avatar-base-size,36px);--avatar-ring-width:2px;--avatar-ring-gap:2px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--avatar-size);height:var(--avatar-size);min-width:var(--avatar-size);min-height:var(--avatar-size);padding:0;border:0;border-radius:50%;background:transparent;vertical-align:middle;isolation:isolate;overflow:visible;touch-action:manipulation;line-height:1}
.creator-avatar.has-ring{width:calc(var(--avatar-size) + 2*(var(--avatar-ring-width) + var(--avatar-ring-gap)));height:calc(var(--avatar-size) + 2*(var(--avatar-ring-width) + var(--avatar-ring-gap)));min-width:calc(var(--avatar-size) + 2*(var(--avatar-ring-width) + var(--avatar-ring-gap)));min-height:calc(var(--avatar-size) + 2*(var(--avatar-ring-width) + var(--avatar-ring-gap)))}
.creator-avatar-small{--avatar-ring-width:1.5px}
.creator-avatar>img,.creator-avatar>.creator-avatar-fallback{position:relative;z-index:1;display:block;width:var(--avatar-size);height:var(--avatar-size);min-width:var(--avatar-size);border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06);pointer-events:none}
.creator-avatar-fallback{display:grid!important;place-items:center;color:var(--muted)}.creator-avatar-fallback svg{width:48%;height:48%;stroke-width:1.6;fill:none;stroke:currentColor}
.creator-avatar-ring{position:absolute;inset:0;z-index:0;border:var(--avatar-ring-width) solid transparent;border-radius:50%;pointer-events:none}
.creator-avatar.has-story:not(.story-seen)>.creator-avatar-ring,.creator-avatar.is-live>.creator-avatar-ring{border-color:var(--accent)}
.creator-avatar.has-story.story-seen:not(.is-live){--avatar-ring-width:1px}.creator-avatar.has-story.story-seen:not(.is-live)>.creator-avatar-ring{border-color:rgba(255,255,255,.28)}
.creator-avatar.is-live>.creator-avatar-ring{animation:creator-live-ring 2s ease-in-out infinite}
.creator-avatar-live{position:absolute;z-index:2;left:50%;bottom:-3px;transform:translateX(-50%);display:block;padding:2px 6px;border:0;border-radius:999px;background:var(--accent);color:white;font-family:var(--font);font-size:9px;font-weight:700;letter-spacing:.25px;line-height:11px;white-space:nowrap;pointer-events:none}
.creator-avatar-live[hidden]{display:none!important}
.creator-avatar-small>.creator-avatar-live{font-size:8px;line-height:10px;padding:1px 4px;bottom:-3px;border-width:0}
.creator-badge-button{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;min-width:24px;min-height:24px;padding:0;border:0;border-radius:50%;background:transparent;vertical-align:middle;color:var(--accent);line-height:1;touch-action:manipulation}
.creator-badge-button>svg{display:block;width:var(--creator-badge-size,14px);height:var(--creator-badge-size,14px);overflow:visible;pointer-events:none}
.creator-badge-button circle{fill:currentColor;stroke:none}.creator-badge-button path{fill:none;stroke:white;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.creator-badge-popover{position:absolute;z-index:95;max-width:min(280px,calc(100% - 24px));padding:11px 14px;border:0;border-radius:14px;background:var(--bg,#0E0E10);box-shadow:0 6px 20px #0003;color:var(--text);font-size:13px;line-height:19px}
.creator-badge-popover p{margin:0}.creator-badge-popover:focus-visible{outline:2px solid var(--accent)}
@keyframes creator-live-ring{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.creator-avatar.is-live>.creator-avatar-ring{animation:none}}
/* These contextual viewers are clearly local previews, not a live service. */
.creator-viewer-layer{position:absolute;inset:0;z-index:90;isolation:isolate;background:var(--bg,#0E0E10);color:var(--text)}
.creator-viewer-dialog{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;outline:none}
.creator-viewer-header{position:absolute;z-index:4;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(var(--safe-top,0px) + 18px) 16px 18px;background:linear-gradient(#000b,transparent)}
.creator-viewer-header>div{flex:1;min-width:0}.creator-viewer-header strong{display:block;font-size:14px;font-weight:600;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.creator-viewer-header small{display:block;font-size:11px;line-height:17px;color:#FFFFFFBA}.creator-viewer-header>img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.creator-viewer-close{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;background:#0003;color:white}.creator-viewer-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.creator-story-progress{position:absolute;z-index:5;top:calc(var(--safe-top,0px) + 8px);left:12px;right:12px;display:flex;gap:3px}.creator-story-progress span{height:2px;flex:1;border-radius:2px;background:#FFFFFF3D}.creator-story-progress span[aria-current=true]{background:#FFFFFFE5}.creator-story-progress span.is-seen{background:#FFFFFFAA}
.creator-viewer-media{position:relative;flex:1;min-height:0;display:grid;place-items:center;background:var(--bg,#0E0E10)}.creator-viewer-media img,.creator-viewer-media video{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.creator-viewer-media video{position:absolute;inset:0}.creator-viewer-media img{position:absolute;inset:0}
.creator-viewer-footer{position:absolute;z-index:4;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 16px calc(var(--safe-bottom,0px) + 20px);background:linear-gradient(transparent,#000c)}
.creator-viewer-note{margin:0;max-width:230px;font-size:12px;line-height:18px;color:#FFFFFFBF}.creator-viewer-control{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:44px;padding:0 14px;border:0;border-radius:22px;background:#FFFFFF12;color:white;font:500 13px var(--font);white-space:nowrap}.creator-viewer-control svg{width:17px;height:17px;stroke-width:1.8}
.creator-viewer-nav{position:absolute;inset:90px 0 110px;display:flex;z-index:2}.creator-viewer-nav button{flex:1;border:0;background:transparent;padding:0;min-width:0;outline-offset:-4px}.creator-viewer-nav button:first-child{flex:.35}
.creator-viewer-footer .creator-viewer-actions{display:flex;gap:6px}.creator-viewer-layer [hidden]{display:none!important}
@media(max-width:340px){.creator-viewer-header{padding-left:12px;padding-right:12px}.creator-viewer-footer{padding-left:12px;padding-right:12px;gap:6px}.creator-viewer-note{font-size:11px;max-width:185px}.creator-viewer-control{font-size:12px;padding:0 11px}}