/* ══════════════════════════════════════════════════
   STUDIO WORKSPACE
   Node-graph style canvas. Active when the topbar is in
   data-app-mode="studio". Hides the regular vp-canvas-wrap and
   surfaces a full-bleed grid with draggable asset nodes.
   ══════════════════════════════════════════════════ */

/* ── Asset library: in Studio mode show 3D Models + Images (=imgall) + image subtabs.
   Group tabs are hidden (Studio drives the visible category).
   - "textures" (3D tab) is removed to avoid duplicating "imgtextures"
   - imgall is relabelled "Images" via the .studio-label override
   - imgXxx subtabs are indented to show hierarchy ── */
body[data-studio-active] .asset-group-tabs{display:none !important;}
body[data-studio-active] .asset-side-item{display:none !important;}
/* Models (3D) + Images All + image subtabs */
body[data-studio-active] .asset-side-item[data-tab="models"],
body[data-studio-active] .asset-side-item[data-tab="imgall"],
body[data-studio-active] .asset-side-item[data-tab="imggraphics"],
body[data-studio-active] .asset-side-item[data-tab="imgtextures"],
body[data-studio-active] .asset-side-item[data-tab="imgthumbnails"],
body[data-studio-active] .asset-side-item[data-tab="imguntagged"]{
  display:flex !important;
}
/* "All" reads as "Images" in the studio context.
   Scope to the LABEL span only (excluding the .tab-count badge) so the
   replacement text doesn't double-render in the count pill. */
body[data-studio-active] .asset-side-item[data-tab="imgall"] span:not(.tab-count){
  /* hide the real "All" text and replace with the ::before */
  font-size:0;
}
body[data-studio-active] .asset-side-item[data-tab="imgall"] span:not(.tab-count)::before{
  content:'Images';
  font-size:12px;
}
/* Subtabs indented to convey hierarchy */
body[data-studio-active] .asset-side-item[data-tab="imggraphics"],
body[data-studio-active] .asset-side-item[data-tab="imgtextures"],
body[data-studio-active] .asset-side-item[data-tab="imgthumbnails"]{
  padding-left:22px !important;
  font-size:11px !important;
  opacity:.85;
}

/* ── Replace the scene/canvas outliner column with the Studio side panel ── */
body[data-studio-active] .scene-outliner-wrap{display:none !important;}
body[data-studio-active] #studioSide{display:flex !important;}
/* Hide the horizontal splitter (it sits between outliner and asset-library) */
body[data-studio-active] #outlinerHSplitter{display:none !important;}
/* Asset library header: show "ASSETS" title instead of group tabs in Studio.
   The label is a real span (.asset-lib-studio-label) hidden by default. */
body[data-studio-active] .asset-lib-studio-label{ display:inline-flex !important; }
/* Remove the old ::before approach (label is now a real element) */

/* ── Replace the inspector with the Studio inspector ── */
body[data-studio-active] #inspector3d{display:none !important;}
body[data-studio-active] #studioInspector{display:flex !important;}

/* Hide the AI drawer in Studio (skeleton stage) */
body[data-studio-active] #aiSplitter,
body[data-studio-active] #aiDrawer{display:none !important;}

