:where([data-avatar-user-id][data-avatar-frame]) {
    position: relative;
}
[data-avatar-user-id][data-avatar-frame] {
    overflow: visible !important;
    isolation: isolate;
}
[data-avatar-user-id][data-avatar-frame] > img { border-radius: inherit; }
.avatar-costume-art {
    position: absolute;
    left: -30%;
    top: -32.64%;
    width: 160%;
    height: 160%;
    pointer-events: none;
    z-index: 2;
}
.chat-item-avatar > .avatar-costume-art {
    left: -15%;
    top: -17.64%;
    width: 130%;
    height: 130%;
}
.avatar-costume-art svg,
.avatar-costume-art img { display: block; width: 100%; height: 100%; overflow: visible; object-fit: contain; }
/* A few broad/boxy silhouettes need extra room below the avatar's crown. */
[data-avatar-user-id][data-avatar-frame="hookah"] > .avatar-costume-art,
[data-avatar-user-id][data-avatar-frame="soda"] > .avatar-costume-art,
[data-avatar-user-id][data-avatar-frame="coffin"] > .avatar-costume-art,
[data-avatar-user-id][data-avatar-frame="cheese"] > .avatar-costume-art,
[data-avatar-user-id][data-avatar-frame="devil"] > .avatar-costume-art,
[data-avatar-user-id][data-avatar-frame="pumpkin"] > .avatar-costume-art,
[data-avatar-user-id][data-avatar-frame="pumpkin-suit"] > .avatar-costume-art,
[data-avatar-user-id][data-avatar-frame="cat"] > .avatar-costume-art {
    top: -29.64%;
}
.chat-item-avatar[data-avatar-frame="hookah"] > .avatar-costume-art,
.chat-item-avatar[data-avatar-frame="soda"] > .avatar-costume-art,
.chat-item-avatar[data-avatar-frame="coffin"] > .avatar-costume-art,
.chat-item-avatar[data-avatar-frame="cheese"] > .avatar-costume-art,
.chat-item-avatar[data-avatar-frame="devil"] > .avatar-costume-art,
.chat-item-avatar[data-avatar-frame="pumpkin"] > .avatar-costume-art,
.chat-item-avatar[data-avatar-frame="pumpkin-suit"] > .avatar-costume-art,
.chat-item-avatar[data-avatar-frame="cat"] > .avatar-costume-art {
    top: -14.64%;
}
[data-avatar-user-id][data-avatar-frame="cheese"] > .avatar-costume-art[data-frame="cheese"] { top: -27.64%; }
.chat-item-avatar[data-avatar-frame="cheese"] > .avatar-costume-art[data-frame="cheese"] { top: -12.64%; }
.costume-fitting {
    position: fixed; z-index: 30; top: 64px; left: 50%; transform: translateX(-50%);
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px;
    width: min(560px, calc(100vw - 24px)); padding: 28px 20px 16px;
    color: #e5d9c9; background: #19161ef5; border: 1px solid #74604b; border-radius: 12px;
    font: 14px/1.5 Georgia, serif;
}
.costume-fitting[hidden] { display: none; }
.costume-fitting-active .controls, .costume-fitting-active #selection { display: none; }
.costume-fitting-avatar { width: 64px; height: 64px; border-radius: 50%; background: #786785; display: grid; place-items: center; font: 28px/1.2 sans-serif; flex: none; }
.costume-fitting-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.costume-fitting-copy { flex: 1; min-width: 110px; }
.costume-fitting-status { display: block; font: 12px/1.5 sans-serif; color: #c9b9a9; }
.costume-fitting button { padding: 9px 14px; border-radius: 7px; border: 1px solid #8d7654; color: inherit; background: #382a32; font: inherit; cursor: pointer; min-height: 40px; }
.costume-fitting button:disabled { opacity: .55; cursor: wait; }
.costume-fitting .costume-wear { background: #73533b; }
.costume-fitting button:focus-visible { outline: 2px solid #ecd6a7; outline-offset: 3px; }
@media(max-width:480px) { .costume-fitting { gap: 10px; padding-top: 26px; } .costume-fitting-avatar { width:48px; height:48px; } }

.preview-member-avatar-wrap { display: inline-flex; width: 44px; height: 44px; flex: none; border-radius: 50%; }