/* One narrow-screen header contract for the project tree and generation prep.
   Both collapsed outer cards are 48px tall; titles share a left inset and type,
   and controls sit 8px from the outer card edge. */
@media (max-width: 820px) {
  body #projectsTreeRoot { padding: 10px 14px !important; }
  body .aidc-col--center:has(.generation-panel .genprep-collapse-btn) { padding: 0 !important; }
  body .generation-panel:has(.genprep-collapse-btn) { padding: 10px 14px; }
  body #projectsTreeRoot .panel-header { margin: 0 0 10px; padding: 0 !important; }
  body #projectsTreeRoot .panel-header > div:first-child { width: 100%; min-width: 0; padding-right: 34px; }
  body .generation-panel__header h2 { padding-right: 34px; }
  body :is(#projectsTreeRoot .panel-title, .generation-panel__header h2) {
    display: block;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    color: var(--aidc-text-primary);
  }
  body :is(#projectsTreeRoot .tree-collapse-btn[aria-expanded], .generation-panel .genprep-collapse-btn[aria-expanded]) {
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--aidc-border-default);
    border-radius: 50%;
    background: var(--aidc-btn-secondary-bg);
    color: var(--aidc-text-secondary);
    box-shadow: none;
  }
  body #projectsTreeRoot .tree-collapse-btn[aria-expanded] { top: 10px; right: 8px; }
  body .generation-panel .genprep-collapse-btn[aria-expanded] { top: 0; right: -6px; }
  body :is(#projectsTreeRoot .tree-collapse-btn[aria-expanded], .generation-panel .genprep-collapse-btn[aria-expanded])::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid currentColor;
    transform: none;
  }
  body :is(#projectsTreeRoot .tree-collapse-btn[aria-expanded="false"], .generation-panel .genprep-collapse-btn[aria-expanded="false"])::after { transform: rotate(180deg); }
  body :is(#projectsTreeRoot .tree-collapse-btn[aria-expanded], .generation-panel .genprep-collapse-btn[aria-expanded]):focus-visible { box-shadow: 0 0 0 3px var(--aidc-action-focus-ring); }

  body #projectsTreeRoot.is-collapsed,
  body .aidc-col--center:has(.generation-panel.is-collapsed) {
    box-sizing: border-box;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 24px;
    background: var(--aidc-bg-generator-shell);
    box-shadow: none;
    align-self: start;
  }
  body #projectsTreeRoot.is-collapsed .panel-header { height: 100%; margin: 0; justify-content: center; }
  body #projectsTreeRoot.is-collapsed > .aidc-scroll-host { height: 100%; }
  body .project-details-scope:has(> .generation-panel.is-collapsed) { height: 100%; flex: 0 0 auto; }
  body .generation-panel.is-collapsed { height: 100%; border-radius: 24px; box-shadow: none; }
  body .generation-panel.is-collapsed .generation-panel__header { height: 100%; justify-content: center; }
  body #projectsTreeRoot.is-collapsed .tree-collapse-btn[aria-expanded],
  body .generation-panel.is-collapsed .genprep-collapse-btn[aria-expanded] { top: 50%; transform: translateY(-50%); }
}
@media (max-width: 360px) {
  body :is(#projectsTreeRoot .panel-title, .generation-panel__header h2) {
    font-size: 12px;
    letter-spacing: 0.12em;
  }
}


/* Generator empty-folder guide — single visual owner.
   Semantic values live in component-readability-tokens.css; this file owns
   only component structure and maps markup to those tokens. */

/* A legacy disabled/empty state used to fade the entire center column. The
   placeholder is active content, so its owning containers must never stay
   visually disabled while the guide is visible. */
.project-details-scope:has(> .genprep-folder-guide:not([hidden])),
.aidc-col--center:has(.genprep-folder-guide:not([hidden])){
  opacity:1!important;
  filter:none!important;
}

.genprep-folder-guide{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  width:100%;
  min-height:0;
  padding:32px 20px;
  background:var(--aidc-generator-guide-surface)!important;
  color:var(--aidc-generator-guide-body)!important;
  -webkit-text-fill-color:var(--aidc-generator-guide-body)!important;
  font-size:14px;
  line-height:1.6;
  font-weight:500;
  letter-spacing:.01em;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
/* The guide is the only visible panel when there is no selected project.
   It must scroll inside the center column on short desktop viewports. */
.project-details-scope:has(> .genprep-folder-guide:not([hidden])) > .genprep-folder-guide{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.genprep-folder-guide[hidden]{display:none!important}
.genprep-folder-guide *{opacity:1!important;filter:none!important;mix-blend-mode:normal!important}
.genprep-folder-guide__inner{max-width:480px;margin:0 auto;text-align:left}
.genprep-folder-guide__title{
  margin:0 0 20px;
  text-align:center;
  font-size:17px;
  font-weight:700;
  color:var(--aidc-generator-guide-title)!important;
  -webkit-text-fill-color:var(--aidc-generator-guide-title)!important;
}
.genprep-folder-guide__section{margin-bottom:18px}
.genprep-folder-guide__heading{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--aidc-generator-guide-body)!important;
  -webkit-text-fill-color:var(--aidc-generator-guide-body)!important;
}
.genprep-folder-guide__section--accent .genprep-folder-guide__heading{color:var(--aidc-generator-guide-accent)!important;-webkit-text-fill-color:var(--aidc-generator-guide-accent)!important}
.genprep-folder-guide__section--info .genprep-folder-guide__heading{color:var(--aidc-generator-guide-info)!important;-webkit-text-fill-color:var(--aidc-generator-guide-info)!important}
.genprep-folder-guide__section--warning .genprep-folder-guide__heading{color:var(--aidc-generator-guide-warning)!important;-webkit-text-fill-color:var(--aidc-generator-guide-warning)!important}
.genprep-folder-guide__section--danger .genprep-folder-guide__heading{color:var(--aidc-generator-guide-danger)!important;-webkit-text-fill-color:var(--aidc-generator-guide-danger)!important}
.genprep-folder-guide__icon,
.genprep-folder-guide__list>li>svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
  color:inherit!important;
  stroke:currentColor!important;
}
.genprep-folder-guide__body,
.genprep-folder-guide__body p,
.genprep-folder-guide__list,
.genprep-folder-guide__list li,
.genprep-folder-guide__list li>span{
  color:var(--aidc-generator-guide-body)!important;
  -webkit-text-fill-color:var(--aidc-generator-guide-body)!important;
}
.genprep-folder-guide__body p{margin:0;font-size:13px;line-height:1.7}
.genprep-folder-guide__body strong{color:var(--aidc-generator-guide-emphasis)!important;-webkit-text-fill-color:var(--aidc-generator-guide-emphasis)!important}
.genprep-folder-guide__body b{color:var(--aidc-generator-guide-accent)!important;-webkit-text-fill-color:var(--aidc-generator-guide-accent)!important}
.genprep-folder-guide__list{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.65}
.genprep-folder-guide__list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:6px;align-items:start;margin-bottom:5px}



