/* DAAILOK Studio preview bugfix layer.
   Local overrides only; do not redefine the global design system. */

/* 1) Dark normal keeps the canonical normal-layout coordinate system.
   The editing frame must stay present because the 3D grid clips to this exact rect. */
html[data-studio-theme=dark][data-studio-layout=normal] body#daailokStudio .light-viewport-frame{
  display:block!important;
  background:transparent!important;
  border:1px solid #ffffff18!important;
  border-radius:18px!important;
  box-shadow:inset 0 1px 0 #ffffff08!important;
  box-sizing:border-box!important;
}
/* Dark normal reserved area must use the same base as the surrounding page, not legacy #17191c gray. */
html[data-studio-theme=dark][data-studio-layout=normal] body#daailokStudio .viewport-scene{
  background:#111315!important;
}
html[data-studio-theme=dark][data-studio-layout=normal] body#daailokStudio .right-panel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
html[data-studio-theme=dark][data-studio-layout=normal] body#daailokStudio :is(#layersPanel,.ai-panel,.properties-panel){
  filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.025)!important;
}

/* 2) Light compact uses the stable compact geometry from preview.css/studio-projects.css.
   Keep only a visual cleanup for the three top-right controls: no extra rectangular underlay. */
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio .viewport-hud-top{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Dark compact: use the page's own base color behind rounded viewport/timeline corners.
   This removes the legacy #050607 rectangular underlay without exposing the studio gradient. */
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio .main-workspace{
  position:relative!important;
  background:#0e1012!important;
}
/* Only paint the compact viewport/timeline gap with the page's current background material. */
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio .main-workspace::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:142px!important;
  height:var(--studio-panel-gap,10px)!important;
  pointer-events:none!important;
  z-index:3!important;
  background:#0a0c0e!important;
}
/* Route timeline now owns the entire lower editor area. The legacy compact
   10px workspace gap-paint used to sit at bottom:142px, but with the Route
   editor expanded that pseudo-element crosses actual track rows. Do not
   paint it in Route mode; retain it for ordinary Shot mode. */
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio
  .studio[data-route-timeline-mode="route"] .main-workspace::after{
  content:none!important;
  display:none!important;
}
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio .viewport{
  overflow:hidden!important;
  border-radius:14px!important;
  background-clip:padding-box!important;
  isolation:isolate!important;
}
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio :is(.viewport-scene,#previewCanvas){
  border-radius:inherit!important;
}
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio .timeline{
  overflow:hidden!important;
  border-radius:12px!important;
  background-clip:padding-box!important;
  isolation:isolate!important;
}
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio :is(.timeline-toolbar,.shot-strip){
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Dark compact: remove the legacy 68% height cap so Object Properties reaches the same bottom baseline as Shots. */
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio .properties-panel{
  max-height:none!important;
  height:auto!important;
  min-height:0!important;
  align-self:stretch!important;
}

/* Light compact: Object Properties shares the same bottom baseline as Shots. */
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio .properties-panel{
  max-height:none!important;
  height:auto!important;
  min-height:0!important;
  align-self:stretch!important;
}

/* 4) Property scrolling: vertical only, using the same glass tokens as the website scrollbar. */
html body#daailokStudio #propertyContent{
  overflow-x:hidden!important;
  scrollbar-width:thin;
  scrollbar-color:var(--ds-scroll-glass) transparent;
}
html body#daailokStudio #propertyContent::-webkit-scrollbar{
  width:8px!important;
  height:0!important;
}
html body#daailokStudio #propertyContent::-webkit-scrollbar-track{
  background:transparent!important;
}
html body#daailokStudio #propertyContent::-webkit-scrollbar-thumb{
  border:var(--ds-scroll-border)!important;
  border-radius:var(--ds-radius-pill)!important;
  background:var(--ds-scroll-glass)!important;
  box-shadow:var(--ds-scroll-shadow)!important;
}
html body#daailokStudio #propertyContent::-webkit-scrollbar-thumb:active{
  border:var(--ds-scroll-active-border)!important;
  background:var(--ds-scroll-active-glass)!important;
  box-shadow:var(--ds-scroll-active-shadow)!important;
}

/* 5) AI mode is plain text only. */
html body#daailokStudio .ai-mode,
html body#daailokStudio .ai-mode:is(:hover,:active,:focus,:focus-visible){
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:2px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:none!important;
  -webkit-text-stroke:0 transparent!important;
  filter:none!important;
  outline:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body#daailokStudio .ai-mode::before,
html body#daailokStudio .ai-mode::after,
html body#daailokStudio .ai-mode>canvas{
  content:none!important;
  display:none!important;
}

/* 6) Restore formal X/Y/Z color coding in the inspector without touching TransformControls. */
html body#daailokStudio #propertiesPanel .axis-input:nth-child(1)>span{
  color:#ef6b6b!important;
  background:rgba(224,91,91,.08)!important;
}
html body#daailokStudio #propertiesPanel .axis-input:nth-child(2)>span{
  color:#68c77d!important;
  background:rgba(88,191,115,.08)!important;
}
html body#daailokStudio #propertiesPanel .axis-input:nth-child(3)>span{
  color:#6e9cf1!important;
  background:rgba(93,143,240,.08)!important;
}

/* 7) Normal-mode HUD uses a single centered cell once label/chevron are hidden. */
html[data-studio-layout=normal] body#daailokStudio .viewport-hud-top{
  align-items:center!important;
}
html[data-studio-theme=dark][data-studio-layout=normal] body#daailokStudio .viewport-hud-top{
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:var(--ds-radius-pill)!important;
  background:#101213!important;
  box-shadow:0 18px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
html[data-studio-layout=normal] body#daailokStudio .viewport-hud-top .hud-dropdown{
  display:grid!important;
  place-items:center!important;
}
html[data-studio-layout=normal] body#daailokStudio .viewport-hud-top .hud-trigger{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:1fr!important;
  place-items:center!important;
  gap:0!important;
  padding:0!important;
}
html[data-studio-layout=normal] body#daailokStudio .viewport-hud-top .hud-main-icon{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  transform:none!important;
}

/* 8) Light panels keep a visible glass rim outside the rectangle without changing their geometry. */
html[data-studio-theme=light] body#daailokStudio :is(.layers-panel,.ai-panel,.properties-panel,.timeline,.light-viewport-frame){
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 5px 18px rgba(35,35,35,.14),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.06)!important;
}

/* 9) Light close control follows the same circular glass language. */
html[data-studio-theme=light] body#daailokStudio #clearSelection{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
}


/* Light compact scene extension + vertical-only liquid scrollbars. */
/* Extend only the rendered scene; keep the stable compact panel/grid geometry untouched. */
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio #viewport.light-compact-scene-extended{
  overflow:visible!important;
  z-index:0!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio #viewport.light-compact-scene-extended>.viewport-scene{
  position:absolute!important;
  left:var(--lc-scene-left,0)!important;
  right:var(--lc-scene-right,0)!important;
  top:var(--lc-scene-top,0)!important;
  bottom:var(--lc-scene-bottom,0)!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  overflow:hidden!important;
  z-index:1!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio #viewport.light-compact-scene-extended #previewCanvas{
  width:100%!important;
  height:100%!important;
  border-radius:0!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio :is(.topbar,#layersPanel,.right-panel,.timeline,#leftDrawer){
  z-index:30!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio #viewport.light-compact-scene-extended :is(.light-viewport-frame,.viewport-hud-top,.viewport-toolbox,.north-compass,.axis-gizmo,.light-workspace-controls){
  z-index:40!important;
}

/* Keep panel geometry; only the dedicated content areas scroll. */
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio :is(#layersPanel,#propertiesPanel,#leftDrawer .drawer-inner){
  overflow:hidden!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio #propertiesPanel{
  display:flex!important;
  flex-direction:column!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio :is(#layerList,#drawerContent,#propertyContent){
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:#f0cb7d transparent!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio #propertyContent{
  flex:1 1 auto!important;
  min-height:0!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio :is(#layerList,#drawerContent,#propertyContent)::-webkit-scrollbar{
  width:9px!important;
  height:0!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio :is(#layerList,#drawerContent,#propertyContent)::-webkit-scrollbar-track{
  background:rgba(255,255,255,.025)!important;
  border-radius:var(--ds-radius-pill)!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio :is(#layerList,#drawerContent,#propertyContent)::-webkit-scrollbar-thumb{
  min-height:38px!important;
  border:var(--ds-scroll-active-border)!important;
  border-radius:var(--ds-radius-pill)!important;
  background:var(--ds-scroll-active-glass)!important;
  box-shadow:var(--ds-scroll-active-shadow)!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio :is(#layerList,#drawerContent,#propertyContent)::-webkit-scrollbar-corner{
  background:transparent!important;
}



/* Bugfix 18 · AI assistant docked at the bottom-right in every preview studio layout.
   Keep production untouched; this file is preview-only and loads last. */
html[data-studio-layout=normal] body#daailokStudio .right-panel{
  grid-template-rows:minmax(0,1fr) minmax(0,1.15fr) 220px!important;
}
html[data-studio-layout=normal] body#daailokStudio .right-panel>.properties-panel{
  grid-row:2!important;
  min-height:0!important;
  height:100%!important;
  margin:0!important;
}
html[data-studio-layout=normal] body#daailokStudio .right-panel>.ai-panel{
  grid-row:3!important;
  min-height:220px!important;
  height:220px!important;
  max-height:220px!important;
  margin:0!important;
  padding:12px!important;
  overflow:hidden!important;
}

html[data-studio-layout=compact] body#daailokStudio .right-panel{
  display:contents!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
  grid-column:3!important;
  grid-row:1!important;
  align-self:end!important;
  justify-self:stretch!important;
  width:auto!important;
  height:220px!important;
  min-height:220px!important;
  max-height:220px!important;
  margin:0 var(--studio-panel-gap,10px) var(--studio-panel-gap,10px) 0!important;
  padding:12px!important;
  z-index:38!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.properties-panel{
  grid-column:3!important;
  grid-row:1!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  width:auto!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  margin:var(--studio-panel-gap,10px) var(--studio-panel-gap,10px) 240px 0!important;
  z-index:37!important;
}

html body#daailokStudio .ai-panel .ai-head{
  min-height:46px!important;
  height:46px!important;
}
html body#daailokStudio .ai-panel .ai-head h2{
  font-size:16px!important;
  line-height:21px!important;
  font-weight:600!important;
}
html body#daailokStudio .ai-panel .ai-head small{
  font-size:10px!important;
  line-height:14px!important;
}
html body#daailokStudio .ai-panel .ai-mode{
  min-height:28px!important;
  height:28px!important;
  padding:0 10px!important;
  font-size:11px!important;
}
html body#daailokStudio .ai-panel .ai-input-wrap textarea{
  height:128px!important;
  min-height:128px!important;
  padding:12px 44px 12px 12px!important;
  font-size:13px!important;
  line-height:1.55!important;
  resize:none!important;
}
html body#daailokStudio .ai-panel .ai-input-wrap textarea::placeholder{
  font-size:13px!important;
}
html body#daailokStudio .ai-panel .ai-input-wrap button{
  width:30px!important;
  height:30px!important;
  right:7px!important;
  bottom:7px!important;
  font-size:17px!important;
}
html body#daailokStudio .ai-panel .ai-chips button{
  font-size:10px!important;
}
html body#daailokStudio .ai-panel .ai-feedback{
  font-size:10px!important;
}

