:root{
  --bg:#07070a;
  --glass:rgba(0,0,0,.55);
  --glass2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.14);
  --text:#f2f4f8;
  --muted:rgba(242,244,248,.75);
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --radius:18px;
}

html,body{height:100%;margin:0;background:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
body{background:var(--bg);}

.mc-callwindow{
  transform: translateZ(0);
  will-change: transform;

  position:fixed;
  right:16px;
  bottom:16px;
  width:420px;
  height:620px;
  max-width:min(92vw,520px);
  max-height:min(92vh,760px);
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  color:var(--text);
  display:flex;
  flex-direction:column;
  z-index:9999;
}

.mc-callheader{
  touch-action: none;

  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02));
  cursor:grab;
  user-select:none;

  min-height:56px;
}

.mc-callheader:active{cursor:grabbing;}
.mc-callbrand{font-weight:700;letter-spacing:.3px;}
.mc-callsub{font-size:12px;color:var(--muted);margin-top:2px;}
.mc-calltitle{display:flex;flex-direction:column;line-height:1.05;}
.mc-callheader-actions{display:flex;gap:8px;align-items:center;}
.mc-iconbtn{
  width:34px;height:34px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
}
.mc-iconbtn:hover{background:rgba(255,255,255,.08);}

.mc-callbody{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.mc-hidden{display:none !important;}

.mc-joinpanel{
  position:absolute;
  inset:0;
  padding:16px 16px 14px;
  background:
    radial-gradient(700px 420px at 25% 0%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(600px 420px at 90% 10%, rgba(120,180,255,.10), transparent 60%),
    #050507;
  display:flex;
  flex-direction:column;
  gap:12px;
  animation: mcFadeUp 180ms ease-out both;
}
.mc-joinrow{display:flex;flex-direction:column;gap:6px;}
.mc-label{font-size:11px;color:var(--muted); letter-spacing:.6px; text-transform:uppercase;}
.mc-input{
  height:36px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:0 12px;
  outline:none;
}
.mc-input:focus{border-color:rgba(255,255,255,.30); box-shadow:0 0 0 4px rgba(120,180,255,.12);}
.mc-joinactions{display:flex;gap:10px;margin-top:6px;}
.mc-primary{
  flex:1;height:42px;border-radius:14px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}
.mc-primary:hover{background:rgba(255,255,255,.14);}
.mc-ghost{
  width:92px;height:42px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
  color:var(--text);
  cursor:pointer;
}
.mc-ghost:hover{background:rgba(255,255,255,.06);}
.mc-joinstatus{font-size:12px;color:var(--muted); margin-top:2px;}

.mc-stage{
  position:relative;
  flex:0 0 340px;      /* fixed video area so chat can sit under (more space for messages) */
  min-height:340px;
  background:#050507;
  overflow:hidden;
}

#remoteVideo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#111;
}
#localVideo{
  position:absolute;
  right:12px; top:12px;
  width:120px;height:170px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:#111;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.mc-controls{
  position:absolute;
  left:12px; right:12px; top:12px;
  display:flex; gap:8px;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.35);
  }
.mc-ctl{
  flex:1;
  height:36px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  font-size:13px;
}
.mc-ctl:hover{background:rgba(255,255,255,.10);}
.mc-danger{background:rgba(255,0,0,.12);border-color:rgba(255,0,0,.22);}
.mc-danger:hover{background:rgba(255,0,0,.18);}

.mc-chatpanel{
  flex:1;
  min-height:0;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
}

.mc-chatlist{
  flex:1; overflow:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mc-chatmsg{
  max-width:92%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-size:13px;
  line-height:1.25;
  word-break:break-word;
}
.mc-chatme{align-self:flex-end;background:rgba(255,255,255,.10);}
.mc-chatmeta{font-size:11px;color:var(--muted);margin-top:4px;}

.mc-chatform{
  display:flex; gap:8px;
  padding:10px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.25);

  min-height: 52px;
}
.mc-chatinput{
  flex:1;height:36px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:0 12px;
  outline:none;
}
.mc-chatinput:focus{border-color:rgba(255,255,255,.28);}
.mc-chatsend{
  width:74px;height:36px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.mc-chatsend:hover{background:rgba(255,255,255,.12);}

.mc-resizegrip{
  position:absolute;
  right:0; bottom:0;
  width:18px;height:18px;
  cursor:nwse-resize;
  background:linear-gradient(135deg, transparent 45%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.18) 55%, transparent 55%);
  opacity:.65;
}


/* --- Compact Chat v2 (full width under video) --- */
.mc-callwindow.mc-chat-open{ /* height handled by JS */ }

