.chat-attachment {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(69,86,115,.15);
  border-radius: 12px;
  background: #fff;
}
.chat-attachment > img,
.chat-attachment > video {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: #eef1f5;
}
.chat-attachment > audio { display: block; width: calc(100% - 20px); margin: 12px 10px; }
.chat-attachment > div { display: flex; align-items: center; gap: 10px; padding: 10px; }
.chat-attachment .file-kind {
  display: grid;
  place-items: center;
  width: 38px;
  height: 40px;
  border-radius: 8px;
  background: #e9eefb;
  color: #3558b4;
  font-size: 9px;
  font-weight: 800;
}
.chat-attachment > div > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.chat-attachment strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.chat-attachment small { color: #77839a; font-size: 9px; }
.chat-attachment a { color: #3158ba; font-size: 10px; font-weight: 750; text-decoration: none; }
.open-attachment-preview {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 0;
  background: #f1f4f9;
  color: #263650;
  text-align: left;
  cursor: pointer;
}
.open-attachment-preview span { padding: 7px; border-radius: 7px; background: #e5ebfb; color: #3158b5; font-size: 9px; font-weight: 800; }
.open-attachment-preview b { font-size: 11px; }
.attachment-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8,16,29,.76);
  backdrop-filter: blur(6px);
}
.attachment-preview-backdrop > section {
  width: min(1000px,100%);
  height: min(820px,calc(100dvh - 40px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
}
.attachment-preview-backdrop header,
.attachment-preview-backdrop footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.attachment-preview-backdrop header { border-bottom: 1px solid #e4e9f1; }
.attachment-preview-backdrop header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview-backdrop header button { width: 35px; height: 35px; border: 0; border-radius: 9px; background: #edf1f6; font-size: 21px; }
.attachment-preview-backdrop iframe { width: 100%; height: 100%; border: 0; background: #e9edf2; }
.attachment-preview-backdrop footer { justify-content: flex-end; }
.attachment-preview-backdrop footer a { padding: 10px 15px; border-radius: 9px; background: #355bd8; color: #fff; font-size: 12px; font-weight: 750; text-decoration: none; }
@media (max-width: 600px) {
  .attachment-preview-backdrop { padding: 0; }
  .attachment-preview-backdrop > section { width: 100%; height: 100dvh; border-radius: 0; }
}