.content{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--soft);position:relative}
.chat-header{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line);background:#17212b}
.chat-header-left{display:flex;align-items:center;gap:12px;cursor:pointer;min-width:0}
.chat-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-status{font-size:13px;color:var(--muted)}
.pinned-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#1a2733;border-bottom:1px solid rgba(255,255,255,.04);font-size:14px}
.pinned-mark{width:3px;height:32px;border-radius:2px;background:#49a4ff}

.music-bar{
  position:relative;
  display:flex;align-items:center;gap:8px;
  padding:6px 10px 8px;
  background:#16202a;border-bottom:1px solid var(--line);
  font-size:13px;color:#c6d3df;min-height:42px;
  min-width:0;                 /* важно: иначе flex-overflow ломает */
}
.music-bar > *{flex:0 0 auto}   /* по умолчанию ничего не растягивается */
.music-bar.hidden{display:none}
.mp-title{
  flex:1 1 0;min-width:0;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mp-seek{width:200px;accent-color:var(--accent);height:4px}
.mp-seek input{width:100%}
.mp-time{font-variant-numeric:tabular-nums;color:var(--muted)}
.mp-vol{display:flex;align-items:center;gap:6px}
.mp-vol-ico{opacity:.6}
.mp-vol-ico svg{width:16px;height:16px}
.mp-vol input{width:90px;accent-color:var(--accent)}
.mp-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(255,255,255,.06);cursor:pointer;
}
.mp-progress-fill{height:100%;background:var(--accent);width:0;transition:width .1s linear}

.music-list{display:flex;flex-direction:column;gap:4px}
.music-item,.attach-file{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04);cursor:pointer;color:inherit}
.music-item:hover,.attach-file:hover{background:rgba(255,255,255,.08)}
.audio-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-ico{width:36px;height:36px;display:grid;place-items:center;background:#233545;border-radius:10px}
.file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta{font-size:12px;color:var(--muted)}
.attach-video{max-width:360px;border-radius:10px;background:#000}
.reactions span.on{background:#3a6ea5;color:#fff}

.fwd-list{display:flex;flex-direction:column;gap:6px}
.fwd-item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:pointer}
.fwd-item:hover{background:#243747}

.chat-side .chat-react img.r{width:22px;height:22px}

.chat-last img.e{width:16px;height:16px;vertical-align:-3px}

.chat-name, .chat-title{ display:inline-flex; align-items:center; gap:8px }
.online-dot{
  display:inline-block;
  width:10px;height:10px;border-radius:50%;
  background:#2bc36b;
  box-shadow:0 0 0 2px rgba(43,195,107,.25);
  flex:0 0 auto;
}