.mc-chatpanel{
  flex: 1;
  min-height: 0;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-chatlist{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.mc-chatinputwrap{
  position: relative;
}

.mc-chatform{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.mc-chatinput{
  flex: 1;
  min-width: 0;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.95);
  font-size: 14px;
}

.mc-chatinput::placeholder{
  color: rgba(255,255,255,.55);
}

.mc-chatsend{
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.07);
  color: rgba(255,255,255,.95);
}

.mc-emojiBtn{
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
}

.mc-emojitray{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 58px;
  display: flex;
  gap: 8px;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(8,8,10,.60);
  }

.mc-emoji{
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  color: rgba(255,255,255,.95);
  font-size: 18px;
}

/* --- HUD messages (up to 3, auto-hide) --- */
.mc-hud{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
  z-index: 40;
}

.mc-hudmsg{
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  color: rgba(20,24,30,.92);
  font-size: 14px;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(6px);
  animation: mcHudIn 140ms ease-out forwards, mcHudOut 500ms ease-in forwards;
  animation-delay: 0ms, 3500ms; /* total 4s visible-ish */
}

@keyframes mcHudIn{ to{ opacity: 1; transform: translateY(0);} }
@keyframes mcHudOut{ to{ opacity: 0; transform: translateY(6px);} }

/* Header buttons (match index.html) */
.mc-callheadbtns{display:flex;gap:8px;align-items:center;}
.mc-headbtn{
  width:34px;height:34px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.mc-headbtn:hover{background:rgba(255,255,255,.08);}

/* Header action buttons (back/call/video) are only visible inside an active chat.
   Also hidden while minimized (only "maximize" should remain). */
.mc-headaction{ display:none; }
.mc-callwindow.mc-in-chat:not(.mc-min) .mc-headaction{ display:inline-flex; align-items:center; justify-content:center; }
.mc-callwindow.mc-min .mc-headaction{ display:none !important; }


/* --- Premium motion + safe micro-interactions --- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
.mc-callwindow{ transition: box-shadow 180ms ease, border-color 180ms ease; }
.mc-callwindow:hover{ border-color: rgba(255,255,255,.18); box-shadow: 0 22px 70px rgba(0,0,0,.62); }
.mc-iconbtn,.mc-headbtn,.mc-ctl,.mc-primary,.mc-ghost,.mc-chatsend,.mc-emojiBtn,.mc-emoji{
  transition: transform 110ms ease, background 140ms ease, border-color 140ms ease, filter 140ms ease;
}
.mc-iconbtn:active,.mc-headbtn:active,.mc-ctl:active,.mc-primary:active,.mc-ghost:active,.mc-chatsend:active,.mc-emojiBtn:active,.mc-emoji:active{
  transform: translateY(1px) scale(.99);
  filter: brightness(1.06);
}

/* Video compositing hints (Android/WebView stability) */
#remoteVideo,#localVideo{
  transform: translateZ(0);
  backface-visibility:hidden;
  will-change: transform;
}



/* --- Join button (premium) --- */
.mc-joinbtn{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color: rgba(20,24,30,.92);
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
}
.mc-joinbtn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
}
.mc-joinbtn:active{ transform: translateY(1px) scale(.995); }
.mc-joinbtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.8);
}



/* Emoji tray pop */
.mc-emojitray{
  animation: mcTrayIn 140ms ease-out both;
}
@keyframes mcTrayIn{
  from{ opacity:0; transform: translateY(6px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}



/* Scrollbar polish (WebKit) */
.mc-chatlist::-webkit-scrollbar{ width:10px; }
.mc-chatlist::-webkit-scrollbar-track{ background: transparent; }
.mc-chatlist::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.07);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 10px;
}
.mc-chatlist::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.16); }



/* Header subtle shine */
.mc-callheader{ position:relative; }
.mc-callheader::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: rgba(255,255,255,.14);
  opacity:.55;
  pointer-events:none;
}



.mc-controls:hover{
  border-color: rgba(255,255,255,.18);
}



/* --- Theme system --- */
:root{
  color-scheme: dark;
}
/* Light theme overrides */
html[data-theme="light"]{
  color-scheme: light;
}
html[data-theme="light"] body{
  background: #f6f7fb;
}
/* Swap core tokens in light mode */
html[data-theme="light"]{
  --text: rgba(18,18,22,.96);
  --muted: rgba(18,18,22,.60);
  --border: rgba(18,18,22,.16);
  --shadow: 0 18px 55px rgba(0,0,0,.18);
}
/* Call window surfaces in light mode (keep no backdrop-filter for Android stability) */
html[data-theme="light"] .mc-callwindow{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,249,253,.92));
}
html[data-theme="light"] .mc-callheader{
  background: rgba(255,255,255,.72);
}
html[data-theme="light"] .mc-controls{
  background: rgba(255,255,255,.70);
}
html[data-theme="light"] .mc-joinpanel{
  background:
    radial-gradient(700px 420px at 25% 0%, rgba(0,0,0,.05), transparent 55%),
    radial-gradient(600px 420px at 90% 10%, rgba(80,120,255,.12), transparent 60%),
    #f6f7fb;
}

/* Light theme: user picker panel must be light/neutral (not black) */
html[data-theme="light"] .mc-userpanel{
  background:
    radial-gradient(700px 420px at 25% 0%, rgba(0,0,0,.05), transparent 55%),
    radial-gradient(600px 420px at 90% 10%, rgba(80,120,255,.12), transparent 60%),
    #f6f7fb;
}
html[data-theme="light"] .mc-userrow{
  background: rgba(18,18,22,.04);
  border-color: rgba(18,18,22,.10);
  color: rgba(18,18,22,.96);
}
html[data-theme="light"] .mc-userrow:hover{ background: rgba(18,18,22,.06); }
html[data-theme="light"] .mc-userrow.is-active{
  background: rgba(80,120,255,.12);
  border-color: rgba(80,120,255,.22);
}

