.messages { scroll-behavior: auto; overflow-anchor: none; overscroll-behavior: contain; }
.composer { flex-shrink: 0; }
.composer-bottom { gap: 8px; }
.composer-bottom > span { flex: 1; }
.attach-btn { flex-shrink: 0; color: var(--blue); }
.attachment-hint { margin-top: 5px; font-size: 9px; line-height: 1.5; color: var(--muted); }
.file-draft { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 10px; border-radius: 6px; background: var(--blue-light); }
.file-draft[hidden] { display: none; }
.file-draft > img { width: 44px; height: 44px; object-fit: contain; border-radius: 4px; }
.file-draft > svg { width: 26px; height: 26px; flex-shrink: 0; }
.file-draft > div { flex: 1; min-width: 0; }
.file-draft strong { display: block; overflow-wrap: anywhere; font-size: 11px; }
.file-draft small, .file-attachment small { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; }
.file-attachment > svg { flex-shrink: 0; width: 24px; height: 24px; }
.attachment a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.image-attachment { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.image-preview { width: 280px; max-width: 100%; height: 200px; display: block; border-radius: 5px; overflow: hidden; background: #8898af12; cursor: zoom-in; }
.image-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.image-attachment > a { font-size: 10px; }
.image-modal { width: min(1000px, 94vw); max-width: 94vw; }
.image-modal .modal-body { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.full-image { display: block; width: 100%; height: min(65vh, 750px); object-fit: contain; }
@media (max-width: 700px) {
  .composer-bottom > span { display: none; }
  .composer-bottom .send-btn { margin-left: auto; }
  .image-preview { width: 230px; height: 175px; }
}