/* Resolvix attachments: the file picker on forms and the file display on messages.
   Loaded by lib/attachments_web.php (hd_att_assets). Colours come from the requester theme variables (--rq-*) when
   present, with neutral fallbacks so it also looks right on staff pages. Light, dark and system all follow along. */

.att, .att-strip {
    --att-line: var(--rq-line, rgba(128, 128, 128, .35));
    --att-bg: var(--rq-surface2, rgba(128, 128, 128, .10));
    --att-surface: var(--rq-surface, transparent);
    --att-text: var(--rq-text, inherit);
    --att-muted: var(--rq-muted, rgba(128, 128, 128, .95));
    --att-accent: var(--rq-info-strong, #4c8dff);
}

/* ---- Picker ---- */
.att { margin-top: 16px; }
.att-label { font-size: 13px; font-weight: 600; color: var(--rq-sec, inherit); margin-bottom: 6px; }
.att-label .hint { font-weight: 400; color: var(--att-muted); }
.att-zone {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    padding: 14px; border: 1.5px dashed var(--att-line); border-radius: 16px; background: var(--att-bg);
    transition: border-color .12s, background .12s;
}
.att-zone.is-over { border-color: var(--att-accent); background: var(--rq-info-bg, rgba(76, 141, 255, .12)); }
.att-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.att .att-pick, body.rq .att label.att-pick {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; margin: 0;
    border-radius: 22px; cursor: pointer; background: var(--att-surface); color: var(--att-text);
    border: 1px solid var(--rq-line2, var(--att-line)); font-size: 14px; font-weight: 600; user-select: none;
}
.att .att-pick:hover { background: var(--att-bg); }
.att-input:focus-visible + .att-pick { outline: 2px solid var(--att-accent); outline-offset: 2px; }
.att-tip { flex: 1 1 200px; font-size: 13px; line-height: 1.45; color: var(--att-muted); }

.att-msg {
    margin-top: 8px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45;
    background: var(--rq-red-bg, #fdecea); color: var(--rq-red-tx, #8a1c13); border: 1px solid var(--rq-red-bd, #f5c2bd);
}
.att-msg[hidden] { display: none; }
.att-msg div + div { margin-top: 3px; }

.att-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.att-list:empty { display: none; }
.att-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--att-line); border-radius: 14px; background: var(--att-surface); }
.att-prev {
    flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--att-bg);
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: var(--att-muted); text-transform: uppercase;
}
.att-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-info { flex: 1; min-width: 0; }
.att-name { font-size: 14px; font-weight: 600; color: var(--att-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { font-size: 12px; color: var(--att-muted); margin-top: 1px; }
.att-x {
    flex: none; width: 44px; height: 44px; border: 0; border-radius: 22px; background: transparent;
    color: var(--att-muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.att-x:hover { background: var(--att-bg); color: var(--att-text); }
.att-status { margin-top: 8px; font-size: 13px; color: var(--att-muted); min-height: 0; }
.att-status:empty { display: none; }

form.att-busy button, form.att-busy .btn { opacity: .6; pointer-events: none; }
form.att-busy .att-zone, form.att-busy .att-x { pointer-events: none; opacity: .7; }

/* ---- Display on a message ---- */
.att-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.att-th {
    display: block; width: 96px; height: 96px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--att-line); background: var(--att-bg);
}
.att-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-th:hover { border-color: var(--att-accent); }
.att-chip {
    display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; padding: 8px 12px;
    border: 1px solid var(--att-line); border-radius: 12px; background: var(--att-surface); color: var(--att-text);
    text-decoration: none; font-size: 13px;
}
.att-chip:hover { border-color: var(--att-accent); }
.att-chip svg { flex: none; color: var(--att-muted); }
.att-chip-t { display: flex; flex-direction: column; min-width: 0; }
.att-chip-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.att-chip-s { font-size: 12px; color: var(--att-muted); }
.att-chip.att-warn { border-color: var(--rq-amber-tx, #d99a1e); }
.att-chip.att-warn .att-chip-s { color: var(--rq-amber-tx, #d99a1e); }