@media(max-width:1280px){
  html[data-studio-layout=normal] body#daailokStudio .right-panel{
    grid-template-rows:minmax(0,1fr) minmax(0,1.15fr) 204px!important;
  }
  html[data-studio-layout=normal] body#daailokStudio .right-panel>.ai-panel,
  html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
    height:204px!important;
    min-height:204px!important;
    max-height:204px!important;
  }
  html[data-studio-layout=compact] body#daailokStudio .right-panel>.properties-panel{
    margin-bottom:220px!important;
  }
  html body#daailokStudio .ai-panel .ai-input-wrap textarea{
    height:112px!important;
    min-height:112px!important;
    font-size:12px!important;
  }
}



/* Bugfix 19 · exact right-column edge alignment + framed AI send button.
   Preview only. Keep the property top and AI bottom flush with the 3D viewport. */
html[data-studio-layout=compact] body#daailokStudio .right-panel>.properties-panel{
  margin-top:0!important;
  margin-right:0!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
  margin-right:0!important;
  margin-bottom:0!important;
}

/* The compact workspace already owns the outer panel gap through body-grid padding.
   Do not add a second 8/10px margin on the right-column cards. */
@media(max-width:1280px){
  html[data-studio-layout=compact] body#daailokStudio .right-panel>.properties-panel{
    margin-top:0!important;
    margin-right:0!important;
  }
  html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
    margin-right:0!important;
    margin-bottom:0!important;
  }
}

/* Clear rectangular frame around the bottom-right execute control. */
html body#daailokStudio .ai-panel .ai-input-wrap #aiSend{
  border:1px solid var(--ds-studio-editor-edge,rgba(255,255,255,.13))!important;
  border-radius:7px!important;
  box-shadow:
    0 5px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
}
html body#daailokStudio .ai-panel .ai-input-wrap #aiSend:hover,
html body#daailokStudio .ai-panel .ai-input-wrap #aiSend:focus-visible{
  border-color:rgba(255,255,255,.22)!important;
}



/* Bugfix 21 · keep project-card liquid-glass rims visible on hover.
   The optical canvas extends 8-9px outside each card, so reserve that breathing room
   and lift the hovered card above its siblings instead of clipping the rim. */
html body#daailokStudio .asset-pane[data-asset-pane="projects"],
html body#daailokStudio .project-list{
  overflow:visible!important;
}
html body#daailokStudio .project-card{
  position:relative!important;
  overflow:visible!important;
}
html body#daailokStudio .project-card[data-glass-live],
html body#daailokStudio .project-card:hover,
html body#daailokStudio .project-card:focus-visible{
  z-index:6!important;
}



/* Bugfix 24 · reserve a real optical gutter inside the project scroll viewport.
   The liquid-glass renderer draws ~9px outside each project button. The drawer
   itself is a scroll container, so overflow:visible on the card cannot escape it.
   Keep cards inside a 10px safe area instead of relying on overflow escaping. */
html body#daailokStudio .asset-pane[data-asset-pane="projects"]{
  padding-left:10px!important;
  padding-right:10px!important;
  padding-bottom:10px!important;
  box-sizing:border-box!important;
}
html body#daailokStudio .asset-pane[data-asset-pane="projects"]>.project-pane-head{
  padding-left:0!important;
  padding-right:0!important;
}
html body#daailokStudio .asset-pane[data-asset-pane="projects"]>.project-list{
  padding-top:10px!important;
  padding-bottom:10px!important;
  box-sizing:border-box!important;
}
html body#daailokStudio .asset-pane[data-asset-pane="projects"] .project-card{
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}



/* Bugfix 25 · project drawer scroll belongs to the project records only.
   Keep the drawer title, project tabs and project-section heading fixed. */
html body#daailokStudio #drawerContent[data-tool="assets"]{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"]>.asset-cloud-head{
  flex:0 0 auto!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"]>#assetLibrary{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"]>#assetLibrary>.asset-pane{
  min-height:0!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"]>#assetLibrary>.asset-pane.active{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] .project-pane-head,
html body#daailokStudio #drawerContent[data-tool="assets"] .project-manager-note{
  flex:0 0 auto!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] :is(#projectList,#projectManagerList){
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--ds-optical-accent,#f0cb7d) transparent!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] :is(#projectList,#projectManagerList)::-webkit-scrollbar{
  width:9px!important;
  height:0!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] :is(#projectList,#projectManagerList)::-webkit-scrollbar-track{
  background:rgba(255,255,255,.025)!important;
  border-radius:var(--ds-radius-pill)!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] :is(#projectList,#projectManagerList)::-webkit-scrollbar-thumb{
  min-height:38px!important;
  border:var(--ds-scroll-active-border)!important;
  border-radius:var(--ds-radius-pill)!important;
  background:var(--ds-scroll-active-glass)!important;
  box-shadow:var(--ds-scroll-active-shadow)!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] :is(#projectList,#projectManagerList)::-webkit-scrollbar-corner{
  background:transparent!important;
}

/* The project cards still need their 10px optical breathing room inside this
   dedicated scrolling viewport. */
html body#daailokStudio #drawerContent[data-tool="assets"] .asset-pane[data-asset-pane="projects"]{
  padding:0!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] #projectList{
  padding:10px!important;
  box-sizing:border-box!important;
}



/* Bugfix 26 · home drawer optical gutter.
   The liquid-glass hover canvas extends ~9px beyond the New 3D Scene button.
   Keep the button 10px inside the drawer scroll viewport so both side rims stay visible. */
html body#daailokStudio #drawerContent[data-tool="home"]>.home-panel{
  padding-left:10px!important;
  padding-right:10px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
html body#daailokStudio #drawerContent[data-tool="home"] .drawer-item[data-action="new-scene"]{
  width:100%!important;
  max-width:100%!important;
  position:relative!important;
  overflow:visible!important;
}
html body#daailokStudio #drawerContent[data-tool="home"] .drawer-item[data-action="new-scene"][data-glass-live],
html body#daailokStudio #drawerContent[data-tool="home"] .drawer-item[data-action="new-scene"]:hover,
html body#daailokStudio #drawerContent[data-tool="home"] .drawer-item[data-action="new-scene"]:focus-visible{
  z-index:6!important;
}



/* Bugfix 27 · character creation progress lives directly under New 3D Humanoid.
   Preview only; neutral liquid-glass language with accent reserved for progress. */
html body#daailokStudio .character-create-progress{
  display:grid!important;
  gap:7px!important;
  margin:7px 0 10px!important;
  padding:9px 10px!important;
  border:1px solid var(--ds-studio-editor-edge,rgba(255,255,255,.13))!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.025)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html body#daailokStudio .character-create-progress[hidden]{
  display:none!important;
}
html body#daailokStudio .character-create-progress-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-width:0!important;
  font-size:10px!important;
  line-height:1.35!important;
}
html body#daailokStudio .character-create-progress-head>span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:rgba(235,238,235,.76)!important;
}
html body#daailokStudio .character-create-progress-head>em{
  flex:0 0 auto!important;
  font-style:normal!important;
  color:rgba(235,238,235,.54)!important;
}
html body#daailokStudio .character-create-progress-track{
  position:relative!important;
  height:4px!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
}
html body#daailokStudio .character-create-progress-track>i{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:var(--ds-optical-accent,#f0cb7d)!important;
  box-shadow:0 0 10px rgba(var(--ds-optical-accent-rgb),.20)!important;
  transition:width .24s cubic-bezier(.2,.8,.2,1)!important;
}
html body#daailokStudio .character-create-progress[data-stage="success"]{
  border-color:rgba(255,255,255,.18)!important;
}
html body#daailokStudio .character-create-progress[data-stage="failed"] .character-create-progress-track>i{
  opacity:.45!important;
  box-shadow:none!important;
}



/* Bugfix 27 · unified AI assistant attachment composer.
   Preview only. Attachments live inside the existing liquid-glass input without
   changing the studio's neutral border language. */
html body#daailokStudio .ai-input-wrap{
  position:relative!important;
}
html body#daailokStudio .ai-input-wrap #aiAttach{
  position:absolute!important;
  right:44px!important;
  bottom:7px!important;
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid var(--ds-studio-editor-edge,rgba(255,255,255,.13))!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.025)!important;
  color:rgba(235,238,235,.78)!important;
  font-size:18px!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
  z-index:4!important;
}
html body#daailokStudio .ai-input-wrap #aiAttach:hover,
html body#daailokStudio .ai-input-wrap #aiAttach:focus-visible{
  border-color:rgba(255,255,255,.22)!important;
  background:rgba(255,255,255,.05)!important;
}
html body#daailokStudio .ai-input-wrap.has-attachment textarea{
  padding-top:48px!important;
}
html body#daailokStudio .ai-attachment-chip{
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  top:8px!important;
  height:34px!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr) 24px!important;
  align-items:center!important;
  gap:7px!important;
  padding:3px 5px!important;
  box-sizing:border-box!important;
  border:1px solid var(--ds-studio-editor-edge,rgba(255,255,255,.13))!important;
  border-radius:8px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 5px 14px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(12px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.15)!important;
  z-index:5!important;
}
html body#daailokStudio .ai-attachment-chip[hidden]{
  display:none!important;
}
html body#daailokStudio .ai-attachment-chip>img,
html body#daailokStudio .ai-attachment-file{
  width:28px!important;
  height:28px!important;
  border-radius:6px!important;
  object-fit:cover!important;
}
html body#daailokStudio .ai-attachment-file{
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.11)!important;
  background:rgba(255,255,255,.035)!important;
  font-size:13px!important;
}
html body#daailokStudio .ai-attachment-meta{
  display:grid!important;
  min-width:0!important;
  gap:1px!important;
}
html body#daailokStudio .ai-attachment-meta b{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:10.5px!important;
  font-weight:600!important;
}
html body#daailokStudio .ai-attachment-meta small{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:8.5px!important;
  opacity:.62!important;
}
html body#daailokStudio #aiAttachmentRemove{
  width:24px!important;
  height:24px!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:6px!important;
  background:transparent!important;
  color:rgba(235,238,235,.68)!important;
  font-size:16px!important;
  line-height:1!important;
}
html body#daailokStudio #aiAttachmentRemove:hover{
  border-color:rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.05)!important;
  color:rgba(255,255,255,.92)!important;
}
html[data-studio-theme="light"] body#daailokStudio .ai-input-wrap #aiAttach,
html[data-studio-theme="light"] body#daailokStudio .ai-attachment-chip{
  border-color:rgba(255,255,255,.24)!important;
}



/* Bugfix 28 · one right-column width in normal/compact + taller AI composer.
   Preview only. Compact mode is the width authority: 300px desktop / 270px <=1280. */
html body#daailokStudio{
  --daailok-right-column-width:300px;
}
html[data-studio-layout=compact] body#daailokStudio .body-grid,
html[data-studio-layout=compact] body#daailokStudio .body-grid.drawer-open{
  grid-template-columns:220px minmax(0,1fr) var(--daailok-right-column-width)!important;
}
html[data-studio-layout=normal] body#daailokStudio .right-panel{
  width:var(--daailok-right-column-width)!important;
}

/* Normal mode draws the viewport beneath the floating inspector column. Keep
   every right-side HUD exclusion tied to the same width as the inspector. */
