/* 聊天页像素化(11-02 她:「chat的聊天框也能设计出像素风格嘛 我想要~然后chat顶栏的一些小图标也可以替换为像素风的啦~」;
   第一版直角框她说「硬邦邦的」→ 第二版照她给的手帐贴纸 / 像素狐狸框 / Fly me to the moon 小窗重画)。
   只在 html.chatpx 下生效(chat-px.js 加的 class 和 --pxb-* / --pxe-* / --pxd-* / --pxk-* 变量),不加载 = 原样。默认夜里,[data-theme="day"] 白天。
   气泡:border-image 9 宫格(图在 chat-px.js 里按字符画现画),数字跟 chat-px.js 的 T / B / C / DROP 走:
     slice 14 12 24 12 = 上 7 格 / 左右 6 格 / 下 10 格 + 2 格落影(一格 2px);落影画在盒子外(outset 底下 4px),版面不动。
   耳朵:::before 换成带描边的像素耳朵(她狐狸 / 他狼,耳窝是对方的颜色),最下面两行压在气泡顶上把描边「打开」,像从框里长出来的。
   贴纸:::after 原来是耳窝,现在耳窝画进耳朵里了,它改当角上的小贴纸;连发的后几条照样摘掉(chat2.html 里那条 content: none)。
   选择器挂在 #flow 下、叠 .bubble.bubble:要压过 chat-warm-paper / chat-bubble-distinction / main-neutral / chat-float-shell 一摞气泡样式。
   通话卡 / 选项回执 / 欲与愿三种气泡有自己的样子,不套框。
   头像:img 用像素圆 mask 收边,外面一格圈画在 .row::after 上(只给带头像的行,连发的后几条没头像就没有圈)。
   上下浮栏外框是另一个窗口的 pixel-rails.css(变量 --px-dot 等),这里的变量都叫 --pxb- / --pxe- / --pxd- / --pxk- / --pxa-,互不干扰。 */

/* ── 顶栏图标 ── */
html.chatpx header .icon-btn .pxi { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
html.chatpx header .icon-btn .pxi svg { display: block; image-rendering: pixelated; }

/* ── 日夜两套皮 ── */
html.chatpx {
  --pxb-him: var(--pxb-him-n); --pxb-her: var(--pxb-her-n);
  --pxe-him: var(--pxe-him-n); --pxe-her: var(--pxe-her-n);
  --pxd-him: var(--pxd-him-n); --pxd-her: var(--pxd-her-n);
  --pxk-him: var(--pxk-him-n); --pxk-her: var(--pxk-her-n);
  --pxa-him: var(--pxa-him-n); --pxa-her: var(--pxa-her-n);
}
html.chatpx[data-theme="day"] {
  --pxb-him: var(--pxb-him-d); --pxb-her: var(--pxb-her-d);
  --pxe-him: var(--pxe-him-d); --pxe-her: var(--pxe-her-d);
  --pxd-him: var(--pxd-him-d); --pxd-her: var(--pxd-her-d);
  --pxk-him: var(--pxk-him-d); --pxk-her: var(--pxk-her-d);
  --pxa-him: var(--pxa-him-d); --pxa-her: var(--pxa-her-d);
}

/* ── 气泡:像素框 ── */
html.chatpx #flow .row.him .bubble.bubble:not(.call-bubble):not(.pick):not(.wish),
html.chatpx #flow .row.her .bubble.bubble:not(.call-bubble):not(.pick):not(.wish) {
  border: 1px solid transparent; border-radius: 0;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-image-slice: 14 12 24 12 fill;
  border-image-width: 14px 12px 24px 12px;
  border-image-outset: 0 0 4px 0;
  border-image-repeat: stretch;
}
html.chatpx #flow .row.him .bubble.bubble:not(.call-bubble):not(.pick):not(.wish) { border-image-source: var(--pxb-him); color: var(--pxk-him); }
html.chatpx #flow .row.her .bubble.bubble:not(.call-bubble):not(.pick):not(.wish) { border-image-source: var(--pxb-her); color: var(--pxk-her); padding-bottom: 16px; }
/* 夜里她的气泡是亮粉底:气泡里那些用 --ink-faint / --gold 的小字(心声空泡、语音转写、链接)跟着换深色 */
html.chatpx:not([data-theme="day"]) #flow .row.her .bubble.bubble:not(.call-bubble):not(.pick):not(.wish) {
  --ink: #1d1452; --ink-dim: rgba(29, 20, 82, .78); --ink-faint: rgba(29, 20, 82, .55); --gold: #6b3fa0;
}
/* 从星标跳回原位:原来亮一圈金边,现在沿着像素轮廓发光 */
html.chatpx #flow .row.found .bubble.bubble:not(.call-bubble):not(.pick):not(.wish) { filter: drop-shadow(0 0 4px var(--gold)); }

/* ── 耳朵 + 角上的贴纸 ── */
html.chatpx #flow .row .bubble.bubble:not(.call-bubble):not(.pick):not(.wish)::before,
html.chatpx #flow .row .bubble.bubble:not(.call-bubble):not(.pick):not(.wish)::after {
  clip-path: none; -webkit-mask: none; mask: none; filter: none;
}
html.chatpx #flow .row.her .bubble.bubble:not(.call-bubble):not(.pick):not(.wish)::before {
  left: 15px; right: auto; top: -19px; width: 20px; height: 22px;
  background: var(--pxe-her) 0 0 / 100% 100% no-repeat;
}
html.chatpx #flow .row.him .bubble.bubble:not(.call-bubble):not(.pick):not(.wish)::before {
  right: 15px; left: auto; top: -17px; width: 22px; height: 20px;
  background: var(--pxe-him) 0 0 / 100% 100% no-repeat;
}
html.chatpx #flow .row.her .bubble.bubble:not(.call-bubble):not(.pick):not(.wish)::after {
  left: auto; right: -13px; top: -9px; width: 36px; height: 28px;
  background: var(--pxd-her) 0 0 / 100% 100% no-repeat; animation: none; transform: none;
}
html.chatpx #flow .row.him .bubble.bubble:not(.call-bubble):not(.pick):not(.wish)::after {
  right: auto; left: -13px; top: -9px; width: 36px; height: 28px;
  background: var(--pxd-him) 0 0 / 100% 100% no-repeat; animation: none; transform: none;
}

/* 两个耳朵彩蛋照留,改成像素的动法(原来的旋转 / 拉伸会把像素耳朵转糊):新话落地耳朵从框里一顿一顿竖起来,他正在说话时耳朵一格一格地点 */
@keyframes pxEarPerk { 0% { transform: translateY(6px); } 50% { transform: translateY(-2px); } 100% { transform: none; } }
@keyframes pxEarListen { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
html.chatpx #flow .row.fresh .bubble.bubble:not(.call-bubble):not(.pick):not(.wish)::before { animation: pxEarPerk .42s steps(1, end) .05s backwards; }
html.chatpx #flow #liveRow .bubble.bubble:not(.call-bubble):not(.pick):not(.wish)::before { animation: pxEarListen 1.2s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) {
  html.chatpx #flow .row .bubble.bubble::before { animation: none; }
}

/* ── 头像:一圈很轻的像素框(她:「头像框要不要也加一圈很轻量的像素框呀」)── */
html.chatpx #flow .row > img.ava {
  border: 0; border-radius: 0;
  -webkit-mask: var(--pxa-mask) 0 0 / 100% 100% no-repeat; mask: var(--pxa-mask) 0 0 / 100% 100% no-repeat;
}
html.chatpx #flow .row:has(> img.ava)::after {
  content: ""; position: absolute; top: 0; width: 44px; height: 44px; pointer-events: none;
  background: 0 0 / 100% 100% no-repeat;
}
html.chatpx #flow .row.him:has(> img.ava)::after { left: 0; background-image: var(--pxa-him); }
html.chatpx #flow .row.her:has(> img.ava)::after { right: 0; background-image: var(--pxa-her); }

