/* 修图工作台：上面一排工具，中间一张画布，下面一个输入栏。沿用全站 --vg-* 令牌（登录后是深绿体系）。
 * 注意：app-film.css / app-desk.css 对 dialog 内的 button/select/input 用 !important 固定了字号（16px）和透明边框，
 * label 与 textarea 固定为 18px，所以这里不再和它们较劲：按钮用底色区分状态，不靠描边；小字用 span/p/small，不用 label。 */
.iw{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--vg-bg);color:var(--vg-ink);font:400 16px/1.5 var(--vg-sans);overflow:hidden}
.iw[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.iw::backdrop,.iw-picker::backdrop{background:var(--vg-night);opacity:.85}
.iw *{box-sizing:border-box}
.iw [hidden]{display:none!important}
body.theme-c #image-workbench.iw{border-radius:0;box-shadow:none}
.iw :focus-visible,.iw-picker :focus-visible{outline:3px solid var(--vg-info);outline-offset:2px}

/* 按钮：底色表示状态（普通 / 按下 / 主操作）。 */
.iw-btn,.iw-chip,.iw-version,.iw-zoom-pill button{font:inherit;color:var(--vg-ink);background:var(--vg-soft);border:0;cursor:pointer}
.iw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 16px;white-space:nowrap}
.iw-btn i{font-size:20px;line-height:1}
.iw-btn:hover:not(:disabled),.iw-chip:hover:not(:disabled){background:color-mix(in srgb,var(--vg-ink) 14%,var(--vg-soft))}
.iw-btn[aria-pressed=true],.iw-chip[aria-pressed=true],.iw-btn.iw-primary{background:var(--vg-seal);color:var(--vg-on-seal)}
.iw-btn[aria-pressed=true]:hover:not(:disabled),.iw-chip[aria-pressed=true]:hover:not(:disabled),.iw-btn.iw-primary:hover:not(:disabled){background:var(--vg-seal-dk)}
.iw button:disabled,.iw-picker button:disabled{opacity:.45;cursor:default}
body.theme-c #image-workbench :is(.iw-btn,.iw-chip,.iw-zoom-pill button){border-radius:9999px}
body.theme-c #image-workbench .iw-version{border-radius:12px}

/* 顶栏 */
.iw-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 16px;border-bottom:1px solid var(--vg-line)}
.iw-heading{min-width:0}
.iw-title{font:500 20px/1.3 var(--vg-serif)}
.iw-sub{font-size:14px;line-height:1.4;color:var(--vg-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iw-header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* 画布区：工具行 → 选区/裁切的二级工具（用到才出现）→ 画布 */
.iw-body{display:flex;flex-direction:column;min-height:0;background:var(--vg-night)}
.iw-bar{padding-bottom:12px;background:var(--vg-bg);border-bottom:1px solid var(--vg-line)}
.iw-tools,.iw-subbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:12px 12px 0}
.iw-seg{display:inline-flex;gap:2px;padding:4px;background:var(--vg-soft);border-radius:9999px}
.iw-seg .iw-btn{min-height:40px;background:transparent}
.iw-seg .iw-btn:hover:not(:disabled){background:var(--vg-line)}
.iw-seg .iw-btn[aria-pressed=true]{background:var(--vg-seal)}
.iw-size{display:inline-flex;align-items:center;gap:8px}
.iw-cap{font-size:14px;color:var(--vg-ink2)}
.iw-size input[type=range],.iw-row input[type=range]{width:120px;accent-color:var(--vg-seal)}
.iw-sep{width:1px;height:24px;background:var(--vg-line-strong)}
.iw-stage{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate}
.iw-artboard{position:absolute;left:50%;top:50%;transform-origin:center;box-shadow:0 8px 40px #0009}
.iw-artboard canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.iw-overlay{touch-action:none}
.iw-zoom-pill{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:2px;padding:4px;background:color-mix(in srgb,var(--vg-night) 82%,transparent);border-radius:9999px;backdrop-filter:blur(8px)}
.iw-zoom-pill button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;background:transparent}
.iw-zoom-pill,.iw-zoom-pill button{color:var(--vg-on-night)}
.iw-zoom-pill button:hover{background:rgb(255 241 216 / 16%)}
.iw-zoom-pill i{font-size:18px}
.iw-zoom{min-width:64px!important;font-size:14px}

/* 生成中：画布上盖一层，预览不是最终结果 */
.iw-working{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;background:color-mix(in srgb,var(--vg-night) 78%,transparent);text-align:center}
.iw-preview{max-width:min(92%,720px);max-height:62%;object-fit:contain;border-radius:8px;opacity:.9}
.iw-working-text{margin:0;max-width:34em;color:var(--vg-on-night);font-size:16px}
.iw-working-text::before{content:"";display:inline-block;width:14px;height:14px;margin-right:12px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:iw-spin 1s linear infinite}
@keyframes iw-spin{to{transform:rotate(360deg)}}

/* 版本对比 */
.iw-compare{position:absolute;inset:0;z-index:5;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:12px 16px 16px;background:var(--vg-night)}
.iw-compare>.iw-btn,.iw-compare-pick{justify-self:center}
.iw-compare-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;color:var(--vg-on-night)}
.iw-compare-pick label{display:flex;align-items:center;gap:8px}
.iw-compare-pick select,.iw-row select{min-height:44px;padding:0 12px;color:var(--vg-ink);background:var(--vg-soft);border:1px solid var(--vg-line)}
.iw-compare-views{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:100%;min-height:0}
.iw-compare-views img{width:100%;height:100%;min-height:0;object-fit:contain}

