/* The guest page is a canvas and a caret. Every other visible element of the
   app lives in the session. */
html, body {
  margin: 0;
  min-height: 100%;
  background: #0c0d10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#stage { position: relative; line-height: 0; max-width: 100%; }

canvas {
  display: block;
  max-width: 100%;
  cursor: text;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Drawn here rather than streamed: the blink then runs at this display's own
   refresh rate instead of at the speed of the round trip, and an idle document
   produces no frames at all. */
#caret {
  position: absolute;
  width: 2px;
  background: #14161a;
  pointer-events: none;
  display: none;
}

#caret.blinking { animation: caret-blink 1.06s step-end infinite; }

@keyframes caret-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ---- Right-click menu -----------------------------------------------------
   Styled to match the OS/Chrome native context menu exactly, so it reads as
   real browser chrome — but only the items below are actually wired up. */
.ctx-menu {
  position: fixed; z-index: 1000;
  min-width: 210px;
  background: #303134;
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #e8e8ea;
  user-select: none;
}
.ctx-item { padding: 7px 20px; cursor: default; }
.ctx-item:hover:not(.disabled) { background: rgba(255,255,255,0.09); }
.ctx-item.disabled { color: rgba(255,255,255,0.35); }
.ctx-sep { height: 1px; background: rgba(255,255,255,0.12); margin: 6px 0; }

.ctx-icons { display: flex; padding: 4px 10px 2px; gap: 4px; }
.ctx-icon-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 30px; border-radius: 6px; color: #e8e8ea;
}
.ctx-icon-btn:hover { background: rgba(255,255,255,0.09); }
.ctx-icon-btn svg { display: block; }
.ctx-icon-btn svg path, .ctx-icon-btn svg rect { fill: currentColor; }

.ctx-toast {
  position: fixed; z-index: 1001;
  padding: 6px 12px;
  background: #303134; color: #e8e8ea;
  border-radius: 6px; font: 12px -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.ctx-toast.show { opacity: 1; }