/* ── 名字 / 时间:像素字 ── */
html.chatpx .stamp { font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; letter-spacing: 0; font-weight: 400; font-synthesis: none; }
html.chatpx .stamp .nick { font-family: "HTPX", "HTPX-fill", -apple-system, "PingFang SC", sans-serif; font-size: 12px; letter-spacing: 0; }

/* ════ 第三轮(11-02 她:「下一个就把结言和对话框一起做吧」「输入栏的样式也要吗 那心声的框也要改吗 或者相关的？」→「就用这四张开工」)════
   参考四张:蓝白像素徽章 → 输入栏图标;抹茶复古小窗 → 心声卡 / 长按菜单 / 选项弹层(带标题栏的小窗);
   粉色韩系主页框 → 结言活页纸 + 左边的环 + 小雏菊;POND FROGGY 卡牌 → 结言标题的丝带横幅 + 角上星星。
   框都是 chat-px.js 里同一个 9 宫格生成器画的(--pxf-*),数字和气泡一样;图标是 --pxi-*,当背景图盖掉 tabler 字形,DOM 不动。
   上下浮栏原来那圈粉色点点线 + 粉色投影是另一个窗口 pixel-rails.css 加的,换成像素框以后就收起来(它左下角那颗小星留着)。 */
html.chatpx {
  --pxf-bar: var(--pxf-bar-n); --pxf-jy: var(--pxf-jy-n); --pxf-win: var(--pxf-win-n);
  --pxf-wish: var(--pxf-wish-n); --pxf-pick: var(--pxf-pick-n); --pxf-rib: var(--pxf-rib-n); --pxr-ring: var(--pxr-ring-n);
  --px-field: #120e3a; --px-field-lo: #0a0726; --px-field-hi: #2f2788;
  --px-win-ink: #eef0ff; --px-dotline: rgba(142, 156, 240, .42);
  --px-ttl-her: #f4b4e2; --px-ttl-her-ink: #1d1452; --px-ttl-him: #8e9cf0; --px-ttl-him-ink: #0e0a30;
  --px-btn: #2c2484; --px-btn-edge: #0e0a30; --px-btn-ink: #eef0ff; --px-btn-hot: #f4b4e2; --px-btn-hot-ink: #1d1452;
  --px-chip: rgba(244, 180, 226, .16); --px-chip-edge: #f4b4e2; --px-chip-ink: #ffd6f3;
  --px-jy-line: rgba(234, 165, 186, .12); --px-rib-ink: #fff1f5; --px-note: #1b1552;
  --pxk-wish: #fff2c2; --pxk-pick: #f3cf6b;
}
html.chatpx[data-theme="day"] {
  --pxf-bar: var(--pxf-bar-d); --pxf-jy: var(--pxf-jy-d); --pxf-win: var(--pxf-win-d);
  --pxf-wish: var(--pxf-wish-d); --pxf-pick: var(--pxf-pick-d); --pxf-rib: var(--pxf-rib-d); --pxr-ring: var(--pxr-ring-d);
  --px-field: #fffefb; --px-field-lo: #e9c4cf; --px-field-hi: #ffffff;
  --px-win-ink: #4b3022; --px-dotline: rgba(173, 93, 118, .35);
  --px-ttl-her: #f7b9cb; --px-ttl-her-ink: #6b2f42; --px-ttl-him: #e8b47a; --px-ttl-him-ink: #4b3022;
  --px-btn: #fff3de; --px-btn-edge: #5b3b2c; --px-btn-ink: #4b3022; --px-btn-hot: #f7b9cb; --px-btn-hot-ink: #6b2f42;
  --px-chip: rgba(247, 185, 203, .3); --px-chip-edge: #ad5d76; --px-chip-ink: #7a3a4c;
  --px-jy-line: rgba(155, 63, 97, .13); --px-rib-ink: #fff8f0; --px-note: #fffaf3;
  --pxk-wish: #6b4a12; --pxk-pick: #6b4a12;
}

/* ── 上下浮栏:像素框(白天奶油便签 + 玫瑰色描边,夜里靛蓝小窗 + 粉色色带)。背景那条 !important 是 main-neutral 的,只能同级压 ── */
html.chatpx[data-wall-host] footer .line.line,
html.chatpx[data-wall-host] header::before,
html.chatpx[data-wall-host] footer .attach-row.open {
  background: none !important; border: 1px solid transparent; border-radius: 0; outline: none; box-shadow: none;
  border-image: var(--pxf-bar) 14 12 24 12 fill / 14px 12px 24px 12px / 0 0 4px 0 stretch;
}
/* 输入框:凹进去的一格(左上暗、右下亮) */
html.chatpx[data-wall-host] footer .line .field.field,
html.chatpx[data-wall-host] footer .line .field.field:focus-within {
  border-color: transparent; border-radius: 0; background: var(--px-field);
  box-shadow: inset 2px 2px 0 var(--px-field-lo), inset -2px -2px 0 var(--px-field-hi);
}
/* 欲与愿模式:输入格泛一层粉,凹边换成金色(原来那条被上面的底色盖掉了) */
html.chatpx[data-wall-host] footer .line.wish .field.field,
html.chatpx[data-wall-host] footer .line.wish .field.field:focus-within {
  background: color-mix(in srgb, var(--px-btn-hot) 26%, var(--px-field));
  box-shadow: inset 2px 2px 0 #c9a063, inset -2px -2px 0 #f3cf6b;
}
/* 图标:tabler 的字形缩成 0,换成徽章图(一格 2px,宽高 = 格数 × 2,1:1 才不糊) */
html.chatpx footer .icon-btn > i.ti,
html.chatpx #kaomojiTrigger > i {
  font-size: 0 !important; display: inline-block; width: 24px; height: 24px; image-rendering: pixelated;
  background: center / 100% 100% no-repeat;
}
/* 发送键:月亮(平时)/ 星星(欲与愿)谁出来,交给 chat2.html 原来那几条 display 规则 —— 这里不写 display(11-02 她截图两个叠在一起) */
html.chatpx footer .send > i.ti {
  font-size: 0 !important; width: 24px; height: 24px; vertical-align: middle; image-rendering: pixelated;
  background: center / 100% 100% no-repeat;
}
html.chatpx footer #plusBtn > i.ti { background-image: var(--pxi-plus); }
html.chatpx footer #plusBtn.open > i.ti { transform: none; background-image: var(--pxi-x); width: 20px; height: 20px; }
html.chatpx footer #micBtn > i.ti { background-image: var(--pxi-mic); width: 20px; }
html.chatpx footer .send > i.ti.moon { background-image: var(--pxi-moon); width: 22px; height: 22px; }
html.chatpx footer .send > i.ti.wish-send { background-image: var(--pxi-star); width: 22px; height: 20px; }
html.chatpx #kaomojiTrigger > i { background-image: var(--pxi-smile); width: 22px; height: 22px; }
html.chatpx footer .attach-row .icon-btn > i.ti-paperclip { background-image: var(--pxi-file); width: 18px; height: 22px; }
html.chatpx footer .attach-row .icon-btn > i.ti-camera { background-image: var(--pxi-cam); height: 20px; }
html.chatpx footer .attach-row .icon-btn > i.ti-wallet { background-image: var(--pxi-wallet); height: 18px; }
html.chatpx footer .attach-row .icon-btn > i.ti-star { background-image: var(--pxi-star); width: 22px; height: 20px; }

