:root { --bg:#0f1115; --panel:#1a1d24; --line:#2a2f3a; --me:#4ea1ff; --guest:#7ee081; --muted:#8a93a3; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, sans-serif; background:var(--bg); color:#e7eaf0; }
header { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); }
h1 { font-size:1.1rem; margin:0; }
h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:1rem 0 .35rem; }
.status { color:var(--muted); font-size:.85rem; }

/* App layout: fixed to the viewport (no page scroll) — panels scroll internally. The preview
   stage takes the space; the transcript gets a full-height sidebar; videos float on top. */
html, body { height:100%; overflow:hidden; }
.host-app { display:grid; grid-template-columns: minmax(340px, 420px) 1fr; gap:1rem; padding:1rem; height:calc(100vh - 53px); min-width:0; }
.guest-app { display:flex; flex-direction:column; gap:.5rem; padding:1rem; height:calc(100vh - 53px); }
@media (max-width:880px){
  html, body { overflow:auto; }
  .host-app{ grid-template-columns:1fr; height:auto; }
}

/* Floating, draggable video dock — the preview is the star; the faces ride on top. */
.videos.dock {
  position:fixed; right:1rem; bottom:1rem; z-index:50;
  display:flex; gap:.5rem; width:min(360px, 45vw);
  padding:.4rem; border-radius:12px; border:1px solid var(--line);
  background:rgba(15,18,23,.75); backdrop-filter:blur(6px);
  cursor:grab; touch-action:none; user-select:none;
}
.videos.dock.dragging { cursor:grabbing; }
.video-wrap { position:relative; flex:1 1 0; min-width:0; background:#000; border-radius:10px; overflow:hidden; aspect-ratio:16/9; }
.video-wrap video { width:100%; height:100%; object-fit:cover; }
.video-wrap label { position:absolute; left:.5rem; bottom:.4rem; background:rgba(0,0,0,.55); padding:.1rem .45rem; border-radius:5px; font-size:.75rem; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:1rem; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.controls { display:flex; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap; }
.controls.center { justify-content:center; }
input, button { font:inherit; padding:.45rem .6rem; border-radius:7px; border:1px solid var(--line); background:#0f1217; color:inherit; }
input { flex:1; min-width:8ch; }
button { background:#243042; cursor:pointer; }
button:hover:not(:disabled){ background:#2c3a50; }
button:active:not(:disabled){ background:#1b2331; transform:translateY(1px); }
button:disabled { opacity:.45; cursor:not-allowed; }

/* The transcript is the presenter's main instrument: it fills the sidebar's height. */
.transcript { flex:1; min-height:10rem; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding:.5rem; background:#0f1217; }
.line { margin:.15rem 0; }
.line.partial { opacity:.55; }
.who { font-weight:600; }
.who.me { color:var(--me); }
.who.guest { color:var(--guest); }

.results { max-height:160px; overflow-y:auto; }
.result { border-left:3px solid var(--me); padding:.3rem .5rem; margin:.3rem 0; background:#0f1217; border-radius:0 6px 6px 0; font-size:.9rem; }
.result.flag { border-left-color:#ffcf56; }
.result.error { border-left-color:#ff6b6b; }
.result.build { border-left-color:#7ee081; }
.result.reverted { border-left-color:#ff6b6b; }
button.on { background:#5a3540; border-color:#7a4a58; }

/* Live mock preview — the shared, clickable web app (not a screen-share). It IS the stage:
   the iframe flexes to fill everything the controls row leaves over. */
.preview.stage { display:flex; flex-direction:column; gap:.5rem; min-width:0; min-height:0; flex:1; }
.preview .controls { align-items:center; margin:0; flex-wrap:nowrap; }
.preview .controls h2 { margin:0; margin-right:auto; white-space:nowrap; }
.preview iframe {
  flex:1; width:100%; min-height:0; border:1px solid var(--line);
  border-radius:10px; background:#fff;
}
/* Empty stage before the host shares it. */
.preview:not(.active) iframe { background:#0f1217; }