/**
 * "Attach photos or PDFs" in the message forms (message-files.js), and a
 * message's attachments in My Account → Messages. Colours come from the
 * form around it (currentColor and translucent neutrals) so light and dark
 * palettes both work; corners follow --spd-button-radius.
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 * SPDX-FileCopyrightText: 2026 Marcus Quinn
 * Additional terms (GPL-3.0 section 7(b)): ATTRIBUTION.txt
 * Provenance: wpas-11fc97ca9348a13b. Copies, even of part, keep these lines.
 */

.spd-message-files {
    display: grid;
    gap: 8px;
    margin: 0 0 4px;
}

.spd-message-files[hidden],
.spd-message-files-list[hidden],
.spd-message-files input[type="file"] {
    display: none;
}

.spd-message-files-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
}

/* As wide as the fields above it, its words in the middle. */
.spd-message-files .spd-message-files-add {
    display: flex;
    flex: 1 1 100%;
    gap: 8px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 14px;
    border: 1px dashed rgb(127 127 127 / 65%);
    border-radius: var(--spd-button-radius, 6px);
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.spd-message-files .spd-message-files-add:hover,
.spd-message-files .spd-message-files-add:focus-visible {
    border-color: currentColor;
    background: rgb(127 127 127 / 10%);
    color: inherit;
}

.spd-message-files .spd-message-files-add:focus-visible,
.spd-message-files .spd-message-files-remove:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.spd-message-files-hint,
.spd-message-files-status {
    margin: 0;
    font-size: var(--spd-text-small, 1rem);
    line-height: 1.4;
}

.spd-message-files-hint {
    opacity: 0.75;
}

.spd-message-files-status:empty {
    display: none;
}

.spd-message-files-status {
    font-weight: 600;
}

/* Two classes, so a theme's content lists (Kadence: .single-content ul,
   padding-left 2em) do not indent it past the fields. */
.spd-message-files .spd-message-files-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spd-message-files-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 6px 6px 6px 12px;
    border: 1px solid rgb(127 127 127 / 35%);
    border-radius: var(--spd-button-radius, 6px);
    font-size: var(--spd-text-small, 1rem);
}

/* A photo or a document icon, drawn in the text colour. */
.spd-message-files-item::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    opacity: 0.7;
    -webkit-mask: var(--spd-message-file-icon) center / contain no-repeat;
    mask: var(--spd-message-file-icon) center / contain no-repeat;
}

.spd-message-files-item--image,
.spd-message-attachment--image {
    --spd-message-file-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}

.spd-message-files-item--pdf,
.spd-message-attachment--pdf {
    --spd-message-file-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
}

.spd-message-files-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spd-message-files-size {
    opacity: 0.75;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.spd-message-files-item:not(.is-done) .spd-message-files-size {
    font-style: italic;
}

.spd-message-files .spd-message-files-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--spd-button-radius, 6px);
    background: transparent;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
}

.spd-message-files .spd-message-files-remove:hover {
    background: rgb(127 127 127 / 16%);
    color: inherit;
}

/* My Account → Messages and the team's view: the sent files. */
.spd-message-attachments {
    margin: 12px 0 0;
}

.spd-message-attachments-title {
    margin: 0 0 6px;
    font-weight: 600;
}

.spd-message-attachments ul,
.spd-message-attachments .spd-message-attachments-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spd-message-attachment {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    margin: 0;
}

.spd-message-attachment::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    opacity: 0.7;
    -webkit-mask: var(--spd-message-file-icon) center / contain no-repeat;
    mask: var(--spd-message-file-icon) center / contain no-repeat;
}

.spd-message-attachment a {
    overflow-wrap: anywhere;
}

.spd-message-attachment-size {
    opacity: 0.75;
    font-size: var(--spd-text-small, 1rem);
}