/*!
 * More Voices — the conference room (Version 9.8, plugin 0.9.0)
 * (c) 2026 COPAGACLUB.ETH LLC. All rights reserved.
 * Uses the theme's font; the box keeps its own light/dark surface, like the Ask AI box.
 * The meeting sits in a small frame; .is-big makes the same frame fill the screen.
 */
.mv-room {
  --mv-accent: #E4572E; --mv-room-bg: #F4F6FA; --mv-room-card: #FFFFFF; --mv-room-ink: #13233A; --mv-room-muted: #56657A; --mv-room-line: #D8DFE8; --mv-live: #1F9D55;
  background: var(--mv-room-bg); color: var(--mv-room-ink); border: 1px solid var(--mv-room-line); border-radius: 16px;
  padding: 18px; display: grid; gap: 12px; margin: 1.5em 0; max-width: 720px; font-size: 16px; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  .mv-room { --mv-room-bg: #142036; --mv-room-card: #0C1422; --mv-room-ink: #E9EEF5; --mv-room-muted: #A2B0C3; --mv-room-line: #263652; --mv-live: #3DDC84; }
}
.mv-room * { box-sizing: border-box; }
.mv-room__head { display: flex; gap: 10px; align-items: center; }
.mv-room__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--mv-room-line); }
.mv-room[data-state="live"] .mv-room__dot, .mv-room[data-state="in"] .mv-room__dot { background: var(--mv-live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mv-live) 25%, transparent); }
.mv-room__title { margin: 0; font-size: 1.15em; line-height: 1.3; color: inherit; }
.mv-room__status { margin: 0; color: var(--mv-room-muted); font-size: .92em; }
.mv-room__status > span:not(:empty) + span:not(:empty)::before { content: " "; }
.mv-room[data-state="none"] .mv-room__live, .mv-room:not([data-state="none"]) .mv-room__none { display: none; }
.mv-room__msg { font-weight: 600; color: var(--mv-room-ink); }
.mv-room__join { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.mv-room__join[hidden], .mv-room__frame[hidden] { display: none; }
.mv-room[data-state="none"] .mv-room__join { display: none; }
.mv-room__namewrap { display: grid; gap: 4px; flex: 1 1 200px; font-size: .86em; color: var(--mv-room-muted); }
.mv-room__name { font: inherit; font-size: 1rem; padding: 9px 12px; border: 1px solid var(--mv-room-line); border-radius: 10px; background: var(--mv-room-card); color: var(--mv-room-ink); width: 100%; min-width: 0; }
.mv-room__go, .mv-room__bar button { font: inherit; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 9px 18px; border: 1px solid var(--mv-accent); }
.mv-room__go { background: var(--mv-accent); color: #fff; }
.mv-room__host { background: transparent; color: var(--mv-accent); }
.mv-room__go:disabled { opacity: .5; cursor: default; }
.mv-room button:focus-visible, .mv-room__name:focus-visible { outline: 3px solid var(--mv-accent); outline-offset: 2px; }

/* the small frame inside the page */
.mv-room__frame { position: relative; width: 100%; max-width: 520px; min-width: 0; grid-template-columns: minmax(0, 1fr); border-radius: 12px; overflow: hidden; background: #0B1220; display: grid; grid-template-rows: auto 1fr; }
.mv-room__bar { display: flex; justify-content: space-between; gap: 8px; padding: 8px; background: #0B1220; }
.mv-room__bar button { padding: 6px 14px; font-size: .88em; background: #fff; color: #0B1220; border-color: #fff; }
.mv-room__leave { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.mv-room__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; }   /* no min-height: on a phone it would push the frame wider than the screen */

/* full screen: the same frame fills the screen (the meeting is not reloaded) */
.mv-room__frame.is-big { position: fixed; inset: 0; z-index: 2147483000; max-width: none; border-radius: 0; height: 100vh; height: 100dvh; }
.mv-room__frame.is-big .mv-room__stage { aspect-ratio: auto; min-height: 0; }
.mv-room__frame:fullscreen { max-width: none; border-radius: 0; }
html.mv-room-big, html.mv-room-big body { overflow: hidden; }

.mv-room__note { margin: 0; color: var(--mv-room-muted); font-size: .8em; }
@media (prefers-reduced-motion: no-preference) { .mv-room__dot { transition: background .2s; } }