/* Upscale Editor semantic chrome. Scope strictly to the Upscale runtime.
   Mask Editor shares #imageCanvas, so using that id as the owner selector leaks
   Upscale-specific chrome into the shared mask contract. */
body:has(.btn-upscale){background:transparent!important;color:var(--aidc-editor-control-text)!important}
body:has(.btn-upscale) .modal-shell,body:has(.btn-upscale) .modal-body{color:var(--aidc-editor-control-text)!important}
body:has(.btn-upscale) .modal-header,body:has(.btn-upscale) .modal-footer{background:var(--aidc-editor-toolbar-surface)!important;border-color:var(--aidc-editor-control-border)!important;color:var(--aidc-editor-control-text)!important}
body:has(.btn-upscale) .modal-title{color:var(--aidc-editor-control-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-text)!important}
body:has(.btn-upscale) .canvas-wrapper{background:var(--aidc-editor-stage-surface)!important}

body:has(.btn-upscale) :is(.model-selector-label,.placeholder,.custom-dropdown__item-badge,.image-loading-indicator .il-text,.progress-overlay .label){color:var(--aidc-editor-control-muted)!important;-webkit-text-fill-color:var(--aidc-editor-control-muted)!important}
body:has(.btn-upscale) .placeholder-tip{background:var(--aidc-editor-control-bg)!important;border-color:var(--aidc-editor-control-border)!important;color:var(--aidc-editor-control-secondary)!important}
body:has(.btn-upscale) :is(.prompt-input,.custom-dropdown__trigger,.custom-dropdown__menu,.file-button,.zoom-control,.quality-toggle){background:var(--aidc-editor-control-bg)!important;border-color:var(--aidc-editor-control-border-strong)!important;color:var(--aidc-editor-control-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-text)!important;box-shadow:none!important}
body:has(.btn-upscale) .prompt-input::placeholder{color:var(--aidc-editor-control-muted)!important;-webkit-text-fill-color:var(--aidc-editor-control-muted)!important;opacity:1!important}
body:has(.btn-upscale) .prompt-input:focus,body:has(.btn-upscale) .custom-dropdown.open .custom-dropdown__trigger{border-color:var(--aidc-action-focus)!important;box-shadow:0 0 0 3px var(--aidc-action-focus-ring)!important}
body:has(.btn-upscale) .custom-dropdown__menu{background:var(--aidc-editor-overlay-bg)!important}
body:has(.btn-upscale) .custom-dropdown__item{color:var(--aidc-editor-control-secondary)!important;-webkit-text-fill-color:var(--aidc-editor-control-secondary)!important}
body:has(.btn-upscale) .custom-dropdown__item:hover{background:var(--aidc-editor-control-bg-hover)!important;color:var(--aidc-editor-control-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-text)!important}
body:has(.btn-upscale) .custom-dropdown__item.active{background:var(--aidc-editor-control-active-bg)!important;color:var(--aidc-editor-control-active-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-active-text)!important}
body:has(.btn-upscale) .custom-dropdown__item.disabled{color:var(--aidc-editor-control-muted)!important;-webkit-text-fill-color:var(--aidc-editor-control-muted)!important;opacity:.58!important}

