.browser-viewport { display: grid; gap: 10px; margin: 20px 20px 0; }
.browser-viewport:empty { display: none; }
.browser-viewport-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.browser-viewport-head h3 { margin: 2px 0 0; font-size: 16px; }
.browser-viewport-actions { display: flex; gap: 8px; }
.browser-viewport-actions .primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.browser-viewport-status { margin: 0; color: var(--muted); font-size: 12px; }
.browser-viewport-status[data-state="UNAVAILABLE"] strong,
.browser-viewport-status[data-state="ERROR"] strong { color: var(--red); }
.browser-viewport-status[data-state="AGENT"] strong { color: var(--green); }
.browser-viewport-status[data-state="YOU"] strong,
.browser-viewport-status[data-state="ELSEWHERE"] strong,
.browser-viewport-status[data-state="RECONNECTING"] strong { color: var(--amber); }
/* noVNC scales the 1280x900 Bot Screen into this box (scaleViewport). */
.browser-screen { position: relative; width: 100%; max-width: 100%; aspect-ratio: 1280 / 900; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #111; }
.browser-viewport-status[data-state="YOU"] + .browser-screen { outline: 3px solid var(--amber); outline-offset: -1px; }
.legacy-demo > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; }
.legacy-demo[open] > summary { margin-bottom: 12px; }
@media (max-width: 1079px) {
  .browser-viewport { margin: 14px 12px 0; }
}