html[data-studio-layout=normal] body#daailokStudio .viewport::before{
  width:calc(var(--daailok-right-column-width) + 8px)!important;
}
html[data-studio-layout=normal] body#daailokStudio .viewport::after,
html[data-studio-layout=normal] body#daailokStudio .light-viewport-frame{
  right:calc(var(--daailok-right-column-width) + 8px)!important;
}
html[data-studio-layout=normal] body#daailokStudio .viewport-hud-top{
  right:calc(var(--daailok-right-column-width) + 22px)!important;
}
html[data-studio-layout=normal] body#daailokStudio .axis-gizmo{
  right:calc(var(--daailok-right-column-width) + 24px)!important;
}
html[data-studio-layout=normal] body#daailokStudio .timeline{
  right:calc(var(--daailok-right-column-width) + 18px)!important;
}

/* Taller assistant in both layouts. Keep its bottom edge aligned with the
   viewport and reserve exactly the same space above it for properties. */
html[data-studio-layout=normal] body#daailokStudio .right-panel{
  grid-template-rows:minmax(0,1fr) minmax(0,1.15fr) 260px!important;
}
html[data-studio-layout=normal] body#daailokStudio .right-panel>.ai-panel,
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
  height:260px!important;
  min-height:260px!important;
  max-height:260px!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.properties-panel{
  margin-bottom:280px!important;
}
html body#daailokStudio .ai-panel .ai-input-wrap textarea{
  height:158px!important;
  min-height:158px!important;
  padding-right:82px!important;
}
html body#daailokStudio .ai-input-wrap #aiAttach{
  right:44px!important;
  bottom:7px!important;
}
html body#daailokStudio .ai-input-wrap #aiSend{
  right:7px!important;
  bottom:7px!important;
}

@media(max-width:1280px){
  html body#daailokStudio{
    --daailok-right-column-width:270px;
  }
  html[data-studio-layout=compact] body#daailokStudio .body-grid,
  html[data-studio-layout=compact] body#daailokStudio .body-grid.drawer-open{
    grid-template-columns:200px minmax(0,1fr) var(--daailok-right-column-width)!important;
  }
  html[data-studio-layout=normal] body#daailokStudio .right-panel{
    grid-template-rows:minmax(0,1fr) minmax(0,1.15fr) 244px!important;
  }
  html[data-studio-layout=normal] body#daailokStudio .right-panel>.ai-panel,
  html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
    height:244px!important;
    min-height:244px!important;
    max-height:244px!important;
  }
  html[data-studio-layout=compact] body#daailokStudio .right-panel>.properties-panel{
    margin-bottom:260px!important;
  }
  html body#daailokStudio .ai-panel .ai-input-wrap textarea{
    height:142px!important;
    min-height:142px!important;
  }
}


/* Bugfix 31 · one spacing token for normal and compact right-side geometry.
   Preview only. Compact spacing is the reference; normal mode now keeps the
   same viewport-to-panel gutter and the same panel-to-panel gap. */
html body#daailokStudio{
  --daailok-panel-gap:10px;
  --daailok-ai-panel-height:260px;
}
html[data-studio-layout=normal] body#daailokStudio,
html[data-studio-layout=compact] body#daailokStudio{
  --studio-panel-gap:var(--daailok-panel-gap)!important;
}

/* Normal mode: right cards already sit one gap in from the outer edge.
   Reserve width + two gaps for the visible viewport so one full gap remains
   between the viewport and the right-card column, exactly like compact mode. */
html[data-studio-layout=normal] body#daailokStudio .viewport::before{
  width:calc(var(--daailok-right-column-width) + var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
}
html[data-studio-layout=normal] body#daailokStudio .viewport::after,
html[data-studio-layout=normal] body#daailokStudio .light-viewport-frame{
  right:calc(var(--daailok-right-column-width) + var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
}
html[data-studio-layout=normal] body#daailokStudio .timeline{
  right:calc(var(--daailok-right-column-width) + var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
}
html[data-studio-layout=normal] body#daailokStudio .right-panel{
  gap:var(--daailok-panel-gap)!important;
  grid-template-rows:minmax(0,1fr) minmax(0,1.15fr) var(--daailok-ai-panel-height)!important;
}
html[data-studio-layout=normal] body#daailokStudio .right-panel>.ai-panel,
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
  height:var(--daailok-ai-panel-height)!important;
  min-height:var(--daailok-ai-panel-height)!important;
  max-height:var(--daailok-ai-panel-height)!important;
}

/* Compact mode previously reserved 20/16px between Properties and AI while
   normal used 10px. Reserve exactly AI height + the shared gap instead. */
html[data-studio-layout=compact] body#daailokStudio .right-panel>.properties-panel{
  margin-bottom:calc(var(--daailok-ai-panel-height) + var(--daailok-panel-gap))!important;
}

@media(max-width:1280px){
  html body#daailokStudio{
    --daailok-panel-gap:8px;
    --daailok-ai-panel-height:244px;
  }
}


/* Bugfix 32 · compact theme parity and viewport-edge alignment.
   Preview only. Keep light/dark compact panels on one footprint, use the left
   toolbox radius as the authority for viewport controls, and align the right
   inspector stack to the actual viewport row instead of the lower timeline. */
html body#daailokStudio{
  --daailok-viewport-control-size:42px;
  --daailok-viewport-control-radius:9px;
  --daailok-compact-timeline-height:142px;
}

/* Light compact left drawer: same visible position/footprint as dark compact. */
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio #leftDrawer{
  inset:var(--daailok-panel-gap) auto var(--daailok-panel-gap) var(--daailok-panel-gap)!important;
  overflow:hidden!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio #leftDrawer>canvas.light-panel-optics{
  pointer-events:none!important;
}

/* Compact top-right three selectors copy the left viewport-tool geometry. */
html[data-studio-layout=compact] body#daailokStudio .viewport-hud-top .hud-trigger,
html[data-studio-layout=compact] body#daailokStudio #displayDropdown .hud-trigger,
html[data-studio-layout=compact] body#daailokStudio #qualityDropdown .hud-trigger{
  width:var(--daailok-viewport-control-size)!important;
  min-width:var(--daailok-viewport-control-size)!important;
  max-width:var(--daailok-viewport-control-size)!important;
  height:var(--daailok-viewport-control-size)!important;
  border-radius:var(--daailok-viewport-control-radius)!important;
}
html[data-studio-layout=compact] body#daailokStudio .viewport-tool{
  border-radius:var(--daailok-viewport-control-radius)!important;
}

/* Bottom-right layout switch follows the same radius/size and true centering. */
html body#daailokStudio #studioLayoutToggle{
  width:var(--daailok-viewport-control-size)!important;
  height:var(--daailok-viewport-control-size)!important;
  padding:0!important;
  border-radius:var(--daailok-viewport-control-radius)!important;
  place-items:center!important;
}
html body#daailokStudio #studioLayoutToggle svg{
  display:block!important;
  width:21px!important;
  height:21px!important;
  margin:0!important;
  transform:none!important;
  transform-origin:center!important;
}

/* Compact right stack: top line stays on viewport top, AI bottom lands on
   viewport bottom by reserving the timeline row + the shared inter-row gap. */
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
  margin-top:0!important;
  margin-right:0!important;
  margin-bottom:calc(var(--daailok-compact-timeline-height) + var(--daailok-panel-gap))!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.properties-panel{
  margin-top:0!important;
  margin-right:0!important;
  margin-bottom:calc(
    var(--daailok-compact-timeline-height) +
    var(--daailok-ai-panel-height) +
    var(--daailok-panel-gap) +
    var(--daailok-panel-gap)
  )!important;
}
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio :is(.right-panel>.properties-panel,.right-panel>.ai-panel){
  overflow:hidden!important;
}

/* Normal right stack uses exactly the same outer vertical inset as the visible
   viewport frame, for both themes. */
html[data-studio-layout=normal] body#daailokStudio .right-panel{
  top:var(--daailok-panel-gap)!important;
  bottom:var(--daailok-panel-gap)!important;
  height:auto!important;
}


/* Bugfix 33 · compact layers parity + restore the original layout-toggle size.
   Preview only. Dark compact is the geometry authority. */
html[data-studio-theme=light][data-studio-layout=compact] body#daailokStudio #layersPanel{
  grid-column:1!important;
  grid-row:1!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
}

/* Keep the previous compact layout switch footprint: 34x34 / 10px radius. */
html body#daailokStudio #studioLayoutToggle{
  width:34px!important;
  height:34px!important;
  padding:7px!important;
  border-radius:10px!important;
}
html body#daailokStudio #studioLayoutToggle svg{
  width:20px!important;
  height:20px!important;
}


/* Bugfix 34 · compact AI bottom alignment + exact normal viewport edge sync.
   Preview only. Do not resize the compact Properties panel. */
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
  margin-bottom:0!important;
}

/* Normal-mode right stack follows the measured visible viewport frame.
   JS writes these two offsets from getBoundingClientRect so light/dark use the
   exact same rendered top/bottom edges instead of relying on theme algebra. */
html[data-studio-layout=normal] body#daailokStudio .right-panel{
  top:var(--daailok-normal-panel-top,var(--daailok-panel-gap))!important;
  bottom:var(--daailok-normal-panel-bottom,var(--daailok-panel-gap))!important;
  height:auto!important;
}


/* Bugfix 35 · restore compact toggle proportions and fill the right stack.
   Preview only. Keep the Properties panel at its current height. */

/* Mode switch: keep the existing 34x34 footprint; only match the 9px radius
   used by the viewport tools and pin the glyph to the true visual center. */
html body#daailokStudio #studioLayoutToggle{
  position:fixed!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  padding:0!important;
  box-sizing:border-box!important;
  border-radius:9px!important;
  display:grid!important;
  place-items:center!important;
}
html body#daailokStudio #studioLayoutToggle svg{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:20px!important;
  height:20px!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;
}

/* Compact right column:
   - Properties keeps the exact Bugfix 32 reserved height.
   - AI grows downward into the previously empty/timeline-equivalent space.
   - One shared panel gap remains between Properties and AI.
   - AI bottom remains flush with the shot-timeline bottom. */
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
  height:calc(
    var(--daailok-compact-timeline-height) +
    var(--daailok-ai-panel-height) +
    var(--daailok-panel-gap)
  )!important;
  min-height:calc(
    var(--daailok-compact-timeline-height) +
    var(--daailok-ai-panel-height) +
    var(--daailok-panel-gap)
  )!important;
  max-height:calc(
    var(--daailok-compact-timeline-height) +
    var(--daailok-ai-panel-height) +
    var(--daailok-panel-gap)
  )!important;
  margin-bottom:0!important;
}


