.attachment-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; }
.attachment-tool { padding: 5px 12px; border-radius: 7px; background: var(--light); font-size: 12px; }
.attachment-toolbar small { color: var(--muted); margin-left: auto; font-size: 11px; }
#attachment-draft { display: flex; flex-wrap: wrap; gap: 10px; max-height: 220px; overflow-y: auto; padding: 5px 4px; }
#attachment-draft:empty { display: none; }
.attachment-pending { position: relative; display: flex; align-items: center; gap: 14px; width: 248px;
  min-height: 82px; padding: 14px; background: #f1f2f3; border: 1px solid #e5e8e7; border-radius: 9px; }
.attachment-pending.pending-image, .attachment-pending.pending-video { width: 128px; height: 116px; padding: 0; background: #e8edeb; }
.attachment-pending img, .attachment-pending video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.attachment-pending > button { position: absolute; top: 3px; right: 3px; display: grid; place-items: center;
  width: 23px; height: 23px; padding: 0; background: #34433de6; color: white; border-radius: 50%; font-size: 17px; }
.attachment-progress { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 6px;
  border-radius: 0 0 8px 8px; background: #234e43dc; color: white; font-size: 11px; text-align: center; }
.draft-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white;
  background: #263d3699; border-radius: 50%; padding: 9px 12px; pointer-events: none; }
.file-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.file-copy b { font-size: 14px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.file-copy small { color: #8a9490; font-size: 11px; }
.file-icon { display: grid; place-items: center; flex: 0 0 42px; height: 50px; border-radius: 5px;
  background: #7b8c87; color: white; font-size: 14px; font-weight: 700; border-top-right-radius: 12px; }
.file-icon-word { background: #1680de; font-size: 23px; }
.file-icon-sheet { background: #22a36c; font-size: 23px; }
.file-icon-slides { background: #e98537; font-size: 23px; }
.file-icon-pdf { background: #de5757; }
.chat-file-card { display: flex; align-items: center; gap: 18px; width: 270px; max-width: 100%; min-height: 94px;
  padding: 16px; margin: 5px 0; background: #f0f1f2; border: 1px solid #e4e7e5; border-radius: 9px; color: var(--ink); text-decoration: none; }
.chat-file-card:hover { background: #e8ece9; }
.chat-attachment { display: flex; flex-direction: column; gap: 5px; max-width: 340px; min-width: 0; margin: 5px 0; }
.chat-image { display: block; max-width: 100%; max-height: 300px; border-radius: 8px; }
.chat-attachment audio, .chat-attachment video { max-width: 100%; width: 320px; border-radius: 10px; }
.attachment-download { color: var(--muted); overflow-wrap: anywhere; text-decoration: none; font-size: 11px; }
.attachment-download:hover { text-decoration: underline; }
.bubble:empty { display: none; }
@media (max-width: 700px) {
  #attachment-draft { max-height: 170px; }
  .attachment-pending.pending-image, .attachment-pending.pending-video { width: 96px; height: 92px; }
  .attachment-pending { width: min(248px, 100%); }
  .chat-attachment { max-width: 100%; }
  .chat-attachment audio, .chat-attachment video { width: 230px; }
  .chat-file-card { width: min(250px, 100%); padding: 12px; }
  .attachment-tool { padding: 5px 8px; }
  .attachment-toolbar small { margin-left: 0; }
}

.composer.attachment-dragging { position: relative; outline: 2px dashed var(--green); outline-offset: -3px; background: #eff8f3; }
.composer.attachment-dragging::after { content: '松开即可添加图片、音频、视频或文档'; position: absolute; inset: 8px;
  display: grid; place-items: center; border-radius: 12px; background: #eff8f3ed; color: var(--green);
  font-weight: 600; font-size: 15px; padding: 20px; text-align: center; pointer-events: none; z-index: 2; }