/* MichiganChat video call popup — clean demo rebuild, 2026-08-07 */
body.mc-video-modal-open { overflow: hidden; }
.mc-video-modal[hidden] { display: none !important; }
.mc-video-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 18px; font-family: inherit; }
.mc-video-backdrop { position: absolute; inset: 0; background: rgba(2,6,10,.80); backdrop-filter: blur(7px); }
.mc-video-window { position: relative; width: min(1460px, 96vw); height: min(880px, 94vh); min-height: 560px; display: grid; grid-template-rows: 68px minmax(0,1fr) 82px; overflow: hidden; color: #fff; background: #080b0f; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; box-shadow: 0 30px 100px rgba(0,0,0,.62); }
.mc-video-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 18px; background:#151a20; border-bottom:1px solid rgba(255,255,255,.08); }
.mc-video-heading { display:flex; align-items:center; gap:12px; min-width:0; }
.mc-video-heading > div { min-width:0; }
.mc-video-heading h2 { margin:0; color:#fff; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-video-heading p { margin:4px 0 0; color:#b9c2cc; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-status-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:#7d8792; box-shadow:0 0 0 4px rgba(255,255,255,.04); }
.mc-status-dot.is-connected { background:#38cb72; } .mc-status-dot.is-connecting,.mc-status-dot.is-waiting { background:#f2b83f; } .mc-status-dot.is-error { background:#e84b4b; }
.mc-video-window-actions { display:flex; gap:8px; }
.mc-icon-button { width:40px; height:40px; padding:0; display:grid; place-items:center; border:1px solid transparent; border-radius:10px; background:rgba(255,255,255,.085); color:#fff; font-size:18px; cursor:pointer; }
.mc-icon-button:hover { background:rgba(255,255,255,.15); }
.mc-video-modal button:focus-visible,.mc-video-modal select:focus-visible,.mc-video-modal input:focus-visible { outline:2px solid #78baff; outline-offset:2px; }
.mc-video-body { position:relative; min-height:0; overflow:hidden; background:#05070a; }
/* Component owns this stage completely; neutralize legacy site.css WebRTC layout. */
.mc-video-modal .mc-video-stage.webrtc-stage { position:absolute !important; inset:0 !important; display:block !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; gap:0 !important; grid-template-columns:none !important; overflow:hidden !important; background:#05070a !important; }
.mc-remote-video,.mc-screen-video { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; display:block; object-fit:contain !important; background:#05070a; }
.mc-screen-video { z-index:4; background:#080b0f; }
.mc-screen-video[hidden] { display:none !important; }
.mc-video-waiting { position:absolute !important; inset:0 !important; z-index:12; display:grid !important; place-content:center; justify-items:center; text-align:center; padding:34px; background:radial-gradient(circle at 50% 40%,#273747 0,#111820 46%,#070a0e 82%) !important; }
.mc-video-waiting[hidden] { display:none !important; }
.mc-waiting-icon { font-size:40px; margin-bottom:10px; }
.mc-video-waiting h3 { margin:0 0 8px; color:#fff; }
.mc-video-waiting p { max-width:560px; margin:0 0 18px; color:#c2cad3; }
.mc-name-field { width:min(400px,80vw); margin-bottom:12px; color:#d0d7df; text-align:left; font-size:.85rem; }
.mc-name-field input { width:100%; margin-top:6px; padding:11px 12px; border:1px solid #43505e; border-radius:9px; background:#171d24; color:#fff; }
.mc-primary-call-button { border:0; border-radius:10px; padding:12px 20px; background:#e33a3a; color:#fff; font-weight:750; cursor:pointer; }
.mc-local-tile,.mc-remote-camera-pip { position:absolute !important; z-index:9; width:clamp(190px,18vw,250px) !important; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(255,255,255,.70); border-radius:13px; background:#161b21; box-shadow:0 12px 34px rgba(0,0,0,.50); }
.mc-local-tile { right:18px; bottom:18px; cursor:grab; touch-action:none; user-select:none; }
.mc-local-tile.is-dragging { cursor:grabbing; }
.mc-local-tile video,.mc-remote-camera-pip video { width:100% !important; height:100% !important; max-width:none !important; display:block !important; object-fit:cover !important; background:#161b21 !important; }
.mc-local-tile video { transform:scaleX(-1); }
.mc-remote-camera-pip { left:18px; bottom:18px; z-index:8; }
.mc-remote-camera-pip[hidden] { display:none !important; }
.mc-participant-label { position:absolute !important; left:8px !important; bottom:8px !important; z-index:11; max-width:calc(100% - 16px); padding:4px 8px !important; border-radius:6px; background:rgba(0,0,0,.62) !important; color:#fff !important; font-size:.72rem !important; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; backdrop-filter:blur(4px); }
.mc-remote-label { left:14px !important; top:14px !important; bottom:auto !important; z-index:7; background:rgba(0,0,0,.42) !important; }
.mc-camera-off { position:absolute !important; inset:0 !important; z-index:10; display:grid !important; place-items:center; background:#242a31; color:#fff; }
.mc-camera-off[hidden],.mc-muted-badge[hidden] { display:none !important; }
.mc-muted-badge { position:absolute !important; top:8px !important; right:8px !important; z-index:12; padding:4px 7px; border-radius:6px; background:#c83434; color:#fff; font-size:.7rem; }
.mc-side-panel { position:absolute; top:12px; right:12px; bottom:12px; z-index:20; width:min(330px,calc(100% - 24px)); padding:16px; overflow:auto; border:1px solid rgba(255,255,255,.11); border-radius:14px; background:rgba(22,27,33,.97); box-shadow:0 18px 50px rgba(0,0,0,.50); }
.mc-side-panel[hidden] { display:none !important; }
.mc-side-panel header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.mc-side-panel h3 { margin:0; color:#fff; font-size:1rem; }
.mc-side-panel label { display:block; margin:0 0 14px; color:#c9d0d8; font-size:.82rem; }
.mc-side-panel select { width:100%; margin-top:6px; padding:10px; border:1px solid #45515e; border-radius:8px; background:#0e1318; color:#fff; }
.mc-call-info { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid rgba(255,255,255,.08); color:#bfc7cf; font-size:.82rem; }
.mc-call-info strong { color:#fff; text-align:right; }
.mc-video-controls { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 16px; background:#151a20; border-top:1px solid rgba(255,255,255,.08); }
.mc-call-control { min-width:68px; height:58px; padding:6px 10px; display:grid; place-items:center; gap:1px; border:1px solid transparent; border-radius:12px; background:rgba(255,255,255,.085); color:#fff; cursor:pointer; }
.mc-call-control span { font-size:20px; line-height:1; } .mc-call-control small { font-size:.68rem; color:#d5dbe1; }
.mc-call-control:hover { background:rgba(255,255,255,.15); }
.mc-call-control[aria-pressed="true"] { background:#3a424c; border-color:rgba(255,255,255,.16); }
.mc-end-call { background:#d83a3a; } .mc-end-call:hover { background:#ed4747; }
.mc-video-window.is-minimized { width:min(440px,92vw); height:290px; min-height:0; position:fixed; right:18px; bottom:18px; grid-template-rows:56px 1fr; }
.mc-video-window.is-minimized .mc-video-controls,.mc-video-window.is-minimized .mc-side-panel,.mc-video-window.is-minimized .mc-local-tile,.mc-video-window.is-minimized .mc-remote-camera-pip { display:none !important; }
.mc-video-window.is-minimized .mc-video-header { padding:0 12px; }
.mc-video-window:fullscreen { width:100vw; height:100vh; min-height:0; border:0; border-radius:0; }
@media (max-width:760px) {
  .mc-video-modal { padding:0; }
  .mc-video-window { width:100vw; height:100dvh; min-height:0; border:0; border-radius:0; grid-template-rows:62px minmax(0,1fr) 76px; }
  .mc-video-heading h2 { font-size:.92rem; }
  .mc-video-heading p { font-size:.76rem; }
  .mc-video-controls { gap:6px; padding:8px; overflow-x:auto; justify-content:flex-start; }
  .mc-call-control { min-width:62px; height:54px; }
  .mc-local-tile,.mc-remote-camera-pip { width:148px !important; }
  .mc-side-panel { top:8px; right:8px; bottom:8px; width:calc(100% - 16px); }
}