/* 左侧栏像素化 v2(11-01 她:「先做左侧栏」→ 11-02「这两个框不好看ww 你没抠到精髓~再看看参考？也可以加入你的设计 这是我们共用的地方~」)。
   只在 #drawer.px 下生效(drawer-px.js 加的 class),不加载 = 原样。默认夜里,[data-theme="day"] 白天。
   夜里工具格 = 紫色菜单板(星云贴图、上亮下暗、白字压深影)+ 背后一轮月亮 + 垂星星的小树 + 花瓣 + 小熊 + 最下面撕开的丝带;
   白天工具格 = 一整块苔藓面板,格子凹进去(左上暗、右下亮)+ 苔藓爬边、百合、小橘花、蘑菇、青色光点、小熊。新对话 / 心里 = 便签纸。
   字用今日小屏那套方舟像素字(her-todo.css 定义的 HTPX / HTPX-fill):只在 12px 上清楚、没有粗体 —— 别加粗、别加字距。
   像素描边用四向 box-shadow(四个角留缺口 = 像素圆角);贴图一律 2 倍 + image-rendering: pixelated。
   选择器用 #drawer.px:chat2.html 后面还有一段 [data-theme="day"] aside.drawer … 的玻璃样式,同权重又写在后面会把这里盖掉。 */
#drawer.px { --pxdot: #f49ac1; }
[data-theme="day"] #drawer.px { --pxdot: #f08fb6; }

/* ── 分节标题:像素字 + 粉色点点线 ── */
#drawer.px .dsec { font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; line-height: 1.5; letter-spacing: 0; font-weight: 400; font-synthesis: none; }
#drawer.px .dsec::after { height: 0; background: none; border-bottom: 2px dotted var(--pxdot); opacity: .8; }
#drawer.px .dsec .act { font-size: 12px; letter-spacing: 0; }

/* ── 「我们的」「这里」:像素小图标 + 像素字(右边那行小字照旧) ── */
#drawer.px .foot-link { font-family: "HTPX", "HTPX-fill", -apple-system, "PingFang SC", sans-serif; font-size: 12px; line-height: 1.5;
  letter-spacing: 0; font-weight: 400; font-synthesis: none; }
#drawer.px .foot-link .pxi { width: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
#drawer.px .pxi svg { display: block; }
#drawer.px .foot-link:active .pxi { color: var(--gold); }

/* ── 装饰件通用 ── */
#drawer.px .pxd { position: absolute; pointer-events: none; line-height: 0; z-index: 1; }
#drawer.px .pxd svg, #drawer.px .pxd img { display: block; image-rendering: pixelated; }
#drawer.px .pxd.day { display: none; }
[data-theme="day"] #drawer.px .pxd.day { display: block; }
[data-theme="day"] #drawer.px .pxd.night { display: none; }

/* ── 便签纸:新对话 + 心里。夜里 = 深蓝夜信纸(淡紫描边 / 横线 / 胶带,角上三颗小星);白天 = 奶油纸(棕描边、粉胶带、角上小花)。
   11-02 她:「夜里的这个便签现在和白天的是完全一样的,要作出区分来」 ── */
#drawer.px .new-chat,
#drawer.px .mind {
  position: relative; border: 0; border-radius: 0; color: #efe6ff;
  background: #2a2f57 url(/static/img/px/paper-night.png?v=1) 0 0 / 48px 48px repeat; image-rendering: pixelated;
  box-shadow: 0 -2px 0 #9d8ee0, 0 2px 0 #9d8ee0, -2px 0 0 #9d8ee0, 2px 0 0 #9d8ee0, inset 0 -2px 0 #22264a, 0 6px 0 -2px rgba(0, 0, 0, .45);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