/* 底部：版本 → 常用修改 → 输入栏 → 状态 */
.iw-dock{display:flex;flex-direction:column;gap:8px;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:var(--vg-bg);border-top:1px solid var(--vg-line)}
.iw-dock>*{width:100%;max-width:880px;margin-inline:auto}
.iw-versions{display:flex;gap:8px;overflow-x:auto;padding:2px 0}
.iw-version{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:4px;min-height:0;padding:4px;background:transparent}
.iw-version img{width:72px;height:48px;object-fit:cover;border-radius:8px;background:var(--vg-night)}
.iw-version[aria-pressed=true]{background:var(--vg-seal-soft);outline:2px solid var(--vg-seal)}
.iw-vname{font-size:12px;line-height:1.2;color:var(--vg-ink2)}
.iw-version[aria-pressed=true] .iw-vname{color:var(--vg-ink)}
.iw-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.iw-chips::-webkit-scrollbar{display:none}
.iw-chip{flex:0 0 auto;min-height:40px;padding:0 16px;white-space:nowrap}
.iw-note{margin-block:0;font-size:14px;color:var(--vg-wait,#e8c25a)}
.iw-recover{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;background:var(--vg-seal-soft);border:1px solid var(--vg-line);border-radius:16px}
.iw-composer{position:relative;padding:8px 8px 8px 16px;background:var(--vg-paper);border:1px solid var(--vg-line-strong);border-radius:24px}
.iw-composer:focus-within{border-color:var(--vg-seal)}
.iw-composer-row{display:flex;align-items:flex-end;gap:8px}
#image-workbench .iw-composer textarea{flex:1 1 auto;display:block;min-width:0;min-height:44px;max-height:160px;padding:8px 0;color:var(--vg-ink);background:transparent;border:0;outline:0;resize:none;line-height:1.6;overflow-y:auto}
#image-workbench .iw-composer textarea::placeholder{color:var(--vg-ink3)}
.iw-composer-row .iw-btn{flex:0 0 auto}
.iw-composer-row .iw-side{padding:0 16px 0 12px}
.iw-generate{padding:0 24px;font-weight:600}
.iw-refs{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px;padding:0;list-style:none}
.iw-refs li{display:flex;align-items:center;gap:8px;padding:4px;background:var(--vg-soft);border-radius:16px}
.iw-refs img{width:40px;height:40px;object-fit:cover;border-radius:12px}
.iw-refs input{width:150px;min-height:36px;padding:0 8px;color:var(--vg-ink);background:transparent;border:1px solid var(--vg-line)}
.iw-refs .iw-btn,.iw-refs button{min-width:36px;min-height:36px;padding:0;background:transparent}
.iw-status{margin-block:0;min-height:24px;font-size:14px;line-height:1.6;color:var(--vg-ink2);text-align:center}

/* 设置：藏在输入栏上方的浮层，平时不占地方 */
.iw-settings{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:6;display:flex;flex-direction:column;gap:2px;max-height:min(60dvh,440px);overflow:auto;padding:8px 16px;background:var(--vg-paper);border:1px solid var(--vg-line-strong);border-radius:24px;box-shadow:0 16px 48px #000a}
.iw-settings>*{flex-shrink:0}
.iw-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px}
.iw-row select{min-width:220px;max-width:62%}
.iw-check{display:flex;align-items:center;gap:12px;min-height:52px}
.iw-check input{flex:0 0 22px;width:22px;height:22px;accent-color:var(--vg-seal)}
.iw-link{align-self:flex-start;min-height:44px;padding:0 4px;background:transparent;color:var(--vg-ink2);text-decoration:underline;text-underline-offset:3px}
.iw-history{margin:4px 0}
.iw-history summary{display:flex;align-items:center;min-height:48px;color:var(--vg-ink);cursor:pointer}
.iw-turns{padding-bottom:8px}
.iw-turns article{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 0;border-top:1px solid var(--vg-line)}
.iw-turns small{font-size:12px;color:var(--vg-ink2)}
.iw-turns p{margin:4px 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}

/* 选参考图 */
.iw-picker{width:min(680px,calc(100vw - 24px));max-height:80dvh;padding:24px;color:var(--vg-ink);background:var(--vg-paper);border:1px solid var(--vg-line);font-family:var(--vg-sans)}
.iw-picker-title{font:500 20px/1.4 var(--vg-serif)}
.iw-picker p{margin:4px 0;color:var(--vg-ink2)}
.iw-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;max-height:50vh;margin:16px 0;overflow:auto}
.iw-picker-grid button{padding:0;overflow:hidden;color:var(--vg-ink);background:var(--vg-soft);cursor:pointer}
.iw-picker-grid img{display:block;width:100%;height:84px;object-fit:cover}
.iw-picker-done{min-height:48px;padding:0 24px;color:var(--vg-on-seal);background:var(--vg-seal);cursor:pointer}

/* 照片详情「修复」页里的入口 */
.iw-entry{width:100%;min-height:48px;margin-bottom:16px;color:var(--vg-seal);background:var(--vg-seal-soft);border:1px solid var(--vg-seal);border-radius:var(--vg-r-sm);font:500 16px var(--vg-sans);cursor:pointer}

@media(max-width:760px){
  .iw-header{min-height:56px;padding:8px 12px}
  .iw-title{font-size:18px}
  .iw-header-actions{gap:8px}
  .iw-header-actions [data-action=compare] .iw-lbl{display:none}
  .iw-header-actions [data-action=compare]{padding:0}
  .iw-desktop-only{display:none!important}
  .iw-bar{padding-bottom:8px}
  .iw-tools,.iw-subbar{gap:8px;padding:8px 8px 0}
  .iw-tools .iw-btn{padding:0 12px}
  .iw-seg .iw-lbl,.iw-subbar [data-action=toggleErase] .iw-lbl{display:none}
  .iw-subbar [data-action=toggleErase]{padding:0}
  .iw-size input[type=range]{width:88px}
  .iw-dock{gap:8px;padding-inline:12px}
  .iw-chips{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .iw-composer{padding:8px 8px 8px 16px;border-radius:24px}
  .iw-composer-row{flex-wrap:wrap}
  #image-workbench .iw-composer textarea{flex:1 1 100%}
  .iw-composer-row .iw-generate{margin-left:auto}
  .iw-row{flex-direction:column;align-items:stretch;gap:4px;padding:8px 0}
  .iw-row select{min-width:0;max-width:none;width:100%}
  .iw-refs input{width:120px}
  .iw-compare-views{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .iw-status{font-size:12px;line-height:1.5;min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .iw-settings{max-height:min(58dvh,420px)}
  .iw-zoom-pill{right:8px;bottom:8px;padding:2px}
  .iw-zoom-pill button{min-width:40px;min-height:40px}
  .iw-zoom{min-width:56px!important}
}
@media(max-height:560px){.iw-versions,.iw-note,.iw-history{display:none}}
@media(prefers-reduced-motion:reduce){.iw *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