/* Bugfix 36 · let the compact AI composer grow with the enlarged panel.
   Preview only. The panel height from Bugfix 35 stays unchanged; this pass
   redistributes that new space inside the assistant instead of leaving a
   large dead area below a fixed-height textarea. */
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel>.ai-head{
  flex:0 0 46px!important;
  min-height:46px!important;
  height:46px!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel>.light-ai-scroll{
  display:flex!important;
  flex:1 1 auto!important;
  min-height:0!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel .ai-input-wrap{
  display:flex!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel .ai-input-wrap textarea{
  display:block!important;
  flex:1 1 auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel .ai-chips{
  flex:0 0 auto!important;
  margin-top:8px!important;
}
html[data-studio-layout=compact] body#daailokStudio .right-panel>.ai-panel .ai-feedback{
  flex:0 0 auto!important;
  min-height:14px!important;
  margin-top:6px!important;
}


/* Bugfix 37 · simplify inspector header and equalize scene property actions.
   Preview only. */

/* AI mode is status text, not a control. Keep it visually plain in both themes. */
html body#daailokStudio .ai-head .ai-mode,
html[data-studio-theme=light] body#daailokStudio .ai-head .ai-mode,
html[data-studio-theme=dark] body#daailokStudio .ai-head .ai-mode{
  display:inline-block!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:inherit!important;
  line-height:1.2!important;
  text-shadow:none!important;
  filter:none!important;
  outline:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* The three root-scene property actions are peers: one equal column, one height. */
html body#daailokStudio #propertiesPanel .quick-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
}
html body#daailokStudio #propertiesPanel .quick-actions button{
  width:100%!important;
  min-width:0!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 6px!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


/* Bugfix 38 · normal camera strip spacing, close action and tool-panel parity.
   Preview only. */

/* The normal-mode shot strip is an inset floating card, not a full-width
   extension of the viewport. Keep one additional shared gap on each side. */
html[data-studio-layout=normal] body#daailokStudio .timeline{
  left:calc(var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
  right:calc(
    var(--daailok-right-column-width) +
    var(--daailok-panel-gap) +
    var(--daailok-panel-gap) +
    var(--daailok-panel-gap)
  )!important;
}
html[data-studio-layout=normal] body#daailokStudio #shotTimelineClose{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  padding:0!important;
  border-radius:7px!important;
  font-size:17px!important;
  line-height:1!important;
}
html[data-studio-layout=compact] body#daailokStudio #shotTimelineClose{
  display:none!important;
}

/* In normal mode every top-navigation tool drawer must occupy exactly the
   Scene Layers card footprint. studio-layout.js measures that live footprint
   and writes important inline geometry so theme/content cannot shrink it. */
html[data-studio-layout=normal] body#daailokStudio #leftDrawer{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  border-radius:16px!important;
  overflow:hidden!important;
}
html[data-studio-layout=normal] body#daailokStudio #leftDrawer .drawer-inner{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
}
html[data-studio-layout=normal] body#daailokStudio #leftDrawer #drawerContent{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  overflow:auto!important;
}


/* Bugfix 39 · normal Project drawer uses its fixed card height for the lists.
   Preview only. Keep the outer card identical to Scene Layers; optimize only
   the Project drawer's internal flow so the lists stay visible and scrollable. */
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  padding:8px 0 0!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]>.asset-cloud-head{
  flex:0 0 auto!important;
  min-height:0!important;
  padding:0 0 7px!important;
  margin:0!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .drawer-kicker{
  height:auto!important;
  min-height:18px!important;
  margin:0 0 5px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .asset-tabs{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  margin:0!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .asset-tab{
  height:29px!important;
  min-height:29px!important;
  padding:0 6px!important;
  font-size:10px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]>#assetLibrary{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  overflow:hidden!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] #assetLibrary>.asset-pane{
  display:none!important;
  min-height:0!important;
  height:100%!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] #assetLibrary>.asset-pane.active{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  height:100%!important;
  gap:6px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-manager-note{
  flex:0 0 auto!important;
  margin:0!important;
  padding:5px 7px!important;
  border-radius:7px!important;
  font-size:9px!important;
  line-height:1.35!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] :is(.project-manager-list,.project-list){
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  align-content:start!important;
  gap:6px!important;
  padding:1px 2px 5px 0!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--ds-scroll-glass) transparent!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] :is(.project-manager-list,.project-list)::-webkit-scrollbar{
  width:7px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] :is(.project-manager-list,.project-list)::-webkit-scrollbar-track{
  background:transparent!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] :is(.project-manager-list,.project-list)::-webkit-scrollbar-thumb{
  border:var(--ds-scroll-border)!important;
  border-radius:var(--ds-radius-pill)!important;
  background:var(--ds-scroll-glass)!important;
  box-shadow:var(--ds-scroll-shadow)!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-pane-head{
  flex:0 0 auto!important;
  min-height:0!important;
  padding:3px 0 6px!important;
  gap:6px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-pane-head>div{
  min-width:0!important;
  gap:1px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-pane-head span{
  display:none!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .asset-library-add.compact{
  min-width:78px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 7px!important;
  font-size:9.5px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-manage-card{
  flex:0 0 auto!important;
  padding:8px!important;
  border-radius:9px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-manage-card>small{
  margin-top:3px!important;
  line-height:1.35!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-manage-actions{
  flex-wrap:nowrap!important;
  gap:5px!important;
  margin-top:6px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-manage-actions button{
  min-height:25px!important;
  height:25px!important;
  padding:0 7px!important;
  font-size:9px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-card{
  flex:0 0 auto!important;
  min-height:50px!important;
  padding:7px 8px!important;
  gap:7px!important;
}


/* Bugfix 41 · layer list uses a Photoshop-like compact row language.
   Preview only. Reference: flat rows, clear separators, eye visibility marker
   and neutral folder/layer glyphs. Existing selection/drag logic is untouched. */
html body#daailokStudio #layersPanel .ps-layers{
  padding:4px 0 2px!important;
}
html body#daailokStudio #layersPanel .layer-folder{
  margin:0!important;
}
html body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row){
  min-height:34px!important;
  height:34px!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  border-radius:0!important;
  background:rgba(255,255,255,.025)!important;
  box-shadow:none!important;
}
html body#daailokStudio #layersPanel .layer-folder:first-child>.layer-folder-row{
  border-top:1px solid rgba(255,255,255,.10)!important;
}
html body#daailokStudio #layersPanel .layer-folder-row{
  grid-template-columns:17px 22px 22px minmax(0,1fr) 24px 24px!important;
  gap:2px!important;
  padding:0 5px!important;
}
html body#daailokStudio #layersPanel .layer-row{
  grid-template-columns:14px 22px 22px minmax(0,1fr) auto 24px 24px!important;
  gap:2px!important;
  padding:0 5px!important;
}
html body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row):hover{
  background:rgba(255,255,255,.060)!important;
  border-color:rgba(255,255,255,.14)!important;
}
html body#daailokStudio #layersPanel .layer-row.active{
  background:linear-gradient(90deg,rgba(238,201,127,.12),rgba(255,255,255,.045))!important;
  border-bottom-color:rgba(238,201,127,.22)!important;
}
html body#daailokStudio #layersPanel .layer-children{
  padding-left:14px!important;
}
html body#daailokStudio #layersPanel .root-layer{
  margin-top:0!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}

/* Compact disclosure mark like the reference list. */
html body#daailokStudio #layersPanel .folder-toggle{
  position:relative!important;
  width:17px!important;
  height:28px!important;
  padding:0!important;
  font-size:0!important;
  color:#c6c9c8!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body#daailokStudio #layersPanel .folder-toggle::before{
  content:""!important;
  width:0!important;
  height:0!important;
  border-top:4px solid transparent!important;
  border-bottom:4px solid transparent!important;
  border-left:5px solid currentColor!important;
  transform:rotate(90deg)!important;
  transition:transform .12s ease!important;
}
html body#daailokStudio #layersPanel .layer-folder.collapsed .folder-toggle{
  transform:none!important;
}
html body#daailokStudio #layersPanel .layer-folder.collapsed .folder-toggle::before{
  transform:rotate(0deg)!important;
}

/* Visibility marker: visible = eye; hidden = empty square, matching the reference. */
html body#daailokStudio #layersPanel .layer-eye{
  position:relative!important;
  width:22px!important;
  height:28px!important;
  padding:0!important;
  font-size:0!important;
  color:#d7d9d8!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body#daailokStudio #layersPanel .layer-eye::before{
  content:""!important;
  position:absolute!important;
  left:5px!important;
  top:9px!important;
  width:12px!important;
  height:8px!important;
  box-sizing:border-box!important;
  border:1.5px solid currentColor!important;
  border-radius:50% / 60%!important;
  transform:rotate(-2deg)!important;
}
html body#daailokStudio #layersPanel .layer-eye::after{
  content:""!important;
  position:absolute!important;
  left:9px!important;
  top:11px!important;
  width:4px!important;
  height:4px!important;
  border-radius:50%!important;
  background:currentColor!important;
}
html body#daailokStudio #layersPanel :is(.hidden-layer .layer-eye,.hidden-folder>.layer-folder-row .folder-eye)::before{
  left:6px!important;
  top:8px!important;
  width:11px!important;
  height:11px!important;
  border:1px solid rgba(215,217,216,.40)!important;
  border-radius:1px!important;
  background:transparent!important;
  transform:none!important;
}
html body#daailokStudio #layersPanel :is(.hidden-layer .layer-eye,.hidden-folder>.layer-folder-row .folder-eye)::after{
  display:none!important;
}

/* Every folder uses one neutral filled-folder glyph, including Lights/AI folders. */
html body#daailokStudio #layersPanel .folder-icon{
  position:relative!important;
  width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  font-size:0!important;
  color:#e1e3e2!important;
}
html body#daailokStudio #layersPanel .folder-icon>svg{
  display:none!important;
}
html body#daailokStudio #layersPanel .folder-icon::before{
  content:""!important;
  width:16px!important;
  height:12px!important;
  background:currentColor!important;
  clip-path:polygon(0 18%,36% 18%,45% 34%,100% 34%,100% 92%,0 92%)!important;
  opacity:.92!important;
}

/* Object-layer glyphs become quiet square markers instead of mixed text symbols. */
html body#daailokStudio #layersPanel .layer-icon{
  width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  font-size:0!important;
  color:#c9ccca!important;
}
html body#daailokStudio #layersPanel .layer-icon::before{
  content:""!important;
  width:12px!important;
  height:12px!important;
  box-sizing:border-box!important;
  border:1px solid currentColor!important;
  background:rgba(255,255,255,.025)!important;
}
html body#daailokStudio #layersPanel .layer-row.active .layer-icon::before{
  border-color:var(--ds-studio-selected-fg,#f4d58f)!important;
  background:rgba(238,201,127,.08)!important;
}

/* Names dominate; metadata/actions stay secondary and do not compete visually. */
html body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row)>b{
  color:#e2e4e2!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:34px!important;
}
html body#daailokStudio #layersPanel :is(.folder-count,.layer-state){
  color:#8f9491!important;
  font-size:9px!important;
}
html body#daailokStudio #layersPanel :is(.layer-lock,.layer-delete){
  opacity:.42!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row):hover :is(.layer-lock,.layer-delete),
html body#daailokStudio #layersPanel .layer-row.active :is(.layer-lock,.layer-delete){
  opacity:.86!important;
}

/* Light theme keeps the same hierarchy with slightly brighter separators. */
html[data-studio-theme=light] body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row){
  border-bottom-color:rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.035)!important;
}
html[data-studio-theme=light] body#daailokStudio #layersPanel .layer-folder:first-child>.layer-folder-row,
html[data-studio-theme=light] body#daailokStudio #layersPanel .root-layer{
  border-top-color:rgba(255,255,255,.16)!important;
}


/* Bugfix 42 · refine layer hierarchy to match the DAAILOK glass language.
   Preview only. Keep the Photoshop-like readability, but remove the flat/utility
   look introduced in Bugfix 41. Names may wrap so they remain fully readable. */
