/* =====================================================================
   ShotGram v91 — inbox long-press menu, pin/mute marks, Shot gift art,
   and the contributors ranking sheet. Additive only.
   ===================================================================== */

/* ---- inbox: press-and-hold ------------------------------------------- */
.thread {
  -webkit-touch-callout: none;          /* no iOS link/callout bubble on hold */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.thread.is-pressing { background: var(--surface-2); transform: scale(.985); }
.thread.is-pinned { background: linear-gradient(90deg, rgba(var(--cyan-rgb, 0, 216, 255), .06), transparent 60%); }
.thread-flags { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--muted, #8a8fa3); }
.thread-flag { width: 15px; height: 15px; }
.thread-flag.is-pin { color: var(--cyan, #00d8ff); }
.thread-count.is-muted { background: var(--surface-3, #3a3d4d); color: #d6d8e2; }

.dm-hold-head {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 4px 12px; min-width: 0;
}
.dm-hold-head .grow { min-width: 0; }
.sheet-item svg { width: 22px; height: 22px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .thread.is-pressing { transform: none; }
}

/* ---- Shot gift artwork -------------------------------------------------- */
.sg-shot-icon {
  width: 14px; height: 14px; flex: none; object-fit: contain;
  vertical-align: -2px; margin-inline-end: 3px;
  filter: drop-shadow(0 0 4px rgba(50, 255, 78, .35));
}
.sg-coin-chip .sg-shot-icon { width: 18px; height: 18px; }
.sg-gift-img { display: block; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.sg-gift-card .sg-gift-img.sg-gift-card-emoji { width: 54px; height: 54px; margin-block: 2px; }
.sg-gift-card-cost { display: inline-flex; align-items: center; }
.sg-gift-fly .sg-gift-img.sg-gift-emoji { width: 36px; height: 36px; }
.sg-combo-chip .sg-gift-img.sg-combo-emoji { width: 28px; height: 28px; }
.sg-gift-burst .sg-burst-img {
  width: min(46vw, 220px); height: auto;
  filter: drop-shadow(0 0 28px rgba(50, 255, 78, .45)) drop-shadow(0 8px 26px rgba(0, 0, 0, .55));
}
.sg-gift-card.is-selected { box-shadow: inset 0 0 0 2px var(--cyan, #00d8ff), 0 0 18px rgba(var(--cyan-rgb, 0, 216, 255), .25); }
.sg-gifter small { display: inline-flex; align-items: center; }

/* the ranking row is tappable now */
.sg-top-gifters { cursor: pointer; }
.sg-top-gifters:active { transform: scale(.98); }
.sg-top-gifters .sg-gifter-label { color: #ffc53d; }

/* ---- contributors ranking sheet ----------------------------------------- */
.sg-rank-sheet { display: flex; flex-direction: column; gap: 12px; min-width: min(420px, 86vw); }
.sg-rank-sheet h3 { margin: 0; font-size: 17px; }
.sg-rank-tabs {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.sg-rank-tabs::-webkit-scrollbar { display: none; }
.sg-rank-tab {
  flex: none; height: 32px; padding: 0 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #c9cce8;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
}
.sg-rank-tab.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--violet, #8b5cff), var(--cyan, #00d8ff));
}
.sg-rank-list {
  display: grid; gap: 6px;
  max-height: min(56dvh, 460px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.sg-rank-row {
  display: grid; grid-template-columns: 26px 38px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06);
}
.sg-rank-row[data-rank="1"] { background: linear-gradient(135deg, rgba(255, 197, 61, .22), rgba(255, 138, 0, .1)); border-color: rgba(255, 197, 61, .4); }
.sg-rank-row[data-rank="2"] { background: rgba(203, 213, 225, .1); border-color: rgba(203, 213, 225, .25); }
.sg-rank-row[data-rank="3"] { background: rgba(205, 127, 50, .12); border-color: rgba(205, 127, 50, .3); }
.sg-rank-no { font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; color: #ffc53d; }
.sg-rank-av {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; font-style: normal; font-weight: 800;
  background: rgba(var(--violet-rgb, 139, 92, 255), .4); color: #fff;
}
.sg-rank-name { display: grid; min-width: 0; }
.sg-rank-name b, .sg-rank-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-rank-name small { opacity: .6; font-size: 11.5px; }
.sg-rank-shots { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.sg-rank-shots .sg-shot-icon { width: 17px; height: 17px; }
.sg-rank-empty { padding: 28px 8px; text-align: center; color: #aeb6c2; font-size: 13.5px; }