[data-theme="day"] #drawer.px .new-chat,
[data-theme="day"] #drawer.px .mind {
  color: #6b4b3e; background: #f3e8d5 url(/static/img/px/paper.png?v=1) 0 0 / 48px 48px repeat;
  box-shadow: 0 -2px 0 #8d6a58, 0 2px 0 #8d6a58, -2px 0 0 #8d6a58, 2px 0 0 #8d6a58, inset 0 -2px 0 #e2d2b9, 0 6px 0 -2px rgba(40, 24, 18, .28);
}
#drawer.px .new-chat { margin: 4px 2px 4px 6px; padding: 10px 14px 10px 22px;
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; line-height: 1.5; letter-spacing: 0; font-weight: 400; font-synthesis: none; }
#drawer.px .new-chat:hover { color: #fff; }
[data-theme="day"] #drawer.px .new-chat:hover { color: #4f3328; }
#drawer.px .new-chat .pxi { display: inline-flex; width: 12px; justify-content: center; }
#drawer.px .new-chat .pxd.bow { left: -10px; top: -9px; color: #f3e9ff; }
[data-theme="day"] #drawer.px .new-chat .pxd.bow { color: #8d6a58; }
#drawer.px .new-chat:active { transform: translateY(2px); box-shadow: 0 -2px 0 #9d8ee0, 0 2px 0 #9d8ee0, -2px 0 0 #9d8ee0, 2px 0 0 #9d8ee0, inset 0 -2px 0 #22264a; }
[data-theme="day"] #drawer.px .new-chat:active { box-shadow: 0 -2px 0 #8d6a58, 0 2px 0 #8d6a58, -2px 0 0 #8d6a58, 2px 0 0 #8d6a58, inset 0 -2px 0 #e2d2b9; }

#drawer.px .mind { margin: 18px 16px 14px; padding: 14px 14px 12px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 21px, rgba(185, 166, 238, .22) 21px 22px), url(/static/img/px/paper-night.png?v=1);
  background-size: auto, 48px 48px; background-position: 0 10px, 0 0; }
[data-theme="day"] #drawer.px .mind {
  background-image: repeating-linear-gradient(to bottom, transparent 0 21px, rgba(176, 140, 110, .28) 21px 22px), url(/static/img/px/paper.png?v=1);
  background-size: auto, 48px 48px; background-position: 0 10px, 0 0; }
#drawer.px .mind::before, #drawer.px .mind::after { content: none; }
#drawer.px .mind .k, #drawer.px .mind .top span { font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; letter-spacing: 0; font-weight: 400; font-synthesis: none; }
#drawer.px .mind .k { color: #f49ac1; }
#drawer.px .mind .top span { color: #f7d774; }
#drawer.px .mind .r2 { color: #c9b8ef; }
[data-theme="day"] #drawer.px .mind .k { color: #a0705e; }
[data-theme="day"] #drawer.px .mind .top span { color: #c4687a; }
[data-theme="day"] #drawer.px .mind .r2 { color: #8a6f62; }
#drawer.px .mind .pxd.tape { left: calc(50% - 22px); top: -7px; width: 44px; height: 12px; background: rgba(185, 166, 238, .72);
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, calc(100% - 2px) 4px, 100% 6px, calc(100% - 2px) 8px, 100% 10px, calc(100% - 2px) 12px,
                     2px 12px, 0 10px, 2px 8px, 0 6px, 2px 4px, 0 2px); }
[data-theme="day"] #drawer.px .mind .pxd.tape { background: rgba(240, 160, 182, .78); }
#drawer.px .mind .pxd.flowers { right: -8px; bottom: -10px; }
#drawer.px .mind .pxd.stars { right: -6px; bottom: -8px; }

/* ── 工具格:共用的格子尺寸(字居中、高度定死,丝带尾巴才对得齐) ── */
#drawer.px .tool-grid { position: relative; isolation: isolate; gap: 12px; }
#drawer.px .tool-grid a {
  position: relative; display: grid; place-items: center; height: 36px; padding: 0 4px; border: 0; border-radius: 0;
  font-family: "HTPX", "HTPX-fill", sans-serif; font-size: 12px; line-height: 1.5; letter-spacing: 0; font-weight: 400; font-synthesis: none;
  image-rendering: pixelated;
}
#drawer.px .tool-grid.pxmenu { padding: 40px 22px 20px; }   /* 夜里顶上留 40:小熊、月亮、小树蹲在第一块板子上,别压到「工 具」那行字 */
#drawer.px .tool-grid.pxmenu > a:first-of-type,
#drawer.px .tool-grid.pxmenu > a:last-of-type { grid-column: 1 / -1; }
#drawer.px .tool-grid.pxmenu > a.rib { margin: 0 12px; }
#drawer.px .tool-grid.pxmenu2 { padding: 12px 22px 8px; }

