/* The call (assets/meet-room.js). Dark on purpose: faces read better, and it
   is the same on the agent's side and the guest's. Navy is the site's. */
html.mr-open, html.mr-open body { overflow: hidden; }
.mr-root { position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column; background: #0d1117; color: #e8ecf1; font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.mr-root button { font: inherit; color: inherit; cursor: pointer; }
.mr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; min-height: 52px; }
.mr-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.mr-title b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.mr-note { color: #9aa6b5; font-size: 13px; }
.mr-rec { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(220, 53, 69, .16); color: #ff8a93; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.mr-rec[hidden] { display: none; }
.mr-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d5a; animation: mr-pulse 1.4s ease-in-out infinite; }
@keyframes mr-pulse { 50% { opacity: .35; } }
.mr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; border: 1px solid #2a3441; background: #161d27; }
.mr-chip:hover { background: #1d2733; }
.mr-chip svg { width: 16px; height: 16px; }

.mr-stage { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 0 14px; }
.mr-grid { flex: 1; min-width: 0; display: grid; gap: 10px; grid-template-columns: 1fr; grid-auto-rows: 1fr; align-content: stretch; }
.mr-grid[data-n="2"] { grid-template-columns: 1fr 1fr; }
.mr-grid[data-n="3"], .mr-grid[data-n="4"] { grid-template-columns: 1fr 1fr; }
.mr-grid[data-n="5"], .mr-grid[data-n="6"] { grid-template-columns: 1fr 1fr 1fr; }
.mr-tile { position: relative; overflow: hidden; border-radius: 12px; background: #161d27; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mr-tile video { width: 100%; height: 100%; object-fit: cover; background: #0b0f14; }
.mr-tile.me video { transform: scaleX(-1); }
.mr-tile.novideo video { opacity: 0; }
.mr-face { position: absolute; display: none; width: 88px; height: 88px; border-radius: 50%; background: #1d2733; color: #c9d3df; font-size: 30px; font-weight: 600; align-items: center; justify-content: center; }
.mr-tile.novideo .mr-face { display: flex; }
.mr-name { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(8, 11, 15, .66); font-size: 12.5px; }
.mr-tile.connecting::after { content: "Connecting..."; position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(8, 11, 15, .66); font-size: 12px; color: #c9a227; }

.mr-side { width: 290px; flex: none; overflow: auto; border-radius: 12px; background: #161d27; padding: 14px 16px; }
.mr-side[hidden] { display: none; }
.mr-side h4 { margin: 4px 0 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #9aa6b5; font-weight: 600; }
.mr-side h4:not(:first-child) { margin-top: 18px; }
.mr-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid #222c38; }
.mr-mini { padding: 4px 10px; border-radius: 6px; border: 1px solid #2f3b4a; background: transparent; font-size: 12.5px; margin-left: 6px; }
.mr-mini.primary { background: #e8ecf1; color: #0d1117; border-color: #e8ecf1; font-weight: 600; }
.mr-faint { color: #8894a3; }
.mr-small { font-size: 12.5px; margin-top: 16px; }

.mr-bar { display: flex; justify-content: center; gap: 10px; padding: 14px; flex-wrap: wrap; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.mr-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 9px 12px; border-radius: 12px; border: 1px solid #2a3441; background: #161d27; font-size: 12px; }
.mr-btn:hover { background: #1d2733; }
.mr-btn.off { background: #3a1f24; border-color: #5a2a31; color: #ffb3b9; }
.mr-btn.on { background: #e8ecf1; color: #0d1117; border-color: #e8ecf1; }
.mr-btn.danger { background: #c62f3c; border-color: #c62f3c; color: #fff; }
.mr-btn.danger:hover { background: #d63a47; }
.mr-btn:disabled { opacity: .5; cursor: default; }
.mr-btn em { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #c9a227; color: #0d1117; font-style: normal; font-weight: 700; font-size: 12px; line-height: 20px; text-align: center; }
.mr-btn em[hidden] { display: none; }

@media (max-width: 720px) {
  .mr-grid[data-n="2"] { grid-template-columns: 1fr; }
  .mr-grid[data-n="5"], .mr-grid[data-n="6"] { grid-template-columns: 1fr 1fr; }
  .mr-side { position: absolute; right: 10px; left: 10px; bottom: 96px; top: 60px; width: auto; z-index: 2; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
  .mr-btn { min-width: 58px; padding: 8px 8px; }
  .mr-chip span { display: none; }
}

/* ---- the guest's page before the call (meeting.html) ---- */
.mg-body { margin: 0; min-height: 100vh; background: #0d1117; color: #e8ecf1; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; align-items: center; justify-content: center; }
.mg-card { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); background: #161d27; border: 1px solid #222c38; border-radius: 16px; padding: 28px; }
.mg-card h1 { margin: 0 0 4px; font-size: 21px; font-weight: 600; }
.mg-sub { color: #9aa6b5; margin: 0 0 22px; }
.mg-card label { display: block; font-size: 13px; color: #9aa6b5; margin-bottom: 6px; }
.mg-card input[type="text"] { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid #2f3b4a; background: #0d1117; color: inherit; font: inherit; }
.mg-card input[type="text"]:focus { outline: 2px solid #c9a227; outline-offset: 1px; }
.mg-consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px; border-radius: 10px; background: rgba(220, 53, 69, .1); border: 1px solid rgba(220, 53, 69, .3); font-size: 13.5px; color: #e8ecf1; }
.mg-consent input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.mg-go { margin-top: 20px; width: 100%; padding: 12px; border: 0; border-radius: 10px; background: #e8ecf1; color: #0d1117; font: inherit; font-weight: 600; cursor: pointer; }
.mg-go:disabled { opacity: .5; cursor: default; }
.mg-err { color: #ff8a93; font-size: 13.5px; margin-top: 12px; min-height: 1.2em; }
.mg-wait { text-align: center; }
.mg-spin { width: 28px; height: 28px; margin: 6px auto 16px; border-radius: 50%; border: 3px solid #2f3b4a; border-top-color: #c9a227; animation: mg-spin 1s linear infinite; }
@keyframes mg-spin { to { transform: rotate(360deg); } }