/* Video node · UI 2.3
   Universal four-state behavior: empty/idle, empty/selected, result/idle, result/selected. */

.node.node-video[data-content-state="empty"]{
  min-height:320px;
  border:1px solid #777;
  border-radius:10px;
  background:#262626;
  box-shadow:none;
  color:#f4f4f4;
}
.node.node-video[data-content-state="empty"]:hover{border-color:#8b8b8b}
.node.node-video[data-content-state="empty"].selected,
.node.node-video[data-content-state="empty"][data-interaction-state="selected"]{
  border-color:#929292;
  box-shadow:none;
}
.node.node-video[data-content-state="empty"]>.node-body{
  min-height:318px;
  padding:0;
  align-items:stretch;
  justify-content:stretch;
  overflow:hidden;
  border-radius:inherit;
  background:#262626;
}
.node.node-video .node-header{
  top:-25px;
  height:21px;
  padding:0;
  color:#6e6e6e;
}
.node.node-video .node-header-left{gap:4px}
.node.node-video .node-type-icon{width:13px;height:13px;color:#737373}
.node.node-video .node-title-stack b{color:#737373;font:500 12px/16px var(--ui-font-sans)}
.node.node-video .node-title-stack small{color:#737373;font:400 11px/16px var(--ui-font-sans)}
.node.node-video[data-content-state="empty"] .node-menu-btn{display:none}

.video-node-shell{
  position:relative;
  width:100%;
  min-height:318px;
  display:flex;
  flex-direction:column;
  background:#262626;
}
.video-node-shell.is-empty{padding:24px 22px 17px}
.video-node-placeholder.video-node-stage{
  min-height:188px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:#646464;
}
.video-node-placeholder .big-icon{
  width:52px;height:42px;
  display:grid;place-items:center;
  border:2px solid #616161;
  border-radius:8px;
  color:#666;
  font:500 22px/1 var(--ui-font-sans);
}
.video-node-try{
  display:flex;
  flex-direction:column;
  gap:1px;
  margin-top:auto;
}
.video-node-try-label{
  margin:0 0 5px;
  color:#858585;
  font:400 12px/18px var(--ui-font-sans);
}
.node.node-video [data-video-quick]{
  min-height:32px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 7px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#f3f3f3;
  text-align:left;
  font:500 12px/18px var(--ui-font-sans);
  box-shadow:none;
}
.node.node-video [data-video-quick]:hover,
.node.node-video [data-video-quick]:focus-visible{background:#303030;outline:none;color:#fff}
.node.node-video [data-video-quick] .video-quick-icon{
  width:15px;height:15px;
  display:grid;place-items:center;
  color:#d5d5d5;
  font:500 10px/1 var(--ui-font-sans);
}
.video-node-upload{
  position:absolute;
  left:50%;top:-62px;
  transform:translateX(-50%);
  height:30px;
  padding:0 12px;
  display:flex;align-items:center;gap:6px;
  border:1px solid #303030;
  border-radius:7px;
  background:#181818;
  color:#aaa;
  font:500 11px/1 var(--ui-font-sans);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.video-node-upload:hover{background:#222;color:#ddd;border-color:#3b3b3b}
.node.node-video.video-file-drop-target{border-color:#aaa!important;box-shadow:0 0 0 2px rgba(255,255,255,.06)!important}

.node.node-video .node-port{
  width:17px;height:17px;
  border:1px solid #6f6f6f;
  border-radius:50%;
  background:#232323;
  box-shadow:none;
}
.node.node-video .node-port.in{left:-10px}
.node.node-video .node-port.out{right:-10px}
.node.node-video:hover .node-port,
.node.node-video.selected .node-port,
.node.node-video[data-interaction-state="selected"] .node-port{
  width:19px;height:19px;border-color:#858585;background:#232323;
}
.node.node-video:hover .node-port::before,
.node.node-video.selected .node-port::before,
.node.node-video[data-interaction-state="selected"] .node-port::before{
  content:'+';color:#c6c6c6;font:400 15px/1 var(--ui-font-sans);
}

/* Result-first: the video itself becomes the node. */
.node.node-video[data-content-state="result"]{
  min-height:0;
  border:0;
  border-radius:8px;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.node.node-video[data-content-state="result"]>.node-body{
  min-height:0;
  padding:0;
  overflow:visible;
  border-radius:8px;
  background:transparent;
}
.node.node-video[data-content-state="result"] .video-node-shell{
  min-height:0;
  padding:0;
  background:transparent;
}
.node.node-video[data-content-state="result"] .media-clip.video-node-stage,
.node.node-video[data-content-state="result"] .node-content-video.video-node-stage{
  width:100%;
  min-height:0;
  overflow:hidden;
  border:1px solid #626262;
  border-radius:8px;
  background:#1c1c1c;
}
.node.node-video[data-content-state="result"] .node-media-video{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  object-fit:cover;
  border-radius:7px;
  background:#111;
}
.node.node-video[data-content-state="result"] .media-clip.video-node-stage{position:relative;line-height:0}
.node.node-video[data-content-state="result"] .node-media-video::-webkit-media-controls,
.node.node-video[data-content-state="result"] .node-media-video::-webkit-media-controls-enclosure{display:none!important}
.video-hover-controls{
  position:absolute;
  left:0;right:0;bottom:0;
  min-height:43px;
  display:flex;align-items:center;gap:8px;
  padding:15px 11px 8px;
  border-radius:0 0 7px 7px;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.72));
  opacity:0;pointer-events:none;
  transition:opacity .14s ease;
  z-index:6;
  line-height:1;
}
.media-clip.video-node-stage:hover .video-hover-controls,
.media-clip.video-node-stage:focus-within .video-hover-controls{opacity:1;pointer-events:auto}
.video-hover-controls button{
  width:27px;height:27px;min-width:27px;
  display:grid;place-items:center;
  padding:0;border:0;border-radius:5px;
  background:transparent;color:#f4f4f4;
}
.video-hover-controls button:hover,.video-hover-controls button:focus-visible{background:rgba(255,255,255,.12);outline:none}
.video-hover-controls button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.video-hover-play svg path:first-child{fill:currentColor;stroke:none}
.video-hover-time{color:#f0f0f0;font:500 10px/1 var(--ui-font-sans);white-space:nowrap;line-height:27px}
.video-hover-seek{
  flex:1 1 auto;min-width:50px;height:18px;margin:0;
  accent-color:#e8e8e8;cursor:pointer;
}
.video-hover-volume{margin-left:1px}
@media (hover:none),(pointer:coarse){
  .video-hover-controls{opacity:1;pointer-events:auto}
}
.node.node-video[data-content-state="result"].selected .media-clip.video-node-stage,
.node.node-video[data-content-state="result"][data-interaction-state="selected"] .media-clip.video-node-stage{
  border-color:#969696;
  box-shadow:0 0 0 1px rgba(255,255,255,.035);
}
.node.node-video[data-content-state="result"] .ui-v23-result-meta{
  color:#777;
  font:400 11px/16px var(--ui-font-sans);
}
.node.node-video[data-content-state="result"] .ui-v23-resize-handle{opacity:0}
.node.node-video[data-content-state="result"]:hover .ui-v23-resize-handle,
.node.node-video[data-content-state="result"].selected .ui-v23-resize-handle{opacity:.7}

/* Progress stays on/in the node. */
.node.node-video .ui-v23-result-progress{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:156px;
  padding:6px 9px;
  border:1px solid #363636;
  border-radius:8px;
  background:rgba(23,23,23,.94);
  box-shadow:0 8px 24px rgba(0,0,0,.26);
  z-index:8;
}

/* Fixed screen-space video composer. */
.generator-panel.video-generator{
  width:820px!important;
  min-width:820px!important;
  max-width:820px!important;
  height:258px!important;
  min-height:258px!important;
  max-height:258px!important;
  overflow:visible!important;
}
.generator-panel.video-generator>.video-generator-main,
.generator-panel.video-generator .video-generator-main{
  width:820px;
  height:258px;
  display:flex;
  flex-direction:column;
  padding:12px;
  border:1px solid #313131;
  border-radius:11px;
  background:#262626;
  box-shadow:0 14px 34px rgba(0,0,0,.32);
  overflow:hidden;
}
.video-gen-top{
  height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 48px;
}
.video-ref-slot,
.video-gen-action{
  height:32px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 9px;
  border:1px solid #3a3a3a;
  border-radius:7px;
  background:#242424;
  color:#b6b6b6;
  font:500 10px/1 var(--ui-font-sans);
}
.video-ref-slot:hover,
.video-gen-action:hover{background:#2d2d2d;color:#ddd;border-color:#4a4a4a}
.video-ref-slot .slot-icon{font-size:13px;line-height:1}
.video-gen-spacer{flex:1 1 auto}
.video-mode-label{color:#777;font:500 10px/1 var(--ui-font-sans)}
.video-generator-main .prompt-box.video-prompt-box{
  flex:1 1 auto;
  min-height:116px;
  padding:10px 4px 4px;
  border:0;
  background:#262626;
}
.video-generator-main .prompt-box.video-prompt-box textarea{
  width:100%;
  height:100%;
  min-height:96px;
  resize:none;
  overflow:auto;
  padding:0 4px;
  border:0;
  outline:0;
  background:transparent;
  color:#dedede;
  font:400 13px/20px var(--ui-font-sans);
}
.video-generator-main .prompt-box.video-prompt-box textarea::placeholder{color:#878787}
.video-gen-controls{
  height:50px;
  flex:0 0 50px;
  display:flex;
  align-items:center;
  gap:7px;
  padding-top:8px;
  border-top:1px solid #303030;
}
.video-gen-controls .model-pill{
  max-width:180px;
  height:32px;
  border:0;
  background:transparent;
  padding:0 7px;
  color:#e2e2e2;
}
.video-gen-controls .model-pill:hover{background:#303030}
.video-gen-select{
  height:32px;
  max-width:116px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#d1d1d1;
  padding:0 7px;
  font:500 11px/1 var(--ui-font-sans);
}
.video-gen-select:hover{background:#303030}
.video-generate-btn{
  width:34px;height:34px;min-width:34px;
  display:grid;place-items:center;
  border:0;
  border-radius:8px;
  background:#aaa;
  color:#242424;
  box-shadow:none;
}
.video-generate-btn:disabled{opacity:.35}
.video-generate-btn .ui-icon{width:16px;height:16px}

/* Compact contextual toolbar for selected video results. */
.node-toolbar.node-toolbar-video{
  min-height:48px;
  max-width:calc(100vw - 32px);
  display:flex;
  align-items:center;
  gap:2px;
  padding:6px 8px;
  border:1px solid #323232;
  border-radius:10px;
  background:#262626;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  overflow:visible;
  white-space:nowrap;
}
.node-toolbar.node-toolbar-video .selection-toolbar-label{display:none}
.node-toolbar.node-toolbar-video .tool-btn{
  min-width:0;
  height:34px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 9px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#e5e5e5;
  font:500 11px/1 var(--ui-font-sans);
}
.node-toolbar.node-toolbar-video .tool-btn:hover{background:#343434;color:#fff}
.node-toolbar.node-toolbar-video .tool-btn.primary{background:#343434;color:#fff}
.node-toolbar.node-toolbar-video .tool-btn.icon-only{width:32px;padding:0;justify-content:center}
.node-toolbar.node-toolbar-video .tool-glyph{color:#cfcfcf;font-size:12px;line-height:1}


/* Live upstream diagnostics for async video tasks. */
.video-task-diagnostics-slot:empty{display:none}
.video-task-diagnostics-slot{margin:8px 0 10px}
.video-task-diagnostics{
  padding:8px 9px;
  border:1px solid #383838;
  border-radius:7px;
  background:#1f1f1f;
  color:#aaa;
  font:400 10px/14px var(--ui-font-sans);
}
.video-task-diagnostics-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.video-task-diagnostics-head span{color:#8c8c8c}
.video-task-diagnostics-head b{color:#e0b35b;font-weight:600;text-align:right}
.video-task-diagnostics-meta{display:grid;gap:3px}
.video-task-diagnostics-meta span{min-width:0;display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px}
.video-task-diagnostics-meta i{color:#747474;font-style:normal}
.video-task-diagnostics-meta code{color:#bdbdbd;font:500 9px/13px var(--ui-font-mono,monospace);overflow-wrap:anywhere;user-select:text}
.video-task-diagnostics-error{margin-top:6px;padding-top:6px;border-top:1px solid #323232;color:#d68b8b;overflow-wrap:anywhere;user-select:text}

/* Video results are media-only: no expand/lightbox trigger and no resize corner. */
.node.node-video[data-content-state="result"] .ui-media-preview-trigger,
.node.node-video.ui-v23-media-result[data-content-state="result"] .ui-media-preview-trigger,
.node.node-video[data-content-state="result"] .node-resize-handle,
.node.node-video[data-content-state="result"] .ui-v23-resize-handle{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
}