html[data-theme="light"] .mc-input{
  background: rgba(255,255,255,.75);
  color: rgba(18,18,22,.96);
  border: 1px solid rgba(18,18,22,.18);
}
html[data-theme="light"] .mc-input::placeholder{ color: rgba(18,18,22,.45); }
html[data-theme="light"] .mc-joinbtn{
  border: 1px solid rgba(18,18,22,.18);
  background: linear-gradient(180deg, rgba(18,18,22,.06), rgba(18,18,22,.03));
  color: rgba(18,18,22,.92);
}
html[data-theme="light"] .mc-chatpanel{
  background: rgba(255,255,255,.72);
}
html[data-theme="light"] .mc-chatmsg{
  background: rgba(18,18,22,.05);
  border: 1px solid rgba(18,18,22,.12);
  color: rgba(18,18,22,.92);
}
html[data-theme="light"] .mc-chatme{
  background: rgba(80,120,255,.16);
  border-color: rgba(80,120,255,.24);
}
html[data-theme="light"] .mc-hudmsg{
  background: rgba(18,18,22,.10);
  color: rgba(18,18,22,.96);
}

/* Global theme toggle button (top-left, outside call window) */
.mc-globalTheme{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10050;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.04);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 110ms ease, background 140ms ease, border-color 140ms ease, filter 140ms ease;
}
.mc-globalTheme:active{ transform: translateY(1px) scale(.99); filter: brightness(1.05); }
.mc-globalTheme:hover{ background: rgba(255,255,255,.09); }

html[data-theme="light"] .mc-globalTheme{
  background: rgba(0,0,0,.04);
}



/* --- Light mode premium upgrades (contrast + clarity) --- */
html[data-theme="light"] body{
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(80,120,255,.16), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(255,120,180,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #f2f4fb);
}

html[data-theme="light"] .mc-callwindow{
  border-color: rgba(18,18,22,.12);
  box-shadow: 0 26px 80px rgba(0,0,0,.22);
}

html[data-theme="light"] .mc-callheader{
  border-bottom-color: rgba(18,18,22,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
}

html[data-theme="light"] .mc-headbtn,
html[data-theme="light"] .mc-iconbtn{
  background: rgba(18,18,22,.04);
  border-color: rgba(18,18,22,.14);
  color: rgba(18,18,22,.86);
}
html[data-theme="light"] .mc-headbtn:hover,
html[data-theme="light"] .mc-iconbtn:hover{
  background: rgba(18,18,22,.06);
}

html[data-theme="light"] .mc-stage{
  background: #0b0b10;
}

html[data-theme="light"] .mc-controls{
  background: rgba(255,255,255,.78);
  border-color: rgba(18,18,22,.14);
}

html[data-theme="light"] .mc-ctl{
  background: rgba(18,18,22,.04);
  border-color: rgba(18,18,22,.14);
  color: rgba(18,18,22,.86);
}
html[data-theme="light"] .mc-ctl:hover{
  background: rgba(18,18,22,.06);
}
html[data-theme="light"] .mc-danger{
  background: rgba(255,0,0,.10);
  border-color: rgba(255,0,0,.18);
  color: rgba(120,0,0,.92);
}

/* Chat panel: make it clearly visible in light mode */
html[data-theme="light"] .mc-chatpanel{
  border-top-color: rgba(18,18,22,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(250,251,255,.86));
}

html[data-theme="light"] .mc-chatlist{
  padding: 12px;
}

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

html[data-theme="light"] .mc-chatme{
  background: rgba(80,120,255,.18);
  border-color: rgba(80,120,255,.22);
}

html[data-theme="light"] .mc-chatform{
  border-color: rgba(18,18,22,.14);
  background: rgba(255,255,255,.70);
}

html[data-theme="light"] .mc-chatinput{
  color: rgba(18,18,22,.92) !important;
}
html[data-theme="light"] .mc-chatinput::placeholder{
  color: rgba(18,18,22,.48) !important;
}

html[data-theme="light"] .mc-chatsend{
  background: rgba(80,120,255,.18);
  color: rgba(18,18,22,.92);
  border: 1px solid rgba(80,120,255,.22);
}
html[data-theme="light"] .mc-chatsend:hover{
  background: rgba(80,120,255,.24);
}

html[data-theme="light"] .mc-emojiBtn{
  background: rgba(18,18,22,.05);
  color: rgba(18,18,22,.90);
  border: 1px solid rgba(18,18,22,.12);
}

html[data-theme="light"] .mc-emojitray{
  background: rgba(255,255,255,.92);
  border-color: rgba(18,18,22,.12);
}

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

html[data-theme="light"] .mc-hudmsg{
  background: rgba(255,255,255,.70);
  color: rgba(18,18,22,.92);
  border: 1px solid rgba(18,18,22,.10);
}



/* --- L-Layout controls (minimal) --- */
.mc-stage{ position:relative; }

.mc-sideactions{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:20;
}

.mc-sidebtn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 110ms ease, background 140ms ease, border-color 140ms ease, opacity 200ms ease;
}
.mc-sidebtn:hover{ background:rgba(0,0,0,.34); }
.mc-sidebtn:active{ transform: translateY(1px) scale(.99); }

/* Bottom bar: Mic + Chat + Hang (L-shape) */
.mc-controls{
  position:absolute;
  left:0;
  right:0;
  top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  z-index:20;
  pointer-events:none; /* enable only buttons */
}
.mc-controls > *{ pointer-events:auto; }

/* Make buttons compact */
.mc-ctl{
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
}

/* --- Idle hide: controls become almost invisible when not used --- */
.mc-stage.mc-idle-ui .mc-controls,
.mc-stage.mc-idle-ui .mc-sideactions{
  opacity: .08;
  transform: translateY(0);
}
.mc-stage.mc-idle-ui .mc-controls:hover,
.mc-stage.mc-idle-ui .mc-sideactions:hover{
  opacity: 1;
}

.mc-controls,
.mc-sideactions{
  opacity: 1;
  transition: opacity 220ms ease;
}

/* Keep hang-up a little more visible even in idle */
.mc-stage.mc-idle-ui #btnHang{
  opacity: .22;
}

