/* A Web — chat plus: recents, pins, edit */
.cx .rooms .rlist .rr{display:flex;align-items:center;gap:4px;flex:none;border-radius:14px}
.cx .rooms .rlist .rr.pinned{background:color-mix(in srgb,var(--g) 10%,transparent)}
.cx .rooms .rlist .rr>button.rm{flex:1 1 auto!important;min-width:0;min-height:56px;width:auto!important}
.cx .rooms .rlist .rn{flex:1;min-width:0;display:flex;flex-direction:column;text-align:start}
.cx .rooms .rlist .rn b,.cx .rooms .rlist .rn small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx .rooms .rlist .rn small{font-weight:500;font-size:12px;opacity:.65}
.cx .rooms .rlist .rt{flex:none;font-style:normal;font-size:11px;opacity:.6}
.cx .rooms .rlist .rr>button.pn{flex:none!important;min-height:0!important;width:auto!important;padding:5px 9px!important;border-radius:99px!important;font-size:11px!important;border:1px solid var(--line);opacity:.55}
.cx .rooms .rlist .rr:hover>button.pn,.cx .rooms .rlist .rr>button.pn.on{opacity:1}
.cx .rooms .rlist .rr>button.pn.on{background:var(--g);color:#fff;border-color:transparent}
@media(hover:none){.cx .rooms .rlist .rr>button.pn{opacity:1}}
@media(max-width:800px){.cx .rooms .rlist .rr{width:100%}}
.cedit{display:flex;gap:6px;align-items:center;margin-top:8px;min-width:220px}
.cedit input{flex:1;min-width:0;padding:8px 12px;border-radius:99px;color:var(--ink)}
.m .ced{font-style:italic}

/* ---- chat header: more space between the avatar and the name ---- */
.cx .cwin .chd{justify-content:flex-start;gap:18px}
.cx .cwin .chd .av{margin-inline-end:8px;flex:none}
.cx .cwin .chd b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- phone: shorter list + shorter message area, so the typing box is near the top ---- */
@media(max-width:800px){
 .cx .rooms{max-height:150px}
 .cx .cwin .msgs{height:36vh;min-height:200px;max-height:340px}
 .cx .cwin .chd{padding-bottom:8px}
}