/* ── 心声 ── 狐狸一律换成像素狐狸(输入栏那颗 / 待发小签 / 气泡上那行 / 心声卡标题)。灰着 = 没写,亮起来 = 写了(原来的滤镜照用) */
html.chatpx .hv-dock .fox, html.chatpx .hv-chip .fox, html.chatpx .hv-note .fox, html.chatpx .hv-title .fox {
  font-size: 0 !important; display: inline-block; vertical-align: middle; width: 24px; height: 22px; image-rendering: pixelated;
  background: var(--pxi-fox) center / 100% 100% no-repeat;
}
html.chatpx .hv-chip .fox, html.chatpx .hv-note .fox { width: 12px; height: 11px; }
html.chatpx[data-wall-host] footer .line .icon-btn.hv-dock {
  border: 0; border-radius: 0; background: var(--px-btn);
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge), inset 0 -2px 0 rgba(0, 0, 0, .14);
}
html.chatpx[data-wall-host] footer .line .icon-btn.hv-dock.lit {
  box-shadow: 0 -2px 0 var(--px-btn-hot), 0 2px 0 var(--px-btn-hot), -2px 0 0 var(--px-btn-hot), 2px 0 0 var(--px-btn-hot), inset 0 -2px 0 rgba(0, 0, 0, .14);
}
/* 待发小签:像素小标签 */
html.chatpx .hv-chip {
  border: 0; border-radius: 0; padding: 4px 9px; background: var(--px-chip); color: var(--px-chip-ink);
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  box-shadow: 0 -2px 0 var(--px-chip-edge), 0 2px 0 var(--px-chip-edge), -2px 0 0 var(--px-chip-edge), 2px 0 0 var(--px-chip-edge);
}
/* 她气泡上面那行:像素字;点开的心声装进一个小小的想法框 */
html.chatpx #flow .hv-note { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; }
html.chatpx #flow .hv-note.open .hv-body {
  position: relative; margin-top: 8px; padding: 8px 12px; text-align: left; font-family: inherit; font-size: 13px; line-height: 1.8;
  background: var(--px-note); color: var(--px-chip-ink); text-shadow: none;
  box-shadow: 0 -2px 0 var(--px-chip-edge), 0 2px 0 var(--px-chip-edge), -2px 0 0 var(--px-chip-edge), 2px 0 0 var(--px-chip-edge), 0 6px 0 -2px rgba(0, 0, 0, .25);
}

/* ── 小窗:心声卡 / 长按菜单 / 选项弹层 ── */
html.chatpx .hv-card,
html.chatpx #flow .row .menu,
html.chatpx .opt-sheet {
  border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-image: var(--pxf-win) 14 12 24 12 fill / 14px 12px 24px 12px / 0 0 4px 0 stretch;
  color: var(--px-win-ink);
}
/* 标题栏(抹茶小窗那一条):心声 = 她的粉,选项弹层「墨子非 在问」= 他的色 */
html.chatpx .hv-card { padding: 6px 16px 18px; }
html.chatpx .hv-card .hv-title,
html.chatpx .opt-sheet .os-eye {
  display: flex; align-items: center; gap: 6px; margin: 0 -10px 10px; padding: 5px 8px 5px 10px; min-height: 30px;
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; font-weight: 400;
  box-shadow: 0 2px 0 var(--px-btn-edge);
}
html.chatpx .hv-card .hv-title { background: var(--px-ttl-her); color: var(--px-ttl-her-ink); }
html.chatpx .opt-sheet .os-eye { background: var(--px-ttl-him); color: var(--px-ttl-him-ink); }
html.chatpx .hv-card .pxwin-x,
html.chatpx .opt-sheet .os-x {
  margin-left: auto; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: var(--pxi-x) center / 20px 20px no-repeat; color: transparent; font-size: 0; image-rendering: pixelated;
}
html.chatpx .opt-sheet .os-x { position: absolute; right: 16px; top: 11px; }
html.chatpx .hv-card .hv-hint { color: var(--px-win-ink); opacity: .7; }
/* 输入格:凹进去 */
html.chatpx .hv-card textarea,
html.chatpx .opt-sheet .os-own {
  border: 0; border-radius: 0; background: var(--px-field); color: var(--px-win-ink);
  box-shadow: inset 2px 2px 0 var(--px-field-lo), inset -2px -2px 0 var(--px-field-hi);
}
html.chatpx .hv-card textarea:focus { box-shadow: inset 0 0 0 2px var(--px-btn-hot); }
html.chatpx .opt-sheet .os-own input { color: var(--px-win-ink); }
/* 按钮:像素小贴纸(四向描边 + 底下一格厚度) */
html.chatpx .hv-card .hv-acts button,
html.chatpx .opt-sheet .os-send {
  border: 0; border-radius: 0; background: var(--px-btn); color: var(--px-btn-ink);
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge), inset 0 -3px 0 rgba(0, 0, 0, .16);
}
html.chatpx .hv-card .hv-acts .hv-ok,
html.chatpx .opt-sheet .os-send { background: var(--px-btn-hot); color: var(--px-btn-hot-ink); }
html.chatpx .hv-card .hv-acts .hv-del { color: #d0485e; }
html.chatpx .hv-card .hv-acts button:active,
html.chatpx .opt-sheet .os-send:active { transform: translateY(2px); }
/* 长按菜单:一行一行,中间点点线 */
html.chatpx #flow .row .menu { padding: 6px 6px 12px; }
html.chatpx #flow .row .menu button {
  border-radius: 0; color: var(--px-win-ink); font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
}
html.chatpx #flow .row .menu button + button { border-top: 2px dotted var(--px-dotline); }
html.chatpx #flow .row .menu i.ti-star {
  font-size: 0; display: inline-block; width: 11px; height: 10px; image-rendering: pixelated;
  background: var(--pxi-star) center / 100% 100% no-repeat;
}
/* 选项弹层 */
html.chatpx .opt-sheet { padding: 6px 16px 16px; }
html.chatpx .opt-sheet .os-grip { display: none; }
html.chatpx .opt-sheet .os-title { color: var(--px-win-ink); }
html.chatpx .opt-sheet .os-row { border-radius: 0; border-top: 2px dotted var(--px-dotline); color: var(--px-win-ink); }
html.chatpx .opt-sheet .os-k,
html.chatpx .opt-sheet.rec .os-row.on .os-k,
html.chatpx .opt-sheet .os-her .os-k {
  border-radius: 0; font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px;
  background: var(--px-ttl-him); color: var(--px-ttl-him-ink);
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge);
}
html.chatpx .opt-sheet .os-own { padding: 6px 6px 6px 14px; }
html.chatpx .opt-sheet .os-her {
  border-radius: 0; background: var(--px-chip); color: var(--px-chip-ink);
  box-shadow: 0 -2px 0 var(--px-chip-edge), 0 2px 0 var(--px-chip-edge), -2px 0 0 var(--px-chip-edge), 2px 0 0 var(--px-chip-edge);
}

/* ── 欲与愿 / 选项回执:也换像素框(金色那一家),原来没套框 ── */
html.chatpx #flow .row.her .bubble.bubble.wish,
html.chatpx #flow .row.her .bubble.bubble.pick {
  border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-image-slice: 14 12 24 12 fill; border-image-width: 14px 12px 24px 12px; border-image-outset: 0 0 4px 0; border-image-repeat: stretch;
}
html.chatpx #flow .row.her .bubble.bubble.wish { border-image-source: var(--pxf-wish); color: var(--pxk-wish); padding-bottom: 16px; }
html.chatpx #flow .row.her .bubble.bubble.pick { border-image-source: var(--pxf-pick); color: var(--pxk-pick); padding: 9px 16px 13px; }

