/* Composer attachment preview (charter §9/§12, 2026-11-05): a 1 cm (38 px)
   thumbnail inside the Message field, with a remove X in its top-right corner. */
.composer-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.composer-field #message { flex: 1 1 auto; min-width: 0; }
.composer-field.has-attach #message { padding-left: 50px; }
.attach-preview { position: absolute; top: 4px; left: 4px; width: 38px; height: 38px; z-index: 3; }
.attach-thumb {
  width: 38px; height: 38px; border-radius: 8px; overflow: hidden;
  background: var(--sc-soft); border: 1px solid var(--sc-border);
  display: flex; align-items: center; justify-content: center;
}
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-thumb .ico { width: 18px; height: 18px; color: var(--sc-accent); }
.attach-remove {
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; padding: 0;
  border-radius: 50%; border: 1px solid var(--sc-border); background: var(--sc-panel2);
  color: var(--sc-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.attach-remove .ico { width: 11px; height: 11px; }
.attach-remove:hover { color: #fff; border-color: var(--sc-accent); }