feat(display): background photo groups with blurred, compressed and original versions; veil, sway and blur options in the appearance panel [CI]

web/display/src/display.css

@@ -1008,7 +1008,7 @@
   z-index: -1;
   background-image:
     linear-gradient(color-mix(in srgb, var(--glass-veil) var(--bg-veil), transparent), color-mix(in srgb, var(--glass-veil) var(--bg-veil), transparent)),
-    url('./assets/bg.jpg');
+    var(--bg-image, url('./assets/bg.jpg'));
   background-size: cover;
   background-position: center;
   pointer-events: none;
@@ -1017,18 +1017,24 @@
 }
 
 :root {
-  --bg-veil: 50%;
+  /* 盖在背景图上的遮罩的浓度：默认亮色 50%、暗色 62%；右下角「外观」里按倍数调（--bg-veil-scale，0 是不盖） */
+  --bg-veil: min(100%, calc(50% * var(--bg-veil-scale, 1)));
 }
 
 :root[data-theme="dark"] {
-  --bg-veil: 62%;
+  --bg-veil: min(100%, calc(62% * var(--bg-veil-scale, 1)));
 }
 
-/* 暗色模式换一张背景图 */
+/* 用哪张图由「外观」里的选择决定（backgrounds.ts，JS 把它写进 --bg-image）；这里的回退只管 JS 还没跑的第一帧：暗色先用暗色那张 */
 :root[data-theme="dark"] .bg-layer {
   background-image:
     linear-gradient(color-mix(in srgb, var(--glass-veil) var(--bg-veil), transparent), color-mix(in srgb, var(--glass-veil) var(--bg-veil), transparent)),
-    url('./assets/bg-dark.jpg');
+    var(--bg-image, url('./assets/bg-dark.jpg'));
+}
+
+/* 关了背景晃动：背景不会再移动，就不用向外多留一圈边距了，按窗口的原始比例铺满（不会被放大裁掉四周） */
+:root[data-sway='off'] .bg-layer {
+  inset: 0;
 }
 
 /* ── 亚克力（毛玻璃）规范：所有玻璃面（卡片、线路面板、顶部栏、时间轴）只用下面这组变量；颜色来自 tokens.css 的 --glass-*，换风格改那里 ──
@@ -1313,8 +1319,8 @@ input {
   white-space: nowrap;
 }
 
-/* 悬浮提示弹在卡片右边，会盖到下一张卡片上：每张卡片都有自己的层叠上下文（毛玻璃），所以悬停（提示打开）的那张要整张抬到兄弟卡片之上 */
-.agent-card:hover,
+/* 悬浮提示弹在卡片右边，会盖到下一张卡片上：每张卡片都有自己的层叠上下文（毛玻璃），所以提示打开的那张要整张抬到兄弟卡片之上。
+   只在提示真的打开时才抬，不要鼠标一碰到卡片就抬：z-index 一变，带 backdrop-filter 的整张卡片要重新分层，那一帧底部会闪黑 */
 .agent-card:has(.pop.open) {
   z-index: 30;
 }
@@ -1393,8 +1399,7 @@ input {
   height: 100%;
   z-index: -1;
   pointer-events: none;
-  /* 滤色：粒子只会把背后的图提亮，边缘羽化的地方自然融进图里 */
-  mix-blend-mode: screen;
+  /* 不要用 mix-blend-mode（滤色等）：画布在带 backdrop-filter 的卡片后面每帧都在变，再叠一层混合，Chrome 给卡片取背景的时候会整块重新分层，卡片底部就闪黑；边缘的羽化用颜色和透明度做，已经是浅色半透明的，效果和滤色差不多 */
 }
 
 @media (max-width: 640px), ((pointer: coarse) and (max-width: 900px)) {
@@ -1657,3 +1662,55 @@ input {
     display: none;
   }
 }
+
+/* 照片的选择：按组分行，每组一个小标题，下面是缩略图，选中的描一圈 */
+.appearance-group-title {
+  margin-bottom: 4px;
+  color: var(--app-ink-faint);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+
+.appearance-choices {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.appearance-choice {
+  display: grid;
+  gap: 4px;
+  padding: 0;
+  border: 0;
+  color: var(--app-ink-muted);
+  background: none;
+  cursor: pointer;
+  text-align: center;
+  font-size: 12px;
+}
+
+.appearance-choice img {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border-radius: var(--r-control);
+  box-shadow: inset 0 0 0 1px var(--glass-ring);
+  transition:
+    box-shadow 0.2s,
+    transform 0.2s;
+}
+
+.appearance-choice:hover img {
+  transform: translateY(-1px);
+}
+
+.appearance-choice[aria-pressed='true'] {
+  color: var(--app-ink);
+  font-weight: 600;
+}
+
+.appearance-choice[aria-pressed='true'] img {
+  box-shadow:
+    0 0 0 2px var(--app-primary),
+    0 0 0 4px color-mix(in srgb, var(--app-primary) 25%, transparent);
+}