/* ShotGram v133 + v134 — full-screen viewer, Comments|Likes sheet, privacy,
   autoplay sound button, share tools, Instagram-style message requests, Plus. */

/* ---------- feed autoplay: one sound button, no +/- ---------- */
.pc-sound { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; border: 0; }
.pc-sound svg { width: 15px; height: 15px; }
.media-slide-stage video.slide { cursor: pointer; }

/* ---------- privacy chip + grid badges ---------- */
.vis-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.1); color: var(--text); font-size: 11px; font-weight: 700; margin-inline-start: 6px; }
.vis-chip svg { width: 12px; height: 12px; }
.tile-vis { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.6); color: #fff; z-index: 2; }
.tile-vis svg { width: 12px; height: 12px; }
.tile-views { position: absolute; left: 6px; bottom: 5px; display: inline-flex; align-items: center; gap: 2px; z-index: 2;
  color: #fff; font-size: 11px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.tile-views svg { width: 11px; height: 11px; }

/* ---------- privacy sheet (TikTok) ---------- */
.pv-card { background: var(--surface-2); border-radius: 16px; padding: 6px 0; margin: 0 2px 12px; }
.pv-head { font-weight: 800; padding: 12px 16px 6px; }
.pv-opt, .pv-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: none; border: 0;
  color: var(--text); text-align: start; font: inherit; }
.pv-opt b, .pv-toggle b { display: block; font-weight: 600; }
.pv-sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.pv-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); flex: none; position: relative; }
.pv-radio.on { border-color: var(--like); background: var(--like); }
.pv-radio.on::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }

