/* 🐕🦌💕 聊天室 — Lightbox & 图片上传 */

.lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.85);
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
}
.lightbox.show { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 90vh;
  object-fit: contain; border-radius: 8px;
}

.image-preview-area {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px;
  margin-bottom: 6px;
}
.image-preview-area:empty { display: none; }
.image-preview-item {
  position: relative; width: 60px; height: 60px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.image-preview-item img {
  width: 100%; height: 100%; object-fit: cover;
}
.image-preview-remove {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0,0,0,0.5); color: #fff;
  border: none; border-radius: 50%; width: 18px; height: 18px;
  font-size: 11px; cursor: pointer; line-height: 18px;
  text-align: center; padding: 0;
}
.image-preview-remove:hover { background: rgba(0,0,0,0.7); }
.msg-images {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.msg-images img {
  max-width: 200px; max-height: 200px; border-radius: 10px;
  cursor: pointer; object-fit: cover;
}