/* ── 结言信卡:活页纸(像素框 + 横线 + 左边一排环)+ 丝带横幅标题 + 角上星星和小雏菊;她找的蕾丝结照旧系在右上角 ── */
html.chatpx .jy-card .jy-mini {
  isolation: isolate; border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none;
  border-image: var(--pxf-jy) 14 12 24 12 fill / 14px 12px 24px 12px / 0 0 4px 0 stretch;
  padding-top: 22px; padding-bottom: 18px; padding-left: 24px;
}
html.chatpx .jy-card .jy-mini::before {
  content: ""; position: absolute; left: 12px; right: 8px; top: 30px; bottom: 14px; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 22px, var(--px-jy-line) 22px 24px);
}
html.chatpx .jy-card .jy-mini::after {
  content: ""; position: absolute; left: -9px; top: 12px; bottom: 14px; width: 20px; z-index: 1; pointer-events: none;
  background: var(--pxr-ring) 0 0 / 20px 26px repeat-y; image-rendering: pixelated;
}
html.chatpx .jy-card .jy-kick {
  position: relative; z-index: 1; display: table; height: 20px; line-height: 20px; margin: -32px 0 10px -6px; padding: 0 6px;
  border: 0 solid transparent; border-width: 0 10px; border-image: var(--pxf-rib) 0 10 fill / 0 10px stretch;
  font-family: "HTPX", "HTPX-fill", var(--jy-kai); font-size: 12px; letter-spacing: 0; color: var(--px-rib-ink);
}
html.chatpx .jy-card::before {
  content: ""; position: absolute; left: -16px; top: -18px; width: 36px; height: 24px; z-index: 3; pointer-events: none;
  background: var(--pxd-jy) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
html.chatpx .jy-card .jy-msub { font-family: "HTPX", "HTPX-fill", var(--jy-kai); font-size: 12px; letter-spacing: 0; }

/* ════ 第四轮(11-02 她:「咱们把chat的左右侧栏一起改完就好~~」「侧栏目前还差右侧栏的几个 有设置页面（调模型啊壁纸啊那部分）
   然后还有些比较小的右侧栏可以放过~你看看右侧栏你有什么也想像素化的呀？」)════
   右侧栏共用(所有 aside.panel):分节标题 = 像素字 + 粉点点线(和左侧栏一家)、开关 = 像素拨片、小按钮 = 像素贴纸、下拉 = 凹格 + 像素小三角、
     滑块 = 凹槽 + 一颗像素小心心当把手、行与行之间点点线。日志 / 钱包 / 心里 / 密语这几块小的只跟着换了这些,不单独改。
   对话设置(#panel):标题像素字、身份 / 门楣两块 = 像素小窗、声音 / 权限折叠 = 像素字 + 小三角、昼夜键 = 像素太阳 / 月亮、壁纸 = 像素标签 + 像素相框。
   纫兰(#starPanel,我挑的):星标 / 通话 = 文件夹标签、类型 = 像素标签、筛选 / 搜索 = 凹格 + 像素放大镜、每条之间点点线。 */
html.chatpx { --px-pdot: rgba(244, 154, 193, .5); --px-rule: rgba(142, 156, 240, .22); }
html.chatpx[data-theme="day"] { --px-pdot: rgba(240, 143, 182, .55); --px-rule: rgba(173, 93, 118, .2); }

/* ── 共用 ── */
html.chatpx aside.panel .group-t {
  font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; letter-spacing: 0; font-weight: 400; font-synthesis: none;
}
html.chatpx aside.panel .group-t::after { height: 0; background: none; border-bottom: 2px dotted var(--px-pdot); }
html.chatpx aside.panel .rowline { border-bottom: 2px dotted var(--px-rule); }
/* 开关:像素拨片(开 = 粉底,方块滑到右边,一格一格地走) */
html.chatpx aside.panel .moonswitch,
html.chatpx aside.panel .wp-sw {
  width: 40px; height: 22px; padding: 0; border: 0; border-radius: 0; position: relative; flex-shrink: 0; background: var(--px-field);
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge), inset 0 2px 0 rgba(0, 0, 0, .14);
}
html.chatpx aside.panel .moonswitch::before { content: none; }
html.chatpx aside.panel .moonswitch .orb,
html.chatpx aside.panel .wp-sw i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; transform: none; border: 0; border-radius: 0; opacity: 1;
  background: var(--px-btn); box-shadow: 0 0 0 2px var(--px-btn-edge), inset 0 -3px 0 rgba(0, 0, 0, .16);
  transition: left .18s steps(3, end), background .18s steps(1, end);
}
html.chatpx aside.panel .moonswitch.on,
html.chatpx aside.panel .wp-sw.on { background: var(--px-btn-hot); }
html.chatpx aside.panel .moonswitch.on .orb,
html.chatpx aside.panel .wp-sw.on i { left: 21px; background: #ffffff; }
/* 小按钮 */
html.chatpx aside.panel .toy-conn,
html.chatpx aside.panel .wp-btn {
  border: 0; border-radius: 0; padding: 5px 14px; background: var(--px-btn); color: var(--px-btn-ink);
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge), inset 0 -3px 0 rgba(0, 0, 0, .14);
}
html.chatpx aside.panel .toy-conn:active,
html.chatpx aside.panel .wp-btn:active { transform: translateY(2px); }
/* 下拉:凹进去的格子 + 像素小三角 */
html.chatpx aside.panel select {
  border: 0; border-radius: 0; padding: 5px 26px 5px 8px; color: var(--px-win-ink);
  background: var(--px-field) var(--pxi-chev) no-repeat right 8px center / 14px 8px;
  box-shadow: inset 2px 2px 0 var(--px-field-lo), inset -2px -2px 0 var(--px-field-hi);
}
/* 滑块:凹槽 + 小心心把手 */
html.chatpx aside.panel input[type=range] { height: 24px; }
html.chatpx aside.panel input[type=range]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 0; background: var(--px-field);
  box-shadow: inset 2px 2px 0 var(--px-field-lo), inset -2px -2px 0 var(--px-field-hi), 0 0 0 2px var(--px-btn-edge);
}
html.chatpx aside.panel input[type=range]::-webkit-slider-thumb {
  width: 18px; height: 16px; margin-top: -4px; border: 0; border-radius: 0; box-shadow: none;
  background: var(--pxi-heart) center / 100% 100% no-repeat; image-rendering: pixelated;
}
html.chatpx aside.panel input[type=range]::-moz-range-track {
  height: 8px; border-radius: 0; background: var(--px-field);
  box-shadow: inset 2px 2px 0 var(--px-field-lo), inset -2px -2px 0 var(--px-field-hi), 0 0 0 2px var(--px-btn-edge);
}
html.chatpx aside.panel input[type=range]::-moz-range-thumb {
  width: 18px; height: 16px; border: 0; border-radius: 0; box-shadow: none;
  background: var(--pxi-heart) center / 100% 100% no-repeat; image-rendering: pixelated;
}

