.chat-with-online{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:22px;align-items:start;margin:36px 0}.chat-with-online>.chat-room{min-width:0;width:100%;margin:0}.chat-online-panel{background:#050505;border-radius:12px;box-shadow:inset 0 0 0 1px #171717;padding:22px 18px;position:sticky;top:18px}.chat-online-panel h2{font:24px/1.2 "XBAND Rough",sans-serif;font-weight:400;margin:0 0 12px;color:#eee}.online-panel-note{font:10px/1.6 monospace;color:#999;margin:0 0 18px}.online-user-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}.online-user-list li{display:grid;grid-template-columns:6px minmax(0,1fr) auto;gap:9px;align-items:center}.online-user-dot{width:5px;height:5px;border-radius:50%;background:#eee}.online-user-name{font:12px/1.4 monospace;color:#ddd;overflow-wrap:anywhere}.online-user-list small{font:8px/1 monospace;color:#888;letter-spacing:.4px}.chat-with-online .chat-form{flex-wrap:wrap}.chat-with-online .chat-message-field{min-width:150px;flex:1 1 45%}.chat-with-online .chat-history{height:480px}@media(max-width:900px){.chat-with-online{grid-template-columns:minmax(0,1fr)}.chat-online-panel{position:static}.online-user-list{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.chat-with-online .chat-history{height:400px}}.chat-with-online .chat-bottom{flex-wrap:wrap;gap:10px 16px}.chat-with-online .chat-status{flex:1 1 100%}.chat-with-online .chat-bottom button{white-space:nowrap}@media(max-width:600px){.chat-with-online .chat-form>label{flex:1 1 100%;min-width:0}.chat-with-online .chat-form>button[type=submit]{width:100%}.chat-with-online .chat-heading{gap:16px}}

@media(max-width:900px){.chat-online-panel{order:-1;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.chat-online-panel h2{margin:0;font-size:22px}.online-panel-note{margin:0;align-self:center;text-align:right}.online-user-list{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));max-height:132px;overflow-y:auto;overscroll-behavior:contain;padding:2px 3px 3px 0;gap:12px 18px;scrollbar-color:#555 #050505}.online-user-list li{gap:7px}.online-user-name{font-size:11px}.chat-with-online{gap:16px;margin-top:24px}}

.online-users-toggle{display:none}
.online-user-list li,.online-user-list li.online-resident{grid-template-columns:32px minmax(0,1fr) auto;min-height:34px}
.online-user-list .online-user-face{position:relative;display:grid;place-items:center;width:32px;height:32px;overflow:hidden;border-radius:50%;background:#111;box-shadow:inset 0 0 0 1px #444;flex:none}
.online-user-face img{display:block;width:32px;height:32px;object-fit:cover;border-radius:50%}
.online-user-face>.chat-icon-sprite{position:absolute;left:-4px;top:-4px;transform:scale(.8)}
.online-user-placeholder:before{content:"";width:9px;height:9px;position:absolute;left:11px;top:6px;border:1px solid #aaa;border-radius:50%}
.online-user-placeholder:after{content:"";position:absolute;width:19px;height:11px;left:6px;bottom:3px;border:1px solid #aaa;border-radius:12px 12px 5px 5px}
.online-user-list a.online-user-name{text-decoration:none;color:#eee;min-width:0}
.online-user-list a.online-user-name:hover{text-decoration:underline;background:transparent}
.chat-online-panel .online-user-list li{grid-template-columns:32px minmax(0,1fr) auto}
.online-user-list .online-user-face .resident-yin-sprite{width:32px;height:32px;flex-basis:32px;left:0;top:0;transform:none}
@media(max-width:900px){.chat-online-panel{grid-template-columns:minmax(0,1fr) auto 40px;align-items:center;gap:10px}.online-users-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;min-height:44px;padding:0;background:#151515;color:#eee;border-radius:6px;font:22px/1 monospace;cursor:pointer;box-shadow:inset 0 0 0 1px #333}.chat-online-panel.online-is-minimized .online-user-list{display:none}.online-user-list{grid-column:1/-1}.online-panel-note{font-size:9px}.chat-online-panel h2{font-size:21px}}
.online-user-placeholder:before,.online-user-placeholder:after{box-shadow:inset 0 0 0 1px #aaa}.online-user-name{font-size:max(14px,.9vw)!important}.online-user-list small{font-size:max(12px,.8vw)!important}
@media(max-width:520px){.online-user-list{grid-template-columns:minmax(0,1fr);max-height:200px;gap:10px}.online-user-list li{gap:10px}}

/* Presence badge stays separate from the avatar artwork. */
.online-user-face .online-activity-dot{position:absolute;right:1px;bottom:1px;width:9px;height:9px;border-radius:50%;background:#ed202a;box-shadow:0 0 0 2px #050505;z-index:2;animation:online-dot-flash 1.6s steps(1,end) infinite}
.online-user-face .online-activity-dot[data-active="true"]{background:#35e35b;animation:none}
@keyframes online-dot-flash{0%,60%,100%{opacity:1}65%,95%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.online-user-face .online-activity-dot{animation:none}}

.online-user-details{min-width:0;display:grid;gap:3px}.online-user-activity{display:block;font:10px/1.35 monospace!important;color:#888;letter-spacing:0;overflow-wrap:anywhere}.online-user-details .online-user-name{display:block}

/* Registered members remain listed while away; live users stay first. */
.online-user-list li.is-away .online-activity-dot{background:#ed202a;animation:none}
.online-user-list li.is-away .online-user-name{color:#aaa}
@media(min-width:901px){.chat-online-panel .online-user-list{max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain;padding-right:5px;scrollbar-color:#555 #050505}}

/* Names keep the available row width; badges sit underneath. */
.online-user-list li,.online-user-list li.online-resident{grid-template-columns:32px minmax(0,1fr)}
.online-user-list .online-user-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal;min-width:0}
.online-user-list .online-user-activity{overflow-wrap:normal;word-break:normal}
.online-user-details>small{display:block}