/* ============================================================
   MASTER VORTEX — Live Room ("LIVE — Positive Energizer Desk") styles
   Companion to live.js. Palette matches community.css: panel
   #070d18, edge #16283f, inner #0a1524, green #1ee308,
   red #ff3b47, blue #57b6ff. Regular weight only — no bold.
   These rules only matter when the server flag enables the
   live feature; live.js builds no DOM at all while it is dark.
   ============================================================ */

/* ---------- banner (inside the Community panel) ---------- */
.mvl-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 14px 0; padding: 8px 10px;
  background: #0a1524; border: 1px solid #1c3350; border-radius: 8px;
}
.mvl-desk { color: #1ee308; font-size: 12px; font-weight:400; letter-spacing: 1.2px; }
.mvl-offair { color: #5f7694; font-size: 12px; }
.mvl-hint { color: #5f7694; font-size: 12px; margin-left: auto; }
.mvl-livebadge {
  color: #ff3b47; font-size: 12px; font-weight:400; letter-spacing: 1px; flex: 0 0 auto;
}
.mvl-desk-title {
  color: #e8f2ff; font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mvl-meta { color: #8fa8c4; font-size: 11.5px; flex: 0 0 auto; }
.mvl-title-in {
  flex: 1 1 140px; min-width: 0; padding: 6px 8px;
  background: #070d18; color: #e8f2ff; border: 1.5px solid #1c3350;
  border-radius: 8px; font-size: 12.5px; font-family: inherit;
}
.mvl-btn {
  background: transparent; color: #a9bed6; border: 1.5px solid #1c3350;
  border-radius: 8px; font-size: 12px; font-weight:400; letter-spacing: .6px;
  padding: 6px 12px; cursor: pointer; font-family: inherit; flex: 0 0 auto;
}
.mvl-btn:hover { color: #fff; border-color: #2c4a73; }
.mvl-btn.go { color: #1ee308; border-color: rgba(30, 227, 8, .55); }
.mvl-btn.go:hover { background: rgba(30, 227, 8, .12); color: #1ee308; }
.mvl-btn.danger { color: #ff3b47; border-color: rgba(255, 59, 71, .5); }
.mvl-btn.danger:hover { background: rgba(255, 59, 71, .1); color: #ff3b47; }

/* ---------- stage ---------- */
.mvc-panel.mvl-theater { width: min(920px, calc(100vw - 24px)); }
.mvl-stage {
  display: flex; flex-direction: column; gap: 8px;
  margin: 10px 14px 0; padding: 10px;
  background: #0a1524; border: 1px solid #1c3350; border-radius: 10px;
}
.mvl-stage.hidden { display: none; }
.mvl-stage-head { display: flex; align-items: center; gap: 8px; }
.mvl-stage-head .mvl-x {
  margin-left: auto; background: transparent; border: none; color: #8fa8c4;
  font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px;
}
.mvl-stage-head .mvl-x:hover { color: #fff; }

.mvl-stage-main { display: flex; gap: 10px; align-items: flex-start; }
.mvl-screen {
  position: relative; flex: 1 1 auto; min-width: 0;
  background: #050b14; border: 1px solid #12233c; border-radius: 8px; overflow: hidden;
}
.mvl-screen canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Real-media stage (SfuMediaAdapter): the adapter's container fills
   the screen slot; the shared-screen video fills it, a camera feed
   sits in the corner as picture-in-picture. Mirrors the canvas slot's
   16:9 box so mock and real stages occupy the same geometry. */
.mvl-sfu-stage {
  position: absolute; inset: 0; background: #050b14;
}
.mvl-sfu-main { position: absolute; inset: 0; }
.mvl-sfu-main video {
  display: block; width: 100%; height: 100%; object-fit: contain; background: #050b14;
}
.mvl-sfu-pip {
  position: absolute; right: 8px; top: 8px; width: 24%; max-width: 176px;
  aspect-ratio: 16 / 9; border: 1px solid #12233c; border-radius: 6px;
  overflow: hidden; background: #050b14;
}
.mvl-sfu-pip:empty { display: none; }
.mvl-sfu-pip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mvl-sfu-stage audio { display: none; }
.mvl-screen-note {
  position: absolute; left: 8px; bottom: 6px;
  color: #8fa8c4; font-size: 11px; background: rgba(5, 11, 20, .72);
  padding: 2px 7px; border-radius: 6px; pointer-events: none;
}

.mvl-people {
  flex: 0 0 218px; max-height: 364px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.mvl-people-head, .mvl-simhead {
  color: #5f7694; font-size: 11px; letter-spacing: 1px; padding: 2px 0 4px;
}
.mvl-simhead { margin-top: 8px; }
.mvl-person {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 6px; border-radius: 6px; background: rgba(18, 35, 60, .35);
}
.mvl-person.dim { opacity: .75; }
.mvl-pname { color: #dfe9f5; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mvl-pname.owner { color: #1ee308; }
.mvl-ownertag {
  font-size: 9.5px; letter-spacing: .8px;
  background: rgba(30, 227, 8, .16); color: #1ee308;
  padding: 2px 6px; border-radius: 7px;
}
.mvl-tag { font-size: 10px; letter-spacing: .6px; padding: 2px 6px; border-radius: 7px; color: #8fa8c4; background: #0d1828; }
.mvl-tag.onmic { color: #1ee308; background: rgba(30, 227, 8, .14); }
.mvl-tag.invited { color: #57b6ff; background: rgba(87, 182, 255, .13); }
.mvl-tag.hand { color: #e8f2ff; background: #1c3350; }
.mvl-mini {
  margin-left: auto; background: transparent; color: #a9bed6; border: 1px solid #1c3350;
  border-radius: 6px; font-size: 10.5px; font-weight:400; letter-spacing: .5px;
  padding: 3px 8px; cursor: pointer; font-family: inherit;
}
.mvl-mini:hover { color: #fff; border-color: #2c4a73; }
.mvl-mini.go { color: #1ee308; border-color: rgba(30, 227, 8, .5); }
.mvl-mini.danger { color: #ff3b47; border-color: rgba(255, 59, 71, .45); margin-left: 0; }
.mvl-person .mvl-mini.go + .mvl-mini.danger { margin-left: auto; }

/* ---------- control strip ---------- */
.mvl-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid #0d1828; padding-top: 8px;
}
.mvl-invited-note { color: #57b6ff; font-size: 12.5px; }
.mvl-vol {
  display: flex; align-items: center; gap: 6px;
  color: #5f7694; font-size: 11px; letter-spacing: 1px; margin-left: auto;
}
.mvl-vol input[type="range"] { width: 90px; accent-color: #1ee308; }
.mvl-notice { font-size: 12px; color: #8fa8c4; }
.mvl-notice.err { color: #ff3b47; }

/* ---------- stacked layout (narrow panel / mobile) ---------- */
@media (max-width: 900px) {
  .mvc-panel.mvl-theater { width: auto; }
  .mvl-stage-main { flex-direction: column; }
  .mvl-people { flex: 1 1 auto; width: 100%; max-height: 180px; }
  .mvl-vol { margin-left: 0; }
}