.afr-root { position: relative; margin-top: .55rem; font: inherit; z-index: 2; }
.afr-list { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.afr-chip, .afr-add, .afr-picker button { border: 1px solid rgba(127,127,127,.35); border-radius: 999px; background: rgba(127,127,127,.08); color: inherit; cursor: pointer; min-height: 28px; }
.afr-chip { position: relative; display: inline-flex; align-items: center; gap: .2rem; padding: 2px 8px; }
.afr-chip.is-mine { border-color: #6b8cff; background: rgba(107,140,255,.16); }
.afr-add { width: 30px; padding: 0; font-size: 18px; line-height: 24px; }
.afr-emoji { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.afr-emoji--text { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; width: auto; min-width: 22px; }
.afr-count { font-size: .85em; opacity: .8; }
.afr-users { display: none; position: absolute; bottom: calc(100% + 7px); left: 0; min-width: 150px; max-width: 260px; padding: 7px; border: 1px solid rgba(127,127,127,.35); border-radius: 8px; background: Canvas; color: CanvasText; box-shadow: 0 5px 20px rgba(0,0,0,.2); }
.afr-chip:hover .afr-users, .afr-chip:focus .afr-users { display: block; }
.afr-user { display: flex; align-items: center; gap: 6px; padding: 3px; white-space: nowrap; }
.afr-user img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.afr-picker { position: absolute; left: 0; top: calc(100% + 6px); display: grid; grid-template-columns: repeat(6, 34px); gap: 4px; padding: 8px; max-width: 250px; border: 1px solid rgba(127,127,127,.35); border-radius: 8px; background: Canvas; color: CanvasText; box-shadow: 0 5px 20px rgba(0,0,0,.2); }
.afr-picker button { width: 34px; height: 34px; padding: 3px; border-radius: 6px; }
.afr-picker .afr-emoji { width: 26px; height: 26px; }