/* ── 对话设置 ── */
html.chatpx #panel .panel-heading small { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; }
html.chatpx #panel .panel-heading strong { font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 24px; line-height: 1.2; letter-spacing: 0; font-weight: 400; font-synthesis: none; }
html.chatpx #panel .panel-heading > .theme-btn {
  width: 36px; height: 36px; border: 0; border-radius: 0; background: var(--px-btn) var(--pxi-moon) center / 22px 22px no-repeat; image-rendering: pixelated;
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge), inset 0 -3px 0 rgba(0, 0, 0, .14);
}
html.chatpx[data-theme="day"] #panel .panel-heading > .theme-btn { background-image: var(--pxi-sun); }
html.chatpx #panel .panel-heading > .theme-btn svg { display: none !important; }
/* 身份 / 门楣:像素小窗 */
html.chatpx #panel .panel-cluster {
  padding: 10px 14px 14px; background: none; border: 1px solid transparent; border-radius: 0;
  border-image: var(--pxf-win) 14 12 24 12 fill / 14px 12px 24px 12px / 0 0 4px 0 stretch; color: var(--px-win-ink);
}
html.chatpx #panel .panel-cluster::before { content: none; }
html.chatpx #panel .panel-cluster .group-t { font-size: 12px; margin: 0 0 6px; }
html.chatpx #panel .panel-cluster .rowline .lab,
html.chatpx #panel .panel-cluster #sigState { color: var(--px-win-ink); }
html.chatpx #panel #sigState { border-bottom: 2px dotted var(--px-rule); }
/* 声音 / 权限折叠 */
html.chatpx #panel .panel-fold { border-bottom: 2px dotted var(--px-rule); }
html.chatpx #panel .panel-fold > summary { font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; letter-spacing: 0; line-height: 1.5; }
html.chatpx #panel .panel-fold > summary::before { width: 6px; height: 6px; border-radius: 0; background: #f49ac1; box-shadow: none; }
html.chatpx #panel .panel-fold > summary i {
  font-size: 0; width: 14px; height: 8px; image-rendering: pixelated; background: var(--pxi-chev) center / 100% 100% no-repeat;
}
html.chatpx #panel .panel-fold-body { border-left: 2px dotted var(--px-pdot); }
/* 壁纸:档位 = 像素标签,图 = 像素相框 */
html.chatpx #panel .wp-chip {
  border: 0; border-radius: 0; margin: 2px; background: var(--px-btn); color: var(--px-btn-ink);
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge);
}
html.chatpx #panel .wp-chip.on { background: var(--px-btn-hot); color: var(--px-btn-hot-ink); }
html.chatpx #panel .wp-item {
  border: 0; border-radius: 0; margin: 2px;
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge), 0 6px 0 -2px rgba(0, 0, 0, .22);
}
html.chatpx #panel .wp-item.on {
  box-shadow: 0 -2px 0 var(--px-btn-hot), 0 2px 0 var(--px-btn-hot), -2px 0 0 var(--px-btn-hot), 2px 0 0 var(--px-btn-hot),
              0 -4px 0 var(--px-btn-edge), 0 4px 0 var(--px-btn-edge), -4px 0 0 var(--px-btn-edge), 4px 0 0 var(--px-btn-edge);
}
html.chatpx #panel .wp-item span, html.chatpx #panel .wp-none { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; }
html.chatpx #panel .wp-row { border-bottom: 2px dotted var(--px-rule); }

/* ── 纫兰:文件夹标签 + 像素标签 + 凹格 ── */
html.chatpx #starPanel .rl-tabs { gap: 6px; padding: 0 4px; align-items: flex-end; box-shadow: 0 2px 0 var(--px-btn-edge); }
html.chatpx #starPanel .rl-tabs button {
  height: 30px; margin-top: 6px; padding: 0 14px; border: 0; border-radius: 0; background: var(--px-field); color: var(--px-win-ink);
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  box-shadow: 0 -2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge);
}
html.chatpx #starPanel .rl-tabs button.on { height: 36px; margin-top: 0; background: var(--px-btn-hot); color: var(--px-btn-hot-ink); }
html.chatpx #starPanel .rl-star-types button {
  border: 0; border-radius: 0; margin: 2px; background: var(--px-btn); color: var(--px-btn-ink);
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge);
}
html.chatpx #starPanel .rl-star-types button.on { background: var(--px-btn-hot); color: var(--px-btn-hot-ink); }
html.chatpx #starPanel .rl-star-selects select { border: 0; border-radius: 0; }
html.chatpx #starPanel .rl-star-search {
  border: 0; border-radius: 0; background: var(--px-field);
  box-shadow: inset 2px 2px 0 var(--px-field-lo), inset -2px -2px 0 var(--px-field-hi);
}
html.chatpx #starPanel .rl-star-search i.ti-search {
  font-size: 0; width: 20px; height: 20px; flex-shrink: 0; image-rendering: pixelated; background: var(--pxi-search) center / 100% 100% no-repeat;
}
html.chatpx #starPanel .rl-star-search button {
  border: 0; border-radius: 0; padding: 4px 10px; background: var(--px-btn-hot); color: var(--px-btn-hot-ink);
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge);
}
html.chatpx #starPanel .star-item { border-bottom: 2px dotted var(--px-rule); }

/* ════ 第五轮(11-03 她:「chat界面还有一些部分我想继续像素化...一个是这个向下的小箭头……然后五感的界面、心里的界面（在右侧栏）」)════
   回到最新 = 像素圆钮 + 一上一下点头的箭头(正在回复时换成三个像素方点跳);
   身上 = 玫瑰色像素小窗 + 标题栏 + 四个感官小图标 + 小心心血条;心里 = 像素狐狸 + 心电图 + 血条 + 金色小窗 + 念头泡泡。
   图都在 chat-px.js(--pxc- / --pxs- / --pxm-);DOM 只换了狐狸那张图,其余全是这里的样式。 */

