/* Shared attachment cards: images first, compact document previews. */
.attachments { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.attachment.attachment-card { display:block; width:100%; max-width:230px; padding:8px; overflow:hidden; background:#f9fbf5; border-radius:14px; color:#203830; text-decoration:none; transition:box-shadow .15s,border-color .15s; }
.attachment-card:hover,.attachment-card:focus-visible { border-color:#43826b; box-shadow:0 4px 15px #20383018; }
.attachment-cover { display:grid; place-items:center; aspect-ratio:4/3; border-radius:8px; background:#e9eee5; overflow:hidden; }
.attachment-card .attachment-cover img { width:100%; height:100%; max-width:none; object-fit:cover; margin:0; }
.attachment-cover { position:relative; }
.attachment-card .attachment-document img { object-fit:contain; }
.attachment-cover img { position:relative; z-index:1; }
.attachment-loading { position:absolute; inset:0; display:grid; place-items:center; color:#698474; font-size:12px; background:linear-gradient(120deg,#e8eee5,#f5f8ef,#e8eee5); }
.preview-loaded .attachment-loading { display:none; }
.attachment-preview-badge { position:absolute; z-index:2; bottom:6px; left:6px; border-radius:5px; padding:3px 7px; background:#183c32dc; color:#fffef8; font-size:10px; }
.attachment-unavailable { display:grid; gap:8px; text-align:center; font-size:12px; color:#526f60; }
.attachment-unavailable small { color:#2b6d57; }
.attachment-file-icon { display:grid; place-items:center; width:55px; height:68px; border:1px solid #abc1b1; border-radius:6px 14px 6px 6px; background:#fffef8; color:#477561; font-size:13px; }
.attachment-caption { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 4px 2px; font-size:13px; }
.attachment-caption small { font-size:11px; color:#70837a; }
.upload-item .attachment-card { max-width:190px; }
.attachments.upload-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}
.attachment.upload-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 12px 14px;
  background: #fbfcf7;
}
.upload-file-name {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.upload-remove {
  min-height: 40px;
  padding: 8px 14px;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .attachment.upload-item { gap: 12px; padding: 10px 12px; }
  .upload-remove { padding-inline: 12px; }
}