.tn-fav-badge{
  position:absolute;
  right:2px;
  bottom:2px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  font-size:11px;
  line-height:18px;
  text-align:center;
  background:#ef4444;
  color:#ffffff;
  font-weight:700;
  display:none;
}
.tn-fav-badge.is-visible{ display:inline-block; }

.tn-fav-popover{ display:none; }
.tn-fav-popover.is-open{ display:block; }

.tn-fav-popover{
  box-sizing:border-box;
  width:min(340px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
}

@media (max-width: 768px){
  /* On mobile, render the popover as a fixed sheet to avoid horizontal overflow. */
  #tn-favorites-popover,
  #tn-profile-popover{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:calc(env(safe-area-inset-top) + 64px) !important;
    width:auto !important;
    max-width:none !important;
    /* Don't cover the whole screen; keep it as a dropdown sheet with internal scroll. */
    max-height:70vh !important;
    overflow:auto;
    /* Above fixed UI (action bars/toasts), below full-screen overlays (drawer/search). */
    z-index:9000 !important;
  }
}

/* Extra guard: never allow header popovers to create horizontal scroll on desktop. */
#tn-favorites-popover,
#tn-profile-popover{
  max-width:calc(100vw - 24px) !important;
}

.tn-fav-item{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; }
.tn-fav-item:hover{ background:rgba(255,255,255,0.05); }
.tn-fav-item-row{ display:flex; align-items:stretch; gap:8px; }
.tn-fav-item-row > a{ flex:1; min-width:0; }
.tn-fav-item-row > button{
  width:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tn-fav-item-row > button:hover{ background:rgba(255,255,255,0.08); }
.tn-fav-item-row > button svg{ width:18px; height:18px; }

.tn-fav-avatar{ width:32px; height:32px; border-radius:999px; object-fit:cover; background:rgba(255,255,255,0.06); }
.tn-fav-meta{ min-width:0; flex:1; }
.tn-fav-title{ font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tn-fav-sub{ font-size:12px; color:rgba(255,255,255,0.6); }
.tn-fav-count{
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  line-height:18px;
  text-align:center;
  background:rgba(255,255,255,0.12);
  color:#fff;
  font-weight:700;
}

.tn-fav-toggle.is-active svg{ fill:var(--tn-accent, #a855f7); stroke:var(--tn-accent, #a855f7); }
.tn-fav-item-toggle.is-active svg{ fill:var(--tn-accent, #a855f7); stroke:var(--tn-accent, #a855f7); }

/* Streamer page header "subscribe" CTA (favorites toggle) */
.tn-fav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.92);
  font-weight:800;
  font-size:0.92rem;
  line-height:1;
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.tn-fav-cta svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.tn-fav-cta:hover{
  background:rgba(255,255,255,0.10);
  transform:translateY(-1px);
}
.tn-fav-cta.is-active{
  background:rgba(145,70,255,0.20);
  border-color:rgba(145,70,255,0.65);
  color:#fff;
}
.tn-fav-cta__text{
  white-space:nowrap;
}