/* Director Tools page (nai-director-tools.js), laid out like the official page: input images on the
 * left, the selected input and the output side by side, the tool bar with Transform at the bottom. */
#view-nai-image .nai-director:not(.hidden){display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0;padding:0 30px 20px;background:rgb(19,21,44);color:#fff;font-family:"Source Sans Pro",-apple-system,"system-ui","Segoe UI",Roboto,"Helvetica Neue",sans-serif}
#view-nai-image .nai-dt-icon{width:16px;height:16px;flex:0 0 auto;background-color:currentColor;mask-repeat:no-repeat;mask-size:contain;mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center}
#view-nai-image .nai-dt-icon-back{mask-image:url("../assets/nai-official/media/small_chevron_left.svg");-webkit-mask-image:url("../assets/nai-official/media/small_chevron_left.svg");width:12px;height:12px}
#view-nai-image .nai-dt-icon-anlas{mask-image:url("../assets/nai-official/media/anla.svg");-webkit-mask-image:url("../assets/nai-official/media/anla.svg");width:12px;height:12px;color:#F5F3C2}
#view-nai-image .nai-dt-icon-upload{mask-image:url("../assets/nai-official/media/upload.svg");-webkit-mask-image:url("../assets/nai-official/media/upload.svg")}
#view-nai-image .nai-dt-icon-copy{mask-image:url("../assets/nai-official/media/clipboard.svg");-webkit-mask-image:url("../assets/nai-official/media/clipboard.svg")}
#view-nai-image .nai-dt-icon-upscale{mask-image:url("../assets/nai-official/media/upscale.svg");-webkit-mask-image:url("../assets/nai-official/media/upscale.svg")}
#view-nai-image .nai-dt-icon-save{mask-image:url("../assets/nai-official/media/save.svg");-webkit-mask-image:url("../assets/nai-official/media/save.svg")}
#view-nai-image .nai-dt-icon-use{mask-image:url("../assets/nai-official/media/small_arrow.svg");-webkit-mask-image:url("../assets/nai-official/media/small_arrow.svg");transform:rotate(90deg);width:14px;height:14px}
#view-nai-image .nai-dt-icon-cross{mask-image:url("../assets/nai-official/media/thin_cross.svg");-webkit-mask-image:url("../assets/nai-official/media/thin_cross.svg");width:12px;height:12px}
#view-nai-image .nai-dt-icon-close{mask-image:url("../assets/nai-official/media/small_cross.svg");-webkit-mask-image:url("../assets/nai-official/media/small_cross.svg");width:10px;height:10px}
#view-nai-image .nai-dt-icon-tool-remove-bg{mask-image:url("../assets/nai-official/media/image_tool_remove_bg.svg");-webkit-mask-image:url("../assets/nai-official/media/image_tool_remove_bg.svg")}
#view-nai-image .nai-dt-icon-tool-line-art{mask-image:url("../assets/nai-official/media/image_tool_line_art.svg");-webkit-mask-image:url("../assets/nai-official/media/image_tool_line_art.svg")}
#view-nai-image .nai-dt-icon-tool-sketch{mask-image:url("../assets/nai-official/media/image_tool_sketch.svg");-webkit-mask-image:url("../assets/nai-official/media/image_tool_sketch.svg")}
#view-nai-image .nai-dt-icon-tool-colorize{mask-image:url("../assets/nai-official/media/image_tool_colorize.svg");-webkit-mask-image:url("../assets/nai-official/media/image_tool_colorize.svg")}
#view-nai-image .nai-dt-icon-tool-emotion{mask-image:url("../assets/nai-official/media/image_tool_emotion.svg");-webkit-mask-image:url("../assets/nai-official/media/image_tool_emotion.svg")}
#view-nai-image .nai-dt-icon-tool-declutter{mask-image:url("../assets/nai-official/media/image_tool_declutter.svg");-webkit-mask-image:url("../assets/nai-official/media/image_tool_declutter.svg")}
#view-nai-image .nai-dt-icon-tool-pixel-snap{mask-image:url("../assets/nai-official/media/image_tool_pixel_snap.svg");-webkit-mask-image:url("../assets/nai-official/media/image_tool_pixel_snap.svg")}

/* top bar */
#view-nai-image .nai-dt-top{flex:0 0 auto;height:66px;display:flex;align-items:center;justify-content:center;gap:16px}
#view-nai-image .nai-dt-back{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgb(34,37,63);border-radius:3px;color:#fff}
#view-nai-image .nai-dt-title{font-family:Eczar,serif;font-size:1.25rem;font-weight:600;color:#F5F3C2}
#view-nai-image .nai-dt-anlas{display:flex;align-items:center;gap:6px;padding:0 14px;height:40px;background:rgb(34,37,63);border-radius:3px;font-weight:600}
#view-nai-image .nai-dt-anlas b{color:#F5F3C2}

