/* ── 3D Preview — Page grid layout ──────── */

/* Gap size between panels */
:root{ --panel-gap:6px; }

.preview-content{
  display:flex;flex-direction:column;flex:1;overflow:hidden;
  padding:0 var(--panel-gap) var(--panel-gap) var(--panel-gap);
  background:var(--bg);
}
.preview-main{
  display:flex;flex:1;overflow:hidden;
  gap:var(--panel-gap);
}

/* ── Outliner wrapper (Scene + splitter + Options) ── */
.scene-outliner-wrap{
  width:380px;min-width:380px;max-width:50vw;display:flex;flex-direction:column;
  gap:var(--panel-gap);
  overflow:hidden;
}
.outliner-top-card{
  flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;
  background:var(--surface);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
}
.outliner-top-card.animating{transition:height .25s ease;}

/* Splitter base + variants → see components.css (.splitter.is-h / .is-v) */

/* ── Right column (inspector + AI drawer) ── */
.right-column{
  width:380px;min-width:380px;
  display:flex;flex-direction:column;
  gap:var(--panel-gap);
  overflow:hidden;
}
.inspector-3d.animating{transition:height .25s ease;}

/* ── Center column (viewport + asset library) ── */
.center-column{
  flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;
  gap:var(--panel-gap);
}

/* ── Preview fullscreen mode ── */
/* Side panels animate to width:0, asset library to height:0.
   Viewport stays in flow and fills naturally via flex:1. */
/* Side panels shrink */
.preview-fullscreen .scene-outliner-wrap,
.preview-fullscreen .right-column{
  width:0 !important;min-width:0 !important;opacity:0;overflow:hidden;pointer-events:none;
  padding:0;border:none;
}
.preview-fullscreen .splitter.is-h{
  width:0;margin:0;opacity:0;pointer-events:none;
}
/* Asset library + its resize handle fully collapse */
.preview-fullscreen #assetLibResize.splitter{
  display:none;
}
.preview-fullscreen .center-column > .asset-library{
  height:0 !important;min-height:0;opacity:0;overflow:hidden;pointer-events:none;
  box-shadow:none;border:none;padding:0;margin:0;
}
.preview-fullscreen .center-column{gap:0;}
.preview-fullscreen .preview-main{gap:0;}
/* Transitions (both directions) */
.scene-outliner-wrap,
.right-column{
  transition:width .35s cubic-bezier(.4,0,.2,1), min-width .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.splitter.is-h{
  transition:width .2s ease, margin .2s ease, opacity .15s ease;
}
.asset-library{
  transition:height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.center-column{
  transition:gap .2s ease;
}
.preview-main{
  transition:gap .2s ease;
}

/* ─── Scrollbar polish (cross-section) ── */
.scene-outliner ::-webkit-scrollbar,
.options-tree::-webkit-scrollbar,
.outliner-tree::-webkit-scrollbar,
#plRefTree::-webkit-scrollbar,
#canvasLayerTree::-webkit-scrollbar,
.insp3d-body::-webkit-scrollbar,
.asset-sidebar::-webkit-scrollbar,
.asset-lib-grid::-webkit-scrollbar,
.asset-lib-compact::-webkit-scrollbar,
.asset-lib-content::-webkit-scrollbar{width:5px;height:5px;}
.scene-outliner ::-webkit-scrollbar-thumb,
.options-tree::-webkit-scrollbar-thumb,
.outliner-tree::-webkit-scrollbar-thumb,
#plRefTree::-webkit-scrollbar-thumb,
#canvasLayerTree::-webkit-scrollbar-thumb,
.insp3d-body::-webkit-scrollbar-thumb,
.asset-sidebar::-webkit-scrollbar-thumb,
.asset-lib-grid::-webkit-scrollbar-thumb,
.asset-lib-compact::-webkit-scrollbar-thumb,
.asset-lib-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}