/* The live mirror (world-mirror.js): the view her yes opens. No buttons in the chat; inside the view only a close (×)
   and Stop. It sits above the chat's own composer (world-mirror.js sets its bottom), so the conversation goes on.
   Same palette as the chat (world-v2-group.css), light and dark, following the page's Appearance choice. */
:root {
  --wm-ink:#1E1418; --wm-plum:#5D2440; --wm-panel:#FBF7F2; --wm-in:#fff; --wm-muted:#76666E; --wm-line:#E6DCD3;
  --wm-focus:#2F7A63; --wm-stage:#120D10; --wm-on-stage:#F7ECEF; --wm-veil:rgba(18,13,16,.62);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --wm-ink:#F7ECEF; --wm-plum:#F0AAC8; --wm-panel:#251F23; --wm-in:#30262C; --wm-muted:#C8B5BE; --wm-line:#50404A;
    --wm-focus:#8CD9BD; --wm-stage:#0B080A; --wm-on-stage:#F7ECEF; --wm-veil:rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --wm-ink:#F7ECEF; --wm-plum:#F0AAC8; --wm-panel:#251F23; --wm-in:#30262C; --wm-muted:#C8B5BE; --wm-line:#50404A;
  --wm-focus:#8CD9BD; --wm-stage:#0B080A; --wm-on-stage:#F7ECEF; --wm-veil:rgba(0,0,0,.7);
}

.wm-sheet {
  position:fixed; left:0; right:0; top:0; bottom:0; z-index:1300; display:flex; flex-direction:column; background:var(--wm-panel);
  color:var(--wm-ink); font:500 15px/1.42 'Plus Jakarta Sans',sans-serif; color-scheme:light dark; animation:wm-in .2s ease-out;
  border-bottom:1px solid var(--wm-line);
}
.wm-sheet *, .wm-sheet *::before, .wm-sheet *::after { box-sizing:border-box; }
.wm-sheet [hidden] { display:none !important; }
.wm-sheet button { font:inherit; cursor:pointer; }
.wm-sheet :focus-visible { outline:3px solid var(--wm-focus); outline-offset:3px; }
.wm-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:4px 8px 4px 18px;
  padding-top:max(4px,env(safe-area-inset-top)); }
.wm-title { margin:0; font:700 20px/1.2 'Playfair Display',serif; }
.wm-close { width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--wm-ink); font-size:28px; line-height:1; }
.wm-close:hover { background:var(--wm-in); }
.wm-panel { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 16px 12px; width:100%;
  max-width:1080px; margin:0 auto; }
.wm-stage { position:relative; flex:1; min-height:0; width:100%; border-radius:16px; overflow:hidden; background:var(--wm-stage); }
.wm-out { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--wm-stage); }
.wm-self { position:absolute; right:12px; bottom:12px; width:26%; max-width:180px; aspect-ratio:3/4; object-fit:cover; border-radius:10px;
  border:2px solid var(--wm-on-stage); background:var(--wm-stage); }
.wm-flip { transform:scaleX(-1); }
.wm-timer { position:absolute; left:12px; top:12px; padding:4px 12px; border-radius:99px; background:var(--wm-veil); color:var(--wm-on-stage);
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.wm-hold { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; padding:24px; text-align:center;
  color:var(--wm-on-stage); font:600 18px/1.4 'Playfair Display',serif; animation:wm-breathe 2.4s ease-in-out infinite; }
.wm-sheet[data-state="ended"] .wm-stage, .wm-sheet[data-state="error"] .wm-stage { display:none; }
.wm-status { margin:0; min-height:1.4em; color:var(--wm-muted); text-align:center; max-width:560px; }
.wm-sheet[data-state="ended"] .wm-status, .wm-sheet[data-state="error"] .wm-status { color:var(--wm-ink); font-size:16px; margin-top:24px; }
.wm-stop { min-height:48px; padding:0 28px; border:0; border-radius:24px; background:var(--wm-plum); color:var(--wm-in); font-weight:700; }

@media (min-width:860px) {
  .wm-stage { flex:none; width:auto; height:min(100%, 640px); aspect-ratio:16/9; max-width:100%; }
  .wm-panel { justify-content:center; }
  .wm-self { width:22%; max-width:220px; aspect-ratio:16/9; }
}

@keyframes wm-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes wm-breathe { 0%, 100% { opacity:.65; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .wm-sheet, .wm-hold { animation:none; transition:none; }
}
.wm-sheet[data-reduced="true"], .wm-sheet[data-reduced="true"] .wm-hold { animation:none; }