/* ===== 右侧编辑区布局修正 =====
   1) 深色顶部栏（标题 + 图标 + 已保存）固定不动；下面的内容区自己滚动。
      以前是整个右侧一起滚，内容一变长就出现滚动条，把顶部栏挤窄几个像素。
   2) 笔记/文案的编辑模式：编辑框自动撑满到窗口最底部，不再是写死的高度。
   必须放在所有样式表的最后面加载。 */

/* 手机浏览器的 100vh 会把地址栏那一块算进去，导致底部被遮住；dvh 是真正可见的高度 */
@supports (height:100dvh){
  .app-view{height:100dvh;}
}

/* 1) 顶部栏固定，内容区自己滚动 */
.main:has(#episodeView:not(.hidden)){
  display:flex;flex-direction:column;overflow:hidden;
}
.main:has(#episodeView:not(.hidden)) #episodeView{
  flex:1;min-height:0;display:flex;flex-direction:column;
}
#episodeView .episode-head{position:static;flex:0 0 auto;}
#storyboardEditor,#mediaEditor{flex:1;min-height:0;overflow-y:auto;}

/* 2) 笔记/文案「编辑模式」：编辑器撑满剩余高度，一直到窗口底部 */
#episodeView:not(.read-only-mode) #mediaEditor{
  display:flex;flex-direction:column;overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
#episodeView:not(.read-only-mode) #mediaEditor > .card:last-child{
  flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:0;
}
#episodeView:not(.read-only-mode) #editorWrapper{
  flex:1;min-height:0;display:flex;flex-direction:column;border-radius:8px 8px 0 0;
}
/* TinyMCE 初始化时把自己的高度写死成 600px（行内样式），这里用 !important 盖掉，改成跟着容器走 */
#episodeView:not(.read-only-mode) #editorWrapper .tox-tinymce{
  flex:1;min-height:0;height:auto !important;
}