/* =============================================================
   mc-meeting.css - the Video Meeting Simulator (js/mc-meeting.js).

   A fictional internal Midea Connect app, not Zoom or Teams: pixel-art chrome
   (thick navy outlines, the same look as the game's dialogue boxes) over a
   clean light-blue corporate surface. Sizes are calc(N * var(--mu)), one
   reference pixel of the 1280-wide 16:9 stage - set from JS (McMeeting.layout)
   exactly like the app's own var(--u) in midea-app.css.
   ============================================================= */
#mcMeeting {
  --mm-navy: #0d1735;
  --mm-blue: #1478f0;
  --mm-blue-dark: #0f66d4;
  --mm-line: #b9caea;
  --mm-ink: #1f2329;
  --mm-muted: #64708a;
  --mm-panel: #eaf2ff;
  position: fixed;
  inset: 0;
  z-index: 240;                 /* over the computer screen and mission notices */
  font-family: 'VCR OSD Mono', 'Courier New', Courier, monospace;
}
#mcMeeting.hidden, #mcMeeting[hidden] { display: none; }
#mcMeeting * { box-sizing: border-box; }

.mcm-scrim {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 2vmin;
  /* A pixel sky, not a dark scrim: the window floats on it like the reference. */
  background:
    radial-gradient(circle at 10% 18%, #fff 0 3%, transparent 3.4%),
    radial-gradient(circle at 16% 20%, #fff 0 4%, transparent 4.4%),
    radial-gradient(circle at 22% 16%, #fff 0 3%, transparent 3.4%),
    radial-gradient(circle at 82% 74%, #fff 0 3.4%, transparent 3.8%),
    radial-gradient(circle at 88% 77%, #fff 0 4.4%, transparent 4.8%),
    radial-gradient(circle at 94% 73%, #fff 0 3%, transparent 3.4%),
    radial-gradient(circle at 60% 88%, #fff 0 2.6%, transparent 3%),
    linear-gradient(#8fc3ff, #bfe0ff 55%, #d9edff);
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 240ms ease;
}
#mcMeeting.on .mcm-scrim { opacity: 1; }

.mcm-stage {
  position: relative;
  width: min(96vw, calc(96vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #dceaff;
  border: calc(5 * var(--mu, 1px)) solid var(--mm-blue-dark);
  border-radius: calc(14 * var(--mu, 1px));
  box-shadow: 0 0 0 calc(2 * var(--mu, 1px)) #fff inset, 0 calc(8 * var(--mu, 1px)) 0 rgba(13, 23, 53, 0.4), 0 calc(30 * var(--mu, 1px)) calc(60 * var(--mu, 1px)) rgba(10, 30, 70, 0.45);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(14px) scale(0.97);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
  color: var(--mm-ink);
}
#mcMeeting.on .mcm-stage { transform: none; }

/* ---- title bar (decorative window chrome) ---- */
.mcm-titlebar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  height: calc(40 * var(--mu, 1px)); padding: 0 calc(10 * var(--mu, 1px));
  background: linear-gradient(#4a9dff, #2a7ee0);
  border-bottom: calc(2 * var(--mu, 1px)) solid var(--mm-navy);
}
.mcm-app-icon {
  display: flex; align-items: center; justify-content: center;
  width: calc(28 * var(--mu, 1px)); height: calc(28 * var(--mu, 1px));
  background: #fff; border-radius: calc(8 * var(--mu, 1px));
  color: var(--mm-blue-dark);
}
.mcm-app-icon svg { width: calc(18 * var(--mu, 1px)); height: calc(18 * var(--mu, 1px)); }
.mcm-win-btns { display: flex; gap: calc(6 * var(--mu, 1px)); }
.mcm-win {
  display: flex; align-items: center; justify-content: center;
  width: calc(24 * var(--mu, 1px)); height: calc(24 * var(--mu, 1px));
  border: calc(2 * var(--mu, 1px)) solid var(--mm-navy); border-radius: calc(6 * var(--mu, 1px));
  background: #eef5ff; color: var(--mm-blue-dark);
  transition: filter 100ms ease;
}
.mcm-win svg { width: calc(13 * var(--mu, 1px)); height: calc(13 * var(--mu, 1px)); }
.mcm-win:hover { filter: brightness(1.08); }
.mcm-win-close { background: #ef4444; color: #fff; }
.mcm-win-close:hover { background: #e03131; }

/* ---- top bar ---- */
.mcm-topbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  height: calc(52 * var(--mu, 1px)); padding: 0 calc(14 * var(--mu, 1px));
  background: #f5f9ff; border-bottom: calc(3 * var(--mu, 1px)) solid var(--mm-navy);
}
.mcm-top-side { display: flex; align-items: center; gap: calc(8 * var(--mu, 1px)); }
.mcm-chip {
  display: inline-flex; align-items: center; gap: calc(6 * var(--mu, 1px));
  height: calc(32 * var(--mu, 1px)); padding: 0 calc(10 * var(--mu, 1px));
  border: calc(2 * var(--mu, 1px)) solid #b9cbe6; border-radius: calc(8 * var(--mu, 1px));
  background: #fff; color: var(--mm-blue-dark);
  font: bold calc(12 * var(--mu, 1px)) inherit; letter-spacing: 0.4px; white-space: nowrap;
  transition: background-color 120ms ease, transform 80ms ease;
}
.mcm-chip svg { width: calc(15 * var(--mu, 1px)); height: calc(15 * var(--mu, 1px)); flex: none; }
.mcm-chip:hover { background: var(--mm-panel); }
.mcm-chip:active { transform: scale(0.97); }
.mcm-chip.mcm-static { color: var(--mm-muted); cursor: default; }
.mcm-chip.mcm-static:hover { background: #fff; }
.mcm-chip.mcm-icon-only { padding: 0; width: calc(32 * var(--mu, 1px)); justify-content: center; }
.mcm-chip.mcm-static { border-color: transparent; background: transparent; }
.mcm-chip.on, .mcm-transcribe.on { background: var(--mm-blue); border-color: var(--mm-blue-dark); color: #fff; }
.mcm-chip[data-mcm="grid"] svg:last-child { width: calc(11 * var(--mu, 1px)); height: calc(11 * var(--mu, 1px)); margin-left: calc(-2 * var(--mu, 1px)); }
.mcm-sep { width: calc(2 * var(--mu, 1px)); height: calc(20 * var(--mu, 1px)); background: var(--mm-line); border-radius: 2px; margin: 0 calc(2 * var(--mu, 1px)); }
.mcm-chip.mcm-secure { color: var(--mm-blue-dark); }
.mcm-chip.mcm-signal { color: #2fb865; }

.mcm-timer {
  display: inline-flex; align-items: center; gap: calc(6 * var(--mu, 1px));
  font: bold calc(14 * var(--mu, 1px)) inherit; color: var(--mm-ink);
}
.mcm-timer svg { width: calc(15 * var(--mu, 1px)); height: calc(15 * var(--mu, 1px)); color: var(--mm-blue-dark); }

/* ---- video area ----
   Two layouts, toggled by the .mcm-has-carlos class (mc-meeting.js's
   carlosJoins/carlosLeaves) rather than rebuilt: a plain flex row for two
   participants, and a 2+1 grid (CSS Grid, not fragile pixel math, so it stays
   centred and proportional at any size - including when a side panel like
   Real-Time Translation shrinks this area's own width) once Carlos joins. */
.mcm-body { position: relative; flex: 1; min-height: 0; display: flex; }
.mcm-video-area {
  flex: 1; min-width: 0; display: flex; align-items: stretch; justify-content: center;
  gap: calc(14 * var(--mu, 1px)); padding: calc(14 * var(--mu, 1px));
  background: #cfe4ff;
}
.mcm-video-area.mcm-has-carlos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
/* Fixed visual order regardless of DOM order (section: PARTICIPANT ORDER). */
.mcm-video-area.mcm-has-carlos [data-ref="tilePm"] { grid-column: 1; grid-row: 1; }
.mcm-video-area.mcm-has-carlos [data-ref="tilePlayer"] { grid-column: 2; grid-row: 1; }
.mcm-video-area.mcm-has-carlos [data-ref="tileCarlos"] {
  grid-column: 1 / span 2; grid-row: 2;
  width: 50%; min-width: 0; justify-self: center;
}
/* The top pair settles into place as the grid switches on; Carlos's own tile
   plays its entrance once it stops being [hidden] (build() below). */
.mcm-video-area.mcm-has-carlos [data-ref="tilePm"],
.mcm-video-area.mcm-has-carlos [data-ref="tilePlayer"] { animation: mcm-row-up 260ms ease-out; }
@keyframes mcm-row-up { from { transform: translateY(8%); } to { transform: none; } }

/* Each tile IS the "camera": the player's/PM's own avatar filling the whole
   window, the way a real video tile fills with the webcam picture - not a
   small circle floating on a dark card. */
.mcm-tile {
  position: relative;
  flex: 1; min-width: 0;
  border: calc(3 * var(--mu, 1px)) solid var(--mm-navy);
  border-radius: calc(10 * var(--mu, 1px));
  overflow: hidden;
  background: #dceaff;
  transition: box-shadow 160ms ease;
}
.mcm-tile.mcm-speaking { box-shadow: 0 0 0 calc(4 * var(--mu, 1px)) #3ee06b, 0 0 calc(18 * var(--mu, 1px)) rgba(62, 224, 107, 0.65); }
.mcm-tile[data-ref="tileCarlos"] { animation: mcm-carlos-in 320ms ease-out; }
.mcm-tile[data-ref="tileCarlos"].mcm-leaving { animation: mcm-carlos-out 220ms ease-in forwards; }
@keyframes mcm-carlos-in { from { opacity: 0; transform: translateY(14%) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes mcm-carlos-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10%) scale(0.94); } }

.mcm-avatar {
  /* The source portraits (assets/meeting/*.png) are square and already well-framed -
     head, hair and shoulders with office background around them. `cover` on these
     wide tiles was cropping most of that away to fill the box; `contain` at less
     than full size shows the whole portrait instead, with the tile's own background
     standing in for the rest of the room (same trick a real video-call tile uses
     when a camera's aspect ratio doesn't match the tile). */
  position: absolute; inset: 0; margin: auto;
  width: 74%; height: 74%;
  object-fit: contain; object-position: center;
  image-rendering: pixelated;
  animation: mcm-idle 3.6s ease-in-out infinite;
  transform-origin: 50% 65%;
}
.mcm-tile.mcm-talking .mcm-avatar { animation: mcm-talk 0.5s ease-in-out infinite; }
@keyframes mcm-idle {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-0.6%) rotate(-0.4deg) scale(1.005); }
}
@keyframes mcm-talk {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.mcm-camoff {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--mu, 1px));
  background: #16305f; color: #cfe0ff;
}
.mcm-camoff[hidden] { display: none; }
.mcm-camoff img { width: calc(90 * var(--mu, 1px)); height: calc(90 * var(--mu, 1px)); object-fit: cover; border-radius: 50%; image-rendering: pixelated; }
.mcm-camoff span { font: bold calc(13 * var(--mu, 1px)) inherit; }

.mcm-tag {
  position: absolute; left: calc(10 * var(--mu, 1px)); bottom: calc(10 * var(--mu, 1px)); z-index: 2;
  display: inline-flex; align-items: center; gap: calc(6 * var(--mu, 1px));
  padding: calc(5 * var(--mu, 1px)) calc(10 * var(--mu, 1px));
  background: rgba(9, 20, 45, 0.75); border-radius: calc(6 * var(--mu, 1px));
  color: #fff; font: bold calc(13 * var(--mu, 1px)) inherit;
}
.mcm-tag svg { width: calc(13 * var(--mu, 1px)); height: calc(13 * var(--mu, 1px)); }
.mcm-mic-ic.mcm-off { color: #ff8080; }
.mcm-tile.muted .mcm-tag { color: #ffb3b3; }

/* ---- task banner ---- */
.mcm-task {
  position: absolute; left: 50%; top: calc(14 * var(--mu, 1px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--mu, 1px));
  max-width: 74%; text-align: center;
  padding: calc(8 * var(--mu, 1px)) calc(18 * var(--mu, 1px)) calc(10 * var(--mu, 1px));
  background: #fff2c4; border: calc(3 * var(--mu, 1px)) solid var(--mm-navy); border-radius: calc(8 * var(--mu, 1px));
  box-shadow: 0 calc(3 * var(--mu, 1px)) 0 rgba(13, 23, 53, 0.5);
  color: #4a3400; z-index: 7;
}
.mcm-task[hidden] { display: none; }
.mcm-task b { font: bold calc(11 * var(--mu, 1px)) inherit; color: #a06d00; letter-spacing: 1.5px; }
.mcm-task h5 { margin: 0; font: bold calc(15 * var(--mu, 1px)) inherit; color: #3a2600; }
.mcm-task h5[hidden] { display: none; }
.mcm-task span:last-child { font: bold calc(12.5 * var(--mu, 1px)) inherit; line-height: 1.4; white-space: pre-line; }

.mcm-x { width: calc(24 * var(--mu, 1px)); height: calc(24 * var(--mu, 1px)); border: 0; background: none; color: var(--mm-muted); font-size: calc(16 * var(--mu, 1px)); line-height: 1; cursor: pointer; }
.mcm-x:hover { color: var(--mm-ink); }

/* ---- bottom control bar ---- */
.mcm-bottombar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  gap: calc(6 * var(--mu, 1px)); padding: calc(8 * var(--mu, 1px)) calc(14 * var(--mu, 1px));
  background: #f5f9ff; border-top: calc(3 * var(--mu, 1px)) solid var(--mm-navy);
}
.mcm-ctrl {
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--mu, 1px));
  min-width: calc(58 * var(--mu, 1px)); padding: calc(6 * var(--mu, 1px)) calc(6 * var(--mu, 1px));
  border: calc(2 * var(--mu, 1px)) solid transparent; border-radius: calc(8 * var(--mu, 1px));
  background: transparent; color: #2a3550;
  transition: background-color 120ms ease, transform 80ms ease;
}
.mcm-ctrl-ic { position: relative; display: flex; }
.mcm-ctrl svg { width: calc(20 * var(--mu, 1px)); height: calc(20 * var(--mu, 1px)); }
.mcm-caret { position: absolute; right: calc(-9 * var(--mu, 1px)); top: 0; color: #8a94a6; }
.mcm-caret svg { width: calc(11 * var(--mu, 1px)); height: calc(11 * var(--mu, 1px)); }
.mcm-ctrl span { font: bold calc(9.5 * var(--mu, 1px)) inherit; letter-spacing: 0.3px; white-space: nowrap; }
.mcm-ctrl:hover { background: var(--mm-panel); }
.mcm-ctrl:active { transform: scale(0.96); }
.mcm-ctrl.on { background: #ffe1e1; border-color: #e8a3a3; color: #c23a3a; }

/* Share Screen: a filled green circle, like the reference's active-tool button. */
.mcm-ctrl.mcm-green .mcm-ctrl-ic svg {
  background: #2fb865; color: #fff; border-radius: 50%;
  padding: calc(4 * var(--mu, 1px)); box-sizing: content-box;
  width: calc(16 * var(--mu, 1px)); height: calc(16 * var(--mu, 1px));
}
.mcm-ctrl.mcm-green span { color: #2fb865; }
.mcm-ctrl.mcm-green:hover { background: #eafcf1; }

.mcm-leave { background: #ffe1e1; border-color: #e8a3a3; color: #c23a3a; }
.mcm-leave:hover { background: #ffcccc; }
.mcm-leave svg { color: #ffffff; background: #e04747; border-radius: 50%; padding: calc(4 * var(--mu, 1px)); box-sizing: content-box; width: calc(15 * var(--mu, 1px)); height: calc(15 * var(--mu, 1px)); }

/* ---- Apps > Real-Time Translation: a right-side panel, sibling of the
   transcript panel above, so the video area shrinks the same flexbox way. ---- */
.mcm-rt-panel {
  flex: 0 0 calc(280 * var(--mu, 1px)); display: flex; flex-direction: column;
  background: #fff; border-left: calc(3 * var(--mu, 1px)) solid var(--mm-navy);
  animation: mcm-panel-in 180ms ease-out;
}
.mcm-rt-panel[hidden] { display: none; }
@keyframes mcm-panel-in { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.mcm-rt-panel > header {
  flex: 0 0 auto; display: flex; align-items: center; gap: calc(8 * var(--mu, 1px));
  padding: calc(10 * var(--mu, 1px)); border-bottom: calc(2 * var(--mu, 1px)) solid var(--mm-line);
  font: bold calc(13 * var(--mu, 1px)) inherit; color: var(--mm-ink);
}
.mcm-rt-panel > header > span { flex: 1; }
.mcm-rt-hint {
  flex: 0 0 auto; margin: 0; padding: calc(14 * var(--mu, 1px)) calc(14 * var(--mu, 1px)) 0;
  font: bold calc(12 * var(--mu, 1px)) inherit; line-height: 1.5; color: var(--mm-blue-dark);
}

/* Live transcript: what each speaker said, and (once a non-English
   Translation Display language is set) the translation underneath -
   appended as the script plays (speak(), mc-meeting.js), oldest first. */
.mcm-rt-feed {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0 calc(14 * var(--mu, 1px)) calc(14 * var(--mu, 1px));
  display: flex; flex-direction: column; gap: calc(12 * var(--mu, 1px));
  border-top: calc(2 * var(--mu, 1px)) solid var(--mm-line);
}
.mcm-rt-feed:empty { border-top: none; }
.mcm-rt-entry { display: flex; flex-direction: column; gap: calc(3 * var(--mu, 1px)); }
.mcm-rt-entry:first-child { margin-top: calc(12 * var(--mu, 1px)); }
.mcm-rt-entry-speaker { font: bold calc(10.5 * var(--mu, 1px)) inherit; color: var(--mm-muted); letter-spacing: 0.3px; text-transform: uppercase; }
.mcm-rt-entry-orig { font: calc(12.5 * var(--mu, 1px)) inherit; color: var(--mm-ink); line-height: 1.4; }
.mcm-rt-entry-trans { font: bold calc(12.5 * var(--mu, 1px)) inherit; color: var(--mm-blue-dark); line-height: 1.4; }

/* ---- Apps > Enable Caption: floating bilingual caption, bottom-centre ---- */
.mcm-livecaption {
  position: absolute; left: 50%; bottom: calc(14 * var(--mu, 1px)); transform: translateX(-50%);
  z-index: 3; max-width: 78%; min-width: 40%; max-height: 52%;
  padding: calc(10 * var(--mu, 1px)) calc(16 * var(--mu, 1px));
  background: rgba(8, 14, 32, 0.78); border-radius: calc(10 * var(--mu, 1px));
  backdrop-filter: blur(2px);
  text-align: center;
  overflow-y: auto;               /* the longer work-discussion lines can run to several paragraphs */
}
.mcm-livecaption[hidden] { display: none; }
.mcm-lc-speaker { font: bold calc(10.5 * var(--mu, 1px)) inherit; color: #9fd0ff; letter-spacing: 0.5px; margin-bottom: calc(3 * var(--mu, 1px)); }
.mcm-lc-orig { font: bold calc(14 * var(--mu, 1px)) inherit; color: #fff; line-height: 1.4; min-height: 1.4em; white-space: pre-line; }
.mcm-lc-trans { margin-top: calc(6 * var(--mu, 1px)); padding-top: calc(6 * var(--mu, 1px)); border-top: calc(1.5 * var(--mu, 1px)) dashed rgba(255, 255, 255, 0.25); font-size: calc(13 * var(--mu, 1px)); color: #ffd85e; line-height: 1.4; }
.mcm-lc-trans[hidden] { display: none; }
.mcm-lc-trans b { display: block; margin-bottom: calc(3 * var(--mu, 1px)); color: #9fd0ff; font-size: calc(10.5 * var(--mu, 1px)); }
.mcm-lc-trans span { white-space: pre-line; }

/* ---- Apps popup ---- */
.mcm-apps {
  /* fixed, like .mcm-popover: toggleApps() positions it from getBoundingClientRect(),
     which is viewport-relative - fixed positioning is what makes those px values correct. */
  position: fixed; z-index: 4; width: calc(300 * var(--mu, 1px));
  background: #fff; color: var(--mm-ink);
  border: calc(3 * var(--mu, 1px)) solid var(--mm-navy); border-radius: calc(10 * var(--mu, 1px));
  padding: calc(12 * var(--mu, 1px));
  box-shadow: 0 calc(5 * var(--mu, 1px)) 0 rgba(13, 23, 53, 0.4), 0 calc(10 * var(--mu, 1px)) calc(20 * var(--mu, 1px)) rgba(0, 0, 0, 0.3);
  animation: mcm-apps-in 140ms ease-out;
}
.mcm-apps[hidden] { display: none; }
@keyframes mcm-apps-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.mcm-apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--mu, 1px)); }
.mcm-app-item {
  display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--mu, 1px));
  padding: calc(10 * var(--mu, 1px)) calc(4 * var(--mu, 1px));
  border: calc(2 * var(--mu, 1px)) solid transparent; border-radius: calc(8 * var(--mu, 1px));
  background: transparent; color: #2a3550;
  transition: background-color 120ms ease, transform 80ms ease;
}
.mcm-app-item svg { width: calc(20 * var(--mu, 1px)); height: calc(20 * var(--mu, 1px)); color: var(--mm-blue-dark); }
.mcm-app-item span { font: bold calc(8 * var(--mu, 1px)) inherit; text-align: center; line-height: 1.25; overflow-wrap: break-word; }
.mcm-app-item:hover { background: var(--mm-panel); }
.mcm-app-item:active { transform: scale(0.96); }
.mcm-app-item.on { background: #e3f7ea; border-color: #7fd8a0; }
.mcm-app-item.on svg { color: #2fb865; }
.mcm-app-item.mcm-app-static { color: #9aa5b8; }
.mcm-app-item.mcm-app-static svg { color: #9aa5b8; }
.mcm-apps-more {
  display: block; width: 100%; margin-top: calc(10 * var(--mu, 1px));
  height: calc(28 * var(--mu, 1px));
  border: calc(2 * var(--mu, 1px)) solid #b9cbe6; border-radius: calc(6 * var(--mu, 1px));
  background: #f6faff; color: var(--mm-blue-dark); font: bold calc(11 * var(--mu, 1px)) inherit;
}
.mcm-apps-more:hover { background: var(--mm-panel); }

/* ---- mission checklist (inside the popover) ---- */
.mcm-check-row { padding: calc(4 * var(--mu, 1px)) 0; font-size: calc(12.5 * var(--mu, 1px)); color: var(--mm-muted); }
.mcm-check-row.done { color: #2fb865; font-weight: bold; }

/* ---- popovers (Meeting Details / Attendees) ---- */
.mcm-popover {
  position: fixed; z-index: 4; width: min(320px, 80vw);
  background: #fff; color: var(--mm-ink);
  border: calc(3 * var(--mu, 1px)) solid var(--mm-navy); border-radius: calc(8 * var(--mu, 1px));
  padding: calc(12 * var(--mu, 1px)) calc(14 * var(--mu, 1px));
  box-shadow: 0 calc(4 * var(--mu, 1px)) 0 rgba(13, 23, 53, 0.5);
  font-size: calc(12 * var(--mu, 1px));
}
.mcm-popover[hidden] { display: none; }
.mcm-popover h4 { margin: 0 0 calc(6 * var(--mu, 1px)); font-size: calc(13 * var(--mu, 1px)); }
.mcm-popover p { margin: 0 0 calc(4 * var(--mu, 1px)); color: var(--mm-muted); }
.mcm-pop-att { color: var(--mm-ink) !important; }
.mcm-pop-row { display: flex; align-items: center; gap: calc(8 * var(--mu, 1px)); padding: calc(4 * var(--mu, 1px)) 0; }
.mcm-pop-row img { width: calc(26 * var(--mu, 1px)); height: calc(26 * var(--mu, 1px)); border-radius: 50%; object-fit: cover; image-rendering: pixelated; }

/* ---- leave confirmation ---- */
.mcm-modal {
  position: fixed; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 22, 0.55);
}
.mcm-modal[hidden] { display: none; }
.mcm-modal-card {
  background: #fff; color: var(--mm-ink);
  border: calc(4 * var(--mu, 1px)) solid var(--mm-navy); border-radius: calc(10 * var(--mu, 1px));
  padding: calc(22 * var(--mu, 1px)) calc(26 * var(--mu, 1px));
  box-shadow: 0 calc(6 * var(--mu, 1px)) 0 rgba(13, 23, 53, 0.5);
  text-align: center; min-width: 260px;
}
.mcm-modal-card h3 { margin: 0 0 calc(16 * var(--mu, 1px)); font-size: calc(16 * var(--mu, 1px)); }
.mcm-modal-btns { display: flex; gap: calc(10 * var(--mu, 1px)); justify-content: center; }
.mcm-btn {
  height: calc(34 * var(--mu, 1px)); padding: 0 calc(18 * var(--mu, 1px));
  border: calc(2 * var(--mu, 1px)) solid #b9cbe6; border-radius: calc(8 * var(--mu, 1px));
  background: #fff; color: var(--mm-blue-dark); font: bold calc(12 * var(--mu, 1px)) inherit;
}
.mcm-btn:hover { background: var(--mm-panel); }
.mcm-btn-danger { background: #e04747; border-color: #b32f2f; color: #fff; }
.mcm-btn-danger:hover { background: #c93b3b; }

/* ---- AI Assistant: covers the meeting body+bottombar while open; the
   titlebar/topbar stay, so it still reads as part of the same app window. ---- */
.mcm-ai {
  position: absolute; left: 0; right: 0; top: calc(40 * var(--mu, 1px) + 52 * var(--mu, 1px)); bottom: 0;
  z-index: 5; display: flex; flex-direction: column;
  background: #eef5ff; color: var(--mm-ink);
  animation: mcm-panel-in 160ms ease-out;
}
.mcm-ai[hidden] { display: none; }

/* The supplied AI Assistant artwork is the page itself. All controls are
   transparent percentage-based hotspots inside the image coordinate space. */
.mcm-ai-image-shell {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #eaf3ff;
}
.mcm-ai-image-wrap {
  position: relative; height: 100%; max-width: 100%; aspect-ratio: 1535 / 1024;
}
.mcm-ai-image-wrap > img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.mcm-ai-hot { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; }
.mcm-ai-hot:hover, .mcm-ai-hot:focus-visible {
  outline: calc(3 * var(--mu, 1px)) solid rgba(20, 120, 240, 0.7);
  outline-offset: calc(-3 * var(--mu, 1px)); border-radius: calc(8 * var(--mu, 1px));
  background: rgba(20, 120, 240, 0.06);
}
.mcm-ai-name-patch {
  position: absolute; left: 27.3%; top: 20.2%; width: 44%; height: 13.9%;
  display: flex; flex-direction: column; justify-content: center;
  background: #fff; color: #0d1735; line-height: 1.35;
  padding-left: 0.4%;
}
.mcm-ai-name-patch strong { font-size: calc(19 * var(--mu, 1px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcm-ai-name-patch span { font-size: calc(15 * var(--mu, 1px)); font-weight: bold; }
.mcm-ai-name-patch i {
  display: inline-block; margin-left: calc(8 * var(--mu, 1px)); padding: calc(2 * var(--mu, 1px)) calc(7 * var(--mu, 1px));
  border-radius: calc(8 * var(--mu, 1px)); background: #dceaff; color: #557092;
  font-size: calc(11 * var(--mu, 1px)); font-style: normal; vertical-align: middle;
}

/* Reuse the game's existing player-thought box above the meeting overlay. */
#dialogueBox.mcm-meeting-thought { position: fixed; z-index: 300; }
.mcm-ai-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: calc(10 * var(--mu, 1px));
  height: calc(40 * var(--mu, 1px)); padding: 0 calc(14 * var(--mu, 1px));
  background: #fff; border-bottom: calc(2 * var(--mu, 1px)) solid var(--mm-line);
  font: bold calc(13 * var(--mu, 1px)) inherit;
}
.mcm-ai-back {
  display: inline-flex; align-items: center; gap: calc(4 * var(--mu, 1px));
  height: calc(28 * var(--mu, 1px)); padding: 0 calc(10 * var(--mu, 1px)) 0 calc(6 * var(--mu, 1px));
  border: 0; border-radius: calc(6 * var(--mu, 1px)); background: transparent; color: var(--mm-blue-dark);
  font: bold calc(12 * var(--mu, 1px)) inherit;
}
.mcm-ai-back:hover { background: var(--mm-panel); }
.mcm-ai-back svg { width: calc(14 * var(--mu, 1px)); height: calc(14 * var(--mu, 1px)); transform: rotate(90deg); }
.mcm-ai-body { flex: 1; min-height: 0; overflow-y: auto; padding: calc(22 * var(--mu, 1px)); }

.mcm-ai-home h3 { margin: 0 0 calc(8 * var(--mu, 1px)); font-size: calc(20 * var(--mu, 1px)); color: var(--mm-blue-dark); }
.mcm-ai-greet { margin: 0 0 calc(20 * var(--mu, 1px)); font-size: calc(14 * var(--mu, 1px)); line-height: 1.6; color: var(--mm-ink); }
.mcm-ai-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(12 * var(--mu, 1px)); max-width: calc(560 * var(--mu, 1px)); }
.mcm-ai-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--mu, 1px));
  padding: calc(16 * var(--mu, 1px)); text-align: left;
  border: calc(2 * var(--mu, 1px)) solid #cfe0f7; border-radius: calc(10 * var(--mu, 1px));
  background: #fff; transition: box-shadow 120ms ease, transform 80ms ease, border-color 120ms ease;
}
.mcm-ai-card svg { width: calc(22 * var(--mu, 1px)); height: calc(22 * var(--mu, 1px)); color: var(--mm-blue-dark); }
.mcm-ai-card b { font-size: calc(13.5 * var(--mu, 1px)); }
.mcm-ai-card span { font-size: calc(11.5 * var(--mu, 1px)); color: var(--mm-muted); line-height: 1.4; }
.mcm-ai-card:hover { border-color: var(--mm-blue); box-shadow: 0 calc(3 * var(--mu, 1px)) calc(10 * var(--mu, 1px)) rgba(20, 120, 240, 0.18); }
.mcm-ai-card:active { transform: scale(0.98); }
.mcm-ai-card-static { opacity: 0.62; }

.mcm-ai-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--mu, 1px)); height: 100%; color: var(--mm-muted); font-size: calc(13 * var(--mu, 1px)); }
.mcm-ai-spinner {
  width: calc(34 * var(--mu, 1px)); height: calc(34 * var(--mu, 1px));
  border: calc(4 * var(--mu, 1px)) solid #cfe0f7; border-top-color: var(--mm-blue);
  border-radius: 50%; animation: mcm-spin 0.8s linear infinite;
}
@keyframes mcm-spin { to { transform: rotate(360deg); } }

.mcm-ai-summary { width: 100%; max-width: calc(700 * var(--mu, 1px)); margin: 0 auto; }
.mcm-ai-done { display: inline-block; margin-bottom: calc(12 * var(--mu, 1px)); padding: calc(5 * var(--mu, 1px)) calc(12 * var(--mu, 1px)); border-radius: calc(6 * var(--mu, 1px)); background: #e3f7ea; color: #1f8a4c; font: bold calc(11.5 * var(--mu, 1px)) inherit; }
.mcm-ai-summary h3 { margin: 0 0 calc(10 * var(--mu, 1px)); font-size: calc(17 * var(--mu, 1px)); color: var(--mm-blue-dark); letter-spacing: 0.5px; }
.mcm-ai-summary h4 { margin: calc(16 * var(--mu, 1px)) 0 calc(6 * var(--mu, 1px)); font-size: calc(12.5 * var(--mu, 1px)); color: var(--mm-muted); letter-spacing: 0.5px; text-transform: uppercase; }
.mcm-ai-summary p { margin: 0 0 calc(4 * var(--mu, 1px)); font-size: calc(13 * var(--mu, 1px)); }
.mcm-ai-summary-list, .mcm-ai-actions ul { margin: 0; padding-left: calc(20 * var(--mu, 1px)); font-size: calc(13 * var(--mu, 1px)); line-height: 1.7; }
.mcm-ai-action-who { margin-top: calc(10 * var(--mu, 1px)); font: bold calc(12.5 * var(--mu, 1px)) inherit; color: var(--mm-ink); }
.mcm-ai-summary .mcm-btn { margin-top: calc(18 * var(--mu, 1px)); }

/* ---- Settings > Captions & Transcription > Translation Display -----------
   The reference picture (assets/meeting/settings-captions.png) IS the panel;
   real controls sit on top of it at the same percentages the picture's own
   rows fall at, the same technique SCREENS hotspots use elsewhere in the
   game (config.js) for the login/iMIP screens. Unlike the AI Assistant (which
   stretches to fill the meeting body), this is a centred card held at the
   picture's OWN aspect ratio, so those percentages land exactly - a
   stretched/letterboxed image would throw every hotspot off. ---- */
.mcm-settings-overlay {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 22, 0.5);
}
.mcm-settings-overlay[hidden] { display: none; }
.mcm-settings-img-wrap {
  position: relative;
  height: 94%;                       /* the wrap's height drives its width via aspect-ratio below */
  max-width: 94%;
  aspect-ratio: 1335 / 1178;
  box-shadow: 0 calc(10 * var(--mu, 1px)) calc(34 * var(--mu, 1px)) rgba(0, 0, 0, 0.5);
  border-radius: calc(10 * var(--mu, 1px));
  overflow: hidden;
}
.mcm-settings-img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.mcm-set-hot {
  position: absolute; padding: 0; border: 0; border-radius: calc(4 * var(--mu, 1px));
  background: transparent; cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.mcm-set-hot:hover { background: rgba(20, 120, 240, 0.10); box-shadow: inset 0 0 0 2px rgba(20, 120, 240, 0.35); }
.mcm-set-hot:active { background: rgba(20, 120, 240, 0.16); }
.mcm-set-hot-close { border-radius: 50%; }

/* A real, native <select> sitting exactly over the picture's own "Translation
   Display" box (settingsCaptionsHtml, mc-meeting.js): opaque and matching
   that box's own fill colour (sampled from the art) so it fully replaces the
   baked-in "English" instead of showing through it, and borderless so it
   reads as the SAME box - not a second one stacked on top - just now an
   actual working dropdown. Native `appearance` is kept so the browser draws
   its own dropdown arrow and its own real, working option list. */
.mcm-set-lang-select {
  position: absolute;
  appearance: auto;
  border: 0; border-radius: calc(4 * var(--mu, 1px));
  background: #f2f4fa;
  color: #1c2b4a; font: bold calc(14 * var(--mu, 1px)) inherit;
  padding: 0 calc(8 * var(--mu, 1px));
  cursor: pointer;
}
.mcm-set-lang-select:hover { background: #e6ecfa; }
.mcm-set-lang-select:focus { outline: calc(2 * var(--mu, 1px)) solid var(--mm-blue); outline-offset: 1px; }

/* ---- small toast ---- */
.mcm-toast {
  position: absolute; left: 50%; bottom: calc(76 * var(--mu, 1px)); transform: translate(-50%, 8px);
  padding: calc(8 * var(--mu, 1px)) calc(16 * var(--mu, 1px));
  background: var(--mm-navy); color: #fff;
  border: calc(2 * var(--mu, 1px)) solid var(--mm-line); border-radius: calc(8 * var(--mu, 1px));
  font-size: calc(12 * var(--mu, 1px));
  opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity 200ms ease, transform 200ms ease;
}
.mcm-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .mcm-rt-panel { flex-basis: calc(240 * var(--mu, 1px)); }
}

@media (prefers-reduced-motion: reduce) {
  .mcm-scrim, .mcm-stage, .mcm-avatar, .mcm-chip, .mcm-toast { transition-duration: 1ms !important; animation: none !important; }
}