/* The agent viewer: a full-screen 3D showroom (the outpost renderer in studio mode, its chrome hidden), chapter tabs on
   top, a caption bottom-left, the customisation panel on the right (a bottom sheet on phones). The callouts live in
   the 3D scene, not here. Until the robot models are in, the stage, the tabs, the caption and the panel stay hidden and the
   loader shows the lens's progress. */
:root { --vw-bg: #05070b; --vw-card: rgba(9, 13, 19, 0.82); --vw-edge: rgba(255, 255, 255, 0.1); --vw-text: #e8eef3; --vw-soft: #9fb0bf;
  --vw-accent: #7fe3ff; --vw-font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; }
html, body { height: 100%; }
body.vw { margin: 0; overflow: hidden; background: var(--vw-bg); color: var(--vw-text); font: 14px/1.5 var(--vw-font); }
#vw-stage { position: fixed; inset: 0; opacity: 0; transition: opacity 0.9s; }
body.vw-ready #vw-stage { opacity: 1; }
/* the lens's own loading card: this page shows the progress in its loader instead, and keeps the stage hidden until the robots are real */
#vw-host .crew-loading { display: none; }
#vw-host { position: absolute; inset: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; pointer-events: none; }
#vw-host .crew-hud { display: none !important; }
#vw-drag { position: fixed; inset: 0; z-index: 1; touch-action: none; cursor: grab; }
#vw-drag.is-dragging, #vw-drag.is-moving { cursor: grabbing; }
#vw-drag.over-pane { cursor: move; }
body:not(.vw-ready) #vw-drag { pointer-events: none; }
body:not(.vw-ready) .vw-caption, body:not(.vw-ready) .vw-panel, body:not(.vw-ready) .vw-tabs { opacity: 0; pointer-events: none; }
.vw-caption, .vw-panel, .vw-tabs { transition: opacity 0.6s; }

.vw-top { position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 18px; padding: 14px 18px 10px;
  background: linear-gradient(180deg, rgba(5, 7, 11, 0.85), rgba(5, 7, 11, 0)); pointer-events: none; }
.vw-brand h1 { margin: 0; font-size: 20px; letter-spacing: 0.01em; }
.vw-kicker { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vw-accent); }
.vw-tabs { display: flex; gap: 6px; flex-wrap: wrap; pointer-events: auto; }
.vw-tabs button, .vw-panel button { font: 600 12.5px/1 var(--vw-font); color: var(--vw-text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.vw-tabs button[aria-selected="true"] { background: rgba(127, 227, 255, 0.2); border-color: rgba(127, 227, 255, 0.7); }
.vw-panel button.is-on { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.vw-tabs button:focus-visible, .vw-panel button:focus-visible, .vw-panel input:focus-visible { outline: 2px solid var(--vw-accent); outline-offset: 2px; }

.vw-caption { position: fixed; left: 18px; bottom: 20px; z-index: 3; width: min(430px, calc(100vw - 36px)); background: var(--vw-card); border: 1px solid var(--vw-edge);
  border-radius: 14px; padding: 14px 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vw-caption h2 { margin: 0 0 6px; font-size: 17px; }
.vw-caption p { margin: 0; color: #d4dde5; font-size: 14px; }

.vw-panel { position: fixed; right: 18px; top: 78px; z-index: 3; width: 330px; max-height: calc(100vh - 140px); overflow: auto; background: var(--vw-card);
  border: 1px solid var(--vw-edge); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vw-group { display: none; }
.vw-group.is-on { display: block; }
.vw-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.vw-row:last-child { margin-bottom: 0; }
.vw-label { flex: 0 0 58px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vw-soft); }
.vw-picks { display: flex; flex-wrap: wrap; gap: 5px; }
.vw-picks button { padding: 6px 10px; font-size: 12px; }
.vw-picks .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.vw-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 0; }
/* the slider takes what is left; when the buttons do not fit beside it they drop below it (the Auto button was cut off, 2026-09-23) */
.vw-ctx input[type="range"] { flex: 1 1 70px; min-width: 0; accent-color: #7fe3ff; }
.vw-val { font-variant-numeric: tabular-nums; color: var(--vw-soft); min-width: 42px; text-align: right; }
.vw-tools { justify-content: flex-end; }

#vw-loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; color: var(--vw-soft); letter-spacing: 0.04em; text-align: center; transition: opacity 0.5s; }
.vw-load-bar { display: block; width: 200px; height: 3px; margin: 12px auto 0; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.vw-load-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2e9bff, #7fe3ff); box-shadow: 0 0 8px rgba(127, 227, 255, 0.8); transition: width 0.3s; }
body.vw-ready #vw-loading { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  body.vw { font-size: 13px; }
  .vw-top { flex-direction: column; align-items: flex-start; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 8px; }
  .vw-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .vw-tabs button { white-space: nowrap; padding: 7px 10px; }
  .vw-panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 38vh; border-radius: 14px 14px 0 0; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .vw-caption { top: 104px; bottom: auto; left: 12px; width: calc(100vw - 24px); padding: 10px 12px; }
  .vw-caption h2 { font-size: 15px; }
  .vw-caption p { font-size: 12.5px; }
  }
@media (prefers-reduced-motion: reduce) { .vw-caption, .vw-panel, .vw-tabs, #vw-loading, #vw-stage, .vw-load-bar i { transition: none; } }

/* embed=stats (v9.1, 2026-09-24): inside the outpost lens's stats window, robot only */
body.vw-embed .vw-top, body.vw-embed .vw-panel, body.vw-embed .vw-caption { display: none; }
body.vw-embed #vw-loading span { font-size: 12px; }