/* Public placement of the shared V2 Sally pane. */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
body { font-family: var(--font); font-size: var(--type-body); color: var(--text); color-scheme: dark; }
button, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Live room connected but no frame yet: the video must be visible for its frame callback to fire, so it is transparent until then. */
#sally-stage-video[data-pending] { opacity: 0; }

/* Green-screened live avatar: the keyed canvas shows Sally on black; the video stays rendered (frame callbacks) but invisible. */
#sally-stage-video[data-keyed] { opacity: 0; }
#sally-stage-keyed { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }