.mail-files{margin:16px 0;min-width:0}
.mail-files-list{display:flex;flex-direction:column;gap:6px}
.mail-file{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface-soft,#f7f7f7);border:1px solid var(--border,#e8e8e8);border-radius:10px;min-width:0}
.mail-file-kind{display:grid;place-items:center;flex:0 0 36px;height:40px;background:var(--surface,#fff);border:1px solid var(--border,#e8e8e8);border-radius:6px;color:var(--text-muted,#707070);font-size:9px;font-weight:650;letter-spacing:.03em}
.mail-file-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mail-file-name{width:fit-content;max-width:100%;padding:0;border:0;background:none;color:var(--text,#202020);font:inherit;font-size:13px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.mail-file-name:hover{text-decoration:underline;text-underline-offset:3px}
.mail-file-size,.mail-files-hint{font-size:11px;color:var(--text-muted,#777)}
.mail-file-remove{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--text-muted,#777);cursor:pointer}
.mail-file-remove svg{width:15px;height:15px}.mail-file-remove:hover{background:var(--surface,#fff);color:var(--text,#202020)}
.mail-files-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.mail-files-add{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;padding:6px 0;font:inherit;font-size:12px;font-weight:550;color:var(--text,#202020);cursor:pointer}
.mail-files-add svg{width:15px;height:15px}.mail-files button:disabled{opacity:.45;cursor:default}
.mail-files button:focus-visible{outline:2px solid #c1c5ca;outline-offset:3px}
.mail-files-status{margin:6px 0 0;font-size:12px;color:var(--text-muted,#777)}
.mail-files.is-uploading .mail-files-status::before{content:'';display:inline-block;width:10px;height:10px;margin-right:7px;border:1.5px solid #ddd;border-top-color:#555;border-radius:50%;animation:mail-file-spin 1s linear infinite}
@keyframes mail-file-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mail-files.is-uploading .mail-files-status::before{animation:none}}
@media(max-width:600px){.mail-file{padding:9px;gap:9px}.mail-files-hint{font-size:10px}}