.person .person-identity{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.person .person-identity .person-name{flex:none;max-width:100%;min-width:0}
.person .member-typing{display:block;font:11px/1.4 Tahoma,Arial,sans-serif;color:#187d49;white-space:nowrap;direction:rtl;text-align:start}
.person .member-typing[hidden]{display:none!important}
@media(max-width:750px){.show-mobile-members .person .person-identity{min-height:40px}.show-mobile-members .person .member-typing{font-size:12px}}
@media(max-width:750px){.show-mobile-members #people{touch-action:pan-y pinch-zoom}}

.person .person-name-line{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:5px;direction:ltr;min-width:0;max-width:100%;width:100%}.person .person-name-line .person-name{flex:0 1 auto;min-width:0}.person .person-name-line .member-media{display:inline-flex;flex:none;flex-wrap:nowrap;align-items:center;margin:0}

/* Keep all member indicators immediately to the physical right of the name. */
.person .person-name-line>.person-state{display:inline-flex;flex:none;align-items:center;gap:3px;margin:0;order:0;direction:ltr}
.person .person-name-line>.name-kind-mark{position:static!important;inset:auto!important;transform:none!important;flex:none;margin:0!important;order:0}

/* Reserve a single horizontal strip for the name and its indicators. */
#people .person{padding-right:8px!important}
#people .person .person-name-line{column-gap:7px;flex-wrap:nowrap;overflow:visible}
#people .person .person-name-line .person-name{order:0;font-size:var(--roster-name-size,14px)!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;line-height:1.4}
#people .person .person-name-line>.name-kind-mark{order:1;margin-left:4px!important}
#people .person .person-name-line>.member-media{order:2}
#people .person .person-name-line>.person-state{order:3}
#people .person .person-name-line>.person-name+.member-media{margin-left:4px}
#people .person .person-name-line:has(>.name-kind-mark)>.member-media{margin-left:0}

/* Indicators read from the far right: crown, microphone, camera, mute, status. */
#people .person .person-name-line>.name-kind-mark{order:3;margin-left:0!important}
#people .person .person-name-line>.member-media{order:2;flex-direction:row-reverse;margin-left:0}
#people .person .person-name-line>.person-state{order:1;flex-direction:row-reverse}
#people .person .person-name-line .member-mic-stack{order:0}
#people .person .person-name-line .member-media>img[src$="camera.jpg"]{order:1}
#people .person .person-name-line .member-media>img[src$="muted.jpg"]{order:2}

/* A fixed roster size; long names scroll in their own single-line space. */
#people .person .person-name-line .person-name{font-size:20px!important;flex:0 1 auto;white-space:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin;text-overflow:clip!important;touch-action:pan-x}
#people .roster-profile-image{display:block;width:32px;height:32px;object-fit:cover;border-radius:4px}
.bubble .name-tag,.bubble .name-tag .chat-name-label{font-size:20px!important;white-space:nowrap!important}

/* The name fills the remaining space; indicators stay at the row's right edge. */
#people .person .person-name-line .person-name{flex:1 1 0}
@media(min-width:751px){#people .person .person-name-line .person-name{font-size:16px!important}}

/* Room for the name, its mood and a correctly sized decorative background. */
#people .person{height:auto!important;min-height:66px;flex:0 0 auto;box-sizing:border-box;padding:8px!important;align-items:center}
#people .person .person-identity{gap:4px;align-self:stretch;box-sizing:border-box}
#people .person.has-name-background .person-identity{min-height:58px;padding-block:6px;background-position:center;background-repeat:no-repeat;background-size:100% 100%;border-radius:5px}
#people .person .member-mood{display:block;width:100%;max-width:100%;font:13px/1.5 Tahoma,Arial,sans-serif;color:#3f5358;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
#people .person .member-mood[hidden]{display:none!important}
#people .person .avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;cursor:zoom-in}
#people .person .avatar img{width:42px;height:42px;max-width:42px;max-height:42px;object-fit:cover;border-radius:4px}
#people .person .avatar .avatar-sprite{transform:none;margin:0}
#messages .message-avatar{width:52px!important;height:52px!important;max-width:52px;max-height:52px;flex:0 0 52px;object-fit:cover;cursor:zoom-in;border-radius:4px}
.bubble .bubble-content{max-width:calc(100% - 54px)!important}
@media(min-width:751px){.desktop-grid{grid-template-columns:min(340px,42vw) minmax(0,1fr)}}
@media(max-width:750px){#people .person{min-height:78px}#people .person.has-name-background .person-identity{min-height:66px}#people .person .member-mood{font-size:14px}}

#people .person[data-guest=true] .person-name{color:#000!important}

/* Listening mute belongs above the status strip, away from the avatar. */
#people .person .person-name-line>.person-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;align-self:center}
#people .person .person-state>.member-playback-muted{position:static!important;width:19px;height:21px;object-fit:contain;order:-1}
#people .member-media img[data-restriction]{width:19px;height:23px;object-fit:contain;flex:none}
#people .member-media img[data-restriction=private]{width:15px;height:21px}

/* Compact public-message author; keep message text and roster sizing independent. */
#messages .bubble .name-tag,#messages .bubble .name-tag .chat-name-label{font-size:17px!important}

/* Keep every roster crown in the same far-right column, independent of name length. */
#people .person .person-name-line .person-name{flex:1 1 0!important;min-width:0}
#people .person .person-name-line>.name-kind-mark{order:4!important;margin:0!important;flex:0 0 24px;width:24px;object-fit:contain}
#people .person .person-name-line>.person-state{order:2!important}
#people .person .person-name-line>.member-media{order:3!important}