/* =========================
   Ring-op UI (presence list + invite overlay)
   ========================= */

.mc-userlist{
  padding: 10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  overflow:auto;
}

/* User list enabled (UserRoom) */
#mcUserList{display:flex !important; flex-direction:column; gap:10px;}

/* Compact active-peer bar (used when peer is already chosen before entering) */
.mc-peerbar{
  /* Chat header: clean centered name, actions only on the right (no box) */
  position: relative;
  margin: 10px 12px 0;
  padding: 0;
  height: 46px;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  display:flex;
  align-items:center;
  justify-content: center;
  gap: 12px;
}

.mc-peerleft{display:flex;align-items:center;gap:10px;min-width:0;justify-content:center;}
.mc-peername{
  font-weight:800;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  max-width:none;
  text-align:center;
  font-size:15px;
}
.mc-peerright{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;}
.mc-peerbtn{
  height: 38px;
  min-width: 38px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: inherit;
  cursor: pointer;
}
.mc-peerbtn:active{transform: translateY(1px)}


.mc-usercard{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.mc-userdot{
  width:10px;height:10px;border-radius:50%;
  background: rgba(120,255,180,.85);
  box-shadow: 0 0 0 4px rgba(120,255,180,.10);
}

.mc-userdot-off{
  background: rgba(180,180,180,.55) !important;
  box-shadow: 0 0 0 4px rgba(180,180,180,.10) !important;
}

.mc-username{
  font-weight:800;
  letter-spacing:.2px;
  font-size:13px;
}

.mc-useractions{
  display:flex;
  gap:8px;
  margin-left:8px;
}

html[data-theme="light"] .mc-usercard{
  background: rgba(18,18,22,.04);
  border-color: rgba(18,18,22,.10);
}


/* Only show call + video in top header (not inside the peer bar) */
#mcPeerMsg{display:none !important;}
#mcPeerDot{display:none !important;}
#mcPeerCall{display:none !important;}
#mcPeerVideo{display:none !important;}


/* User picker: avatar + name/email */
.mc-useravatar{position:relative; width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; flex:0 0 38px; background: rgba(80,120,255,.14); border:1px solid rgba(80,120,255,.22);}
html[data-theme="light"] .mc-useravatar{background: rgba(80,120,255,.12); border-color: rgba(80,120,255,.20);}
.mc-userinitial{font-weight:800; font-size:14px; letter-spacing:.2px;}
.mc-useravatar .mc-userdot{position:absolute; left:-2px; top:50%; transform:translateY(-50%);}
.mc-usertext{display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:2px;}
.mc-useremail{font-size:11px; opacity:.72; line-height:1.2; white-space:normal; word-break:break-word;}

.mc-usertext .mc-username{white-space:normal; overflow:visible; text-overflow:unset;}


/* User picker fills panel + search */
#mcUserPanel{display:flex; flex-direction:column; height:100%;}
#mcUserPanel.mc-hidden{display:none;}
.mc-usersearch{padding:10px 12px 0;}
.mc-usersearch-input{width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.7); outline:none; font-size:14px;}
html[data-theme="dark"] .mc-usersearch-input{background:rgba(20,22,26,.55); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.92);}
.mc-userlist{flex:1; overflow:auto; padding:10px 12px 12px; display:flex; flex-direction:column; gap:10px;}
#mcUserList{display:flex !important; flex-direction:column; gap:10px;}
.mc-userrow{width:100%; justify-content:flex-start;}