/* Лента, сообщения, роли (r-mod/r-vip/r-admin/r-prem), форматированный текст */
/* ===== content ===== */
.chat{--side:14px;--pside:30px}
@media (min-width:1180px){.chat.mem{--side:305px;--pside:305px}}
.content{position:absolute;z-index:1;inset:34px var(--side) 23px 16px;display:flex;flex-direction:column;gap:15px;transition:inset .45s cubic-bezier(.2,.8,.2,1)}
.feed{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 2px;display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent;overscroll-behavior:contain}
.feed{margin-top:0;transition:margin-top .35s cubic-bezier(.2,.8,.2,1);-webkit-mask-image:linear-gradient(transparent 0,#000 18px);mask-image:linear-gradient(transparent 0,#000 18px)}
.feed::before{content:"";flex:1 0 0}
.feed::-webkit-scrollbar{width:6px}.feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.msg{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 14px;border-left:2px solid transparent;position:relative;
  transition:background-color .2s,transform .35s var(--spring);
}
.msg.multi{align-items:flex-start}
.msg:hover{background-color:rgba(255,255,255,.022)}
.msg:active{transform:scale(.996)}
.msg.new{animation:pop .55s var(--spring) both}
@keyframes pop{0%{opacity:0;transform:translateY(16px) scale(.985)}100%{opacity:1;transform:none}}
.msg .main{display:flex;gap:8px;align-items:inherit;min-width:0;flex:1}
.ava{width:34px;height:34px;border-radius:7.286px;overflow:hidden;flex:none;transition:transform .35s var(--spring)}
.msg:hover .ava{transform:scale(1.07) rotate(-2deg)}
.ava svg{display:block;width:100%;height:100%}
.col{display:flex;flex-direction:column;gap:2px;justify-content:center;min-width:0}
.name{display:flex;align-items:center;gap:4px;font-weight:500;font-size:14px;line-height:normal;white-space:nowrap}
.name.dim{color:var(--white);opacity:.4}
.name img,.name svg{width:14px;height:14px;display:block}
.txt{font-size:16px;line-height:20px;color:var(--text);max-width:900px;overflow-wrap:anywhere;white-space:pre-wrap}
.msg.wrap .txt{max-width:727px}
.time{font-weight:500;font-size:14px;color:var(--time);white-space:nowrap;flex:none}

.r-mod{border-left-color:var(--mod);background-image:linear-gradient(90deg,rgba(75,165,138,.2),rgba(75,165,138,0) 41%)}
.r-mod .name{color:var(--mod)}
.r-vip{border-left-color:var(--vip);background-image:linear-gradient(90deg,rgba(212,174,98,.2),rgba(110,90,51,0) 41%)}
.r-vip .name{color:var(--vip)}
.r-admin{border-left-color:var(--admin);background-image:linear-gradient(90deg,rgba(253,0,47,.2),rgba(110,90,51,0) 41%)}
.r-admin .name{color:var(--admin)}
.r-prem{border-left-color:var(--prem-line);background-image:linear-gradient(90deg,rgba(119,0,223,.2),rgba(119,0,223,0) 45%)}
.r-prem .name span{background:linear-gradient(90deg,var(--prem-a),var(--prem-b));-webkit-background-clip:text;background-clip:text;color:transparent}

/* formatted text */
.txt b{font-weight:500;color:#fff}
.txt u{text-underline-offset:3px}
.txt .q{display:block;border-left:2px solid rgba(255,255,255,.35);padding-left:10px;margin:2px 0;color:rgba(234,226,222,.8)}
.txt .c{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:rgba(255,255,255,.09);padding:1px 6px;border-radius:5px}
.txt .sp{background:rgba(255,255,255,.2);color:transparent;border-radius:4px;cursor:pointer;text-shadow:0 0 8px rgba(255,255,255,.9);transition:all .25s;user-select:none}
.txt .sp.open{background:rgba(255,255,255,.07);color:inherit;text-shadow:none}
.txt a{color:#7db4ff;text-decoration:underline;text-underline-offset:3px}
.txt .file{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:6px 10px;background:rgba(0,0,0,.35)}