/* ─────────────────────────────────────────────────────────────
   夜羽·日记 —— 桌面宠物（网页版）
   移植自 PC2005-cloud/dsh-pet（代码 MIT；素材禁止商用，形象 CC BY-NC-SA 4.0）
   仓库：https://github.com/PC2005-cloud/dsh-pet
   ───────────────────────────────────────────────────────────── */

.yp-root{
  --yp-w:380px;
  position:fixed;left:0;top:0;
  width:var(--yp-w);
  height:calc(var(--yp-w) * 9 / 16);
  pointer-events:none;
  z-index:239;                     /* 在页面内容(≤200)之上、右上角音乐 dock(250) 之下 */
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
  -webkit-user-select:none;user-select:none;
}

.yp-stage{
  position:absolute;inset:0;
  transition:transform .16s ease;
  will-change:transform;
}

.yp-v{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
  -webkit-user-drag:none;
}
.yp-v.is-front{opacity:1}

/* ── 兜底：解不出 VP9 透明通道的浏览器 ───────────────────────
   Safari / iOS WebKit、部分硬件解码路径会丢掉 VP9 的 alpha 平面，
   整只宠物变成一个黑方块（透明区被当成不透明的黑）。pet.js 里用
   canvas 探到这种情况就给 root 加 .yp-noalpha：
     · 两条 video 只做「隐身」，继续播 —— 位移/节奏都靠它的
       currentTime 驱动，停掉会把走动逻辑弄死；
     · 上面盖一张静态图 still.png（同一帧，带真透明），
       至少不再是黑框。 */
.yp-still{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  display:none;
  pointer-events:none;
  -webkit-user-drag:none;
}
.yp-noalpha .yp-v{opacity:0 !important}
.yp-noalpha .yp-still{display:block}