html body#daailokStudio #layersPanel .ps-layers{
  padding:0!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.030),rgba(255,255,255,.010))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  overflow-x:hidden!important;
}
html body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row){
  position:relative!important;
  height:auto!important;
  min-height:38px!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body#daailokStudio #layersPanel .layer-folder:first-child>.layer-folder-row,
html body#daailokStudio #layersPanel .root-layer{
  border-top:0!important;
}
html body#daailokStudio #layersPanel .layer-folder-row{
  grid-template-columns:16px 22px 22px minmax(0,1fr) auto 20px!important;
  gap:3px!important;
  padding:0 7px!important;
}
html body#daailokStudio #layersPanel .layer-row{
  grid-template-columns:12px 22px 22px minmax(0,1fr) 20px 20px!important;
  gap:3px!important;
  padding:0 7px!important;
}
html body#daailokStudio #layersPanel .layer-children{
  padding-left:12px!important;
  background:rgba(0,0,0,.035)!important;
}
html body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row):hover{
  background:linear-gradient(90deg,rgba(255,255,255,.060),rgba(255,255,255,.018))!important;
  border-bottom-color:rgba(255,255,255,.105)!important;
}
html body#daailokStudio #layersPanel .layer-row.active{
  color:var(--ds-studio-selected-fg,#f4d58f)!important;
  background:linear-gradient(90deg,rgba(238,201,127,.125),rgba(238,201,127,.035) 62%,rgba(255,255,255,.012))!important;
  border-bottom-color:rgba(238,201,127,.18)!important;
  box-shadow:inset 2px 0 0 rgba(244,213,143,.82)!important;
}

/* Full names: no ellipsis. Long generated names wrap naturally instead of disappearing. */
html body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row)>b{
  min-width:0!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  align-self:center!important;
  padding:8px 0!important;
  color:#dde1de!important;
  font-size:11.5px!important;
  font-weight:500!important;
  line-height:1.35!important;
}
html body#daailokStudio #layersPanel .layer-row.active>b{
  color:var(--ds-studio-selected-fg,#f4d58f)!important;
}
html body#daailokStudio #layersPanel .layer-state{
  display:none!important;
}
html body#daailokStudio #layersPanel .folder-count{
  color:#777d79!important;
  font-size:9px!important;
  font-variant-numeric:tabular-nums!important;
}

/* Neutral outline folder: consistent with the rest of the studio line icons. */
html body#daailokStudio #layersPanel .folder-icon{
  width:22px!important;
  height:22px!important;
  color:#bbc0bd!important;
  opacity:.90!important;
}
html body#daailokStudio #layersPanel .folder-icon::before{
  width:15px!important;
  height:10px!important;
  border:1px solid currentColor!important;
  border-radius:2px!important;
  background:transparent!important;
  clip-path:none!important;
  opacity:1!important;
}
html body#daailokStudio #layersPanel .folder-icon::after{
  content:""!important;
  position:absolute!important;
  left:4px!important;
  top:4px!important;
  width:7px!important;
  height:4px!important;
  border:1px solid currentColor!important;
  border-bottom:0!important;
  border-radius:2px 2px 0 0!important;
  background:transparent!important;
}
html body#daailokStudio #layersPanel .layer-folder-row:hover .folder-icon,
html body#daailokStudio #layersPanel .layer-folder:not(.hidden-folder)>.layer-folder-row .folder-icon{
  color:#d4d8d5!important;
}

/* Layer marker becomes a tiny glass thumbnail rather than a hard square symbol. */
html body#daailokStudio #layersPanel .layer-icon{
  width:22px!important;
  height:22px!important;
  color:#aeb4b0!important;
}
html body#daailokStudio #layersPanel .layer-icon::before{
  width:14px!important;
  height:14px!important;
  border:1px solid rgba(220,225,222,.48)!important;
  border-radius:3px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html body#daailokStudio #layersPanel .layer-row.active .layer-icon::before{
  border-color:rgba(244,213,143,.72)!important;
  background:linear-gradient(145deg,rgba(238,201,127,.13),rgba(255,255,255,.025))!important;
  box-shadow:0 0 8px rgba(238,201,127,.07),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* Quiet utility controls; reveal destructive/lock actions only when relevant. */
html body#daailokStudio #layersPanel :is(.layer-lock,.layer-delete,.folder-delete){
  width:20px!important;
  height:28px!important;
  opacity:0!important;
  transition:opacity .12s ease,color .12s ease,background .12s ease!important;
}
html body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row):hover :is(.layer-lock,.layer-delete,.folder-delete),
html body#daailokStudio #layersPanel .layer-row.active :is(.layer-lock,.layer-delete){
  opacity:.72!important;
}
html body#daailokStudio #layersPanel .layer-row.locked-layer .layer-lock{
  opacity:1!important;
}
html body#daailokStudio #layersPanel .drag-grip{
  opacity:.35!important;
  color:#8d938f!important;
}
html body#daailokStudio #layersPanel .layer-row:hover .drag-grip{
  opacity:.70!important;
}

/* Softer, cleaner eye mark. */
html body#daailokStudio #layersPanel .layer-eye{
  color:#c8cdca!important;
  opacity:.82!important;
}
html body#daailokStudio #layersPanel .layer-eye::before{
  left:5px!important;
  top:9px!important;
  width:12px!important;
  height:9px!important;
  border:1.25px solid currentColor!important;
  border-radius:70% 8% 70% 8%!important;
  transform:rotate(45deg)!important;
}
html body#daailokStudio #layersPanel .layer-eye::after{
  left:9px!important;
  top:11.5px!important;
  width:4px!important;
  height:4px!important;
}
html body#daailokStudio #layersPanel :is(.hidden-layer .layer-eye,.hidden-folder>.layer-folder-row .folder-eye)::before{
  left:6px!important;
  top:9px!important;
  width:10px!important;
  height:10px!important;
  border:1px solid rgba(200,205,202,.35)!important;
  border-radius:2px!important;
  transform:none!important;
}

/* Light mode uses the same hierarchy rather than a separate flat layer skin. */
html[data-studio-theme=light] body#daailokStudio #layersPanel .ps-layers{
  border-color:rgba(255,255,255,.12)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.050),rgba(255,255,255,.018))!important;
}
html[data-studio-theme=light] body#daailokStudio #layersPanel :is(.layer-folder-row,.layer-row){
  border-bottom-color:rgba(255,255,255,.105)!important;
  background:transparent!important;
}


/* Bugfix 43 · fixed dialog title bars and inset dark scrollbars.
   Preview only. Scroll belongs to dialog content, never to the title bar. */

/* Left tool drawer: header is fixed; only the generated tool content scrolls. */
html body#daailokStudio #leftDrawer .drawer-inner{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body#daailokStudio #leftDrawer .drawer-head{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:4!important;
}
html body#daailokStudio #leftDrawer #drawerContent{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

/* Scene Layers already owns a dedicated list scroller. Make that boundary explicit. */
html body#daailokStudio #layersPanel{
  overflow:hidden!important;
}
html body#daailokStudio #layersPanel>.section-head,
html body#daailokStudio #layersPanel>.layer-toolbar{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:4!important;
}
html body#daailokStudio #layersPanel>#layerList{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

/* AI: title bar never participates in content scrolling. */
html body#daailokStudio .ai-panel{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body#daailokStudio .ai-panel>.ai-head{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:4!important;
}
html body#daailokStudio .ai-panel>.light-ai-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

/* Object Properties: remove the outer-panel scrollbar (the source of the
   white track in dark/normal mode). Only #propertyContent may scroll. */
html body#daailokStudio #propertiesPanel{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body#daailokStudio #propertiesPanel>.handle,
html body#daailokStudio #propertiesPanel>.prop-head,
html body#daailokStudio #propertiesPanel>.selection-summary{
  flex:0 0 auto!important;
}
html body#daailokStudio #propertiesPanel>.prop-head{
  position:relative!important;
  top:auto!important;
  z-index:4!important;
}
html body#daailokStudio #propertiesPanel>#propertyContent{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding-bottom:8px!important;
}

/* Timeline follows the same title/content rule. */
html body#daailokStudio .timeline{
  overflow:hidden!important;
}
html body#daailokStudio .timeline>.timeline-toolbar{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:4!important;
}

/* One dark-dialog scrollbar language. The track has block-end margins so the
   thumb never visually pierces the rounded top/bottom edges of a dialog. */
html[data-studio-theme=dark] body#daailokStudio :is(
  #drawerContent,
  #layerList,
  #propertyContent,
  .light-ai-scroll,
  .project-manager-list,
  .project-list,
  .shot-preview-stage
){
  scrollbar-width:thin!important;
  scrollbar-color:rgba(170,179,176,.56) transparent!important;
}
html[data-studio-theme=dark] body#daailokStudio :is(
  #drawerContent,
  #layerList,
  #propertyContent,
  .light-ai-scroll,
  .project-manager-list,
  .project-list,
  .shot-preview-stage
)::-webkit-scrollbar{
  width:8px!important;
  height:8px!important;
}
html[data-studio-theme=dark] body#daailokStudio :is(
  #drawerContent,
  #layerList,
  #propertyContent,
  .light-ai-scroll,
  .project-manager-list,
  .project-list,
  .shot-preview-stage
)::-webkit-scrollbar-track{
  margin-block:7px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html[data-studio-theme=dark] body#daailokStudio :is(
  #drawerContent,
  #layerList,
  #propertyContent,
  .light-ai-scroll,
  .project-manager-list,
  .project-list,
  .shot-preview-stage
)::-webkit-scrollbar-thumb{
  min-height:28px!important;
  border:2px solid transparent!important;
  border-radius:999px!important;
  background:
    linear-gradient(180deg,rgba(195,202,200,.66),rgba(111,120,118,.52))
    padding-box!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 4px rgba(0,0,0,.20)!important;
}
html[data-studio-theme=dark] body#daailokStudio :is(
  #drawerContent,
  #layerList,
  #propertyContent,
  .light-ai-scroll,
  .project-manager-list,
  .project-list,
  .shot-preview-stage
)::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(180deg,rgba(218,223,221,.78),rgba(132,141,138,.66))
    padding-box!important;
}
html[data-studio-theme=dark] body#daailokStudio :is(
  #drawerContent,
  #layerList,
  #propertyContent,
  .light-ai-scroll,
  .project-manager-list,
  .project-list,
  .shot-preview-stage
)::-webkit-scrollbar-corner{
  background:transparent!important;
}

/* If the shared custom scrollbar is used inside a studio dialog, keep its
   vertical track inset as well and never paint a white trough behind it. */
html[data-studio-theme=dark] body#daailokStudio .ui-scroll-track[data-axis="y"]{
  margin-block:7px!important;
  background:transparent!important;
}
html[data-studio-theme=dark] body#daailokStudio .ui-scroll-track[data-axis="y"]>.ui-scroll-thumb{
  border-color:rgba(202,209,206,.22)!important;
  background:linear-gradient(180deg,rgba(195,202,200,.66),rgba(111,120,118,.52))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 0 4px rgba(0,0,0,.20)!important;
}


/* Bugfix 44 · Object Properties title is permanently fixed.
   Preview only. A legacy fade-on-scroll rule in studio-projects.css conflicts
   with the fixed-title contract, so neutralize it explicitly. */
