/* Attachments & avatars: editor upload widget, attachment lists, inline [ATTACH] images, avatar page. */

/* ---------- Editor upload widget ---------- */
.attach-widget { margin-top: 8px; border: 1px dashed var(--border); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); transition: border-color .15s, background .15s; }
.attach-widget.is-dragover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.attach-drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attach-pick { cursor: pointer; }
.attach-pick:focus-within { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 1px; }
.attach-errors:empty { display: none; }
.attach-error { margin-top: 6px; padding: 5px 9px; border-radius: var(--radius); border-left: 3px solid var(--danger); background: var(--surface-alt); font-size: 0.88em; }
.attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attach-list:not(:empty) { margin-top: 8px; }
.attach-item { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.attach-item.is-uploading { opacity: 0.8; }
.attach-item-preview { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 4px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); text-decoration: none; }
.attach-item-preview img { width: 100%; height: 100%; object-fit: cover; }
.attach-item-main { flex: 1; min-width: 0; }
.attach-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-item-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.attach-delete:hover { border-color: var(--danger); color: var(--danger); }
.attach-progress { width: 100%; max-width: 260px; height: 8px; }
.attach-ext { font-size: 0.72em; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.03em; }

/* ---------- Files listed under a message ---------- */
.message-attachments { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.message-attachments-title { font-size: 0.86em; font-weight: 600; color: var(--text-muted); margin: 0 0 6px; }
.attach-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.attach-file { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); max-width: 320px; min-width: 0; }
.attach-file-preview { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 4px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); text-decoration: none; }
.attach-file-preview img { width: 100%; height: 100%; object-fit: cover; }
.attach-file-meta { display: flex; flex-direction: column; min-width: 0; }
.attach-file-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Inline [ATTACH] images ---------- */
.bbc-attach { display: inline-block; max-width: 100%; vertical-align: middle; line-height: 0; }
.bbc-attach-img { max-width: 100%; height: auto; border-radius: 3px; }
.bbc-attach--thumb .bbc-attach-img { max-height: 400px; width: auto; border: 1px solid var(--border); }
.bbc-attach:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Avatar page ---------- */
.avatar-editor { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.avatar-editor-current { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.avatar-editor-form { flex: 1; min-width: 240px; }
.avatar-editor-remove { margin-top: 14px; }

@media (max-width: 650px) {
  .attach-item { flex-wrap: wrap; }
  .attach-item-actions { width: 100%; justify-content: flex-start; }
  .attach-file { max-width: 100%; }
}