/* 11-01 她:「这两个框能也带一点很轻的像素美化元素吗」—— 上下两条浮栏(header::before 和 footer .line)各加一点,都很轻:
   ① 贴着边往里一圈粉色像素虚线(outline 跟着圆角走,不占位置、不挤里面的按钮)
   ② 一道不糊的像素投影(往下 3px,不模糊)
   ③ 上面那条:名字后面一颗像素小心心(她那张 UI参考2:名字后面跟一颗 ♥);输入栏:左下角一颗像素小星当贴纸
   配色和今日小屏 / 思考底卡同一套:夜里粉线黄星,白天粉线紫星。
   放在 main-neutral-v1.css 后面(浮栏最后的样子是它定的);删掉这一个文件的引用就回原样。 */
html[data-wall-host="chat"] { --px-dot: rgba(244, 154, 193, .5); --px-drop: rgba(244, 154, 193, .26); --px-star: #fff3a8;
  --px-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23f49ac1' d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3C/svg%3E"); }
html[data-wall-host="chat"][data-theme="day"] { --px-dot: rgba(240, 143, 182, .55); --px-drop: rgba(240, 143, 182, .32); --px-star: #b9a3e6;
  --px-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23f08fb6' d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3C/svg%3E"); }

html[data-wall-host="chat"] header::before,
html[data-wall-host="chat"] footer .line {
  outline: 2px dotted var(--px-dot);
  outline-offset: -4px;
  box-shadow: 0 3px 0 var(--px-drop), var(--neutral-shadow), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* 名字后面的像素小心心(7×6 格,一格 2px) */
html[data-wall-host="chat"] header .who::after {
  content: ""; flex: 0 0 auto; align-self: center; width: 14px; height: 12px; margin-left: 1px;
  background: var(--px-heart) no-repeat center / contain;
}

/* 输入栏左下角的像素小星:3px 一格的小十字 */
html[data-wall-host="chat"] footer .line::after {
  content: ""; position: absolute; z-index: 2; left: 24px; bottom: -2px; width: 3px; height: 3px; pointer-events: none;
  background: var(--px-star);
  box-shadow: 3px 0 var(--px-star), -3px 0 var(--px-star), 0 3px var(--px-star), 0 -3px var(--px-star);
}