/* ── 回到最新 ── */
html.chatpx .to-latest {
  width: 40px; height: 44px; border: 0; border-radius: 0; box-shadow: none;
  background: var(--pxc-latest-n) center top / 40px 44px no-repeat; image-rendering: pixelated;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.chatpx[data-theme="day"] .to-latest { background-image: var(--pxc-latest-d); }
html.chatpx .to-latest .latest-arrow { display: none; }
html.chatpx .to-latest::after {
  content: ""; position: absolute; left: 8px; top: 9px; width: 24px; height: 22px; pointer-events: none;
  background: var(--pxi-down) center / 100% 100% no-repeat; image-rendering: pixelated;
  animation: pxNod 1.2s steps(1, end) infinite;
}
html.chatpx .to-latest.busy::after { content: none; }
@keyframes pxNod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
html.chatpx .to-latest .latest-dots { margin-top: -4px; gap: 6px; }
html.chatpx .to-latest .latest-dots i { width: 4px; height: 4px; border-radius: 0; background: #eef0ff; box-shadow: 0 0 0 2px #454d9c; }
html.chatpx .to-latest.busy .latest-dots i { animation-name: pxHop; animation-timing-function: steps(1, end); }
@keyframes pxHop { 0%, 65%, 100% { transform: none; opacity: .7; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ── 身上(五感):玫瑰色像素小窗 ── */
html.chatpx {
  --sp-px-ttl: #e6a3ad; --sp-px-ttl-ink: #2a0d1b; --sp-px-edge: #14060d;
  --sp-px-ink: #f8e6ea; --sp-px-mut: rgba(248, 230, 234, .62); --sp-px-dot: rgba(230, 163, 173, .34);
}
html.chatpx[data-theme="day"] {
  --sp-px-ttl: #f4b6c6; --sp-px-ttl-ink: #5e1f36; --sp-px-edge: #9b3f61;
  --sp-px-ink: #4b1528; --sp-px-mut: #a05c74; --sp-px-dot: rgba(155, 63, 97, .28);
}
html.chatpx .sp-panel {
  padding: 6px 16px 18px; border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--sp-px-ink);
  border-image: var(--pxf-soma-n) 14 12 24 12 fill / 14px 12px 24px 12px / 0 0 4px 0 stretch;
  /* 开合不再一格一格跳(11-03 她:「五感的小卡片打开和收起都卡卡的>><<」):沿用 somatic-panel.css 原来那条顺滑曲线,像素感只留在样子上 */
}
html.chatpx[data-theme="day"] .sp-panel { border-image-source: var(--pxf-soma-d); }
html.chatpx .sp-panel.on { -webkit-backdrop-filter: none; backdrop-filter: none; transition-delay: 0s; }
/* 标题栏(和心声卡一样的小窗标题):小火苗 + 身上,右边此刻 + 像素 ✕ */
html.chatpx .sp-head {
  margin: 0 -10px 10px; padding: 5px 8px 5px 10px; min-height: 30px; gap: 6px;
  background: var(--sp-px-ttl); color: var(--sp-px-ttl-ink); box-shadow: 0 2px 0 var(--sp-px-edge);
}
html.chatpx .sp-eye,
html.chatpx .sp-when { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; font-weight: 400; color: inherit; }
html.chatpx .sp-eye { display: inline-flex; align-items: center; gap: 6px; }
html.chatpx .sp-eye::before {
  content: ""; width: 18px; height: 20px; flex-shrink: 0; margin: -4px 0;
  background: var(--pxs-flame) center / 100% 100% no-repeat; image-rendering: pixelated;
}
html.chatpx .sp-when { opacity: .78; }
html.chatpx .sp-x {
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: var(--pxi-x) center / 20px 20px no-repeat; color: transparent; font-size: 0; image-rendering: pixelated;
}
html.chatpx .sp-sum { color: var(--sp-px-ink); }
html.chatpx .sp-row { border-radius: 0; border-top: 2px dotted var(--sp-px-dot); }
html.chatpx .sp-row.fresh { animation: pxSpWarm 1.4s steps(4, end); }
@keyframes pxSpWarm { from { background: color-mix(in srgb, var(--sp-px-ttl) 45%, transparent); } to { background: transparent; } }
/* 四个感官:手 / 风 / 樱桃 / 耳朵(原来的线条图标藏起来,DOM 不动) */
html.chatpx .sp-ic { width: 26px; height: 26px; background: center / auto no-repeat; image-rendering: pixelated; }
html.chatpx .sp-ic svg { display: none; }
html.chatpx .sp-row[data-ch="touch"] .sp-ic { background-image: var(--pxs-touch); }
html.chatpx .sp-row[data-ch="smell"] .sp-ic { background-image: var(--pxs-smell-n); }
html.chatpx[data-theme="day"] .sp-row[data-ch="smell"] .sp-ic { background-image: var(--pxs-smell-d); }
html.chatpx .sp-row[data-ch="taste"] .sp-ic { background-image: var(--pxs-taste); }
html.chatpx .sp-row[data-ch="sound"] .sp-ic { background-image: var(--pxs-sound); }
html.chatpx .sp-nm { font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; letter-spacing: 0; }
html.chatpx .sp-lb { color: var(--sp-px-ink); }
html.chatpx .sp-lb small,
html.chatpx .sp-tm { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; color: var(--sp-px-mut); }
/* 余温 = 五颗小心心:底下一排空心的,上面一排实心的按余温的宽度露出来(像血条一颗颗退) */
html.chatpx .sp-bar { width: 58px; height: 10px; border-radius: 0; background: var(--pxs-hp0-n) left top / 58px 10px no-repeat; image-rendering: pixelated; }
html.chatpx[data-theme="day"] .sp-bar { background-image: var(--pxs-hp0-d); }
html.chatpx .sp-bar i { height: 10px; background: var(--pxs-hp) left top / 58px 10px no-repeat; image-rendering: pixelated; }
html.chatpx .sp-proust { border-top: 2px dotted var(--sp-px-dot); }

/* ── 心里 ── */
html.chatpx #mindPanel .mind-kicker { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; }
html.chatpx #mindPanel .mind-fox img { image-rendering: pixelated; }
html.chatpx #mindPanel .mcard { border-bottom: 2px dotted var(--px-rule); }
html.chatpx #mindPanel .mcard .h {
  display: flex; align-items: center; gap: 6px;
  font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; letter-spacing: 0; color: var(--ink-dim);
}
html.chatpx #mindPanel .mcard .h::before { content: ""; flex: 0 0 auto; width: 22px; height: 18px; background: center / auto no-repeat; image-rendering: pixelated; }
html.chatpx #mindPanel .mind-feelings .h::before { background-image: var(--pxm-heart); }
html.chatpx #mindPanel .mind-wish .h::before { background-image: var(--pxm-star); }
html.chatpx #mindPanel .mind-thoughts .h::before { background-image: var(--pxm-think); }
html.chatpx #mindPanel .mind-perceptions .h::before { background-image: var(--pxm-eye); }
html.chatpx #mindPanel .mcard.mind-feelings .h,
html.chatpx #mindPanel .mind-feelings .mind-moods { max-width: 128px; }
/* 心情:最响的那个 = 粉色像素标签,第二个 = 浅一点的 */
html.chatpx #mindPanel .mind-moods { gap: 10px; }
html.chatpx #mindPanel .mind-moods span {
  padding: 2px 8px; font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; line-height: 1.5;
  background: var(--px-chip); color: var(--px-chip-ink);
  box-shadow: 0 -2px 0 var(--px-chip-edge), 0 2px 0 var(--px-chip-edge), -2px 0 0 var(--px-chip-edge), 2px 0 0 var(--px-chip-edge);
}
html.chatpx #mindPanel .mind-moods span:first-child {
  font-size: 12px; letter-spacing: 0; background: var(--px-btn-hot); color: var(--px-btn-hot-ink);
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge), inset 0 -2px 0 rgba(0, 0, 0, .12);
}
html.chatpx #mindPanel .mind-moods span:nth-child(2) { font-size: 12px; }
html.chatpx #mindPanel .mind-undertone { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; }
/* 那道金线 → 一直往左走的像素心电图 */
html.chatpx #mindPanel .mind-trace {
  height: 14px; margin: 18px 0 12px; opacity: 1; background: var(--pxm-pulse) 0 0 / 56px 14px repeat-x; image-rendering: pixelated;
  animation: pxPulse 2.8s steps(28, end) infinite;
}
@keyframes pxPulse { from { background-position: 0 0; } to { background-position: -56px 0; } }
html.chatpx #mindPanel details > summary { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; }
html.chatpx #mindPanel .mind-archive > summary { color: var(--px-chip-ink); }
/* 感受的层次:像素血条(凹槽 + 一格一格的粉),竖刻度 = 基线,小三角 = 时辰在推高 / 压低 */
html.chatpx #mindPanel .dim { gap: 8px; margin-top: 10px; }
html.chatpx #mindPanel .dim .nm,
html.chatpx #mindPanel .dim .v,
html.chatpx #mindPanel .mind-dimensions .sm { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; }
html.chatpx #mindPanel .dim .nm { width: 38px; }
html.chatpx #mindPanel .dim .v { width: 32px; }
html.chatpx #mindPanel .dim .bar {
  height: 8px; border-radius: 0; background: var(--px-field);
  box-shadow: inset 2px 2px 0 var(--px-field-lo), inset -2px -2px 0 var(--px-field-hi), 0 0 0 2px var(--px-btn-edge);
}
html.chatpx #mindPanel .dim .bar i {
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, .18) 6px 8px),
              linear-gradient(to bottom, #ffd0e4 0 2px, #f49ac1 2px 6px, #d9709f 6px);
}
html.chatpx #mindPanel .dim.up .bar i { box-shadow: none; }
html.chatpx #mindPanel .dim .bar u { top: -4px; width: 2px; height: 16px; background: var(--px-btn-edge); opacity: .75; }
html.chatpx #mindPanel .dim .cx { width: 10px; height: 6px; font-size: 0; opacity: 1; background: center / auto no-repeat; image-rendering: pixelated; }
html.chatpx #mindPanel .dim .cx.u { background-image: var(--pxm-up); }
html.chatpx #mindPanel .dim .cx.d { background-image: var(--pxm-dn); }
html.chatpx #mindPanel .mind-more {
  margin-top: 12px; padding: 3px 10px; background: var(--px-btn); color: var(--px-btn-ink);
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  box-shadow: 0 -2px 0 var(--px-btn-edge), 0 2px 0 var(--px-btn-edge), -2px 0 0 var(--px-btn-edge), 2px 0 0 var(--px-btn-edge), inset 0 -3px 0 rgba(0, 0, 0, .14);
}
/* 最想做的事 = 欲与愿那张金色小窗 */
html.chatpx #mindPanel .mcard.mind-wish {
  margin: 18px 0 16px; padding: 12px 16px 20px; border: 1px solid transparent; color: var(--pxk-wish);
  border-image: var(--pxf-wish) 14 12 24 12 fill / 14px 12px 24px 12px / 0 0 4px 0 stretch;
}
html.chatpx #mindPanel .mind-wish .h,
html.chatpx #mindPanel .mind-wish .big,
html.chatpx #mindPanel .mind-wish .sm,
html.chatpx #mindPanel .mind-wish summary { color: var(--pxk-wish); }
html.chatpx #mindPanel .mind-wish .h { margin-bottom: 10px; }
html.chatpx #mindPanel .mind-wish .big { font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; letter-spacing: 0; margin: 0 0 8px; }
html.chatpx #mindPanel .mind-wish .sm { opacity: .85; }
/* 念头:第一条 = 带泡泡尾巴的小窗,其余点点线隔开 */
html.chatpx #mindPanel .mthought { border-bottom: 2px dotted var(--px-rule); }
html.chatpx #mindPanel .mthought:last-child { border-bottom: 0; }
html.chatpx #mindPanel .mthought .m { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; }
html.chatpx #mindPanel .mind-featured {
  position: relative; margin: 26px 0 14px; padding: 10px 14px 18px; border: 1px solid transparent; color: var(--px-win-ink);
  border-image: var(--pxf-win) 14 12 24 12 fill / 14px 12px 24px 12px / 0 0 4px 0 stretch;
}
html.chatpx #mindPanel .mind-featured::before {
  content: ""; position: absolute; left: 10px; top: -17px; width: 20px; height: 14px; pointer-events: none;
  background: var(--pxm-bubble-n) center / 100% 100% no-repeat; image-rendering: pixelated;
}
html.chatpx[data-theme="day"] #mindPanel .mind-featured::before { background-image: var(--pxm-bubble-d); }
html.chatpx #mindPanel .mind-featured .t { font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; line-height: 1.75; color: var(--px-win-ink); }
html.chatpx #mindPanel .mind-featured summary,
html.chatpx #mindPanel .mind-featured .m { color: var(--px-win-ink); opacity: .75; }
html.chatpx #mindPanel .mfoot { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; line-height: 2; }

