.bpfr-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:10px;
  position:relative;
  vertical-align:middle;
}
.activity-meta .bpfr-wrap,
.acomment-meta .bpfr-wrap,
.acomment-options .bpfr-wrap{
  order:-9999;
}
.activity-meta,
.acomment-meta,
.acomment-options{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.activity-meta > .bpfr-wrap,
.acomment-meta > .bpfr-wrap,
.acomment-options > .bpfr-wrap{
  order:-99999 !important;
  margin-right:8px;
}
.bpfr-trigger-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.bpfr-trigger{
  width:calc(var(--bpfr-button-size) + 16px);
  height:calc(var(--bpfr-button-size) + 12px);
  min-width:44px;
  min-height:44px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:transform .16s ease, box-shadow .16s ease;
}
.bpfr-trigger:hover,
.bpfr-wrap.bpfr-open .bpfr-trigger{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.bpfr-trigger-emoji{
  font-size:var(--bpfr-button-size);
  line-height:1;
  width:var(--bpfr-button-size);
  height:var(--bpfr-button-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
img.bpfr-trigger-emoji{ width:var(--bpfr-button-size); height:var(--bpfr-button-size); }
img.bpfr-picker-emoji{ width:var(--bpfr-picker-size); height:var(--bpfr-picker-size); }
img.bpfr-badge-emoji{ width:var(--bpfr-badge-size); height:var(--bpfr-badge-size); }
img.bpfr-trigger-emoji,
img.bpfr-picker-emoji,
img.bpfr-badge-emoji{ object-fit:contain; }
.bpfr-picker{
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  border:1px solid rgba(0,0,0,.06);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(.92);
  transform-origin:left bottom;
  transition:opacity .22s ease, transform .28s cubic-bezier(.2,.9,.25,1.25), visibility .22s ease;
  white-space:nowrap;
  z-index:99;
}
.bpfr-open .bpfr-picker{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  animation:bpfrSpringOpen .28s cubic-bezier(.18,.9,.25,1.28);
}
.bpfr-picker-btn{
  width:calc(var(--bpfr-picker-size) + 12px);
  height:calc(var(--bpfr-picker-size) + 12px);
  min-width:44px;
  min-height:44px;
  border:none;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  cursor:pointer;
  padding:0;
  transition:transform .16s ease, background-color .14s ease, filter .16s ease;
  animation:bpfrFloatIn .22s ease both;
  animation-delay:calc(var(--bpfr-stagger, 0) * 24ms);
}
.bpfr-picker-btn:hover,
.bpfr-picker-btn:focus,
.bpfr-picker-btn:active{
  background:rgba(0,0,0,.05);
  transform:translateY(-3px) scale(1.14);
  filter:saturate(1.08);
}
.bpfr-picker-emoji{
  font-size:var(--bpfr-picker-size);
  line-height:1;
  width:var(--bpfr-picker-size);
  height:var(--bpfr-picker-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.bpfr-picker-btn:hover .bpfr-picker-emoji,
.bpfr-picker-btn:focus .bpfr-picker-emoji,
.bpfr-picker-btn:active .bpfr-picker-emoji{
  transform:scale(1.08);
}
.bpfr-picker-emoji{ transition:transform .14s ease; }
.bpfr-selected{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
}
.bpfr-selected-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:calc(var(--bpfr-badge-size) + 10px);
  height:calc(var(--bpfr-badge-size) + 10px);
  margin-left:2px;
  animation:bpfrPop .18s ease;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.bpfr-selected-item:focus{
  outline:2px solid rgba(0,0,0,.18);
  outline-offset:2px;
  border-radius:12px;
}
.bpfr-badge-emoji{
  font-size:var(--bpfr-badge-size);
  line-height:1;
  width:var(--bpfr-badge-size);
  height:var(--bpfr-badge-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.bpfr-count-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:11px;
  line-height:18px;
  font-weight:700;
  text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.24);
}
@keyframes bpfrFloatIn{ from{ opacity:0; transform:translateY(8px) scale(.8); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes bpfrPop{ 0%{ transform:scale(.88); opacity:.5; } 100%{ transform:scale(1); opacity:1; } }
@keyframes bpfrSpringOpen{
  0%{ transform:translateY(10px) scale(.9); }
  60%{ transform:translateY(-2px) scale(1.03); }
  100%{ transform:translateY(0) scale(1); }
}
.bpfr-picker.bpfr-align-right{ left:auto; right:0; }
.bpfr-picker.bpfr-align-viewport{ left:var(--bpfr-picker-left, 0px); right:auto; }

.bpfr-people-popover{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:0;
  max-width:min(260px, calc(100vw - 24px));
  background:transparent;
  border:none;
  border-radius:14px;
  box-shadow:none;
  padding:0;
  z-index:120;
}
.bpfr-people-avatars{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.bpfr-people-avatar-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.bpfr-people-avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  display:block;
  object-fit:cover;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.bpfr-people-empty{ width:1px; height:1px; }
.bpfr-people-avatar-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  border-radius:999px;
  overflow:hidden;
  text-decoration:none;
}
.bpfr-people-avatar-link:hover,
.bpfr-people-avatar-link:focus{ transform:scale(1.06); outline:none; }
.bpfr-people-avatar-link:focus-visible{ box-shadow:0 0 0 2px rgba(0,0,0,.18); }

.bpfr-notification-entry{display:inline-flex;align-items:center;gap:8px;}
.bpfr-notification-entry .avatar{width:24px;height:24px;border-radius:50%;display:inline-block;vertical-align:middle;}
.bpfr-notification-name{display:inline-block;vertical-align:middle;}

@media (hover: hover) and (pointer: fine){
  .bpfr-trigger-wrap:hover .bpfr-picker{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
}

@media (hover: none) and (pointer: coarse){
  .bpfr-picker{
    position:absolute !important;
    left:0;
    right:auto;
    bottom:calc(100% + 8px);
    top:auto !important;
    width:max-content;
    max-width:min(90vw, 320px);
    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border-radius:999px;
    padding:8px 10px;
    justify-content:flex-start;
    transform-origin:left bottom;
    z-index:99999;
  }
  .bpfr-picker-btn{
    flex:0 0 auto;
  }
}