body:has(.btn-upscale) .quality-btn{background:transparent!important;color:var(--aidc-editor-control-secondary)!important;-webkit-text-fill-color:var(--aidc-editor-control-secondary)!important}
body:has(.btn-upscale) .quality-btn:hover{background:var(--aidc-editor-control-bg-hover)!important;color:var(--aidc-editor-control-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-text)!important}
body:has(.btn-upscale) .quality-btn.active{background:var(--aidc-editor-control-active-bg)!important;color:var(--aidc-editor-control-active-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-active-text)!important}
body:has(.btn-upscale) .zoom-control button,body:has(.btn-upscale) .ba-zoom-badge button{background:var(--aidc-editor-control-bg)!important;border-color:var(--aidc-editor-control-border)!important;color:var(--aidc-editor-control-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-text)!important}
body:has(.btn-upscale) .file-button:hover,body:has(.btn-upscale) .picker-button:hover,body:has(.btn-upscale) .zoom-control button:hover,body:has(.btn-upscale) .ba-zoom-badge button:hover{background:var(--aidc-editor-control-bg-hover)!important;border-color:var(--aidc-editor-control-border-strong)!important}
body:has(.btn-upscale) .picker-button{background:color-mix(in srgb,var(--aidc-green-500) 9%,var(--aidc-editor-control-bg))!important;border-color:color-mix(in srgb,var(--aidc-green-500) 32%,var(--aidc-editor-control-border))!important;color:var(--aidc-editor-control-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-text)!important}
body:has(.btn-upscale) .btn-upscale{background:var(--aidc-btn-primary-bg)!important;border:1px solid var(--aidc-btn-primary-border)!important;color:var(--aidc-btn-primary-text)!important;-webkit-text-fill-color:var(--aidc-btn-primary-text)!important;box-shadow:var(--aidc-btn-primary-shadow)!important}
body:has(.btn-upscale) .btn-upscale:disabled{background:var(--aidc-btn-secondary-bg)!important;border-color:var(--aidc-border-default)!important;color:var(--aidc-editor-control-muted)!important;-webkit-text-fill-color:var(--aidc-editor-control-muted)!important;box-shadow:none!important}
body:has(.btn-upscale) :is(.progress-overlay,.result-overlay){background:color-mix(in srgb,var(--aidc-bg-page) 88%,transparent)!important}
body:has(.btn-upscale) .image-loading-indicator,body:has(.btn-upscale) .ba-loading-overlay{background:color-mix(in srgb,var(--aidc-bg-page) 64%,transparent)!important}
body:has(.btn-upscale) :is(.progress-overlay .spinner,.image-loading-indicator .il-spinner,.ba-loading-overlay .ba-spinner){border-color:var(--aidc-border-default)!important;border-top-color:var(--aidc-action-primary-from)!important}
body:has(.btn-upscale) .ba-container{border-color:var(--aidc-editor-control-border)!important}
body:has(.btn-upscale) .ba-zoom-badge,body:has(.btn-upscale) .ba-label{background:var(--aidc-editor-overlay-bg)!important;color:var(--aidc-editor-overlay-text)!important;-webkit-text-fill-color:var(--aidc-editor-overlay-text)!important;border-color:var(--aidc-editor-overlay-border)!important}



