/* Drop zone, file list, name chips, small buttons */
.drop{display:block;position:relative;border:2px dashed color-mix(in srgb,var(--sky) 55%,var(--line));border-radius:14px;padding:20px;text-align:center;cursor:pointer;background:color-mix(in srgb,var(--sky) 6%,transparent);transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--sky);background:color-mix(in srgb,var(--sky) 13%,transparent)}
.drop strong{display:block;font-size:16px;color:var(--sky)}
.drop span{color:var(--muted);font-size:13px}
.drop input{position:absolute;width:1px;height:1px;opacity:0}

.list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;max-height:360px;overflow:auto}
.list li{display:grid;grid-template-columns:44px 1fr auto;grid-template-rows:auto auto;gap:6px 10px;align-items:center;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:7px 8px}
.list .who{grid-column:2/4;padding:6px 10px;font-size:13px}
.list canvas{grid-row:1/3;width:44px;height:44px;background:#fff;border-radius:8px;border:1px solid var(--line)}
.list .nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .nm small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.acts{display:flex;gap:2px}
.icon{width:30px;height:30px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;color:var(--muted)}
.icon:hover:not(:disabled){background:color-mix(in srgb,var(--violet) 14%,transparent);color:var(--violet)}
.icon:disabled{opacity:.35;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{--k:var(--coral);display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--k) 14%,var(--panel));color:var(--ink);border:1px solid color-mix(in srgb,var(--k) 45%,transparent);border-radius:999px;padding:4px 4px 4px 12px;font-size:13px;font-weight:600}
.chip:nth-child(5n+2){--k:var(--saffron)} .chip:nth-child(5n+3){--k:var(--leaf)} .chip:nth-child(5n+4){--k:var(--sky)} .chip:nth-child(5n+5){--k:var(--violet)}
.chip button{border:0;background:transparent;cursor:pointer;color:var(--muted);width:22px;height:22px;border-radius:50%}
.chip button:hover{background:color-mix(in srgb,var(--k) 25%,transparent);color:var(--ink)}
.addname{display:flex;gap:8px}
.addname input,.addname select{flex:1;min-width:0}
.btn2{border:1px solid var(--line);background:var(--field);border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn2:hover{border-color:var(--violet);color:var(--violet)}
.row-end{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;color:var(--muted)}
.link{background:none;border:0;color:var(--coral);cursor:pointer;padding:4px 0;font-weight:600}