/* 只有角色身上那块才吃鼠标，舞台两边的空白放过去 */
.yp-hit{
  position:absolute;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.yp-root.yp-dragging .yp-hit{cursor:grabbing}

/* ── 右键菜单 ───────────────────────────────────────────────
   106 个动作不能平铺：改成「标题 + 搜索 + 分类页签 + 滚动网格 + 工具条」，
   高度锁在视口内，列表自己滚，工具项永远在底部可见。
   z-index 要比右上角音乐 dock（250）高：否则菜单顶部会被它压住一块。 */
.yp-menu{
  position:fixed;z-index:380;display:none;
  flex-direction:column;
  width:350px;max-width:calc(100vw - 16px);
  max-height:min(84vh,680px);
  padding:0;
  background:var(--paper,#fdfcf9);
  color:var(--ink,#2e2a25);
  border:1px solid var(--line2,#d9d1c4);
  border-radius:14px;
  box-shadow:var(--shadow,0 10px 30px rgba(90,68,44,.16));
  font-family:var(--yp-font,SimHei,"Heiti SC","Microsoft YaHei",sans-serif);
  font-size:14px;line-height:1.45;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
.yp-menu.on{display:flex;animation:yp-pop .14s ease}
/* 展开态：动作名一多，350×620 只够看十来行。撑大到接近整个视口高，
   一次多看好几列，不用一格一格往下滚。摆位由 pet.js 的 placeMenu() 重算。
   这里给固定 height（不是只给 max-height）：菜单是 flex 列，高度 auto 时
   列表的 flex:1 分不到剩余空间，撑不到底。 */
.yp-menu.yp-big{
  width:min(412px,calc(100vw - 16px));
  height:min(92vh,760px);
  max-height:92vh;
}
@keyframes yp-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── 区块小标题 ────────────────────────────────────────────
   三块大功能（AI / 点播动作 / 猫的设定）各有一个抬头，
   让人先知道这堆按钮是干什么的，再决定点哪个。 */
.yp-msec{
  display:flex;align-items:baseline;gap:8px;
  padding:9px 10px 6px;
  min-width:0;
}
.yp-msec-t{
  flex:0 0 auto;
  font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--accent-ink,#8f4a2c);
}
.yp-msec-n{
  margin-left:auto;min-width:0;
  font-size:11px;color:var(--ink3,#a49b8f);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* AI 一栏：整组置顶，单独成块。一条下边线把它跟「点播动作」隔开 ——
   上面是干活，下面是玩，混在一起就得先翻一百多个动画名才找得到。 */
.yp-mairow{
  display:flex;flex-direction:column;gap:5px;
  padding:0 8px 9px;
  border-bottom:1px solid var(--line,#e8e1d6);
  background:var(--bg,#faf7f2);
}
.yp-mairow .yp-msec{padding:12px 2px 4px}
/* 每个入口都有自己的框：以前三行纯文字贴在一起，分不出哪行是按钮 */
.yp-mairow button{
  display:block;width:100%;text-align:left;
  padding:7px 11px;
  border:1px solid var(--line2,#ddd4c6);
  background:var(--paper,#fdfcf9);
  border-radius:9px;color:var(--ink,#2e2a25);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.yp-mairow button:hover{
  background:var(--accent-soft,#f6e7de);
  border-color:var(--accent,#c8794f);
  color:var(--accent-ink,#8f4a2c);
}
.yp-mairow button:disabled{opacity:.42;cursor:default}
.yp-mairow button:disabled:hover{background:var(--paper,#fdfcf9);border-color:var(--line2,#ddd4c6);color:var(--ink,#2e2a25)}
/* 第一项是主入口，给它一点重量，让人一眼知道「从这儿开始」 */
.yp-mairow button[data-act="write"]{
  border-color:var(--accent,#c8794f);
  background:var(--accent-soft,#f6e7de);
  color:var(--accent-ink,#8f4a2c);
}

.yp-mhd{
  display:flex;align-items:baseline;gap:8px;
  padding:9px 11px 5px;
}
.yp-mttl{font-size:12.5px;font-weight:600;letter-spacing:.02em}
.yp-mcnt{margin-left:auto;font-size:11.5px;color:var(--ink3,#a49b8f);font-variant-numeric:tabular-nums}

.yp-msearch{padding:0 10px 7px}
.yp-msearch input{
  width:100%;height:30px;padding:0 10px;
  border:1px solid var(--line2,#d9d1c4);border-radius:9px;
  background:var(--bg,#faf7f2);color:var(--ink,#2e2a25);
  font:inherit;font-size:13px;outline:none;
  -webkit-appearance:none;appearance:none;
}
.yp-msearch input::placeholder{color:var(--ink3,#a49b8f)}
.yp-msearch input:focus{border-color:var(--accent,#c8794f);background:var(--paper,#fdfcf9)}
.yp-msearch input::-webkit-search-cancel-button{cursor:pointer}

/* 分类页签：换行排，11 个页签一次全看见（横滚的话最后一个总被切掉） */
.yp-mcats{
  display:flex;flex-wrap:wrap;gap:5px;
  padding:0 10px 8px;
}
.yp-mcats button{
  flex:0 0 auto;height:24px;padding:0 9px;
  border:1px solid var(--line2,#d9d1c4);border-radius:12px;
  background:var(--paper,#fdfcf9);color:var(--ink2,#6d655b);
  font:inherit;font-size:12px;line-height:22px;cursor:pointer;
  white-space:nowrap;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.yp-mcats button:hover{background:var(--accent-soft,#f6e7de);color:var(--accent-ink,#8f4a2c)}
.yp-mcats button.on{
  background:var(--accent-soft,#f6e7de);border-color:var(--accent,#c8794f);color:var(--accent-ink,#8f4a2c);
  font-weight:600;
}

/* 动作网格：两列、自己滚。
   每格都带一圈淡框 —— 两列纯文字挨在一起时分不清格与格，
   加框之后「一个动作 = 一个按钮」看得见；名字长了仍然省略号兜底，
   完整名在 title 里，鼠标停一下就能看全。
   ⚠ align-content:start + grid-auto-rows:min-content 不能删：
   grid 默认 align-content:stretch，容器只剩一百多像素时会拿 53 行
   去均分这点高度，每格压成十几像素、字被裁掉一半 —— 就是「动作多了
   看不见字」的原因。改成按内容高度排，放不下就滚。 */
.yp-mlist{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;
  grid-auto-rows:min-content;
  align-content:start;
  gap:4px;
  padding:0 8px 8px;
  overflow-y:auto;overscroll-behavior:contain;
}
.yp-mlist button,
.yp-mtools button{
  display:block;width:100%;min-height:28px;text-align:left;
  padding:6px 8px;
  border:1px solid var(--line,#eae3d8);
  background:var(--paper,#fdfcf9);
  border-radius:8px;color:var(--ink,#2e2a25);
  font:inherit;font-size:13.5px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.yp-mlist button:hover,
.yp-mtools button:hover{
  background:var(--accent-soft,#f6e7de);
  border-color:var(--accent,#c8794f);
  color:var(--accent-ink,#8f4a2c);
}
.yp-mempty{
  grid-column:1 / -1;
  padding:16px 8px;text-align:center;
  color:var(--ink3,#a49b8f);font-size:12.5px;
}

/* 展开按钮：动作太多时把面板撑大，不让人一格一格往下滚 */
.yp-mfold{padding:0 8px 8px}
.yp-mfold button{
  display:block;width:100%;
  padding:6px 9px;
  border:1px dashed var(--line2,#d9d1c4);border-radius:8px;
  background:var(--bg,#faf7f2);color:var(--ink2,#6d655b);
  font:inherit;font-size:12px;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.yp-mfold button:hover{
  border-color:var(--accent,#c8794f);
  background:var(--accent-soft,#f6e7de);
  color:var(--accent-ink,#8f4a2c);
}
.yp-menu.yp-big .yp-mfold button{border-style:solid}

/* 工具条钉在底部，不跟着列表滚。只剩「猫自己」的四项，AI 已经挪到顶上了 */
.yp-mtools{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  padding:0 8px 8px;
  border-top:1px solid var(--line,#e8e1d6);
  background:var(--paper,#fdfcf9);
}
.yp-mtools .yp-msec{grid-column:1 / -1;padding:9px 2px 3px}
/* 字体这一项名字长（「字体：微软雅黑」），占满一行免得被截成省略号 */
.yp-mtools button[data-act="font"]{grid-column:1 / -1}
.yp-mtools button:disabled{opacity:.42;cursor:default}
.yp-mtools button:disabled:hover{background:var(--paper,#fdfcf9);border-color:var(--line,#eae3d8);color:var(--ink,#2e2a25)}

/* ── 字体面板 ────────────────────────────────────────────────
   点「字体」不弹新窗口，直接把菜单内容换成这一页。
   菜单的位置是按宠物算过的，再浮一层又得算一次，小屏幕上两层叠在一起很难点。 */
.yp-mfont{display:none;flex:1 1 auto;min-height:0;flex-direction:column}
.yp-menu.yp-showfont>.yp-mairow,
.yp-menu.yp-showfont>.yp-mhd,
.yp-menu.yp-showfont>.yp-msearch,
.yp-menu.yp-showfont>.yp-mcats,
.yp-menu.yp-showfont>.yp-mlist,
.yp-menu.yp-showfont>.yp-mfold,
.yp-menu.yp-showfont>.yp-mtools,
.yp-menu.yp-showfont>.yp-credit{display:none}
.yp-menu.yp-showfont>.yp-mfont{display:flex}

.yp-mfhd{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px 7px;
  border-bottom:1px solid var(--line,#e8e1d6);
  background:var(--bg,#faf7f2);
}
.yp-mfback{
  height:24px;padding:0 8px;
  border:1px solid var(--line2,#d9d1c4);border-radius:7px;
  background:var(--paper,#fdfcf9);color:var(--ink2,#6d655b);
  font:inherit;font-size:11.5px;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.yp-mfback:hover{border-color:var(--accent,#c8794f);background:var(--accent-soft,#f6e7de);color:var(--accent-ink,#8f4a2c)}
.yp-mft{margin-left:auto;font-size:12.5px;font-weight:600;letter-spacing:.02em}

.yp-mftip{padding:8px 11px 5px;font-size:10.5px;line-height:1.65;color:var(--ink3,#a49b8f)}
.yp-mflist{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:3px;
  padding:3px 8px 9px;
  overflow-y:auto;overscroll-behavior:contain;
}
.yp-mfi{
  display:flex;align-items:center;gap:9px;
  width:100%;padding:5px 8px;text-align:left;
  border:1px solid var(--line,#eae3d8);border-radius:9px;
  background:var(--paper,#fdfcf9);color:var(--ink,#2e2a25);
  font:inherit;cursor:pointer;
  transition:background .12s ease,border-color .12s ease;
}
.yp-mfi:hover{border-color:var(--accent,#c8794f);background:var(--accent-soft,#f6e7de)}
.yp-mfi.on{border-color:var(--accent,#c8794f);background:var(--accent-soft,#f6e7de);box-shadow:inset 0 0 0 1px var(--accent,#c8794f)}
.yp-mfdemo{
  flex:0 0 30px;height:30px;line-height:30px;text-align:center;
  font-size:19px;font-weight:400;
  border-radius:7px;background:var(--bg,#faf7f2);color:var(--ink,#2e2a25);
}
.yp-mfn{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yp-mfnote{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--ink3,#a49b8f);white-space:nowrap}
.yp-mfi.on .yp-mfnote{color:var(--accent-ink,#8f4a2c)}

/* 署名行：形象 CC BY-NC-SA 4.0，要标出处 */
.yp-credit{
  padding:4px 10px 7px;
  font-size:10px;line-height:1.4;
  color:var(--ink3,#a49b8f);
  background:var(--paper,#fdfcf9);
}
.yp-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.yp-credit a:hover{color:var(--accent-ink,#8f4a2c)}

/* ── 首次提示 ───────────────────────────────────────────── */
.yp-hint{
  position:fixed;z-index:380;
  padding:5px 10px;
  background:var(--paper,#fdfcf9);
  color:var(--ink2,#6d655b);
  border:1px solid var(--line2,#d9d1c4);
  border-radius:9px;
  font-family:var(--yp-font,SimHei,"Heiti SC","Microsoft YaHei",sans-serif);
  font-size:12px;line-height:1.4;white-space:nowrap;
  box-shadow:var(--shadow-sm,0 1px 3px rgba(90,68,44,.07));
  pointer-events:none;
  opacity:0;transition:opacity .25s ease;
}
.yp-hint.on{opacity:1}

/* ── AI 对话面板 ─────────────────────────────────────────────
   从右键菜单的「和 AI 聊聊」进来。宽度跟菜单对齐（304px），
   高度跟着视口走，消息区自己滚，输入框永远贴在底部。
   跟菜单一个 z-index：两者不会同时出现（开聊天会先收起菜单）。 */
.yp-chat{
  position:fixed;z-index:380;display:none;
  flex-direction:column;
  /* 2026-10-26 放大一档：原来 304×400 里塞 12.5px 字，看着像手机截图缩小版。
     现在 380×560，基础字号 15px，聊起来才不费眼。 */
  width:380px;max-width:calc(100vw - 16px);
  height:min(74vh,560px);
  max-height:calc(100vh - 16px);
  background:var(--paper,#fdfcf9);
  color:var(--ink,#2e2a25);
  border:1px solid var(--line2,#d9d1c4);
  border-radius:14px;
  box-shadow:var(--shadow,0 10px 30px rgba(90,68,44,.16));
  font-family:var(--yp-font,SimHei,"Heiti SC","Microsoft YaHei",sans-serif);
  font-size:15px;line-height:1.55;
  overflow:hidden;
}
.yp-chat.on{display:flex;animation:yp-pop .14s ease}

.yp-chd{
  display:flex;align-items:center;gap:8px;
  padding:10px 10px 9px 14px;
  border-bottom:1px solid var(--line,#e8e1d6);
}
.yp-cht{font-size:15px;font-weight:600;letter-spacing:.02em}
/* 设置齿轮：跟关闭按钮并排，靠右 */
.yp-chg{
  margin-left:auto;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:9px;background:transparent;
  color:var(--ink2,#8b8378);font:inherit;font-size:16px;line-height:1;
  cursor:pointer;
}
.yp-chg:hover{background:var(--accent-soft,#f6e7de);color:var(--accent-ink,#8f4a2c)}
.yp-chx{
  margin-left:0;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:9px;background:transparent;
  color:var(--ink2,#8b8378);font:inherit;font-size:20px;line-height:1;
  cursor:pointer;
}
.yp-chx:hover{background:var(--accent-soft,#f6e7de);color:var(--accent-ink,#8f4a2c)}

/* 谁的 Key / 余额：一条细带子，钉在标题下面 */
.yp-chbar{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px 6px;
  border-bottom:1px solid var(--line,#e8e1d6);
  font-size:12.5px;line-height:1.35;
  color:var(--ink3,#a49b8f);
}
.yp-chwho{
  flex:0 0 auto;
  padding:2px 8px;border-radius:999px;
  background:var(--bg,#faf7f2);
  border:1px solid var(--line,#e8e1d6);
  white-space:nowrap;
}
.yp-chwho.is-own{
  background:var(--accent-soft,#f6e7de);
  border-color:transparent;
  color:var(--accent-ink,#8f4a2c);font-weight:600;
}
.yp-chwho.is-off{color:#b4543a;border-color:#e6c6bd;background:#fdf3f0}
.yp-chbal{
  margin-left:auto;
  max-width:62%;
  padding:2px 8px;border:none;border-radius:999px;
  background:transparent;color:inherit;
  font:inherit;font-size:12.5px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;
}
.yp-chbal:hover{background:var(--accent-soft,#f6e7de);color:var(--accent-ink,#8f4a2c)}
.yp-chbal:disabled{opacity:.7;cursor:default}
.yp-chbal:disabled:hover{background:transparent;color:inherit}

/* 消息区 */
.yp-chlog{
  flex:1 1 auto;min-height:0;
  padding:12px 12px 6px;
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:9px;
}
.yp-cm{
  max-width:88%;
  padding:8px 12px;
  border-radius:12px;
  font-size:14.5px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;
  -webkit-user-select:text;user-select:text;
}
.yp-cm.ai{
  align-self:flex-start;
  background:var(--bg,#faf7f2);
  border:1px solid var(--line,#e8e1d6);
  border-bottom-left-radius:4px;
  color:var(--ink,#2e2a25);
}
.yp-cm.me{
  align-self:flex-end;
  background:var(--accent-soft,#f6e7de);
  border:1px solid transparent;
  border-bottom-right-radius:4px;
  color:var(--accent-ink,#8f4a2c);
}
.yp-cm.err{
  align-self:stretch;max-width:100%;
  background:transparent;
  color:#b4543a;
  font-size:12.5px;
  text-align:center;
  padding:2px 4px;
}
/* 「正在想…」：三个点轮流亮 */
.yp-cm.typing{color:var(--ink3,#a49b8f);letter-spacing:.12em}
.yp-cm.typing::after{
  content:'···';
  display:inline-block;
  animation:yp-dots 1.05s steps(1,end) infinite;
}
@keyframes yp-dots{
  0%{opacity:.25}
  33%{opacity:.6}
  66%,100%{opacity:1}
}

/* 输入区 */
.yp-chf{
  display:flex;gap:8px;align-items:center;
  padding:9px 10px;
  border-top:1px solid var(--line,#e8e1d6);
}
.yp-chi{
  flex:1 1 auto;min-width:0;height:36px;padding:0 11px;
  border:1px solid var(--line2,#d9d1c4);border-radius:10px;
  background:var(--bg,#faf7f2);color:var(--ink,#2e2a25);
  font:inherit;font-size:14.5px;outline:none;
  -webkit-appearance:none;appearance:none;
}
.yp-chi::placeholder{color:var(--ink3,#a49b8f)}
.yp-chi:focus{border-color:var(--accent,#c8794f);background:var(--paper,#fdfcf9)}
.yp-chs{
  flex:0 0 auto;height:36px;padding:0 16px;
  border:1px solid transparent;border-radius:10px;
  background:var(--accent,#c8794f);color:#fff;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:opacity .12s ease;
}
.yp-chs:hover{opacity:.88}
.yp-chs:disabled{opacity:.45;cursor:default}
.yp-chtip{
  padding:0 12px 9px;
  font-size:11.5px;line-height:1.45;
  color:var(--ink3,#a49b8f);
}

/* ── 设置页：Key / 地址 / 模型 / 强度 ────────────────────────
   跟对话共用一块面板，所以这里只管中间那截：占满剩余高度、自己滚。 */
.yp-chset{
  display:none;
  flex:1 1 auto;min-height:0;
  flex-direction:column;gap:9px;
  padding:11px 13px 12px;
  overflow-y:auto;overscroll-behavior:contain;
}
/* 关键：这是纵向 flex，内容一多子项就会被 flex-shrink 压扁
   （返回按钮实测从 34px 压到 24px，字都挤在一起）。
   一律不许压，装不下就整体滚动。 */
.yp-chset>*{flex:0 0 auto}
/* 顶上这一条「你现在用的是谁的 Key」—— 之前没有，用户填完看不见
   任何痕迹，一清掉就以为从来没存过。 */
.yp-csnow{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:7px 10px;border-radius:10px;
  background:var(--bg,#faf7f2);
  border:1px solid var(--line,#e8e1d6);
  font-size:12.5px;line-height:1.45;
  color:var(--ink2,#8b8378);
}
.yp-csnow b{font-weight:600}
.yp-csnow.is-own{
  background:var(--accent-soft,#f6e7de);
  border-color:transparent;
  color:var(--accent-ink,#8f4a2c);
}
.yp-csnow.is-off{background:#fdf3f0;border-color:#e6c6bd;color:#b4543a}

/* ── 人设：一排小卡片，点一下换人 ──────────────────────────
   这块比填 Key 更常用，所以放在最上面；卡片不做头像，
   只做名字 —— 名字够认，配图要占两倍高度还未必选得对 */
.yp-csface{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink2,#8b8378);
}
.yp-csttl{font-weight:600;font-size:13px;color:var(--ink,#2e2a25)}
.yp-csfacecur{color:var(--accent-ink,#8f4a2c)}
.yp-cspick{display:flex;flex-wrap:wrap;gap:6px}
.yp-csp{
  height:28px;padding:0 10px;
  border:1px solid var(--line2,#d9d1c4);border-radius:14px;
  background:var(--bg,#faf7f2);color:var(--ink2,#8b8378);
  font:inherit;font-size:12.5px;line-height:1;cursor:pointer;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.yp-csp:hover{border-color:var(--accent,#c8794f);color:var(--ink,#2e2a25)}
.yp-csp.on{
  background:var(--accent-soft,#f6e7de);border-color:transparent;
  color:var(--accent-ink,#8f4a2c);font-weight:600;
}
/* 「自己造」用虚线边，一眼能跟内置的那几个分开 */
.yp-cspnew{border-style:dashed}
.yp-csform{display:flex;flex-direction:column;gap:6px}
/* 用 display:flex 的元素会盖掉 hidden 的默认样式，必须显式压回去 */
.yp-csform[hidden]{display:none!important}
.yp-csarea{
  height:auto;min-height:54px;padding:7px 9px;
  line-height:1.45;resize:vertical;
}
/* 模型说明那一行：跟输入框左边对不齐也没关系，它是一句注解 */
.yp-csnote{
  font-size:11.5px;line-height:1.4;
  color:var(--ink3,#a49b8f);
  padding:0 2px;
}
/* 面板里所有靠 hidden 藏起来的东西：flex/inline-block 会盖掉默认样式 */
.yp-chset [hidden]{display:none!important}
/* 人设小表单自己的按钮。不复用 .yp-csgo/.yp-cscl ——
   那两个是「保存 Key」「清掉 Key」的专属，混用会让样式和断言都串味 */
.yp-csmin{
  height:30px;padding:0 12px;
  border:1px solid var(--line2,#d9d1c4);border-radius:8px;
  background:var(--bg,#faf7f2);color:var(--ink2,#8b8378);
  font:inherit;font-size:12.5px;cursor:pointer;
}
.yp-csmin:hover{border-color:var(--accent,#c8794f);color:var(--ink,#2e2a25)}
.yp-csmin.go{
  background:var(--accent,#c8794f);border-color:transparent;
  color:#fff;font-weight:600;
}
[data-theme="dark"] .yp-csmin.go{color:#25190f}
.yp-csrow{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--ink,#2e2a25);
}
.yp-csl{
  flex:0 0 38px;
  /* 用 ink2 而不是 ink3：小字在深色主题下用 ink3 太灰，看不清 */
  color:var(--ink2,#8b8378);font-size:12.5px;
}
.yp-csin{
  flex:1 1 auto;min-width:0;height:32px;padding:0 9px;
  border:1px solid var(--line2,#d9d1c4);border-radius:8px;
  background:var(--bg,#faf7f2);color:var(--ink,#2e2a25);
  font:inherit;font-size:14px;outline:none;
  -webkit-appearance:none;appearance:none;
}
.yp-cssel{
  /* 别的输入框要 appearance:none 才长得一样，下拉框不行 ——
     去掉之后箭头也没了，用户根本看不出这里能点 */
  -webkit-appearance:auto;appearance:auto;
  padding:0 3px;
  cursor:pointer;
}
.yp-csin:focus{border-color:var(--accent,#c8794f);background:var(--paper,#fdfcf9)}
.yp-csin::placeholder{color:var(--ink3,#a49b8f)}
.yp-csrng{
  /* 滑杆同理：appearance:none 之后默认轨道也不画了，得自己补一条 */
  padding:0;height:22px;border:none;background:transparent;
  -webkit-appearance:none;appearance:none;
  cursor:pointer;
}
.yp-csrng:focus{outline:none}
.yp-csrng::-webkit-slider-runnable-track{
  height:5px;border-radius:3px;
  background:var(--line2,#d9d1c4);
}
.yp-csrng::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:17px;height:17px;margin-top:-6px;
  border-radius:50%;border:none;
  background:var(--accent,#c8794f);
  box-shadow:0 1px 3px rgba(120,72,40,.3);
}
.yp-csrng:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-soft,#f6e7de)}
.yp-csrng::-moz-range-track{
  height:5px;border-radius:3px;
  background:var(--line2,#d9d1c4);
}
.yp-csrng::-moz-range-thumb{
  width:17px;height:17px;border:none;border-radius:50%;
  background:var(--accent,#c8794f);
}

.yp-cslv{
  font-size:12px;line-height:1.5;
  color:var(--ink2,#8b8378);
  padding-left:46px;
}

.yp-csmsg{
  min-height:17px;
  font-size:12.5px;line-height:1.45;
  padding:1px 0;
  color:var(--ink3,#a49b8f);
  word-break:break-word;
}
.yp-csmsg.ok{color:#3f7a4e}
.yp-csmsg.err{color:#b4543a}
.yp-csmsg.warn{color:#9a6b1f}

/* 主按钮区：只放「保存并试一下」。
   「清掉我的 Key」原来是并排的第二个小按钮，跟保存只差 6px，
   2026-10-26 线上真被误点过（日志：存好 49 秒后就被清掉），
   所以挪到最下面做成一行小字链接，还要再确认一次。 */
.yp-csbtns{display:flex;gap:8px;margin-top:1px}
.yp-csgo{
  flex:1 1 auto;height:38px;
  border:1px solid transparent;border-radius:10px;
  background:var(--accent,#c8794f);color:#fff;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
}
.yp-csgo:hover{opacity:.9}
.yp-csgo:disabled{opacity:.45;cursor:default}

/* 返回对话：原来是一行 11px 的无框文字链接，用户反馈「根本看不见」，
   现在给它一个真按钮的框，放在最上面，一进设置页就能找到 */
.yp-csback{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px;
  border:1px solid var(--line2,#d9d1c4);border-radius:10px;
  background:var(--paper,#fdfcf9);
  color:var(--ink,#2e2a25);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.yp-csback:hover{border-color:var(--accent,#c8794f);background:var(--accent-soft,#f6e7de);color:var(--accent-ink,#8f4a2c)}

/* 清掉 Key：小字、靠右、要确认 */
.yp-cscl{
  align-self:flex-end;
  margin-top:2px;padding:3px 0;
  border:none;background:transparent;
  /* 用 ink2：ink3 在深色面板上几乎是隐形的，那就真成「找不到」了 */
  color:var(--ink2,#8b8378);
  font:inherit;font-size:12px;
  text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;
}
.yp-cscl:hover{color:#b4543a}
.yp-cscl:disabled{opacity:.45;cursor:default;text-decoration:none}
.yp-cscl:disabled:hover{color:var(--ink2,#8b8378)}
.yp-cstip{
  font-size:11.5px;line-height:1.55;
  color:var(--ink3,#a49b8f);
  padding-bottom:2px;
}

/* ── 帮我写日记 ─────────────────────────────────────────────
   跟设置页共用一块面板。进这一页时给 .yp-chat 加 .is-write 变宽变高：
   这里要摆一个多行输入框 + 一段结果预览，380 宽一眼就看不下。 */
.yp-chat.is-write{width:430px;height:min(86vh,680px)}
.yp-chwrite{
  display:none;
  flex:1 1 auto;min-height:0;
  flex-direction:column;gap:9px;
  padding:11px 13px 12px;
  overflow-y:auto;overscroll-behavior:contain;
}
/* 跟设置页同一个坑：纵向 flex 里内容一多子项会被压扁，一律不许压 */
.yp-chwrite>*{flex:0 0 auto}

/* 正在写哪一篇 —— 让人知道这些话会落到哪一页 */
.yp-cwnow{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:7px 10px;border-radius:10px;
  background:var(--bg,#faf7f2);
  border:1px solid var(--line,#e8e1d6);
  font-size:12.5px;line-height:1.45;
  color:var(--ink2,#8b8378);
}
.yp-cwnow.is-home{
  background:var(--accent-soft,#f6e7de);
  border-color:transparent;
  color:var(--accent-ink,#8f4a2c);
}
.yp-cwnow.is-off{background:#fdf3f0;border-color:#e6c6bd;color:#b4543a}
.yp-cwjump{
  margin-left:auto;height:24px;padding:0 9px;
  border:1px solid var(--line2,#d9d1c4);border-radius:8px;
  background:var(--paper,#fdfcf9);color:var(--ink,#2e2a25);
  font:inherit;font-size:12px;cursor:pointer;
}
.yp-cwjump:hover{border-color:var(--accent,#c8794f);color:var(--accent-ink,#8f4a2c)}

/* 四个「到哪一步」：还没头绪 / 有点想法 / 写了半截 / 写完了。
   按动词（起笔/续写/润色）排的话，用户得先想清楚自己在干什么 —— 
   按位置排，他只要知道自己写到哪儿了 */
.yp-cwsteps{display:flex;gap:6px}
.yp-cwstep{
  flex:1 1 0;height:34px;
  border:1px solid var(--line2,#d9d1c4);border-radius:9px;
  background:var(--paper,#fdfcf9);color:var(--ink2,#8b8378);
  font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;
}
.yp-cwstep:hover{border-color:var(--accent,#c8794f)}
.yp-cwstep.on{
  background:var(--accent-soft,#f6e7de);
  border-color:transparent;
  color:var(--accent-ink,#8f4a2c);
  font-weight:600;
}

/* 「写完了」这一档下面再分三个动作，小一号，别跟主入口抢注意力 */
.yp-cwsub{display:none;gap:6px;margin-top:-2px}
.yp-cwsubb{
  flex:1 1 0;height:28px;
  border:1px dashed var(--line2,#d9d1c4);border-radius:8px;
  background:transparent;color:var(--ink2,#8b8378);
  font:inherit;font-size:12.5px;cursor:pointer;
}
.yp-cwsubb:hover{border-style:solid;border-color:var(--accent,#c8794f)}
.yp-cwsubb.on{
  border-style:solid;border-color:transparent;
  background:var(--bg,#faf7f2);color:var(--ink,#2e2a25);font-weight:600;
}

.yp-cwnotes{
  width:100%;box-sizing:border-box;
  padding:8px 10px;resize:none;
  border:1px solid var(--line2,#d9d1c4);border-radius:10px;
  background:var(--bg,#faf7f2);color:var(--ink,#2e2a25);
  font:inherit;font-size:14px;line-height:1.6;outline:none;
}
.yp-cwnotes:focus{border-color:var(--accent,#c8794f);background:var(--paper,#fdfcf9)}
.yp-cwnotes::placeholder{color:var(--ink3,#a49b8f)}

/* 「它只用你给的事实写」——常显在要点框下面。
   这条不是免责声明，是使用说明：给三个词，它只能写三句骨架，
   剩下的地方只能拿空话填 —— 「牛头不对马嘴」全是这么来的。
   所以它必须一直看得见，而不是等人写坏了再翻文档。 */
.yp-cwrule{
  flex:0 0 auto;
  padding:6px 9px;border-radius:9px;
  background:var(--accent-soft,#f6e7de);
  /* 左边一道主色竖条：让它是「规矩」，而不是又一句灰色小字说明 */
  box-shadow:inset 3px 0 0 var(--accent,#c8794f);
  font-size:11.5px;line-height:1.55;
  color:var(--ink2,#8b8378);
}
.yp-cwrulet{font-weight:600;color:var(--ink,#2e2a25)}
.yp-cwrulen{margin-top:1px;color:var(--ink3,#a49b8f);font-variant-numeric:tabular-nums}
/* 字数太少时转提醒色：不吓人，只是「这一次大概写不出细节」的预警 */
.yp-cwrulen.is-thin{color:#9a6b1f}
/* 结果出来时只收起第二行的字数账，主规则一直留着 ——
   「写得不像」的那一刻，正是人最需要看见这句的时候；
   整块藏掉等于把说明撤在最该讲的时候 */
.yp-chwrite.has-res>.yp-cwrule>.yp-cwrulen{display:none}

/* 「顺手写一篇」：整行可点的开关。开与关必须一眼分得清 ——
   这一项决定的正是「要不要多花一次写整篇的钱」 */
.yp-cwplanrow{flex:0 0 auto}
.yp-cwplan{
  display:block;width:100%;text-align:left;
  padding:7px 9px;
  border:1px solid var(--line2,#d9d1c4);border-radius:9px;
  background:var(--bg,#faf7f2);color:var(--ink2,#8b8378);
  font:inherit;font-size:11.5px;line-height:1.5;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.yp-cwplan:hover{border-color:#d09a86;color:var(--accent-ink,#8f4a2c)}
.yp-cwplan.on{
  border-color:var(--accent,#c8794f);
  background:var(--accent-soft,#f6e7de);color:var(--accent-ink,#8f4a2c);
  font-weight:600;
}
/* 没结果时让输入框吃掉剩余高度（面板高 600 多，下面空一大块很怪）；
   结果一出来它会自动缩回 88px，把地方让给预览 */
.yp-chwrite>.yp-cwnotes{flex:1 1 auto;min-height:88px}
/* 有结果时输入框让位：固定 88px，剩下的高度留给预览和两个按钮，
   不然标题候选会被挤到面板外面（实测第三个候选只露一半） */
.yp-chwrite.has-res>.yp-cwnotes{flex:0 0 auto;height:88px;min-height:0}

.yp-cwopts{display:flex;gap:8px;align-items:center}
.yp-cwopts .yp-csin{flex:1 1 0;height:32px}

.yp-cwgo{
  width:100%;height:38px;
  border:1px solid transparent;border-radius:10px;
  background:var(--accent,#c8794f);color:#fff;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
}
.yp-cwgo:hover{opacity:.9}
.yp-cwgo:disabled{opacity:.45;cursor:default}

/* 结果区：写完才顶出来 */
.yp-cwres{display:none;flex-direction:column;gap:7px}
.yp-cwres.on{display:flex}
.yp-cwrh{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.yp-cwrttl{font-size:12.5px;font-weight:600;color:var(--ink,#2e2a25)}
.yp-cwwarn{font-size:11.5px;line-height:1.4;color:#9a6b1f}
/* 这一次的 token 账：靠右。上游不回 usage 时整块不显示，不编估算值 */
.yp-cwcost{
  margin-left:auto;
  font-size:11px;color:var(--ink3,#a49b8f);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.yp-cwrtext{
  max-height:170px;overflow-y:auto;overscroll-behavior:contain;
  padding:9px 11px;border-radius:10px;
  background:var(--bg,#faf7f2);
  border:1px solid var(--line,#e8e1d6);
  font-size:14px;line-height:1.75;color:var(--ink,#2e2a25);
  white-space:pre-wrap;word-break:break-word;
  -webkit-user-select:text;user-select:text;
}
.yp-cwracts{display:flex;gap:8px}
/* 结果一出来就把最下面那句说明收起来：面板高度有限，
   说明排在按钮后面会把按钮挤出可视区，用户以为「没按钮」 */
.yp-cwres.on ~ .yp-cstip{display:none}
.yp-cwins{
  flex:1 1 auto;height:36px;
  border:1px solid transparent;border-radius:10px;
  background:var(--accent,#c8794f);color:#fff;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.yp-cwins:hover{opacity:.9}
.yp-cwrep{
  flex:0 0 auto;height:36px;padding:0 12px;
  border:1px solid var(--line2,#d9d1c4);border-radius:10px;
  background:var(--paper,#fdfcf9);color:var(--ink2,#8b8378);
  font:inherit;font-size:13px;cursor:pointer;
}
.yp-cwrep:hover{border-color:#d09a86;color:#b4543a}

/* 深色主题下主按钮改用深色字：--accent 在深色下是 #d98a63，
   白字压上去对比度只有 2 点多，看不清。站点自己的主按钮也是这么处理的 */
[data-theme="dark"] .yp-cwgo,
[data-theme="dark"] .yp-cwins,
[data-theme="dark"] .yp-chs,
[data-theme="dark"] .yp-csgo{color:#25190f}

/* 起标题：三个候选，点一下就换上去 */
.yp-cwtlist{display:flex;flex-direction:column;gap:6px}
.yp-cwt{
  text-align:left;padding:8px 11px;
  border:1px solid var(--line2,#d9d1c4);border-radius:10px;
  background:var(--paper,#fdfcf9);color:var(--ink,#2e2a25);
  font:inherit;font-size:14px;cursor:pointer;
}
.yp-cwt:hover{
  border-color:var(--accent,#c8794f);
  background:var(--accent-soft,#f6e7de);
  color:var(--accent-ink,#8f4a2c);
}

@media (prefers-reduced-motion:reduce){
  .yp-root,.yp-stage,.yp-v{transition:none !important}
  .yp-cm.typing::after{animation:none;opacity:.7}
}

@media print{
  .yp-root,.yp-menu,.yp-hint,.yp-chat{display:none !important}
}

/* ── 写日记：给方向 / 挑毛病 / 分段接受 ─────────────────────
   这一片全是「结果区」里的东西。共用一个规矩：
   CSS 里默认可见，靠 JS 写 inline style.display='none' 收起来 ——
   反过来（CSS 默认 none、JS 写 ''）会让它永远显示不出来。 */
.yp-cwfacts{
  display:block;
  font-size:12.5px;line-height:1.55;color:var(--ink2,#8b8378);
}
.yp-cwdirs,.yp-cwasks{display:flex;flex-direction:column;gap:5px}
.yp-cwdlab{font-size:11.5px;color:var(--ink3,#a49b8f)}
.yp-cwdir{
  text-align:left;padding:7px 10px;
  border:1px solid var(--line2,#d9d1c4);border-radius:9px;
  background:var(--paper,#fdfcf9);color:var(--ink,#2e2a25);
  font:inherit;font-size:13px;line-height:1.5;cursor:pointer;
}
.yp-cwdir:hover{
  border-color:var(--accent,#c8794f);
  background:var(--accent-soft,#f6e7de);
  color:var(--accent-ink,#8f4a2c);
}
.yp-cwask{
  text-align:left;padding:6px 9px;
  border:1px dashed var(--line2,#d9d1c4);border-radius:9px;
  background:transparent;color:var(--ink2,#8b8378);
  font:inherit;font-size:12.5px;line-height:1.5;cursor:pointer;
}
.yp-cwask:hover{
  border-style:solid;border-color:var(--accent,#c8794f);
  color:var(--accent-ink,#8f4a2c);
}

/* 挑毛病的意见清单：不重写正文，只给意见 */
.yp-cwclist{
  display:block;margin:0;padding-left:18px;
  font-size:13.5px;line-height:1.7;color:var(--ink,#2e2a25);
}
.yp-cwclist li{margin:2px 0}

/* 分段接受：每段一块，按钮排在段下面 —— 430 宽里挤在右边会把正文压成一条 */
.yp-cwplist{display:flex;flex-direction:column;gap:7px}
.yp-cwp{
  padding:8px 10px;border-radius:10px;
  border:1px solid var(--line,#e8e1d6);
  background:var(--bg,#faf7f2);
}
.yp-cwp.is-skip{opacity:.5}
.yp-cwp.is-skip .yp-cwptext{text-decoration:line-through}
.yp-cwp.is-used{border-color:transparent;background:var(--accent-soft,#f6e7de)}
.yp-cwptext{
  font-size:14px;line-height:1.72;color:var(--ink,#2e2a25);
  white-space:pre-wrap;word-break:break-word;
  max-height:120px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-user-select:text;user-select:text;
}
.yp-cwpb{display:flex;gap:6px;margin-top:6px}
.yp-cwpbtn{
  height:26px;padding:0 9px;
  border:1px solid var(--line2,#d9d1c4);border-radius:7px;
  background:var(--paper,#fdfcf9);color:var(--ink2,#8b8378);
  font:inherit;font-size:12px;cursor:pointer;
}
.yp-cwpbtn:hover{border-color:var(--accent,#c8794f);color:var(--accent-ink,#8f4a2c)}
.yp-cwpbtn:disabled{opacity:.45;cursor:default}
.yp-cwpbtn:disabled:hover{border-color:var(--line2,#d9d1c4);color:var(--ink2,#8b8378)}

/* 落完字的撤销条。面板不自动关，就是靠这一条收尾 */
.yp-cwundo{
  display:none;align-items:center;gap:8px;
  padding:7px 10px;border-radius:9px;
  background:var(--accent-soft,#f6e7de);
  font-size:12.5px;color:var(--accent-ink,#8f4a2c);
}
.yp-cwundotx{flex:1 1 auto}
.yp-cwundob{
  height:26px;padding:0 10px;
  border:1px solid transparent;border-radius:7px;
  background:var(--paper,#fdfcf9);color:var(--ink,#2e2a25);
  font:inherit;font-size:12px;cursor:pointer;
}
.yp-cwundob:hover{border-color:var(--accent,#c8794f)}

/* 字迹模仿：左边是开关兼说明（写了哪几篇必须让人看得见），
   右边是三档强度。一行放不下就折行，别把强度挤出面板 */
.yp-cwsamprow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.yp-cwsamp{
  flex:1 1 120px;min-width:0;
  font-size:11.5px;line-height:1.5;
  color:var(--ink2,#8b8378);
  text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:2px;
  cursor:pointer;
}
.yp-cwsamp:hover{color:var(--accent-ink,#8f4a2c)}
.yp-cwsamp.is-off{color:var(--ink3,#a49b8f);text-decoration-style:solid}

/* 强度三档：小分段控件。关着时压暗但不隐藏 —— 先让人看见有这个旋钮，
   点下去等于「打开并用这档」，不然点了没反应会被当成坏了 */
.yp-cwlv{
  display:flex;flex:0 0 auto;gap:1px;padding:1px;
  border:1px solid var(--line2,#d9d1c4);border-radius:8px;
  background:var(--bg,#faf7f2);
}
.yp-cwlv.is-off{opacity:.5}
.yp-cwlvb{
  height:20px;padding:0 7px;
  border:none;border-radius:6px;background:transparent;
  color:var(--ink2,#8b8378);
  font:inherit;font-size:11px;line-height:20px;cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.yp-cwlvb:hover{background:var(--accent-soft,#f6e7de);color:var(--accent-ink,#8f4a2c)}
.yp-cwlvb.on{background:var(--accent-soft,#f6e7de);color:var(--accent-ink,#8f4a2c);font-weight:600}

/* 有了分段结果，输入框再占 88px 就把结果挤没了 —— 缩到 72 */
.yp-chwrite.has-res>.yp-cwnotes{height:72px}

[data-theme="dark"] .yp-cwundob{color:#25190f}