/* inputs and panels */
#view-nai-image .nai-dt-main{flex:1 1 0;display:flex;gap:20px;min-height:0}
#view-nai-image .nai-dt-inputs{flex:0 0 140px;display:flex;flex-direction:column;gap:10px;min-height:0}
#view-nai-image .nai-dt-upload{flex:0 0 auto;height:52px;display:flex;align-items:center;justify-content:center;background:rgb(34,37,63);border-radius:3px;color:#fff}
#view-nai-image .nai-dt-input-list{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}
#view-nai-image .nai-dt-input{position:relative}
#view-nai-image .nai-dt-thumb{display:block;width:100%;padding:0;border:2px solid transparent;border-radius:3px;background:rgb(14,15,33);overflow:hidden}
#view-nai-image .nai-dt-thumb.is-selected{border-color:#F5F3C2}
#view-nai-image .nai-dt-thumb img{display:block;width:100%;height:auto;max-height:200px;object-fit:contain}
#view-nai-image .nai-dt-input .nai-dt-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;display:none;align-items:center;justify-content:center;border-radius:3px;background:rgba(19,21,44,.85);color:#fff}
#view-nai-image .nai-dt-input:hover .nai-dt-remove,#view-nai-image .nai-dt-input .nai-dt-remove:focus-visible{display:flex}
#view-nai-image .nai-dt-panels{flex:1 1 0;display:flex;gap:28px;min-width:0;min-height:0}
#view-nai-image .nai-dt-panel{flex:1 1 0;position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:28px 28px 90px;background:rgb(14,15,33);border:1px solid rgb(34,37,63)}
#view-nai-image .nai-dt-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:0}
#view-nai-image .nai-dt-image img{max-width:100%;max-height:100%;object-fit:contain;display:block}
#view-nai-image .nai-dt-left,#view-nai-image .nai-dt-right{position:absolute;bottom:14px;display:flex;align-items:center;gap:10px}
#view-nai-image .nai-dt-left{left:14px}
#view-nai-image .nai-dt-right{right:14px}
#view-nai-image .nai-dt-icon-button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:3px;background:transparent;color:#fff}
#view-nai-image .nai-dt-icon-button:hover{background:rgb(34,37,63)}
#view-nai-image .nai-dt-size{display:flex;align-items:center;gap:10px;height:60px;padding:0 20px;background:rgb(34,37,63);border-radius:3px;font-size:14px}
#view-nai-image .nai-dt-variants{position:absolute;top:14px;left:14px;display:flex;gap:6px}
#view-nai-image .nai-dt-variant{padding:6px 12px;border-radius:3px;background:rgb(34,37,63);color:rgba(255,255,255,.7);font-weight:600;font-size:.875rem}
#view-nai-image .nai-dt-variant.is-on{color:#F5F3C2;box-shadow:inset 0 0 0 1px #F5F3C2}
#view-nai-image .nai-dt-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:rgba(255,255,255,.7);max-width:320px}
#view-nai-image .nai-dt-empty-title{font-family:Eczar,serif;font-size:1.5rem;font-weight:600;color:#F5F3C2}
#view-nai-image .nai-dt-empty-hint{font-size:.875rem;opacity:.7}
#view-nai-image .nai-dt-busy{display:flex;gap:8px}
#view-nai-image .nai-dt-busy i{width:10px;height:10px;border-radius:50%;background:#F5F3C2;animation:nai-dt-pulse 1s ease-in-out infinite}
#view-nai-image .nai-dt-busy i:nth-child(2){animation-delay:.15s}
#view-nai-image .nai-dt-busy i:nth-child(3){animation-delay:.3s}
@keyframes nai-dt-pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* tool bar and options */
#view-nai-image .nai-dt-bottom{flex:0 0 auto;margin-top:20px;margin-left:160px}
#view-nai-image .nai-dt-bar{display:flex;align-items:center;gap:10px;padding:4px;background:rgb(14,15,33);border:1px solid rgb(34,37,63)}
#view-nai-image .nai-dt-tools{flex:1 1 0;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
#view-nai-image .nai-dt-tool{flex:0 0 auto;height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:3px;background:transparent;color:rgba(255,255,255,.65);font-weight:600;font-size:1.0625rem;white-space:nowrap}
#view-nai-image .nai-dt-tool:hover{color:#fff}
#view-nai-image .nai-dt-tool.is-on{color:#F5F3C2;background:rgb(34,37,63)}
#view-nai-image .nai-dt-tool .nai-dt-icon{width:14px;height:14px}
#view-nai-image .nai-dt-transform-holder{flex:0 0 auto;width:192px}
#view-nai-image .nai-dt-transform{width:100%;word-break:keep-all}
#view-nai-image .nai-dt-transform[disabled]{opacity:.5;cursor:default}
#view-nai-image .nai-dt-transform.is-busy{opacity:.6}
#view-nai-image .nai-dt-options:not(.hidden){display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 20px;margin-bottom:10px;padding:12px 16px;background:rgb(14,15,33);border:1px solid rgb(34,37,63)}
#view-nai-image .nai-dt-options .nai-tool-field{min-width:160px}
#view-nai-image .nai-dt-options .nai-tool-prompt{width:320px}
#view-nai-image .nai-dt-colors{width:80px;height:34px;padding:0 8px;border:1px solid rgb(34,37,63);border-radius:3px;background:rgb(19,21,44);color:#fff;font:inherit}
#view-nai-image .nai-dt-output-hint{color:rgba(255,255,255,.45);font-size:.875rem;text-align:center;padding:0 20px}
#view-nai-image .nai-dt-image img.is-pixel{width:100%;height:100%;image-rendering:pixelated}