/* Full-width workspaces for tabs that do not use the character browser. */
.cx-admin-shell:has(> #cxAdminCardsBrowser[hidden]) > #cxAdminCardsEditor:not([hidden]),
.cx-admin-shell:has(> #cxAdminChapterBrowser[hidden]) > #cxAdminChapterEditor:not([hidden]){
  grid-column:2 / -1!important;
  width:100%;
  min-width:0;
}

#cxAdminCardsEditor.cx-admin-options-active,
#cxAdminChapterEditor.cx-admin-options-active{
  grid-column:2 / -1!important;
  width:100%;
  min-width:0;
}

#cxAdminCardsCreationPanel,
#cxAdminCardWorkflowModal,
#cxAdminStoryOptionsPanel,
#cxAdminStoryAiOptionsPanel{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}

/* The embedded creation tool must not keep its former Creation-menu rail. */
#cxAdminCardsCreationPanel .cx-creation-panel.is-admin-embedded,
#cxAdminCardsCreationPanel .cx-creation-panel.is-admin-embedded .cx-creation-shell,
#cxAdminCardsCreationPanel .cx-creation-panel.is-admin-embedded .cx-creation-workspace{
  width:100%;
  max-width:none;
  min-width:0;
  box-sizing:border-box;
}
#cxAdminCardsCreationPanel .cx-creation-panel.is-admin-embedded .cx-creation-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
}
#cxAdminCardsCreationPanel .cx-creation-panel.is-admin-embedded .cx-creation-modules{
  display:none!important;
}
#cxAdminCardsCreationPanel .cx-creation-panel.is-admin-embedded .cx-creation-workspace{
  grid-column:1;
}

/* Cards options: use the whole editor width. */
#cxAdminCardWorkflowModal{
  padding-inline:clamp(12px,1.4vw,24px);
}
#cxAdminCardWorkflowModal > .cx-admin-ai-workflow-dialog{
  width:100%;
  max-width:none;
  margin:0;
}
#cxAdminCardWorkflowForm{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}

/* Compact service summaries on one row. */
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-common{
  min-width:0;
  min-height:96px;
  box-sizing:border-box;
  align-items:flex-start;
  flex-direction:column;
  gap:10px;
}
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-common > div{
  min-width:0;
}
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-common > div > small{
  display:none!important;
}
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-common > button,
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-common .cx-admin-card-locked-preview-actions{
  width:100%;
}
#cxAdminCardWorkflowForm .cx-admin-card-locked-preview-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#cxAdminCardWorkflowForm .cx-admin-card-locked-preview-actions button{
  flex:1 1 180px;
}

/* Classic, After Dark and Full Art are configured from left to right. */
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-step{
  min-width:0;
  height:100%;
  box-sizing:border-box;
  grid-template-columns:minmax(0,1fr)!important;
  align-content:start;
}
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-step > *{
  grid-column:1!important;
  min-width:0;
  max-width:none!important;
}
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-step .cx-admin-ai-workflow-settings{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-step .cx-admin-ai-workflow-variables{
  padding:7px;
}

/* The shared post-processing settings remain full-width below the three cards. */
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-background-removal,
#cxAdminCardWorkflowForm > .cx-admin-ai-workflow-upscale,
#cxAdminCardWorkflowForm > footer,
#cxAdminCardWorkflowForm > .cx-admin-feedback{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;
}

/* Story AI options also fill the space freed by the hidden browser. */
#cxAdminStoryAiOptionsPanel{
  margin:0;
  padding-inline:clamp(14px,2vw,30px);
}
#cxAdminStoryAiOptionsPanel .cx-admin-story-ai-config{
  width:100%;
  max-width:none;
}

@media(max-width:1180px){
  #cxAdminCardWorkflowForm{grid-template-columns:1fr}
  #cxAdminCardWorkflowForm > .cx-admin-ai-workflow-common,
  #cxAdminCardWorkflowForm > .cx-admin-ai-workflow-step,
  #cxAdminCardWorkflowForm > .cx-admin-ai-workflow-background-removal,
  #cxAdminCardWorkflowForm > .cx-admin-ai-workflow-upscale,
  #cxAdminCardWorkflowForm > footer,
  #cxAdminCardWorkflowForm > .cx-admin-feedback{grid-column:1}
}

@media(max-width:720px){
  .cx-admin-shell:has(> #cxAdminCardsBrowser[hidden]) > #cxAdminCardsEditor:not([hidden]),
  .cx-admin-shell:has(> #cxAdminChapterBrowser[hidden]) > #cxAdminChapterEditor:not([hidden]),
  #cxAdminCardsEditor.cx-admin-options-active,
  #cxAdminChapterEditor.cx-admin-options-active{
    grid-column:auto!important;
  }
}