/* Workspace surfaces share the same blue and white language as the home page. */
body:not(.home-mode){background:#f4f7fb}
body:not(.home-mode) .app{grid-template-columns:4.4rem 13.5rem minmax(0,1fr)}
body:not(.home-mode) .main-rail{width:4.4rem;padding:1rem .5rem;background:#fff;border-color:#e4eaf2;box-shadow:none}
body:not(.home-mode) .side-menu{padding:1.25rem .65rem;background:#fff;border-color:#e4eaf2;backdrop-filter:none}
body:not(.home-mode) .side-menu h3{padding:.25rem .65rem .65rem;color:#8492a6;font-size:.76rem;letter-spacing:.04em}
body:not(.home-mode) .side-btn{min-height:2.65rem;padding:.55rem .7rem;border-radius:.65rem;color:#5e7087}
body:not(.home-mode) .rail-item.active,body:not(.home-mode) .side-btn.active{background:#eaf1ff;color:#2458c7}
body:not(.home-mode) .rail-item.active::before{background:#2959d8}
body:not(.home-mode) .main-stage{background:#f4f7fb}
body:not(.home-mode) .card,body:not(.home-mode) .blogger-card,body:not(.home-mode) .file-card{min-width:0;border:1px solid #e2e9f2;border-radius:1rem;box-shadow:0 8px 28px rgba(30,55,95,.06)}
body:not(.home-mode) .card-head{gap:.6rem;border-bottom:1px solid #e8edf4}
body:not(.home-mode) .card-head h2{color:#203149;font-weight:800}
body:not(.home-mode) .btn-primary,body:not(.home-mode) .doc-new,body:not(.home-mode) .agent-btn.primary,body:not(.home-mode) .btn-large,body:not(.home-mode) .btn-orange,body:not(.home-mode) .agent-btn.orange,body:not(.home-mode) .generate{border-color:#2959d8;background:#2959d8;color:#fff;box-shadow:0 6px 16px rgba(41,89,216,.13)}
body:not(.home-mode) .btn-primary:hover,body:not(.home-mode) .doc-new:hover,body:not(.home-mode) .agent-btn.primary:hover,body:not(.home-mode) .btn-large:hover,body:not(.home-mode) .btn-orange:hover,body:not(.home-mode) .agent-btn.orange:hover,body:not(.home-mode) .generate:hover{background:#1d48b6;color:#fff;box-shadow:0 8px 20px rgba(41,89,216,.18)}
body:not(.home-mode) .btn-secondary,body:not(.home-mode) .agent-btn{border-color:#dce5f0;background:#fff;color:#405670}
body:not(.home-mode) .btn-secondary:hover,body:not(.home-mode) .agent-btn:hover{border-color:#a8c1f5;background:#f4f8ff;color:#2458c7}
body:not(.home-mode) input:not([type="checkbox"]):not([type="radio"]),body:not(.home-mode) textarea,body:not(.home-mode) select{border-color:#dce5f0;background:#fff}
body:not(.home-mode) input:focus,body:not(.home-mode) textarea:focus,body:not(.home-mode) select:focus{border-color:#2959d8!important;box-shadow:0 0 0 3px rgba(41,89,216,.12)!important}
body:not(.home-mode) .logo-mini{box-shadow:none}
body:not(.home-mode) .rail-item.avatar{width:2.85rem;height:2.85rem;margin:.32rem auto;border:1px solid #cdddfd;border-radius:50%;background:#eaf1ff;color:transparent;font-size:0;box-shadow:none}
body:not(.home-mode) .rail-item.avatar::after{content:"";width:1.35rem;height:1.35rem;background:#2458c7;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.5' fill='black'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(.home-mode) .rail-item.avatar:hover{background:#dce9ff;border-color:#9dbcf7}

/* The workflow header and draft controls have their own rows. */
.video-view{--bg:#f4f7fb;--surface:#fff;--surface-2:#f8faff;--border:#e2e9f2;--border-2:#cfdaea;--text:#203149;--text-2:#62748a;--text-3:#91a0b3;--primary:#2959d8;--primary-hover:#1d48b6;--primary-soft:#eaf1ff;background:#f4f7fb;color:#203149}
.video-view .video-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.8rem 1rem;padding:1rem 1.4rem .8rem;background:#fff;border-color:#e2e9f2;box-shadow:none}
.video-view .video-topbar h2{min-width:0;color:#203149;font-size:1.08rem;line-height:1.4}
.video-view #newWorkflowBtn{white-space:nowrap}
.video-view .steps-bar{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.35rem;min-width:0;overflow:visible;padding:0}
.video-view .steps-bar .step{justify-content:center;min-width:0;gap:.4rem;padding:.48rem .4rem;border:1px solid transparent;border-radius:.62rem;color:#66778d;font-size:.78rem;text-align:center}
.video-view .steps-bar .step:hover{border-color:#d9e5ff;background:#f4f8ff;color:#2458c7}
.video-view .steps-bar .step.active{border-color:#d6e4ff;background:#eaf1ff;color:#2458c7}
.video-view .steps-bar .step.done{color:#2c7257}
.video-view .steps-bar .step .num{flex:none;background:#edf1f7;color:#687990;box-shadow:none}
.video-view .steps-bar .step.active .num{background:#2959d8;color:#fff;box-shadow:none}
.video-view .steps-bar .step.done .num{background:#e3f4eb;color:#19815a}
.video-view .workflow-draftbar{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,max-content);gap:.5rem;padding:.85rem 1.4rem;background:#fff;border-color:#e2e9f2}
.video-view .workflow-draftbar #workflowDraftMeta{grid-column:1/-1;min-width:0;margin:0;color:#708097;font-size:.77rem;white-space:normal}
.video-view .workflow-draftbar #workflowDraftSelect{grid-column:1;min-width:0;max-width:none;width:100%}
.video-view .workflow-draftbar .agent-btn{white-space:nowrap}
.video-view .video-body{padding:1.3rem 1.4rem 3rem}
.video-view .agent-page.active::before{margin-bottom:1rem;padding:.7rem .95rem;border-color:#dce7fa;border-radius:.7rem;background:#f8fbff;color:#2458c7;box-shadow:inset 3px 0 #2959d8}
.video-view .card{padding:1.15rem;border-color:#e2e9f2;border-radius:1rem;box-shadow:0 8px 28px rgba(30,55,95,.06)}
.video-view .card-head{border-color:#e8edf4}.video-view .card-head h2{color:#203149}
.video-view .agent-note,.video-view .agent-field label{color:#64758c;line-height:1.6}
.video-view .agent-btn{border-color:#dce5f0;background:#fff;color:#405670}
.video-view .agent-btn:hover{border-color:#a8c1f5;background:#f4f8ff;color:#2458c7}
.video-view .agent-btn.primary,.video-view .agent-btn.orange,.video-view .generate{border-color:#2959d8;background:#2959d8;color:#fff;box-shadow:0 6px 16px rgba(41,89,216,.13)}
.video-view .agent-btn.primary:hover,.video-view .agent-btn.orange:hover,.video-view .generate:hover{background:#1d48b6;color:#fff}
.video-view .metric,.video-view .source-row,.video-view .timeline{border-color:#e2e9f2;background:#f8faff}
.video-view .metric b{color:#2458c7}
.video-view .ai-status{border-color:#dce7fa;background:#f5f9ff;color:#4b6383}
.video-view .draft-card.selected,.video-view .platform-card.selected{border-color:#8db1f7;background:#edf4ff;box-shadow:0 0 0 2px rgba(41,89,216,.08)}
.video-view .platform-card:hover{border-color:#a8c1f5;box-shadow:0 7px 18px rgba(30,55,95,.09)}
.video-view .platform-grid{gap:.65rem}
.video-view .video-progress-panel{border-color:#dce7fa;background:#f5f9ff}.video-view .video-progress-percent{color:#2458c7}.video-view .video-progress-panel progress{accent-color:#2959d8}
.video-view .agent-grid,.video-view .workspace{min-width:0}.video-view .agent-grid>* ,.video-view .workspace>*{min-width:0}

/* Knowledge and materials pages keep their controls aligned with the content. */
.doc-list{border-color:#e2e9f2}.doc-item.active{background:#eaf1ff;color:#2458c7}
.doc-editor{background:#f4f7fb}.doc-editor-header,.doc-editor-toolbar{border-color:#e2e9f2}
.doc-content{border-color:#e2e9f2;border-radius:1rem;box-shadow:0 8px 28px rgba(30,55,95,.06);overflow-wrap:anywhere}
#openDocListBtn,#closeDocListBtn{display:none}
.local-grid{padding:1.4rem}.local-head{gap:1rem}.upload-zone{border-color:#cad8ec;background:#f8fbff}
.account-section .settings-platform-list{margin-top:1rem}
.settings-platform-row{min-height:4.7rem;gap:.8rem}.settings-platform-row .channel-identity{display:flex;align-items:center;gap:.8rem;min-width:0}
.settings-platform-row .channel-icon{flex:none;width:2.5rem;height:2.5rem;display:grid;place-items:center;overflow:hidden;border:1px solid #e4eaf2;border-radius:.7rem;background:#fff;color:#2959d8;font-weight:800}
.settings-platform-row .channel-icon img,.settings-platform-row .channel-icon svg{width:100%;height:100%;object-fit:contain}
.settings-platform-row .channel-copy{min-width:0}.settings-platform-row .channel-copy small{display:block;margin-top:.2rem}
#socialBindDialog{border:1px solid #dce5f0!important;border-radius:1rem!important;color:#203149;max-height:min(90dvh,44rem);overflow:auto}
#socialBindQR{max-width:min(100%,18rem);border:1px solid #e2e9f2;border-radius:.65rem;background:#fff}

@media(max-width:1100px){
  .video-view .steps-bar{display:flex;gap:.25rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
  .video-view .steps-bar .step{flex:none;min-width:7rem;scroll-snap-align:start}
}
@media(max-width:900px){
  body:not(.home-mode) .app{grid-template-columns:3.8rem minmax(0,1fr);grid-template-rows:3.6rem minmax(0,1fr);height:100dvh}
  body:not(.home-mode) .main-rail{grid-column:1;grid-row:1/span 2;width:3.8rem;height:100dvh;padding:.75rem .35rem}
  body:not(.home-mode) .side-menu{display:flex;grid-column:2;grid-row:1;min-width:0;min-height:0;padding:.42rem .5rem;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid #e2e9f2;white-space:nowrap}
  body:not(.home-mode) .side-menu h3{display:none}
  body:not(.home-mode) .side-section.active{display:flex;flex-direction:row;align-items:center;gap:.2rem;width:max-content;flex:none}
  body:not(.home-mode) .side-btn{flex:none;width:auto;min-height:2.45rem;padding:.4rem .7rem;font-size:.78rem}
  body:not(.home-mode) .main-stage{grid-column:2;grid-row:2;min-height:0}
  .video-view .steps-bar{display:none}
  .video-view .agent-grid,.video-view .workspace,#stage3Workspace,#publishLayout{grid-template-columns:minmax(0,1fr)!important}
  #publishLayout>.card,#stage3VoiceCard,#stage3ResultCard{grid-column:auto!important;grid-row:auto!important}
  .doc-list{position:fixed;left:3.8rem;top:3.6rem;bottom:0;width:min(22rem,calc(100vw - 3.8rem));height:auto;z-index:30;transform:translateX(-115%);box-shadow:14px 0 30px rgba(22,43,78,.15)}
  .doc-list.open{transform:translateX(0)}
  #openDocListBtn,#closeDocListBtn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
}
@media(max-width:760px){
  body:not(.home-mode) .rail-item.avatar{width:2.55rem;height:2.55rem}
  .video-view .video-topbar{gap:.55rem;padding:.85rem .9rem .65rem}
  .video-view .video-topbar h2{font-size:.97rem}
  .video-view #newWorkflowBtn{padding:.5rem .65rem;font-size:.78rem}
  .video-view .steps-bar .step{min-width:7.2rem;padding:.43rem .4rem}
  .video-view .workflow-draftbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;padding:.8rem .9rem}
  .video-view .workflow-draftbar #workflowDraftMeta,.video-view .workflow-draftbar #workflowDraftSelect{grid-column:1/-1}
  .video-view .workflow-draftbar .agent-btn{min-width:0;white-space:normal;padding:.48rem .45rem;font-size:.75rem}
  .video-view .workflow-draftbar #deleteWorkflowDraftBtn{grid-column:1/-1}
  .video-view .video-body{padding:.9rem .8rem 2rem}
  .video-view .card{padding:1rem}
  .video-view .agent-page.active::before{margin-bottom:.75rem}
  .video-view .agent-field .voice-row{flex-wrap:wrap}
  .video-view .agent-field .voice-row input.agent-input{flex:1 1 100%;min-width:0}
  .video-view .agent-field .voice-row button{flex:1 1 auto}
  .video-view .platform-grid{grid-template-columns:minmax(0,1fr)}
  .doc-editor-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;padding:.7rem}
  .doc-title-input{grid-column:2;min-width:0;font-size:1rem;overflow:hidden;text-overflow:ellipsis}
  .doc-actions{grid-column:1/-1;display:flex;gap:.45rem;min-width:0;overflow-x:auto;padding-bottom:.15rem}
  .doc-actions button{flex:none;white-space:nowrap;padding:.42rem .6rem}
  .doc-editor-toolbar{padding:.45rem .7rem;gap:.2rem;max-height:5.5rem;overflow:auto}
  .doc-editor-body{padding:1rem .7rem}
  .doc-content{min-height:65vh;padding:1.1rem;font-size:.92rem;line-height:1.7}
  .local-grid{padding:1rem .8rem}.local-head{display:block}.local-head>.voice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin-top:.85rem}
  .local-head>.voice-row button{min-width:0;white-space:normal;padding:.55rem .35rem}
  .settings-platform-row{align-items:stretch}.settings-platform-row button{align-self:flex-start}
}