/* 工作台壳层响应式（1.1.1）。独立于冻结的1.0.21 style.css/features.js。 */
#main { container-type: inline-size; }
#video-hub-body { width: 100%; min-width: 0; }
.video-project-layout { width: 100%; max-width: 1180px; min-width: 0; margin-inline: auto; grid-template-columns: minmax(0,230px) minmax(0,1fr); }
.vp-main, .vp-sidebar, .vp-toolbar { min-width: 0; }
.vp-toolbar input { min-width: 0; }

@container (max-width: 940px) {
  .video-project-layout { grid-template-columns: 1fr; }
  .vp-sidebar { max-height: 230px; }
  .vp-editor-grid { grid-template-columns: 1fr; }
  .vp-editor-img { max-width: 180px; }
  .vp-job { grid-template-columns: 1fr auto; }
  .vp-job .sub { grid-column: 1 / -1; }
  .vp-source { grid-template-columns: auto 1fr 70px; }
  .vp-source > span:nth-of-type(1) { display: none; }
}

/* 成片/复刻容器降级：宽时三栏，窄时单栏，避免横向溢出（只影响成片域） */
@container (max-width: 1080px) {
  .vp-portal-cards .vp-portal-card.hero { flex-basis: 220px; }
  .rp-cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 860px) {
  .vp-portal-layout { grid-template-columns: 1fr; }
  .vp-sidebar { max-height: none; }
  .rp-cards3 { grid-template-columns: 1fr; }
  .vp-portal-card.hero { min-height: 150px; }
}

@media (max-width: 1350px) {
  body.video-compact #feed { width: 320px; }
  body.video-compact #main { padding-inline: 12px; }
}

@media (max-width: 1100px) {
  body.video-compact #feed { display: none; }
  body.video-compact #main { padding: 10px 12px 28px; }
}

@media (max-width: 900px) {
  #header { padding-inline: 8px; gap: 2px; }
  #brand { margin-right: 4px; font-size: 13px; }
  #header-right { display: none; }
  #main-tabs { overflow-x: auto; scrollbar-width: none; }
  #main-tabs::-webkit-scrollbar { display: none; }
  .main-tab { padding-inline: 9px; font-size: 12.5px; }
  #leftbar { display: none !important; }
  #feed { display: none; }
  #main { padding: 8px 10px 24px; }
  .video-hub-tabs { margin-bottom: 8px; }
}

/* 宽屏自适应（1.22.1/1.22.3）：视频生图工作区铺满可用宽度。
   排布原则：短卡成对、其余通栏、不留半空卡——
   · 脚本编排可见（AI视频脚本图）时：素材类型│脚本编排 成对（两卡都短）；
   · 首帧图模式（脚本卡隐藏）：素材类型通栏，不留半空卡；
   · 模特策略/场景动作组/智能填充 通栏（芯片与输入框舒展，避免半空卡）。
   只动非冻结壳层；冻结的 .video-workspace max-width 在宽容器下由此覆盖。 */
@container (min-width: 1200px) {
  #main > .video-hub-tabs { max-width: 1240px; }
  #video-hub-body .video-workspace {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  #video-hub-body .video-workspace > * { grid-column: 1 / -1; min-width: 0; }
  #video-hub-body .video-workspace:has(#v-script-card:not([hidden]))
    > .card:has(#v-asset-mode) { grid-column: 1; }
  #video-hub-body .video-workspace:has(#v-script-card:not([hidden]))
    > #v-script-card { grid-column: 2; }
}

/* 宽屏自适应（1.22.2）：电商图片各功能页同步铺满（774px 窄列 → 1240px 居中）。
   纯排版：只放宽容器宽度，卡内既有 grid/表单自动舒展；窄窗口回落冻结原版式。 */
@container (min-width: 1200px) {
  #main.narrow .ws-inner { width: min(1240px, 100%); }
}


/* ===== 生成记录里的视频/封面预览（1.23.34）=====
   `style.css` 是生图冻结文件，只约束了 .fc-thumbs img（42×42 方块）；
   视频若不做尺寸约束，竖版成片会按原始尺寸渲染、撑爆右侧记录栏。
   这里给视频/封面单独一块预览区：全宽、限高、完整显示不裁切。 */
.feed-card .fc-video {
  margin-top: 7px;
}
.feed-card .fc-video video,
.feed-card .fc-video img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: contain;          /* 完整显示，不裁掉人物/字幕 */
  background: #111;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.feed-card .fc-video img {
  object-fit: cover;            /* 封面图可以裁 */
}

/* ===== 右侧记录面板两行重排（1.23.75）=====
   原 5 个入口挤一行，窄栏里文字竖排换行显乱。
   改为「生成记录/我的收藏」一行 + 「全部/图片/视频」一行，等宽居中、不换行。 */
#feed-modes { display: block; padding: 8px 8px 7px; }
#feed-modes .feed-tabs, #feed-modes .feed-chips { display: flex; gap: 6px; }
#feed-modes .feed-mode {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  white-space: nowrap; padding: 6px 4px; text-align: center; min-width: 0;
}
#feed-modes .feed-chips { margin-top: 6px; }
#feed-modes .feed-kind {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px;
  white-space: nowrap; padding: 5px 4px; font-size: 12px; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  cursor: pointer; opacity: .78;
}
#feed-modes .feed-kind:hover { opacity: 1; }
#feed-modes .feed-kind.active {
  opacity: 1; color: #207a4d; font-weight: 650;
  background: #e2f0e7; border-color: #b7d6c3;
}

/* ===== 生成记录抽屉可收起（1.23.164，用户拍板实施）=====
   抽屉常开把编辑区挤窄（video-compact 下仅剩 320px，双栏各 ~360px）——
   左缘把手收起抽屉换全宽编辑区，右缘竖轨展开；状态存 localStorage 随本机记忆。
   900px 以下抽屉本就不显示，把手随抽屉消失、展开轨也一并隐藏。 */
#feed { position: relative; }
#feed-collapse {
  position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 56px; padding: 0; z-index: 30;
  border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
#feed-collapse:hover { color: var(--brand); border-color: var(--brand); }
#feed-expand {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  width: 18px; height: 64px; padding: 0; z-index: 300;
  border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  font-size: 12px; line-height: 1; box-shadow: -2px 2px 8px rgba(0, 0, 0, .06);
  display: flex; align-items: center; justify-content: center;
}
#feed-expand:hover { color: var(--brand); border-color: var(--brand); }
#feed-expand[hidden] { display: none; }   /* display:flex 压过 hidden 的铁律兜底 */
body.feed-collapsed #feed { display: none; }
@media (max-width: 900px) {
  #feed-expand { display: none !important; }
}