.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:12px 0}
.avatar-option{position:relative;cursor:pointer;text-align:center;border:2px solid #eee8f3;border-radius:18px;padding:10px;background:#fff;transition:border-color .15s}
.avatar-option:has(input:checked){border-color:#7856ed;background:#f4efff;box-shadow:0 0 0 2px #ede5ff}
.avatar-option:focus-within{outline:3px solid #beaaff;outline-offset:2px}
.avatar-option input[type=radio]{position:absolute;top:12px;left:12px;width:18px;height:18px;accent-color:#7856ed}
.avatar-option img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:12px;margin-bottom:8px}
.avatar-option span{display:block;font-size:14px;font-weight:600;color:#30253e}
img.agent-avatar{width:64px;height:64px;flex:0 0 64px;object-fit:contain;border-radius:16px;background:#111923}
@media(max-width:480px){.avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}