

/* ==========================================================================
   workbench-v2.css — 公众号创作：对话居中、成稿在右
   只覆盖 981px 以上的桌面版式，不改 DOM、不动 JS 依赖的节点。
   ========================================================================== */

@media (min-width: 981px) {

  body.atelier #workbench.workbench-page {
    padding: 10px 14px 0 !important;
    background: transparent !important;
  }

  /* 两栏：对话居中 1fr，成稿右侧 440 */
  body.atelier #workbench .conversation-workbench-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 440px !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(600px, calc(100dvh - 150px), 880px) !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* 对话：左、居中、玻璃 */
  body.atelier #workbench .conversation-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    border-left: 1px solid rgba(255, 255, 255, .82) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .34)) !important;
    -webkit-backdrop-filter: blur(54px) saturate(200%);
    backdrop-filter: blur(54px) saturate(200%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .95) inset,
      0 34px 70px -50px rgba(18, 44, 30, .5) !important;
    overflow: hidden;
  }

  /* 成稿：右、玻璃 */
  body.atelier #workbench .article-canvas {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 18px 22px 16px !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .38)) !important;
    -webkit-backdrop-filter: blur(54px) saturate(200%);
    backdrop-filter: blur(54px) saturate(200%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .95) inset,
      0 34px 70px -50px rgba(18, 44, 30, .5) !important;
    overflow-y: auto !important;
  }

  /* 成稿正文：宋体、限宽、行距 */
  body.atelier #workbench #article-editor,
  body.atelier #workbench .article-canvas #article-editor {
    max-width: 720px !important;
    margin: 8px auto 0 !important;
    font-family: "Noto Serif SC", "Songti SC", "SimSun", serif !important;
    font-size: 14.5px !important;
    line-height: 2 !important;
    color: #3B4239 !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.atelier #workbench .article-canvas h2#result-title {
    font-family: "Noto Serif SC", "Songti SC", serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: #14180F !important;
  }

  /* 输入框抬高 */
  body.atelier #workbench .composer-shell textarea,
  body.atelier #workbench #workbench-topic {
    min-height: 74px !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    border-radius: 12px !important;
  }

  body.atelier #workbench .composer-send {
    width: 34px !important;
    height: 34px !important;
  }
}

/* 阶段条：紧凑、当前步实心胶囊（桌面 + 全部宽度） */
body.atelier #workbench .workbench-stage-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  height: 50px !important;
  padding: 0 6px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

body.atelier #workbench .workbench-stage-nav button {
  flex: none !important;
  display: flex !important;
  align-items: center;
  gap: 7px;
  height: 30px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-size: 12px !important;
  color: var(--ink-3, #8A948C) !important;
}

body.atelier #workbench .workbench-stage-nav button em,
body.atelier #workbench .workbench-stage-nav button i {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 9.5px;
  font-style: normal;
  opacity: .8;
}

body.atelier #workbench .workbench-stage-nav button[aria-current="step"] {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--ink-1, #191D19) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px -6px rgba(20, 44, 32, .4) !important;
}

body.atelier #workbench .workbench-stage-nav::after {
  display: none !important;
}


/* ==========================================================================
   三栏：成果(252) · 对话(1fr) · 成稿(440)
   实测子节点顺序：ASIDE#creation-assistant, SECTION#workbench-result,
                   ASIDE#studio-details, DIV(底部动作条)
   ========================================================================== */
@media (min-width: 981px) {

  body.atelier #workbench .conversation-workbench-layout {
    grid-template-columns: 220px minmax(0, 1fr) 400px !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
  }

  /* 左：本轮成果 */
  body.atelier #workbench #studio-details {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .54), rgba(255, 255, 255, .32)) !important;
    -webkit-backdrop-filter: blur(54px) saturate(200%);
    backdrop-filter: blur(54px) saturate(200%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 30px 60px -50px rgba(18, 44, 30, .5) !important;
    overflow-y: auto !important;
  }

  /* 中：对话 */
  body.atelier #workbench #creation-assistant {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  /* 右：成稿 */
  body.atelier #workbench #workbench-result {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  /* 底部动作条跨三列 */
  body.atelier #workbench .conversation-workbench-layout > .flow-actionbar,
  body.atelier #workbench .conversation-workbench-layout > div:last-child:not(.conversation-panel):not(.article-canvas) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  /* 左栏内部排版收紧 */
  body.atelier #workbench #studio-details > header,
  body.atelier #workbench #studio-details section {
    padding: 12px 16px !important;
  }

  body.atelier #workbench #studio-details h3 {
    font-size: 10px !important;
    color: var(--ink-3, #8A948C) !important;
    letter-spacing: .04em;
    margin-bottom: 8px !important;
  }

  body.atelier #workbench #studio-details .outline-list li {
    font-size: 11.5px !important;
    line-height: 1.7 !important;
    border-bottom: 1px solid rgba(28, 44, 34, .06);
    padding: 6px 0 !important;
  }

  body.atelier #workbench #studio-details .outline-list li span {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 9px !important;
    color: var(--g-600, #3E8D6B) !important;
  }

  /* 对话区内部：输入框外框跟随玻璃，不再压住提示文字 */
  body.atelier #workbench #creation-assistant .composer-shell {
    padding: 12px 16px 14px !important;
    border-top: 1px solid rgba(28, 44, 34, .07) !important;
    background: transparent !important;
  }

  body.atelier #workbench #workbench-topic {
    height: 88px !important;
    min-height: 88px !important;
    background: rgba(255, 255, 255, .72) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 12px !important;
    padding: 11px 13px !important;
  }
}


