/* ================================================================
   AIGC 交付物切换（v5.19）
   02 图像：3 种尺寸 · 03 漫画：四格 / 条漫 / 动态漫剧
   04 视频：16:9 / 9:16 画幅 · 06 IP：主形象 / 四视图 / 表情表
   ================================================================ */
.c-views { display: grid; gap: 10px; min-width: 0; }

/* 分段控件：沿用写作台的胶囊标签样式 */
.c-views__tabs {
  display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  background: var(--s3); border: 1px solid var(--line-1);
}
.c-views__tab {
  flex: 1 1 auto; min-width: 0; min-height: 30px; padding: 6px 6px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--t3);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 var(--fs-micro) / 1 var(--font-display);
  transition: background var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.c-views__tab:hover { color: var(--t1); }
.c-views__tab[aria-selected="true"] { background: var(--s4); color: var(--t1); box-shadow: inset 0 0 0 1px var(--line-2); }
.c-views__tab:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 1px; }

.c-views__panels { display: grid; min-width: 0; }
.c-views__panel { display: grid; gap: 10px; min-width: 0; }
.c-views__panel[hidden] { display: none !important; }

/* 当前交付物的规格说明 */
.c-views__spec { font: 500 var(--fs-micro) / 1.4 var(--font-mono); color: var(--t3); }

/* 条漫长图：竖向可滚动，像手机里的长图 */
.c-slot--scroll { overflow-y: auto; overscroll-behavior: contain; }
.c-slot--scroll > img { position: static; width: 100%; height: auto; object-fit: none; }
.c-slot--scroll::-webkit-scrollbar { width: 6px; }
.c-slot--scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.c-slot--scroll::-webkit-scrollbar-track { background: transparent; }

/* 真片播放器：铺满图位，保留封面 poster */
.c-demo__video,
.c-media__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  background: var(--s0);
}
.c-media { position: relative; width: 100%; aspect-ratio: var(--ratio, 9 / 16); border-radius: var(--r-sm); overflow: hidden; background: var(--s4); }
.c-media__video { position: static; width: 100%; height: 100%; }

/* 分镜预览的缩放动效改为作用在真片上 */
html.js-motion:not(.loops-paused) .c-demo--video.is-playing > .c-slot > .c-demo__video { transform: scale(1.04); transition: transform 15s linear; }
.c-demo--video > .c-slot > .c-demo__video { transition: transform var(--d-6) var(--e-out); }

/* 画幅切换：竖版时封面按 9:16 裁切 */
.c-demo--video[data-ratio="9 / 16"] > .c-slot { max-width: 280px; margin-inline: auto; }

/* 窄屏上字幕与播放键错开：未播放时字幕贴底，播放后播放键移到左下角，字幕上移 */
@media (max-width: 767px) {
  .c-demo--video:not(.is-started) .c-demo__sub { bottom: 8px; }
  .c-demo--video.is-started .c-demo__sub { bottom: 56px; }
}

@media (max-width: 479px) {
  .c-views__tab { padding: 6px 4px; }
  .c-demo--video[data-ratio="9 / 16"] > .c-slot { max-width: 220px; }
}
/* ================================================================
   AIGC 03 / 08：补齐舞台下方的留白
   03 漫画 → 分镜脚本（每格的分镜与对白）
   08 网站 → 信息架构（专题站的 8 个区块）
   ================================================================ */

/* 03 · 分镜脚本：吃掉舞台剩余高度，列表在内部摊开 */
.c-script {
  display: grid; grid-template-rows: auto 1fr; gap: 6px; padding: 10px 12px; min-height: 0;
  border-radius: var(--r-sm); background: var(--s3); border: 1px solid var(--line-1);
}
.c-script[hidden] { display: none !important; }
.c-script__label { font: 500 var(--fs-micro) / 1 var(--font-mono); color: var(--t4); letter-spacing: .04em; }
/* 单列，文字整行可读 */
.c-script__list { display: grid; align-content: space-between; gap: 4px; margin: 0; padding: 0; list-style: none; }
.c-script__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 8px; }
.c-script__no { grid-row: span 2; font: 500 var(--fs-micro) / 1.5 var(--font-mono); color: var(--t-accent); }
.c-script__cap { font-size: var(--fs-micro); line-height: 1.45; color: var(--t3); }
.c-script__line { font-size: var(--fs-micro); line-height: 1.45; color: var(--t2); }
.c-script__line b { color: var(--t4); font-weight: 500; margin-right: 5px; }

/* 08 · 信息架构：舞台改成两行，第二行吃掉剩余高度，区块列表在内部摊开 */
.c-tile__stage--fill { align-content: stretch; grid-template-rows: auto minmax(0, 1fr); }
.c-ia {
  display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 12px;
  border-radius: var(--r-sm); background: var(--s3); border: 1px solid var(--line-1);
}
.c-ia__label { font: 500 var(--fs-micro) / 1 var(--font-mono); color: var(--t4); letter-spacing: .04em; }
.c-ia__list { display: grid; align-content: space-between; margin: 0; }
.c-ia__row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px;
  padding: 5px 0; border-top: 1px solid var(--line-1);
}
.c-ia__row:first-child { border-top: 0; }
.c-ia__k { font: 600 var(--fs-micro) / 1.5 var(--font-display); color: var(--t1); }
.c-ia__v { margin: 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--t3); }
.c-ia__chips { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 479px) {
  .c-ia__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .c-script__list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion:not(.loops-paused) .c-demo--video.is-playing > .c-slot > .c-demo__video { transform: none; }
}