
#dock:has(.video-controls-row){container-type:inline-size;}
#dock:has(.video-controls-row) #prompt-box{flex:1 1 90px;min-height:40px;}
#dock:has(.video-controls-row) .nodeflow-dock{flex:none;gap:8px;margin-top:12px;padding:10px 0 0;font-size:11px;}
#dock:has(.video-controls-row) .nodeflow-dock button{font-size:11px;}
#dock #param-row:has(.video-controls-row){display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0;padding:0;overflow:visible;}
#dock .video-controls-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(170px,1.35fr) minmax(190px,1.72fr) 44px max-content 76px;gap:7px;align-items:end;}
#dock .video-controls-row .param{min-width:0;max-width:100%;margin:0;padding:0;background:transparent;border:0;}
#dock .video-controls-row .model-param,#dock .video-controls-row .video-channel-field,#dock .video-controls-row .count-param{display:flex;flex-direction:column;align-items:stretch;gap:7px;}
#dock .video-controls-row .model-param:before{content:none;}
#dock .video-controls-row .param label,#dock .video-field-label{display:block;color:var(--dim);font-size:11px;font-weight:400;line-height:17px;white-space:nowrap;}
#dock .video-controls-row select,#dock .video-controls-row .model-param .ym-model-picker,#dock .video-controls-row #video-pack,#dock .video-channel-control{
  box-sizing:border-box;width:100%;max-width:100%;min-width:0;height:44px;min-height:44px;padding:0 9px;border:1px solid var(--line2);border-radius:9px;background:var(--panel2);color:var(--text);font-family:inherit;font-size:12px;font-weight:400;
}
#dock .video-controls-row .model-param .ym-model-picker{max-width:100%;padding-right:23px;}
#dock .video-controls-row #p-count{padding:0 4px;}
#dock .video-channel-field{position:relative;}
#dock .video-channel-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:17px;}
#dock #video-channel-status{display:flex;align-items:center;position:absolute;right:25px;top:50%;transform:translateY(-50%);pointer-events:none;}
#dock #video-channel-status .ym-load-status{font-size:11px;font-weight:500;margin:0;}
#dock .video-channel-control{display:flex;align-items:center;padding:0;position:relative;}
#dock .video-channel-control .ym-model-picker,#dock .video-channel-control select{flex:1;min-width:0;height:42px;min-height:42px;max-width:none;border:0;background:transparent;}
#dock .video-channel-control .ym-model-picker{padding-right:23px;}
#dock .video-channel-control:has(#video-channel-status:not(:empty)) .ym-model-picker{padding-right:56px;font-size:11px;}
#dock .video-channel-control:has(.video-channel-fixed) #video-channel-status{right:9px;}
#dock .video-channel-control:has(#video-channel-status:not(:empty)) .video-channel-fixed{padding-right:40px;}
#dock .video-channel-fixed{flex:1;min-width:0;padding-left:10px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#dock .video-controls-row #gen-cost{min-width:64px;height:44px;padding:0;color:var(--dim);font-size:12px;font-weight:400;}
#dock .video-controls-row #gen-cost:after{color:var(--dim);font-size:11px;}
#dock .video-params-field{min-width:0;}
#dock .video-field-label{margin-bottom:7px;}
#dock .video-controls-row #video-pack{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 8px;cursor:pointer;}
#dock .video-controls-row #video-summary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}
#dock .video-controls-row #video-config-pop{width:min(410px,calc(100vw - 56px));}
#dock .video-summary-short{display:none;font-size:12px;}
#dock .video-controls-row .pack-arrow{flex:none;}
#dock .video-controls-row #gen-btn{position:static;box-sizing:border-box;width:100%;height:44px;min-height:44px;gap:5px;padding:0;border:0;border-radius:9px;background:#1c1c1e;color:#fff;font-size:12px;font-weight:500;}
#dock .video-controls-row #gen-btn:hover{background:#333337;}
#dock .video-controls-row #gen-btn:after{content:'生成';}
#dock .video-controls-row #gen-btn svg{width:15px;height:15px;}
#dock .video-channel-field select{min-width:0;max-width:100%;text-overflow:ellipsis;cursor:pointer;}
#dock #video-channel-summary[hidden]{display:none;}
#dock #video-channel-summary{flex:1 0 100%;min-width:0;font-size:12px;line-height:1.6;color:var(--dim);overflow-wrap:anywhere;}
#dock #video-channel-summary.unavailable{color:#ff8d8d;}
body.canvas-light #dock #video-channel-summary.unavailable{color:#c62828;}
#dock .video-risk-warning{display:flex;align-items:flex-start;gap:7px;margin-top:2px;padding:8px 10px;border:1px solid #71414a;border-radius:7px;background:#38242b;color:#ff8990;font-size:11px;font-weight:500;line-height:1.6;}
#dock .video-risk-warning svg{flex:none;width:15px;height:15px;margin-top:1px;}
body.canvas-light #dock .video-risk-warning{border-color:#f4c9cb;background:#fff2f2;color:#c5323b;}
.agent-stage-video-channel,.video-stage-channel-summary{min-width:0;max-width:100%;}
.agent-stage-video-channel select{min-width:0;width:100%;max-width:100%;text-overflow:ellipsis;}
.video-stage-channel-summary{font-size:12px;color:var(--dim);overflow-wrap:anywhere;}