/* ── Studio side panel ─────────────────────────────────────── */
.studio-side{
  display:none;
  /* Match the regular outliner column width so layout stays consistent. */
  width:380px;min-width:380px;max-width:50vw;
  flex:0 0 auto;
  flex-direction:column;
  background:var(--surface, #2a2d34);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  min-height:0;
}
.studio-side-head,
.studio-inspector-head{ display:none; }
.studio-side-empty{
  flex:1 1 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px;text-align:center;
  color:var(--text-muted, #888);
}
.studio-side-empty svg{width:42px;height:42px;opacity:.4;}
.studio-side-empty p{margin:0;font-size:12px;line-height:1.45;max-width:200px;}

/* ── Studio inspector ──────────────────────────────────────── */
.studio-inspector{
  display:none;
  flex:1 1 auto;
  flex-direction:column;
  background:var(--surface, #2a2d34);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  min-height:0;
}
.studio-inspector-empty{
  flex:1 1 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px;text-align:center;
  color:var(--text-muted, #888);
}
.studio-inspector-empty svg{width:42px;height:42px;opacity:.4;}
.studio-inspector-empty p{margin:0;font-size:12px;line-height:1.45;max-width:220px;}



.viewport-3d[data-app-mode="studio"] #vpCanvasWrap{display:none;}
.viewport-3d[data-app-mode="studio"] #vpStudio{display:flex;}
.viewport-3d[data-app-mode="studio"] #vpHeader,
.viewport-3d[data-app-mode="studio"] .vp-header{display:none;}

/* Hide the cfg/live-preview leftover when in studio */
.viewport-3d[data-app-mode="studio"] #cfgPreview{display:none;}

.vp-studio{
  flex:1 1 auto;
  display:none;
  position:relative;
  overflow:hidden;
  background:var(--bg, #1f2126);
}

/* Studio canvas: same neutral background as the 2D viewport placeholder. */
.studio-canvas{
  position:absolute;
  inset:0;
  overflow:hidden;
  cursor:default;
  background:var(--bg-inset);
}

/* Dotted-grid background — muted dots over the light background. */
.studio-grid{
  position:absolute;
  inset:-2000px;
  background-image:
    radial-gradient(circle, color-mix(in srgb,var(--text-muted) 18%,transparent) 1px, transparent 1.5px);
  background-size:24px 24px;
  pointer-events:none;
  z-index:0;
}

.studio-nodes{
  position:absolute;
  inset:0;
  z-index:1;
}

/* Drop-target visual hint while dragging an asset over the canvas */
.studio-canvas.drop-active{
  outline:2px dashed var(--accent, #6aa3ff);
  outline-offset:-12px;
}
.studio-canvas.panning{cursor:grabbing;}

/* Empty-state overlay — mirrors the .vp-placeholder look used in the
   2D/3D viewports for visual consistency across modes. */
.studio-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  color:var(--text-muted);
  pointer-events:none;
  z-index:2;
  text-align:center;
  padding:0 32px;
}
.studio-empty svg{
  width:80px;height:80px;margin-bottom:12px;opacity:.3;color:currentColor;
}
.studio-empty h3{margin:0 0 16px;font-size:13px;font-weight:500;color:var(--text-muted);}
.studio-empty p{margin:0;max-width:300px;font-size:10px;font-weight:400;line-height:1.5;color:var(--text-faint);}
.studio-canvas.has-nodes .studio-empty{display:none;}

/* ══ Node card ══════════════════════════════════════ */
.studio-node{
  position:absolute;
  width:180px;
  background:var(--bg-elev, #2a2d34);
  border:1px solid var(--border, #3a3d44);
  border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  user-select:none;
  display:flex;
  flex-direction:column;
  overflow:visible;
  transition:box-shadow .15s, border-color .15s;
}
.studio-node:hover{border-color:var(--accent, #6aa3ff);}
.studio-node.dragging{
  box-shadow:0 8px 22px rgba(0,0,0,.55);
  z-index:10;
}

.studio-node-header{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  font-size:11px;
  font-weight:600;
  color:var(--text-muted, #aaa);
  border-bottom:1px solid var(--border, #3a3d44);
  cursor:grab;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.studio-node-header svg{width:12px;height:12px;flex:0 0 auto;}
.studio-node.dragging .studio-node-header{cursor:grabbing;}

.studio-node-thumb{
  width:100%;
  height:120px;
  background:#15171c;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.studio-node-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.studio-node-thumb svg{width:48px;height:48px;color:var(--text-muted, #888);opacity:.6;}

.studio-node-name{
  padding:6px 10px 8px;
  font-size:12px;
  color:var(--text, #ddd);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Output pin (right-side dot) — interactive target for future wiring */
.studio-node-pin{
  position:absolute;
  top:50%;
  right:-8px;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent, #6aa3ff);
  border:2px solid var(--bg, #1f2126);
  cursor:crosshair;
  z-index:2;
  transition:transform .12s;
}
.studio-node-pin:hover{transform:translateY(-50%) scale(1.25);}