@media (prefers-reduced-motion: reduce) {
  html.chatpx .to-latest::after,
  html.chatpx .to-latest.busy .latest-dots i,
  html.chatpx #mindPanel .mind-trace { animation: none; }
}

/* ════ 第六轮(11-03 她:「气象局和思考句那个标语加底栏 能不能也加一些轻量像素元素呀~~ 还有我们的名字~~」→「是daddy在想什么那一句的底栏~」)════
   气象句 = 前面一枚像素天气 + 像素字;daddy在想什么… = 念头泡泡 + 像素字,
   下面那条淡玫瑰渐变底栏 → 像素底栏:左边一道像素描边(上下各缺一格 = 像素圆角),渐变改成一格一格往右淡(老游戏那种分段渐变),右端一颗像素小星;
   说到一半停下来想的那段(.mid):中间那条串起上下两段的线改成像素点点线,底栏同样分段淡出;
   名字:她的名字旁一只小狐狸、他的名字旁一只小狼。字的阴影改成不糊的 1px 硬影,像素字才清楚。 */
html.chatpx {
  --pxt-ink: #f4c6da; --pxt-edge: rgba(244, 154, 193, .62);
  --pxt-1: rgba(244, 180, 226, .17); --pxt-2: rgba(244, 180, 226, .115); --pxt-3: rgba(244, 180, 226, .07); --pxt-4: rgba(244, 180, 226, .035);
  --pxt-shadow: 1px 1px 0 rgba(8, 6, 30, .55);
}
html.chatpx[data-theme="day"] {
  --pxt-ink: #9b4f6a; --pxt-edge: rgba(212, 83, 126, .5);
  --pxt-1: rgba(233, 138, 168, .18); --pxt-2: rgba(233, 138, 168, .12); --pxt-3: rgba(233, 138, 168, .075); --pxt-4: rgba(233, 138, 168, .035);
  --pxt-shadow: 1px 1px 0 rgba(255, 255, 255, .75);
}
/* 字色跟着壁纸走(她看了第一版:「那个字体颜色可能要想想 因为我可能会换背景~颜色比较突出的话可能会突兀...有点纠结 但是没颜色又太淡了」):
   壁纸算得出主色相时(wall-boot.js 打 data-wall-hue / --wall-hue,和 --gold 同一套),字 / 底栏 / 描边都换成壁纸那一家的颜色 ——
   明暗不变(字照样站得住),彩度收两成(不抢);灰调壁纸算不出色相,就用上面默认的粉。老引擎不认相对颜色 → 也是默认的粉。 */