/* ── 夜里:紫色菜单板 ── */
#drawer.px .tool-grid a {
  color: #fbf7ff; text-shadow: 0 2px 0 #241a45;
  background: #4f4087 url(/static/img/px/menu-night.png?v=1) 0 0 / 96px 48px repeat;
  box-shadow: 0 -2px 0 #1b1430, 0 2px 0 #1b1430, -2px 0 0 #1b1430, 2px 0 0 #1b1430,
              inset 0 2px 0 #b3a1f0, inset 0 -2px 0 #2c2253, inset 2px 0 0 rgba(179, 161, 240, .3), inset -2px 0 0 rgba(44, 34, 83, .55),
              0 6px 0 -2px rgba(8, 4, 20, .45);
}
#drawer.px .tool-grid a:nth-of-type(2n) { background-position: -34px -14px; }
#drawer.px .tool-grid a:nth-of-type(3n) { background-position: -62px -30px; }
#drawer.px .tool-grid a:hover { color: #fff; }
#drawer.px .tool-grid a:active { transform: translateY(2px); color: #fff; filter: brightness(1.12); }
#drawer.px .pxd.rib-l { left: -14px; top: -2px; color: #1b1430; }
#drawer.px .pxd.rib-r { right: -14px; top: -2px; color: #1b1430; }
#drawer.px .pxd.moon { left: calc(56% - 58px); top: -18px; z-index: -1; opacity: .92; filter: drop-shadow(0 0 10px rgba(239, 196, 225, .35)); }   /* 千江月:从第一块板子后面升起半个 */
#drawer.px .pxd.tree { z-index: 2; }
#drawer.px .pxd.t1 { right: 14px; top: 22px; }
#drawer.px .pxd.t2 { left: 2px; bottom: 40px; }
#drawer.px .pxd.pt { z-index: 2; }
#drawer.px .pxd.spk { z-index: 2; }
#drawer.px .pxd.bear { left: 22px; top: -2px; z-index: 3; }
[data-theme="day"] #drawer.px .pxd.bear { top: -12px; }

/* ── 白天:苔藓背包(整块苔藓面板,格子凹进去) ── */
[data-theme="day"] #drawer.px .tool-grid.pxmenu,
[data-theme="day"] #drawer.px .tool-grid.pxmenu2 {
  margin: 10px 14px 0;
  background: #a6b95c url(/static/img/px/moss-day.png?v=1) 0 0 / 64px 64px repeat; image-rendering: pixelated;
  box-shadow: 0 -2px 0 #4f6630, 0 2px 0 #4f6630, -2px 0 0 #4f6630, 2px 0 0 #4f6630,
              inset 0 2px 0 #d6dd8c, inset 0 -2px 0 #6f8a3c, 0 6px 0 -2px rgba(50, 70, 25, .28);
}
[data-theme="day"] #drawer.px .tool-grid.pxmenu { padding: 30px 14px 16px; margin-top: 18px; margin-bottom: 16px; }
[data-theme="day"] #drawer.px .tool-grid.pxmenu2 { padding: 14px 14px 12px; margin-top: 14px; }
[data-theme="day"] #drawer.px .tool-grid.pxmenu > a.rib { margin: 0; }
[data-theme="day"] #drawer.px .tool-grid a {
  color: #2f3519; text-shadow: 0 2px 0 rgba(255, 255, 236, .45);
  background: #adab8d url(/static/img/px/slot-day.png?v=1) 0 0 / 32px 32px repeat;
  box-shadow: 0 -2px 0 #55663a, 0 2px 0 #55663a, -2px 0 0 #55663a, 2px 0 0 #55663a, inset 2px 2px 0 #8b896d, inset -2px -2px 0 #c9c7aa;
}
[data-theme="day"] #drawer.px .tool-grid a:hover { color: #1f2410; }
[data-theme="day"] #drawer.px .tool-grid a:active { transform: none; filter: brightness(.96); }
#drawer.px .pxd.m1 { left: 10px; top: -6px; }
#drawer.px .pxd.m2 { right: 46px; top: -6px; }
#drawer.px .pxd.m3 { left: -4px; top: 42%; }
#drawer.px .pxd.m4 { right: 22px; bottom: -6px; }
#drawer.px .pxd.m5 { left: 12px; top: -6px; }
#drawer.px .pxd.lily { right: -8px; top: -14px; z-index: 2; }
#drawer.px .pxd.o1 { left: 47%; top: -6px; }
#drawer.px .pxd.o2 { right: 4px; top: 58%; }
#drawer.px .pxd.o3 { right: 12px; top: -6px; }
#drawer.px .pxd.k1 { left: 14px; bottom: -4px; }
#drawer.px .pxd.k2 { left: 26px; bottom: -4px; }
#drawer.px .pxd.k3 { left: 41%; bottom: -4px; }
#drawer.px .pxd.branch { right: -6px; bottom: -8px; z-index: 2; }
#drawer.px .pxd.mote { width: 4px; height: 4px; background: #3fd0e0; box-shadow: 0 0 6px rgba(63, 208, 224, .85); z-index: 2; }

