/* ShotGram v1.3.6 — LIVE: guests, hearts, mic chip, chat badges, new LIVE page. */

/* ---------- taps: one tap / double tap = like, never pause, no zoom delay ---------- */
.live-watch-screen #liveWatchPlayer, .live-creator-screen #liveStage { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.live-watch-screen video.live-watch-video, .live-watch-screen iframe.live-watch-frame,
.live-creator-screen #livePreview { pointer-events: none !important; }

/* ---------- guests: tiles down the right side ---------- */
.lg-tiles {
  position: absolute; z-index: 12; right: 10px; left: auto;
  top: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 150px);
  display: none; flex-direction: column; gap: 8px; pointer-events: auto;
}
.lg-tiles.has-tiles { display: flex; }
.lg-tile {
  position: relative; width: 96px; height: 128px; border-radius: 14px; overflow: hidden;
  background: #17151f; box-shadow: 0 4px 16px rgba(0,0,0,.35); border: 1.5px solid rgba(255,255,255,.22);
}
.lg-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; pointer-events: none; }
.lg-tile.is-me video { transform: scaleX(-1); }
.lg-tile.is-playing video { opacity: 1; }
.lg-tile-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(8px) brightness(.6); transform: scale(1.15); }
.lg-tile.is-playing .lg-tile-poster { display: none; }
.lg-tile-name {
  position: absolute; left: 6px; right: 6px; bottom: 5px; font-size: 11px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.lg-tile-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
}
.lg-tile-x svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.6; }
/* the TOP gifters + flip/mic keep their place: tiles sit under them */
html body .live-tt-host .lg-tiles { top: calc(var(--sa-t, 0px) + 200px); right: 10px; }
@media (min-width: 760px) {
  .lg-tile { width: 132px; height: 176px; }
  .lg-tiles { top: 80px; }
}

