/* Video call chrome (js/call/video-screen.js mounts into #screen-call-video,
 * around the full-bleed #nova-canvas the renderer draws into).
 * Top-left overlay: chevron-down · Nova · tabular timer · 3-bar meter.
 * Floating bottom tray on --surface with a 0.5px hairline, radius 24px,
 * auto-hidden after 3.5s idle. Loading overlay: mockup silhouette +
 * progress bar while the renderer bundle boots (voice-first). */

#screen-call-video {
  overflow: hidden;
}

.vv-root {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* ── Top-left overlay ────────────────────────────────────────────────── */

.vv-top {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.25s ease;
}
.vv-top.hidden {
  opacity: 0;
  pointer-events: none;
}
.vv-back {
  color: var(--text-2);
  width: 40px;
  height: 40px;
  margin-right: -4px;
}
.vv-back .icon {
  font-size: 18px;
}
.vv-name {
  font-size: 12px;
  color: var(--text-1);
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.vv-timer {
  font-size: 11px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* 3-bar connection meter */
.vv-meter {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
  margin-left: 6px;
}
.vv-meter i {
  width: 3px;
  border-radius: 1px;
  background: var(--meter-off);
}
.vv-meter i:nth-child(1) {
  height: 4px;
}
.vv-meter i:nth-child(2) {
  height: 7px;
}
.vv-meter i:nth-child(3) {
  height: 10px;
}
.vv-meter i.on {
  background: var(--online);
}

/* FPS counter — persistent top-right (deliberately NOT inside .vv-top, which
 * auto-hides with the tray); pointer-events off so it never eats the
 * pointermove/pointerdown that pokes the tray. */
.vv-fps {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  font-size: 11px;
  line-height: 40px; /* optically centred against the 40px top-bar buttons */
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Status caption (queue / reconnecting / waking up) */
.vv-caption {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 46px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* ── Bottom tray ─────────────────────────────────────────────────────── */

.vv-tray {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: 24px;
  box-shadow: var(--shadow-float);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.vv-tray.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}
.vv-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bubble-in);
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vv-btn .icon {
  font-size: 19px;
}
.vv-btn.vv-mute.active {
  background: var(--accent);
  color: var(--on-accent);
}
.vv-btn.vv-mute.ptt {
  border: 1.5px solid var(--accent-dim);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.vv-btn.vv-mute.held {
  background: var(--accent);
  color: var(--on-accent);
}
.vv-btn.vv-hangup {
  background: var(--danger);
  color: #fff;
}

/* ── Silhouette (mockup): 78px head + 150×108 rounded shoulders ─────── */

.vv-silhouette {
  position: relative;
  width: 150px;
  height: 170px;
  flex-shrink: 0;
}
.vv-sil-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--accent-disc);
}
.vv-sil-shoulders {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 150px;
  height: 108px;
  border-radius: 75px 75px 0 0;
  background: var(--accent-disc);
}

/* ── Loading overlay (renderer bundle boot) ──────────────────────────── */

.vv-loading {
  position: absolute;
  inset: 0;
  background: var(--stage);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 24px;
}
.vv-load-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 260px);
}
.vv-load-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bubble-in);
  overflow: hidden;
}
.vv-load-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.vv-load-text {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.5;
}
.vv-load-cancel {
  margin-top: 4px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: var(--hairline-w) solid var(--hairline);
  color: var(--text-2);
  font-size: 13px;
}

/* ── Pre-join ────────────────────────────────────────────────────────── */

.vv-stagefill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--stage);
}
.vv-pre-caption {
  font-size: 13px;
  color: var(--text-2);
}
.vv-note {
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  max-width: 300px;
  line-height: 1.5;
}
.vv-join {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 30px;
  border-radius: 25px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
}
.vv-join .icon {
  font-size: 19px;
}