/* Upscale Editor UX geometry. Scope strictly to the Upscale runtime.
   Mask Editor also owns #imageCanvas, so generic :has(#imageCanvas) selectors
   would override the shared mask side-rail geometry through higher specificity. */
body:has(.btn-upscale) .modal-body{position:relative!important}
body:has(.btn-upscale) .canvas-wrapper{anchor-name:--aidc-upscale-stage}
body:has(.btn-upscale) .toolbar{
  position:absolute!important;
  position-anchor:--aidc-upscale-stage;
  right:anchor(right)!important;
  bottom:anchor(bottom)!important;
  transform:translate(calc(-1 * var(--aidc-upscale-stage-control-inset)),calc(-1 * var(--aidc-upscale-stage-control-inset)))!important;
  z-index:45!important;
  margin:0!important;
  padding:0!important;
  width:auto!important;
  pointer-events:none!important
}
@supports not (anchor-name:--aidc-upscale-stage){
  body:has(.btn-upscale) .toolbar{right:var(--aidc-upscale-stage-control-inset)!important;bottom:var(--aidc-upscale-stage-control-bottom)!important;transform:none!important}
}
body:has(.btn-upscale) .toolbar .zoom-control{pointer-events:auto!important;background:var(--aidc-editor-overlay-bg)!important;border-color:var(--aidc-editor-overlay-border)!important;color:var(--aidc-editor-overlay-text)!important;-webkit-text-fill-color:var(--aidc-editor-overlay-text)!important;box-shadow:var(--aidc-shadow-popover)!important;backdrop-filter:blur(8px)}
body:has(.btn-upscale) .toolbar .zoom-control button{color:var(--aidc-editor-control-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-text)!important}

/* Source actions are ordinary stage chrome, never part of the result comparison.
   On wide screens the shared rail owns their geometry. On narrow screens they
   stay in flow below the working image, but must sit below the fixed BA overlay. */
body:has(.btn-upscale) .replace-upload{position:relative!important;z-index:20!important;margin-top:var(--aidc-upscale-replace-row-gap)!important;margin-bottom:var(--aidc-upscale-replace-row-gap)!important;min-height:34px!important}
body:has(.btn-upscale) .replace-upload .file-button,body:has(.btn-upscale) .replace-upload .picker-button{position:relative!important;z-index:21!important}
body:has(.btn-upscale) .modal-shell:has(.result-overlay.active) .replace-upload{visibility:hidden!important;pointer-events:none!important}
body:has(.btn-upscale) .modal-footer{position:relative!important;z-index:20!important}

/* Hosted narrow/mobile tools keep the generation controls at the bottom edge of
   the child workspace, immediately above the parent Continue bar. The image and
   source actions can use the flexible space above, but the model/prompt/quality
   block never floats halfway up a tall WebApp window. */
html[data-aidc-hosted-editor][data-aidc-mask-rail="narrow"] body:has(.btn-upscale) .model-selector-row{
  margin-top:auto!important;
  flex:0 0 auto!important
}
html[data-aidc-hosted-editor][data-aidc-mask-rail="narrow"] body:has(.btn-upscale) .modal-footer{
  flex:0 0 auto!important;
  margin-top:0!important
}

body:has(.btn-upscale) .smart-prompt-btn{background:var(--aidc-editor-control-bg)!important;border-color:var(--aidc-editor-control-border)!important;color:var(--aidc-editor-control-secondary)!important;-webkit-text-fill-color:var(--aidc-editor-control-secondary)!important;opacity:1!important;box-shadow:none!important}
body:has(.btn-upscale) .smart-prompt-btn :where(svg,span){color:inherit!important;stroke:currentColor!important;-webkit-text-fill-color:currentColor!important;opacity:1!important}
body:has(.btn-upscale) .smart-prompt-btn:hover,body:has(.btn-upscale) .smart-prompt-btn:focus-visible{background:var(--aidc-editor-control-bg-hover)!important;border-color:var(--aidc-editor-control-border-strong)!important;color:var(--aidc-editor-control-text)!important;-webkit-text-fill-color:var(--aidc-editor-control-text)!important;outline:none!important}