/* ── 「我们的」右边的空白:我们的小屋(日 / 夜两张,原始像素 1 格 = 1px,压在链接下面,不挡点) ── */
#drawer.px .drawer-foot.home { position: relative; }
#drawer.px .drawer-foot.home > .foot-link { position: relative; z-index: 1; }
#drawer.px .pxd.home { right: 4px; bottom: 14px; z-index: -1; opacity: .55; }   /* 11-02 她:「透明度可以低一点然后层级放到底层」—— 侧栏本身是 isolation: isolate,-1 就压在所有字和按下的底色下面 */

/* ── 此刻:像素小窗(和聊天页的心声卡 / 菜单同一个框:白天奶油窗棕描边,夜里靛蓝窗长春花蓝色带)+ 像素字 + 每行一个像素小图标 + 行间点点线
   11-02 下午她:「把红框里的字体也换成像素字，然后那个框也改成像素风格的~」;框的图是 chat-px.js 画的 --pxf-win ── */
#drawer.px { --pxn-dream: var(--pxn-dream-n); --pxn-him: var(--pxn-him-n); --pxn-cycle: var(--pxn-cycle-n); --pxn-mem: var(--pxn-mem-n); }
[data-theme="day"] #drawer.px { --pxn-dream: var(--pxn-dream-d); --pxn-him: var(--pxn-him-d); --pxn-cycle: var(--pxn-cycle-d); --pxn-mem: var(--pxn-mem-d); }
#drawer.px #nowList {
  position: relative; margin: 2px 14px 8px; padding: 8px 10px 12px;
  border: 1px solid transparent; border-image: var(--pxf-win) 14 12 24 12 fill / 14px 12px 24px 12px / 0 0 4px 0 stretch;
}
#drawer.px #nowList .now-row { padding: 8px 4px; border-radius: 0; }
#drawer.px #nowList .now-row + .now-row { border-top: 2px dotted rgba(142, 156, 240, .35); }
[data-theme="day"] #drawer.px #nowList .now-row + .now-row { border-top-color: rgba(141, 106, 88, .3); }
#drawer.px #nowList .now-row .r1 { align-items: center; }
#drawer.px #nowList .now-row .nm,
#drawer.px #nowList .now-row .vl {
  font-family: "HTPX", "HTPX-fill", var(--serif); font-size: 12px; letter-spacing: 0; font-weight: 400; font-synthesis: none;
}
#drawer.px #nowList .now-row .nm { display: inline-flex; align-items: center; gap: 7px; }
#drawer.px #nowList .now-row[data-k] .nm::before {
  content: ""; flex: none; width: 18px; height: 16px; image-rendering: pixelated; background: center / contain no-repeat;
}
#drawer.px #nowList .now-row[data-k="dream"] .nm::before { background-image: var(--pxn-dream); }
#drawer.px #nowList .now-row[data-k="him"] .nm::before { background-image: var(--pxn-him); }
#drawer.px #nowList .now-row[data-k="cycle"] .nm::before { background-image: var(--pxn-cycle); }
#drawer.px #nowList .now-row[data-k="mem"] .nm::before { background-image: var(--pxn-mem); }

/* ── 分栏线上的小物:蹲在点点线上(对话 = 蝴蝶,我们的 = 小花盆,这里 = 白天云朵 / 夜里月亮) ── */
#drawer.px .dsec.pxline { position: relative; }
#drawer.px .dsec .pxd.lt { top: auto; bottom: calc(50% - 1px); z-index: 2; }
#drawer.px .dsec .pxd.butterfly { right: 16%; bottom: calc(50% - 5px); }
#drawer.px .dsec .pxd.pot { right: 34%; }
#drawer.px .dsec .pxd.cloud { right: 20%; bottom: calc(50% - 3px); color: #6d84a8; }
#drawer.px .dsec .pxd.moonlet { right: 22%; }

@media (prefers-reduced-motion: reduce) {
  #drawer.px .new-chat:active, #drawer.px .tool-grid a:active { transform: none; }
}