/* Light theme variants */
html[data-theme="light"] .mc-sidebtn{
  background: rgba(255,255,255,.72);
  border-color: rgba(18,18,22,.14);
  color: rgba(18,18,22,.86);
}
html[data-theme="light"] .mc-sidebtn:hover{ background: rgba(255,255,255,.86); }



/* --- L-shape layout v2 (bottom-left) --- */
.mc-controls{
  left: 12px !important;
  right: auto !important;
  bottom: 12px !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.mc-controls .mc-ctl{
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Make hang button stand out but still compact */
#btnHang{
  width: 60px;
}

/* Side rail: slightly smaller */
.mc-sidebtn{
  width: 42px;
  height: 42px;
  border-radius: 16px;
}

/* Ultra-idle: almost invisible + subtle scale */
.mc-stage.mc-idle-ui .mc-controls,
.mc-stage.mc-idle-ui .mc-sideactions{
  opacity: .06;
}
.mc-stage.mc-idle-ui{
  /* tiny "sink" illusion */
}
.mc-stage.mc-idle-ui .mc-controls,
.mc-stage.mc-idle-ui .mc-sideactions{
  transform: scale(.985);
  transform-origin: left bottom;
  transition: opacity 220ms ease, transform 220ms ease;
}
.mc-controls,
.mc-sideactions{
  transition: opacity 220ms ease, transform 220ms ease;
  transform: scale(1);
}

/* Keep hang a bit more visible even in idle */
.mc-stage.mc-idle-ui #btnHang{ opacity: .18; }

/* PiP: long-press affordance */
#localVideo{
  cursor: pointer;
}





/* Ensure stage has room, and controls overlay above chat when needed */
.mc-callbody{ position:relative; }
.mc-stage{ position:relative; overflow:hidden; }

/* Controls: bottom-left cluster, always on top */
.mc-controls{
  position:absolute !important;
  left:12px !important;
  bottom:12px !important;
  top:auto !important;
  right:auto !important;

  display:flex !important;
  gap:10px !important;
  padding:0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow:none !important;

  z-index:60 !important;
}

.mc-controls .mc-ctl{
  width:52px !important;
  height:52px !important;
  padding:0 !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
}

/* Hang slightly wider */
#btnHang{ width:60px !important; }

/* Side actions on the stage (video) */
.mc-sideactions{
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform: translateY(-50%) !important;
  z-index:55 !important;
}

.mc-sidebtn{
  width:42px !important;
  height:42px !important;
  border-radius:16px !important;
}

/* Idle: almost invisible */
.mc-callbody.mc-idle-ui .mc-controls,
.mc-callbody.mc-idle-ui .mc-sideactions{
  opacity:.06 !important;
  transform: scale(.985) !important;
  transform-origin:left bottom;
  transition: opacity 220ms ease, transform 220ms ease;
}
.mc-callbody .mc-controls,
.mc-callbody .mc-sideactions{
  opacity:1;
  transition: opacity 220ms ease, transform 220ms ease;
}

.mc-callbody.mc-idle-ui #btnHang{ opacity:.18 !important; }


/* =========================
   UI DISTRIBUTION v1 (authoritative, 1766967554)
   Goal: clean function layout:
   - Side actions (Flip/Full) on RIGHT middle of video
   - Main controls (Mic / Chat / Hang) bottom CENTER as a compact glass bar
   - Keep joinPanel + chat panel intact
   ========================= */

.mc-stage{ position:relative; }

/* Side actions -> right middle */
.mc-sideactions{
  left:auto !important;
  right:12px !important;
  top:50% !important;
  transform: translateY(-50%) !important;
  z-index:55 !important;
}

/* Main controls -> bottom center */
.mc-controls{
  position:absolute !important;
  left:50% !important;
  bottom:12px !important;
  top:auto !important;
  right:auto !important;
  transform: translateX(-50%) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  padding:10px 12px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.28) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;

  z-index:60 !important;
  pointer-events:auto !important;
}