html body#daailokStudio #propertiesPanel>.prop-head{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  will-change:auto!important;
  pointer-events:auto!important;
  --property-head-fade:0!important;
}
html body#daailokStudio #propertiesPanel>.prop-head.scroll-hidden{
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
}


/* Bugfix 45 · dark normal clips the 3D scene to the operation viewport.
   Preview only. The extended/full-canvas presentation is a light-mode feature;
   dark normal keeps the same camera composition but hides scene pixels outside
   the visible operation frame. */
html[data-studio-theme=dark][data-studio-layout=normal] body#daailokStudio .viewport-scene{
  overflow:hidden!important;
  border-radius:0!important;
  clip-path:inset(
    calc(var(--light-header) + var(--daailok-panel-gap))
    calc(var(--daailok-right-column-width) + var(--daailok-panel-gap) + var(--daailok-panel-gap))
    var(--daailok-panel-gap)
    var(--daailok-panel-gap)
    round 18px
  )!important;
  -webkit-clip-path:inset(
    calc(var(--light-header) + var(--daailok-panel-gap))
    calc(var(--daailok-right-column-width) + var(--daailok-panel-gap) + var(--daailok-panel-gap))
    var(--daailok-panel-gap)
    var(--daailok-panel-gap)
    round 18px
  )!important;
}
html[data-studio-theme=dark][data-studio-layout=normal] body#daailokStudio #previewCanvas{
  border-radius:0!important;
}


/* Bugfix 46 · compact layers cleanup, AI composer actions, normal viewport chrome.
   Preview only. */

/* Dark compact Layers: replace the stray hard line above the layer list with spacing. */
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio #layersPanel>.layer-toolbar{
  border-bottom:0!important;
}
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio #layersPanel>.ps-layers{
  border-top:0!important;
  margin-top:4px!important;
}

/* AI composer: attachment/send controls sit below the text field in every mode. */
html body#daailokStudio .ai-panel .ai-input-wrap{
  display:flex!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  flex-direction:column!important;
  gap:7px!important;
  position:relative!important;
}
html body#daailokStudio .ai-panel .ai-input-wrap textarea{
  display:block!important;
  flex:1 1 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:72px!important;
  max-height:none!important;
  box-sizing:border-box!important;
  padding:12px!important;
  margin:0!important;
}
html body#daailokStudio .ai-panel .ai-input-wrap.has-attachment textarea{
  padding-top:48px!important;
}
html body#daailokStudio .ai-panel .ai-input-actions{
  flex:0 0 auto!important;
  width:100%!important;
  min-height:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
}
html body#daailokStudio .ai-panel .ai-input-actions>#aiAttach,
html body#daailokStudio .ai-panel .ai-input-actions>#aiSend{
  position:static!important;
  inset:auto!important;
  flex:0 0 30px!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
}
@media(max-width:1280px){
  html body#daailokStudio .ai-panel .ai-input-wrap textarea{
    min-height:64px!important;
  }
}

/* Normal viewport: icon-only Shots affordance, no redundant caption. */
html[data-studio-layout=normal] body#daailokStudio .light-workspace-controls{
  gap:0!important;
}
html[data-studio-layout=normal] body#daailokStudio #lightShotsToggle{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
}
html[data-studio-layout=normal] body#daailokStudio #lightShotsToggle .shot-toggle-icon{
  width:20px!important;
  height:20px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.55!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
html[data-studio-layout=normal] body#daailokStudio #lightShotsToggle .shot-toggle-chevron{
  transform-origin:12px 12px!important;
  transition:transform .16s ease!important;
}
html[data-studio-layout=normal] body#daailokStudio #lightShotsToggle.is-open .shot-toggle-chevron{
  transform:rotate(180deg)!important;
}

/* Normal top-right controls use the same 14px inner inset as the left tools. */
html[data-studio-layout=normal] body#daailokStudio .viewport-hud-top{
  right:calc(
    var(--daailok-right-column-width) +
    var(--daailok-panel-gap) +
    var(--daailok-panel-gap) +
    14px
  )!important;
}


/* Bugfix 47 · normal HUD right inset mirrors the existing left-tool inset.
   The visible frame starts one panel-gap in from the viewport, while the left
   toolbox itself is fixed at 14px. Therefore its real frame-edge inset is
   (14px - panel-gap). Apply that same real inset on the right. */
html[data-studio-layout=normal] body#daailokStudio .viewport-hud-top{
  right:calc(
    var(--daailok-right-column-width) +
    var(--daailok-panel-gap) +
    14px
  )!important;
}


/* Bugfix 49 · normal right-column density without typography changes.
   Preview only. Keep the established fonts, icon sizes and outer panel grid.
   Reclaim space only from fixed chrome/padding. */

/* Title bars: same typography, less empty vertical chrome. */
html[data-studio-layout=normal] body#daailokStudio :is(
  #layersPanel>.section-head,
  .ai-panel>.ai-head,
  #propertiesPanel>.prop-head
){
  flex:0 0 36px!important;
  min-height:36px!important;
  height:36px!important;
  padding:0!important;
  margin:0!important;
}
html[data-studio-layout=normal] body#daailokStudio :is(
  #layersPanel,
  .ai-panel,
  #propertiesPanel
){
  padding-top:4px!important;
}

/* Scene Layers fixed controls stay on one compact row.
   Do not resize their text or icons. */
html[data-studio-layout=normal] body#daailokStudio #layersPanel>.layer-toolbar{
  flex:0 0 30px!important;
  min-height:30px!important;
  height:30px!important;
  padding:3px 0!important;
  margin:0!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
}
html[data-studio-layout=normal] body#daailokStudio #layersPanel>.layer-toolbar #layerCount{
  flex:0 1 auto!important;
  flex-basis:auto!important;
  min-width:0!important;
  margin-left:auto!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Object Properties fixed identity card: preserve all text/icon sizes;
   only remove excess outer padding and blank margins. */
html[data-studio-layout=normal] body#daailokStudio #propertiesPanel>.selection-summary{
  min-height:0!important;
  margin:3px 0 4px!important;
  padding:4px 6px!important;
  gap:6px!important;
}

/* Normal AI uses the same 7px bottom inset as compact.
   Its inner flow mirrors compact so the bottom spacing is real, not dead scroll area. */
html[data-studio-layout=normal] body#daailokStudio .ai-panel{
  padding-bottom:7px!important;
}
html[data-studio-layout=normal] body#daailokStudio .ai-panel>.light-ai-scroll{
  display:flex!important;
  flex:1 1 auto!important;
  min-height:0!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}
html[data-studio-layout=normal] body#daailokStudio .ai-panel .ai-input-wrap{
  flex:1 1 auto!important;
  min-height:0!important;
}
html[data-studio-layout=normal] body#daailokStudio .ai-panel .ai-chips,
html[data-studio-layout=normal] body#daailokStudio .ai-panel .ai-feedback{
  flex:0 0 auto!important;
}
html[data-studio-layout=normal] body#daailokStudio .ai-panel .ai-feedback{
  margin-bottom:0!important;
}


/* Bugfix 50 · normal shots spacing, layer toolbar rhythm, compact selection identity.
   Preview only. Typography is unchanged. */

/* 1) Normal Shots card uses the same inset on bottom as on its two sides. */
html[data-studio-layout=normal] body#daailokStudio .timeline{
  bottom:calc(var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
}

/* Keep the icon-only Shots affordance sitting the same distance above the card
   after its bottom inset is increased. */
html[data-studio-layout=normal] body#daailokStudio .studio[data-light-shots=open] .light-workspace-controls{
  bottom:calc(173px + var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
}

/* 2) Normal Scene Layers fixed controls need a little more breathing room.
   Preserve existing font/button sizes; increase only the row height. */
html[data-studio-layout=normal] body#daailokStudio #layersPanel>.layer-toolbar{
  flex-basis:40px!important;
  min-height:40px!important;
  height:40px!important;
  padding:8px 0!important;
}

/* 3) Selection identity keeps the object/project name only.
   Remove the redundant "当前选择" and type line without changing JS state. */
html body#daailokStudio #propertiesPanel>.selection-summary small,
html body#daailokStudio #propertiesPanel>.selection-summary em{
  display:none!important;
}
html body#daailokStudio #propertiesPanel>.selection-summary>div:nth-child(2){
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
}
html body#daailokStudio #propertiesPanel>.selection-summary>div:nth-child(2)>b{
  margin-top:0!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}


/* Bugfix 51 · remove stacked normal-shot frame lines and unify corners.
   Preview only. In dark normal mode the real .light-viewport-frame is already
   present, so the fallback ::after frame must not draw underneath it. */
html[data-studio-theme=dark][data-studio-layout=normal] body#daailokStudio .viewport::after{
  display:none!important;
}

/* The Shots dialog had both a border and an inherited inner outline, which
   produced two concentric rounded lines. Keep one physical border only. */
html[data-studio-layout=normal] body#daailokStudio .timeline{
  border:1px solid rgba(255,255,255,.105)!important;
  outline:none!important;
  outline-offset:0!important;
  border-radius:16px!important;
  background-clip:padding-box!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}

/* All four corners use the panel radius; children are clipped by the same box. */
html[data-studio-layout=normal] body#daailokStudio .timeline>.timeline-toolbar,
html[data-studio-layout=normal] body#daailokStudio .timeline>.shot-strip{
  border-radius:0!important;
}


/* Bugfix 52 · remove the residual bottom line inside normal Shots.
   Preview only. The normal dialog shows only toolbar + shot strip; the legacy
   third timeline row and shot-strip bottom divider must not reserve/draw space. */
html[data-studio-layout=normal] body#daailokStudio .shot-timeline{
  grid-template-rows:39px minmax(0,1fr)!important;
}
html[data-studio-layout=normal] body#daailokStudio .shot-timeline>.shot-strip{
  height:auto!important;
  min-height:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
html[data-studio-layout=normal] body#daailokStudio .shot-timeline>.track-area{
  display:none!important;
}


/* Bugfix 51 · remove the remaining dark-compact layer-list rim.
   Bugfix 46 removed only the top border, but Bugfix 42 still left the rounded
   container border + inset top highlight, which is the residual line in the screenshot. */
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio #layersPanel>.layer-toolbar{
  border-top:0!important;
  border-bottom:0!important;
}
html[data-studio-theme=dark][data-studio-layout=compact] body#daailokStudio #layersPanel>.ps-layers{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  margin-top:4px!important;
}


/* Bugfix 53 · measured normal shot inset + roomier layer controls.
   Preview only. Timeline geometry is now measured from the real visible frame
   by studio-layout.js; CSS below is only the stable fallback. */
html[data-studio-layout=normal] body#daailokStudio .timeline{
  bottom:calc(var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
}
html[data-studio-layout=normal] body#daailokStudio #layersPanel>.layer-toolbar{
  flex-basis:40px!important;
  min-height:40px!important;
  height:40px!important;
  padding:8px 0!important;
}
html body#daailokStudio #propertiesPanel>.selection-summary>div:nth-child(2){
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
}


/* Bugfix 65 · hide the viewport interaction hint behind open normal Shots.
   Root cause of the apparent duplicate rounded line: preview.js creates one
   .interaction-hint centered at the bottom of #viewport. Its long text makes
   the pill roughly 700px wide; after Shots was moved upward, the Shots panel
   covered the hint text/top but exposed only the hint's rounded bottom border.
   There is only one #lightShotTimeline. Hide the hint while Shots is open;
   restore it automatically when Shots closes. */
