Improve image uploads and previews

public/admin.css

@@ -126,6 +126,85 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .message .by { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
 .message p { margin: 0; white-space: pre-wrap; }
 .message a { color: var(--brand); display: inline-block; margin-top: 6px; }
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+.photo-preview {
+  width: 116px;
+  display: grid;
+  gap: 5px;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: white;
+  color: var(--ink);
+  overflow: hidden;
+  text-align: left;
+}
+.photo-preview img {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  display: block;
+  background: #edf3ef;
+}
+.photo-preview span {
+  padding: 0 7px 7px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+  font-size: 12px;
+}
+.photo-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+.photo-backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  border-radius: 0;
+  background: rgb(0 0 0 / 72%);
+}
+.photo-modal figure {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  max-width: min(1100px, 94vw);
+  max-height: 90vh;
+  display: grid;
+  gap: 8px;
+}
+.photo-modal img {
+  max-width: 100%;
+  max-height: 82vh;
+  object-fit: contain;
+  border-radius: 8px;
+  background: white;
+}
+.photo-modal figcaption {
+  color: white;
+  text-align: center;
+  font-size: 13px;
+}
+.photo-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 54%);
+}
 .typing { padding: 0 20px 10px; color: var(--brand); font-size: 13px; }
 .reply {
   display: grid;