[data-panel-layout] [data-layout-panel][hidden] { display: none !important; }
@property --editor-left-track {
  syntax: "<length>";
  inherits: false;
  initial-value: 160px;
}
@property --editor-right-track {
  syntax: "<length>";
  inherits: false;
  initial-value: 180px;
}
.app[data-panel-layout],
#ai-image-panel[data-panel-layout] .ai-workspace { position: relative; }
.app[data-panel-layout].is-panel-track-moving {
  transition:
    --editor-left-track 300ms cubic-bezier(.22, 1, .36, 1),
    --editor-right-track 300ms cubic-bezier(.22, 1, .36, 1);
}
[data-layout-panel].is-panel-transitioning {
  position: absolute !important;
  grid-column: auto !important;
  grid-row: auto !important;
  left: var(--panel-motion-left) !important;
  top: var(--panel-motion-top) !important;
  width: var(--panel-motion-width) !important;
  height: var(--panel-motion-height) !important;
  z-index: 3;
}
[data-layout-panel].is-panel-moving,
[data-panel-layout] .is-panel-surface-moving {
  will-change: transform, opacity;
}
[data-panel-layout] .is-panel-surface-moving { position: relative; z-index: 1; }
.panel-visibility-toggle,
#ai-image-panel .panel-visibility-toggle,
.panel-collapse-close,
#ai-image-panel .panel-collapse-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 4px;
  min-height: var(--shell-control-size);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--shell-control-radius);
  background: var(--bg-input);
  color: var(--text-label);
  font: var(--shell-control-font-weight) var(--shell-control-font-size)/var(--shell-control-line-height) var(--shell-control-font-family);
  cursor: pointer;
}
.panel-visibility-toggle:hover,
#ai-image-panel .panel-visibility-toggle:hover,
.panel-collapse-close:hover { background: var(--bg-panel-hover); color: var(--text-primary); }
.panel-visibility-toggle:focus-visible,
.panel-collapse-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel-visibility-toggle svg { width:var(--shell-icon-size); height:var(--shell-icon-size); fill:none; stroke:currentColor; stroke-width:1.5; }
.app .panel-visibility-toggle { width:var(--shell-control-size); height:var(--shell-control-size); min-height:var(--shell-control-size); padding:4px; }
.app .panel-visibility-toggle .panel-toggle-label { display:none; }
.app-shell-header {
  grid-column:1 / -1;
  grid-row:1;
  position:relative;
  z-index:4;
  min-width:0;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border-strong);
}
.app > .panel-left { grid-column:1; grid-row:2; }
.app > .panel-center { grid-column:2; grid-row:2; }
.app > .panel-right { grid-column:3; grid-row:2; }
.app-shell-header .canvas-toolbar { min-width:0; padding-inline:52px; border-bottom:0; }
.toolbar-inspector-controls {
  min-width:0;
  container-type:inline-size;
  container-name:inspector-header;
}
.app-shell-header .panel-shell-toggles {
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  pointer-events:none;
}
.app-shell-header .panel-shell-toggles > * { pointer-events:auto; }
.app-shell-header [data-panel-toggle="left"] { grid-column:1; margin-left:12px; }
.app-shell-header [data-panel-toggle="right"] { grid-column:3; margin-right:12px; }
.panel-utility-bar {
  display:flex;
  align-items:center;
  gap:var(--shell-control-gap);
  min-height:var(--shell-control-size);
  margin:0 0 8px;
  flex:none;
}
.panel-utility-bar-right { justify-content:flex-end; }
.panel-utility-bar .topbar-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--shell-control-size);
  height:var(--shell-control-size);
  min-height:var(--shell-control-size);
  padding:4px;
  flex:none;
  color:var(--text-label);
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--shell-control-radius);
  cursor:pointer;
}
.panel-left[data-layout-panel] { display:flex; flex-direction:column; overflow:hidden; }
.panel-left[data-layout-panel] .tool-list { min-height:0; overflow-y:auto; scrollbar-width:none; }
.panel-left[data-layout-panel] .tool-list::-webkit-scrollbar { width:0; height:0; }
.panel-right[data-layout-panel] { display:flex; flex-direction:column; overflow:hidden; }
.panel-right[data-layout-panel] #inspector { min-height:0; height:auto; flex:1; overflow-y:auto; }
.panel-visibility-toggle[aria-expanded="true"] svg { color: var(--accent); }
.panel-visibility-toggle:active,
.panel-collapse-close:active { transform: scale(.97); transition: transform 100ms ease-out; }
.panel-shell-toggles { display:flex; flex:none; gap:var(--shell-control-gap); }
#ai-image-panel .ai-head > .panel-shell-toggles {
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  pointer-events:none;
}
#ai-image-panel .panel-shell-toggles > * { pointer-events:auto; }
#ai-image-panel .panel-toggle-label { display: none; }
#ai-image-panel .panel-visibility-toggle { width:var(--shell-control-size); height:var(--shell-control-size); min-height:var(--shell-control-size); padding:4px; }
#ai-image-panel [data-panel-toggle="left"] { grid-column:1; margin-left:8px; }
#ai-image-panel [data-panel-toggle="right"] { grid-column:3; margin-right:8px; }
#ai-image-panel .panel-utility-bar { margin: 4px 6px; }
.modal-overlay:has(> .bulk-modal),
#graph-modal-overlay {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.panel-collapse-close, #ai-image-panel .panel-collapse-close,
.panel-layout-backdrop[hidden] { display: none; }
#ai-image-panel[data-panel-layout] .ai-conversation { overflow-y: auto; }
#ai-image-panel[data-panel-layout] .ai-side-content,
#ai-image-panel[data-panel-layout] .ai-comments-panel,
#ai-image-panel[data-panel-layout] .ai-chat-panel { flex: 1 0 auto; overflow: visible; }
#ai-image-panel[data-panel-layout] .ai-review-overview { max-height: none; overflow: visible; }
#ai-image-panel[data-panel-layout] .ai-comments-list-section { flex: 0 0 auto; }
#ai-image-panel[data-panel-layout] .ai-comments-list { max-height: 240px; }