/* Buttons in bar */
.mc-controls .mc-ctl{
  width:auto !important;
  min-width:78px !important;
  height:44px !important;
  padding:0 14px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:800 !important;
}

/* Hang stands out */
#btnHang{
  min-width:92px !important;
}

/* Keep local PiP clear of buttons */
#localVideo{
  right:12px !important;
  top:12px !important;
}

/* Idle fade applies to controls + sideactions as before (use existing class on mcCallBody) */
.mc-callbody.mc-idle-ui .mc-controls,
.mc-callbody.mc-idle-ui .mc-sideactions{
  opacity:.08 !important;
  transform: translateX(-50%) scale(.985) !important;
}

.mc-callbody.mc-idle-ui .mc-sideactions{
  transform: translateY(-50%) scale(.985) !important;
}

/* Light theme variants */
html[data-theme="light"] .mc-controls{
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(18,18,22,.14) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
}
html[data-theme="light"] .mc-sidebtn{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(18,18,22,.14) !important;
  color: rgba(18,18,22,.86) !important;
}


/* =========================
   UI DISTRIBUTION v2 (authoritative, 1766967773)
   Request: Move Flip + Fullscreen vertical to TOP-LEFT corner (inside stage)
   + Polish: tighter buttons, consistent glass, safe spacing from header/PiP
   ========================= */

.mc-stage{ position:relative; }

/* Side actions -> top-left corner */
.mc-sideactions{
  position:absolute !important;
  left:12px !important;
  top:12px !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;

  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;

  z-index:70 !important;
}

/* Side buttons polish */
.mc-sidebtn{
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.26) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.30) !important;
  font-size:18px !important;
}
.mc-sidebtn:hover{ background: rgba(0,0,0,.32) !important; }
.mc-sidebtn:active{ transform: translateY(1px) scale(.99) !important; }

/* Keep PiP out of the way (top-right) */
#localVideo{
  right:12px !important;
  top:12px !important;
}

/* Main controls stay bottom-center glass bar (from v1) */
.mc-controls{
  position:absolute !important;
  left:50% !important;
  bottom:12px !important;
  top:auto !important;
  right:auto !important;
  transform: translateX(-50%) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  padding:10px 12px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.28) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;

  z-index:60 !important;
  pointer-events:auto !important;
}

/* Buttons in bar */
.mc-controls .mc-ctl{
  width:auto !important;
  min-width:78px !important;
  height:44px !important;
  padding:0 14px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:800 !important;
}
#btnHang{ min-width:92px !important; }

/* Idle fade uses correct transforms (avoid x-translate on sideactions now) */
.mc-callbody.mc-idle-ui .mc-controls{
  opacity:.08 !important;
  transform: translateX(-50%) scale(.985) !important;
}
.mc-callbody.mc-idle-ui .mc-sideactions{
  opacity:.08 !important;
  transform: scale(.985) !important;
  transform-origin: left top !important;
}

/* Light theme variants */
html[data-theme="light"] .mc-controls{
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(18,18,22,.14) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
}
html[data-theme="light"] .mc-sidebtn{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(18,18,22,.14) !important;
  color: rgba(18,18,22,.86) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
}


/* =========================
   FINAL POLISH v3 (authoritative, 1766968048)
   - Icon-only controls (Mic/Chat/Hang)
   - Side actions (Flip/Fullscreen) top-left vertical
   - Premium glass + consistent sizing
   ========================= */

.mc-stage{ position:relative; }

/* Side actions: top-left */
.mc-sideactions{
  position:absolute !important;
  left:12px !important;
  top:12px !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  z-index:80 !important;
}

.mc-sidebtn{
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.30) !important;
  color: rgba(255,255,255,.95) !important;
  font-size:18px !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
}
.mc-sidebtn:hover{ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.26)) !important; }
.mc-sidebtn:active{ transform: translateY(1px) scale(.99) !important; }

/* Bottom controls: icon-only, centered */
.mc-controls{
  position:absolute !important;
  left:50% !important;
  bottom:12px !important;
  top:auto !important;
  right:auto !important;
  transform: translateX(-50%) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  padding:10px 12px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.28) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;

  z-index:75 !important;
}

.mc-controls .mc-ctl{
  width:52px !important;
  min-width:52px !important;
  height:52px !important;
  padding:0 !important;
  border-radius:18px !important;
  display:grid !important;
  place-items:center !important;

  border:1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.96) !important;
  font-weight:900 !important;
  font-size:18px !important;
  letter-spacing:0 !important;
}
.mc-controls .mc-ctl:hover{ background: rgba(255,255,255,.10) !important; }
.mc-controls .mc-ctl:active{ transform: translateY(1px) scale(.99) !important; }

#btnHang{
  width:60px !important;
  min-width:60px !important;
  background: rgba(255,0,0,.14) !important;
  border-color: rgba(255,0,0,.26) !important;
}
#btnHang:hover{ background: rgba(255,0,0,.18) !important; }

/* Keep PiP top-right */
#localVideo{
  right:12px !important;
  top:12px !important;
}