html[data-studio-layout=normal] body#daailokStudio .studio[data-light-shots=open] .interaction-hint{
  display:none!important;
}


/* Bugfix 66 · shot toolbar rhythm + inset creation scrollbar.
   Preview only. Keep typography unchanged; fix geometry and control parity. */

/* Both layout modes use one mathematically centered 40px toolbar. A 30px
   control therefore has an exact 5px optical inset above and below. */
html body#daailokStudio .shot-timeline{
  grid-template-rows:40px minmax(0,1fr)!important;
}
html body#daailokStudio .shot-timeline>.timeline-toolbar{
  height:40px!important;
  min-height:40px!important;
  padding:0 10px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  box-sizing:border-box!important;
}
html body#daailokStudio .timeline-title,
html body#daailokStudio .camera-save-actions,
html body#daailokStudio .timeline-actions{
  min-height:30px!important;
  height:30px!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box!important;
}
html body#daailokStudio .timeline-title{
  flex:0 0 auto!important;
}
html body#daailokStudio .camera-save-actions{
  flex:1 1 auto!important;
  min-width:0!important;
  gap:6px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
}
html body#daailokStudio .camera-save-actions::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
html body#daailokStudio .timeline-actions{
  flex:0 0 auto!important;
  gap:6px!important;
}

/* Existing toolbar actions and dynamically created camera actions share exactly
   the same control box. Text may differ, geometry may not. */
html body#daailokStudio :is(
  .camera-save-actions .camera-shot-save,
  .timeline-actions #placeShotBtn,
  .timeline-actions #saveShotBtn,
  .timeline-actions #playShotsBtn
){
  flex:0 0 112px!important;
  width:112px!important;
  min-width:112px!important;
  max-width:112px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border-radius:7px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1!important;
}

/* The close action is redundant: normal mode already has the dedicated Shots
   toggle and compact mode never needed the X. */
html body#daailokStudio #shotTimelineClose{
  display:none!important;
}

/* Creation dialog keeps its scrollbar fully inside the rounded glass panel. */
html body#daailokStudio .creation-dialog{
  scrollbar-width:thin!important;
  scrollbar-color:rgba(170,179,176,.56) transparent!important;
  scrollbar-gutter:stable!important;
}
html body#daailokStudio .creation-dialog::-webkit-scrollbar{
  width:8px!important;
}
html body#daailokStudio .creation-dialog::-webkit-scrollbar-track{
  margin-block:14px!important;
  background:transparent!important;
  border:0!important;
}
html body#daailokStudio .creation-dialog::-webkit-scrollbar-thumb{
  min-height:28px!important;
  border:2px solid transparent!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(195,202,200,.66),rgba(111,120,118,.52)) padding-box!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 0 4px rgba(0,0,0,.20)!important;
}

/* Multi-view reference thumbnails stay compact and never widen the dialog. */
html body#daailokStudio .creation-reference-grid[hidden]{display:none!important}
html body#daailokStudio .creation-reference-grid{
  margin-top:8px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}
html body#daailokStudio .creation-reference-item{
  position:relative!important;
  min-width:0!important;
  height:62px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.035)!important;
}
html body#daailokStudio .creation-reference-item img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
}
html body#daailokStudio .creation-reference-item span{
  position:absolute!important;
  left:5px!important;
  bottom:4px!important;
  max-width:calc(100% - 10px)!important;
  padding:2px 5px!important;
  border-radius:5px!important;
  background:rgba(9,12,14,.76)!important;
  color:#f0f2ef!important;
  font-size:9px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
html body#daailokStudio .creation-reference-item.primary{
  border-color:rgba(238,201,127,.42)!important;
  box-shadow:inset 0 0 0 1px rgba(238,201,127,.10)!important;
}


/* Bugfix 70 · only the NORMAL layout right-side Project dialog.
   studio-layout.js positions #leftDrawer at #layersPanel's right-hand
   footprint in normal mode. Compact mode reuses this DOM element: never
   apply these size rules without the normal-layout selector.
   Match the approved right Object Properties 36px title, no type resizing. */
html[data-studio-layout=normal] body#daailokStudio #leftDrawer:has(#drawerContent[data-tool="assets"]) .drawer-inner{
  padding:4px 12px 8px!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
html[data-studio-layout=normal] body#daailokStudio #leftDrawer:has(#drawerContent[data-tool="assets"]) .drawer-head{
  flex:0 0 36px!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box!important;
}
/* Object Properties has a two-line 13px+20px title group. The Projects
   header had its small line display:none, moving 项目 upward despite equal
   outer bar heights. Reserve the identical invisible first line here. */
html[data-studio-layout=normal] body#daailokStudio #leftDrawer:has(#drawerContent[data-tool="assets"]) .drawer-head>div{
  min-width:0!important;
  display:block!important;
}
html[data-studio-layout=normal] body#daailokStudio #leftDrawer:has(#drawerContent[data-tool="assets"]) .drawer-head small{
  display:block!important;
  visibility:hidden!important;
  margin:0!important;
  padding:0!important;
  height:13px!important;
  line-height:13px!important;
}
html[data-studio-layout=normal] body#daailokStudio #leftDrawer:has(#drawerContent[data-tool="assets"]) #drawerTitle{
  margin:0!important;
  padding:0!important;
  line-height:20px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  padding:0!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  box-sizing:border-box!important;
}
/* The outer title already says 项目. Keep the original inner kicker in
   the markup for COMPACT mode, hide it only in the right normal panel. */
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]>.asset-cloud-head{
  flex:0 0 auto!important;
  padding:0 0 2px!important;
  min-height:0!important;
  margin:0!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]>.asset-cloud-head>.drawer-kicker{
  display:none!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .asset-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  padding:0!important;
  margin:0!important;
  min-width:0!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .asset-tab{
  box-sizing:border-box!important;
  height:28px!important;
  min-height:28px!important;
  min-width:0!important;
  padding:0 6px!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] :is(
  #assetLibrary,.asset-pane,.project-pane-head,.project-manager-list,
  .project-list,.project-card,.project-manage-card,.project-manage-actions
){
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .project-manage-actions{
  flex-wrap:wrap!important;
}

/* All editor layout modes: panels and modal contents scroll vertically
   only. Min-width:0 prevents wide dynamic content from making a track. */
html body#daailokStudio :is(
  #leftDrawer,.drawer-inner,#drawerContent,
  #layersPanel,#layerList,.layer-toolbar,
  .ai-panel,.light-ai-scroll,#propertiesPanel,#propertyContent,
  .timeline,.shot-timeline,.asset-library,.asset-pane,
  .project-manager-list,.project-list,.creation-dialog,
  .scene-diagnostic-dialog,.scene-diagnostic-table-scroll,
  .shot-preview-stage
){
  min-width:0!important;
  overflow-x:hidden!important;
}
html body#daailokStudio :is(
  .drawer-section,.drawer-kicker,.asset-cloud-head,.asset-tabs,
  .asset-library-card,.project-card,.project-manage-card,
  .project-pane-head,.project-manager-list,.project-list,
  .layer-row,.layer-folder-row,.prop-row,.selection-summary
){
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
html body#daailokStudio :is(
  .project-card b,.project-manage-name,.project-pane-head span,
  .layer-row b,.selection-summary b
){
  min-width:0!important;
  overflow-wrap:anywhere!important;
}
/* Shot strip and camera actions still support horizontal navigation,
   but no horizontal scrollbar is ever painted in any mode. */
html body#daailokStudio :is(.shot-strip,.camera-save-actions){
  scrollbar-width:none!important;
}
html body#daailokStudio :is(.shot-strip,.camera-save-actions)::-webkit-scrollbar{
  display:none!important;
  height:0!important;
}


/* Bugfix 72 · ordinary mode right-side Project controls, no double rules.
   Keep the thin outlines of the selectable tab buttons themselves; remove
   only separators crossing the full width above/below the fixed tab area. */
html[data-studio-layout=normal] body#daailokStudio #leftDrawer:has(#drawerContent[data-tool="assets"]) .drawer-head{
  border-bottom:0!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]>.asset-cloud-head{
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]>.asset-cloud-head::before,
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]>.asset-cloud-head::after,
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .asset-tabs::before,
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"] .asset-tabs::after{
  content:none!important;
  display:none!important;
}
html[data-studio-layout=normal] body#daailokStudio #drawerContent[data-tool="assets"]>#assetLibrary{
  border-top:0!important;
}

/* Project generation progress must expand its OWN project card rather than
   painting its 4px track in the 7px gutter between neighboring cards. */
html body#daailokStudio #drawerContent[data-tool="assets"] .project-list{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:max-content!important;
  align-content:start!important;
  row-gap:10px!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] .project-card{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr) auto!important;
  grid-template-rows:auto!important;
  height:auto!important;
  max-height:none!important;
  min-height:58px!important;
  box-sizing:border-box!important;
  align-self:start!important;
  align-items:center!important;
  padding:9px 10px!important;
  column-gap:9px!important;
  overflow:visible!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] .project-card-main{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:max-content!important;
  min-width:0!important;
  align-content:center!important;
  row-gap:5px!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] .project-generation-label{
  min-width:0!important;
  max-width:100%!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] .project-card[data-generation-status="failed"] .project-generation-label{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  line-clamp:2;
  overflow:hidden!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] .project-generation-track{
  display:block!important;
  position:static!important;
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  height:5px!important;
  margin:4px 0 1px!important;
  overflow:hidden!important;
  border-radius:999px!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] :is(
  .project-generation-track,.project-generation-label,.project-updated
)[hidden]{
  display:none!important;
}

/* A contained, genuine source photo (not a generic file icon). The browser
   owns the object URL; it is neither stored nor sent to another endpoint. */
html body#daailokStudio #drawerContent[data-tool="assets"] .project-generation-reference{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:4px!important;
  align-items:center!important;
  min-width:0!important;
  max-width:100%!important;
  margin:3px 0!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] .project-generation-reference img{
  display:block!important;
  width:100%!important;
  height:88px!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:rgba(0,0,0,.16)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:7px!important;
  box-sizing:border-box!important;
}
html body#daailokStudio #drawerContent[data-tool="assets"] .project-generation-reference small{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:normal!important;
  line-height:1.35!important;
}


/* Bugfix 73 - AI-generated virtual scene opening notice; editor-only.
   Do not apply a label to wholly manual 3D projects. */
html body#daailokStudio #viewportScene .ai-scene-notice{
  position:absolute!important;
  left:14px!important;
  bottom:14px!important;
  z-index:9!important;
  pointer-events:none!important;
  padding:6px 10px!important;
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.23)!important;
  color:#f6f8f3!important;
  font:600 12px/1.4 sans-serif!important;
  background:rgba(4,11,17,.70)!important;
  letter-spacing:.02em!important;
}
html body#daailokStudio #viewportScene .ai-scene-notice[hidden]{display:none!important;}


