/* Список участников, кнопки скрыть/показать, нижняя строка с баннером */
/* ===== members ===== */
.members,.mbanner{position:absolute;z-index:4;right:16px;width:276px;max-width:calc(100% - 32px)}
.members{top:16px;bottom:120px;display:none;flex-direction:column;gap:8px;padding:12px;border-radius:14px;
  background:rgba(9,9,13,.55);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:pop .5s var(--spring) both}
.mh{gap:8px}
.mh .mt{flex:1}
.mhide{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);
  transition:background-color .2s,color .2s,transform .25s var(--spring)}
.mhide:hover{background:rgba(255,255,255,.12);color:#fff}
.mhide:active{transform:scale(.88)}
.mhide svg,.mshow svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* show button: visible only when the list is hidden */
.mshow{position:absolute;z-index:4;top:16px;right:16px;display:none;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  background:rgba(9,9,13,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:14px;font-weight:600;color:var(--text);transition:transform .3s var(--spring),border-color .2s;animation:pop .45s var(--spring) both}
.mshow:hover{border-color:rgba(255,255,255,.25)}
.mshow:active{transform:scale(.94)}
.mshow svg{color:rgba(255,255,255,.8)}
.mshow b{font-weight:500;color:#b09c98;font-variant-numeric:tabular-nums}
.chat:not(.mem) .mshow{display:flex}
.chat:not(.mem){--pside:166px}
/* bottom row: input + banner (banner shows here when the list is hidden) */
.brow{flex:none;display:flex;gap:12px;align-items:stretch}
.brow .input{flex:1;min-width:0}
.ibanner{flex:0 0 276px;height:auto;display:none;filter:none}
.chat:not(.mem) .ibanner{display:flex}
@media (max-width:720px){.chat:not(.mem) .ibanner{display:none}}
.chat.mem .members{display:flex}
.mbanner{bottom:16px;height:92px;flex:none;display:none}
.chat.mem .mbanner{display:flex}
.mh{display:flex;align-items:center;justify-content:space-between;flex:none}
.mt{font-weight:600;font-size:14px;color:var(--text)}
.mcnt{font-weight:500;font-size:14px;color:#b09c98;font-variant-numeric:tabular-nums}
.mlist{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;margin:0 -6px;padding:0 6px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent;overscroll-behavior:contain}
.mlist::-webkit-scrollbar{width:6px}.mlist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.mgh{flex:none;padding:6px;font-weight:500;font-size:14px;letter-spacing:.6px;color:#b09c98;text-transform:uppercase}
.mrow{display:flex;align-items:center;gap:10px;width:100%;flex:none;padding:8px;border-radius:10px;text-align:left;overflow:hidden;
  transition:background-color .2s,transform .3s var(--spring)}
.mrow:hover{background:rgba(255,255,255,.06)}
.mrow:active{transform:scale(.97)}
.mrow:focus-visible{outline:2px solid #fff;outline-offset:1px}
.mav{width:36px;height:36px;border-radius:7.7px;overflow:hidden;flex:none;transition:transform .35s var(--spring)}
.mav svg{display:block;width:100%;height:100%}
.mrow:hover .mav{transform:scale(1.05) rotate(3deg)}
.mn svg{width:14px;height:14px;flex:none;display:block}
.mc{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mn{display:flex;gap:6px;align-items:center;font-weight:600;font-size:14px;line-height:normal;color:var(--text);min-width:0}
.mn .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{flex:none;padding:3px 8px;border-radius:999px;font-weight:600;font-size:14px;line-height:normal;color:#fff}
.ms{font-weight:400;font-size:14px;line-height:normal;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* list = the people in the chat; role shown only by name colour (+ crown for VIP/Premium), same colours as in the feed */
.m-admin .nm{color:var(--admin)}
.m-mod .nm{color:var(--mod)}
.m-prem .nm{background:linear-gradient(90deg,var(--prem-a),var(--prem-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-vip .nm{color:var(--vip)}
.mrow.pulse{animation:mpulse 1.1s ease-out}
@keyframes mpulse{0%{background:rgba(255,255,255,.18)}100%{background:rgba(255,255,255,0)}}
@media (max-width:1179px){.members{z-index:5;background:rgba(9,9,13,.94)}}