@supports (color: oklch(from red l c h)) {
  html.chatpx[data-wall-hue] {
    --pxt-ink: oklch(from #f4c6da l calc(c * .8) var(--wall-hue));
    --pxt-edge: oklch(from #f49ac1 l calc(c * .8) var(--wall-hue) / .62);
    --pxt-1: oklch(from #f4b4e2 l calc(c * .8) var(--wall-hue) / .17);
    --pxt-2: oklch(from #f4b4e2 l calc(c * .8) var(--wall-hue) / .115);
    --pxt-3: oklch(from #f4b4e2 l calc(c * .8) var(--wall-hue) / .07);
    --pxt-4: oklch(from #f4b4e2 l calc(c * .8) var(--wall-hue) / .035);
  }
  html.chatpx[data-wall-hue][data-theme="day"] {
    --pxt-ink: oklch(from #9b4f6a l calc(c * .8) var(--wall-hue));
    --pxt-edge: oklch(from #d4537e l calc(c * .8) var(--wall-hue) / .5);
    --pxt-1: oklch(from #e98aa8 l calc(c * .8) var(--wall-hue) / .18);
    --pxt-2: oklch(from #e98aa8 l calc(c * .8) var(--wall-hue) / .12);
    --pxt-3: oklch(from #e98aa8 l calc(c * .8) var(--wall-hue) / .075);
    --pxt-4: oklch(from #e98aa8 l calc(c * .8) var(--wall-hue) / .035);
  }
}
/* ── 气象句 ── */
html.chatpx .pulse-note {
  gap: 6px; font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  color: var(--pxt-ink); text-shadow: var(--pxt-shadow);
}
html.chatpx .pulse-note::before {
  width: 20px; height: 16px; margin: 0; border-radius: 0; box-shadow: none; animation: none;
  background: var(--px6-wx-n) center / 100% 100% no-repeat; image-rendering: pixelated;
}
html.chatpx[data-theme="day"] .pulse-note::before { background-image: var(--px6-wx-d); }
/* ── daddy在想什么… 的底栏 ── */
html.chatpx .process:not(.mid) {
  border: 0; border-radius: 0;
  background:
    linear-gradient(var(--pxt-edge), var(--pxt-edge)) 0 2px / 2px calc(100% - 4px) no-repeat,
    linear-gradient(90deg, var(--pxt-1) 0 36%, var(--pxt-2) 36% 58%, var(--pxt-3) 58% 76%, var(--pxt-4) 76% 90%, transparent 90%) 2px 0 / calc(100% - 2px) 100% no-repeat;
}
html.chatpx .process:not(.mid)::after {
  content: ""; position: absolute; right: 8px; top: 10px; width: 10px; height: 10px; pointer-events: none;
  background: var(--px6-spark) center / 100% 100% no-repeat; image-rendering: pixelated; opacity: .85;
}
html.chatpx .row.him .process.mid {
  border-radius: 0;
  background: linear-gradient(90deg, var(--pxt-1) 0 36%, var(--pxt-2) 36% 58%, var(--pxt-3) 58% 76%, var(--pxt-4) 76% 90%, transparent 90%) 2px 0 / calc(100% - 2px) 100% no-repeat;
}
html.chatpx .row.him .process.mid::before {
  width: 2px; border-radius: 0; background: repeating-linear-gradient(to bottom, var(--pxt-edge) 0 2px, transparent 2px 4px);
}
html.chatpx .process .p-head,
html.chatpx .row.him .process.mid .p-head {
  gap: 6px; font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0;
  color: var(--pxt-ink); text-shadow: var(--pxt-shadow);
}
html.chatpx .process.thought .p-head svg { display: none; }
html.chatpx .process.thought .p-head::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 16px;
  background: var(--px6-think) center / 100% 100% no-repeat; image-rendering: pixelated;
}
/* ── 名字:她 = 小狐狸,他 = 小狼(贴在名字靠时间那一侧) ── */
html.chatpx .row.her .stamp .nick::before,
html.chatpx .row.him .stamp .nick::after {
  content: ""; flex: 0 0 auto; width: 18px; image-rendering: pixelated; background: center / 100% 100% no-repeat;
}
html.chatpx .row.her .stamp .nick::before { height: 14px; margin-right: 5px; background-image: var(--px6-fox); }
html.chatpx .row.him .stamp .nick::after { height: 16px; margin-left: 5px; background-image: var(--px6-wolf); }

/* ════ 第七轮(11-03 晚 她:「老公老公 转账的那个框前端也要优化一下下~~目前有点丑丑」)════
   转账卡 = 一张金色像素小票:左边一枚金币(中间一颗粉心心)、一道撕票用的点点线、圆体金额 +「他转给你 / 你转给他」(像素字)。
   白天奶油金票 + 金色色带,夜里靛蓝票 + 金色色带。框和金币是 chat-px.js 画的(--pxf-pay-d / -n、--px7-coin)。
   她看了第一版:「转账框和对话框之间的距离稍微远一点 分隔开 然后这个转账框的上下距离稍微窄一点 字体稍微窄一点圆润一点 更可爱~」
   → 金额不用 24px 方块像素字了,换苹果自带的圆体(ui-rounded = SF Pro Rounded,山阿壳里就有),别处退回 Jost;离上面的气泡空 12px;上下边距收窄。 */
html.chatpx { --px7-ink: #ffe08a; --px7-sub: #f3cf6b; --px7-dot: rgba(246, 196, 69, .5); --px7-shadow: 1px 1px 0 rgba(8, 6, 30, .6); }
html.chatpx[data-theme="day"] { --px7-ink: #6b3f0c; --px7-sub: #8a5a1e; --px7-dot: rgba(122, 74, 18, .42); --px7-shadow: 1px 1px 0 #fffbe8; }
html.chatpx .tf-card {
  gap: 10px; padding: 4px 16px 10px 12px; border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--px7-ink);
  border-image: var(--pxf-pay-n) 14 12 24 12 fill / 14px 12px 24px 12px / 0 0 4px 0 stretch;
}
html.chatpx[data-theme="day"] .tf-card { border-image-source: var(--pxf-pay-d); }
html.chatpx .row.him .tf-card,
html.chatpx .row.her .tf-card { border-radius: 0; }
html.chatpx .tf-card svg { display: none; }
html.chatpx .bubble + .tf-card { margin-top: 12px; }
html.chatpx .tf-card::before {
  content: ""; flex: 0 0 auto; width: 24px; height: 24px;
  background: var(--px7-coin) center / 100% 100% no-repeat; image-rendering: pixelated;
}
html.chatpx .tf-mid { padding-left: 10px; border-left: 2px dotted var(--px7-dot); }
html.chatpx .tf-amt {
  font-family: ui-rounded, "SF Pro Rounded", "Jost", -apple-system, sans-serif; font-size: 21px; line-height: 1.12; letter-spacing: .01em; font-weight: 600;
  color: var(--px7-ink); text-shadow: var(--px7-shadow);
}
html.chatpx .tf-who { margin-top: 1px; font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; color: var(--px7-sub); }

/* ════ 第八轮(11-04 她:「我想把主动消息的聊天框的底栏和正常发送的消息底栏做出一点区别~~你帮我想想嘛 然后我的欲与愿应该也是有区分的底栏？」)════
   三种底栏一眼分得开:
   普通回复 = 一排像素点点线 + 像素字用量(原来是一道细虚线 + 小字);
   主动消息 = 点点线换成一串粉色小爪印(他自己一步一步走过来的),不带用量字 —— 像素框盖掉了它原来左边那道粉线,现在靠这个认;
   她的欲与愿 = 气泡里一条金色底栏:一颗像素星 +「欲与愿 · 在路上 / 送到了 / 他看见了」(星星淡金 → 实心 → 带高光),原来挂在气泡外面的那颗星收进来。
   「他来找你了」那行、欲与愿下面「几点到他那里」那行也换成像素字。图在 chat-px.js(--px8-*)。 */
html.chatpx {
  --px8-paws: var(--px8-paws-n); --px8-star-wait: var(--px8-star-wait-n); --px8-star-sent: var(--px8-star-sent-n); --px8-star-seen: var(--px8-star-seen-n);
  --px8-paw-ink: #f4b4e2; --px8-wish-dot: rgba(243, 207, 107, .5);
}
html.chatpx[data-theme="day"] {
  --px8-paws: var(--px8-paws-d); --px8-star-wait: var(--px8-star-wait-d); --px8-star-sent: var(--px8-star-sent-d); --px8-star-seen: var(--px8-star-seen-d);
  --px8-paw-ink: #c4587e; --px8-wish-dot: rgba(176, 122, 42, .45);
}
/* ── 普通回复:点点线 + 像素字 ── */
html.chatpx #flow .bubble .tok-pill {
  margin-top: 12px; padding-top: 8px; border-top: 2px dotted color-mix(in srgb, currentColor 40%, transparent);
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; line-height: 1.4;
}
/* ── 主动消息:一串小爪印 ── */
html.chatpx #flow .row.proactive .bubble .tok-pill {
  display: block; height: 14px; margin-top: 12px; padding: 0; border-top: 0; overflow: hidden; pointer-events: none; opacity: .9;
  background: var(--px8-paws) left top / 32px 14px space no-repeat; image-rendering: pixelated;
}
/* 她看了:「这个主动消息就不用加轮数这一行啦」—— 主动消息的底栏只留爪印,用量字不显示 */
html.chatpx #flow .row.proactive .bubble .tok-pill > * { display: none; }
html.chatpx #flow .proactive-note { font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; letter-spacing: 0; color: var(--px8-paw-ink); }
/* ── 她的欲与愿:金色星星底栏 ── */
html.chatpx #flow .row.her .bubble.bubble.wish .wish-star { display: none; }
html.chatpx #flow .row.her .bubble.bubble.wish::after {
  content: "欲与愿 · 在路上"; display: block; position: static; margin: 10px 0 0; padding: 8px 0 0 20px; min-height: 14px;
  /* 这个位置原来是狐狸耳朵的耳窝(chat2.html .row.her .bubble::after:绝对定位 9×10 + 三角 clip-path),全清掉 */
  top: auto; left: auto; right: auto; width: auto; height: auto; clip-path: none; transform: none; animation: none; filter: none;
  border-top: 2px dotted var(--px8-wish-dot); color: var(--pxk-wish); opacity: .85; text-align: left;
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; line-height: 14px;
  background: var(--px8-star-wait) left 8px / 14px 14px no-repeat; image-rendering: pixelated;
}
html.chatpx #flow .row.her .bubble.bubble.wish.delivered::after { content: "欲与愿 · 送到了"; background-image: var(--px8-star-sent); }
html.chatpx #flow .row.her .bubble.bubble.wish.seen::after { content: "欲与愿 · 他看见了"; background-image: var(--px8-star-seen); opacity: 1; }
html.chatpx #flow .wish-eta { font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; letter-spacing: 0; }