/* Idle fade (use mc-callbody.mc-idle-ui) */
.mc-callbody.mc-idle-ui .mc-controls,
.mc-callbody.mc-idle-ui .mc-sideactions{
  opacity:.08 !important;
  transform: scale(.985) !important;
  transform-origin: left top !important;
}
.mc-callbody.mc-idle-ui .mc-controls{
  transform: translateX(-50%) scale(.985) !important;
  transform-origin: center bottom !important;
}

/* Light theme */
html[data-theme="light"] .mc-controls{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(18,18,22,.14) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
}
html[data-theme="light"] .mc-controls .mc-ctl{
  background: rgba(18,18,22,.04) !important;
  border-color: rgba(18,18,22,.14) !important;
  color: rgba(18,18,22,.88) !important;
}
html[data-theme="light"] #btnHang{
  color: rgba(120,0,0,.92) !important;
}
html[data-theme="light"] .mc-sidebtn{
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(18,18,22,.14) !important;
  color: rgba(18,18,22,.88) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
}

/* =========================
   FULLSCREEN CHAT OVERLAY v4 (authoritative, 1766968476)
   Goal: When in fullscreen, chat opens as a glass overlay on video (bottom-left).
   Works by moving #chatPanel inside #stage while fullscreen is active.
   ========================= */

.mc-chatpanel.mc-chat-overlay{
  position:absolute !important;
  left:14px !important;
  bottom:86px !important; /* above bottom controls */
  width:min(360px, 44vw) !important;
  max-height:min(46vh, 380px) !important;

  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.28) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;

  overflow:hidden !important;
  z-index:90 !important;
  pointer-events:auto !important;
}

.mc-chatpanel.mc-chat-overlay .mc-chatlist{
  padding:12px !important;
}

.mc-chatpanel.mc-chat-overlay .mc-chatmsg{
  background: rgba(255,255,255,.06) !important;
}

.mc-chatpanel.mc-chat-overlay .mc-chatform{
  margin:10px 12px 12px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  background: rgba(0,0,0,.16) !important;
}

.mc-chatpanel.mc-chat-overlay .mc-emojitray{
  left:12px !important;
  right:12px !important;
  bottom:76px !important;
}

html[data-theme="light"] .mc-chatpanel.mc-chat-overlay{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(18,18,22,.14) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.16) !important;
}
html[data-theme="light"] .mc-chatpanel.mc-chat-overlay .mc-chatform{
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(18,18,22,.14) !important;
}



/* =========================
   Chat input resize v5 (1767003741)
   ========================= */
.mc-chattextarea {
  resize: vertical !important;
  min-height: 44px !important;
  max-height: 160px !important;
  width: 100% !important;
  line-height: 1.4 !important;
  padding: 10px 12px !important;
  font-family: inherit !important;
  overflow: auto !important;
}

.mc-chatform, .mc-chatinputwrap {
  align-items: flex-end !important;
}


/* SOS overlay (demo) */
.mc-sos{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index:50;
  padding:16px;
}
.mc-sosbox{
  width:min(520px, 100%);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,10,14,.72);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding:18px;
  color:var(--text);
  text-align:center;
}
.mc-sosicon{font-size:34px; margin-bottom:6px;}
.mc-sostitle{font-weight:800; font-size:18px; margin-bottom:6px;}
.mc-sostext{font-size:14px; color:rgba(255,255,255,.9); line-height:1.35; margin-bottom:12px;}
.mc-sosactions{display:flex; gap:10px; justify-content:center; margin-bottom:10px;}
.mc-sosbtn{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
  border-radius:14px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.mc-sosbtn:hover{background:rgba(255,255,255,.12);}
.mc-sosdanger{
  border-color: rgba(255,0,0,.32);
  background: rgba(255,0,0,.14);
}
.mc-sosdanger:hover{background: rgba(255,0,0,.20);}
.mc-sosnote{font-size:12px; color:var(--muted); line-height:1.3;}



/* =========================
   AUDIO-FIRST CHAT MODE + BUBBLES (authoritative, 1767007361)
   - Audio call starts in chat-only view
   - Video enabled switches to stage+chat
   - Android fullscreen chat fills entire height with minimize button
   ========================= */

#mcCallBody.mc-mode-audio #stage{ display:none !important; }
#mcCallBody.mc-mode-audio #chatPanel{ display:flex !important; }
#mcCallBody.mc-mode-video #stage{ display:block !important; }

/* Chat top bar (controls when stage is hidden / audio-first) */
.mc-chatbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.mc-chatbar-left{ display:flex; flex-direction:column; line-height:1.1; }
.mc-chatbar-title{ font-weight:800; letter-spacing:.2px; }
.mc-chatbar-hint{ font-size:12px; color:var(--muted); }

.mc-chatbar-actions{ display:flex; gap:8px; align-items:center; }
.mc-chatbar-btn{
  width:40px;height:36px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.95);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:16px;
}
.mc-chatbar-btn:hover{ background:rgba(255,255,255,.10); }
.mc-chatbar-danger{ background:rgba(255,0,0,.14); border-color:rgba(255,0,0,.24); }
.mc-chatbar-danger:hover{ background:rgba(255,0,0,.20); }