/* Generation Panel layout and behavior.
   Visual ownership lives in design-system/adapters/generation-panel-theme.css.
   The empty-folder helper is a shared component contract loaded here because
   this stylesheet is the common entrypoint for Image/Video/3D generator pages.
   The scoped Upscale editor adapter is imported here because upscale_editor.html
   consumes this layout directly instead of the generator route theme bundle. */

.generation-panel {
  border-radius: 28px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}

/* Empty-project guide and generation form are mutually exclusive states.
   A regular author display:flex otherwise overrides the browser's [hidden]
   rule, leaving a compressed/scrolling form above the guide. */
.generation-panel[data-generation-panel][hidden] { display: none !important; }

.generation-panel__header { position: relative; display: flex; flex-direction: column; gap: 12px; }
.generation-panel__header h2 { margin: 0; font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase; }
.genprep-tabs { padding: 0 10px 10px; display: flex; gap: 10px; border-bottom-style: solid; border-bottom-width: 1px; }
.genprep-tab {
  flex: 1;
  border-radius: 999px;
  border-style: solid;
  border-width: 1px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  letter-spacing: 0.06em;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  background-clip: padding-box;
}
.genprep-tab:focus { outline: none; }
.generation-panel__content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  gap: 0;
  scrollbar-width: thin;
}
.generation-panel__content::-webkit-scrollbar { width: 4px; }
.generation-panel__content::-webkit-scrollbar-track { background: transparent; }
.generation-panel__content::-webkit-scrollbar-thumb { border-radius: 4px; }
.genprep-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.genprep-panel[hidden] { display: none; }
.genprep-tabs[hidden], .generation-panel__content[hidden] { display: none; }
.genprep-collapse-btn { display: none; position: absolute; top: 0; right: 0; width: 26px; height: 26px; padding: 0; border: 1px solid; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; }
.genprep-collapse-btn::after { content: ''; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid currentColor; }
.genprep-collapse-btn[aria-expanded="false"]::after { transform: rotate(180deg); }
@media (max-width: 820px) {
  .genprep-collapse-btn { display: inline-flex; }
  .generation-panel__header h2 { padding-right: 36px; }
  .generation-panel.is-collapsed { flex: 0 0 auto; gap: 0; }
  .generation-panel.is-collapsed .generation-panel__header { gap: 0; }
}
.genprep-panel > [data-module] { flex: 1 1 auto; min-height: 0; }
.project-details-scope[data-project-details] {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: transparent;
}
@media (max-width: 1040px) { .generation-panel { flex: 1 1 auto; } }
@media (max-width: 768px) {
  .generation-panel__header h2 { letter-spacing: 0.24em; }
  .genprep-tabs { flex-direction: column; border-bottom: none; }
}

.genprep-refs-drawer[hidden] { display: none; }
.genprep-submit-status { flex: 0 0 auto; padding: 10px 12px; border: 1px solid; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.genprep-submit-status[hidden] { display: none; }
.genprep-refs-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.genprep-refs-drawer__header h2 { margin: 0; font-size: 14px; letter-spacing: 0.08em; }
.genprep-refs-drawer__close { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 1px solid; border-radius: 50%; font-size: 24px; cursor: pointer; }
.genprep-refs-drawer > .genprep-panel { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
@media (min-width: 1201px) {
  .aidc-layout--3col:has(> .genprep-refs-drawer) { position: relative; }
  .aidc-layout--3col > .genprep-refs-drawer {
    position: absolute;
    grid-column: 3;
    grid-row: 1;
    inset: 0;
    width: 100%;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid;
    border-radius: 28px;
    overflow: hidden;
  }
  .aidc-layout--3col > .genprep-refs-drawer[hidden] { display: none; }
  /* Both Image and Video retain the canonical fullscreen prompt editor. */
  .genprep-refs-drawer .refp-expand-btn { display: inline-flex; }
  .genprep-tabs--drawer [data-tab="refs"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .genprep-tabs--drawer [data-tab="refs"]::after { content: ''; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); flex: 0 0 auto; }
}