/* СПІЛЬНИЙ компонент вкладень (frontend/shared/attachbox.js): мініатюри з «×», «Повернути», рядок «що буде» —
   «Клієнти» (фото клієнта → постачальнику) і «Постачальники» (QR оплати, файли постачальника → клієнту). 25.10 */
/* мініатюра вкладення (картка дії, вікно відправки): фото — квадрат, клік — перегляд; файл — картка як у переписці */
.att-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.att-th { position: relative; flex: none; }
.att-th-img { width: 72px; height: 72px; border-radius: 9px; background: color-mix(in srgb, var(--text) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.att-th-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.att-th-img:hover { border-color: var(--accent-strong); }
.att-th-contain img { object-fit: contain; image-rendering: pixelated; background: #fff; }
.att-th-file .attachment { margin: 0; }
.att-th-file .att-file { min-height: 72px; max-width: 240px; box-sizing: border-box; }
.att-th-file .att-file .af-name { max-width: 150px; }
.att-th-x {
    position: absolute; top: -7px; right: -7px; z-index: 1; width: 22px; height: 22px; padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px;
    background: #1c2230; border: 1px solid rgba(255, 255, 255, .28); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.att-th-x:hover, .att-th-x:focus-visible { background: var(--danger, #d96a6a); border-color: transparent; outline: none; }
.fwd-att { flex: none; padding: 10px 12px 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.fwd-att-cap { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 12px; color: var(--text-dim); }
.fwd-att-cap > i { font-size: 11px; color: var(--text-muted); }
.fwd-att-back { margin-left: auto; padding: 1px 6px; border: 0; border-radius: 5px; background: none; cursor: pointer;
    font: inherit; font-size: 12px; color: var(--accent-strong); white-space: nowrap; }
.fwd-att-back:hover { background: var(--bg-hover); text-decoration: underline; }
.fwd-att .att-strip { gap: 10px; }
.fwd-att .att-th-img { width: 88px; height: 88px; }
.fwd-att .att-th-file .att-file { min-height: 88px; }
.fwd-att-note { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.fwd-att.busy .att-th-x, .fwd-att.busy .fwd-att-back { opacity: .35; pointer-events: none; }
@media (max-width: 720px) {
    .fwd-att .att-th-img { width: 72px; height: 72px; }
    .fwd-att .att-th-file .att-file { min-height: 72px; }
}