/* Fullscreen chat mode (Android/webview friendly) */
html.mc-fs-chat #mcCallWindow{
  left:0 !important; top:0 !important; right:0 !important; bottom:0 !important;
  width:100vw !important; height:100vh !important;
  max-width:none !important; max-height:none !important;
  border-radius:0 !important;
}
html.mc-fs-chat #mcCallHeader{ display:none !important; }
html.mc-fs-chat #mcCallBody{ height:100vh !important; }
html.mc-fs-chat #chatPanel{
  height:100vh !important;
  border-top:0 !important;
}
html.mc-fs-chat #btnChatMin{ display:grid !important; }
html.mc-fs-chat #stage{ display:none !important; }

/* Bubble messages with demo names */
.mc-chatlist{ padding:12px; }
.mc-bubble{
  max-width:86%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-size:14px;
  line-height:1.25;
  word-break:break-word;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mc-bubble.me{
  align-self:flex-end;
  background:rgba(255,255,255,.10);
}
.mc-bubble .mc-bubbleText{ white-space:pre-wrap; }
.mc-bubble .mc-bubbleMeta{
  font-size:11px;
  color:var(--muted);
  display:flex;
  gap:8px;
  justify-content:space-between;
}
.mc-bubble .mc-bubbleName{ font-weight:700; }

html[data-theme="light"] .mc-chatbar-btn{
  background: rgba(18,18,22,.04);
  border-color: rgba(18,18,22,.14);
  color: rgba(18,18,22,.88);
}
html[data-theme="light"] .mc-chatbar-danger{
  background: rgba(255,0,0,.10);
  border-color: rgba(255,0,0,.18);
  color: rgba(120,0,0,.92);
}
html[data-theme="light"] .mc-bubble{
  background: rgba(18,18,22,.04);
  border-color: rgba(18,18,22,.10);
  color: rgba(18,18,22,.92);
}
html[data-theme="light"] .mc-bubble.me{
  background: rgba(80,120,255,.16);
  border-color: rgba(80,120,255,.22);
}


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

.mc-userlist{
  padding: 10px 12px 0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Legacy user list hidden: peer is chosen before entering */
#mcUserList{display:none !important;}

/* Compact active-peer bar (used when peer is already chosen before entering) */
.mc-peerbar{
  margin: 10px 12px 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.04);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.mc-peerleft{display:flex;align-items:center;gap:10px;min-width:0}
.mc-peername{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-peerright{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(0,0,0,.04);
  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;
}

.mc-uabtn{
  height:34px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.95);
  cursor:pointer;
  font-weight:800;
  font-size:12px;
}
.mc-uabtn:hover{ background: rgba(0,0,0,.26); }
.mc-uabtn:active{ transform: translateY(1px) scale(.99); }

.mc-uabtn.mc-uacall{ background: rgba(120,180,255,.16); border-color: rgba(120,180,255,.26); }
.mc-uabtn.mc-uavideo{ background: rgba(255,180,120,.14); border-color: rgba(255,180,120,.24); }

html[data-theme="light"] .mc-usercard{
  background: rgba(18,18,22,.04);
  border-color: rgba(18,18,22,.10);
}
html[data-theme="light"] .mc-uabtn{
  background: rgba(18,18,22,.04);
  border-color: rgba(18,18,22,.12);
  color: rgba(18,18,22,.90);
}
html[data-theme="light"] .mc-uabtn.mc-uacall{
  background: rgba(80,120,255,.16);
  border-color: rgba(80,120,255,.22);
}
html[data-theme="light"] .mc-uabtn.mc-uavideo{
  background: rgba(255,140,80,.14);
  border-color: rgba(255,140,80,.22);
}

/* Invite overlay */
.mc-invite{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: transparent;
  z-index: 120;
  pointer-events: auto;
}

.mc-invite > .mc-invitebox{ pointer-events: auto; }
.mc-invitebox{
  width:min(360px, 92vw);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  padding:12px 12px 10px;
}
.mc-invitetitle{
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom: 6px;
}
.mc-invitetext{
  color: rgba(242,244,248,.85);
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 12px;
}
.mc-inviteactions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.mc-invitebtn{
  height:36px;
  padding:0 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.04);
  color: rgba(20,24,30,.92);
  cursor:pointer;
  font-weight:900;
}
.mc-invitebtn:hover{ background: rgba(0,0,0,.07); }
.mc-inviteok{
  background: rgba(80,200,140,.18);
  border-color: rgba(80,200,140,.35);
}
.mc-invitenote{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(20,24,30,.62);
}

html[data-theme="light"] .mc-invitebox{
  background: rgba(255,255,255,.92);
  border-color: rgba(18,18,22,.12);
}
html[data-theme="light"] .mc-invitetext,
html[data-theme="light"] .mc-invitenote{
  color: rgba(18,18,22,.70);
}
html[data-theme="light"] .mc-invitebtn{
  background: rgba(18,18,22,.04);
  border-color: rgba(18,18,22,.14);
  color: rgba(18,18,22,.90);
}

/* =========================
   PRESENCE MODE (authoritative, 2025-12-29)
   Goal:
   - After login, user lands on a "brugerside" (presence)
   - Chat UI hidden by default (no message list + no input)
   - User list is primary surface
   - Chat becomes visible only in mc-mode-chat / mc-mode-audio / mc-mode-video
   ========================= */

/* Presence (brugerside): hide chat list + input; keep user list visible */
#mcCallBody.mc-mode-presence #stage{ display:none !important; }
#mcCallBody.mc-mode-presence #chatPanel{ display:none !important; }
#mcCallBody.mc-mode-presence #mcUserPanel{ display:flex !important; }
#mcCallBody.mc-mode-presence #chatList{ display:none !important; }
#mcCallBody.mc-mode-presence #chatForm{ display:none !important; }
#mcCallBody.mc-mode-presence .mc-chatform{ display:none !important; }
#mcCallBody.mc-mode-presence .mc-chatinputwrap{ display:none !important; }

/* Make the user list feel like the main page */
#mcCallBody.mc-mode-presence #mcUserList{
  padding-top: 6px;
}

