/* 聊天里的图怎么摆。
   9.29 做过一版：1 张全图 / 2–3 张并排 / 4 张往上叠一堆——她翻了翻，三种大小不一样（鹅鹅鹅）。
   9.30 她定的：**做成 A 社 app 那样，她更喜欢这个**——不管几张，一排一样大的方块，圆角，从正中间露；
   多了就横着滑，露三张完整的，再往外的淡掉；点开看全图，左右滑。
   单独一个文件：出毛病把 index.html 里这行 link 和 app.js 里 pics.js 那行去掉，就回到图在气泡里。 */

.msg-row > .bubble.px-empty { display: none; }

.msg-row > .bubble-imgs[data-px] {
  display: flex; flex-wrap: nowrap; gap: 6px; align-items: flex-start;
  width: 100%; max-width: 100%; margin: 0 0 6px; padding: 2px 0 4px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.msg-row > .bubble-imgs[data-px]::-webkit-scrollbar { display: none; }
/* 她发的靠右、我发的靠左：不满一行的时候用边距顶过去（用 justify-content 的话，满了以后最头上那张滑不出来） */
.msg-row.user > .bubble-imgs[data-px] > :first-child { margin-left: auto; }
.msg-row.ai > .bubble-imgs[data-px] > :last-child { margin-right: auto; }

.bubble-imgs[data-px] .bubble-img {
  flex: none; width: 104px; height: 104px; max-width: none; max-height: none;
  aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 50%;
  border-radius: 16px; display: block;
  background: rgba(255,255,255,.4); box-shadow: 0 1px 5px rgba(0,0,0,.08);
  -webkit-touch-callout: none;
}
.bubble-imgs[data-px] .bubble-img:active { opacity: .75; }

/* 多于三张：露三张完整的，再往外的淡掉 */
.msg-row.user > .bubble-imgs.many {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 100%);
}
.msg-row.ai > .bubble-imgs.many {
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 30px, #000 100%);
          mask-image: linear-gradient(270deg, transparent 0, #000 30px, #000 100%);
}

/* 点开看大图：左右滑，点一下关 */
.px-gal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); }
.px-gal-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.px-gal-track::-webkit-scrollbar { display: none; }
.px-gal-cell { flex: none; width: 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
.px-gal-cell img { max-width: 95%; max-height: 90vh; object-fit: contain; display: block; -webkit-touch-callout: none; }
.px-gal-n { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); text-align: center; font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.72); pointer-events: none; }

@media (prefers-color-scheme: dark) {
  .bubble-imgs[data-px] .bubble-img { background: rgba(255,255,255,.04); }
}