/* ShotGram v139.44 — Instagram-style likes, paused reels, story hearts,
   DM call rows, business form on iPhone. */

/* the heart that pops at your finger and flies into the like button */
.sg-fly-heart { position: fixed; z-index: 4000; width: 104px; height: 104px; pointer-events: none;
  display: grid; place-items: center; will-change: transform, opacity; }
.sg-fly-heart svg { width: 104px; height: 104px; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .45)); }
.sg-like-pop { animation: sgLikePop .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sgLikePop { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
.rail-btn.liked svg, .w-btn.liked svg, .act.liked svg { color: #ff3b5c; }

/* reels: paused = a play button in the middle and the sound button above it */
.reel .reel-paused-sound { position: absolute; z-index: 7; left: 50%; top: 50%; width: 44px; height: 44px; margin: -100px 0 0 -22px;
  border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff;
  background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: scale(.85); pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
.reel .reel-paused-sound svg { width: 20px; height: 20px; }
.reel.is-paused .reel-paused-sound { opacity: 1; transform: scale(1); pointer-events: auto; }
.reel.sheet-up .reel-paused-sound, body.sg-clear-display .reel-paused-sound { display: none; }

/* stories: the heart next to the reply box, and the count for the owner */
.story-foot .story-like { flex: none; width: 44px; height: 44px; border: 0; background: none; color: #fff; display: grid; place-items: center; padding: 0; }
.story-foot .story-like svg { width: 27px; height: 27px; }
.story-foot .story-like.liked { color: #ff3b5c; }
.story-foot .story-likes { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 10px; color: #fff; font-weight: 700; font-size: 14px; }
.story-foot .story-likes svg { width: 17px; height: 17px; color: #ff3b5c; }
.user-row .liked-mark { color: #ff3b5c; display: inline-grid; margin-inline-start: 6px; }
.user-row .liked-mark svg { width: 16px; height: 16px; }

/* DMs — "Call back" is a round phone button again (Instagram), not a word */
.call-card .call-card-again { width: 36px !important; height: 36px !important; border-radius: 50% !important; padding: 0 !important;
  display: grid !important; place-items: center; flex: none; background: rgba(255, 255, 255, .1) !important; color: var(--text, #fff) !important;
  font-size: 0 !important; border: 0; }
.call-card .call-card-again svg { width: 17px; height: 17px; }
.call-card.missed .call-card-again { background: rgba(255, 78, 107, .14) !important; color: var(--bad, #ff4e6b) !important; }

/* business request form: on iPhone the date box was wider than the screen,
   so the whole form slid left / right while typing */
.bn-layer .bn-scroll, .bn-layer .bn-form-body { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
.bn-layer .bn-form-body > * { max-width: 100%; min-width: 0; }
.bn-layer input, .bn-layer textarea, .bn-layer select { max-width: 100%; min-width: 0; box-sizing: border-box; }
.bn-layer input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 48px; text-align: start; }
.bn-layer input[type="date"]::-webkit-date-and-time-value { text-align: start; }

/* reels: only the photo + name opens the profile — not the whole row */
.reel-info > .reel-author { justify-self: start; width: auto; max-width: 100%; }
.reel-info > .reel-music { justify-self: start; max-width: 100%; }
.w-info .w-who { width: fit-content; max-width: 100%; }

/* full-screen panels (Owner control room …): with the keyboard up the panel
   ends at the keyboard, so its list can scroll the text box into view */
html.sg-keyboard-open .modal:has(.mod-panel) { height: var(--vv-h, 100dvh) !important; }
html.sg-keyboard-open .modal-backdrop:has(.mod-panel) { height: var(--vv-h, 100dvh); bottom: auto; }
.mod-panel .mod-body { scroll-padding-bottom: 120px; }

/* faster page changes on long feeds: posts far off screen are not drawn
   until you scroll near them (Safari 18+, older iPhones simply ignore it) */
#feed > .post-card, .post-stream > .post-card { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* DMs — "Requests" and "Business" as two neat tiles side by side (one tile
   fills the row when only one is there). The little faces sit INSIDE the
   requests tile instead of floating between the rows. */
.inbox-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 14px 12px; }
.inbox-top > div:empty { display: none; }
.inbox-top:has(> div:empty) { grid-template-columns: 1fr; }
.inbox-top:has(> div:empty:first-child):has(> div:empty:last-child) { display: none; }
.inbox-top .request-block { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.inbox-top .request-head { position: relative; width: 100%; height: 100%; min-height: 92px; display: grid !important;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 8px;
  padding: 12px !important; border-radius: 18px; text-align: start;
  background: var(--surface-2, #15172a) !important; border: 1px solid var(--line, rgba(255,255,255,.08)) !important; }
.inbox-top .request-head .request-head-icon { width: 38px; height: 38px; grid-row: 1; grid-column: 1; }
.inbox-top .request-head .grow { grid-row: 1; grid-column: 2; min-width: 0; padding-inline-end: 22px; }
.inbox-top .request-head .grow b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-top .request-head .grow .small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-top .request-head .thread-count { position: absolute; top: 10px; inset-inline-end: 10px; margin: 0; }
.inbox-top .request-head .request-faces { grid-row: 2; grid-column: 1 / -1; position: static !important; display: flex; margin: 0 !important; }
.inbox-top .request-head .request-faces .avatar { margin-inline-end: -8px; box-shadow: 0 0 0 2px var(--surface-2, #15172a); }
.inbox-top .request-head .request-faces:empty { display: none; }
.inbox-top > div, .inbox-top .request-block { display: flex; min-width: 0; }
.inbox-top .request-block { flex: 1; }
.inbox-top .request-head .request-faces .avatar { width: 26px !important; height: 26px !important; font-size: 10px; margin-inline-end: -6px; position: relative; }
.inbox-top .request-head .request-faces .avatar:nth-child(1) { z-index: 3; }
.inbox-top .request-head .request-faces .avatar:nth-child(2) { z-index: 2; }

/* the small voice bar (clan voice / Majlis) floated into the middle of the
   page while typing: with the keyboard up it hides, and comes back the
   moment the keyboard closes. The call itself keeps running. */
html.sg-keyboard-open #persistentVoice > .voice-dock:not(.expanded) { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
#persistentVoice > .voice-dock { transition: opacity .15s ease; }

/* Explore search results: one tidy line, in line with the search box */
.explore-result-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 18px 4px; min-width: 0; }
.explore-result-head .eyebrow { font-size: 11px; letter-spacing: .08em; color: var(--muted, #8b8fa8); flex: none; }
.explore-result-head h2 { margin: 0; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* v139.45 — start screen: just the S, no square behind it (no card, no
   square shine, no square shadow), on pure black. */
html:not([data-theme]) .app-splash.v2 .app-splash-mark,
html[data-theme="default"] .app-splash.v2 .app-splash-mark,
html[data-theme="classic"] .app-splash.v2 .app-splash-mark {
  width: 112px !important; height: 112px !important; border-radius: 0 !important; overflow: visible !important;
  background: none !important; box-shadow: none !important;
}
.app-splash.v2 .app-splash-shine { display: none !important; }
.app-splash.v2 .app-splash-mark img { filter: none !important; }
/* pure black, no glow anywhere (no colour clouds, no halo behind the S) */
.app-splash.v2 { background: #000 !important; }
.app-splash.v2 .app-splash-aurora { display: none !important; }
.app-splash.v2 .app-splash-logo::before { display: none !important; }
.app-splash.v2 .app-splash-orbit { filter: none !important; }

/* v139.45 — the S itself is the loader: it turns (flat, like a coin on a
   table — never mirrored), with a short rest each turn. The ring is gone. */
.app-splash.v2 .app-splash-orbit { display: none !important; }
html:not([data-theme]) .app-splash.v2 .app-splash-mark,
html[data-theme="default"] .app-splash.v2 .app-splash-mark,
html[data-theme="classic"] .app-splash.v2 .app-splash-mark { animation: sgSpinS 1.8s cubic-bezier(.65, 0, .35, 1) infinite !important; }
@keyframes sgSpinS { 0% { transform: rotate(0deg); } 70%, 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .app-splash.v2 .app-splash-mark { animation: none !important; }
}

/* v139.45 — pull to refresh: the ShotGram S turns instead of a ring.
   While you pull it turns with your finger; while reloading it spins.
   No bubble behind it. (Messages uses the same S.) */
.ptr { background: transparent !important; box-shadow: none !important; width: 34px !important; height: 34px !important; }
.ptr .ptr-spin, .ptr.ready .ptr-spin, .ptr.spinning .ptr-spin, .dm-ptr .dm-ptr-spin, .dm-ptr.busy .dm-ptr-spin {
  width: 30px !important; height: 30px !important; border: 0 !important; border-radius: 0 !important;
  background: url('/assets/logo-mark-v3.png') center / contain no-repeat !important;
  -webkit-mask: none !important; mask: none !important; filter: none !important;
}
.ptr .ptr-spin { animation: none !important; transform: rotate(calc(var(--p, 0) * 360deg)); }
.ptr.spinning .ptr-spin, .dm-ptr.busy .dm-ptr-spin { animation: sgring .9s cubic-bezier(.5, .1, .5, .9) infinite !important; }
@media (prefers-reduced-motion: reduce) { .ptr.spinning .ptr-spin, .dm-ptr.busy .dm-ptr-spin { animation-duration: 2s !important; } }

/* v139.45 — nothing scrolls UNDER the clock / battery any more. On some
   pages (Edit profile …) the text slid up behind the status bar once the top
   bar had scrolled away. A thin bar of the app colour now sits behind the
   status bar. Full-screen screens (Reels, video, LIVE, calls, camera) still
   go edge to edge. */
body::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: env(safe-area-inset-top, 0px);
  background: var(--ink, #06070f); z-index: 39; pointer-events: none;
}
body.reels-open::before, body.watch-open::before, body.live-open::before, body.majlis-open::before,
body.call-open::before, body.create-open::before, body.crop-open::before, body.story-composing::before,
body.story-ad-open::before, body.qr-open::before { display: none; }

/* v139.45 — "Get the app" bar on shared links opened in a browser */
.pub-appbar { display: flex; align-items: center; gap: 12px; margin: 8px 12px 0; padding: 10px 12px; border-radius: 16px;
  background: var(--surface-2, #15172a); border: 1px solid var(--line, rgba(255,255,255,.08)); color: inherit; text-decoration: none; }
.pub-appbar img { border-radius: 10px; flex: none; }
.pub-appbar .grow { display: grid; min-width: 0; }
.pub-appbar small { color: var(--muted, #9aa0b4); font-size: 12px; }
.pub-appbar-btn { flex: none; padding: 7px 16px; border-radius: 999px; background: #fff; color: #000; font-weight: 800; font-size: 14px; }
.pub-gate .pub-gate-app, .pub-cta a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.pub-gate .pub-gate-app svg, .pub-cta a.btn svg { width: 18px; height: 18px; }

/* v139.45 — clan / voice-room invite in DMs: room name big, the clan under
   it, the clan's own badge + colours. Names wrap instead of being cut off. */
.dm-invite-card { width: min(300px, 76vw) !important; align-items: center; background: #262a36 !important; }
.dm-invite-card.has-clan .dm-invite-icon { background: linear-gradient(135deg, var(--clan-color, #5865f2), var(--clan-color-2, #5865f2)) !important; }
.dm-invite-card .dm-invite-icon img, .dm-invite-card .dm-invite-icon .clan-badge { max-width: 28px; max-height: 28px; }
.dm-invite-txt b { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.dm-invite-sub { font-size: 12px; color: rgba(255, 255, 255, .62); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm-invite-live { font-size: 12px; font-weight: 700; color: #3ddc84; }

/* v139.48 — chat with the official @shotgram account: a calm notice + Help */
.req-panel.official-inbox .req-panel-actions button { flex: 1; }
.w-owner i[data-views] { font-style: normal; }

/* v139.49 — send / invite sheet: ONE row that swipes sideways (the last 10
   people you talked to); search for anyone else. People you picked stay at the
   front of the row. */
.sgs-grid { display: flex !important; flex-wrap: nowrap; align-items: flex-start; gap: 6px;
  overflow-x: auto; overflow-y: hidden; min-height: 0 !important; max-height: none !important;
  padding: 10px 12px 12px; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sgs-grid::-webkit-scrollbar { display: none; }
.sgs-grid .sgs-p { flex: 0 0 74px; width: 74px; overflow: visible; scroll-snap-align: start; }
.sgs-grid .sgs-name { max-width: 72px; }
.sgs-grid .sgs-wait, .sgs-grid .sgs-empty { flex: 1 0 100%; min-height: 96px; }

/* v139.50 — iPhone / iPad browsers: "ShotGram is better in the app" */
.sg-getapp-bar { margin: 0 0 14px; }
.sg-getapp { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0); transition: background .2s ease; padding: 0 0 env(safe-area-inset-bottom, 0px); }
.sg-getapp.on { background: rgba(0,0,0,.55); }
.sg-getapp-card { width: min(520px, 100%); margin: 0 auto; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0; background: var(--surface, #111318); border-top: 1px solid var(--line, rgba(255,255,255,.08));
  text-align: center; transform: translateY(100%); transition: transform .22s ease; display: grid; gap: 10px; justify-items: center; }
.sg-getapp.on .sg-getapp-card { transform: none; }
.sg-getapp-card img { border-radius: 18px; }
.sg-getapp-card h3 { margin: 4px 0 0; font-size: 19px; }
.sg-getapp-card p { margin: 0 0 6px; color: var(--muted, #9aa0b4); font-size: 14px; line-height: 1.45; }
.sg-getapp-card .btn { width: 100%; text-decoration: none; display: flex; align-items: center; justify-content: center; }

/* v139.50 — search boxes: Arabic text (right to left) ran under the ✕ button.
   The box keeps room on the right for the ✕ (and on the left for the 🔍). */
.search-wrap .input { padding-right: 44px !important; padding-left: 38px !important; text-overflow: ellipsis; }
.search-wrap .icon-btn { width: 32px; height: 32px; min-width: 32px; z-index: 1; }
.search-wrap .icon-btn svg { width: 16px; height: 16px; }

/* v139.50 — the ShotGram Plus row in the profile menu: just the yellow star */
.sheet-item.is-plus svg { color: #ffcc1a; fill: #ffcc1a; }

/* v139.52 — ShotGram Plus plans (1 · 3 · 6 · 12 months) */
.plus-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 2px; }
.plus-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start;
  padding: 12px 12px 10px; border-radius: 16px; background: #141419; border: 1.5px solid var(--line); color: var(--text, #fff); font: inherit; cursor: pointer; }
.plus-plan b { font-size: 14px; font-weight: 700; }
.plus-plan-price { font-size: 18px; font-weight: 800; color: #fff; }
.plus-plan small { font-size: 12px; color: var(--muted); }
.plus-plan em { font-style: normal; font-size: 11px; font-weight: 800; color: #111; background: #ffd60a; border-radius: 999px; padding: 2px 7px; margin-top: 4px; }
.plus-plan.on { border-color: #ffd60a; background: rgba(255, 214, 10, .08); }
.plus-plan-tag { position: absolute; top: -9px; inset-inline-end: 10px; font-size: 10px; font-weight: 800; color: #111; background: #ffd60a; border-radius: 999px; padding: 2px 8px; }

/* v139.51 — sound library (Audio screen) */
.snd-sheet .sheet-list { display: none; }
.snd-lib { display: flex; flex-direction: column; min-height: 0; height: min(78vh, 720px); }
.snd-search { margin: 2px 0 10px; }
.snd-search .input { padding-left: 38px !important; }
html[dir="rtl"] .snd-search .input { padding-left: 14px !important; padding-right: 38px !important; }
.snd-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; flex-shrink: 0; }
.snd-tabs::-webkit-scrollbar { display: none; }
.snd-tabs button { flex: 0 0 auto; padding: 8px 14px; border-radius: 12px; border: 0; background: #23262d; color: #e8e8ea; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.snd-tabs button.on { background: #fff; color: #111; }
.snd-list { flex: 1; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.snd-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-radius: 14px; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: start; }
.snd-row.on { background: rgba(88, 101, 242, .12); }
.snd-play { position: relative; flex: 0 0 52px; width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer; }
.snd-cover { display: block; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #23262d; }
.snd-cover img, .snd-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.snd-cover.empty { display: grid; place-items: center; color: var(--muted); }
.snd-cover.lg { width: 60px; height: 60px; flex: 0 0 60px; }
.snd-play-ic, .snd-pause-ic { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .28); border-radius: 10px; }
.snd-play-ic svg, .snd-pause-ic svg { width: 20px; height: 20px; fill: #fff; }
.snd-pause-ic { display: none; }
.snd-row.playing .snd-play-ic { display: none; }
.snd-row.playing .snd-pause-ic { display: grid; }
.snd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.snd-info b { font-size: 15px; font-weight: 700; }
.snd-info span { font-size: 13px; color: var(--muted); }
.snd-song svg { width: 13px; height: 13px; vertical-align: -2px; }
.snd-save { flex: 0 0 36px; height: 36px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.snd-save.on { color: #fff; }
.snd-use { flex: 0 0 auto; padding: 7px 14px; border-radius: 10px; border: 0; background: #5865f2; color: #fff; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.snd-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--muted); text-align: center; font-size: 14px; }
.snd-empty svg { width: 34px; height: 34px; }
.snd-more { height: 40px; }
.snd-row-search { padding: 8px 12px; }
/* step 2: where the sound starts */
.snd-start-sheet .sheet-list { display: none; }
.snd-start { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.snd-start-head { display: flex; align-items: center; gap: 12px; }
.snd-start-hint { margin: 0; }
.snd-wave { display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 2px; border-radius: 12px; background: #17191e; overflow: hidden; }
.snd-wave i { flex: 1; background: linear-gradient(180deg, #8b93ff, #5865f2); border-radius: 2px; min-height: 6%; }
.snd-range { width: 100%; accent-color: #5865f2; }
.snd-start-time { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.snd-start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.snd-browse { margin-top: 4px; }
/* sound page: Use + Save */
.sound-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 12px 0; }
.sound-actions .sound-use { margin: 0; }
.sound-save.on { color: #fff; border-color: #fff; }
/* Explore: trending sounds */
.xp-sounds { margin: 6px 0 10px; }
.xp-sound-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 12px 4px; }
.xp-sound-strip::-webkit-scrollbar { display: none; }
.xp-sound { flex: 0 0 116px; display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.xp-sound-cover { display: block; width: 116px; height: 116px; border-radius: 14px; overflow: hidden; background: #23262d; position: relative; }
.xp-sound-cover img, .xp-sound-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-sound-cover.empty { display: grid; place-items: center; color: var(--muted); }
.xp-sound b { font-size: 13px; }
.xp-sound-uses { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.xp-sound-uses svg { width: 12px; height: 12px; }
.snd-play { display: block !important; height: 52px !important; overflow: hidden; border-radius: 10px; }
.snd-play > .snd-cover { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.snd-play > .snd-play-ic, .snd-play > .snd-pause-ic { position: absolute !important; inset: 0; z-index: 1; }
.snd-play .snd-cover.empty svg { display: none; }

/* v1.3.5 — DM header: the streak sits small on the status line under the
   name ("🔥 1 · Offline") instead of a big pill beside the name that pushed
   into the call buttons. */
.room-peer-sub { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.room-peer-sub #roomStreak:empty { display: none; }
.room-peer-sub .streak {
  margin: 0 !important; padding: 0 6px 0 4px !important; gap: 2px !important;
  font-size: 10.5px !important; line-height: 16px !important; height: 16px; border-radius: 99px;
}
.room-peer-sub .streak svg { width: 10px !important; height: 10px !important; }
.room-peer-sub .streak b { font-size: 10.5px !important; }
.room-head .room-peer-id > .row { min-width: 0; max-width: 100%; }
.room-peer-sub #roomStreak { display: inline-flex; align-items: center; line-height: 16px; height: 16px; }
.room-peer-sub { line-height: 16px; height: 16px; }

/* v1.3.5 — LIVE, host screen: numbers under the name, chat always open,
   Share + ❤ beside the message box, and nothing on top of the name. */
.live-creator-chat-form { grid-template-columns: minmax(0, 1fr) 34px 34px 34px !important; }
.live-room-shell .live-creator-chat-form .live-creator-share,
.live-room-shell .live-creator-chat-form .live-creator-like,
.live-creator-chat-form .live-creator-share,
.live-creator-chat-form .live-creator-like {
  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;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.live-creator-chat-form .live-creator-like svg { color: #ff3d70; fill: #ff3d70; }
.live-creator-chat-form .live-creator-like:active { transform: scale(.88); }
.live-creator-stats-top {
  position: absolute; z-index: 6;
  top: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 108px);
  inset-inline-start: 10px;
  display: flex !important; align-items: center; gap: 8px;
  padding: 5px 11px !important; border: 0 !important; border-radius: 999px;
  background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: default !important; pointer-events: none;
}
.live-creator-stats-top.hidden { display: none !important; }
.live-creator-stats-top > b { display: none; }
.live-creator-stats-top > div { display: flex; gap: 10px; }
.live-creator-stats-top span { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #fff; }
.live-creator-stats-top svg { width: 13px; height: 13px; }
@media (max-width: 760px) {
  html body .live-v82 .live-top-row { align-items: flex-start !important; }
  html body .live-v82 .live-creator-chat { max-height: 36vh !important; }
  html body .live-v82 .live-creator-chat > * { max-width: 82%; }
  html body .live-v82 .live-creator-chat-form button { width: 40px; height: 40px; flex: none; }
  /* a challenge sits under the numbers, never on the name */
  html body .live-v82 .live-battle-bar { top: calc(var(--sa-t, 0px) + 142px) !important; }
  html body .live-v82 .live-battle-opponent { top: calc(var(--sa-t, 0px) + 208px) !important; }
}
@media (max-width: 760px) {
  html body .live-v82 .live-creator-social { max-height: 54vh !important; }
  html body .live-v82 .live-creator-social > :not(.live-creator-chat) { flex-shrink: 0 !important; }
  html body .live-v82 .live-creator-chat { min-height: 0; flex: 0 1 auto; }
}
@media (max-width: 760px) {
  html body .live-creator-screen.live-v82.is-broadcasting .live-creator-chat { max-height: 34vh !important; }
}
html body .live-room-shell .live-creator-stats-top { background: rgba(0, 0, 0, .45) !important; border-radius: 999px !important; }
.room-bar.is-recording #sendBtn { background: var(--brand) !important; color: #fff !important; }
/* v1.3.5 — FIX: while recording a voice note there was NO send button on
   screen (the bar hid the mic — which turns into ➤ — and the text send
   button is hidden when the box is empty), so a voice note could never be
   sent. The ➤ is back, next to the recording bar. */
.room-bar.is-recording > #micBtn {
  display: grid !important; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand) !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(var(--violet-rgb, 139, 92, 255), .45);
}
.room-bar.is-recording > #micBtn svg { width: 20px; height: 20px; }
.room-bar.is-recording > #sendBtn { display: none !important; }
.room-bar.is-recording { align-items: center !important; }
.room-bar.is-recording > #micBtn, .room-bar.is-recording > .vn-hint { align-self: center !important; margin-block: 0 !important; }
.room-bar.is-recording > .vn-hint.vn-hint-inline { position: relative !important; top: 0 !important; bottom: auto !important; transform: none !important; translate: none !important; }

/* v1.3.5 — Settings → Camera and microphone (iOS-style list with switches) */
.modal:has(.aperm) { padding: 22px 18px 18px !important; }
.aperm { text-align: center; }
.aperm-hero { display: inline-flex; gap: 10px; margin: 6px auto 12px; }
.aperm-hero svg {
  width: 26px; height: 26px; padding: 14px; box-sizing: content-box; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, var(--cyan, #00d8ff), var(--violet, #8b5cff));
  box-shadow: 0 8px 24px rgba(var(--violet-rgb, 139, 92, 255), .35);
}
.aperm-hero svg + svg { background: linear-gradient(135deg, var(--violet, #8b5cff), var(--magenta, #ff2ed1)); box-shadow: 0 8px 24px rgba(255, 46, 209, .3); }
.aperm h2 { margin: 0 0 6px; padding-inline: 30px; font-size: 21px; font-weight: 800; }
.aperm > p { margin: 0 auto 18px; max-width: 300px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.aperm-group {
  text-align: start; border-radius: 18px; overflow: hidden;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.aperm-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; min-height: 64px; cursor: pointer; }
.aperm-row + .aperm-row { border-top: 1px solid rgba(255, 255, 255, .08); }
.aperm-tile { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; color: #fff; }
.aperm-tile svg { width: 21px; height: 21px; }
.aperm-tile.cam { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.aperm-tile.mic { background: linear-gradient(135deg, #a46bff, #ff2ed1); }
.aperm-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.aperm-copy b { font-size: 16.5px; font-weight: 700; }
.aperm-copy small { font-size: 13px; color: var(--muted); }
.aperm-row.is-on .aperm-copy small { color: #34d399; font-weight: 600; }
.aperm-row.is-off .aperm-copy small { color: #ff6b81; font-weight: 600; }
.aperm-row .sg-switch input:checked + i { background: #34c759; }
.aperm-open { margin-top: 16px; min-height: 50px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.aperm-note { margin: 10px 4px 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.aperm-open[hidden], .aperm-note[hidden] { display: none !important; }

/* v1.3.5 — profile spacing: one even rhythm, no dead space.
   · the banner starts right under the top bar (a 10px black strip sat between)
   · name → badges → bio → links → country/joined → business → stats → buttons
     all spaced 8–14px instead of anywhere from 0 to 40px */
main.screen:has(> .pf-b) { padding-top: 0 !important; }
.pf-b .profile-meta { gap: 0 !important; padding: 8px 20px 0 !important; }
.pf-b .profile-name-row { gap: 2px !important; }
.pf-b .profile-name-line { min-height: 0; }
.pf-b .profile-badges { margin: 6px 0 0 !important; min-height: 0 !important; }
.pf-b .profile-badges:empty { display: none !important; }
.pf-b .profile-tag-row { min-height: 0 !important; margin: 0 auto !important; gap: 6px !important; }
.pf-b .profile-tag-row .profile-tag-icon { width: 38px !important; height: 38px !important; display: inline-grid !important; place-items: center; overflow: visible !important; cursor: pointer; background: none !important; border: 0 !important; -webkit-tap-highlight-color: transparent; }
.pf-b .profile-tag-row .profile-tag-icon .family-badge-art.sgb { width: 30px !important; height: 30px !important; overflow: visible !important; }
.pf-b .profile-tag-row .profile-tag-icon:active { transform: scale(.9); }
.pf-b .profile-meta > .bio { margin-top: 8px !important; }
.pf-b .profile-meta > .profile-socials { margin: 12px 0 0 !important; gap: 10px !important; }
.pf-b .profile-meta > .profile-socials .social-dot { width: 36px !important; height: 36px !important; }
.pf-b .profile-meta > .pf-facts { margin-top: 12px !important; gap: 3px !important; }
.pf-b .profile-meta > .bn-pill-slot:empty { display: none; }
.pf-b .profile-meta > .bn-pill-slot { margin-top: 4px; }
.pf-b .profile-meta > .tiny.dim { margin-top: 6px; }
.pf-b .pf-stats { padding: 14px 14px 0 !important; }
.pf-b .profile-actions { margin-top: 12px !important; padding-top: 0 !important; }
.pf-b .profile-tabs { margin-top: 10px !important; }

/* v1.3.5 — profile links: the real platform logos, each on its own round
   brand tile (drawn inside the SVG). No borders, no coloured glow on hover. */
.profile-socials .social-dot:has(> .brand-ico) {
  background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important;
  padding: 0; overflow: hidden;
}
.profile-socials .social-dot > .brand-ico { width: 100% !important; height: 100% !important; display: block; stroke: none; }
.profile-socials .social-dot,
.profile-socials .social-dot:hover,
.profile-socials .social-dot:focus-visible { box-shadow: none !important; filter: none !important; transform: none; }
.profile-socials .social-dot:active { transform: scale(.92); }
.social-website { border: 0 !important; }

/* v1.3.5 — Messages: Requests / Business as two small chips (was two big
   cards with a subtitle and faces). Same taps, same counts, a third of the space. */
.inbox-top { display: flex !important; flex-wrap: wrap; gap: 8px !important; padding: 0 14px 8px !important; }
.inbox-top > div, .inbox-top .request-block { flex: 0 0 auto !important; display: block; min-width: 0; }
.inbox-top .request-head {
  min-height: 0 !important; height: 34px !important; width: auto !important;
  display: inline-flex !important; align-items: center; gap: 7px !important;
  padding: 0 12px 0 6px !important; border-radius: 999px !important;
}
.inbox-top .request-head .request-head-icon { width: 24px !important; height: 24px !important; border-radius: 50% !important; flex: none; }
.inbox-top .request-head .request-head-icon svg { width: 13px !important; height: 13px !important; }
.inbox-top .request-head .grow { padding: 0 !important; flex: none; }
.inbox-top .request-head .grow b { font-size: 13.5px !important; }
.inbox-top .request-head .grow .small,
.inbox-top .request-head .request-faces { display: none !important; }
.inbox-top .request-head .thread-count { position: static !important; margin: 0 !important; min-width: 20px; height: 20px; font-size: 11px; }
/* 1.3.9.1 — the official chat's Help button: one clean full-width button */
.req-panel.official-inbox .req-panel-actions { display: flex; }
.req-panel.official-inbox .req-panel-actions button { flex: 1; white-space: nowrap; }

/* 1.3.9.1 — official @shotgram chat: a disabled bar in the same shape as the message bar */
.room-bar.official-bar { align-items: center; gap: 10px; padding: 0 16px; min-height: 46px; opacity: .85; cursor: default; }
.room-bar.official-bar svg { width: 17px; height: 17px; flex: none; color: var(--muted, #8b95a7); }
.official-bar-text { flex: 1; font-size: 13.5px; line-height: 1.35; color: var(--muted, #8b95a7); }