/* Chat page: show chat list + input (no stage unless video mode) */
#mcCallBody.mc-mode-chat #stage{ display:none !important; }
#mcCallBody.mc-mode-chat #chatPanel{ display:flex !important; }
#mcCallBody.mc-mode-chat #chatList{ display:flex !important; }
#mcCallBody.mc-mode-chat #chatForm{ display:flex !important; }

/* Audio call: enforce chat visible */
#mcCallBody.mc-mode-audio #chatList{ display:flex !important; }
#mcCallBody.mc-mode-audio #chatForm{ display:flex !important; }

/* Video call: stage visible; chat behavior controlled elsewhere */
#mcCallBody.mc-mode-video #stage{ display:block !important; }




/* =========================
   USER PICKER + DROPDOWN (customer demo)
   ========================= */

.mc-userpanel{
  position:absolute;
  inset:0;
  padding:16px 16px 14px;
  background:
    radial-gradient(700px 420px at 25% 0%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(600px 420px at 90% 10%, rgba(120,180,255,.10), transparent 60%),
    #050507;
  display:flex;
  flex-direction:column;
  gap:12px;
  animation: mcFadeUp 180ms ease-out both;
}
.mc-userpanel-head{display:flex;flex-direction:column;gap:4px;}
.mc-userpanel-title{font-weight:800;letter-spacing:.2px;}
.mc-userpanel-sub{font-size:12px;color:var(--muted);}

.mc-userpanel-list{
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:2px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mc-userrow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.mc-userrow:hover{background:rgba(255,255,255,.10);}
.mc-userrow.is-active{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18);}
.mc-username{font-weight:700;letter-spacing:.1px;}

.mc-userpanel-foot{display:flex;justify-content:flex-start;}
.mc-userpanel-hint{font-size:12px;color:var(--muted);}

.mc-userpanel-list::-webkit-scrollbar{ width:10px; }
.mc-userpanel-list::-webkit-scrollbar-track{ background: transparent; }
.mc-userpanel-list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.07);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 10px;
}

.mc-peermenuwrap{ position: relative; }
.mc-peermenu{
  position:absolute;
  right:0;
  top:46px;
  min-width: 190px;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(8,8,10,.72);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  z-index: 80;
}
.mc-peermenuitem{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.s;
  color: var(--text);
  border-radius: 12px;
  padding:10px 10px;
  cursor:pointer;
  text-align:left;
  margin:0 0 8px 0;
}
.mc-peermenuitem:last-child{ margin-bottom: 0; }
.mc-peermenuitem:hover{ background: rgba(0,0,0,.07); }

/* Minimized: only show "maximize again" (no other icons) */
.mc-callwindow.mc-min .mc-calltitle{ display:none !important; }
.mc-callwindow.mc-min #btnClose{ display:none !important; }
.mc-callwindow.mc-min .mc-globalTheme{ display:none !important; } /* global toggle hidden while minimized */


/* Dark mode invite overlay */
.mc-dark .mc-invitebox{
  background: rgba(8,8,10,.78);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.mc-dark .mc-invitebtn{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.96);
}
.mc-dark .mc-invitebtn:hover{ background: rgba(255,255,255,.10); }
.mc-dark .mc-invitenote{ color: rgba(242,244,248,.70); }


/* Unread notification dot shown on minimized call window */
.mc-notifdot{
  position: absolute;
  top: 8px;
  left: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff2d2d;
  box-shadow: 0 0 0 3px rgba(255,45,45,0.25);
  pointer-events: auto;
  z-index: 9999;
}
.mc-notifdot.mc-hidden{ display:none !important; }

/* User list unread dot + NEW badge */
.mc-userrow{ position: relative; }
.mc-userrow .mc-unreaddot{
  position:absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:#ff2d2d;
  box-shadow: 0 0 0 3px rgba(255,45,45,0.22);
}
.mc-userrow .mc-newbadge{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,45,45,0.14);
  color: #ff2d2d;
  border: 1px solid rgba(255,45,45,0.28);
}

/* --- FIX: show call/video buttons only in chat --- */
#mcCallWindow.mc-chat-open .mc-headaction{display:flex !important;}
body.mc-chat-open #mcCallWindow .mc-headaction{display:flex !important;}
/* ensure notif dot anchors */
.mc-headbtn{position:relative;}
/* -------------------------------------------------- */