@container(max-width:688px){
  #dock .video-controls-row{grid-template-columns:minmax(110px,1fr) minmax(0,1.4fr) 46px;}
  #dock #param-row:has(.video-controls-row){gap:10px;}
  #dock .nodeflow-dock{margin-top:8px;padding-top:8px;}
  #dock .video-controls-row .model-param{grid-column:1;}
  #dock .video-controls-row .video-channel-field{grid-column:2/4;}
  #dock .video-controls-row .video-params-field{grid-column:1/3;}
  #dock .video-controls-row .count-param{grid-column:3;}
  #dock .video-controls-row #gen-cost{grid-column:1;}
  #dock .video-controls-row #gen-btn{grid-column:2/4;}
  #dock .video-controls-row #video-summary{font-size:12px;}
}

.video-pricing-dialog{
  box-sizing:border-box;width:min(840px,calc(100vw - 32px));max-height:min(860px,calc(100dvh - 32px));
  margin:auto;padding:0;border:1px solid var(--line2);border-radius:18px;
  background:var(--panel);color:var(--text);box-shadow:var(--shell-shadow);overflow:hidden;
  font:14px/1.8 "Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;color-scheme:dark;
}
.video-pricing-dialog[open]{display:flex;flex-direction:column;}
body.canvas-light .video-pricing-dialog{color-scheme:light;}
.video-pricing-dialog::backdrop{background:#0008;backdrop-filter:blur(3px);}
.video-pricing-dialog>header{display:flex;align-items:flex-start;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);flex:none;}
.video-pricing-dialog h2{flex:1;min-width:0;font-size:18px;line-height:1.55;font-weight:650;margin:3px 0;}
.video-pricing-close{flex:none;width:36px;height:36px;font-size:26px;line-height:1;border-radius:8px;background:var(--panel2);color:var(--dim);}
.video-pricing-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 24px;scrollbar-gutter:stable;user-select:text;}
.video-pricing-body section+section{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);}
.video-pricing-body h3{margin:20px 0 12px;font-size:17px;line-height:1.6;font-weight:650;}
.video-pricing-body section+section h3{margin-top:0;}
.video-pricing-body h4{margin:20px 0 10px;font-size:14px;font-weight:650;}
.video-pricing-body p{margin:10px 0;overflow-wrap:break-word;}
.video-pricing-body .video-pricing-exchange{margin:0 0 18px;padding:12px 16px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;}
.video-pricing-body :is(ul,ol){padding-left:24px;margin:10px 0;}
.video-pricing-body li{margin:6px 0;}
.video-pricing-body .video-pricing-disclaimer{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);}
.video-pricing-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;margin:12px 0 16px;border:1px solid var(--line2);border-radius:10px;}
.video-pricing-dialog table{width:100%;min-width:510px;border-collapse:collapse;font-size:13px;line-height:1.7;}
.video-pricing-dialog :is(th,td){padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.video-pricing-dialog thead{background:var(--panel2);}
.video-pricing-dialog th{font-weight:600;}
.video-pricing-dialog tbody tr:last-child :is(th,td){border-bottom:0;}
.video-pricing-dialog tbody th,.video-pricing-dialog td:nth-child(2){white-space:nowrap;}
.video-pricing-dialog table[data-pricing-table="official"] td:last-child{min-width:245px;}
.video-pricing-dialog>footer{display:flex;justify-content:flex-end;flex:none;padding:12px 24px;border-top:1px solid var(--line);background:var(--panel);}
.video-pricing-done{min-height:40px;padding:8px 26px;border-radius:9px;background:var(--shell-primary);color:var(--shell-on-primary);font:inherit;}
.video-pricing-dialog button:hover{filter:brightness(.92);}
.video-pricing-dialog :is(button,[tabindex]):focus-visible{outline:2px solid var(--dim);outline-offset:-3px;}
.video-pricing-scroll-hint{display:none;}
@media(max-width:600px){
  .video-pricing-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:14px;}
  .video-pricing-dialog>header{padding:14px 16px;gap:10px;}
  .video-pricing-dialog h2{font-size:16px;}
  .video-pricing-body{padding:16px;font-size:13px;}
  .video-pricing-body h3{font-size:16px;}
  .video-pricing-dialog>footer{padding:10px 16px;}
  .video-pricing-done{width:100%;min-height:44px;}
  .video-pricing-scroll-hint{display:block;font-size:12px;color:var(--dim);}
}
@media(pointer:coarse){
  #dock .video-controls-row select,#dock .video-controls-row .ym-model-picker{font-size:16px;}
  #dock .video-controls-row .model-param .ym-model-picker,#dock .video-channel-control .ym-model-picker{font-size:12px;}
}
