/* Basic aesthetic similar to user's pills */
.wccsi{ --gap:.6rem; --pill:#08B0B8; --active:#f0f4f8; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06); }
.wccsi *{ box-sizing:border-box; }
.wccsi-bar{ width:100%; min-height:70px; border-radius:9999px; border:1px solid #dcdcdc; background:#fff; box-shadow:var(--shadow); display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; margin:0 0 1rem 0; flex-wrap:wrap;}
.wccsi-placeholder{opacity:.6}

.wccsi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:var(--gap); }
.wccsi-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; text-decoration:none; border-radius:24px; padding:.55rem .6rem; background:var(--pill); color:#fff; box-shadow:var(--shadow); transition:transform .12s ease, filter .12s ease, background .12s ease; }
.wccsi-item img{ width:60px; height:60px; object-fit:cover; border-radius:9999px; border:2px solid rgba(255,255,255,.7); }
.wccsi-item:hover{ transform:translateY(-1px); }
.wccsi-item.is-active{ background:var(--active); color:#222; filter:saturate(.85) brightness(1.02); }
.wccsi-item.is-dim{ filter:grayscale(.6) brightness(.95); }

.wccsi-children{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.wccsi-children .wccsi-item{ background:#fff; color:#222; border:1px solid #e5e7eb; }
.wccsi-children .wccsi-item.wccsi-self{ background:#fff; border:2px dashed #cbd5e1; }