/* Workflow Video Studio inspector / FFmpeg effects library */
.workflow-inspector:has(.vwi){min-width:320px;width:352px;max-width:40vw;overflow-y:auto;scrollbar-color:#dce0e5 transparent}
.workflow-inspector:has(.vwi) .inspector-body{padding:15px 13px 25px;overflow:visible}
.vwi{display:grid;gap:13px;color:#29323a;font-size:12px}
.vwi-header{display:flex;flex-direction:column;gap:3px}
.vwi-header strong{font-size:16px;letter-spacing:-.035em}
.vwi-header span{font-size:11px;color:#9299a3}
.vwi-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:1px solid #e5e7e9;background:#f6f7f9;border-radius:12px;padding:4px}
.vwi-switch button{border:0;border-radius:9px;background:transparent;padding:10px 4px;color:#6f7a85;font-size:11px;font-weight:750;cursor:pointer}
.vwi-switch button.active{background:#fff;color:#d9544f;box-shadow:0 3px 10px rgba(33,39,48,.07)}
.vwi-drop{display:grid;justify-items:center;text-align:center;gap:8px;min-height:158px;border:1.5px dashed #d9dce1;background:#fafafb;border-radius:14px;padding:17px 10px;cursor:pointer;transition:.2s}
.vwi-drop:hover,.vwi-drop.drag{background:#fff7f4;border-color:#edaaa3}
.vwi-upload-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#fff0ed;color:#dd5d53;font-size:23px;font-weight:750}
.vwi-drop strong{font-size:12px}.vwi-drop small{font-size:10px;color:#8b96a3;line-height:1.5;max-width:200px}
.vwi-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.vwi-field>span{font-size:10px;font-weight:800;color:#535e6c}
.vwi-field input,.vwi-field select,.vwi-field textarea{width:100%;min-width:0;max-width:100%;border:1px solid #e0e4e8;background:#fff;border-radius:10px;padding:10px 11px;font-family:inherit;font-size:12px;color:#343b44;line-height:1.5}
.vwi-field input:focus,.vwi-field select:focus,.vwi-field textarea:focus{outline:none;border-color:#eaa7a1;box-shadow:0 0 0 3px #fff1ef}
.vwi-field textarea{resize:vertical}
.vwi-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.vwi-divider{height:1px;background:#ecedf1;margin:5px 0}
.vwi-help{padding:10px;background:#f8f9fa;border-radius:10px;color:#88929d;font-size:10px;line-height:1.55}
.vwi-mini-actions{display:flex;align-items:center;gap:8px}
.vwi-mini-actions button{flex:1;background:#fff;border:1px solid #e3e5e9;padding:9px 5px;border-radius:9px;color:#68727e;font-size:10px;font-weight:750;cursor:pointer}
.vwi-mini-actions button:hover{border-color:#edc6bf;color:#d35951}
.vwi-main-btn{width:100%;display:inline-flex;justify-content:center;align-items:center;min-height:41px;background:linear-gradient(135deg,#f57866,#e75550);border:0;border-radius:10px;color:#fff;font-size:12px;font-weight:850;cursor:pointer;box-shadow:0 6px 17px rgba(218,82,76,.16)}
.vwi-main-btn:hover{filter:brightness(1.035)}.vwi-main-btn:disabled{opacity:.55;cursor:wait}
.vwi-selected{font-size:10px;color:#68737e;overflow-wrap:anywhere;line-height:1.45}
.vwi-selected:empty{display:none}
.vwi-note{padding:10px 11px;color:#72808e;background:#f7f8f9;border:1px solid #eceef1;border-radius:10px;font-size:10px;line-height:1.55;overflow-wrap:anywhere}
.vwi-note.error{color:#aa514e;background:#fff3f0;border-color:#f4d6cf}
.vwi-effects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:275px;overflow-y:auto;padding:1px}
.vwi-effect{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px;min-width:0;min-height:83px;background:#fff;border:1px solid #e7e9ed;border-radius:12px;padding:10px 6px;color:#5a6470;cursor:pointer;transition:background .15s,border .15s,transform .2s}
.vwi-effect:hover{border-color:#eab3a9;background:#fffcfb;transform:translateY(-1px)}
.vwi-effect.on{border-color:#e87c6d;background:#fff4f0;box-shadow:inset 0 0 0 1px #f5c6be}
.vwi-effect b{font-size:10px;color:#485360;font-weight:800;overflow-wrap:anywhere}
.vwi-effect small{font-size:9px;color:#9299a3;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.vwi-effect-preview{position:relative;display:flex;width:65px;height:30px;border-radius:7px;overflow:hidden;background:#f0f2f5;isolation:isolate}
.vwi-effect-preview i{display:block;width:50%;height:100%;background:linear-gradient(145deg,#f1a99a,#e46564)}
.vwi-effect-preview i+ i{background:linear-gradient(145deg,#95bcd4,#5479a8)}
.vwi-trans-fade .vwi-effect-preview i+ i,.vwi-trans-dissolve .vwi-effect-preview i+ i{animation:vwiFades 2s ease-in-out infinite alternate}
.vwi-trans-wipeleft .vwi-effect-preview i+ i,.vwi-trans-slideleft .vwi-effect-preview i+ i{animation:vwiSlides 2s ease-in-out infinite alternate}
.vwi-trans-wiperight .vwi-effect-preview i{animation:vwiSlides 2s ease-in-out infinite alternate-reverse}
.vwi-trans-circleopen .vwi-effect-preview i+ i{clip-path:circle(42% at 50% 50%);width:100%;margin-left:-50%;animation:vwiCircle 2s ease-in-out infinite alternate}
.vwi-trans-pixelize .vwi-effect-preview i{image-rendering:pixelated;filter:contrast(1.4)}
.vwi-animation-list .vwi-effect{min-height:71px}
.vwi-text-preview{font-size:18px;letter-spacing:-.03em;font-weight:900;color:#e76e62;line-height:26px}
.vwi-text-fade .vwi-text-preview{animation:vwiFades 1.8s ease-in-out infinite alternate}
.vwi-text-slideup .vwi-text-preview{animation:vwiUp 1.8s ease-in-out infinite}
.vwi-text-slideleft .vwi-text-preview{animation:vwiLeft 1.8s ease-in-out infinite}
.vwi-text-pop .vwi-text-preview{animation:vwiPop 1.4s ease-in-out infinite}
.vwi-live-preview{background:linear-gradient(140deg,#161b25,#2f3440);color:white;min-height:115px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:15px;text-align:center;overflow-wrap:anywhere}
.vwi-live-preview>span{font-weight:850;font-size:18px;letter-spacing:-.04em}
.vwi-live-preview small{font-size:9px;color:#afb6c2;line-height:1.35}
@keyframes vwiFades{from{opacity:.25}to{opacity:1}}
@keyframes vwiSlides{from{transform:translateX(-14px)}to{transform:translateX(0)}}
@keyframes vwiCircle{from{clip-path:circle(5%)}to{clip-path:circle(70%)}}
@keyframes vwiUp{0%{opacity:0;transform:translateY(11px)}40%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes vwiLeft{0%{opacity:0;transform:translateX(15px)}40%,90%{opacity:1;transform:translateX(0)}100%{opacity:0}}
@keyframes vwiPop{0%{opacity:0;transform:scale(.6)}30%,80%{opacity:1;transform:scale(1)}100%{opacity:0}}
@media(max-width:1200px){.workflow-inspector:has(.vwi){width:318px;min-width:295px;max-width:45vw}}
@media(max-width:820px){.workflow-inspector:has(.vwi){max-width:none;width:100%;min-width:0}.vwi-effects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.vwi-effect-preview i,.vwi-text-preview{animation:none!important}}

/* Keep the workflow inspector visible and usable on laptop, tablet and mobile. */
.workflow-editor.template-editor:has(.vwi){grid-template-columns:210px minmax(420px,1fr) 352px}
.workflow-editor.template-editor:has(.vwi)>.workflow-inspector{min-width:0;width:auto;max-width:none;overflow:hidden}
.workflow-editor.template-editor:has(.vwi)>.workflow-inspector>.inspector-body{overflow-y:auto;overflow-x:hidden;min-height:0;flex:1}
@media(max-width:1180px) and (min-width:821px){
 .workflow-editor.template-editor:has(.vwi){grid-template-columns:minmax(0,1fr) 345px}
 .workflow-editor.template-editor:has(.vwi)>.workflow-palette{display:none}
 .workflow-editor.template-editor:has(.vwi)>.workflow-inspector{display:flex!important;grid-column:2;grid-row:1}
 .workflow-editor.template-editor:has(.vwi)>.workflow-canvas-wrap{grid-column:1;grid-row:1;min-width:0}
}
@media(max-width:820px){
 .workflow-editor.template-editor:has(.vwi){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(320px,45vh) auto;height:auto;min-height:0;overflow:visible}
 .workflow-editor.template-editor:has(.vwi)>.workflow-palette{display:none}
 .workflow-editor.template-editor:has(.vwi)>.workflow-canvas-wrap{grid-column:1;grid-row:1;min-height:320px}
 .workflow-editor.template-editor:has(.vwi)>.workflow-inspector{display:flex!important;grid-column:1;grid-row:2;width:100%;max-width:none;max-height:none;overflow:visible;border-left:0;border-top:1px solid #e5e8ec}
 .workflow-editor.template-editor:has(.vwi)>.workflow-inspector>.inspector-body{overflow:visible}
 .workflow-editor.template-editor:has(.vwi) .vwi-effects{max-height:none}
}
.vwi-secondary-btn{width:100%;border:1px solid #dfe4e9;border-radius:10px;background:#fff;padding:10px;color:#606c79;font-size:11px;font-weight:800;cursor:pointer}.vwi-secondary-btn:hover{border-color:#e9aaa1;color:#cd554e}

/* Media manager for workflow source nodes */
.vwm{gap:10px}
.vwm .vwm-pick{width:100%;border-style:dashed;cursor:pointer;font:inherit}
.vwm .vwm-pick:hover{border-color:#edaca2;background:#fff9f6}
.vwm-file{display:grid;grid-template-columns:30px minmax(0,1fr) 28px;gap:8px;align-items:center;padding:8px 9px;border:1px solid #eaecf0;border-radius:10px;background:#fff;margin-bottom:6px;min-width:0}
.vwm-file-icon{width:30px;height:30px;border-radius:9px;background:#fff0ed;color:#da6558;display:grid;place-items:center;font-size:10px}
.vwm-file-name{display:grid;gap:3px;min-width:0}
.vwm-file-name b{font-size:11px;font-weight:750;color:#39424c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vwm-file-name small{font-size:9px;color:#969faa}
.vwm-remove{border:1px solid #f0dbd8;background:#fff5f4;color:#c7534e;width:27px;height:27px;display:grid;place-items:center;border-radius:8px;font-size:17px;line-height:1;cursor:pointer}
.vwm-remove:hover{background:#ffe5e0}
.vwm-section-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:850;color:#3b454f;letter-spacing:-.01em;margin:5px 0}
.vwm-section-title b{color:#cf5e52;background:#fff0ec;border-radius:9px;padding:3px 7px;font-size:10px}
.vwm-empty{font-size:10px;line-height:1.6;color:#959fab;margin:6px 1px 10px}
.vwm-new-folder{display:grid;grid-template-columns:minmax(0,1fr) 95px;gap:6px}
.vwm-new-folder input,.vwm-folder-actions input{border:1px solid #e0e4ea;border-radius:9px;background:#fff;padding:9px 10px;min-width:0;color:#37404c;font-family:inherit;font-size:11px}
.vwm-new-folder .vwi-secondary-btn,.vwm-folder-actions .vwi-secondary-btn{padding:8px 5px;font-size:10px}
.vwm-folder-actions{display:grid;grid-template-columns:minmax(0,1fr) 98px 52px;gap:5px;align-items:center}
.vwm-folder-actions[hidden]{display:none}
.vwm-delete-folder{border:1px solid #f3dad6;background:#fff6f4;color:#c85b52;border-radius:9px;font-size:10px;font-weight:750;padding:8px 5px;cursor:pointer}
.vwm-delete-folder:hover{background:#ffece8}
.vwm .vwi-drop strong{font-size:12px}
.vwm .vwi-drop small{font-size:10px}
.vwm :is(input,button,select):focus-visible{outline:2px solid #eb9a8e;outline-offset:2px}
@media(max-width:420px){.vwm-folder-actions{grid-template-columns:1fr 85px 50px}}