/* Test-only 3D route/keyframe and multi-project management controls. */
.daailok-route-panel .route-field{display:flex;flex-direction:column;gap:7px;margin:12px 0;font-size:12px;color:var(--text-secondary,inherit)}
.daailok-route-panel .route-field select,.daailok-route-panel .route-field input{width:100%;box-sizing:border-box;border-radius:11px;border:1px solid rgba(166,166,166,.28);background:rgba(120,120,120,.09);color:inherit;min-height:35px;padding:7px 11px}
.daailok-route-panel .route-field select option{background:#272827;color:#f5f5f3}
.daailok-route-panel .route-actions{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.daailok-route-panel .route-actions button,.daailok-route-panel .route-keyframe-row button{border:1px solid rgba(160,160,160,.24);border-radius:10px;color:inherit;background:rgba(158,158,158,.11);padding:8px 10px;cursor:pointer}
.daailok-route-panel .route-actions button:hover,.daailok-route-panel .route-keyframe-row button:hover{border-color:rgba(239,194,67,.8);background:rgba(239,194,67,.12)}
.daailok-route-panel .route-keyframes{max-height:245px;overflow-y:auto;font-size:12px;color:inherit}
.daailok-route-panel .route-keyframe-row{display:flex;align-items:center;gap:6px;margin:6px 0;border-bottom:1px solid rgba(150,150,150,.15);padding:4px 0}
.daailok-route-panel .route-keyframe-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daailok-route-panel .route-keyframe-row button{flex:none;padding:4px 8px;font-size:11px}
.daailok-route-panel #routeStatus{line-height:1.6;font-size:12px;overflow-wrap:anywhere}
.merge-project-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto;margin:16px 0}
.merge-project-option{display:flex;align-items:center;gap:10px;border:1px solid rgba(155,155,155,.23);border-radius:10px;padding:9px 11px;cursor:pointer}
.merge-project-option input{accent-color:#f2bf36}


/* Preview: progress occupies precisely the original guide rectangle.
   The guide returns when progress ends; no change to original panel geometry. */
html body#daailokStudio #viewport .viewport-generation-progress{
  position:absolute!important;left:50%!important;bottom:13px!important;z-index:30!important;
  transform:translateX(-50%)!important;
  width:auto;max-width:calc(100% - 26px)!important;height:auto;
  min-width:0!important;min-height:0!important;box-sizing:border-box!important;
  padding:6px 10px!important;
  border:1px solid #282a2c!important;border-radius:15px!important;
  background:rgba(18,19,20,.82)!important;
  color:#babdbb!important;box-shadow:none!important;pointer-events:none!important;
  overflow:hidden!important;
}
html body#daailokStudio #viewport .viewport-generation-progress[hidden],
html body#daailokStudio #viewport .interaction-hint[hidden]{display:none!important}
html body#daailokStudio #viewport .viewport-generation-heading{
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin:0!important;min-width:0!important;gap:8px!important;
  font-size:9px!important;line-height:1.45!important;
}
html body#daailokStudio #viewport .viewport-generation-heading b{
  flex:0 1 auto!important;min-width:0!important;font-size:9px!important;
  line-height:1.45!important;font-weight:500!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
html body#daailokStudio #viewport .viewport-generation-heading strong{
  flex:none!important;font-size:9px!important;font-weight:600!important;
  line-height:1.45!important;font-variant-numeric:tabular-nums!important;color:#dfbf64!important;
}
html body#daailokStudio #viewport .viewport-generation-light{
  flex:none!important;width:5px!important;height:5px!important;border-radius:50%!important;
  background:#e8c365!important;box-shadow:0 0 5px #e8c36555!important;
}
html body#daailokStudio #viewport .viewport-generation-track{
  position:absolute!important;left:10px!important;right:10px!important;
  bottom:2px!important;height:2px!important;width:auto!important;
  border-radius:999px!important;overflow:hidden!important;background:rgba(155,155,155,.15)!important;
}
html body#daailokStudio #viewport .viewport-generation-track i{
  display:block!important;width:0%;height:100%!important;border-radius:inherit!important;
  background:#d7b75a!important;transition:width .22s ease!important;
}
html body#daailokStudio #viewport .viewport-generation-progress[data-stage="failed"] .viewport-generation-light{
  background:#e78b83!important;box-shadow:none!important;
}
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-progress{
  background:rgba(240,240,239,.88)!important;color:#62676b!important;
  border-color:rgba(52,59,65,.20)!important;
}
html body#daailokStudio #drawerContent .project-generation-reference,
html body#daailokStudio #drawerContent .project-generation-label,
html body#daailokStudio #drawerContent .project-generation-track{display:none!important}


/* V2.2 correction — no dark-mode skin overrides.
   Dark: V2.1 material, dimensions, colors, border and shadows are authoritative.
   Normal layout only: place the HUD at the visible editing frame's true center. */
html[data-studio-layout=normal] body#daailokStudio #viewport .interaction-hint,
html[data-studio-layout=normal] body#daailokStudio #viewport .viewport-generation-progress{
  left:var(--daailok-viewport-hud-center-x,50%)!important;
}

/* A hidden original-length text measure keeps the dark hint's original
   intrinsic width; visible shortcut tips can roll without changing the pill. */
html body#daailokStudio #viewport .interaction-hint-measure{
  visibility:hidden;
  font:inherit;
}
html body#daailokStudio #viewport .interaction-hint-roller{
  position:absolute;
  inset:0 10px;
  overflow:hidden;
  white-space:nowrap;
  text-align:center;
  pointer-events:none;
}
html body#daailokStudio #viewport .interaction-hint-line{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:inherit;
  font:inherit;
  opacity:1;
  transform:translateY(0);
  transition:transform .48s cubic-bezier(.22,.61,.36,1),opacity .48s ease;
}
html body#daailokStudio #viewport .interaction-hint-line-next{
  transform:translateY(110%);
  opacity:0;
}
html body#daailokStudio #viewport .interaction-hint.is-rolling .interaction-hint-line:first-child{
  transform:translateY(-110%);
  opacity:0;
}
html body#daailokStudio #viewport .interaction-hint.is-rolling .interaction-hint-line-next{
  transform:translateY(0);
  opacity:1;
}

/* Only the requested spinning indicator changes inside the original dark HUD. */
html body#daailokStudio #viewport .viewport-generation-spinner{
  flex:none;
  display:block;
  width:12px;
  height:12px;
  box-sizing:border-box;
  border:1.7px solid rgba(236,238,241,.30);
  border-top-color:#e4bb57;
  border-right-color:rgba(226,191,101,.82);
  border-radius:50%;
  animation:daailok-v22-world-spin 1.8s linear infinite;
}
@keyframes daailok-v22-world-spin{to{transform:rotate(360deg)}}
html body#daailokStudio #viewport .viewport-generation-progress[data-stage="success"] .viewport-generation-spinner,
html body#daailokStudio #viewport .viewport-generation-progress[data-stage="failed"] .viewport-generation-spinner,
html body#daailokStudio #viewport .viewport-generation-progress[data-stage="cancelled"] .viewport-generation-spinner{
  animation:none;
  display:grid;
  place-items:center;
}
html body#daailokStudio #viewport .viewport-generation-progress[data-stage="success"] .viewport-generation-spinner{
  border-color:#b6dfbc;
}
html body#daailokStudio #viewport .viewport-generation-progress[data-stage="success"] .viewport-generation-spinner::after{
  content:"✓";
  font-size:9px;
  line-height:1;
  color:#b6dfbc;
}
html body#daailokStudio #viewport .viewport-generation-progress:is([data-stage="failed"],[data-stage="cancelled"]) .viewport-generation-spinner{
  border-color:#e5a39b;
}
html body#daailokStudio #viewport .viewport-generation-progress:is([data-stage="failed"],[data-stage="cancelled"]) .viewport-generation-spinner::after{
  content:"×";
  font-size:10px;
  line-height:1;
  color:#e5a39b;
}

/* Silver/light only: compact smoke-glass capsule inspired by the official
   director frame — translucent depth, spectral top reflection, edge thickness.
   No white solid fill, no stretched full-viewport bar. */
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint,
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-progress{
  width:min(450px,calc(var(--daailok-viewport-hud-visible-width,100%) - 36px))!important;
  max-width:calc(100% - 24px)!important;
  min-width:0!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 14px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(236,244,245,.38)!important;
  border-radius:16px!important;
  background:linear-gradient(140deg,
    rgba(143,162,174,.40) 0%,
    rgba(63,76,86,.58) 27%,
    rgba(38,49,56,.63) 73%,
    rgba(100,121,132,.42) 100%)!important;
  color:#f3f5f2!important;
  font-size:11px!important;
  font-weight:550!important;
  letter-spacing:.012em!important;
  box-shadow:
    0 8px 22px rgba(32,45,54,.18),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(14,25,33,.22),
    inset 1px 0 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(14px) saturate(128%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(128%)!important;
  overflow:hidden!important;
  isolation:isolate!important;
  pointer-events:none!important;
}
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint::before,
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-progress::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(ellipse 32% 105% at 9% -22%,rgba(255,255,255,.34),transparent 96%),
    radial-gradient(ellipse 22% 110% at 101% 120%,rgba(210,231,243,.20),transparent 86%),
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 39%);
  pointer-events:none;
}
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint::after,
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-progress::after{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  height:1px;
  left:13%;
  right:13%;
  background:linear-gradient(90deg,transparent,rgba(255,228,167,.47),rgba(255,255,255,.70),transparent);
  pointer-events:none;
}
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint-roller{
  inset:0 14px;
  z-index:2;
}
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint-line{
  font-size:11px!important;
  font-weight:550!important;
  text-shadow:0 1px 2px rgba(5,14,20,.30);
}
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-heading{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
}
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-heading b{
  font-size:11px!important;
  font-weight:550!important;
  color:#f3f5f2!important;
  line-height:1.4!important;
  text-shadow:0 1px 2px rgba(5,14,20,.30);
}
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-spinner{
  border-color:rgba(255,255,255,.31);
  border-top-color:#f1d38d;
  border-right-color:rgba(243,212,148,.82);
}
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-track{
  z-index:2;
  left:14px!important;
  right:14px!important;
  bottom:2px!important;
  background:rgba(228,235,235,.15)!important;
}
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-track i{
  background:#efcb78!important;
}

/* Keep the guide out of the normal-layout shot timeline, as before. */
html[data-studio-layout=normal] body#daailokStudio .studio[data-light-shots=open] #viewport .interaction-hint{
  display:none!important;
}
@media (prefers-reduced-motion:reduce){
  html body#daailokStudio #viewport .viewport-generation-spinner{animation-duration:5s}
  html body#daailokStudio #viewport .interaction-hint-line{transition:none}
}

/* When the existing Three.js liquid optical layer is available, use its
   live scene refraction as the glass fill. Keep the CSS material as fallback. */
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint[data-light-glass-ready],
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-generation-progress[data-light-glass-ready]{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html[data-studio-theme=light] body#daailokStudio #viewport :is(.interaction-hint,.viewport-generation-progress)>canvas.light-panel-optics{
  z-index:0!important;
  opacity:.95!important;
}

/* Scene Graph V1: additive creation scope control, preview dialog only. */
html body#daailokStudio .creation-scene-scope{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:10px;
  align-items:center;
  margin-top:10px;
}
html body#daailokStudio .creation-scene-scope[hidden]{display:none!important}
html body#daailokStudio .creation-scene-scope select{
  box-sizing:border-box;
  width:100%;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px;
  background:rgba(65,69,71,.30);
  color:inherit;
  font-size:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
html body#daailokStudio .creation-scene-scope select option{
  background:#252729;
  color:#e5e5e2;
}
html[data-studio-theme=light] body#daailokStudio .creation-scene-scope select{
  border-color:rgba(237,240,242,.27);
  background:rgba(231,237,241,.08);
}