* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  display: grid;
  grid-template: auto 1fr auto / 1fr auto;
  background: #111; color: #eee;
  font: 15px system-ui, sans-serif;
}
header, footer { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding: 8px 12px; }
header { justify-content: space-between; }
footer { justify-content: center; }

button { background: #2a2a2a; color: inherit; border: 0; border-radius: 8px; padding: 10px 14px; font: inherit; cursor: pointer; }
button:hover { background: #3a3a3a; }
button.off { background: #8a2b2b; }
button.on { background: #2b6a3a; }

#stage { grid-area: 2 / 1; position: relative; min-height: 0; overflow: hidden; }
video { background: #000; border-radius: 10px; }
#screen, #remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Remote camera shrinks to a corner while a screen is shown. */
#stage.has-screen #remote { inset: auto; left: 12px; bottom: 12px; width: 220px; height: auto; aspect-ratio: 4/3; object-fit: cover; z-index: 1; }
#local { position: absolute; right: 12px; bottom: 12px; width: 180px; aspect-ratio: 4/3; object-fit: cover; transform: scaleX(-1); z-index: 2; }
#ink { position: absolute; pointer-events: none; z-index: 1; touch-action: none; }
#ink.active { pointer-events: auto; cursor: crosshair; }
#tools { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; }
#sharing { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #2b6a3a; padding: 6px 12px; border-radius: 8px; z-index: 2; }

#chat { grid-area: 2 / 2; width: 300px; display: flex; flex-direction: column; border-left: 1px solid #222; }
#messages { flex: 1; overflow-y: auto; padding: 10px; }
#messages p { margin: 0 0 8px; overflow-wrap: anywhere; }
#messages .me { color: #8fc; }
#chat-input { width: 100%; padding: 10px; background: #1c1c1c; color: inherit; border: 0; border-top: 1px solid #222; font: inherit; }

@media (max-width: 700px) {
  #chat { position: fixed; inset: 0 0 56px 0; width: auto; background: #111; z-index: 3; }
  #local { width: 110px; }
  #stage.has-screen #remote { width: 130px; }
}