/* ---------- insights ---------- */
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ins-cell { background: var(--surface-2); border-radius: 14px; padding: 12px 6px; display: grid; justify-items: center; gap: 3px; }
.ins-cell svg { width: 18px; height: 18px; color: var(--muted); }
.ins-cell b { font-size: 19px; }
.ins-cell span { font-size: 11.5px; color: var(--muted); }
.ins-row { display: flex; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ins-head { font-weight: 800; margin: 14px 4px 4px; }

/* ---------- cover pickers ---------- */
.cover-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cover-pick { position: relative; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; border: 2px solid transparent; padding: 0; background: #000; }
.cover-pick.on { border-color: var(--like); }
.cover-pick img { width: 100%; height: 100%; object-fit: cover; }
.cover-pick span { position: absolute; left: 6px; bottom: 6px; background: var(--like); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.cvp-stage { display: grid; place-items: center; background: #000; border-radius: 16px; overflow: hidden; height: min(52dvh, 460px); }
.cvp-stage video, .cvp-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cvp-range { width: 100%; margin-top: 14px; accent-color: var(--like); }
.cvp-time { text-align: center; margin-top: 4px; }

/* ---------- Comments | Likes sheet ---------- */
.cm-sheet-wrap { position: fixed; inset: 0; z-index: 1100; background: transparent; --kb: 0px; }
.cm-sheet { position: absolute; left: 0; right: 0; bottom: var(--kb); height: min(68dvh, 640px); background: #1c1c1e; color: #fff;
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .22s ease;
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -10px 40px rgba(0,0,0,.45); }
.cm-sheet-wrap.open .cm-sheet { transform: translateY(0); }
.cm-tabs { display: flex; align-items: center; gap: 4px; padding: 10px 10px 0 14px; border-bottom: 1px solid rgba(255,255,255,.09); touch-action: none; }
.cm-tab { background: none; border: 0; color: rgba(255,255,255,.55); font: inherit; font-size: 16px; font-weight: 700; padding: 10px 12px 12px;
  border-bottom: 2.5px solid transparent; }
.cm-tab.on { color: #fff; border-bottom-color: #fff; }
.cm-close { margin-inline-start: auto; color: #fff; }
.cm-body { flex: 1; overflow-y: auto; padding: 8px 14px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cm-empty { display: grid; justify-items: center; gap: 6px; padding: 50px 10px; color: rgba(255,255,255,.6); text-align: center; }
.cm-empty svg { width: 34px; height: 34px; }
.cm-empty b { color: #fff; }
.cm-item { display: flex; gap: 10px; padding: 10px 0; }
.cm-item.reply { padding-inline-start: 44px; }
.cm-av { background: none; border: 0; padding: 0; }
.cm-name { display: flex; align-items: center; gap: 4px; font-size: 13px; color: rgba(255,255,255,.7); }
.cm-name .link-plain { color: rgba(255,255,255,.75); font-weight: 700; }
.cm-creator { font-size: 10.5px; color: var(--like); font-weight: 800; margin-inline-start: 4px; }
.cm-text { font-size: 15px; line-height: 1.38; margin-top: 2px; word-break: break-word; }
.cm-meta { display: flex; gap: 14px; margin-top: 5px; font-size: 12.5px; color: rgba(255,255,255,.5); }
.cm-meta .link-plain { color: rgba(255,255,255,.6); font-weight: 600; }
.cm-like { display: grid; justify-items: center; gap: 1px; background: none; border: 0; color: rgba(255,255,255,.55); font-size: 11px; min-width: 30px; }
.cm-like svg { width: 17px; height: 17px; }
.cm-like.on { color: var(--like); }
.cm-compose { border-top: 1px solid rgba(255,255,255,.09); padding: 8px 10px 6px; position: relative; }
.cm-quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; }
.cm-quick::-webkit-scrollbar { display: none; }
.cm-quick button { flex: none; border: 0; background: #2c2c2e; border-radius: 999px; padding: 6px 12px; font-size: 20px; letter-spacing: 2px; }
.cm-bar { display: flex; align-items: center; gap: 8px; }
.cm-bar .input { background: #2c2c2e; border-radius: 22px; padding: 11px 14px; color: #fff; min-height: 44px; }
.cm-send { width: 46px; height: 36px; border-radius: 18px; border: 0; background: var(--like); color: #fff; display: grid; place-items: center; }
.cm-send:disabled { opacity: .4; }
.cm-send svg { width: 18px; height: 18px; }
.cm-reply { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.65); padding: 0 4px 6px; }
.cm-off { text-align: center; padding: 14px; }
.cm-compose .mention-box { position: absolute; bottom: 100%; left: 10px; right: 10px; }
.lk-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.lk-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; color: #fff; text-align: start; padding: 0; }
.lk-av { border-radius: 50%; padding: 2px; flex: none; }
.lk-av.story { background: conic-gradient(from 180deg, var(--cyan, #00d8ff), var(--violet, #8b5cff), var(--magenta, #ff2ed1), var(--cyan, #00d8ff)); }
.lk-av.story .avatar { border: 2px solid #1c1c1e; }
.lk-btn { flex: none; min-width: 112px; height: 38px; border-radius: 10px; border: 0; background: var(--like); color: #fff; font-weight: 700; font-size: 14px; padding: 0 12px; }
.lk-btn.ghost { background: #2c2c2e; }

/* ---------- full-screen viewer ---------- */
body.watch-open .topbar, body.watch-open .tabbar { display: none !important; }
body.watch-open { overflow: hidden; }
.watch { position: fixed; inset: 0; background: #000; z-index: 50; }
.watch-top { position: absolute; z-index: 6; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent); }
.watch-back { width: 38px; height: 38px; border: 0; background: none; color: #fff; display: grid; place-items: center; }
.watch-back svg { width: 24px; height: 24px; }
.watch-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; border-radius: 12px; padding: 0 6px 0 12px;
  border: 1.5px solid rgba(255,255,255,.75); background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; }
.watch-search svg { width: 18px; height: 18px; opacity: .85; }
.watch-search input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: inherit; font-size: 15px; outline: none; }
.watch-search input::placeholder { color: rgba(255,255,255,.7); }
.watch-search button { background: none; border: 0; border-inline-start: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 800; padding: 0 10px; font-size: 15px; }
.watch-stack { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.watch-stack::-webkit-scrollbar { display: none; }
.w-slide { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000; }
.w-stage { position: absolute; inset: 0; display: grid; place-items: center; transition: inset .25s ease, transform .25s ease; }
.w-stage .w-video { width: 100%; height: 100%; object-fit: contain; }
.w-overlays { position: absolute; inset: 0; pointer-events: none; }
.w-overlays a { pointer-events: auto; }
.w-paused { position: absolute; z-index: 3; width: 72px; height: 72px; display: grid; place-items: center; color: rgba(255,255,255,.85);
  opacity: 0; transition: opacity .15s; pointer-events: none; }
.w-paused svg { width: 60px; height: 60px; }
.w-slide.paused .w-paused { opacity: 1; }
.w-progress { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 2px); padding: 0 8px; }
.w-progress input { width: 100%; height: 14px; accent-color: #fff; opacity: .7; }
.w-photos { width: 100%; height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.w-photos::-webkit-scrollbar { display: none; }
.w-photo { flex: 0 0 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; }
.w-photo img, .w-photo video { max-width: 100%; max-height: 100%; object-fit: contain; }
/* v1.3.9-fix46 — the dots live INSIDE .w-info, sitting right above the name/caption: they follow the text
   (any caption length, owner bar or not) instead of a fixed height that landed on top of it.
   left/right reach past .w-info's own margins so they stay centred on the whole screen. */
.w-dots { position: absolute; left: -12px; right: -76px; bottom: calc(100% + 10px); display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.w-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); }
.w-dots span.on { background: #fff; }
.w-shade { position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); pointer-events: none; z-index: 1; }
.w-rail { position: absolute; z-index: 4; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 110px); display: grid; justify-items: center; gap: 16px; }
.w-author { position: relative; border: 0; background: none; padding: 0; margin-bottom: 6px; }
.w-author .avatar { border: 2px solid #fff; }
.w-follow { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%;
  background: var(--like); display: grid; place-items: center; color: #fff; }
.w-follow svg { width: 13px; height: 13px; }
.w-btn { border: 0; background: none; color: #fff; display: grid; justify-items: center; gap: 3px; font-size: 12.5px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.w-btn svg { width: 32px; height: 32px; }
.w-btn.liked svg { color: var(--like); }
.w-btn.saved svg { color: #ffcc00; }
.w-sound svg { width: 24px; height: 24px; }
.w-info { position: absolute; z-index: 3; left: 12px; right: 76px; bottom: calc(env(safe-area-inset-bottom) + 34px); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.w-slide:has(.w-owner) .w-info { bottom: calc(env(safe-area-inset-bottom) + 92px); }
.w-slide:has(.w-owner) .w-rail { bottom: calc(env(safe-area-inset-bottom) + 160px); }
.w-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 15.5px; }
.w-who .link-plain { color: #fff; }
.w-time { opacity: .75; font-size: 13.5px; }
.w-title { font-weight: 800; margin-top: 4px; }
.w-caption { margin-top: 4px; font-size: 14.5px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-caption.open { -webkit-line-clamp: unset; max-height: 40dvh; overflow-y: auto; }
.w-place { display: flex; align-items: center; gap: 4px; font-size: 12.5px; opacity: .85; margin-top: 6px; }
.w-place svg { width: 13px; height: 13px; }
.w-owner { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 18px;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: #000; color: #fff; font-weight: 700; }
.w-owner span { display: inline-flex; align-items: center; gap: 6px; }
.w-owner svg { width: 18px; height: 18px; }
.w-insights { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 22px;
  background: #2c2c2e; color: #fff; font-weight: 800; padding: 10px 16px; font-size: 15px; }
.w-insights svg { width: 17px; height: 17px; }
.watch-empty { display: grid; place-content: center; justify-items: center; gap: 12px; height: 100%; color: #fff; }
/* comments up: the video keeps playing in the top third (TikTok) */
.watch.sheet-up .watch-top { opacity: 0; pointer-events: none; }
@media not all and (min-width: 900px) and (pointer: fine) { .w-slide.sheet-up .w-stage { inset: 0 0 auto 0; height: 32dvh; top: env(safe-area-inset-top); } }  /* v1.3.7 — phones only; a computer shows comments on the side */
.w-slide.sheet-up .w-rail, .w-slide.sheet-up .w-info, .w-slide.sheet-up .w-owner,
.w-slide.sheet-up .w-shade, .w-slide.sheet-up .w-progress { opacity: 0; pointer-events: none; }
.watch.sheet-up .watch-stack { overflow: hidden; }
@media not all and (min-width: 900px) and (pointer: fine) { .reel.sheet-up .reel-stage { height: 32dvh; inset: env(safe-area-inset-top) 0 auto 0; } }  /* v1.3.7 — phones only; a computer shows comments on the side */
.reel.sheet-up .reel-rail, .reel.sheet-up .reel-info, .reel.sheet-up .reel-shade { opacity: 0; pointer-events: none; }
body.cm-open .tabbar { display: none !important; }

/* ---------- share sheet: more apps + your tools ---------- */
.share-brand.x { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.2); }
.share-brand.snap { background: #fffc00; color: #000; }
.share-brand.tg { background: #2aabee; color: #fff; }
.share-tools { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 12px 2px 4px; }
.share-tools::-webkit-scrollbar { display: none; }
.share-tool { flex: none; width: 72px; display: grid; justify-items: center; gap: 6px; background: none; border: 0; color: var(--text); font-size: 11.5px; text-align: center; }
.share-tool svg { width: 52px; height: 52px; padding: 14px; border-radius: 50%; background: var(--surface-2); }

/* ---------- message requests (Instagram) ---------- */
.req-screen { position: fixed; inset: 0; z-index: 1050; background: #000; color: #fff; display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top); animation: fade .16s ease; }
.req-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.req-head h2 { flex: 1; text-align: center; font-size: 18px; margin: 0; }
.req-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 14px 10px; }
.req-chips::-webkit-scrollbar { display: none; }
.req-chip { flex: none; border: 0; border-radius: 12px; padding: 9px 16px; background: #262626; color: #fff; font-weight: 700; font-size: 14px; }
.req-chip.on { background: #0b3a4b; color: #4cc3ff; }
.req-list { flex: 1; overflow-y: auto; padding: 0 6px 10px; }
.req-section { color: rgba(255,255,255,.55); font-weight: 700; font-size: 15px; padding: 16px 10px 6px; }
.req-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; background: none; border: 0; color: #fff; text-align: start; }
.req-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.req-copy b { font-size: 15.5px; }
.req-preview { display: flex; min-width: 0; color: rgba(255,255,255,.75); font-size: 14px; }
.req-preview .truncate { min-width: 0; }
.req-preview .dim { flex: none; }
.req-tag { justify-self: start; font-size: 11.5px; font-weight: 700; color: #4cc3ff; background: rgba(76,195,255,.12); border-radius: 6px; padding: 2px 7px; }
.req-unread { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3040; color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; }
.req-foot { text-align: center; font-size: 12.5px; color: rgba(255,255,255,.7); padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 4px; }
.ghost-avatar { display: grid; place-items: center; border-radius: 50%; background: #d1d1d6; color: #f2f2f7; overflow: hidden; }
.ghost-avatar.md { width: 56px; height: 56px; }
.ghost-avatar.xl { width: 96px; height: 96px; }
.ghost-avatar svg { width: 70%; height: 70%; }
.req-intro { display: grid; justify-items: center; gap: 6px; padding: 26px 16px 18px; text-align: center; }
.req-intro-name { font-size: 20px; display: inline-flex; align-items: center; gap: 4px; }
.req-intro-btn { margin-top: 8px; border-radius: 22px; padding: 10px 22px; }
.req-panel { margin: 0 10px calc(10px + env(safe-area-inset-bottom)); background: #262626; border-radius: 22px; padding: 16px 14px 4px; text-align: center; color: #fff; }
.req-panel b { font-size: 16px; }
.req-panel p { color: rgba(255,255,255,.65); font-size: 13.5px; margin: 6px 4px 10px; line-height: 1.4; }
.req-panel-actions { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.1); }
.req-panel-actions button { background: none; border: 0; color: #fff; font-weight: 700; font-size: 16px; padding: 14px 4px; }
.req-panel-actions button + button { border-inline-start: 1px solid rgba(255,255,255,.1); }
.req-panel-actions .danger { color: #ff453a; }

/* ---------- follower list paging ---------- */
.people-more { display: grid; place-items: center; padding: 18px; }

/* ---------- ShotGram Plus ---------- */
.plus-price { font-size: 22px; font-weight: 900; color: #ffd60a; }
.plus-price small { font-size: 13px; color: var(--muted); font-weight: 600; }
.plus-buy { background: #ffd60a !important; color: #111 !important; font-weight: 900; border: 0; height: 50px; border-radius: 14px; margin: 12px 0 8px; }
.plus-buy.busy { opacity: .6; }
.plus-legal { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 12px 4px 6px; }
.plus-links { display: flex; justify-content: center; gap: 18px; font-size: 12.5px; margin-bottom: 8px; }
.plus-links a { color: var(--muted); text-decoration: underline; }
.plus-id-card { background: var(--surface-2); border-radius: 14px; padding: 12px; margin: 10px 0; }
.plus-id-card svg { width: 18px; height: 18px; color: #ffd60a; }
.plus-id-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0 6px; font-size: 13.5px; }
.plus-id-grid span { color: var(--muted); }
.plus-id-grid b { font-weight: 600; word-break: break-all; }
.plus-id-grid a { color: inherit; }
.plus-inbox-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.plus-inbox-tabs .chip { flex: none; border: 0; border-radius: 999px; padding: 7px 12px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13px; }
.plus-inbox-tabs .chip.on { background: #ffd60a; color: #111; }
.plus-inbox-list { max-height: 62dvh; }
.plus-inbox-row { border-bottom: 1px solid var(--line); padding: 12px 2px; display: grid; gap: 6px; }
.plus-inbox-row > .row { background: none; border: 0; color: var(--text); padding: 0; }
.plus-id-missing { color: #ff9f0a; }

/* ---------- v135 stories: no black flash, smooth bar ---------- */
.story-bar .fill { width: 100% !important; transform: scaleX(0); transform-origin: left center; will-change: transform; }
[dir="rtl"] .story-bar .fill { transform-origin: right center; }
.story-bar .fill.done { transform: scaleX(1); }
.story-media img, .story-media video { opacity: 0; transition: opacity .12s ease; }
.story-media.ready img, .story-media.ready video { opacity: 1; }
.story-loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.story-media.ready .story-loading { display: none; }

/* ---------- v135 smooth Reels + viewer scrolling (iPhone) ---------- */
.reels, .watch-stack { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.reel, .w-slide { contain: layout paint style; transform: translateZ(0); backface-visibility: hidden; }
.reel-stage video, .w-video { transform: translateZ(0); }
/* only the reel on screen animates its watermark */
.reel:not(.is-active) .video-watermark, .reel:not(.is-active) .video-watermark * { animation-play-state: paused !important; }
/* blur over moving video is the #1 cause of scroll jank on iPhone */
body.reels-open .tabbar, body.watch-open .watch-search, .reel-rail, .w-rail { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.reels-open .tabbar { background: rgba(0,0,0,.55) !important; }
.post-card { contain: layout style; }
.media-wrap img, .media-wrap video { transform: translateZ(0); }

/* ---------- v135.1 — during a call, the chat header stays reachable ----------
   The minimized "Calling…" pill sits at the top of the screen. Before, the
   chat header lost its safe-area padding (padding-top: 0) and slid up under
   the clock, so Back / call buttons could not be tapped. Now the chat moves
   down below the pill and keeps its normal header. */
body.call-minimized { --call-pill: calc(66px + env(safe-area-inset-top, 0px)) !important; }
body.call-minimized.chat-open .room {
  top: calc(var(--room-top, 0px) + var(--call-pill)) !important;
  height: calc(var(--room-h, 100dvh) - var(--call-pill)) !important;
}
body.call-minimized.chat-open .room-head { padding-top: 8px !important; }

/* ---------- v135.2 stories: long-press never selects the picture ---------- */
.story-viewer, .story-viewer * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.story-viewer input, .story-viewer textarea { -webkit-user-select: text; user-select: text; }
.story-viewer img, .story-viewer video { pointer-events: none; -webkit-user-drag: none; }
.story-viewer .story-half { -webkit-tap-highlight-color: transparent; }
.story-viewer .story-top, .story-viewer .story-bars, .story-viewer .story-foot, .story-viewer .story-caption { transition: opacity .15s; }
.story-viewer.holding .story-top, .story-viewer.holding .story-bars, .story-viewer.holding .story-foot,
.story-viewer.holding .story-caption { opacity: 0; }

/* ---------- v136 verification & requests (in the app) ---------- */
.vr-types { display: grid; gap: 10px; }
.vr-type { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line, rgba(255,255,255,.08));
  background: var(--surface-2, #141729); color: var(--text); text-align: start; }
.vr-type:disabled { opacity: .55; }
.vr-type-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--violet-rgb, 139, 92, 255),.16); color: #b9a4ff; flex: none; }
.vr-type[data-type="company"] .vr-type-icon { background: rgba(34,197,94,.15); color: #4ade80; }
.vr-type[data-type="other"] .vr-type-icon { background: rgba(255,214,10,.13); color: #ffd60a; }
.vr-mine { margin-top: 18px; }
.vr-mine-head { font-weight: 800; margin: 0 4px 8px; }
.vr-mine-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
.vr-status { font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,.08); flex: none; }
.vr-status.approved { background: rgba(34,197,94,.15); color: #4ade80; }
.vr-status.declined { background: rgba(255,77,94,.13); color: #ff7b88; }
.vr-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.vr-files:empty { display: none; }
.vr-file { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 1; display: grid; }
.vr-file img { width: 100%; height: 100%; object-fit: cover; }
.vr-file .tiny { position: absolute; left: 4px; right: 4px; bottom: 4px; color: #fff; text-shadow: 0 1px 2px #000; }
.vr-pdf { display: grid; place-items: center; font-weight: 900; color: #ff7b88; }
.vr-rm { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; }
.vr-rm svg { width: 14px; height: 14px; }
.vr-add { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vr-done { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 10px 6px 4px; }
.vr-done svg { width: 44px; height: 44px; color: #4ade80; }
.mod-tabs .desk-tab { display: inline-flex; align-items: center; gap: 5px; }
.mod-tabs .desk-tab svg { width: 14px; height: 14px; }

/* ---------- v136.2 pull to refresh: under the top bar, calm, smooth ---------- */
.ptr {
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 56px) - 44px) !important;
  margin-top: 0 !important;
  width: 36px !important; height: 36px !important;
  z-index: 35 !important;                     /* slides out from UNDER the sticky top bar (40) */
  opacity: 0; transform: translate3d(-50%, 0, 0) scale(.6);
  background: var(--surface-2, #1a1d30) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35) !important;
  will-change: transform, opacity;
  transition: none;
}
.ptr.settle { transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .22s ease !important; }
/* while pulling: a progress arc that fills up — no spinning, no glow */
.ptr .ptr-spin {
  width: 18px !important; height: 18px !important; animation: none !important; filter: none !important;
  background: conic-gradient(var(--violet, #8b5cff) calc(var(--p, 0) * 360deg), rgba(var(--violet-rgb, 139, 92, 255), .18) 0) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)) !important;
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)) !important;
}
.ptr.ready .ptr-spin { background: conic-gradient(#22d3ee 360deg, #22d3ee 0) !important; }
/* reloading: the one ShotGram ring, spinning */
.ptr.spinning .ptr-spin {
  background: conic-gradient(from 0deg, rgba(34, 211, 238, 0) 0deg, #22d3ee 80deg, var(--violet, #8b5cff) 200deg, #ec4899 320deg, rgba(236, 72, 153, 0) 360deg) !important;
  animation: sgring .75s linear infinite !important;
}
body.reels-open .ptr, body.watch-open .ptr, body.majlis-open .ptr { display: none !important; }

/* ---------- v136.3 voice note recording bar ---------- */
.room-bar .vn-hint.vn-hint-inline {
  transform: translateY(-50%) !important;
  inset-inline-start: 8px !important; inset-inline-end: 58px !important;   /* covers + / box / emoji, leaves the send arrow */
  height: 44px !important; padding: 0 12px 0 4px !important; gap: 8px !important;
  z-index: 6 !important;
}
.vn-hint-inline .vn-cancel {
  width: 36px; height: 36px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: #ff7b93;
}
.vn-hint-inline .vn-cancel svg { width: 18px; height: 18px; }
.vn-hint-inline .vn-cancel:active { transform: scale(.92); background: rgba(255, 59, 107, .25); }
#micBtn.recording {
  animation: none !important; color: #fff !important;
  background: linear-gradient(135deg, var(--cyan, #00d8ff), var(--violet, #8b5cff)) !important; border-radius: 50% !important;
  width: 42px; height: 42px; position: relative; z-index: 7;
}
#micBtn.recording svg { width: 20px; height: 20px; }

/* ---------- v136.4 swipe back (anywhere, page follows the finger) ---------- */
.swipe-back-shade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 0; display: none; }
.swipe-back-shade.on { display: block; }
body.swiping-back #view { position: relative; z-index: 1; background: var(--bg, #06070f); will-change: transform; }
body.swiping-back, body.swiping-back * { -webkit-user-select: none !important; user-select: none !important; }

/* ---------- v137 instant send ---------- */
.dm-receipt.pending svg { width: 12px; height: 12px; opacity: .6; }
.dm-receipt.failed { color: #ff5a6e; font-weight: 800; font-size: 12px; }

/* ---------- v137 LIVE colourful hearts ---------- */
.live-battle-score .lb-heart { display: inline-flex; vertical-align: -3px; }
.live-battle-score .lb-heart svg { width: 16px; height: 16px; }
.live-stage .live-heart-burst { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }

/* ---------- v137 fast video covers in grids ---------- */
.tile .tile-ph { position: absolute; inset: 0; display: block;
  background: linear-gradient(110deg, #141625 30%, #1d2033 50%, #141625 70%); background-size: 220% 100%;
  animation: sgTileShimmer 1.3s linear infinite; }
.tile img.tile-frame { width: 100%; height: 100%; object-fit: cover; display: block; animation: sgTileIn .25s ease; }
@keyframes sgTileShimmer { to { background-position: -220% 0; } }
@keyframes sgTileIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tile .tile-ph { animation: none; } }

/* ======== v137.1 — compact share sheet (Instagram-style) ======== */
.sheet.share-v137 { max-height: min(78vh, 680px); display: flex; flex-direction: column; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.sheet.share-v137 .sheet-title { font-size: 15px; margin: 2px 0 8px; }
.sheet.share-v137 .sheet-list:empty { display: none; }
.share-mini { display: flex; align-items: center; gap: 10px; padding: 6px 4px 10px; }
.share-mini-media { position: relative; flex: 0 0 auto; width: 46px; height: 58px; border-radius: 9px; overflow: hidden; background: #1a1d2e; }
.share-mini-media img, .share-mini-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-mini-media i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.share-mini-media i svg { width: 18px; height: 18px; }
.share-mini-copy { display: grid; gap: 2px; min-width: 0; }
.share-mini-copy b { font-size: 14px; }
.share-mini-copy small { color: var(--muted, #9aa0b8); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet.share-v137 .share-search { margin: 0 0 8px; }
.sheet.share-v137 .share-search .input { height: 40px; font-size: 15px; }
.sheet.share-v137 .share-people { flex: 1 1 auto; min-height: 120px; overflow-y: auto; }
.share-apps { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 10px 4px 6px; border-top: 1px solid rgba(255,255,255,.07); margin-top: 6px; }
.share-apps::-webkit-scrollbar { display: none; }
.share-app { flex: 0 0 auto; width: 62px; display: grid; justify-items: center; gap: 5px; background: none; border: 0; color: inherit; padding: 0; }
.share-app small { font-size: 11px; color: var(--muted, #b4b9cf); white-space: nowrap; }
.share-app-ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #23263a; font-weight: 800; font-size: 13px; color: #fff; }
.share-app-ic svg { width: 22px; height: 22px; }
.share-app-ic.wa { background: #25d366; } .share-app-ic.snap { background: #fffc00; color: #000; font-size: 22px; }
.share-app-ic.x { background: #000; border: 1px solid #333; } .share-app-ic.tg { background: #27a7e7; } .share-app-ic.dc { background: #5865f2; }
.share-app:active .share-app-ic { transform: scale(.92); }
.sheet.share-v137 .share-tools { padding: 6px 2px 2px; }
.sheet.share-v137 .share-tool { font-size: 12px; }

/* ======== v137.1 — compact shared post in DMs ======== */
.shared-post { width: min(210px, 60vw) !important; border-radius: 16px; }
.shared-post .row { padding: 7px 9px !important; }
.shared-media { position: relative; display: block; aspect-ratio: 4 / 5; max-height: 262px; overflow: hidden; background: #141625; }
.shared-media img, .shared-media video, .shared-media .tile-ph { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }
.shared-media .tile-ph { background: linear-gradient(110deg, #141625 30%, #1d2033 50%, #141625 70%); background-size: 220% 100%; animation: sgTileShimmer 1.3s linear infinite; }
.shared-play { position: absolute; right: 8px; top: 8px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.shared-play svg { width: 18px; height: 18px; }
.shared-post .shared-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 7px 10px 9px; }

/* ======== v137.1 — public page play button ======== */
.pub-video-wrap { position: relative; }
.pub-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 3; }
.pub-play svg { width: 32px; height: 32px; margin-left: 4px; }
.pub-play[hidden] { display: none; }

/* ======== v138 — TikTok-style share sheet with real app logos ======== */
.sheet.share-v138 { background: #1f1f23; max-height: min(82vh, 720px); padding: 6px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
.sheet.share-v138 .sheet-grip { display: none; }
.sv8-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 6px 12px 10px; }
.sv8-title { text-align: center; font-size: 17px; font-weight: 800; }
.sv8-hbtn { width: 40px; height: 40px; border: 0; background: none; color: #fff; display: grid; place-items: center; padding: 0; }
.sv8-hbtn svg { width: 24px; height: 24px; }
.sheet.share-v138 .share-search, .sheet.share-v138 .sv8-recent { display: none; }
.sheet.share-v138 .share-people { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 2px 12px 14px; min-height: 0; flex: 0 0 auto; border-bottom: 1px solid rgba(255,255,255,.08); }
.sheet.share-v138 .share-people::-webkit-scrollbar { display: none; }
.sheet.share-v138 .share-person { flex: 0 0 76px; display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 0; color: #fff; position: relative; }
.sheet.share-v138 .share-person .avatar { width: 62px !important; height: 62px !important; }
.sheet.share-v138 .share-person-name { font-size: 12px; line-height: 1.25; text-align: center; max-width: 74px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #e9e9ee; }
.sheet.share-v138 .share-person-copy { display: none; }
.sheet.share-v138 .share-person-check { position: absolute; top: 44px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: #fe2c55; color: #fff; display: none; place-items: center; border: 2px solid #1f1f23; }
.sheet.share-v138 .share-person-check svg { width: 12px; height: 12px; }
.sheet.share-v138 .share-person-check.on { display: grid; }
.sheet.share-v138 .share-person.selected .avatar { outline: 2px solid #fe2c55; outline-offset: 2px; }
.sheet.share-v138 .share-apps, .sheet.share-v138 .share-tools { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 14px 10px 4px; border-top: 0; margin: 0; }
.sheet.share-v138 .share-apps::-webkit-scrollbar, .sheet.share-v138 .share-tools::-webkit-scrollbar { display: none; }
.sheet.share-v138 .share-app { flex: 0 0 76px; width: 76px; gap: 7px; }
.sheet.share-v138 .share-app small { font-size: 12px; color: #e9e9ee; white-space: normal; text-align: center; line-height: 1.2; }
.sheet.share-v138 .share-app-ic { width: 58px; height: 58px; }
.sheet.share-v138 .share-app-ic svg { width: 30px; height: 30px; }
.share-app-ic.link { background: #3b6cf6; } .share-app-ic.wa { background: #25d366; }
.share-app-ic.snap { background: #fffc00; } .share-app-ic.snap svg path { stroke: #000; stroke-width: .9; }
.share-app-ic.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.share-app-ic.x { background: #000; border: 1px solid #3a3a40; } .share-app-ic.tg { background: #2aabee; }
.share-app-ic.fb { background: #0866ff; } .share-app-ic.sms { background: #34c759; } .share-app-ic.mail { background: #4fb3f6; }
.share-app-ic.dc { background: #5865f2; } .share-app-ic.more { background: #3b6cf6; }
.share-app-ic.link svg, .share-app-ic.sms svg, .share-app-ic.mail svg, .share-app-ic.more svg { width: 28px; height: 28px; stroke: #fff; }
.sheet.share-v138 .share-tool { flex: 0 0 76px; width: 76px; display: grid; justify-items: center; gap: 7px; background: none; border: 0; padding: 0; color: #e9e9ee; font-size: 12px; text-align: center; line-height: 1.2; }
.sheet.share-v138 .share-tool svg { width: 58px; height: 58px; padding: 16px; border-radius: 50%; background: #34343a; color: #fff; box-sizing: border-box; }
.sheet.share-v138 .share-foot { display: none; padding: 10px 12px 0; gap: 8px; }
.sheet.share-v138.has-pick .share-foot { display: flex; }
.sheet.share-v138.has-pick .share-tools { display: none; }
/* search = full "Send to" list */
.sheet.share-v138.searching { height: min(88vh, 760px); max-height: none; }
.sheet.share-v138.searching #shareSearchBtn { visibility: hidden; }
.sheet.share-v138.searching .share-search { display: flex; margin: 0 12px 10px; }
.sheet.share-v138.searching .sv8-recent { display: block; padding: 2px 16px 8px; font-size: 14px; }
.sheet.share-v138.searching .share-apps, .sheet.share-v138.searching .share-tools { display: none; }
.sheet.share-v138.searching .share-people { flex: 1 1 auto; flex-direction: column; overflow-y: auto; overflow-x: hidden; gap: 2px; border: 0; }
.sheet.share-v138.searching .share-person { flex: 0 0 auto; display: flex; align-items: center; justify-items: start; gap: 12px; padding: 8px 4px; width: 100%; text-align: left; }
.sheet.share-v138.searching .share-person .avatar { width: 52px !important; height: 52px !important; }
.sheet.share-v138.searching .share-person-name { display: none; }
.sheet.share-v138.searching .share-person-copy { display: grid; flex: 1; min-width: 0; }
.sheet.share-v138.searching .share-person-check { position: static; display: grid; width: 26px; height: 26px; background: transparent; border: 2px solid #5a5a62; color: transparent; }
.sheet.share-v138.searching .share-person-check.on { background: #fe2c55; border-color: #fe2c55; color: #fff; }
.sheet.share-v138.searching .share-person.selected .avatar { outline: 0; }
.sheet.share-v138 .share-foot { align-items: center; box-sizing: border-box; width: 100%; }
.sheet.share-v138 .share-foot .input { flex: 1 1 auto; min-width: 0; width: auto; }
.sheet.share-v138 .share-foot .btn { flex: 0 0 auto; }
.sheet.share-v138.searching .share-search { width: auto; box-sizing: border-box; }
.sheet.share-v138.searching .share-people { padding: 0 12px; }

/* ======== v138.2 — feel like a native app: no text selection on buttons ========
   A long press on "Unsend", "Cancel", tabs, menus or sheets used to select the
   word with blue handles (like a web page). Now nothing in the app chrome can be
   selected; only places you type into (and, on a computer, captions/bios/
   messages) still allow it. Copying a message still works from its
   press-and-hold menu. */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button, a, [role="button"], .btn, .icon-btn, .tab, .chip, label, summary,
.sheet, .sheet *, .modal, .modal *, .sheet-backdrop, .modal-backdrop {
  -webkit-user-select: none !important; user-select: none !important;
  -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent;
}
img, svg, video { -webkit-user-drag: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"], [contenteditable="true"] *,
.sheet input, .sheet textarea, .modal input, .modal textarea, .selectable, .selectable * {
  -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important;
}
@media (pointer: fine) {
  .caption, .caption-text, .w-caption, .bio, .bubble-text, .dm-timed-caption, .comment-body { -webkit-user-select: text; user-select: text; }
}

/* ======== v138.4 — profile cover: smaller banner, easy-to-hit cover button ======== */
.pf-b .cover { height: clamp(120px, 38vw, 170px) !important; }
.pf-b .profile-head { margin-top: -64px !important; }
.edit-cover { height: clamp(120px, 34vw, 150px); cursor: pointer; }
.edit-cover.busy { opacity: .55; }
.edit-cover .cover-edit { right: 12px; bottom: 12px; min-height: 40px; padding: 9px 15px; font-size: 13.5px; z-index: 3; }
.edit-cover .cover-edit svg { width: 17px; height: 17px; }
/* the avatar block overlapped the bottom of the cover across the full width and
   ate taps meant for "Change cover photo" — only the photo itself takes taps now */
.edit-avatar { pointer-events: none; }
.edit-avatar-button, .edit-avatar a, .edit-avatar button { pointer-events: auto; }
.edit-cover .cover-edit { top: 12px; bottom: auto; }

/* ======== v138.6 — LIVE opens like TikTok: blurred creator photo + small spinner ======== */
.live-watch-poster { position: absolute; inset: -30px; z-index: 0; background-size: cover; background-position: center;
  filter: blur(28px) brightness(.55); transform: scale(1.1); transition: opacity .35s ease; pointer-events: none; }
.live-watch-poster.gone { opacity: 0; }
.live-watch-loading { background: transparent !important; }
.live-watch-loading .live-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: sgLiveSpin .8s linear infinite; }
@keyframes sgLiveSpin { to { transform: rotate(360deg); } }

/* ======== v139 — app colour themes (match the chosen app icon) ======== */
html[data-theme="cyan"] {
  --cyan: #5ef2ff; --violet: #1fb6ff; --magenta: #00e0c6; --blue: #3aa0ff;
  --cyan-rgb: 94, 242, 255; --violet-rgb: 31, 182, 255; --magenta-rgb: 0, 224, 198;
  --ink: #04090f; --bg: #04090f; --surface: #0b1520; --surface-2: #12202e; --surface-3: #1a2c3d;
  --brand: linear-gradient(135deg, #5ef2ff 0%, #1fb6ff 52%, #00e0c6 100%);
  --ring: conic-gradient(from 200deg, #5ef2ff, #1fb6ff, #00e0c6, #5ef2ff);
}
html[data-theme="cyan"] body { background: #04090f; }
html[data-theme="cyan"] .app-splash-mark { background: url("/assets/app-icons/cyan.png") center / cover no-repeat; }
html[data-theme="cyan"] .app-splash-mark img { opacity: 0; }
html[data-theme="pink"] {
  --cyan: #ff9ae6; --violet: #ff4fd8; --magenta: #ff2e9a; --blue: #ff6ac1;
  --cyan-rgb: 255, 154, 230; --violet-rgb: 255, 79, 216; --magenta-rgb: 255, 46, 154;
  --ink: #0d060c; --bg: #0d060c; --surface: #1a0e19; --surface-2: #251426; --surface-3: #311b33;
  --brand: linear-gradient(135deg, #ff9ae6 0%, #ff4fd8 52%, #ff2e9a 100%);
  --ring: conic-gradient(from 200deg, #ff9ae6, #ff4fd8, #ff2e9a, #ff9ae6);
}
html[data-theme="pink"] body { background: #0d060c; }
html[data-theme="pink"] .app-splash-mark { background: url("/assets/app-icons/pink.png") center / cover no-repeat; }
html[data-theme="pink"] .app-splash-mark img { opacity: 0; }
html[data-theme="gold"] {
  --cyan: #f7d27a; --violet: #d99a1e; --magenta: #a8650a; --blue: #e8b23a;
  --cyan-rgb: 247, 210, 122; --violet-rgb: 217, 154, 30; --magenta-rgb: 168, 101, 10;
  --ink: #0b0905; --bg: #0b0905; --surface: #17130a; --surface-2: #211b10; --surface-3: #2c2416;
  --brand: linear-gradient(135deg, #f7d27a 0%, #d99a1e 52%, #a8650a 100%);
  --ring: conic-gradient(from 200deg, #f7d27a, #d99a1e, #a8650a, #f7d27a);
}
html[data-theme="gold"] body { background: #0b0905; }
html[data-theme="gold"] .app-splash-mark { background: url("/assets/app-icons/gold.png") center / cover no-repeat; }
html[data-theme="gold"] .app-splash-mark img { opacity: 0; }
html[data-theme="silver"] {
  --cyan: #e6ebf2; --violet: #9aa6b6; --magenta: #5d6878; --blue: #b8c2cf;
  --cyan-rgb: 230, 235, 242; --violet-rgb: 154, 166, 182; --magenta-rgb: 93, 104, 120;
  --ink: #08090b; --bg: #08090b; --surface: #121417; --surface-2: #1a1d22; --surface-3: #23272e;
  --brand: linear-gradient(135deg, #e6ebf2 0%, #9aa6b6 52%, #5d6878 100%);
  --ring: conic-gradient(from 200deg, #e6ebf2, #9aa6b6, #5d6878, #e6ebf2);
}
html[data-theme="silver"] body { background: #08090b; }
html[data-theme="silver"] .app-splash-mark { background: url("/assets/app-icons/silver.png") center / cover no-repeat; }
html[data-theme="silver"] .app-splash-mark img { opacity: 0; }
html[data-theme="green"] {
  --cyan: #7dffcf; --violet: #18d39b; --magenta: #0a9f6e; --blue: #2fe3a0;
  --cyan-rgb: 125, 255, 207; --violet-rgb: 24, 211, 155; --magenta-rgb: 10, 159, 110;
  --ink: #040b08; --bg: #040b08; --surface: #0b1712; --surface-2: #11221a; --surface-3: #183024;
  --brand: linear-gradient(135deg, #7dffcf 0%, #18d39b 52%, #0a9f6e 100%);
  --ring: conic-gradient(from 200deg, #7dffcf, #18d39b, #0a9f6e, #7dffcf);
}
html[data-theme="green"] body { background: #040b08; }
html[data-theme="green"] .app-splash-mark { background: url("/assets/app-icons/green.png") center / cover no-repeat; }
html[data-theme="green"] .app-splash-mark img { opacity: 0; }
html[data-theme="orange"] {
  --cyan: #ffd36b; --violet: #ff8a1f; --magenta: #ff3d2e; --blue: #ffa94d;
  --cyan-rgb: 255, 211, 107; --violet-rgb: 255, 138, 31; --magenta-rgb: 255, 61, 46;
  --ink: #0d0704; --bg: #0d0704; --surface: #1a100a; --surface-2: #26170f; --surface-3: #331f15;
  --brand: linear-gradient(135deg, #ffd36b 0%, #ff8a1f 52%, #ff3d2e 100%);
  --ring: conic-gradient(from 200deg, #ffd36b, #ff8a1f, #ff3d2e, #ffd36b);
}
html[data-theme="orange"] body { background: #0d0704; }
html[data-theme="orange"] .app-splash-mark { background: url("/assets/app-icons/orange.png") center / cover no-repeat; }
html[data-theme="orange"] .app-splash-mark img { opacity: 0; }
html[data-theme="crimson"] {
  --cyan: #ff8fa3; --violet: #e11d48; --magenta: #9f1239; --blue: #ff4d6d;
  --cyan-rgb: 255, 143, 163; --violet-rgb: 225, 29, 72; --magenta-rgb: 159, 18, 57;
  --ink: #0d0507; --bg: #0d0507; --surface: #1a0b10; --surface-2: #261118; --surface-3: #331821;
  --brand: linear-gradient(135deg, #ff8fa3 0%, #e11d48 52%, #9f1239 100%);
  --ring: conic-gradient(from 200deg, #ff8fa3, #e11d48, #9f1239, #ff8fa3);
}
html[data-theme="crimson"] body { background: #0d0507; }
html[data-theme="crimson"] .app-splash-mark { background: url("/assets/app-icons/crimson.png") center / cover no-repeat; }
html[data-theme="crimson"] .app-splash-mark img { opacity: 0; }
html[data-theme] .app-splash-bar span { background: linear-gradient(90deg, transparent, var(--cyan) 25%, var(--violet) 55%, var(--magenta) 85%, transparent); }
html[data-theme] .app-splash-word { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="gold"] .btn.primary, html[data-theme="silver"] .btn.primary,
html[data-theme="gold"] button.primary, html[data-theme="silver"] button.primary { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

/* ======== v139.2 — "New version available" ======== */
.sg-update { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: end center; background: rgba(0,0,0,.55);
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); animation: sgUpIn .25s ease; }
.sg-update.required { place-items: center; background: var(--ink, #06070f); }
.sg-update-box { width: min(420px, 100%); background: var(--surface, #0e0f1c); border: 1px solid var(--line-strong); border-radius: 22px;
  padding: 22px 18px 16px; display: grid; justify-items: center; gap: 10px; text-align: center; box-shadow: var(--shadow); }
.sg-update-box img { border-radius: 16px; }
.sg-update-box b { font-size: 18px; }
.sg-update-box p { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.sg-update-box .btn { width: 100%; }
@keyframes sgUpIn { from { opacity: 0; } to { opacity: 1; } }

/* ======== v139.5 — tap a name in LIVE / clan chat: person card ======== */
.cp-sheet .cp-card { display: flex; align-items: center; gap: 12px; padding: 4px 6px 10px; }
.cp-sheet .cp-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.cp-sheet .cp-who { display: grid; gap: 2px; min-width: 0; }
.cp-sheet .cp-who b { font-size: 16px; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-sheet .cp-who span { color: var(--muted); font-size: 13px; }
.cp-sheet .cp-text { margin: 0 6px 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.live-chat-message, .live-creator-chat-line, .mj-msg { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.live-chat-message:active, .live-creator-chat-line:active, .mj-msg:active { opacity: .7; }

/* v139.5 — clan room chat: photo + name + text, and pull up / down */
.majlis .mj-chat { position: relative; transition: max-height .25s ease; }
.majlis .mj-chat-grip { display: flex; justify-content: center; align-items: center; width: 100%; height: 22px; border: 0; background: transparent; padding: 0; cursor: pointer; flex: none; }
.majlis .mj-chat-grip span { width: 42px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.45); }
.majlis .mj-chat.under { visibility: hidden; }
.majlis .mj-chat-panel { position: fixed; left: 0; right: 0; top: var(--mj-chat-top, 22%); bottom: var(--mj-chat-bottom, 180px);
  z-index: 30; display: flex; flex-direction: column; padding: 2px 12px 6px;
  background: rgba(8, 9, 16, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.35); animation: mjChatUp .22s ease; }
@keyframes mjChatUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.majlis .mj-chat-panel .mj-msgs { flex: 1 1 auto; min-height: 0; max-height: none !important; display: grid; gap: 4px;
  align-content: start; overflow-y: auto; mask-image: none !important; -webkit-mask-image: none !important; }
.majlis .mj-chat-panel .mj-msg { background: rgba(255,255,255,.05) !important; border-radius: 12px; width: fit-content; max-width: 100%; }
.majlis .mj-msg { display: flex !important; align-items: flex-start; gap: 8px; padding: 6px 10px 6px 6px !important; }
.majlis .mj-msg-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.majlis .mj-msg-txt { display: grid; gap: 1px; min-width: 0; }
.majlis .mj-msg-txt b { font-size: 12.5px; color: #c4b5fd; margin: 0; }
.majlis .mj-msg-txt span { font-size: 13.5px; overflow-wrap: anywhere; }

/* ======== v139.5 — brighter, friendlier themes ========
   Every theme was close to pure black (Silver looked almost off). The
   surfaces are lifted so cards, sheets and bars read clearly, Silver now
   looks like real brushed metal, and lines are easier to see. Text stays
   white, so contrast is still well above accessibility minimums. */
:root { --ink: #0f1022; --bg: #0f1022; --surface: #181a30; --surface-2: #22243f; --surface-3: #2c2f4f;
  --line: rgba(255, 255, 255, .11); --line-strong: rgba(255, 255, 255, .2); --muted: #a3a7cb; }
body { background: #0f1022; }
html[data-theme="cyan"]    { --ink: #0a1a28; --bg: #0a1a28; --surface: #12283a; --surface-2: #1a3549; --surface-3: #234359; }
html[data-theme="cyan"] body { background: #0a1a28; }
html[data-theme="pink"]    { --ink: #1c0e1b; --bg: #1c0e1b; --surface: #2a1528; --surface-2: #361c34; --surface-3: #432441; }
html[data-theme="pink"] body { background: #1c0e1b; }
html[data-theme="gold"]    { --ink: #1a150b; --bg: #1a150b; --surface: #262013; --surface-2: #322a1b; --surface-3: #3f3524; }
html[data-theme="gold"] body { background: #1a150b; }
html[data-theme="silver"]  {
  --cyan: #ffffff; --violet: #d3dae4; --magenta: #9aa6b6; --blue: #e6ebf2;
  --cyan-rgb: 255, 255, 255; --violet-rgb: 211, 218, 228; --magenta-rgb: 154, 166, 182;
  --ink: #1c1f24; --bg: #1c1f24; --surface: #272b32; --surface-2: #323741; --surface-3: #3e4450;
  --muted: #b4bcc8; --line: rgba(255, 255, 255, .14);
  --brand: linear-gradient(135deg, #ffffff 0%, #d3dae4 50%, #9aa6b6 100%);
  --ring: conic-gradient(from 200deg, #ffffff, #d3dae4, #9aa6b6, #ffffff);
}
html[data-theme="silver"] body { background: #1c1f24; }
html[data-theme="green"]   { --ink: #0b1c14; --bg: #0b1c14; --surface: #13291e; --surface-2: #1b3628; --surface-3: #244433; }
html[data-theme="green"] body { background: #0b1c14; }
html[data-theme="orange"]  { --ink: #1d110a; --bg: #1d110a; --surface: #2a1a10; --surface-2: #372217; --surface-3: #452c1f; }
html[data-theme="orange"] body { background: #1d110a; }
html[data-theme="crimson"] { --ink: #1d0b10; --bg: #1d0b10; --surface: #2b1219; --surface-2: #381923; --surface-3: #46212d; }
html[data-theme="crimson"] body { background: #1d0b10; }
/* silver: buttons with the brand gradient need dark text to stay readable */
html[data-theme="silver"] .btn.primary, html[data-theme="silver"] .follow-btn.primary { color: #1c1f24; }

/* v139.9 — video inside a carousel in the full-screen viewer fills its slide */
.w-photo .w-cvideo { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; background: #000; }

/* v139.9 — a seat whose camera has no real picture keeps the profile photo */
.mj-ring:not(.has-cam) video.mj-cam { opacity: 0 !important; pointer-events: none; }

/* v139.9 — Reels: wide (landscape / square) videos are shown WHOLE on a
   blurred copy of themselves, instead of being zoomed into a blurry crop. */
/* v139.18 — keep the video filling the stage (absolute, from styles.css); only change how it fits */
.reel .reel-stage.is-wide video:not(.reel-blur) { object-fit: contain !important; transform: none !important; z-index: 1; background: transparent; }
.reel .reel-blur { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(28px) brightness(.55) saturate(1.2); transform: none; pointer-events: none; z-index: 0; }
/* v139.18 — removed: it overrode the stage's full-screen position and made reels BLACK */

/* v139.9 — clan / voice-room invite in messages */
.dm-invite-card { display: flex; align-items: center; gap: 10px; width: min(280px, 72vw); padding: 10px 12px; border: 0; border-radius: 16px;
  background: rgba(255,255,255,.12); color: inherit; text-align: start; cursor: pointer; }
.dm-invite-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(135deg, #00d8ff, #8b5cf6 55%, #ff2ed1); color: #fff; }
.dm-invite-icon svg { width: 20px; height: 20px; }
.dm-invite-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dm-invite-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-invite-go { flex: none; padding: 6px 12px; border-radius: 999px; background: #fff; color: #111; font-weight: 800; font-size: 13px; }

/* v139.9 — room counters + visitor entry */
.majlis .mj-counts { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.78); letter-spacing: .1px; }
.clan-visit-voice { margin: 14px 0 6px; }

/* v139.9 — watching a shared screen in a call: UI fades away, double-tap zoom */
.call-overlay.peer-screen .call-controls, .call-overlay.peer-screen .call-screen-tag,
.call-overlay.peer-screen .call-screen-close, .call-overlay.peer-screen .call-min-btn, .call-overlay.peer-screen .call-chip,
.call-overlay.peer-screen .call-local { transition: opacity .25s ease; }
.call-overlay.peer-screen.sv-hide-ui .call-controls, .call-overlay.peer-screen.sv-hide-ui .call-screen-tag,
.call-overlay.peer-screen.sv-hide-ui .call-screen-close, .call-overlay.peer-screen.sv-hide-ui .call-min-btn,
.call-overlay.peer-screen.sv-hide-ui .call-chip, .call-overlay.peer-screen.sv-hide-ui .call-local { opacity: 0; pointer-events: none; }
.call-screen-view img { transition: transform .2s ease; }
.call-screen-view img.zoomed { transform: scale(2); }
.call-screen-view { overflow: hidden; }

/* v139.12 — links, @mentions and profile cards in messages */
.rt-link, .rt-mention { color: #7cc7ff; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; word-break: break-word; }
.bubble.mine .rt-link, .bubble.mine .rt-mention, .msg.mine .rt-link, .msg.mine .rt-mention { color: #fff; }
.rt-card { display: flex; align-items: center; gap: 10px; width: min(280px, 72vw); padding: 10px 12px; margin-bottom: 4px; border: 0;
  border-radius: 16px; background: rgba(255,255,255,.12); color: inherit; text-align: start; cursor: pointer; }
.rt-card-av { width: 42px; height: 42px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, #00d8ff, #8b5cf6 55%, #ff2ed1); color: #fff; font-weight: 800; }
.rt-card-av img { width: 100%; height: 100%; object-fit: cover; }
.rt-card-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.rt-card-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-card-go { flex: none; padding: 6px 12px; border-radius: 999px; background: #fff; color: #111; font-weight: 800; font-size: 13px; }

/* v139.12 — pinch to zoom: let the zoomed photo float above everything */
.media-wrap.pinching, .media-wrap.pinching .slides, .media-wrap.pinching .media-slide-stage,
.w-photo.pinching, .reel-stage.pinching, .bubble.pinching { overflow: visible !important; z-index: 60; }
body.pinch-zooming { overscroll-behavior: none; }

/* v139.12 — edit profile: @ prefix, bio counter */
.input-at { position: relative; }
.input-at > span { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; pointer-events: none; }
.input-at > .input { padding-inline-start: 30px; }
.field-count { float: inline-end; font-weight: 600; font-size: 12px; color: var(--muted); }
.field-count.over { color: #ff4d6d; }

/* v139.13 — bio lines centred correctly: each line takes its own direction
   (Arabic right-to-left, numbers/English left-to-right) and stray spaces
   no longer push a line sideways */
.bio { white-space: pre-line !important; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.pf-b .bio { margin-inline: auto; text-align: center !important; }

/* v139.16 — Share sheet avatars: the ring wrapper was 48px while the photo was
   forced to 62px, so a misplaced arc showed behind every person. One size now. */
.sheet.share-v138 .share-person-avatar { width: 66px !important; height: 66px !important; padding: 2px !important; box-sizing: border-box; display: grid; place-items: center; }
.sheet.share-v138 .share-person .share-person-avatar .avatar { width: 100% !important; height: 100% !important; }
.sheet.share-v138.searching .share-person-avatar { width: 56px !important; height: 56px !important; }
.share-tool.danger { color: #ff5a6e; }

/* v139.17 — Log in with QR code */
.qr-login-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.qr-login-card { position: relative; max-width: 360px; text-align: center; padding: 22px 20px 18px; }
.qr-login-card h3 { margin: 4px 0 10px; }
.qr-login-x { position: absolute; top: 10px; inset-inline-end: 10px; }
.qr-login-steps { text-align: start; margin: 0 0 14px; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.qr-login-code { position: relative; width: 240px; height: 240px; margin: 0 auto; border-radius: 24px; overflow: hidden; background: #fff; }
.qr-login-state { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #111; font-weight: 700; padding: 16px; }
.qr-login-state[hidden] { display: none; }
.qr-login-timer { margin-top: 10px; }

/* ======== v139.20 ======== */
/* Clan voice: mic button colours never depend on the theme — green when you
   can talk, red only when you are muted */
.majlis .mj-btn[data-act="mic"].on { background: rgba(34, 197, 94, .20) !important; border-color: rgba(34, 197, 94, .55) !important; }
.majlis .mj-btn[data-act="mic"].off { background: rgba(239, 68, 68, .28) !important; border-color: rgba(239, 68, 68, .6) !important; }
.majlis .mj-btn.on:not([data-act="mic"]) { background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .35) !important; }

/* Voice pill while browsing the app */
.sg-voice-pill { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(var(--bar-h, 72px) + var(--sa-b, env(safe-area-inset-bottom, 0px)) + 14px);
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(14, 15, 28, .94);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sg-voice-pill .vp-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: none; color: #fff; text-align: start; }
.sg-voice-pill .vp-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.sg-voice-pill .vp-main small { color: var(--muted); font-weight: 700; }
.sg-voice-pill .vp-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); flex: none; animation: vp-pulse 1.6s ease-in-out infinite; }
@keyframes vp-pulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.05); } }
.sg-voice-pill .vp-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); flex: none; }
.sg-voice-pill .vp-btn.off { background: rgba(239,68,68,.35); }
.sg-voice-pill .vp-btn.leave { background: #ef4444; }
.sg-voice-pill svg { width: 20px; height: 20px; }
body.majlis-open .sg-voice-pill { display: none; }

/* No extra rings for people without Plus: the profile photo and the Share
   sheet avatars are plain. (Story rings and the Plus ring stay.) */
.pf-b .profile-avatar { background: none !important; padding: 0 !important; }
.share-person-avatar, .sheet.share-v138 .share-person-avatar { background: none !important; }

/* Notes and story captions: emoji stay on the right side of the text */
.profile-note, .note-bubble { unicode-bidi: plaintext; }
.story-caption { unicode-bidi: plaintext; left: 50% !important; right: auto !important; transform: translateX(-50%);
  width: fit-content; max-width: calc(100% - 40px); text-align: center; padding: 8px 16px !important; border-radius: 999px !important;
  background: rgba(0, 0, 0, .55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 15px !important; font-weight: 600; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* Plus: cancel is a quiet red text link at the very bottom (like "Create new account") */
.plus-cancel-link { display: block; margin: 22px auto 4px; padding: 6px 10px; border: 0; background: none; color: #ff5a6e; font-size: 13.5px; font-weight: 600; }

/* v139.22 — compact confirm box (Unsend? Delete? Leave?) */
.sg-alert-backdrop { align-items: center !important; justify-content: center !important; }
.sg-alert-backdrop .modal { width: min(300px, 86vw) !important; max-width: 300px !important; padding: 0 !important; border-radius: 18px !important; overflow: hidden; }
.sg-alert-backdrop .modal > .icon-btn, .sg-alert-backdrop .modal > [data-close] { display: none !important; }
.sg-alert { text-align: center; }
.sg-alert h3 { margin: 0; padding: 18px 18px 4px; font-size: 16.5px; font-weight: 800; line-height: 1.3; }
.sg-alert p { margin: 0; padding: 0 18px 16px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.sg-alert-btns { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.1); }
.sg-alert-btns button { height: 46px; border: 0; background: none; color: var(--text, #fff); font-size: 15.5px; font-weight: 600; }
.sg-alert-btns button + button { border-inline-start: 1px solid rgba(255,255,255,.1); }
.sg-alert-btns button.danger { color: #ff4d6d; font-weight: 800; }
.sg-alert-btns button.primary { color: #4da3ff; font-weight: 800; }
.sg-alert-btns button:active { background: rgba(255,255,255,.08); }

/* v139.23 — "can't reach the server" message instead of endless loading */
.sg-reach-bar { position: fixed; z-index: 9999; left: 12px; right: 12px; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: #1b1d2e; border: 1px solid rgba(255, 90, 110, .5);
  box-shadow: 0 12px 34px rgba(0,0,0,.55); color: #fff; text-align: center; }
.sg-reach-bar b { font-size: 15px; }
.sg-reach-bar span { font-size: 13px; color: var(--muted, #aab); }
.sg-reach-bar button { justify-self: center; margin-top: 4px; padding: 8px 20px; border: 0; border-radius: 999px; background: #fff; color: #111; font-weight: 800; }

/* v139.23 — during a call the chat moves down only by the pill itself
   (38 px + gap), not 66 px, so the header no longer drops so far */
body.call-minimized { --call-pill: calc(48px + env(safe-area-inset-top, 0px)) !important; }
body.call-minimized.chat-open .room-head { padding-top: 2px !important; }

/* v139.24 — last session's feed shows instantly; taps wait for the fresh one */
.feed-cached { pointer-events: none; }

/* ---------- v139.27 · calls in the chat (Snapchat-style) ---------- */
.call-card-row { display: flex; margin: 8px 10px; }
.call-card-row.mine { justify-content: flex-end; }
.call-card {
  display: flex; align-items: center; gap: 10px; min-width: 210px; max-width: 82%;
  padding: 10px 12px; border-radius: 18px; text-align: start; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  transition: transform .12s ease;
}
.call-card:active { transform: scale(.97); }
.call-card-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(47, 227, 160, .14); color: var(--ok);
}
.call-card-icon svg { width: 18px; height: 18px; }
.call-card-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.call-card-text b { font-size: 14.5px; }
.call-card-text small { font-size: 12px; color: var(--muted); }
.call-card-again {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #ff2d55; color: #fff;
}
.call-card-again svg { width: 16px; height: 16px; }
.call-card.missed { border-color: rgba(255, 78, 107, .35); background: rgba(255, 78, 107, .08); }
.call-card.missed .call-card-icon { background: rgba(255, 78, 107, .16); color: var(--bad); }
.call-card.missed .call-card-text b { color: #ff8da0; }

/* chat list: a call as the last thing in a conversation */
.thread-call-icon { display: inline-grid; vertical-align: -2px; margin-inline-end: 4px; }
.thread-call-icon svg { width: 14px; height: 14px; }
.thread .thread-status.missed-call, .thread.unread .thread-status.missed-call { color: var(--bad); font-weight: 600; }

/* the phone button in Messages, with a red count for missed calls */
.inbox-calls-btn { position: relative; }
.inbox-calls-dot {
  position: absolute; top: 2px; inset-inline-end: 0; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #ff3040; color: #fff; font-size: 10.5px; font-weight: 800;
  display: grid; place-items: center; pointer-events: none;
}
.inbox-calls-dot[hidden] { display: none; }

/* the Calls list */
.call-log-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 0; }
.call-log-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  background: none; border: 0; color: #fff; text-align: start; }
.call-log-line { display: flex; align-items: center; gap: 4px; min-width: 0; color: rgba(255,255,255,.72); font-size: 13.5px; }
.call-log-line .truncate { min-width: 0; }
.call-log-line .dim { flex: none; }
.call-log-arrow { flex: none; display: grid; place-items: center; color: var(--ok); }
.call-log-arrow svg { width: 15px; height: 15px; }
.call-log-row.missed .call-log-arrow, .call-log-row.missed .call-log-line { color: var(--bad); }
.call-log-row.unseen .req-copy b { font-weight: 800; }
.call-log-dial { flex: none; color: #fff; }
.call-log-dial svg { width: 22px; height: 22px; }

/* v139.27 — the clan's General room is opened by "Enter the Majlis", not listed twice */
.voice-room.is-main-hidden { display: none; }
.voice-empty-note { text-align: center; padding: 14px 10px 4px; }

/* ---------- v139.28 · sponsored posts (verified businesses) ---------- */
.ad-card { margin: 6px 0 14px; }
.ad-strip { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 2px; }
.ad-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--ok); background: rgba(47, 227, 160, .1); border: 1px solid rgba(47, 227, 160, .28); border-radius: 999px; padding: 3px 10px; }
.ad-label svg { width: 13px; height: 13px; }
.ad-more svg { width: 20px; height: 20px; }
.ad-cta { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 24px); margin: -4px 12px 0;
  padding: 11px 14px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14px; }
.ad-cta svg { width: 16px; height: 16px; }
.ad-why { display: grid; gap: 10px; padding: 6px 4px 2px; }
.ad-why h3 { margin: 0; }
.ad-why p { margin: 0; line-height: 1.5; }

/* the sponsored bubble in the stories row */
.tray-ad .ad-ring { background: conic-gradient(var(--ok), #22d3ee, var(--ok)) !important; }
.tray-ad .tiny { color: var(--ok); font-weight: 700; }

/* full-screen sponsored story */
.story-ad-view { position: fixed; inset: 0; z-index: 1200; background: #000; color: #fff; display: flex; flex-direction: column;
  padding-top: var(--sa-t, env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + var(--sa-b, env(safe-area-inset-bottom, 0px))); }
.story-ad-bar { height: 3px; margin: 8px 10px 0; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.story-ad-fill { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
html[dir="rtl"] .story-ad-fill { transform-origin: right; }
.story-ad-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.story-ad-who { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; color: #fff; text-align: start; }
.story-ad-who span { display: grid; }
.story-ad-who small { color: rgba(255,255,255,.75); font-size: 12px; }
.story-ad-head .icon-btn { color: #fff; }
.story-ad-media { flex: 1; min-height: 0; display: grid; place-items: center; }
.story-ad-media img, .story-ad-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-ad-caption { margin: 10px 16px 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.9); }
.story-ad-cta { margin: 12px 16px 0; padding: 13px 16px; border: 0; border-radius: 14px; background: #fff; color: #000; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 6px; }
.story-ad-cta svg { width: 16px; height: 16px; }

/* ---------- v139.28 · Insights ---------- */
.pa-insights svg { color: var(--ok); }
.ins { padding: 0 12px calc(30px + var(--sa-b, 0px)); display: grid; gap: 12px; }
.ins-ranges { display: flex; gap: 6px; padding: 8px 0 2px; }
.ins-range { flex: 1; border: 0; border-radius: 10px; padding: 9px 4px; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 13px; }
.ins-range.on { background: rgba(47, 227, 160, .14); color: var(--ok); }
#insBody { display: grid; gap: 12px; }
.ins-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.ins-card h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ins-card h3 svg { width: 17px; height: 17px; color: var(--ok); }
.ins-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ins-plan.tier-gold { border-color: rgba(255, 200, 60, .45); }
.ins-plan.tier-silver { border-color: rgba(200, 210, 230, .4); }
.ins-plan.tier-bronze { border-color: rgba(205, 127, 50, .45); }
.ins-plan p { margin: 0; }
.ins-state { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: rgba(255,255,255,.08); color: var(--muted); }
.ins-state.on { background: rgba(47, 227, 160, .14); color: var(--ok); }
.ins-meter { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.ins-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), #22d3ee); border-radius: 4px; }
.ins-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ins-tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 2px; min-width: 0; }
.ins-tile b { font-size: 19px; }
.ins-tile .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-tile-icon svg { width: 16px; height: 16px; color: var(--muted); }
.ins-sub { font-size: 12px; font-weight: 700; color: var(--ok); }
.ins-chart { width: 100%; height: 120px; display: block; }
.ins-line { fill: none; stroke: var(--ok); stroke-width: 2.2px; }
.ins-area { fill: rgba(47, 227, 160, .12); }
.ins-bar.a { fill: rgba(47, 227, 160, .75); }
.ins-bar.b { fill: #22d3ee; }
.ins-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.ins-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ins-legend .k { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-start: 6px; }
.ins-legend .k.a { background: rgba(47, 227, 160, .75); } .ins-legend .k.b { background: #22d3ee; }
.ins-ad { display: flex; align-items: center; gap: 10px; }
.ins-ad img, .ins-ad .ins-noimg { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,.06); flex: none; }
.ins-ad-text { flex: 1; min-width: 0; display: grid; }
.ins-ad-text small { color: var(--muted); font-size: 12px; }
.ins-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ins-top-item { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.06); }
.ins-top-item img { width: 100%; height: 100%; object-fit: cover; }
.ins-top-meta { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 3px; padding: 4px 6px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.ins-top-meta svg { width: 11px; height: 11px; }
.ins-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 12px 12px; }
.ins-pick-item { position: relative; aspect-ratio: 1; border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; background: rgba(255,255,255,.06); }
.ins-pick-item.on { border-color: var(--ok); }
.ins-pick-item img { width: 100%; height: 100%; object-fit: cover; }
.ins-pick-on { position: absolute; top: 4px; inset-inline-end: 4px; background: var(--ok); color: #04120c; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; }
.ins-pick-on svg { width: 13px; height: 13px; }
.ins-foot { margin: 4px 0 0; }
/* the post's own ⋯ is reached from the ad's ⋯ menu (one menu, not two) */
.ad-card [data-post] [data-menu] { display: none !important; }
/* v139.29 — link clicks in Insights */
.ins-links-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ins-links-top > div { display: grid; background: rgba(255,255,255,.04); border-radius: 12px; padding: 8px 10px; }
.ins-links-top b { font-size: 18px; }
.ins-links { display: grid; gap: 6px; }
.ins-link-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ins-link-row:last-child { border-bottom: 0; }
.ins-link-name { display: inline-flex; align-items: center; gap: 8px; }
.ins-link-name svg { width: 16px; height: 16px; }

/* v1.3.9 — the pinned comment */
.cm-pin-tag { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: #8fb8ff; }
.cm-pin-tag svg { width: 12px; height: 12px; stroke: currentColor; }
.cm-item.is-pinned, .comment.is-pinned { background: rgba(47,140,255,.07); border-radius: 12px; padding-inline: 8px; margin-inline: -8px; }

/* ---------- v139.74 story spinner + upload overlay: lighter, no blur ---------- */
/* the spinner only appears if the story takes longer than a blink to load */
.story-loading { opacity: 0; animation: sgLateIn .2s ease .45s forwards; }
@keyframes sgLateIn { to { opacity: 1; } }
.story-loading .spinner { width: 26px; height: 26px; border-width: 2.5px; }
.story-bar .fill { transition: none; }
.sg-upload { background: rgba(4, 5, 12, .55) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; }
.sg-upload-card { padding: 22px 26px !important; gap: 12px !important; box-shadow: none !important; background: rgba(20, 22, 44, .92) !important; }
.sg-ring, .sg-ring svg { width: 84px !important; height: 84px !important; }
.sg-ring-arc { filter: none !important; }
.sg-ring::after { display: none !important; }
.sg-ring.indeterminate svg { animation-duration: .9s; will-change: transform; }

/* ---------- v139.75 friends map ---------- */
.fm-root { display: flex; flex-direction: column; height: calc(100dvh - 250px); min-height: 380px; position: relative; padding-bottom: 8px; }
.fm-banner[hidden] { display: none !important; }
.fm-map { flex: 1; min-height: 260px; border-radius: 18px; overflow: hidden; position: relative; background: var(--surface-2); }
.fm-banner { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.fm-card { padding: 10px 2px 4px; }
.fm-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; }
.fm-chip { position: relative; background: none; border: 0; padding: 2px; border-radius: 50%; flex: none; }
.fm-chip.on { outline: 2px solid var(--blue, #2f7dff); }
.fm-chip-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface, #14151f); background: #7b8095; }
.fm-chip-dot.is-active { background: #2ecc71; } .fm-chip-dot.is-away { background: #f5a623; }
.fm-sel { display: flex; align-items: center; gap: 10px; }
.fm-sel .grow { min-width: 0; flex: 1; }
.fm-st { font-size: 12.5px; color: var(--muted); } .fm-st.is-active { color: #2ecc71; } .fm-st.is-away { color: #f5a623; }
.fm-empty { padding: 14px 6px; font-size: 13px; color: var(--muted); text-align: center; }
.fm-wrap { background: none !important; border: 0 !important; }
.fm-pin { position: relative; width: 64px; display: grid; justify-items: center; gap: 1px; text-align: center; }
.fm-ph { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 3px solid #7b8095; background: #2a2d45; display: grid; place-items: center; color: #fff; font-weight: 700; }
.fm-ph img { width: 100%; height: 100%; object-fit: cover; }
.fm-pin.is-active .fm-ph { border-color: #2ecc71; box-shadow: 0 0 0 4px rgba(46,204,113,.25); }
.fm-pin.is-away .fm-ph { border-color: #f5a623; }
.fm-dot { display: none; }
.fm-pin b { font-size: 11px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.fm-pin small { font-size: 10px; color: #dfe3f5; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
html[data-mode="light"] .fm-pin b, html[data-mode="light"] .fm-pin small { color: #0f1424; text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.leaflet-container { font: inherit; background: var(--surface-2); }
.leaflet-control-attribution { font-size: 9px; }

.fm-map.fm-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.88) contrast(.92) saturate(.7); }
.fm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fm-move { font-size: 12.5px; color: var(--muted); } .fm-move.go { color: #2ecc71; font-weight: 600; }
.fm-arrow { position: absolute; top: -14px; left: 50%; margin-left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid #2ecc71; transform-origin: 8px 36px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }

/* v1.3.9-fix34 — friends map: movement badge + pulse for people on the move */
.fm-mv { position: absolute; left: 38px; top: 29px; width: 22px; height: 22px; border-radius: 50%; background: #2f7dff; border: 2px solid #fff; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.fm-mv svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fm-pin.is-moving .fm-ph { animation: fmPulse 2s ease-out infinite; }
@keyframes fmPulse { 0% { box-shadow: 0 0 0 0 rgba(47,125,255,.55); } 100% { box-shadow: 0 0 0 12px rgba(47,125,255,0); } }

/* v1.3.9-fix40 — Studio: "Why is it laggy?" readout */
.sgs-diag { white-space: pre-wrap; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 11.5px; line-height: 1.55; background: rgba(255,255,255,.05); color: inherit; user-select: text; -webkit-user-select: text; cursor: copy; }
.sgs-diag[hidden] { display: none; }