@media (min-width: 768px) {
  [data-panel-layout] { overflow: hidden; }
  .app[data-panel-layout] {
    --editor-left-track: var(--panel-left-w);
    --editor-right-track: var(--panel-right-w);
    grid-template-columns: var(--editor-left-track) minmax(0, 1fr) var(--editor-right-track);
  }
  .app[data-left-collapsed="true"] { --editor-left-track: 0px; }
  .app[data-right-collapsed="true"] { --editor-right-track: 0px; }
  #ai-image-panel[data-panel-layout] { --workbench-left-width: 150px; --workbench-right-width: 326px; }
  #ai-image-panel[data-panel-layout] .ai-workspace {
    grid-template-columns: var(--workbench-left-width) minmax(0, 1fr) var(--workbench-right-width);
  }
  #ai-image-panel[data-left-collapsed="true"] .ai-workspace {
    grid-template-columns: minmax(0, 1fr) var(--workbench-right-width);
    grid-template-areas: "results conversation";
  }
  #ai-image-panel[data-right-collapsed="true"] .ai-workspace {
    grid-template-columns: var(--workbench-left-width) minmax(0, 1fr);
    grid-template-areas: "tasks results";
  }
  #ai-image-panel[data-left-collapsed="true"][data-right-collapsed="true"] .ai-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "results";
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  #ai-image-panel[data-panel-layout] { --workbench-left-width: 120px; --workbench-right-width: 304px; }
}
@media (min-width: 768px) and (max-width: 1000px) {
  #ai-image-panel[data-panel-layout] { --workbench-left-width: 100px; --workbench-right-width: 280px; }
}
@media (max-width: 767px) {
  .app .panel-collapse-close { display:none; }
  .app[data-panel-layout] .canvas-bottom-bar { flex-wrap: wrap; gap: 6px; }
  .app[data-panel-layout] .image-workflow-hub { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .app[data-panel-layout] #tool-hint { flex: 1 1 100%; max-width: 100%; overflow: hidden; }
  .panel-collapse-close, #ai-image-panel .panel-collapse-close { display: flex; margin: 0 0 8px auto; }
  #ai-image-panel[data-panel-layout] .panel-collapse-close { display: none; }
  [data-panel-layout] [data-layout-panel] { transform: none; transition: none; }
  .panel-layout-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: rgb(0 0 0 / .45);
    z-index: 1100;
  }
  #ai-image-panel .panel-layout-backdrop:not([hidden]) { z-index: 8; }
  #ai-image-panel[data-panel-layout] .ai-head { grid-template-columns: minmax(0, 1fr) auto; }
  #ai-image-panel[data-panel-layout] .ai-head-status { flex-wrap: wrap; gap: 4px; padding-block: 4px; }
  #ai-image-panel[data-panel-layout] .ai-head-status > .ai-status { display: none; }
  #ai-image-panel[data-panel-layout] .ai-head { position: relative; z-index: 10; }
  #ai-image-panel[data-panel-layout][data-left-collapsed] .ai-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "results";
    overflow: hidden;
    position: relative;
  }
  #ai-image-panel[data-panel-layout][data-left-collapsed] .ai-results { height: auto; min-height: 0; }
  #ai-image-panel[data-panel-layout] [data-layout-panel]:not([hidden]) {
    display: flex;
    position: fixed;
    top: 60px;
    bottom: 6px;
    width: min(326px, 86vw);
    min-height: 0;
    overflow-y: auto;
    z-index: 9;
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    padding: 8px;
  }
  #ai-image-panel [data-layout-panel="left"] { left: 6px; }
  #ai-image-panel [data-layout-panel="right"] { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-visibility-toggle:active,
  .panel-collapse-close:active { transform: none; transition: none; }
}
@media (min-width: 768px) {
  .app {
    --panel-left-w: var(--shell-left-panel-size);
    --panel-right-w: var(--shell-right-panel-size);
  }
  .app-shell-header .canvas-toolbar {
    display: grid;
    grid-template-columns: var(--panel-left-w) minmax(0, 1fr) var(--panel-right-w);
    padding: 8px 0;
    gap: 0;
  }
  .toolbar-history { display:flex; gap:var(--shell-control-gap); padding-left:48px; }
  .toolbar-canvas { display:flex; flex-wrap:wrap; align-items:center; gap:var(--shell-control-gap); min-width:0; padding-right:12px; }
  .toolbar-document { display:flex; align-items:center; gap:var(--shell-control-gap); min-width:0; padding-left:20px; }
  .toolbar-inspector-controls {
    grid-column:3;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 48px 0 0;
  }
  .app-shell-header .canvas-global-controls {
    display:flex;
    width:100%;
    margin:0;
    padding:0;
    gap: var(--shell-control-gap);
    min-width: 0;
    justify-content: flex-end;
    border-left: 0;
  }
  .app-shell-header .canvas-global-controls > * { flex-shrink:0; }
  @container inspector-header (max-width: 170px) {
    .app-shell-header .web-account-status { min-width:max-content; max-width:none; padding-inline:6px; gap:5px; justify-content:center; }
    .app-shell-header .web-account-status [data-account-label] { font-size:0; flex:none; overflow:visible; }
    .web-account-status [data-account-label]::after { content:'GPT'; font-size:12px; }
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .app {
    --panel-left-w: var(--shell-left-panel-size);
    --panel-right-w: var(--shell-right-panel-size);
  }
  .toolbar-document { gap: 4px; padding-left: 10px; }
}
@media (max-width: 767px) {
  .toolbar-history, .toolbar-document { display: flex; align-items: center; gap: 4px; }
  .toolbar-document { flex-wrap: wrap; }
  .app-shell-header .canvas-toolbar { gap: 6px; }
}
@media (max-width: 767px) {
  .app[data-panel-layout] { grid-template-columns: minmax(0, 1fr); }
  .app[data-panel-layout] > .panel-center { grid-column: 1; }
  .app-shell-header { grid-column: 1; }
  .app-shell-header .canvas-toolbar { display: flex; width: 100%; padding: 8px 48px; flex-wrap: wrap; }
  .toolbar-history { flex: 0 0 auto; }
  .toolbar-canvas { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .toolbar-document { flex: 1 0 100%; flex-wrap: nowrap; gap: 4px; }
  .toolbar-inspector-controls { display:flex; flex:1 0 100%; container-type:normal; }
  .app-shell-header .toolbar-inspector-controls .canvas-global-controls { display:flex; justify-content:flex-end; width:100%; }
  .app-shell-header .web-account-status { min-width:0; max-width:none; padding-inline:6px; gap:5px; }
  .app-shell-header .web-account-status [data-account-label] { font-size:0; flex:none; overflow:visible; }
  .app-shell-header .web-account-status [data-account-label]::after { content:'GPT'; font-size:12px; }
  .app-shell-header .canvas-global-controls { margin-inline-start: 0; }
  .app-shell-header .panel-shell-toggles { align-items: start; padding-top: 8px; }
}
#ai-image-panel .ai-head { position: relative; }
#ai-image-panel[data-panel-layout] .ai-title-line { display: flex; padding-left: 34px; }
#ai-image-panel .ai-head > .panel-shell-toggles { display: grid; }
#ai-image-panel .ai-head [data-panel-toggle="right"] { margin-right: 50px; }
#ai-image-panel .ai-head-status .ai-close { margin-left: 42px; }
.panel-center { container-type: inline-size; }
@container (max-width: 650px) {
  .canvas-bottom-bar { flex-wrap: wrap; gap: 6px; }
  .image-workflow-hub { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  #tool-hint { flex: 1 1 100%; max-width: 100%; overflow: hidden; }
}