/* Lists shown as bubbles (chips.js). */
.chips-list,.chips-suggest{display:flex;flex-wrap:wrap;gap:6px}
.chips-list:empty{display:none}
.chips-on{display:inline-flex;align-items:center;gap:2px;padding:3px 3px 3px 13px;color:var(--ink);overflow-wrap:anywhere}
.chips-on button{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--mute);font-size:17px;line-height:1;cursor:pointer}
.chips-off{background:none;box-shadow:inset 0 0 0 1px var(--hush);color:var(--mute);cursor:pointer}
.chips-add,.reel-add{display:flex;gap:8px;align-items:center}
.chips-add input,.reel-add input{flex:1;min-width:0}
.chips-add .btn,.reel-add .btn{flex:none}

/* The Portfolio editor's reels (reels-edit.js). */
.reel-list{display:flex;flex-direction:column;gap:6px}
.reel-list:empty{display:none}
.reel-on{display:flex;align-items:center;gap:10px;padding:5px 3px 5px 5px;border-radius:14px;background:var(--hush)}
.reel-on img,.reel-on .noimg{flex:none;width:42px;height:56px;border-radius:9px;object-fit:cover;background:var(--line)}
.reel-on-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13.5px}
.reel-on-text b{font-weight:600}
.reel-on-text small{color:var(--soft);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel-pic{color:var(--green-deep);font-weight:600;font-size:12.5px;cursor:pointer}
.reel-on button{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--mute);font-size:17px;line-height:1;cursor:pointer}
.chips-whole .chips-on{border-radius:16px;text-align:left} /* a whole sentence can run to two lines */