.gnt-3d-host {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.gnt-3d-popup {
  display: flex;
  flex-direction: column;
  max-width: 94vw;
  max-height: 90vh;
  overflow: hidden;
}

.gnt-3d-popup .dxbl-popup-body,
.gnt-3d-popup .dxbl-popup-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.gnt-3d-popup .dxbl-popup-footer {
  flex: 0 0 auto;
}

.gnt-3d-popup-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.gnt-3d-popup-body .gnt-3d-host {
  flex: 1 1 auto;
  min-height: 0;
}

.gnt-3d-toolbar {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bs-secondary-bg, #f3f3f3);
  border-bottom: 1px solid #ddd;
}

.gnt-3d-status {
  margin-left: auto;
  opacity: 0.75;
  font-size: 0.9rem;
}

/* Same Eyeshot gradient as Host ApplyViewportBackground and WriteWebGL template.html
   (frm3DKWZ VL1): RGB(102,163,210) → white at 75% → RGB(245,245,245). */
.gnt-3d-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #66a3d2 0%, #ffffff 75%, #f5f5f5 100%);
}

.gnt-3d-stage--embedded {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

.gnt-3d-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Host encodes a contain-fit of this box (same aspect, capped maxW×maxH). */
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* Empty <video> paints black. Keep it invisible until the first decoded frame. */
.gnt-3d-video:not(.gnt-3d-video--live) {
  opacity: 0;
}

.gnt-3d-stage__waiting {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.75rem;
  background: linear-gradient(180deg, #66a3d2 0%, #ffffff 75%, #f5f5f5 100%);
}

.gnt-3d-stage:has(.gnt-3d-video--live) .gnt-3d-stage__waiting {
  display: none;
}

.gnt-3d-stage__status {
  max-width: calc(100% - 1.5rem);
  padding: 0.45rem 0.7rem;
  font-size: 0.8125rem;
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.72);
}

.gnt-3d-video::-webkit-media-controls,
.gnt-3d-video::-webkit-media-controls-enclosure,
.gnt-3d-video::-webkit-media-controls-overlay-enclosure,
.gnt-3d-video::-webkit-media-controls-overlay-play-button,
.gnt-3d-video::-webkit-media-controls-start-playback-button,
.gnt-3d-video::-webkit-media-controls-overflow-button,
.gnt-3d-video::-internal-media-controls-overflow-button,
.gnt-3d-video::-webkit-media-controls-toggle-closed-captions-button {
  display: none !important;
}

.gnt-3d-host--no-chrome .gnt-3d-stage--embedded {
  border-radius: 3px;
}

/* ---- Single-article 3D model editor (/articles/{id}/3d-model) ---------- */

/* The tool commands live in the page's top action bar (CrudDetailShell
   ExtraRibbonItems), like every other desktop-migrated page. This file only
   styles the editor body: context panel, stage and status line. */

.gnt-3d-editor__readonly {
  margin: 0.5rem 0.75rem;
}

/* Context panel left, single streaming viewport right. Never a second viewport. */
.gnt-3d-editor__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.gnt-3d-editor__context {
  flex: 0 0 28rem;
  min-width: 22rem;
  max-width: 42%;
  padding: 0.75rem;
  overflow-y: auto;
  background: var(--bs-body-bg, #fff);
  border-right: 1px solid #ddd;
}

.gnt-3d-editor__context-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.gnt-3d-editor__context-empty {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.7;
}

.gnt-3d-editor__props {
  margin: 0;
  font-size: 0.85rem;
}

.gnt-3d-editor__prop-group {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.15rem 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #eee;
}

.gnt-3d-editor__prop-group dt {
  font-weight: 600;
  opacity: 0.7;
}

.gnt-3d-editor__prop-group dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.gnt-3d-editor__context-note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* Caption left, editor right: the panel is wide enough for a fixed
   label column so Position X / Rotation Y / Min Z line up. */
.gnt-3d-editor__block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gnt-3d-editor__block-heading {
  margin: 0.75rem 0 0.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.7;
}

.gnt-3d-editor__form .dxbl-fl-cpt {
  flex: 0 0 10.5rem;
  min-width: 10.5rem;
  max-width: 10.5rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.gnt-3d-editor__block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.gnt-3d-editor__block-actions .dxbl-btn {
  flex: 1 1 auto;
  min-width: 6rem;
}

.gnt-3d-editor__result {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.6rem;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fafafa;
}

.gnt-3d-editor__result-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.6;
}

.gnt-3d-editor__result-value {
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.gnt-3d-editor__error {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #b02a37;
}

.gnt-3d-editor__stage {
  flex: 1 1 auto;
  min-width: 0;
}

.gnt-3d-editor__statusline {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  align-items: center;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  background: var(--bs-secondary-bg, #f3f3f3);
  border-top: 1px solid #ddd;
}

.gnt-3d-editor__selection {
  opacity: 0.8;
}

.gnt-3d-editor__hover {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* JS-owned: Blazor never writes children here, so a ::after from data-hover
   survives the next StateHasChanged. */
.gnt-3d-editor__hover[data-hover]::after {
  content: attr(data-hover);
}

.gnt-3d-editor__hud {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.gnt-3d-alert {
  margin: 1rem;
  padding: 0.75rem 0.75rem;
  background: #fff3cd;
  border: 1px solid #ffecb5;
  border-radius: 4px;
}

/* Sits above the viewport rather than replacing it: the last frame stays visible so the
   user can see what they were working on, but the banner makes it unmistakable that it is
   a still image and not a live stream. */
.gnt-3d-editor__session-lost {
  display: flex;
  flex: 0 0 auto;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 0.5rem 0;
  background: #f8d7da;
  border-color: #f1aeb5;
}

/* KWZ editor: WebGL/Stream chrome is a row above the canvas. Must not overlay
   the Eyeshot toolbar (home/zoom/pan) painted at the top of the viewport. */
#preview-col .dxbl-fl-cpt,
#preview-col .dxbl-fl-group-header,
.gnt-cf-gid-preview-col .dxbl-fl-cpt,
.gnt-cf-gid-preview-col .dxbl-fl-group-header,
#slot-preview > .dxbl-fl-cpt,
.dxbl-fl-item:has(.kwz-preview-slot) > .dxbl-fl-cpt {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}

#preview-col .gnt-cf-slot,
.gnt-cf-gid-preview-col .gnt-cf-slot,
.gnt-cf-slot:has(.kwz-preview-slot),
.gnt-cf-slot-item:has(.kwz-preview-slot) {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.kwz-preview-slot {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--dxds-color-border, #d1d5db);
  border-radius: 0;
  overflow: hidden;
  background: #f8fafc;
}

.kwz-preview-mode {
  flex: 0 0 auto !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.55rem;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--dxds-color-border, #d1d5db) !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  overflow: hidden;
}

.kwz-preview-mode__hint {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto !important;
}

.kwz-preview-mode__toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  gap: 0.15rem;
}

.kwz-preview-mode__toggle .dxbl-btn {
  box-shadow: none !important;
}

.kwz-preview-mode__toggle .dxbl-btn.dxbl-btn-secondary.dxbl-btn-text {
  font-weight: 400;
  color: var(--dxds-color-text-secondary, #64748b);
}

.kwz-preview-slot > .gnt-3d-host {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}