/* Online mirror: the camera picture in .mr-view; the stage background is the ring light when it is on. */
.mr-stage { --mr-ring: 0px; --mr-ring-color: #fff; background: #000; }
@media (max-width: 600px) { .mr-stage:not(.is-full) { aspect-ratio: 3 / 4; max-height: 72vh; } }
.mr-stage.mr-ring-on { background: var(--mr-ring-color); }
.mr-view { position: absolute; inset: var(--mr-ring); overflow: hidden; background: #000; transition: inset .2s; }
.mr-ring-on .mr-view { border-radius: 14px; }
.mr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.mr-video[hidden] { display: none; }

.mr-start { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px; text-align: center; color: #fff; background: radial-gradient(circle at 50% 40%, #2a2f3a, #0d0f13 70%); }
.mr-start[hidden] { display: none; }
.mr-ic { width: 54px; height: 54px; opacity: .85; }
.mr-start .btn.primary { background: #fff; color: #111317; border-color: #fff; }
.mr-start-note { margin: 0; max-width: 34ch; font-size: .92rem; line-height: 1.45; color: #d6d9e0; }
.mr-start-note.mr-err { color: #ffd0d0; }

.mr-bar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5; display: flex; gap: 4px; padding: 4px;
  border-radius: 999px; background: rgba(20, 22, 28, .72); max-width: calc(100% - 16px); }
.mr-bar[hidden] { display: none; }
.mr-b { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: .86rem; padding: 7px 12px; min-height: 40px;
  border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; white-space: nowrap; }
.mr-b svg { width: 18px; height: 18px; flex-shrink: 0; }
.mr-b:hover { background: rgba(255, 255, 255, .14); }
.mr-b[aria-pressed="true"] { background: rgba(255, 255, 255, .22); }
.mr-stop { color: #ffb4b4; }
@media (max-width: 720px) { .mr-b span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mr-b { padding: 8px 11px; min-width: 44px; min-height: 44px; justify-content: center; } }
.is-full .mr-bar { bottom: max(16px, env(safe-area-inset-bottom)); transition: opacity .3s; }
.is-full.st-idle .mr-bar { opacity: 0; }
.is-full .mr-bar:focus-within { opacity: 1; }

.mr-note { margin-top: 10px; }
.mr-status:empty { display: none; }
.mr-select { width: 100%; margin-top: 6px; }
.mr-hide { display: none; }
.mr-stage .st-hint { bottom: 70px; }
.mr-stage.is-full .st-hint { bottom: max(80px, calc(env(safe-area-inset-bottom) + 64px)); }