/* Player Zoom — page styles on top of assets/product-theme.css (nanocosmos product theme).
 * Every color and font comes from the theme's tokens. Status uses only the two
 * brand accents: orange = attention / live, blue = connected / ready.
 * No looping animations (theme rule). */

body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ── Zoom viewport (shared by operator + viewer) ─────────────────────────── */
/* The clipping frame. Its aspect ratio follows the stream (--ar set from JS). */
.zoom-viewport { position: relative; overflow: hidden; aspect-ratio: var(--ar, 1.7778); max-width: 100%; background: #050607; }
/* The transformed layer. Everything inside it zooms. */
.zoom-layer { position: absolute; inset: 0; transform-origin: 0 0; }
.player-host { position: absolute; inset: 0; }
/* Local-file mode only. The NanoPlayer's own video element is left alone (its docs: read-only). */
.player-host video.local-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Small shared bits ───────────────────────────────────────────────────── */
.copy-btn { background: var(--panel); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted);
  padding: 4px 11px; font-size: 11.5px; font-family: var(--font-body); cursor: pointer; white-space: nowrap; }
.copy-btn:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.copy-btn:disabled { opacity: .5; cursor: not-allowed; }
.status-msg { font-size: 13px; min-height: 1em; }
.status-msg.ok { color: var(--accent-blue-hover); }
.status-msg.err { color: var(--accent-orange); }
.status-msg.loading { color: var(--text-muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chip.blue { background: var(--accent-blue); color: var(--text-on-accent); }
.chip.orange { background: var(--accent-orange); color: var(--text-on-accent); }
.chip.outline { border: 1px solid var(--border-strong); color: var(--text-primary); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.mode-toggle button { padding: 7px 16px; background: transparent; border: 0; color: var(--text-muted); font-family: var(--font-heading);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.mode-toggle button:hover { color: var(--text-primary); }
.mode-toggle button.active { background: var(--accent-orange); color: var(--text-on-accent); }
.mode-toggle button.active.blue { background: var(--accent-blue); }
.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent-blue); color: var(--accent-blue-hover); }
.btn-sm { padding: 6px 14px; font-size: 12.5px; }
.scroll-thin { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
kbd { font: 11px var(--font-mono); padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel-soft); color: var(--text-primary); }

/* ── Viewer (full-screen) ────────────────────────────────────────────────── */
.viewer-page { height: 100vh; overflow: hidden; background: #000; }
.viewer-stage { position: fixed; inset: 0; display: grid; place-items: center; }
.viewer-stage .zoom-viewport { width: min(100vw, calc(100vh * var(--ar, 1.7778))); }
.viewer-badge { position: fixed; top: 12px; left: 12px; z-index: 20; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; background: rgba(13, 23, 30, .78); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; backdrop-filter: blur(3px); }
.viewer-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-blue); }
.viewer-badge.off .dot { background: var(--text-muted); }
.viewer-badge b { color: var(--accent-orange); }
.viewer-audio { position: fixed; bottom: 14px; right: 14px; z-index: 20; }
.fatal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 24px;
  text-align: center; color: var(--accent-orange); background: rgba(5, 6, 7, .85); font-size: 15px; }