/* Video visit, clinician side. Existing tokens only. */

body.vv-open { overflow: hidden; }

.vv-layer {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: #111820; color: #fff;
}
.vv-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; padding: 12px 16px;
  background: #1b2530; border-bottom: 1px solid #2b3744;
}
.vv-test {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: #c29b00; color: #1b1b1b; font-size: 11.5px; font-weight: 700;
}
.vv-status { font-size: 13.5px; color: #c9d3dc; margin-top: 2px; }
.vv-status.is-bad { color: #ffb4a8; }
.vv-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           font-size: 13px; color: #c9d3dc; }
.vv-link .btn { color: #fff; border-color: #44515e; background: transparent; }

.vv-stage { position: relative; flex: 1; min-height: 0; }
.vv-remote { position: absolute; inset: 0; display: flex;
             align-items: center; justify-content: center; }
.vv-remote video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vv-remote audio { display: none; }
.vv-waiting { font-size: 17px; color: #c9d3dc; text-align: center; padding: 0 24px; }
.vv-local {
  position: absolute; right: 16px; bottom: 16px;
  width: 200px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: #222; border: 2px solid #44515e;
}
.vv-local video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.vv-controls {
  display: flex; justify-content: center; gap: 12px; padding: 14px;
  background: #1b2530; border-top: 1px solid #2b3744;
}
.vv-btn {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  min-width: 120px; padding: 11px 18px; border-radius: 999px;
  border: 1px solid #44515e; background: #26323e; color: #fff;
}
.vv-btn[aria-pressed="true"] { background: #fff; color: #111820; }
.vv-btn:focus-visible { outline: 3px solid #7fb3ff; outline-offset: 2px; }
.vv-end { background: var(--stop, #c0392b); border-color: var(--stop, #c0392b); }

.vv-warn {
  padding: 8px 10px; border-left: 3px solid var(--warn);
  background: var(--warn-soft); border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .vv-local { width: 110px; right: 10px; bottom: 10px; }
  .vv-btn { min-width: 0; flex: 1; padding: 11px 8px; }
}