/* 左栏撑满高度，内部段落铺开 */
@media (min-width: 981px) {
  body.atelier #workbench #studio-details {
    height: 100% !important;
    justify-content: flex-start !important;
  }

  body.atelier #workbench #studio-details > section {
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.atelier #workbench #studio-details > section:last-of-type {
    flex: 0 0 auto !important;
    border-top: 1px solid rgba(28, 44, 34, .07);
  }

  body.atelier #workbench #studio-details section > * {
    min-width: 0;
  }

  /* 标题区更紧凑 */
  body.atelier #workbench #studio-details > header {
    flex: none;
    border-bottom: 1px solid rgba(28, 44, 34, .07);
  }
}


/* ==========================================================================
   收口：右栏放宽、面板别再拉满屏、去掉硬分隔线
   ========================================================================== */

@media (min-width: 981px) {
  /* 右栏随视口放宽，1280 时 400，1440 时 460 */
  body.atelier #workbench .conversation-workbench-layout {
    grid-template-columns: 220px minmax(0, 1fr) clamp(400px, 32vw, 460px) !important;
    height: clamp(380px, calc(100dvh - 168px), 920px) !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  /* 三块面板都不超过一屏，内容少时不会拉出大白块 */
  body.atelier #workbench #studio-details,
  body.atelier #workbench #creation-assistant,
  body.atelier #workbench #workbench-result {
    height: clamp(380px, calc(100dvh - 168px), 920px) !important;
    min-height: 0 !important;
  }

  /* 对话区：内容多时自己滚，输入框钉底 */
  body.atelier #workbench #creation-assistant .chat-thread,
  body.atelier #workbench #creation-assistant .conversation-history {
    flex: 1 1 auto !important;
    min-height: 120px !important;
    overflow-y: auto !important;
  }

  /* 去掉画布左侧那条硬线，靠间距分隔 */
  body.atelier #workbench .article-canvas {
    border-left: 0 !important;
  }

  /* 成稿内部：限定阅读宽度并居中，别让文字贴边 */
  body.atelier #workbench #workbench-result .article-canvas-head,
  body.atelier #workbench #workbench-result .version-strip,
  body.atelier #workbench #workbench-result #article-editor,
  body.atelier #workbench #workbench-result .current-work-card {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* 空状态：把居中的大标题收小，降低“模板感” */
  body.atelier #workbench #workbench-result #result-title {
    font-size: 19px !important;
  }
}


@media (min-width: 981px) {
  body.atelier #workbench .conversation-workbench-layout {
    height: clamp(380px, calc(100dvh - 168px), 920px) !important;
    max-height: none !important;
  }
  body.atelier #workbench #studio-details,
  body.atelier #workbench #creation-assistant,
  body.atelier #workbench #workbench-result {
    height: 100% !important;
  }
}


/* ==========================================================================
   空状态去模板化：成稿区给一张“示例稿纸”，左栏给一行密度信息
   纯 CSS，用伪元素注入，不碰 JS 会重写的节点内容
   ========================================================================== */
@media (min-width: 981px) {

  /* 成稿空态：标题不再巨大居中，改成安静的说明 */
  body.atelier #workbench #result-title {
    font-family: var(--sans, "PingFang SC", sans-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2A322B !important;
  }

  /* 说明文字后面接一张示例稿纸 */
  body.atelier #workbench #workbench-decision {
    max-width: 640px !important;
    margin: 10px auto 0 !important;
    padding: 14px 16px !important;
    border: 1px dashed rgba(28, 44, 34, .16) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .55) !important;
  }

  body.atelier #workbench #workbench-decision strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #222A24 !important;
  }

  body.atelier #workbench #workbench-decision p {
    font-size: 11.5px !important;
    line-height: 1.75 !important;
    color: #55605A !important;
    margin-top: 4px !important;
  }

  /* 下面这张“稿纸”只是占位示意，明确标注 */
  body.atelier #workbench #workbench-decision::after {
    content: "示例 · 排版后的样子\A 把公众号写作拆成 8 步\A\A 很多人写公众号，第一段就开始铺垫：行业怎么了、我为什么关心。读者在这一段里没有任何收获，只是被通知了一件事——你还不想说重点。\A\A 我的做法是把第一段当成结论来写。";
    white-space: pre-wrap;
    display: block;
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background:
      repeating-linear-gradient(to bottom, transparent 0 25px, rgba(28, 44, 34, .07) 25px 26px),
      rgba(255, 255, 255, .8);
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: 12px;
    line-height: 26px;
    color: #5A625A;
  }

  /* 左栏：加一条密度信息，别让 220px 空着 */
  body.atelier #workbench #studio-details::after {
    content: "本周 · 4 篇产出 / 平均 6,200 字";
    display: block;
    margin: auto 16px 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(28, 44, 34, .07);
    font-size: 10px;
    color: #8A948C;
    letter-spacing: .01em;
  }
}
