/* PO User Picker — identidade visual compartilhada de usuários/artistas */

.po-user-picker-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  cursor:pointer;
}

.po-user-picker-item__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  line-height:1.25;
  text-align:left;
}

.po-user-picker-item__name{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:700;
}

.po-user-picker-item__meta{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  opacity:.75;
}

.po-user-picker-item__avatar,
.po-user-picker-avatar--fallback,
[class$="__avatar--fallback"],
[class*="-avatar--fallback"]{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:rgba(255,255,255,.06);
  color:#fff;
}

.po-user-picker-avatar__icon{
  width:14px;
  height:14px;
  display:block;
}

.po-user-picker-state{
  padding:8px 10px;
  font-size:13px;
}

.po-user-picker-state--empty{
  opacity:.75;
}

.po-user-picker-state--error{
  color:#ff9595;
}

/* Lista flutuante do picker: usada em modais com overflow próprio para não ser cortada pelo container pai. */
.po-user-picker-list{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.po-user-picker-list::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.po-user-picker-floating-list{
  position:fixed !important;
  right:auto !important;
  bottom:auto !important;
  display:none;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:#11161d;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.42);
}

.po-user-picker-floating-list::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.po-user-picker-floating-list.po-tm-picker-floating-list{
  z-index:2147483000 !important;
}

/* Blindagem visual do resultado do picker em listas flutuantes e locais. */
.po-user-picker-item__avatar,
.po-user-picker-item img.po-user-picker-item__avatar,
.po-user-picker-floating-list .po-user-picker-item__avatar,
.po-tm-picker-floating-list .po-user-picker-item__avatar{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  flex:0 0 40px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.po-user-picker-avatar--fallback,
.po-user-picker-item__avatar--fallback,
.po-user-picker-floating-list .po-user-picker-avatar--fallback,
.po-tm-picker-floating-list .po-user-picker-avatar--fallback{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  flex:0 0 40px !important;
  border-radius:999px !important;
}



/* Item informativo: usuário/artista já está selecionado em outro campo. */
.po-user-picker-item--disabled{
  cursor:not-allowed !important;
  opacity:.52;
  filter:saturate(.75);
  pointer-events:none;
}

.po-user-picker-item--disabled .po-user-picker-item__meta{
  opacity:.9;
}

.po-user-picker-list.has-disabled-results .po-user-picker-item--disabled{
  border-top:1px solid rgba(255,255,255,.06);
}

.po-user-picker-list.has-results .po-user-picker-item--disabled:first-of-type{
  margin-top:4px;
}

/* Estado canônico de carregamento do picker compartilhado. */
.po-user-picker-state--loading{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:.88;
}

.po-user-picker-spinner{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border-radius:999px;
  box-sizing:border-box;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:rgba(255,255,255,.86);
  animation:poUserPickerSpin .72s linear infinite;
}

.po-user-picker-list.is-loading,
.po-user-picker-list.is-empty,
.po-user-picker-list.is-error{
  overflow:hidden;
}

.po-user-picker-list.has-results{
  overflow:auto;
}

@keyframes poUserPickerSpin{
  to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion:reduce){
  .po-user-picker-spinner{
    animation:none;
  }
}
