:root {
  /* 跟主站一致的暖色纸感，避免整屏纯白发冷 */
  --ui-bg:      #faf9f5;
  --ui-panel:   #ffffff;
  --ui-sunk:    #f4f2ea;
  --ui-fg:      #14110c;
  --ui-muted:   #5b564c;
  --ui-faint:   #8b8678;
  --ui-line:    #e7e3d8;
  --ui-line-s:  #efece3;
  --ui-accent:  #d24625;      /* 取自 logo */
  --ui-accent-w:#c23d1e;
  --ui-accent-l:#fdf1ec;
  --ui-accent-fg:#ffffff;
  --ui-danger:  #c8442b;
  --ui-ok:      #0f8a5f;
  --ui-radius:  12px;
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-fg);
  font-family: var(--ui-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
button, input, textarea, select { font: inherit; color: inherit; }
/* hidden 属性必须压过组件自身的 display，否则弹窗/视图会漏出来 */
[hidden] { display: none !important; }
button { cursor: pointer; }

/* ---------- 顶栏：与页面同底色，不做白色栏，观感更整体 ---------- */
.top {
  flex: 0 0 auto;
  height: 60px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-bottom: 0;
}
/* 图标与字横排一体，字高不超过图标，否则头重脚轻 */
/* 图标左侧略高，文字右排上下两行 */
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand .logo { width: 32px; height: 32px; flex: 0 0 auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark {
  font-size: 16px; font-weight: 800; letter-spacing: -.01em;
  font-family: "Poppins", "Nunito", "PingFang SC", var(--ui-font);
  background-image: linear-gradient(95deg, #4A6CF7, #8B5CF6 48%, #E0459B);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; white-space: nowrap;
}
.brand-sub {
  font-style: normal; font-size: 10px; font-weight: 500;
  color: var(--ui-faint); letter-spacing: .06em; margin-top: 1px;
}
.top-right { display: flex; gap: 8px; }

.tbtn {
  padding: 7px 14px;
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  border-radius: 9px;
  font-size: 14px;
  transition: .15s;
}
.tbtn:hover { border-color: #d6d0c0; background: var(--ui-sunk); }
.tbtn.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-fg); }
.tbtn.primary:hover { filter: brightness(1.08); }
.tbtn.danger { color: var(--ui-danger); border-color: #f0d3cd; }
.tbtn:disabled { opacity: .5; cursor: not-allowed; }

/* 带图标的顶栏按钮 */
.tbtn.ico { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 7px 15px; }
.tbtn.ico svg { width: 15px; height: 15px; opacity: .62; flex: 0 0 auto; transition: transform .18s, opacity .15s; }
.tbtn.ico:hover svg { opacity: 1; }
.tbtn.ico.is-back:hover svg { transform: translateX(-2px); }

/* ---------- 首屏 ---------- */
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 80px;
  text-align: center;
}
.home-title { font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.home-title .grad {
  font-style: normal;
  background-image: linear-gradient(95deg, #F0447E, #8B5CF6 55%, #4A6CF7);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.home-sub { font-size: 17px; color: var(--ui-muted); margin: 0 0 36px; max-width: 620px; }

.composer {
  width: 100%;
  max-width: 720px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: 0 4px 20px rgba(20, 24, 35, .06);
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within { border-color: #b9bcf0; box-shadow: 0 6px 26px rgba(79, 70, 229, .12); }
.composer textarea {
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.6;
  max-height: 200px;
}
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.composer-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  font-size: 13px;
  color: var(--ui-muted);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: #c9cdd8; color: var(--ui-fg); }
.hint { font-size: 13px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint a { color: var(--ui-accent); cursor: pointer; }
.go {
  flex: 0 0 auto;
  padding: 8px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--ui-accent);
  color: var(--ui-accent-fg);
  font-weight: 600;
  transition: .15s;
}
/* 与旁边的模式按钮同高同圆角，只是保留主色 */
.go.pill {
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  border: 1px solid var(--ui-accent);
  line-height: 1.35;
}
.go:hover { filter: brightness(1.08); }
.go:disabled { opacity: .45; cursor: not-allowed; }

.attach { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.attach .f {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  background: #f2f3f7;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--ui-muted);
}
.attach .f b { font-weight: 600; color: var(--ui-fg); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach .f i { cursor: pointer; font-style: normal; opacity: .55; }
.attach .f i:hover { opacity: 1; color: var(--ui-danger); }

.samples { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 22px; max-width: 720px; }
.sample {
  padding: 7px 14px;
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  border-radius: 20px;
  font-size: 13.5px;
  color: var(--ui-muted);
  transition: .15s;
}
.sample:hover { border-color: var(--ui-accent); color: var(--ui-accent); }

/* ---------- 工作区：左历史 · 中幻灯片 · 右对话 ---------- */
/* 列宽由 layout.js 按用户拖动结果写入 style，这里是首帧兜底 */
.work {
  flex: 1; display: grid;
  grid-template-columns: 206px 6px minmax(0,1fr) 6px 336px;
  min-height: 0;
  background: var(--ui-bg);        /* 与顶栏同底，全屏一个背景色 */
}

/* 左：导航区。与页面同底，靠右侧卡片浮起来形成分界，不压深色 */
.side {
  border-right: 0;
  background: transparent;
  padding: 13px 11px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
}
.side-t {
  font-size: 11px; letter-spacing: .09em;
  color: var(--ui-faint); padding: 2px 6px 0;
  font-weight: 600;
}
.new-chat {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  border-radius: 10px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ui-muted);
  transition: .15s;
  box-shadow: 0 1px 2px rgba(20,17,12,.04);
}
.new-chat:hover { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-l); }
.deck-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; margin: 0 -4px; padding: 0 4px; }
.deck-item {
  position: relative;
  padding: 8px 28px 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s;
}
.deck-item:hover { background: var(--ui-sunk); }
.deck-item.on {
  background: var(--ui-panel);
  box-shadow: inset 3px 0 0 var(--ui-accent), 0 1px 2px rgba(20,17,12,.05);
}
.deck-item.on .n { color: var(--ui-accent); font-weight: 600; }
.deck-item .n { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-item .m { font-size: 11.5px; color: var(--ui-faint); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.deck-item .del {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 21px; height: 21px; border: 0; background: transparent;
  color: var(--ui-faint); border-radius: 6px; opacity: 0; font-size: 14px; line-height: 1;
}
.deck-item:hover .del { opacity: .6; }
.deck-item .del:hover { opacity: 1; background: #fdeeeb; color: var(--ui-danger); }
.deck-item { padding-right: 50px; }
.deck-item .star {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  width: 21px; height: 21px; border: 0; background: transparent;
  color: var(--ui-faint); border-radius: 6px; opacity: 0; font-size: 13px; line-height: 1;
  cursor: pointer; padding: 0;
}
.deck-item:hover .star { opacity: .6; }
.deck-item .star:hover { opacity: 1; background: var(--ui-sunk); color: var(--ui-accent); }
/* 已置顶的常显，否则用户看不出哪些被置顶了 */
.deck-item.starred .star { opacity: 1; color: var(--ui-accent); }
.deck-item .rename {
  width: 100%; font: inherit; color: inherit;
  border: 1px solid var(--ui-accent); border-radius: 5px;
  padding: 1px 5px; background: var(--ui-panel); outline: none;
}
.run-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ui-accent);
  animation: pulse 1.1s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---------- 舞台 ---------- */
/* 中：工作台。整块浮起来，是视线焦点。
   .stage-col 是那条网格列本身，也是「卡片」这层视觉的唯一归属地：
   圆角 / 阴影 / 底色 / 外边距都在它身上。里面自上而下是
   共用工具条 → 进度条 → 两个互斥的 body（旧舞台 .stage / 三栏 #viewerHost）。
   工具条挂在这一层，是因为两种 deck 都要用它——放进任一 body 里，另一种 deck
   就点不到（那正是 STATUS.md 待办 1 那个 bug）。 */
.stage-col {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; width: 100%;
  background: var(--ui-panel);
  border-radius: 16px;
  margin: 0 0 10px;
  box-shadow: 0 1px 3px rgba(20,17,12,.05), 0 8px 24px rgba(20,17,12,.04);
  overflow: hidden;
}
/* 旧 10 版式的滚动舞台，现在只是 .stage-col 里的一个 body：
   卡片那层视觉归 .stage-col，这里只负责把纵向空间分给 deck-scroll 和 tips。 */
.stage {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.stage-head {
  flex: 0 0 auto; height: 60px; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--ui-line-s);
  background: var(--ui-panel);
}
.stage-title { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
.stage-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  flex: 0 0 auto; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
  background: #f0f1f5; color: var(--ui-muted);
}
.badge.run { background: #eef0fe; color: var(--ui-accent); }
.badge.ok { background: #e7f5ef; color: var(--ui-ok); }
.badge.err { background: #fdeeeb; color: var(--ui-danger); }
.stage-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#themeSel { padding: 7px 10px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-panel); }
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(20,24,35,.12);
  padding: 5px; min-width: 168px; z-index: 40;
}
.menu button { display: block; width: 100%; text-align: left; padding: 8px 11px; border: 0; background: transparent; border-radius: 7px; font-size: 14px; }
.menu button:hover { background: #f4f5f8; }
.progress {
  flex: 0 0 auto; padding: 9px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--ui-line-s);
  background: var(--ui-panel);
  font-size: 13px; color: var(--ui-muted);
}
.progress-bar { flex: 1; height: 5px; background: #edeef2; border-radius: 3px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 0; background: var(--ui-accent); border-radius: 3px; transition: width .35s ease; }
.deck-scroll {
  flex: 1; overflow-y: auto; padding: 26px 22px 40px; min-height: 0;
  background: var(--ui-bg);          /* 幻灯片是白的，底色要更沉才托得住 */
}
.slide-wrap {
  position: relative; margin: 0 auto 26px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 3px 16px rgba(20,24,35,.1);
  background: #fff;
  animation: rise .34s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.slide-wrap .no {
  position: absolute; left: 10px; top: 10px; z-index: 5;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(20,24,35,.62); color: #fff;
  font-size: 11.5px; letter-spacing: .04em;
  opacity: 0; transition: opacity .15s;
}
.slide-wrap:hover .no { opacity: 1; }
.slide-wrap .ops { position: absolute; right: 10px; top: 10px; z-index: 5; display: flex; gap: 5px; opacity: 0; transition: opacity .15s; }
.slide-wrap:hover .ops { opacity: 1; }
.slide-wrap .ops button { padding: 4px 9px; border: 0; border-radius: 7px; background: rgba(20,24,35,.62); color: #fff; font-size: 12px; }
.slide-wrap .ops button:hover { background: rgba(20,24,35,.85); }
/* 「还没写到这一页」的统一视觉：斜纹 + 缓慢流动。
   三处共用同一条 keyframes 与同一个纹距（24px 一个循环），所以旧舞台骨架页、
   三栏大屏等待态、缩略图占位看起来是同一种「排队中」，而不是三种不同的空白。
   平移量必须正好等于一个循环宽度，否则动画回头那一帧会看见纹路跳一下。 */
@keyframes stripe-flow { to { background-position: 24px 0; } }
.skel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--ui-muted);
  background: repeating-linear-gradient(-45deg, #f7f8fa, #f7f8fa 12px, #f2f3f6 12px, #f2f3f6 24px);
  animation: stripe-flow 1.5s linear infinite;
}
.skel .lay { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.skel .ti { font-size: 22px; font-weight: 600; color: var(--ui-fg); max-width: 70%; text-align: center; }
.skel .st { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fail-note {
  position: absolute; inset: auto 0 0 0; z-index: 4;
  padding: 9px 14px; background: #fdeeeb; color: var(--ui-danger);
  font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fail-note button { border: 0; background: var(--ui-danger); color: #fff; padding: 4px 12px; border-radius: 7px; font-size: 12.5px; }

/* ---------- 编辑态 ---------- */
[data-path] { transition: background .12s, box-shadow .12s; }
[data-path]:hover { background: rgba(79,70,229,.07); box-shadow: 0 0 0 3px rgba(79,70,229,.07); border-radius: 3px; }
[data-path].is-editing {
  background: rgba(79,70,229,.11);
  box-shadow: 0 0 0 2px var(--ui-accent);
  border-radius: 3px; outline: 0; cursor: text;
}

/* ---------- 大纲流式区 ---------- */
.thinking {
  max-width: 900px; margin: 0 auto 26px;
  padding: 18px 20px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  display: flex; gap: 14px;
}
.thinking-body { min-width: 0; flex: 1; }
.thinking-t { font-weight: 600; margin-bottom: 6px; }
.thinking pre {
  margin: 0; font-size: 12px; line-height: 1.55;
  color: var(--ui-muted);
  white-space: pre-wrap; word-break: break-all;
  max-height: 130px; overflow: hidden;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.dot-run { display: flex; gap: 4px; align-items: center; height: 22px; flex: 0 0 auto; }
.dot-run i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-accent); animation: bounce 1.3s infinite; }
.dot-run i:nth-child(2) { animation-delay: .16s; }
.dot-run i:nth-child(3) { animation-delay: .32s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-6px); opacity: 1; } }
.empty { text-align: center; color: var(--ui-muted); padding: 60px 0; }
.composer-mini {
  flex: 0 0 auto; max-width: none; margin: 0 18px 16px;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 10px 12px; box-shadow: none;
}
.composer-mini textarea { flex: 1; font-size: 14.5px; max-height: 120px; }

/* ---------- 对话框 / 提示 ---------- */
.mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16,18,24,.42);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.dlg {
  width: 100%; max-width: 460px;
  background: var(--ui-panel);
  border-radius: 16px;
  padding: 26px 26px 20px;
  box-shadow: 0 18px 50px rgba(16,18,24,.24);
}
.dlg h2 { margin: 0 0 6px; font-size: 20px; }
.api-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin: 12px 0 10px;
  background: var(--ui-sunk); border-radius: 11px;
}
.api-tabs button {
  border: 0; border-radius: 8px; padding: 7px 12px;
  background: transparent; color: var(--ui-muted); font-weight: 600;
}
.api-tabs button.on {
  background: var(--ui-panel); color: var(--ui-accent);
  box-shadow: 0 1px 4px rgba(20,17,12,.08);
}
.dlg-sub { margin: 0 0 20px; font-size: 13.5px; color: var(--ui-muted); }
.dlg label { display: block; margin-bottom: 15px; font-size: 13.5px; font-weight: 600; }
.dlg input[type=text], .dlg input[type=password] {
  width: 100%; margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--ui-line); border-radius: 9px;
  font-weight: 400; font-size: 14px;
  background: #fbfbfd;
}
.dlg input:focus { outline: 0; border-color: var(--ui-accent); background: #fff; }
.dlg .row { display: flex; gap: 8px; margin-top: 6px; }
.dlg .row input { margin-top: 0; }
.dlg .row .tbtn { flex: 0 0 auto; }
.dlg small { display: block; margin-top: 5px; font-weight: 400; font-size: 12.5px; color: var(--ui-muted); }
.dlg small.ok { color: var(--ui-ok); }
.dlg small.err { color: var(--ui-danger); }
.dlg-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
/* 顶部居中下滑出现，浅绿底更贴合暖色系，不像黑色那样突兀 */
.toast {
  position: fixed; left: 50%; top: 74px;
  z-index: 200;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: #e8f6ee; color: #0d6b48;
  border: 1px solid #bfe6d2;
  border-radius: 20px; font-size: 13.5px; font-weight: 500;
  box-shadow: 0 6px 20px rgba(20,17,12,.10);
  animation: drop .24s cubic-bezier(.2,.8,.3,1) both;
  max-width: 86vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toast::before {
  content: "✓";
  flex: 0 0 auto;
  width: 17px; height: 17px; border-radius: 50%;
  background: #12a06a; color: #fff;
  font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.toast.err {
  background: #fdeeeb; color: #a5331d;
  border-color: #f3cec4;
}
.toast.err::before { content: "!"; background: var(--ui-danger); }

@keyframes drop {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- 打印：一页一张 ---------- */
@media print {
  .top, .side, .stage-head, .progress, .composer-mini, .thinking, .empty { display: none !important; }
  /* .stage-col 要一起解除 flex/定高，否则打印时纸面只剩工具条那一格的高度。
     （PDF 出口本身对新版式 deck 仍是拒绝的，见 STATUS.md 待办 3；这里只保证
     旧 10 版式那条打印链路不因为多套了一层容器而坏掉。） */
  body, .work, .stage-col, .stage { display: block !important; height: auto !important; }
  .deck-scroll { overflow: visible !important; padding: 0 !important; }
  .slide-wrap {
    margin: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    page-break-after: always; break-after: page;
    width: 1280px !important; height: 720px !important;
  }
  .slide-wrap .no, .slide-wrap .ops, .fail-note { display: none !important; }
  .slide { transform: none !important; }
  @page { size: 1280px 720px; margin: 0; }
}

/* ---------- 首屏：参与方式 ---------- */
.mode-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-line-s); }
.mode-lab { flex: 0 0 auto; font-size: 12.5px; color: var(--ui-faint); }
.modes { display: flex; gap: 7px; flex-wrap: wrap; }
.mode {
  text-align: left; padding: 6px 12px;
  border: 1px solid var(--ui-line); border-radius: 9px;
  background: var(--ui-panel); transition: .15s; line-height: 1.35;
}
.mode b { display: block; font-size: 13px; font-weight: 600; }
.mode i { display: block; font-size: 11.5px; font-style: normal; color: var(--ui-faint); }
.mode:hover { border-color: #d6d0c0; background: var(--ui-sunk); }
.mode.on { border-color: var(--ui-accent); background: var(--ui-accent-l); }
.mode.on b { color: var(--ui-accent); }
.mode.on i { color: var(--ui-accent-w); }

/* ---------- 顶栏品牌 ---------- */
.brand span { display: flex; flex-direction: column; line-height: 1.15; }
.brand em { font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--ui-faint); letter-spacing: .04em; }

/* ---------- 风格按钮：做得显眼一点 ---------- */
.theme-btn { display: flex; align-items: center; gap: 7px; padding-left: 10px; }
.theme-btn .swatch {
  width: 15px; height: 15px; border-radius: 5px; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.14);
}
.theme-btn .dc { width: 15px; height: 15px; opacity: .5; }
.theme-menu { min-width: 246px; padding: 6px; }
.theme-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.theme-menu .swatch { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.14); }
.theme-menu .tm-x { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.theme-menu .tm-x b { font-size: 13.5px; font-weight: 600; }
.theme-menu .tm-x i { font-size: 11.5px; font-style: normal; color: var(--ui-faint); }
.theme-menu button.on { background: var(--ui-accent-l); }
.theme-menu button.on b { color: var(--ui-accent); }

/* themePack deck 的「风格」菜单：12 套主题包。
   比旧的 3 项菜单宽一点、并且必须能滚 —— 12 项按旧样式排下来有 500px 高，
   在 900px 高的窗口里会顶出视口，最下面几套永远选不到（那等于又做了一个
   "看得见但用不了"的入口）。 */
.pack-menu { min-width: 290px; padding: 6px; }
.pack-menu .pm-hd {
  font-size: 11.5px; line-height: 1.45; color: var(--ui-faint);
  padding: 5px 8px 7px; border-bottom: 1px solid var(--ui-line-s, var(--ui-line));
  margin-bottom: 4px;
}
.pack-menu .pm-hd b { color: var(--ui-fg); font-weight: 600; }
.pack-menu .pm-list { max-height: min(58vh, 460px); overflow-y: auto; }
.pack-menu .pm-list button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 9px; border: 0; background: transparent;
  border-radius: 7px; text-align: left;
}
.pack-menu .pm-list button:hover { background: #f4f5f8; }
.pack-menu .pm-list button.on { background: var(--ui-accent-l); }
.pack-menu .pm-list button.on b { color: var(--ui-accent); }
/* 缩略图用 16:9，和幻灯片同比例；有真预览图时 paintPreview 会贴上去 */
.pack-menu .pm-shot {
  width: 46px; aspect-ratio: 16/9; flex: 0 0 auto;
  border-radius: 5px; border: 1px solid rgba(0,0,0,.14);
  background-color: var(--ui-sunk);
  /* 与 .pack-cur-thumb 同理：只露墙上封面那一格（100% auto + top） */
  background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
}
.pack-menu .none { padding: 10px; font-size: 12.5px; color: var(--ui-faint); text-align: center; }

/* 导出菜单加说明 */
.menu button b { display: block; font-size: 13.5px; font-weight: 600; }
.menu button i { display: block; font-size: 11.5px; font-style: normal; color: var(--ui-faint); }

/* ---------- 新手提示条 ---------- */
.tips {
  flex: 0 0 auto; margin: 0 14px 12px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 38px 9px 14px; position: relative;
  background: var(--ui-accent-l);
  border: 1px solid #f3d9cf;
  border-radius: 10px;
  font-size: 12.5px; color: var(--ui-muted);
}
.tips-t { font-weight: 700; color: var(--ui-accent); flex: 0 0 auto; }
.tips .tip b { color: var(--ui-fg); }
.tips-x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 0; background: transparent;
  color: var(--ui-faint); border-radius: 6px; font-size: 13px; line-height: 1;
}
.tips-x:hover { background: #f6ded4; color: var(--ui-accent); }

/* ---------- 空态 ---------- */
.empty { text-align: center; color: var(--ui-faint); padding: 80px 0; }
.empty-ico { font-size: 34px; opacity: .45; margin-bottom: 8px; }

/* ---------- 右侧对话面板 ---------- */
/* 右：对话区。同样是浮起的卡片，与工作台并列 */
.chat {
  border-left: 0;
  background: var(--ui-panel);
  border-radius: 16px;
  margin: 0 10px 10px 0;
  box-shadow: 0 1px 3px rgba(20,17,12,.05), 0 8px 24px rgba(20,17,12,.04);
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  /* 不用 overflow:hidden：它会把向上弹的下拉裁掉。
     圆角改由内部头尾自己承担。 */
}
.chat-head { border-radius: 16px 16px 0 0; }
.chat-input { border-radius: 0 0 16px 16px; }
.chat-body:last-child { border-radius: 0 0 16px 16px; }
.chat-head {
  flex: 0 0 auto; height: 56px; padding: 0 15px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--ui-line-s);
  font-weight: 600; font-size: 14px;
}
.chat-mode {
  font-size: 11.5px; font-weight: 500;
  padding: 2px 9px; border-radius: 20px;
  background: var(--ui-accent-l); color: var(--ui-accent);
}
.chat-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 15px 13px 8px;
  display: flex; flex-direction: column; gap: 11px;
  background: var(--ui-bg);
}
.msg { display: flex; gap: 8px; align-items: flex-start; }
.msg.user { justify-content: flex-end; }
.msg .who {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  background: var(--ui-accent); color: #fff;
  font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.bub {
  padding: 8px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.6;
  max-width: 88%; word-break: break-word;
  white-space: pre-wrap;      /* AI 的多行说明按原样换行 */
}
.msg.user .bub { background: var(--ui-accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai .bub { background: var(--ui-sunk); border-bottom-left-radius: 4px; }
/* 答案汇总卡：必须压过 .msg.user .bub 的橙底，否则橙字落橙底上看不见 */
.msg.user .bub.ans { background: var(--ui-sunk); color: var(--ui-fg); padding: 9px 12px; }
.ans-r { display: flex; gap: 8px; justify-content: space-between; font-size: 12.5px; padding: 2px 0; }
.ans-r span { color: var(--ui-faint); flex: 1; min-width: 0; }
.ans-r b { color: var(--ui-accent); flex: 0 0 auto; max-width: 55%; text-align: right; }
.stp { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ui-muted); padding-left: 2px; }
.stp-i {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; margin-top: 2px;
}
.stp.ok .stp-i { background: #e7f5ef; color: var(--ui-ok); }
.stp.err .stp-i { background: #fdeeeb; color: var(--ui-danger); }
.stp.err { color: var(--ui-danger); }
.stp.run .stp-i { background: var(--ui-accent-l); }
.stp span:last-child { flex: 1; min-width: 0; }
.spin {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--ui-accent); border-top-color: transparent;
  animation: sp .7s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }
.mini-bar {
  display: block; height: 3px; margin-top: 5px; width: 100%;
  background: var(--ui-line); border-radius: 2px; overflow: hidden;
}
.mini-bar b { display: block; height: 100%; background: var(--ui-accent); transition: width .3s; }

/* 卡片：提问 / 大纲 */
.card {
  border: 1px solid var(--ui-line); border-radius: 11px;
  background: var(--ui-panel); padding: 12px;
  box-shadow: 0 1px 3px rgba(20,17,12,.04);
}
.card.done { opacity: .72; background: var(--ui-sunk); }
.card-t {
  font-size: 12.5px; font-weight: 700; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card-n { font-weight: 500; color: var(--ui-faint); font-size: 11.5px; }
.qz { margin-bottom: 12px; }
.qz:last-of-type { margin-bottom: 0; }
.qz-q { font-size: 13px; font-weight: 500; margin-bottom: 7px; }
.multi {
  margin-left: 6px; padding: 1px 6px; border-radius: 20px;
  background: var(--ui-sunk); color: var(--ui-faint);
  font-size: 10.5px; font-weight: 400;
}
.qz-o { display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  text-align: left; padding: 5px 10px; line-height: 1.3;
  border: 1px solid var(--ui-line); border-radius: 8px;
  background: var(--ui-panel); transition: .13s;
}
.opt b { display: block; font-size: 12.5px; font-weight: 500; }
.opt i { display: block; font-size: 10.5px; font-style: normal; color: var(--ui-faint); }
.opt:hover:not(:disabled) { border-color: var(--ui-accent); background: var(--ui-accent-l); }
.opt.on { border-color: var(--ui-accent); background: var(--ui-accent); }
.opt.on b { color: #fff; }
.opt.on i { color: rgba(255,255,255,.82); }
.opt:disabled { cursor: default; opacity: .9; }
.qz-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.mini {
  border: 0; background: transparent; padding: 5px 2px;
  font-size: 12px; color: var(--ui-faint); text-decoration: underline;
  text-underline-offset: 3px;
}
.mini:hover { color: var(--ui-accent); }
/* 与旁边的模型选择器同高同圆角 */
/* 与旁边的模型选择器同高同圆角（对方带 icon，行高要对齐） */
.go.sm {
  padding: 3px 16px; font-size: 12px; border-radius: 20px;
  border: 1px solid var(--ui-accent);
  line-height: 1.35; min-height: 27px;
  display: inline-flex; align-items: center;
}

/* 大纲行 */
.ol { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; margin: 0 -2px; padding: 0 2px; }
.ol-r { display: flex; align-items: center; gap: 6px; }
.ol-n { flex: 0 0 auto; width: 18px; text-align: center; font-size: 11px; color: var(--ui-faint); }
input.ol-t {
  flex: 1; min-width: 0; padding: 4px 8px;
  border: 1px solid var(--ui-line); border-radius: 7px;
  font-size: 12.5px; background: var(--ui-panel);
}
input.ol-t:focus { outline: 0; border-color: var(--ui-accent); }
span.ol-t { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
select.ol-l {
  flex: 0 0 auto; width: 76px; padding: 4px;
  border: 1px solid var(--ui-line); border-radius: 7px;
  font-size: 11.5px; background: var(--ui-panel);
}
span.ol-l {
  flex: 0 0 auto; padding: 1px 7px; border-radius: 20px;
  background: var(--ui-sunk); color: var(--ui-faint); font-size: 11px;
}
.ol-x {
  flex: 0 0 auto; width: 20px; height: 20px; border: 0;
  background: transparent; color: var(--ui-faint);
  border-radius: 5px; font-size: 12px; line-height: 1;
}
.ol-x:hover { background: #fdeeeb; color: var(--ui-danger); }

/* 底部输入 */
.chat-input {
  flex: 0 0 auto; border-top: 1px solid var(--ui-line-s);
  padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end;
  background: var(--ui-panel);
}
.chat-input textarea {
  flex: 1; min-width: 0; border: 1px solid var(--ui-line);
  border-radius: 9px; padding: 7px 10px; resize: none;
  font-size: 13.5px; line-height: 1.5; max-height: 110px;
  background: var(--ui-bg);
}
.chat-input textarea:focus { outline: 0; border-color: var(--ui-accent); background: var(--ui-panel); }

/* ---------- 模型下拉（原生 datalist 点不动，改自建） ---------- */
.picker { position: relative; flex: 1; min-width: 0; }
.picker input { width: 100%; padding-right: 34px !important; }
.picker-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; background: transparent;
  color: var(--ui-muted); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.picker-btn svg { width: 16px; height: 16px; }
.picker-btn:hover { background: var(--ui-sunk); color: var(--ui-accent); }
.picker-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px);
  max-height: 240px; overflow-y: auto; z-index: 60;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(20,17,12,.14);
  padding: 5px;
}
.picker-menu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; background: transparent;
  border-radius: 7px; font-size: 13px; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-menu button:hover { background: var(--ui-sunk); }
.picker-menu button.on { background: var(--ui-accent-l); color: var(--ui-accent); font-weight: 600; }
.picker-menu .none { padding: 10px; font-size: 12.5px; color: var(--ui-faint); text-align: center; }

@media (max-width: 1180px) {
  .work { grid-template-columns: 0 0 minmax(0,1fr) 6px 310px !important; }
  .side, #gutterL { display: none !important; }
}
@media (max-width: 900px) {
  .work { grid-template-columns: 1fr !important; grid-template-rows: 1fr auto; }
  .gutter, .unfold { display: none !important; }
  .chat { border-left: 0; border-top: 1px solid var(--ui-line); max-height: 46vh; }
  .home-title { font-size: 27px; }
  .home-sub { font-size: 15px; }
}

/* ---------- 首屏底栏：模型 / 模式 / 生成 ---------- */
.composer-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.chip.pick {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--ui-line); background: var(--ui-panel);
  color: var(--ui-muted); cursor: pointer;
}
.chip.pick svg { width: 13px; height: 13px; opacity: .55; }
.chip.pick:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.chip.pick.warn { border-color: #f0c9bc; color: var(--ui-accent); background: var(--ui-accent-l); }
.chip.pick.sm { padding: 3px 9px; font-size: 12px; }
.chip { border-radius: 20px; }
.mode-pick { padding: 6px 14px; }
.mode-pick b { font-weight: 600; color: var(--ui-fg); font-size: 13px; }
.mode-pick:hover b { color: var(--ui-accent); }

.pick-menu { min-width: 190px; }
.pick-menu.mode-menu { min-width: 232px; }
.pick-menu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; background: transparent;
  border-radius: 7px; font-size: 13px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-menu button b { display: block; font-size: 13px; font-weight: 600; }
.pick-menu button i {
  display: block; font-size: 11.5px;
  font-style: normal; font-weight: 400;   /* 描述不跟着加粗 */
  color: var(--ui-faint); white-space: normal;
}
.pick-menu button.on i { font-weight: 400; color: var(--ui-muted); }
.pick-menu button:hover { background: var(--ui-sunk); }
.pick-menu button.on { background: var(--ui-accent-l); color: var(--ui-accent); font-weight: 600; }
.pick-menu button.on b { color: var(--ui-accent); }
.pick-menu button.soft { color: var(--ui-faint); font-size: 12.5px; }
.pick-menu .none { padding: 9px 10px; font-size: 12.5px; color: var(--ui-faint); }
.menu-sep { height: 1px; background: var(--ui-line); margin: 5px 4px; }
/* 右侧对话区的下拉要往上弹，否则被输入框挡住 */
.menu-wrap.up .pick-menu { top: auto; bottom: calc(100% + 6px); }

/* ---------- 示例区 ---------- */
.samples-wrap { margin-top: 22px; width: 100%; max-width: 720px; }
.samples-t {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--ui-faint); margin-bottom: 8px; padding: 0 2px;
}
.reroll {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--ui-faint);
  font-size: 12.5px; padding: 3px 6px; border-radius: 7px;
}
.reroll svg { width: 13px; height: 13px; }
.reroll:hover { color: var(--ui-accent); background: var(--ui-accent-l); }
/* 固定 2 + 1 布局：前两条并排，第三条独占一行居中 */
.samples {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* 长句放不下两条并排，改纵向紧凑排列；宽度随内容、居中，行距压紧 */
.sample {
  max-width: 100%;
  text-align: center; padding: 7px 16px;
  border: 1px solid var(--ui-line); background: var(--ui-panel);
  border-radius: 20px; font-size: 13px; color: var(--ui-muted);
  transition: transform .16s, border-color .15s, background .15s, color .15s;
  line-height: 1.4;
}
.sample:hover {
  border-color: var(--ui-accent); color: var(--ui-fg);
  background: var(--ui-accent-l); transform: translateY(-1px);
}

/* ---------- 设置里的常用模型 ---------- */
.saved { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.saved-none { font-size: 12.5px; color: var(--ui-faint); font-weight: 400; }
.tagm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px; border-radius: 8px;
  border: 1px solid var(--ui-line); background: var(--ui-panel);
  font-size: 12.5px; font-weight: 400; cursor: pointer;
}
.tagm b { font-weight: 500; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagm i { font-style: normal; color: var(--ui-faint); font-size: 11px; padding: 0 2px; }
.tagm i:hover { color: var(--ui-danger); }
.tagm:hover { border-color: #d6d0c0; }
.tagm.on { border-color: var(--ui-accent); background: var(--ui-accent-l); }
.tagm.on b { color: var(--ui-accent); font-weight: 600; }

/* ---------- 右侧输入区底栏 ---------- */
.chat-input { flex-direction: column; align-items: stretch; gap: 7px; }
.chat-input-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- 侧栏返回 ---------- */
.back {
  flex: 0 0 auto; padding: 7px 12px; text-align: left;
  border: 1px solid var(--ui-line); background: var(--ui-panel);
  border-radius: 9px; font-size: 13px; color: var(--ui-muted); transition: .15s;
}
.back:hover { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-l); }

/* ---------- 三栏拖动 ---------- */
.gutter {
  position: relative; cursor: col-resize;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none;
}
/* 视觉上只是一条淡痕，热区比看起来宽，好点中 */
.gutter i {
  width: 2px; height: 42px; border-radius: 2px;
  background: transparent; transition: background .15s, height .15s;
}
.gutter:hover i, .gutter.on i { background: var(--ui-accent); height: 64px; }
.gutter::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: -4px; right: -4px;      /* 往两边各扩 4px，热区共 14px */
}
/* 收起侧栏：把左栏和它的拖条整个移出布局，中间才吃得到那块宽度 */
.work.is-folded > .side,
.work.is-folded > #gutterL { display: none; }
.work.is-folded { padding-left: 22px; }   /* 给左侧那条展开把手让位 */

body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { cursor: col-resize !important; }
body.resizing .tab { cursor: pointer !important; }

/* 侧栏标题行 + 收起按钮 */

.fold {
  width: 24px; height: 24px; border: 0; background: transparent;
  color: var(--ui-faint); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  opacity: .45; transition: .15s;
}
.fold svg { width: 15px; height: 15px; }
.side:hover .fold { opacity: .8; }
.fold:hover { opacity: 1 !important; background: var(--ui-sunk); color: var(--ui-accent); }

/*
 * 收起后的展开把手。
 * 它是 .work 的子元素，必须用 position:fixed 脱离网格流——
 * 否则会占掉一个网格列，把后面的 stage / chat 整体挪位。
 */
/* 收起 / 展开共用同一款竖条把手，只有箭头方向不同 */
.tab {
  width: 18px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--ui-line);
  background: var(--ui-panel); color: var(--ui-faint);
  transition: width .15s, color .15s, border-color .15s, background .15s, opacity .15s;
}
.tab svg { width: 13px; height: 13px; }
.tab { cursor: pointer; }        /* 别继承拖动条的 col-resize */
.tab:hover { color: var(--ui-accent); border-color: var(--ui-accent); background: var(--ui-accent-l); }

/* 收起：浮在左拖动条上，鼠标靠近才显形，免得干扰拖动 */
.tab-fold {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(20,17,12,.08);
  opacity: 0; z-index: 12;
}
.gutter:hover .tab-fold, .side:hover ~ #gutterL .tab-fold { opacity: 1; }
.tab-fold:hover { width: 22px; }

/* 展开：贴在屏幕最左边缘 */
.tab-unfold {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 40;
  border-left: 0; border-radius: 0 9px 9px 0;
  box-shadow: 2px 0 8px rgba(20,17,12,.06);
}
.tab-unfold:hover { width: 24px; }

/* ---------- 重写弹窗 ---------- */
.dlg.sm { max-width: 420px; }
.dlg textarea {
  width: 100%; margin-top: 4px;
  padding: 9px 11px; resize: none;
  border: 1px solid var(--ui-line); border-radius: 9px;
  font-size: 13.5px; line-height: 1.55; font-weight: 400;
  background: var(--ui-bg);
}
.dlg textarea:focus { outline: 0; border-color: var(--ui-accent); background: var(--ui-panel); }
.redo-tips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rtip {
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--ui-line); background: var(--ui-panel);
  font-size: 12px; color: var(--ui-faint); transition: .13s;
}
.rtip:hover { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-l); }

/*
 * 右侧下拉的遮挡问题：
 * .chat 有 overflow:hidden（为了圆角裁切），向上弹的菜单一旦超出它的边界
 * 就会被裁掉，看起来像"被 PPT 区盖住"。z-index 在这里无解——
 * 真正的修法是让输入区自成层叠上下文，并允许菜单溢出。
 */
.chat { position: relative; z-index: 5; }
.chat-input { position: relative; z-index: 60; overflow: visible; }
/* menu-wrap 必须保持 relative——改成 static 会让按钮塌成 0×0 点不中 */
.chat-input .menu-wrap { position: relative; }
.chat-input .menu-wrap.up .pick-menu {
  top: auto; bottom: calc(100% + 6px);
  left: 0; right: auto; width: 190px;
  z-index: 80;
  max-height: 200px; overflow-y: auto;
}
.pick-menu { max-height: 240px; overflow-y: auto; }

/* ---------- 新建演示：矮一点，与右侧舞台头对齐 ---------- */
.side { padding-top: 0; }
.new-chat {
  height: 38px; padding: 0 14px;
  margin-top: 11px;                   /* 让按钮中线对上舞台标题 */
  display: flex; align-items: center; justify-content: center;
}

/* ---------- 对话头的模式切换 ---------- */
.chat-mode {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500;
  padding: 3px 9px; border-radius: 20px;
  background: var(--ui-accent-l); color: var(--ui-accent);
  border: 1px solid transparent;
  transition: .15s;
}
.chat-mode svg { width: 12px; height: 12px; opacity: .65; }
.chat-mode:hover { border-color: var(--ui-accent); }
#chatModeMenu { right: 0; left: auto; min-width: 232px; }

/* ---------- 对话输入区左侧工具 ---------- */
.bar-left { display: flex; align-items: center; gap: 6px; }
.bar-left .chip.pick { cursor: pointer; }
.bar-left label.chip { padding: 3px 10px; gap: 4px; }
.bar-left label.chip svg { width: 13px; height: 13px; opacity: .6; }
.bar-left label.chip:hover svg { opacity: 1; }

/* ---------- 附件条 ---------- */
.attach .f {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 6px;
  background: var(--ui-sunk);
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  font-size: 12.5px; color: var(--ui-muted);
  max-width: 100%;
}
.attach .f img {
  width: 22px; height: 22px; object-fit: cover;
  border-radius: 4px; flex: 0 0 auto;
}
.attach .f b {
  font-weight: 500; color: var(--ui-fg);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach .f u {
  text-decoration: none; font-size: 10.5px;
  padding: 1px 5px; border-radius: 20px;
  background: var(--ui-panel); color: var(--ui-faint);
  flex: 0 0 auto;
}
.attach .f i { cursor: pointer; font-style: normal; opacity: .5; font-size: 11px; padding: 0 1px; }
.attach .f i:hover { opacity: 1; color: var(--ui-danger); }
.attach.mini { padding: 0 0 2px; gap: 5px; }
.attach.mini .f { font-size: 12px; }
.attach.mini .f b { max-width: 110px; }

/* 确认问题里的自定义答案输入 */
.qz-c { margin-top: 6px; }
.qz-c input {
  width: 100%; font: inherit; font-size: 12.5px;
  padding: 6px 9px; border-radius: 8px;
  border: 1px dashed var(--ui-line); background: transparent;
  color: var(--ui-fg); outline: none;
  transition: border-color .12s, background .12s;
}
.qz-c input::placeholder { color: var(--ui-faint); }
.qz-c input:focus { border-style: solid; border-color: var(--ui-accent); background: var(--ui-panel); }
.qz-c.done { font-size: 12.5px; color: var(--ui-fg); padding: 4px 0 0; }
/* 单选题里手填了内容，预设按钮就淡出表示不再生效 */
.opt.dim { opacity: .38; }

/* ========== P2 viewer 三栏布局 ========== */
/* .stage-col 里与旧舞台互斥的那个 body，内部三栏用 flex 横排。
   圆角 / 阴影 / 底色都不在这里了——那层视觉归 .stage-col，它在工具条下方，
   自己只要把剩下的纵向空间吃满。原来这里复制了一份卡片样式，是因为它当年
   直接顶替 .stage 占那条网格列；现在两者同为兄弟 body，再画一遍会出现
   「卡片里套卡片」的双层圆角。 */
.v-wrap {
  flex: 1; display: flex; min-width: 0; min-height: 0; width: 100%;
  overflow: hidden;
}
.v-rail {
  width: 192px; flex: 0 0 auto; overflow-y: auto; overflow-x: hidden;
  padding: 12px 8px; background: var(--ui-sunk); border-right: 1px solid var(--ui-line);
}
.rail-card {
  position: relative; padding: 3px; margin-bottom: 6px;
  border: 2px solid transparent; border-radius: 8px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.rail-card[aria-current="true"] { border-color: var(--ui-accent); background: var(--ui-panel); }
.rail-thumb-frame {
  width: 100%; aspect-ratio: 16/9; overflow: hidden;
  border-radius: 6px; background: #fff; contain: layout paint style;
}
.rail-thumb {
  position: relative; width: 100%; height: 100%; aspect-ratio: 16/9;
  overflow: hidden; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.rail-thumb > .rail-thumb-content {
  position: absolute !important; left: 0 !important; top: 0 !important;
  width: 1920px !important; height: 1080px !important;
  max-width: none !important; max-height: none !important;
  transform: translate(var(--thumb-x, 0px), var(--thumb-y, 0px)) scale(var(--thumb-scale, .1)) !important;
  transform-origin: top left !important;
}
.rail-thumb-fail {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 6px; text-align: center; font-size: 9px; color: var(--ui-danger);
  background: repeating-linear-gradient(-45deg, #fff7f5, #fff7f5 8px, #fdeeeb 8px, #fdeeeb 16px);
}
/* 还没截到图的缩略图里那行标题占位（renderRail 写入，captureThumb 会整块换掉）。
   斜纹与大屏等待态同源（见 stripe-flow），让「这页还在排队」在轨道和大屏上是
   同一种表达。纹距按缩略图尺寸缩到 12px，24px 在 150×84 的格子里只剩三四道，
   看着像脏了而不像纹理。 */
.rail-thumb-hint {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 6px; box-sizing: border-box; text-align: center;
  font-size: 9px; line-height: 1.35; color: var(--ui-faint);
  overflow: hidden;
  /* 色差刻意压到几乎看不出（fa→f6，两级）：轨道上五六个格子是并排的，
     大屏那种 fa→f2 的对比在这里会连成一片灰斑，看着像界面脏了而不像「排队中」。
     纹理只需要能感觉到在动，不需要看清每一道。 */
  background: repeating-linear-gradient(-45deg, #fafbfc, #fafbfc 6px, #f6f7f9 6px, #f6f7f9 12px);
  animation: thumb-stripe-flow 1.8s linear infinite;
}
@keyframes thumb-stripe-flow { to { background-position: 12px 0; } }
.rail-label { font-size: 10px; text-align: center; color: var(--ui-faint); margin-top: 2px; }

.v-main {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: var(--ui-bg); overflow: hidden; position: relative;
}
.v-page {
  /* 1920×1080 缩放到容器宽度，按 16:9 等比。
     第二项是**高度预算**：宽了会被 .v-main 的 overflow:hidden 从下面切掉，
     所以按可用高度反算出宽度上限。减掉的是这一列上方所有不属于大屏的东西——
     顶栏 60px + 共用工具条 60px + 卡片下边距等约 20px。
     工具条从 .stage 内部提到 .stage-col 之后，它占的 60px 是新增的开销，
     这个常量必须跟着从 80px 加到 140px：不改的话，在又扁又宽的窗口
     （高度先触限，例如 2560×800）下页面底部会被裁掉一条。 */
  width: min(100%, calc(100vh - 140px) * 16 / 9);
  aspect-ratio: 16/9;
  background: #fff; border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,.12);
  transition: opacity .22s ease-out;
  overflow: hidden; position: relative;
  --deck-scale: 1;   /* viewer.js 的 syncScale 实时改写，兜底 1 免得变量缺失时整页不见 */
}
/* runtime 渲染出来的那棵子树是按 1920×1080 画的（client-runtime.jsx:1134 会
   显式把它钉成这个尺寸），.v-page 却只有几百像素宽。不缩就会被 .slide 的
   overflow:hidden 裁成左上角一块。照抄上游宿主 template-swiss.html:1829 的做法：
   给 root 固定 1920×1080，再整只 scale 下去，内部所有排版尺寸都不用动。
   作用域限定在 .v-page 内：缩略图轨道里的克隆由 viewer.js 按 rail-thumb
   实际 content box 独立 contain，旧舞台网格里的 .slide 也有自己的 transform，
   一刀切会打架。 */
.v-page .imported-theme-root {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  overflow: hidden;
  transform: scale(var(--deck-scale));
  transform-origin: top left;
}
/* 宿主接管的图片槽在拖入时的高亮。只画 outline，不碰 background/border——
   槽的底色是各主题自己的（有深有浅），改了会在 12 套配色里各花各的。
   注：runtime 也会给槽挂一个 is-dashi-drag-over，但那个类在 12 个 bundle 和
   所有 CSS 里都没有任何样式规则（搜过），纯粹是个状态标记，不存在两圈高亮
   叠在一起的问题。viewer 的 onSlotDrop 会顺手把它擦掉，免得留成死状态。 */
.v-page .is-host-drag-over {
  outline: 3px solid var(--ui-accent, #4c8dff);
  outline-offset: -3px;
}

/* 分页器是 fixed 居中的浮条，底边由 --pager-bottom 决定（app.js 的 syncPagerOffset
   在提示条显隐时改写它）。不写死 16px 是因为提示条也在底部：两者叠在一起时，浮条
   压住的正好是提示条右半截那句「重写本页…」，等于把功能又藏了一次。
   为什么由 JS 算而不是 CSS :has()：提示条高度会随窗口宽度换行而变（它是 flex-wrap
   的横条），固定的让位距离在窄窗口下仍会重叠。 */
.v-pager {
  position: fixed; bottom: var(--pager-bottom, 16px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); z-index: 50;
}
.v-pager button {
  width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ui-fg); font-size: 13px; cursor: pointer;
}
.v-pager button:disabled { opacity: .3; cursor: default; }
/* 重写按钮比两个翻页箭头重要，但又不该抢过导出：给文字宽度和一条分隔，
   视觉上归到分页器里，而不是又一个漂在画面上的悬浮件。 */
.v-redo {
  width: auto !important; padding: 0 10px; margin-left: 4px;
  border-left: 1px solid var(--ui-line) !important; border-radius: 0 6px 6px 0 !important;
  font-size: 12px; color: var(--ui-accent) !important; font-weight: 600;
}
.v-redo:hover:not(:disabled) { background: var(--ui-accent-l) !important; }
.v-pager button:hover:not(:disabled) { background: var(--ui-sunk); }
.v-pager span { font-size: 12px; color: var(--ui-faint); min-width: 48px; text-align: center; }

/* 右：控件控制台。与左栏 rail 呼应，固定宽度，跟随内容滚动 */
.v-console {
  width: 280px; flex: 0 0 auto; overflow-y: auto; overflow-x: hidden;
  padding: 12px 14px; background: var(--ui-panel); border-left: 1px solid var(--ui-line);
}

/* ========== P2 console 控件 ========== */
.console-title { font-size: 13px; font-weight: 600; padding: 8px 0 4px; color: var(--ui-fg); border-bottom: 1px solid var(--ui-line); margin-bottom: 6px; }
.ctrl { margin-bottom: 10px; }
.ctrl-lbl { font-size: 11.5px; color: var(--ui-faint); margin-bottom: 3px; }
.ctrl-row { display: flex; align-items: center; gap: 8px; }
.ctrl-row input[type=range] { flex: 1; height: 18px; accent-color: var(--ui-accent); cursor: pointer; }
.ctrl-val { font-size: 12px; min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.ctrl-choice-row { display: flex; gap: 4px; flex-wrap: wrap; }
.ctrl-choice {
  padding: 4px 10px; border: 1px solid var(--ui-line); border-radius: 6px;
  background: transparent; font-size: 12px; cursor: pointer; transition: all .12s;
}
.ctrl-choice.on { border-color: var(--ui-accent); background: var(--ui-panel); color: var(--ui-accent); font-weight: 600; }
.pp-switch { width: 40px; height: 22px; border: 0; border-radius: 11px; background: var(--ui-faint); position: relative; cursor: pointer; transition: background .2s; padding: 0; }
.pp-switch.on { background: var(--ui-accent); }
.pp-switch .pp-track { position: absolute; inset: 0; border-radius: 11px; }
.pp-switch .pp-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.pp-switch.on .pp-knob { transform: translateX(18px); }

/* ========== 主题墙：首页入口 ========== */
/* 宽度对齐 .composer / .samples-wrap 的 720px，三者是同一列 */
.pack-bar {
  width: 100%; max-width: 720px; margin-top: 14px;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.pack-bar,
.pack-grid {
  /* 仅供主题包选择区使用，不改全局 --ui-accent。最亮端 #1d4ed8 与白字
     对比度 6.7:1，整条渐变均高于 WCAG 普通文本 4.5:1。 */
  --pack-ai-gradient: linear-gradient(135deg, #5b21b6 0%, #4338ca 48%, #1d4ed8 100%);
  --pack-ai-edge: #4338ca;
  --pack-ai-ring: rgba(67,56,202,.24);
}
.pack-cur {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border: 1px solid var(--ui-line);
  background: var(--ui-panel); border-radius: 12px;
  text-align: left; transition: border-color .15s, box-shadow .15s;
}
.pack-cur:hover { border-color: var(--ui-accent); box-shadow: 0 2px 10px rgba(20,24,35,.06); }
.pack-cur:focus-visible {
  outline: 3px solid var(--ui-accent-l); outline-offset: 2px; border-color: var(--ui-accent);
}
.pack-cur.is-auto:hover { border-color: var(--pack-ai-edge); box-shadow: 0 3px 14px var(--pack-ai-ring); }
.pack-cur.is-auto:focus-visible {
  outline-color: var(--pack-ai-ring); border-color: var(--pack-ai-edge);
}
.pack-cur > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ui-faint); margin-left: auto; }
/* 缩略图：16:9，与幻灯片同比例，让人一眼知道这是"一页长什么样" */
/* 预览图是一面 960×813 的「墙」：上面整幅是封面页（960×540，正好 16:9），
   下面并排两个小格（数据图表 / 结构排版）。见 dashi/previews/index.json 的 wall 字段。
   小缩略图只想露封面那一格，所以用 `100% auto` + `top`：
   图按盒宽缩放后总高 = 盒宽×813/960，而 16:9 盒子只露出盒宽×9/16 = 盒宽×540/960
   —— 与封面格的高度**恰好相等**，于是露出来的就是精确的封面格，不多不少。
   用 `cover` 会把 1.181 的图裁进 1.778 的盒子，居中裁出一条横带（封面被切一半）。 */
.pack-cur-thumb {
  width: 56px; aspect-ratio: 16/9; flex: 0 0 auto;
  border-radius: 6px; overflow: hidden;
  background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
  border: 1px solid var(--ui-line-s, var(--ui-line));
  position: relative;
}
/* 首页小方块与主题墙 AI 卡共用同一品牌渐变。星芒用 CSS 绘制，
   不增加图片请求；尺寸过小时只保留一个轻量高光。 */
.pack-cur.is-auto .pack-cur-thumb {
  background-image: var(--pack-ai-gradient) !important;
  border-color: rgba(255,255,255,.38);
}
.pack-cur.is-auto .pack-cur-thumb::after {
  content: ""; position: absolute; width: 13px; height: 13px; top: 4px; right: 5px;
  background: rgba(255,255,255,.88); clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.55));
}
.pack-cur-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pack-cur-txt b { font-size: 13.5px; font-weight: 600; }
.pack-cur-txt i {
  font-style: normal; font-size: 11.5px; color: var(--ui-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 「点击挑选」提示：靠右贴着箭头，用强调色，让这一条看起来就是可点的。
   它替掉的是原来那条 12 格横向滚动缩略图带 —— 每格 62px 什么也看不清，
   还多一条滚动条。铺开展示 12 套是弹窗的职责，这一条只说清「当前哪套 + 能点」。 */
.pack-cur-hint {
  flex: 0 0 auto; margin-left: auto;
  font-size: 12px; color: var(--ui-accent);
  background: var(--ui-accent-l); padding: 3px 10px; border-radius: 20px;
  white-space: nowrap; transition: background .15s;
}
.pack-cur:hover .pack-cur-hint { background: #f6ded4; }
/* 提示已经占了 margin-left:auto，箭头跟在它后面就不需要再推一次 */
.pack-cur > svg { margin-left: 0; }

/* ========== 主题墙：展示墙弹窗 ========== */
/* 比其它对话框宽得多：这面墙的意义就是"一眼看到全部 12 套"，
   挤成两列就得上下翻，等于回到"选完才知道长什么样"。 */
.pack-dlg { max-width: 1060px; width: calc(100vw - 48px); }
.pack-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 12px; margin: 4px 0 6px;
  max-height: min(62vh, 620px); overflow-y: auto; padding: 2px;
}
.pack-card {
  display: flex; flex-direction: column; gap: 0;
  border: 2px solid var(--ui-line); border-radius: 12px;
  overflow: hidden; cursor: pointer; background: var(--ui-panel);
  padding: 0; text-align: left; transition: border-color .14s, transform .14s, box-shadow .14s;
}
.pack-card:hover { border-color: var(--ui-accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,24,35,.09); }
.pack-card:focus-visible {
  outline: 3px solid var(--ui-accent-l); outline-offset: 2px; border-color: var(--ui-accent);
}
.pack-card[aria-pressed="true"] { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-l); }
.pack-card.is-auto:hover { border-color: var(--pack-ai-edge); box-shadow: 0 7px 20px var(--pack-ai-ring); }
.pack-card.is-auto:focus-visible {
  outline-color: var(--pack-ai-ring); border-color: var(--pack-ai-edge);
}
.pack-card.is-auto[aria-pressed="true"] {
  border-color: var(--pack-ai-edge); box-shadow: 0 0 0 3px var(--pack-ai-ring);
}
/* 展示墙的大卡：这里要露**整面墙**（封面 + 数据图表 + 结构排版三格），
   因为"这套主题适合数据报告还是品牌故事"光看封面判断不出来。
   所以比例用墙自己的 960/813，不是 16/9 —— 用 16/9 会把下面两格裁掉，
   等于又回到"只能看封面猜"。contain 保证整幅都在，不裁任何一格。 */
.pack-shot {
  width: 100%; aspect-ratio: 960/813; flex: 0 0 auto;
  background-color: var(--ui-sunk);
  background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
  border-bottom: 1px solid var(--ui-line-s, var(--ui-line));
  position: relative;
}
/* 预览图没生成/没传时，这层文字兜底顶上来 —— 展示墙不依赖图片资产存在 */
.pack-shot-fb {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.pack-shot-fb b { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.pack-shot-fb i { font-style: normal; font-size: 10.5px; opacity: .82; }
.pack-meta { padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pack-meta .pm-t { display: flex; align-items: baseline; gap: 7px; }
.pack-meta .pm-t b { font-size: 14px; font-weight: 600; }
.pack-meta .pm-t span { font-size: 11px; color: var(--ui-faint); flex: 0 0 auto; }
.pack-meta .pm-s {
  font-size: 11.5px; color: var(--ui-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pack-meta .pm-a { font-size: 10.5px; color: var(--ui-faint); }
/* AI 自选卡：与首页入口小方块共用 pack 区域专属品牌渐变。 */
.pack-card.is-auto .pack-shot {
  background: var(--pack-ai-gradient);
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.pack-card.is-auto .pack-shot::before,
.pack-card.is-auto .pack-shot::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
}
.pack-card.is-auto .pack-shot::before {
  width: 54%; aspect-ratio: 1; top: -22%; right: -10%;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 68%);
}
.pack-card.is-auto .pack-shot::after {
  width: 23px; height: 23px; top: 18%; right: 18%; border-radius: 0;
  background: rgba(255,255,255,.86); clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter: drop-shadow(0 0 7px rgba(255,255,255,.5));
}
.pack-card.is-auto .pack-shot b {
  color: #fff; font-size: 16px; font-weight: 700; text-shadow: 0 1px 2px rgba(20,16,80,.35);
}
.pack-foot-hint { font-size: 12px; color: var(--ui-faint); margin-right: auto; }
@media (max-width: 620px) {
  .pack-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pack-dlg { width: calc(100vw - 20px); }
}