/* join button (viewer bar) */
.live-tt .ltt-ico.ltt-join svg { stroke: #fff; }
.live-tt .ltt-ico.ltt-join.is-wait { background: rgba(254,44,85,.28); box-shadow: inset 0 0 0 1.5px #fe2c55; }
.live-tt .ltt-ico.ltt-join.is-on { background: #fe2c55; }
#liveJoinBtn.is-on, #liveJoinBtn.is-wait { color: #fe2c55; }

/* host: guests button + badge */
.live-creator-chat-form .live-creator-guests {
  position: relative; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0,0,0,.45) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important;
}
html body .live-tt-host #creatorChatForm > .live-creator-guests { order: 4; position: relative; }
html body .live-tt-host .ltt-host-bar.is-typing #creatorChatForm > .live-creator-guests { display: none !important; }
.live-creator-guests .lg-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #fe2c55; color: #fff; font: 800 10px/17px system-ui, sans-serif; font-style: normal; text-align: center;
  box-shadow: 0 0 0 2px rgba(0,0,0,.5);
}

/* guests sheet */
.lg-sheet .lg-panel { padding: 0 2px 6px; max-height: 62vh; overflow-y: auto; }
.lg-sheet .lg-hint { margin: 0 0 6px; font-size: 12px; color: rgba(255,255,255,.55); text-align: center; }
.lg-sheet h4 { display: flex; align-items: center; gap: 6px; margin: 14px 4px 6px; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.75); }
.lg-sheet h4 i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fe2c55; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.lg-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 12px; }
.lg-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.lg-row-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lg-row-who b { display: flex; align-items: center; gap: 3px; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-row-who small { font-size: 12px; color: rgba(255,255,255,.5); }
.lg-btn { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: #fe2c55; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.lg-btn.ghost { background: rgba(255,255,255,.1); padding: 0 10px; display: grid; place-items: center; }
.lg-btn.ghost svg { width: 14px; height: 14px; stroke: #fff; }
.lg-btn.danger { color: #ff5c76; }
.lg-btn:disabled { opacity: .5; }
.lg-wait { font-size: 12px; color: rgba(255,255,255,.55); }
.lg-empty { margin: 4px 4px 10px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.55); }

/* ---------- host mic off: chip for viewers ---------- */
.ltt-chip.ltt-mic-off { display: inline-flex; align-items: center; gap: 4px; background: rgba(254,44,85,.85) !important; color: #fff !important; }
.ltt-chip.ltt-mic-off[hidden] { display: none !important; }
.ltt-chip.ltt-mic-off svg { width: 13px; height: 13px; stroke: #fff; }

/* ---------- chat: one badge + clan tag, never a row of icons ---------- */
html body .live-chat-message .badge-slot > :not(:first-child),
html body .live-creator-chat-line .badge-slot > :not(:first-child) { display: none !important; }
html body .live-chat-message .ltt-fam, html body .live-creator-chat-line .ltt-fam { display: none !important; }
html body .live-chat-message .ltt-name, html body .live-creator-chat-line .ltt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
html body .live-chat-system.gift, html body .live-tt .ltt-chat .live-chat-system.gift { color: #ffd36b !important; }
html body .live-chat-system.gift svg { stroke: #ffd36b; }
html body .live-tt-host #creatorChatList .live-chat-system {
  display: flex !important; align-items: center; gap: 5px; width: fit-content; padding: 2px 4px; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
html body .live-tt-host #creatorChatList .live-chat-system svg { width: 13px; height: 13px; }

/* ---------- TOP gifters on the host screen: right side, not behind LIVE ---------- */
html body .live-tt-host .sg-top-gifters {
  left: auto !important; right: 10px !important; inset-inline-start: auto !important; inset-inline-end: 10px !important;
}
html[dir="rtl"] body .live-tt-host .sg-top-gifters { left: auto !important; right: 10px !important; inset-inline-start: 10px !important; inset-inline-end: auto !important; }

/* ---------- typing: the header never slides under the clock ---------- */
html body .live-tt.keyboard-open .ltt-top, html body .live-tt.keyboard-open .ltt-sub { transform: none !important; }
html body .live-tt.keyboard-open .sg-top-gifters, html body .live-tt.keyboard-open .lg-tiles { opacity: 0; pointer-events: none; }

/* ---------- stories row: LIVE bubble ---------- */
.tray-item.is-live .tray-live-ring {
  position: relative; display: inline-grid; place-items: center; padding: 2.5px; border-radius: 50%;
  background: linear-gradient(135deg, #ff2d6f, #fe2c55 45%, #ff7a3d); animation: tray-live-pulse 1.6s ease-in-out infinite;
}
.tray-item.is-live .tray-live-ring > .avatar, .tray-item.is-live .tray-live-ring > img { box-shadow: 0 0 0 2.5px var(--bg, #06070f); border-radius: 50%; }
.tray-live-badge {
  position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); padding: 1px 6px; border-radius: 5px;
  background: #fe2c55; color: #fff; font: 800 9.5px/14px system-ui, sans-serif; font-style: normal; letter-spacing: .4px;
  box-shadow: 0 0 0 2px var(--bg, #06070f);
}
@keyframes tray-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(254,44,85,.45); } 50% { box-shadow: 0 0 0 4px rgba(254,44,85,0); } }
@media (prefers-reduced-motion: reduce) { .tray-item.is-live .tray-live-ring { animation: none; } }

/* ---------- the LIVE page (hub) ---------- */
.live-hub-v2 { background: #07070c; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.lh { min-height: 100%; padding: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 6px) 14px calc(var(--sa-b, env(safe-area-inset-bottom, 0px)) + 90px); color: #fff; }
.lh-head { display: flex; align-items: center; gap: 10px; height: 52px; }
.lh-head h1 { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; font-weight: 900; letter-spacing: .5px; }
.lh-dot { width: 9px; height: 9px; border-radius: 50%; background: #fe2c55; box-shadow: 0 0 0 4px rgba(254,44,85,.22); animation: tray-live-pulse 1.6s infinite; }
.lh-go {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #fe2c55; color: #fff; font-weight: 800; font-size: 13.5px; cursor: pointer;
}
.lh-go svg { width: 17px; height: 17px; stroke: #fff; }
.lh-go.big { height: 44px; padding: 0 22px; font-size: 15px; margin-top: 6px; }
.lh-tabs { display: flex; align-items: center; gap: 18px; margin: 4px 2px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lh-tabs button {
  position: relative; padding: 10px 0; border: 0; background: none; color: rgba(255,255,255,.55); font-weight: 700; font-size: 15px; cursor: pointer;
}
.lh-tabs button.active { color: #fff; }
.lh-tabs button.active::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: -1px; height: 2.5px; border-radius: 2px; background: #fff; }
.lh-count { margin-inline-start: auto; font-size: 12px; color: rgba(255,255,255,.5); }
.lh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .lh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lh { max-width: 1100px; margin: 0 auto; } }
.lh-card {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4.2; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: #16151d; color: #fff; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lh-card:active { transform: scale(.98); }
.lh-card.is-skel { cursor: default; background: linear-gradient(110deg, #15141b 30%, #1f1d28 50%, #15141b 70%); background-size: 200% 100%; animation: lh-skel 1.2s linear infinite; }
@keyframes lh-skel { to { background-position: -200% 0; } }
.lh-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(22px) brightness(.55) saturate(1.3); }
.lh-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent 30%, transparent 55%, rgba(0,0,0,.75)); }
.lh-top { position: absolute; z-index: 2; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; gap: 6px; }
.lh-live { padding: 2px 7px; border-radius: 5px; background: #fe2c55; font-size: 10.5px; font-weight: 900; letter-spacing: .5px; }
.lh-view { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 5px; background: rgba(0,0,0,.45); font-size: 11px; font-weight: 700; }
.lh-view svg { width: 12px; height: 12px; stroke: #fff; }
.lh-av { position: absolute; z-index: 2; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 3px; border-radius: 50%; background: linear-gradient(135deg, #ff2d6f, #fe2c55, #ff7a3d); }
.lh-av img { display: block; width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 3px solid #16151d; }
.lh-info { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 9px; display: flex; flex-direction: column; gap: 1px; }
.lh-info b { display: flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; }
.lh-info b .badge-slot > :not(:first-child) { display: none; }
.lh-info small { font-size: 12px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-info em { width: fit-content; margin-top: 3px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.18); font-size: 10px; font-weight: 700; font-style: normal; }
.lh-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 46px 20px; text-align: center;
  border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
}
.lh-empty-ic { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 6px; border-radius: 50%; background: rgba(254,44,85,.14); }
.lh-empty-ic svg { width: 28px; height: 28px; stroke: #fe2c55; }
.lh-empty b { font-size: 16px; }
.lh-empty span { font-size: 13px; color: rgba(255,255,255,.6); }
.ltt-chip.ltt-mic-off { flex: none; max-width: none !important; white-space: nowrap; }

/* ---------- DM: shared LIVE + shared story cards ---------- */
.rt-live-card .rt-card-av { position: relative; overflow: visible !important; background: linear-gradient(135deg, #ff2d6f, #fe2c55, #ff7a3d); padding: 2px; }
.rt-live-card .rt-card-av img { border-radius: 50%; border: 2px solid #1b1c27; }
.rt-live-dot { position: absolute; z-index: 1; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: #fe2c55; box-shadow: 0 0 0 2px #1b1c27; animation: tray-live-pulse 1.6s infinite; }
.rt-live-go { background: #fe2c55 !important; color: #fff !important; }
.rt-live-card.is-ended { opacity: .7; }
.rt-live-card.is-ended .rt-card-av { background: rgba(255,255,255,.2); }
.rt-live-card.is-ended .rt-live-dot { display: none; }
.rt-story-card {
  position: relative; display: block; width: 150px; aspect-ratio: 9 / 16; margin-bottom: 4px; padding: 0; border: 0; border-radius: 14px;
  overflow: hidden; background: #1b1c27; cursor: pointer;
}
.rt-story-media { position: absolute; inset: 0; display: grid; place-items: center; }
.rt-story-media img, .rt-story-media video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rt-story-ph { padding: 10px; font-size: 12px; color: rgba(255,255,255,.6); text-align: center; }
.rt-story-who { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 6px; }
.rt-story-who i { width: 24px; height: 24px; flex: none; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.2); box-shadow: 0 0 0 2px #fe2c55; }
.rt-story-who i img { width: 100%; height: 100%; object-fit: cover; }
.rt-story-who b { font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-story-card.is-gone { aspect-ratio: auto; height: 90px; }

/* ---------- clans list: the tag pill is never cut (the name shortens instead) ---------- */
html body .clan-rank-row .clan-card-title, html body .top-clan .clan-card-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
html body .clan-rank-row .clan-card-title > b, html body .top-clan .clan-card-title > b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .clan-rank-row .clan-tag, html body .top-clan .clan-tag { flex: none !important; max-width: none !important; overflow: visible; white-space: nowrap; }
html body .clan-rank-row .voice-now, html body .top-clan .voice-now {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: rgba(34,197,94,.16); color: #4ade80; font-weight: 700;
}
html body .clan-rank-row .voice-now svg { width: 12px; height: 12px; }

/* ---------- comments: photo and name sit still and line up ---------- */
html body .cm-item { align-items: flex-start; }
html body .cm-item .cm-av { flex: none; width: 34px; height: 34px; margin-top: 1px; }
html body .cm-item .cm-av .avatar, html body .cm-item .cm-av img { width: 34px !important; height: 34px !important; }
html body .cm-item > .grow { min-width: 0; }
html body .cm-name { min-height: 18px; line-height: 18px; flex-wrap: nowrap; }
html body .cm-name .link-plain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html body .cm-name .badge-slot { display: inline-flex; flex: none; }
html body .cm-name .badge-slot > :not(:first-child) { display: none !important; }
html body .cm-name .staff-badge { flex: none; }
html body .cm-creator { flex: none; padding: 1px 6px; border-radius: 5px; background: rgba(254,44,85,.14); font-size: 10px !important; line-height: 14px; }
html body .cm-item.reply .cm-av, html body .cm-item.reply .cm-av .avatar, html body .cm-item.reply .cm-av img { width: 26px !important; height: 26px !important; }
.top-clan-voice:empty { display: none !important; }

/* ---------- v1.3.6 — the "Go LIVE" screen on phones (TikTok) ---------- */
html body .live-tt-pre .live-control-panel,
html body .live-tt-pre .live-top-row,
html body .live-tt-pre .live-host-card,
html body .live-tt-pre .sg-live-quick,
html body .live-tt-pre .live-empty-preview,
html body .live-tt-pre .live-stage-gradient { display: none !important; }
html body .live-tt-pre .live-room-shell { display: block !important; height: 100% !important; }
html body .live-tt-pre #liveStage {
  position: fixed !important; inset: 0 !important; width: 100% !important; height: var(--live-h, 100dvh) !important;
  max-height: none !important; border-radius: 0 !important; margin: 0 !important; background: #000;
}
html body .live-tt-pre #livePreview { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
html body .live-tt-pre #livePreview.fit-whole { object-fit: contain; }
.ltp { position: absolute; inset: 0; z-index: 20; pointer-events: none; color: #fff; }
.ltp > * { pointer-events: auto; }
.ltp::before { content: ''; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); pointer-events: none; }
.ltp-top { position: absolute; top: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 10px); left: 12px; right: 12px; display: flex; }
.ltp-x { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.3); color: #fff; }
.ltp-x svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2.4; }
.ltp-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 14px calc(var(--sa-b, env(safe-area-inset-bottom, 0px)) + 10px); display: flex; flex-direction: column; gap: 14px; }
.ltp-tools { display: flex; justify-content: space-around; gap: 4px; }
.ltp-tools button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 58px; padding: 0; border: 0; background: none; color: #fff; font: 600 12.5px/1.2 inherit; text-shadow: 0 1px 3px rgba(0,0,0,.6); cursor: pointer; }
.ltp-tools button svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.ltp-tools button.is-off svg { stroke: #fe2c55; }
.ltp-tools button.is-on { color: #ffd36b; }
.ltp-tools button.is-on svg { stroke: #ffd36b; fill: rgba(255,211,107,.25); }
.ltp-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: rgba(28,28,32,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ltp-title { display: flex; align-items: center; gap: 10px; }
.ltp-av .avatar, .ltp-av img { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
.ltp-title-slot { flex: 1; min-width: 0; }
html body .ltp #liveTitle {
  width: 100%; height: 36px; min-height: 36px; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; color: #fff !important; font-size: 17px !important; font-weight: 700;
}
html body .ltp #liveTitle::placeholder { color: rgba(255,255,255,.5); font-weight: 600; }
html body .ltp .live-category-row { display: flex !important; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 !important; padding: 0 !important; flex-wrap: nowrap !important; }
html body .ltp .live-category-row::-webkit-scrollbar { display: none; }
html body .ltp .live-category { flex: none; height: 30px; padding: 0 12px !important; border-radius: 999px !important; border: 0 !important; background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.8) !important; font-size: 12.5px !important; font-weight: 700; box-shadow: none !important; }
html body .ltp .live-category.active { background: #fff !important; color: #111 !important; }
html body .ltp #startLiveBtn {
  width: 100% !important; height: 52px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important;
  background: #fe2c55 !important; background-image: none !important; color: #fff !important; font-size: 17px !important; font-weight: 800 !important; box-shadow: none !important;
}
html body .ltp #startLiveBtn .live-pulse { display: none; }
.ltp-modes { display: flex; justify-content: center; gap: 22px; }
.ltp-modes button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: rgba(255,255,255,.55); font: 800 14px/1 inherit; cursor: pointer; }
.ltp-modes button.active { color: #fff; }
.ltp-modes button svg { width: 18px; height: 18px; }
/* 3 · 2 · 1 */
.sg-live-state.sg-live-count { background: rgba(0,0,0,.25) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; z-index: 40 !important; }
.sg-live-count .sg-count-n { font-size: 120px; font-weight: 300; line-height: 1; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.5); animation: sg-count 1s ease-out both; }
@keyframes sg-count { from { transform: scale(1.4); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.ltp-counting .ltp { display: none !important; }

/* host tools sheet: round buttons on top (TikTok) */
.ltt-tools-sheet .ltt-round-row { display: flex; justify-content: space-around; margin: 4px 0 14px; }
.ltt-tools-sheet .ltt-round-row button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.ltt-tools-sheet .ltt-round-row i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.1); }
.ltt-tools-sheet .ltt-round-row i svg { width: 24px; height: 24px; stroke: #fff; }
.ltt-tools-sheet .ltt-round-row button.is-off i { background: #fe2c55; }

/* viewer: quick replies over the keyboard */
.live-tt .ltt-quick { display: none; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 0 -10px; padding-inline: 10px; }
.live-tt .ltt-quick::-webkit-scrollbar { display: none; }
.live-tt .ltt-bottom:has(.ltt-bar.is-typing) .ltt-quick { display: flex; }
.live-tt .ltt-quick button { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 15px; font-weight: 600; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.live-tt .ltt-quick button:active { transform: scale(.94); }

/* viewer: one-tap gift (the cheapest gift) */
.live-tt .ltt-ico.ltt-qgift { padding: 4px; }
.live-tt .ltt-ico.ltt-qgift[hidden] { display: none !important; }
.live-tt .ltt-qgift img, .live-tt .ltt-qgift .ltt-qgift-art { width: 30px !important; height: 30px !important; object-fit: contain; font-size: 22px; line-height: 30px; }
.live-tt .ltt-qgift.is-pop { animation: ltt-qpop .3s ease-out; }
@keyframes ltt-qpop { 40% { transform: scale(1.25); } }
.live-tt .ltt-bar.is-typing .ltt-qgift { display: none !important; }

/* viewer: "Request" tile above the guests */
.lg-tile.lg-request { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 96px; padding: 0; border: 1.5px dashed rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lg-tile.lg-request .lg-req-ic svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 2.2; }
.lg-tile.lg-request b { font-size: 13px; }
.lg-tile.lg-request.is-wait { border-color: #fe2c55; }

/* ---------- stories: emoji reactions (TikTok / Instagram) ---------- */
.story-foot .story-reply-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.story-foot .story-reply-wrap .story-reply { flex: 1; min-width: 0; padding-inline-end: 92px !important; }
.story-foot .story-qr { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border: 0; background: none; font-size: 22px; line-height: 34px; cursor: pointer; }
.story-foot .story-qr:nth-of-type(1) { inset-inline-end: 42px; }
.story-foot .story-qr:nth-of-type(2) { inset-inline-end: 6px; }
.story-foot .story-qr:active { transform: translateY(-50%) scale(.85); }
.story-react-grid {
  position: absolute; z-index: 30; left: 0; right: 0; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  align-content: center; gap: 26px 0; padding: 0 20px 30vh; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.story-react-grid[hidden] { display: none; }
.story-react-grid button { justify-self: center; width: 70px; height: 70px; padding: 0; border: 0; background: none; font-size: 50px; line-height: 70px; cursor: pointer; animation: story-react-in .25s ease-out both; }
.story-react-grid button:active { transform: scale(.85); }
@keyframes story-react-in { from { transform: scale(.4); opacity: 0; } }
.story-react-burst { position: absolute; inset: 0; z-index: 31; pointer-events: none; overflow: hidden; }
.story-react-burst span { position: absolute; bottom: -60px; font-size: calc(54px * var(--s, 1)); animation: story-react-up 1.8s cubic-bezier(.2,.7,.3,1) var(--d, 0ms) both; }
@keyframes story-react-up { from { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-75vh) scale(1.05); opacity: 0; } }
.story-sent-pill { position: absolute; z-index: 32; top: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 70px); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 14px; background: rgba(60,55,50,.85); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; animation: story-react-in .2s ease-out; }
.story-sent-pill svg { width: 20px; height: 20px; stroke: #fff; }
@media (prefers-reduced-motion: reduce) { .story-react-burst span { animation-duration: .01s; } }

/* ---------- DM: a story reply / reaction shows the story ---------- */
.rt-story-card.is-reply { width: 112px; margin: 6px 0 4px; overflow: visible; }
.rt-story-card.is-reply .rt-story-media { border-radius: 14px; overflow: hidden; }
.rt-story-card.is-reply .rt-story-who { display: none; }
.rt-story-card.is-reply.is-gone { height: 64px; }
.rt-story-react { position: absolute; z-index: 2; bottom: -10px; inset-inline-start: -22px; font-style: normal; font-size: 46px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.bubble-row.mine .rt-story-card.is-reply { margin-inline-start: auto; }
/* DM: a shared LIVE is the card itself, not a card inside a bubble */
html body .room-body .bubble-row .bubble.bubble:has(> .rt-live-card), html body .room-body .bubble-row:not(.mine) .bubble:has(> .rt-live-card) { background: none !important; background-color: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
html body .bubble > .rt-live-card { width: min(270px, 70vw); margin: 0 0 2px; background: #1f2030; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; }
html body .bubble:has(> .rt-live-card) > .bubble-time { display: block; padding: 0 6px; }

/* ---------- v1.3.7 gift cards (TikTok layout, ShotGram colours) ---------- */
html body .sg-gift-layer {
  inset: 44% 0 auto 0 !important; bottom: auto !important; height: auto !important; overflow: visible !important;
  display: flex !important; flex-direction: column !important;
  justify-content: flex-start !important; align-items: flex-start !important;
  padding: 0 0 0 10px !important; gap: 8px;
}
.sg-gcard {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 64px 0 4px; border-radius: 999px; max-width: 78%;
  background: linear-gradient(90deg, rgba(139, 92, 255, .72), rgba(255, 61, 184, .42) 62%, rgba(255, 61, 184, 0));
  color: #fff; direction: ltr; animation: sg-gcard-in .26s cubic-bezier(.2, .9, .3, 1.2) both;
}
.sg-gcard-txt { text-align: start; }
.sg-gcard[data-tier="epic"], .sg-gcard[data-tier="legendary"] {
  background: linear-gradient(90deg, rgba(0, 216, 255, .7), rgba(139, 92, 255, .6) 45%, rgba(255, 61, 184, 0));
}
.sg-gcard.is-out { animation: sg-gcard-out .28s ease-in forwards; }
.sg-gcard-av {
  flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; background: #1b1b2b;
}
.sg-gcard-ph { display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.sg-gcard-txt { display: grid; min-width: 0; line-height: 1.15; }
.sg-gcard-txt b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.sg-gcard-txt small { font-size: 12px; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.sg-gcard-gift { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 54px !important; height: 54px !important; font-size: 40px; line-height: 54px; text-align: center; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.sg-gcard-x {
  position: absolute; inset-inline-start: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  font: italic 900 30px/1 Inter, system-ui, sans-serif; color: #fff; white-space: nowrap;
  text-shadow: 0 2px 0 #ff3db8, 0 0 12px rgba(139, 92, 255, .9);
}
.sg-gcard-x.is-bump { animation: sg-gcard-bump .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes sg-gcard-in { from { transform: translateX(-110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sg-gcard-in-rtl { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sg-gcard-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sg-gcard-bump { 0% { transform: translateY(-50%) scale(1.6); } 100% { transform: translateY(-50%) scale(1); } }
/* the old floating chips / combo chip are replaced by the card */
html body .sg-combo-chip { display: none !important; }
@media (min-width: 900px) and (pointer: fine) { html body .sg-gift-layer { inset-block-start: 40% !important; } }
@media (prefers-reduced-motion: reduce) { .sg-gcard, .sg-gcard-x.is-bump { animation: none; } }

/* v1.3.8 — the LIVE layers never scroll: typing a comment used to slide the
   player (and the header with it) up under the status bar */
html body .live-screen.live-tt .ltt-player,
html body .live-screen.live-tt .live-watch-shell { overflow: clip !important; }
/* the comments under a wide (PC) LIVE stop just below the picture */
html body .live-screen.live-tt.src-wide:not(.is-rotated) .ltt-chat {
  max-height: max(64px, min(25vh, calc(var(--live-h, 100dvh) - var(--ltt-vbot, 0px) - 128px))) !important;
}
html body .live-screen.live-tt.src-wide:not(.is-rotated) .live-rotate-btn { top: calc(var(--ltt-vbot, 50%) - 42px) !important; bottom: auto !important; }

/* v1.3.8 — entrance banner for supporters level 20+ (TikTok-style) */
.sg-entrance {
  position: absolute; z-index: 12; inset-inline-start: 0; inset-block-end: clamp(200px, 38vh, 340px);
  display: flex; align-items: center; gap: 9px; max-width: min(86%, 340px);
  padding: 5px 22px 5px 6px; border-radius: 0 999px 999px 0; overflow: hidden; pointer-events: none;
  color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.28);
  animation: sg-ent-in .45s cubic-bezier(.2,.9,.25,1) both;
}
[dir="rtl"] .sg-entrance { border-radius: 999px 0 0 999px; padding: 5px 6px 5px 22px; animation-name: sg-ent-in-rtl; }
.sg-entrance.t-blue { background: linear-gradient(90deg, #1f6fe0, rgba(47,140,255,.85) 60%, rgba(47,140,255,0)); }
.sg-entrance.t-violet { background: linear-gradient(90deg, #5b3fd6, rgba(124,92,255,.85) 60%, rgba(124,92,255,0)); }
.sg-entrance.t-gold { background: linear-gradient(90deg, #b8860b, rgba(234,179,8,.88) 60%, rgba(234,179,8,0)); }
[dir="rtl"] .sg-entrance.t-blue { background: linear-gradient(270deg, #1f6fe0, rgba(47,140,255,.85) 60%, rgba(47,140,255,0)); }
[dir="rtl"] .sg-entrance.t-violet { background: linear-gradient(270deg, #5b3fd6, rgba(124,92,255,.85) 60%, rgba(124,92,255,0)); }
[dir="rtl"] .sg-entrance.t-gold { background: linear-gradient(270deg, #b8860b, rgba(234,179,8,.88) 60%, rgba(234,179,8,0)); }
.sg-entrance-av { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.9); display: grid; place-items: center; font: 800 14px/1 inherit; font-style: normal; background: rgba(255,255,255,.2); }
.sg-entrance-txt { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.sg-entrance-txt b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.sg-entrance-txt small { font-size: 12.5px; font-weight: 600; opacity: .92; }
.sg-entrance-shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); transform: translateX(-120%); animation: sg-ent-shine 1.4s .35s ease-out 2; }
.sg-entrance.is-out { animation: sg-ent-out .4s ease-in forwards; }
@keyframes sg-ent-in { from { transform: translate3d(-105%,0,0); } to { transform: none; } }
@keyframes sg-ent-in-rtl { from { transform: translate3d(105%,0,0); } to { transform: none; } }
@keyframes sg-ent-out { to { transform: translate3d(0,-10px,0); opacity: 0; } }
@keyframes sg-ent-shine { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .sg-entrance, .sg-entrance-shine { animation: none; } }
/* v1.3.8 — the comments sit lower and smoother: shorter list, scroll that
   stays inside the list, no fighting with the swipe-to-next gesture */
html body .live-tt .ltt-chat {
  max-height: 25vh !important; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; contain: content;
}
html body .live-tt .ltt-chat .live-chat-message, html body .live-tt .ltt-chat .live-chat-system { contain: layout paint; }

/* ---------- v1.3.9 — guest controls: mic / camera / flip ---------- */
.lgj-ctls { display: flex; justify-content: center; gap: 18px; margin: 2px 0 14px; }
.lgj-ctl { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #e9ebf8; cursor: pointer; font: inherit; }
.lgj-ctl i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); position: relative; }
.lgj-ctl i svg { width: 21px; height: 21px; }
.lgj-ctl small { font-size: 11.5px; color: #b9bcd6; }
.lgj-ctl:not(.is-off) i { background: rgba(47,140,255,.16); border-color: rgba(47,140,255,.5); color: #fff; }
.lgj-ctl.is-off i { background: rgba(254,44,85,.14); border-color: rgba(254,44,85,.45); color: #ff8aa3; }
.lgj-ctl.is-off[data-lgj="cam"] i::after { content: ""; position: absolute; width: 26px; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
.lgj-btn.small { height: 42px; font-size: 14px; }

/* tile: camera off → the avatar; mic off → a small mark next to the name */
.lg-tile.cam-off video { opacity: 0 !important; }
.lg-tile.cam-off .lg-tile-poster { display: block !important; filter: none; inset: auto; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; }
.lg-tile-mic { display: none; vertical-align: -2px; margin-inline-end: 3px; }
.lg-tile-mic svg { width: 12px; height: 12px; stroke: #ff6b88; }
.lg-tile.mic-off .lg-tile-mic { display: inline-block; }
.lg-tile.is-me { cursor: pointer; }
.lg-tile.is-me.is-back video { transform: none; }
.lg-tile-sound { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%;
  border: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; z-index: 2; }
.lg-tile-sound[hidden] { display: none; }
.lg-tile-sound svg { width: 18px; height: 18px; }

/* ---------- v1.3.9 — computer host: Challenge + Guests are clear buttons ---------- */
.sg-host-actions { display: flex; gap: 8px; }
.sg-host-actions > * { flex: 1 1 0; }
.sg-host-actions .live-battle-invite { margin: 0 !important; }
.sg-guests-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 12px;
  border-radius: 12px; border: 1px solid rgba(47,140,255,.45); background: rgba(47,140,255,.12); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
.sg-guests-cta svg { width: 18px; height: 18px; }
.sg-guests-cta .lg-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #fe2c55; color: #fff; font: 800 10px/17px system-ui, sans-serif; font-style: normal; text-align: center; }
@media (min-width: 900px) and (pointer: fine) {
  /* a challenge on the computer: your picture on the left half, the opponent
     on the right half, the score bar across the top (it used to cover you) */
  html body .live-creator-screen.live-v82.has-battle .live-stage { width: 50% !important; justify-self: start; }
  html body .live-creator-screen.live-v82.has-battle .live-room-shell > .live-battle-opponent {
    top: 0 !important; bottom: 0 !important; height: auto !important; max-width: none !important; border-radius: 0 !important;
    left: calc((100vw - 410px) / 2) !important; right: 410px !important; width: auto !important; z-index: 5;
  }
  html body .live-creator-screen.live-v82.has-battle .live-room-shell > .live-battle-opponent :is(video, iframe) { width: 100%; height: 100%; object-fit: cover; }
  html body .live-creator-screen.live-v82.has-battle .live-room-shell > .live-battle-bar { top: auto !important; bottom: 18px !important; }
  html body .live-creator-screen.live-v82.has-battle .lg-tiles { top: 140px; }
  html body .live-creator-screen.live-v82.has-battle .live-room-shell > .live-battle-opponent .btn { position: absolute; left: 12px; bottom: 92px; }
  /* the small guest icon in the chat box is replaced by the labelled button */
  html body .live-creator-screen.live-v82.is-computer #creatorChatForm > .live-creator-guests { display: none !important; }
}

/* ---------- v1.3.9 — guests grid like TikTok (3+ guests) ---------- */
.lg-tiles.lg-grid {
  left: 8px; right: 8px; display: grid; grid-template-columns: 27% 1fr 27%; gap: 6px 0; align-content: start;
  pointer-events: none;   /* taps between the columns still like the LIVE */
}
.lg-tiles.lg-grid > .lg-tile { pointer-events: auto; width: auto; height: auto; aspect-ratio: 1 / 1.02; border-radius: 12px; }
.lg-tiles.lg-grid > .lg-tile .lg-tile-poster { width: 46%; height: auto; aspect-ratio: 1; }
html body .live-tt-host .lg-tiles.lg-grid { left: 8px; right: 8px; }
@media (min-width: 760px) { .lg-tiles.lg-grid { grid-template-columns: 132px 1fr 132px; } .lg-tiles.lg-grid > .lg-tile { width: 132px; } }
/* camera off (and before the picture arrives): a round photo on a dark tile */
.lg-tile:not(.is-playing) .lg-tile-poster, .lg-tile.cam-off .lg-tile-poster {
  filter: none; inset: auto; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
}
.lg-tile { background: #16161f; }
.lg-tile-mic { position: absolute; right: 6px; bottom: 5px; margin: 0; z-index: 2; }
.lg-tile.mic-off .lg-tile-name { right: 24px; }
.lgj-asking { margin: 8px 18px 0; text-align: center; font-size: 13px; font-weight: 600; color: #8fb8ff; }
/* v1.3.9 — join button in ShotGram's calm blue */
.lgj-btn:not(.ghost):not(.danger) { background: #2f8cff; height: 46px; font-size: 15px; }

/* ---------- v1.3.9 — LIVE Center (after a LIVE) ---------- */
.lc-wrap { position: fixed; inset: 0; z-index: 9000; background: #0b0d13; opacity: 0; transition: opacity .2s; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lc-wrap.open { opacity: 1; }
.lc { max-width: 520px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px); color: #eef0f8; display: grid; gap: 12px; }
.lc-head { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.lc-head span { font-weight: 700; font-size: 15px; color: #c9cde0; }
.lc-x { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lc-x svg { width: 18px; height: 18px; }
.lc-dur { margin: 4px 0 0; color: #8e93ab; font-size: 13.5px; font-weight: 600; }
.lc-title { margin: 0 0 4px; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.lc-card { background: #151925; border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 14px; }
.lc-card h4 { margin: 0 0 12px; font-size: 15px; }
.lc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lc-stats b { display: block; font-size: 22px; font-weight: 800; }
.lc-stats small, .lc-coins > small { color: #8e93ab; font-size: 12px; }
.lc-coin-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.lc-coin-row img { width: 28px; height: 28px; }
.lc-coin-row b { font-size: 30px; font-weight: 800; }
.lc-coin-row span { color: #8e93ab; font-weight: 600; }
.lc-usd { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: #8fb8ff; }
.lc-note { margin: 6px 0 0; font-size: 12.5px; color: #8e93ab; }
.lc-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.lc-person { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.lc-person b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-person small { color: #8e93ab; font-size: 11.5px; }
.lc-mini { margin-top: 4px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lc-actions { display: flex; gap: 10px; margin-top: 4px; }
.lc-btn { flex: 1; height: 46px; border: 0; border-radius: 12px; background: #2f8cff; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.lc-btn.ghost { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }

/* ---------- v1.3.9 — "new profile photo" story offer ---------- */
.avs { display: flex; gap: 14px; padding: 6px 16px 18px; align-items: stretch; }
.avs-preview { width: 38%; max-width: 170px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); }
.avs-side { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; }
.avs-side b { font-size: 16px; line-height: 1.3; }
.avs-side small { color: #9aa0b8; font-size: 12.5px; margin-bottom: 4px; }
.avs-music, .avs-share, .avs-skip { height: 40px; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; }
.avs-music { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.avs-music span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avs-music svg { width: 16px; height: 16px; flex: none; }
.avs-music.on { border-color: rgba(47,140,255,.6); color: #cfe2ff; }
.avs-share { background: #2f8cff; border: 0; color: #fff; }
.avs-share:disabled { opacity: .5; }
.avs-skip { background: none; border: 0; color: #9aa0b8; }

/* ---------- 1.3.9.1 — Home "Live now" row: same bubbles as stories, side by side ----------
   No "LIVE" word on the picture and no gradient over a story ring: one clean
   red ring, the name, and how many are watching underneath. */
html body .home-live-strip { padding: 6px 12px 8px; }
html body .home-live-scroller { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
html body .home-live-person { width: 74px; flex: 0 0 74px; display: grid; justify-items: center; align-content: start; grid-template-rows: 66px auto auto; gap: 5px; overflow: visible; background: none; border: 0; padding: 0; color: var(--text, #fff); }
html body .home-live-avatar-wrap { width: 66px; height: 66px; flex: 0 0 66px; box-sizing: border-box; padding: 3px; border-radius: 50%; background: #fe2c55; overflow: hidden; display: grid; place-items: center; position: relative; }
html body .home-live-avatar-wrap img { width: 100% !important; height: 100% !important; box-sizing: border-box; object-fit: cover; border-radius: 50%; border: 3px solid var(--bg, #06070f); }
html body .home-live-avatar-wrap i { display: none !important; }
html body .home-live-person b { max-width: 74px; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .home-live-person .hl-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #a7adc2; white-space: nowrap; }
html body .home-live-person .hl-meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fe2c55; box-shadow: 0 0 0 3px rgba(254,44,85,.22); }
html body .home-live-person.is-mine b { color: #ff7d97; }
html body .home-live-person .hl-meta::before { flex: none; min-width: 6px; }
html body .home-live-head .live-pulse { background: #fe2c55; box-shadow: 0 0 0 4px rgba(254,44,85,.22); }

/* ---------- 1.3.9.1 — LIVE bubble inside the stories row: one red ring, a small dot, no word ---------- */
html body .tray-item.is-live .tray-live-ring { padding: 3px; background: #fe2c55; animation: none; box-shadow: none; }
html body .tray-item.is-live .tray-live-ring > .avatar, html body .tray-item.is-live .tray-live-ring > img { box-shadow: none; }
html body .tray-item.is-live .tray-live-ring::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--bg, #06070f); pointer-events: none; }
html body .tray-live-badge { left: auto; right: 2px; bottom: 2px; transform: none; width: 14px; height: 14px; padding: 0; border-radius: 50%; background: #fe2c55; font-size: 0; box-shadow: 0 0 0 3px var(--bg, #06070f); }
html body .tray-item.is-live .tiny { color: #ff7d97; font-weight: 700; }

/* ---------- 1.3.9.1 — Reels: refresh button (circle that spins) ---------- */
.reel-refresh { position: fixed; z-index: 30; top: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 12px); inset-inline-end: 14px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.reel-refresh svg { width: 19px; height: 19px; }
.reel-refresh.spin svg { animation: reel-refresh-spin .8s linear infinite; }
@keyframes reel-refresh-spin { to { transform: rotate(360deg); } }
body:not(.reels-open) .reel-refresh { display: none; }

/* ---------- 1.3.9.2 — LIVE bubble keeps the STORY ring; only a red dot marks LIVE ---------- */
html body .tray-item.is-live .tray-live-wrap { position: relative; }
html body .tray-item.is-live .tray-live-wrap .tray-live-badge { position: absolute; right: 0; bottom: 0; z-index: 2; }