<!-- bim-viewport-3d — universal AEC interface component.
     Hosts the 3D viewer canvas. v0.0.1 recipe shows the placeholder
     surface; the runtime integration in app-workplace-bim mounts a
     xeokit-bim-viewer into this container.

     Mode prop: workplace (selection sync with SpatialTree, section
     planes editable, BCF viewpoint capture) | console (selection
     read-only; no edit affordances).

     Note: workplace integration is AGPL-3.0 due to xeokit coupling.
     Console integration may use a non-3D fallback (static SVG plan
     thumbnail) at v0.0.1 to preserve EUPL-1.2.
-->

<section class="bim-viewport-3d" data-mode="console" aria-label="3D viewport">
  <div class="bim-viewport-3d__chrome">
    <div class="bim-viewport-3d__navcube" aria-hidden="true">
      <span class="bim-viewport-3d__navcube-face">N</span>
    </div>
    <div class="bim-viewport-3d__toolbar" role="toolbar" aria-label="Viewport controls">
      <button type="button" aria-label="Fit to view" disabled>⌘⊕</button>
      <button type="button" aria-label="Section plane" disabled>▭</button>
      <button type="button" aria-label="Capture viewpoint" disabled>◉</button>
    </div>
  </div>
  <div class="bim-viewport-3d__canvas-host">
    <canvas class="bim-viewport-3d__canvas" aria-label="3D model canvas"
            width="800" height="600"></canvas>
    <p class="bim-viewport-3d__placeholder">
      Viewport mounts at runtime. xeokit-bim-viewer in workplace mode;
      static SVG plan-thumbnail in console mode (EUPL-1.2 boundary).
    </p>
  </div>
  <footer class="bim-viewport-3d__statusbar">
    <span class="bim-viewport-3d__coords">Camera: (0.000, 0.000, 0.000)</span>
    <span class="bim-viewport-3d__selection">No selection</span>
  </footer>
</section>

.bim-viewport-3d {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #e5e7eb;
}

.bim-viewport-3d__chrome {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 10;
}

.bim-viewport-3d__navcube {
  width: 4rem;
  height: 4rem;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.85rem;
}

.bim-viewport-3d__toolbar {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
  gap: 0.25rem;
}

.bim-viewport-3d__toolbar button {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  color: #1a1a1a;
  border-radius: 3px;
}

.bim-viewport-3d__toolbar button:hover:not([disabled]) {
  background: #e5e7eb;
}

.bim-viewport-3d__toolbar button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.bim-viewport-3d__canvas-host {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bim-viewport-3d__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.bim-viewport-3d__placeholder {
  position: absolute;
  color: #6b7280;
  font-size: 0.85rem;
  text-align: center;
  max-width: 24rem;
  margin: 0;
  padding: 0 1rem;
}

.bim-viewport-3d__statusbar {
  background: #0a0a0a;
  border-top: 1px solid #2a2a2a;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: #9ca3af;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}