/* =====================================================================
   ShotGram v78.7 — header, bottom dock and Activity tabs
   Loads LAST (after css/live-tiktok.css). Additive: styles.css,
   safe-area.css and every earlier patch are untouched.

   Hide rules for immersive screens (body.live-open, body.chat-open,
   body.reels-open .topbar, body.voice-expanded, html.sg-keyboard-open)
   are more specific than anything here, so they still win.
   ===================================================================== */

:root {
  --chrome-bg: #080916;
  --key-bg: rgba(255, 255, 255, .045);
  --key-line: rgba(255, 255, 255, .085);
  --key-ink: #dfe1f5;
  --dock-gap: 10px;

  /* One colour per kind of activity, used by the tab, the row accent and
     the small glyph on the avatar, so the three always agree. */
  --cat-all: #f4f5ff;
  --cat-likes: #ff3d6e;
  --cat-comments: #22c8ff;
  --cat-follows: #9b6bff;
}

/* =====================================================================
   1 · HEADER
   ===================================================================== */
.topbar {
  background:
    linear-gradient(180deg, rgba(11, 12, 28, .97) 0%, rgba(8, 9, 22, .92) 100%);
  border-bottom-color: transparent;
}
/* Brand hairline instead of a flat grey rule. */
.topbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(var(--cyan-rgb, 0, 216, 255), .40) 22%,
    rgba(var(--violet-rgb, 139, 92, 255), .55) 50%, rgba(var(--magenta-rgb, 255, 46, 209), .40) 78%, transparent 100%);
  pointer-events: none;
}
.topbar .brand img { width: 30px; height: 30px; }
.topbar .wordmark { font-size: 21px; }

.topbar-actions { gap: 7px !important; }

.topbar .icon-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--key-bg);
  border: 1px solid var(--key-line);
  color: var(--key-ink);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.topbar .icon-btn svg { width: 20px; height: 20px; stroke-width: 1.9; }
.topbar .icon-btn:active { transform: scale(.94); background: rgba(255, 255, 255, .09); }
@media (hover: hover) {
  .topbar .icon-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }
}
/* The screen this key opened. */
.topbar .icon-btn.is-current {
  background: rgba(var(--violet-rgb, 139, 92, 255), .17);
  border-color: rgba(155, 120, 255, .55);
  color: #fff;
}
.topbar #activityBtn.is-current svg { fill: currentColor; }

/* LIVE key: same height as its neighbours, red on-air dot. */
.shotgram-live-pill {
  height: 38px;
  padding: 0 12px 0 11px;
  gap: 7px;
  border-radius: 12px;
  border: 1px solid rgba(var(--magenta-rgb, 255, 46, 209), .38);
  background: linear-gradient(135deg, rgba(var(--magenta-rgb, 255, 46, 209), .15), rgba(var(--violet-rgb, 139, 92, 255), .13));
  box-shadow: none;
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.shotgram-live-pill:active { transform: scale(.96); }
@media (hover: hover) {
  .shotgram-live-pill:hover { border-color: rgba(var(--magenta-rgb, 255, 46, 209), .65); background: linear-gradient(135deg, rgba(var(--magenta-rgb, 255, 46, 209), .24), rgba(var(--violet-rgb, 139, 92, 255), .2)); }
}
.shotgram-live-pill .live-pulse { background: #ff2d55; }

/* Unread counter: sits on the key's corner with a ring cut out of it. */
.topbar .count-badge {
  top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: linear-gradient(135deg, var(--magenta, #ff2ed1), #ff3355);
  font-size: 10px; font-weight: 800;
  box-shadow: 0 0 0 2px var(--chrome-bg);
}
html.rtl .topbar .count-badge { right: auto; left: -6px; }

@media (max-width: 430px) {
  .topbar-actions { gap: 5px !important; }
  .topbar .brand { gap: 6px; }
  .topbar .brand img { width: 28px; height: 28px; }
  .topbar .wordmark { font-size: 19px; }
  .topbar .icon-btn { width: 36px; height: 36px; }
  .shotgram-live-pill { height: 36px; padding: 0 10px 0 9px; gap: 5px; }
}
@media (max-width: 385px) {
  .topbar-actions { gap: 4px !important; }
  .topbar .icon-btn { width: 35px; height: 35px; border-radius: 11px; }
  .shotgram-live-pill { height: 35px; padding: 0 9px; border-radius: 11px; }
  .topbar .wordmark { font-size: 19px; }
}
@media (max-width: 330px) {
  .topbar .wordmark { display: none; }
}

/* =====================================================================
   2 · BOTTOM DOCK
   The tab bar floats above the home indicator as a rounded dock.
   ===================================================================== */
.tabbar {
  bottom: calc(var(--dock-gap) + var(--sa-b));
  width: calc(min(var(--shell), 100%) - 24px);
  max-width: calc(100% - 24px - var(--sa-l) - var(--sa-r));
  height: var(--bar-h);
  padding: 0 6px;
  border-radius: 22px;
  background: rgba(13, 14, 30, .95);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
}

.tab { position: relative; color: #7a7fa6; transition: color .15s ease; }
.tab svg { position: relative; z-index: 1; width: 24px; height: 24px; }
.tab .tab-avatar { position: relative; z-index: 1; }
@media (hover: hover) { .tab:hover { color: #c9ccea; } }

/* Active pill behind the icon. */
.tab::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 52px; height: 38px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--cyan-rgb, 0, 216, 255), .16), rgba(var(--violet-rgb, 139, 92, 255), .30) 55%, rgba(var(--magenta-rgb, 255, 46, 209), .20));
  box-shadow: inset 0 0 0 1px rgba(155, 120, 255, .45);
  transform: translate(-50%, -50%) scale(.72);
  opacity: 0;
  transition: opacity .18s ease, transform .24s cubic-bezier(.3, 1.4, .5, 1);
}
.tab.active { color: #fff; }
.tab.active::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tab.active svg { stroke-width: 2.1; }

/* A header key owns the screen: the dock's pill steps back. */
.tab.active.is-muted { color: #b3b7d6; }
.tab.active.is-muted::before { opacity: 0; }

/* Create: always a solid brand key — the one loud thing in the dock. */
.tab[data-view="create"] svg rect { display: none; }
.tab[data-view="create"] svg { width: 26px; height: 26px; stroke-width: 2.6; color: #fff; }
.tab[data-view="create"]::before {
  width: 46px; height: 34px; border-radius: 12px;
  background: var(--brand);
  box-shadow: 0 6px 18px rgba(var(--violet-rgb, 139, 92, 255), .38);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.tab[data-view="create"].active::before {
  box-shadow: 0 6px 18px rgba(var(--violet-rgb, 139, 92, 255), .38), 0 0 0 2px var(--chrome-bg), 0 0 0 3.5px rgba(255, 255, 255, .85);
}
.tab[data-view="create"]:active::before { transform: translate(-50%, -50%) scale(.93); }

/* Profile avatar: ring instead of a white border. */
.tab-avatar .avatar,
.tab.active .tab-avatar .avatar { border-color: transparent; }
.tab.active .tab-avatar .avatar { box-shadow: 0 0 0 2px #15162e, 0 0 0 3.5px #b18cff; }

/* Immersive reels: same dock, clearer glass. */
body.reels-open .tabbar {
  background: rgba(8, 9, 20, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Everything that was measured from the old edge-to-edge bar. */
.screen { padding-bottom: calc(var(--bar-h) + var(--dock-gap) + 26px + var(--sa-b)); }
.comment-bar { bottom: calc(var(--bar-h) + var(--dock-gap) + 6px + var(--sa-b)); }
.toast { bottom: calc(var(--bar-h) + var(--dock-gap) + 20px + var(--sa-b)); }
body.reels-open .reel-rail { bottom: calc(var(--bar-h) + var(--dock-gap) + 18px + var(--sa-b)); }
body.reels-open .reel-info { bottom: calc(var(--bar-h) + var(--dock-gap) + 14px + var(--sa-b)); }

/* =====================================================================
   3 · ACTIVITY
   ===================================================================== */
.act-page [data-cat="all"]      { --cat: var(--cat-all);      --cat-ink: #0a0b18; }
.act-page [data-cat="likes"]    { --cat: var(--cat-likes);    --cat-ink: #fff; }
.act-page [data-cat="comments"] { --cat: var(--cat-comments); --cat-ink: #031620; }
.act-page [data-cat="follows"]  { --cat: var(--cat-follows);  --cat-ink: #fff; }
.act-page [data-cat="other"]    { --cat: #8a8fb5;             --cat-ink: #fff; }

.act-page .stack-head { margin-bottom: 0; border-bottom: 0; }

/* ---- tab row -------------------------------------------------------- */
.act-tabs {
  position: sticky; top: var(--sa-top-h); z-index: 30;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  padding: 6px 12px 12px;
  background: rgba(6, 7, 15, .93);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.act-tab {
  position: relative; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 8px;
  border-radius: 12px;
  background: var(--key-bg);
  border: 1px solid var(--key-line);
  color: #9a9ec2;
  font-size: 13px; font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.act-tab svg { width: 16px; height: 16px; color: var(--cat); stroke-width: 2.1; }
.act-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .act-tab:hover { color: #fff; border-color: rgba(255, 255, 255, .16); } }
.act-tab[aria-selected="true"] {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  background: color-mix(in srgb, var(--cat) 17%, transparent);
  border-color: rgba(255, 255, 255, .3);
  border-color: color-mix(in srgb, var(--cat) 60%, transparent);
}
.act-tab[aria-selected="true"] svg { fill: currentColor; fill-opacity: .25; }
.act-tab-count {
  position: absolute; top: -7px; inset-inline-end: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px;
  display: grid; place-items: center;
  background: var(--cat); color: var(--cat-ink);
  font-size: 10px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--ink);
}
@media (max-width: 400px) {
  .act-tabs { gap: 5px; padding-inline: 10px; }
  .act-tab { font-size: 12px; padding: 0 4px; }
  .act-tab svg { display: none; }
}
@media (max-width: 360px) {
  .act-tabs { gap: 4px; padding-inline: 8px; }
  .act-tab { font-size: 11.5px; padding: 0 2px; letter-spacing: -.01em; }
}
/* Back arrow points the way you came in Arabic too. */
html.rtl .stack-head [data-back] svg { transform: scaleX(-1); }

/* ---- "new activity" pill -------------------------------------------- */
.act-new {
  position: sticky; top: calc(var(--sa-top-h) + 64px); z-index: 29;
  display: block; margin: 10px auto 0;
  padding: 8px 16px; border-radius: 99px;
  background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(var(--violet-rgb, 139, 92, 255), .4);
}
.act-new.hidden { display: none; }

/* ---- sections ------------------------------------------------------- */
.act-head {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 16px 6px;
  font-size: 13.5px; font-weight: 800; color: #fff;
}
.act-head-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  display: inline-grid; place-items: center;
  background: var(--cat-follows); color: #fff; font-size: 11px;
}

/* ---- rows ----------------------------------------------------------- */
.act-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
}
.act-row.is-fresh {
  background: linear-gradient(90deg, rgba(var(--violet-rgb, 139, 92, 255), .08), transparent 75%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 10%, transparent), transparent 75%);
}
html.rtl .act-row.is-fresh {
  background: linear-gradient(270deg, color-mix(in srgb, var(--cat) 10%, transparent), transparent 75%);
}
.act-row.is-fresh::before {
  content: '';
  position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px;
  background: var(--cat);
}
.act-main {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
  text-align: start;
}

.act-avatar { position: relative; flex: none; width: 46px; height: 46px; }
.act-glyph {
  position: absolute; bottom: -2px; inset-inline-end: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cat); color: var(--cat-ink);
  box-shadow: 0 0 0 2.5px var(--ink);
}
.act-glyph svg { width: 11px; height: 11px; stroke-width: 2.6; }
.act-row[data-cat="likes"] .act-glyph svg { fill: currentColor; }

.act-avatar.is-pair .avatar { position: absolute; width: 31px; height: 31px; }
.act-avatar.is-pair .avatar:nth-child(1) { top: 0; inset-inline-end: 0; }
.act-avatar.is-pair .avatar:nth-child(2) {
  bottom: 0; inset-inline-start: 0;
  box-shadow: 0 0 0 2.5px var(--ink);
}

.act-text {
  min-width: 0;
  font-size: 14px; line-height: 1.38; color: #d6d8ec;
  overflow-wrap: anywhere;
}
.act-text b { color: #fff; font-weight: 700; }
.act-name { cursor: pointer; }
@media (hover: hover) { .act-name:hover { text-decoration: underline; } }
.act-quote {
  unicode-bidi: plaintext;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 1px;
  color: var(--muted);
}
.act-time { color: var(--dim); font-size: 12px; margin-inline-start: 4px; white-space: nowrap; }
.act-sub { display: block; color: var(--muted); font-size: 13px; }

/* ---- post thumbnail(s) ---------------------------------------------- */
.act-thumb {
  position: relative; flex: none;
  width: 46px; height: 46px;
  border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--dim);
}
.act-thumb img, .act-thumb-card img { width: 100%; height: 100%; object-fit: cover; }
.act-thumb svg { width: 20px; height: 20px; }

.act-thumb.is-stack { overflow: visible; background: none; border: 0; }
.act-thumb-card {
  position: absolute; inset: 0;
  border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1.5px solid var(--ink);
}
.act-thumb-card:nth-last-child(3) { transform: translate(-5px, -3px) rotate(-5deg); opacity: .75; }
.act-thumb-card:nth-last-child(4) { transform: translate(-9px, -5px) rotate(-10deg); opacity: .5; }
.act-thumb-count {
  position: absolute; z-index: 2; bottom: -6px; inset-inline-end: -6px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center;
  background: #fff; color: #0a0b18;
  font-size: 11px; font-weight: 800;
  box-shadow: 0 0 0 2px var(--ink);
}

/* ---- buttons -------------------------------------------------------- */
.act-actions { display: flex; gap: 6px; flex: none; }
.act-btn {
  flex: none;
  min-width: 108px; height: 34px; padding: 0 14px;
  border-radius: 11px;
  font-size: 13px; font-weight: 700; letter-spacing: -.005em;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.act-btn:active { transform: scale(.96); }
.act-btn:disabled { opacity: .5; }
/* Follow back / Confirm: tinted fill with a bright edge. */
.act-btn.is-solid {
  background: rgba(var(--violet-rgb, 139, 92, 255), .2);
  border: 1px solid rgba(165, 130, 255, .65);
  color: #f1ecff;
}
/* Following / Requested / Delete: stays out of the way. */
.act-btn.is-quiet {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #b9bddc;
}
@media (hover: hover) {
  .act-btn.is-solid:hover { background: rgba(var(--violet-rgb, 139, 92, 255), .34); border-color: #b18cff; }
  .act-btn.is-quiet:hover { background: rgba(255, 255, 255, .09); color: #fff; }
}
.act-request .act-btn { min-width: 0; }
.act-request .act-btn.is-solid {
  background: var(--brand); border-color: transparent; color: #fff;
}
@media (max-width: 380px) {
  .act-btn { min-width: 92px; padding: 0 10px; font-size: 12.5px; }
  .act-request .act-actions { flex-direction: column; gap: 5px; }
  .act-request .act-btn { height: 30px; }
}

/* ---- paging and errors ---------------------------------------------- */
.act-more-wrap { display: flex; justify-content: center; padding: 16px 14px 4px; }
.act-more { border-radius: 12px; }
.act-more.is-busy { opacity: .55; pointer-events: none; }
.act-error {
  margin: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* =====================================================================
   4 · VIDEO POSTS — whole frame, like Reels (v78.8)
   ===================================================================== */
/* Video-only posts: the frame takes the video's own shape (9:16 for phone
   clips), capped so the whole clip fits on screen between the two bars. */
.media-wrap.is-video .slides {
  width: 100%;
  aspect-ratio: var(--media-ar, .5625);
  max-height: calc(100vh - var(--sa-top-h) - var(--bar-h) - var(--dock-gap) - 24px);
  max-height: calc(100svh - var(--sa-top-h) - var(--bar-h) - var(--dock-gap) - 24px);
}
/* Never crop a video — not in its own post, not inside a mixed carousel.
   The studio's zoom is dropped here for the same reason; its filters stay. */
.media-wrap.is-video .slide,
.media-wrap.has-video video.slide {
  object-fit: contain;
  object-position: 50% 50%;
  transform: none !important;
}
/* The video is pinned to the frame. Without this its height falls back to
   the file's own height and the bottom is cut off by overflow:hidden. */
.media-wrap.is-video .media-slide-stage,
.media-wrap.has-video .media-slide-stage { height: auto; align-self: stretch; }
.media-wrap.is-video video.slide,
.media-wrap.has-video video.slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* Landscape phones: keep the card usable instead of a sliver. */
@media (orientation: landscape) and (max-height: 500px) {
  .media-wrap.is-video .slides { max-height: calc(100svh - 24px); }
}

/* =====================================================================
   5 · CAROUSEL SWIPE — one whole slide at a time (v78.9)
   ===================================================================== */
.media-wrap .slides {
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
/* Snap on the slide box, which is always exactly one frame wide. The photo
   inside may be zoomed by the editor, which made its snap point unreliable. */
.media-wrap .slides > .media-slide-stage {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.media-wrap .slides > .media-slide-stage > .slide { scroll-snap-align: none; }
/* Arabic: the ‹ › buttons follow the reading direction. */
html.rtl .media-wrap .slide-nav.prev { left: auto; right: 8px; }
html.rtl .media-wrap .slide-nav.next { right: auto; left: 8px; }
html.rtl .media-wrap .slide-nav svg { transform: scaleX(-1); }

/* =====================================================================
   6 · SIGN IN WITH APPLE (v79) — Apple's white button style on dark UI
   ===================================================================== */
.auth-social { display: grid; gap: 10px; }
.apple-btn {
  min-height: 50px;
  border-radius: 13px;
  border: 1px solid #fff;
  background: #fff;
  color: #000;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
.apple-btn svg { width: 19px; height: 19px; margin-top: -2px; }
.apple-btn:active { transform: scale(.985); }
.apple-btn:disabled { opacity: .6; }
@media (hover: hover) { .apple-btn:hover { background: #f1f1f4; } }

/* v79.1 — belt and braces: the Windows download card can never appear in
   the iOS/Android app or on an iPhone/iPad browser, even if the platform
   script failed to run. (Apple rejects apps that advertise other platforms.) */
html.sg-native .desktop-download-card,
html.sg-ios .desktop-download-card,
html.sg-android .desktop-download-card,
html.sg-touch .desktop-download-card { display: none !important; }

/* =====================================================================
   7 · v79.2 — DM videos and the swipeable post stream
   ===================================================================== */
.bubble-video {
  display: block;
  width: min(260px, 64vw);
  max-height: 360px;
  border-radius: 12px;
  background: #000;
  object-fit: contain;
}
.dm-photo-preview video {
  display: block; width: 100%; max-height: 50vh;
  border-radius: 14px; background: #000; object-fit: contain;
}
.post-stream .post-card { scroll-margin-top: calc(var(--sa-top-h) + 8px); }

/* =====================================================================
   8 · START SCREEN (v79.3)
   The logo flips once, a shine sweeps across it, and a thin brand bar runs
   underneath — instead of a small spinner that looked like a stall.
   ===================================================================== */
.app-splash {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(var(--violet-rgb, 139, 92, 255), .20), transparent 60%),
    radial-gradient(100% 70% at 50% 100%, rgba(var(--cyan-rgb, 0, 216, 255), .12), transparent 60%),
    var(--ink, #06070f);
  animation: splash-in .28s ease-out;
}
.app-splash-inner { display: grid; justify-items: center; gap: 18px; }

.app-splash-mark {
  position: relative;
  width: 104px; height: 104px;
  border-radius: 28px;
  overflow: hidden;
  transform-style: preserve-3d;
  animation: splash-tilt 2.6s cubic-bezier(.45, 0, .25, 1) infinite;
  box-shadow: 0 18px 50px rgba(var(--violet-rgb, 139, 92, 255), .35);
}
.app-splash-mark img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  /* No full turn: past 90° a logo either reads mirrored or upside down.
     A tilt keeps it upright and still catches the light. */
}

/* the shine sweep */
.app-splash-shine {
  position: absolute; inset: -40% -60%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: splash-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}

.app-splash-word {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--cyan, #00d8ff), var(--violet, #8b5cff) 45%, var(--magenta, #ff2ed1));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.app-splash-bar {
  width: 128px; height: 3px; border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.app-splash-bar span {
  display: block; width: 45%; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan, #00d8ff), var(--violet, #8b5cff), var(--magenta, #ff2ed1));
  animation: splash-bar 1.15s ease-in-out infinite;
}

@keyframes splash-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-tilt {
  0%, 100% { transform: perspective(520px) rotateY(-16deg) rotateX(6deg) scale(1); }
  46%      { transform: perspective(520px) rotateY(16deg) rotateX(-4deg) scale(1.05); }
}
@keyframes splash-shine {
  0%, 18%  { transform: translateX(-120%); }
  55%      { transform: translateX(120%); }
  100%     { transform: translateX(120%); }
}
@keyframes splash-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}

/* Motion sensitivity: the logo simply rests and the bar keeps moving. */
@media (prefers-reduced-motion: reduce) {
  .app-splash-mark, .app-splash-mark img { animation: none; }
  .app-splash-shine { display: none; }
}

/* =====================================================================
   9 · LIVE camera framing (v79.4)
   A wide camera shown inside a tall screen used to be cropped to fill it,
   which looked like the camera had zoomed in. Show the whole frame instead.
   ===================================================================== */
.live-creator-screen #livePreview.fit-whole,
#livePreview.fit-whole,
.live-stage video.fit-whole {
  object-fit: contain !important;
  background: #000;
}

/* =====================================================================
   10 · DM long press (v79.5)
   A long press on your own message opens ShotGram's menu. Without this,
   iPhone shows its own selection bar and highlights the whole thread.
   ===================================================================== */
.bubble-row.mine,
.bubble-row.mine .bubble,
.dm-location-card,
.bubble-video,
.bubble-img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Copying still works through the menu's "Copy text". */

/* =====================================================================
   11 · PHONE LAYOUT FIXES (v79.6)
   ===================================================================== */
@media (max-width: 760px) {
  /* ---- Clan channels: Discord-style drawer (v80) --------------------
     The room owns the screen; the channel list slides in over it and
     closes when a channel is picked. Two old rules forced 44%/56%
     columns here, which is why everything was squeezed and overlapping. */
  .clan-discord-shell {
    position: relative;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .clan-channel-sidebar {
    position: absolute; inset: 0 auto 0 0; z-index: 12;
    width: min(290px, 84%);
    max-height: none !important;
    overflow-y: auto !important;
    border-inline-end: 1px solid var(--line) !important;
    background: #0d0f1a !important;
    box-shadow: 18px 0 40px rgba(0, 0, 0, .5);
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  }
  html.rtl .clan-channel-sidebar {
    inset: 0 0 0 auto;
    transform: translateX(102%);
    box-shadow: -18px 0 40px rgba(0, 0, 0, .5);
  }
  .clan-discord-shell.drawer-open .clan-channel-sidebar { transform: translateX(0); }
  .clan-drawer-scrim {
    position: absolute; inset: 0; z-index: 11;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
  }
  .clan-drawer-scrim[hidden] { display: none; }
  .clan-drawer-close { width: 34px; height: 34px; }

  /* the room */
  .clan-channel-stage { min-height: 0 !important; }
  .clan-channel-titlebar {
    height: auto !important;
    flex-wrap: wrap;
    gap: 4px 8px !important;
    padding: 10px 12px !important;
  }
  .clan-channel-switch {
    display: flex; align-items: center; gap: 4px;
    flex: 0 0 auto;
    min-height: 34px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: 10px;
    background: rgba(255, 255, 255, .04); color: var(--ink);
  }
  .clan-channel-switch svg { width: 17px; height: 17px; }
  .clan-channel-titlebar .grow { flex: 1 1 auto; min-width: 0; }
  .clan-channel-titlebar .tiny.muted { flex: 1 1 100%; order: 3; }
  .clan-text-scroll {
    min-height: 300px !important;
    max-height: 52vh !important;
    padding: 12px 12px 8px !important;
  }
  .clan-message-composer {
    position: sticky; bottom: 0;
    padding: 10px 12px calc(10px + var(--sa-b, 0px)) !important;
    background: var(--ink);
    border-top: 1px solid var(--line);
  }

  /* ---- Voice dock: sits above the floating tab dock, not under it ---- */
  .voice-dock {
    bottom: calc(var(--bar-h) + var(--dock-gap) + 8px + var(--sa-b)) !important;
  }
}

/* On a wide screen the list is always there, so the button is not needed. */
@media (min-width: 761px) {
  .clan-channel-switch, .clan-drawer-close, .clan-drawer-scrim { display: none !important; }
}

/* ---- Profile status note: a long word used to run off the screen ---- */
.profile-note {
  max-width: min(150px, 42vw) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =====================================================================
   12 · Motion preference
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tab, .tab::before, .topbar .icon-btn, .shotgram-live-pill,
  .act-tab, .act-btn { transition: none !important; }
}

/* =====================================================================
   13 · LIVE VIEWER — full-screen, TikTok style (v81)
   The video owns the phone screen and every control floats on top of it.
   Before this, the player sat at the top and the chat, title and stats were
   stacked underneath, so the picture got a third of the screen.
   ===================================================================== */
@media (max-width: 760px) {
  .live-v81 { background: #000; }

  .live-v81 .live-watch-shell {
    display: block !important;
    grid-template-columns: none !important;
    max-width: none !important;
    position: fixed; inset: 0;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    background: #000;
  }
  .live-v81 .live-watch-player {
    position: absolute !important; inset: 0 !important;
    border-radius: 0 !important;
    background: #000;
  }
  .live-v81 .live-watch-player video,
  .live-v81 .live-watch-player iframe {
    width: 100%; height: 100%;
    object-fit: cover;
  }

  /* ---- top row: host card, viewers, likes, report, close -------------- */
  .live-v81 .live-watch-top {
    position: absolute; top: calc(var(--sa-t) + 10px); left: 10px; right: 10px;
    z-index: 4;
    display: flex; align-items: center; gap: 8px;
  }
  .live-v81 .live-watch-top .live-status-badge { order: 2; }
  .live-v81 .live-watch-top .live-viewers { order: 3; margin-inline-start: auto; }
  .live-v81 .live-watch-top .live-total-likes { order: 4; }
  .live-v81 .live-watch-top .live-top-btn {
    order: 5;
    display: grid; place-items: center;
    width: 34px; height: 34px; padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .42);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #fff;
  }
  .live-v81 .live-watch-top .live-top-btn span { display: none; }   /* icon only */
  .live-v81 .live-watch-top .live-top-btn svg { width: 16px; height: 16px; }
  .live-v81 .live-watch-meta.is-floating {
    position: absolute; top: calc(var(--sa-t) + 58px); left: 10px;
    z-index: 4;
    max-width: 78%;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .42);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .live-v81 .live-watch-meta.is-floating .grow { min-width: 0; }
  .live-v81 .live-watch-meta.is-floating b { font-size: 13px; }
  .live-v81 .live-watch-meta.is-floating span { font-size: 11px; opacity: .75; }
  .live-v81 .live-watch-meta.is-floating .live-follow-btn {
    flex: none; height: 28px; padding: 0 12px; border-radius: 999px;
    background: #ff2d55; border: 0; color: #fff; font-size: 12.5px; font-weight: 800;
  }

  /* ---- everything that belonged in the side column -------------------- */
  .live-v81 .live-watch-side {
    /* set each side separately: older rules set left/right/bottom one by one,
       and a shorthand loses to them */
    position: absolute !important;
    top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    inset-inline: 0 !important;
    margin: 0 !important; padding: 0 !important;
    max-width: none !important; min-width: 0 !important; z-index: 4;
    display: flex !important; flex-direction: column !important;
    max-height: 62% !important; height: auto !important; min-height: 0 !important; width: auto !important;
    overflow: visible !important;
    padding: 0;
    border: 0 !important;
    background: none !important;
    pointer-events: none;
  }
  .live-v81 .live-watch-side > * { pointer-events: auto; }
  /* the comments and the bar sit at the very bottom of the screen */
  .live-v81 .live-watch-side .live-chat-panel {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    width: 100% !important; max-width: none !important;
    flex: 1 1 auto !important;
  }
  /* the room header, title and counters are desktop furniture */
  .live-v81 .live-watch-side-head,
  .live-v81 .live-watch-title,
  .live-v81 .live-analytics-strip,
  .live-v81 .live-chat-head { display: none !important; }

  /* ---- comments float over the video and fade out at the top ---------- */
  .live-v81 .live-chat-panel {
    /* an older rule positions this panel absolutely part-way up the screen */
    position: static !important; inset: auto !important;
    display: flex !important; flex-direction: column; justify-content: flex-end;
    min-height: 0 !important; max-height: none !important; padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  .live-v81 .live-chat-list {
    max-height: 34vh !important;
    min-height: 0 !important;
    padding: 0 96px 6px 10px;
    background: none !important;
    border: 0 !important;
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(transparent, #000 34%);
    mask-image: linear-gradient(transparent, #000 34%);
  }
  .live-v81 .live-chat-list::-webkit-scrollbar { display: none; }
  .live-v81 .live-chat-list > * {
    width: fit-content; max-width: 100%;
    margin: 3px 0;
    padding: 6px 11px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .34);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-size: 13px; line-height: 1.34;
    animation: live-chat-in .22s ease-out;
  }
  .live-v81 .live-chat-empty { opacity: .8; }
  @keyframes live-chat-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- bottom row: say something · gift · share · send ---------------- */
  .live-v81 .live-chat-form {
    display: flex !important; align-items: center; gap: 6px !important;
    width: 100% !important; max-width: none !important; box-sizing: border-box;
    /* older rules set this with !important, so this one has to as well */
    padding: 8px 10px calc(10px + var(--sa-b)) !important;
    margin: 0 !important;
    border: 0 !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, .62) 45%) !important;
  }
  .live-v81 .live-chat-form .input {
    flex: 1 1 auto !important; width: auto !important; min-width: 96px !important; height: 38px !important;
    font-size: 16px !important;   /* keeps iPhone from zooming on focus */
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #fff; font-size: 14px;
  }
  .live-v81 .live-chat-form .live-bar-btn,
  .live-v81 .live-chat-form .live-composer-action,
  .live-v81 .live-chat-form .live-chat-send {
    flex: none;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #fff;
  }
  /* the gift button is the loud one, as on TikTok */
  .live-v81 .live-chat-form .live-bar-btn.is-gift {
    border: 0;
    background: linear-gradient(135deg, #ff2d55, var(--magenta, #ff2ed1));
    box-shadow: 0 6px 18px rgba(var(--magenta-rgb, 255, 46, 209), .45);
  }
  .live-v81 .live-chat-form .live-bar-btn span { display: none; }
  .live-v81 .live-chat-form .live-bar-btn svg,
  .live-v81 .live-chat-form .live-composer-action svg,
  .live-v81 .live-chat-form .live-chat-send svg { width: 17px; height: 17px; }

  /* the old vertical rail is replaced by the bottom row */
  .live-v81 .live-viewer-rail { display: none !important; }

  /* hearts float above the comments, never under them */
  .live-v81 .live-heart-burst { z-index: 3; }
}

/* =====================================================================
   14 · LIVE CREATOR — camera first (v82)
   The Go LIVE form used to cover the camera with a grey panel: a heading,
   source tabs, device buttons, a checklist and a note. On a phone the
   camera now fills the screen and only what you need floats on top:
   a title box, category chips and one Start LIVE button. While you are
   broadcasting the setup disappears and the comments take its place.
   ===================================================================== */
@media (max-width: 760px) {
  .live-v82 .live-room-shell { position: fixed !important; inset: 0 !important; background: #000; }
  .live-v82 .live-stage {
    position: absolute !important; inset: 0 !important;
    border-radius: 0 !important;
  }
  .live-v82 #livePreview { width: 100% !important; height: 100% !important; }

  /* ---- the panel becomes a slim bar at the bottom -------------------- */
  .live-v82 .live-control-panel {
    position: absolute !important; inset: auto 0 0 0 !important;
    max-height: none !important; height: auto !important;
    padding: 10px 12px calc(12px + var(--sa-b)) !important;
    border: 0 !important; border-radius: 22px 22px 0 0 !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, .74) 22%) !important;
    box-shadow: none !important;
    transform: none !important;
    display: flex !important; flex-direction: column; gap: 10px !important;
    overflow: visible !important;
  }
  /* desktop furniture that made the panel tall */
  .live-v82 .live-control-panel > .live-panel-head,
  .live-v82 .live-source-tabs,
  .live-v82 .live-beta-note,
  .live-v82 .live-creator-readiness,
  .live-v82 .live-device-row,
  .live-v82 .live-control-panel::before { display: none !important; }

  /* an older sheet hoists the start button to the top of the panel with
     `order`; put the pieces back in a sensible order */
  .live-v82 .live-control-panel > * { order: 0 !important; }
  .live-v82 .live-field { order: 1 !important; display: block !important; margin: 0 !important; }
  .live-v82 .live-category-row { order: 2 !important; }
  .live-v82 #mobileLiveControls { order: 3 !important; display: block !important; }
  .live-v82 .live-field > span { display: none !important; }
  .live-v82 .live-field .input {
    height: 42px !important; border-radius: 999px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(0, 0, 0, .42) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #fff !important; font-size: 16px !important;
  }
  .live-v82 .live-category-row {
    display: flex !important; gap: 7px !important;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 !important;
  }
  .live-v82 .live-category-row::-webkit-scrollbar { display: none; }
  .live-v82 .live-category {
    flex: 0 0 auto;
    height: 32px; padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(0, 0, 0, .38) !important;
    color: #e7e9ff !important; font-size: 13px !important;
  }
  .live-v82 .live-category.active {
    border-color: transparent !important;
    background: var(--brand) !important; color: #fff !important;
  }
  .live-v82 .live-start-btn {
    width: 100% !important; height: 52px !important;
    border-radius: 999px !important;
    font-size: 16.5px !important; font-weight: 800 !important;
  }

  /* ---- top row: close, badge, viewers, flip ------------------------- */
  .live-v82 .live-top-row {
    position: absolute !important; top: calc(var(--sa-t) + 10px) !important;
    left: 10px !important; right: 10px !important;
    display: flex !important; align-items: center; gap: 8px !important;
    z-index: 5;
  }

  /* ---- while broadcasting ------------------------------------------- */
  .live-v82.is-broadcasting .live-field,
  .live-v82.is-broadcasting .live-category-row { display: none !important; }
  .live-v82.is-broadcasting .live-control-panel {
    background: linear-gradient(transparent, rgba(0, 0, 0, .66) 30%) !important;
  }
  /* the activity strip stops floating over the buttons and becomes the
     comment column, like the viewer screen */
  /* hidden before the broadcast starts */
  .live-v82 .live-creator-social.hidden { display: none !important; }
  .live-v82 .live-creator-social {
    position: absolute !important;
    /* sits ABOVE the bottom bar, never behind it */
    inset: auto 10px calc(76px + var(--sa-b)) 10px !important;
    max-height: 46% !important;
    display: flex !important; flex-direction: column; justify-content: flex-end;
    border: 0 !important; background: none !important; box-shadow: none !important;
    padding: 0 0 4px !important;
    z-index: 4;
  }
  .live-v82 .live-creator-social-head {
    order: -1;
    align-self: flex-start;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .42) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .live-v82 .live-creator-chat {
    background: none !important; border: 0 !important;
    max-height: 32vh !important; overflow-y: auto;
    padding: 6px 0 !important;
    -webkit-mask-image: linear-gradient(transparent, #000 34%);
    mask-image: linear-gradient(transparent, #000 34%);
  }
  .live-v82 .live-creator-chat > * {
    width: fit-content; max-width: 100%;
    margin: 3px 0; padding: 6px 11px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .34);
    font-size: 13px;
  }
  .live-v82 .live-creator-chat-form {
    display: flex !important; gap: 6px !important;
    padding: 0 0 4px !important; border: 0 !important; background: none !important;
  }
  .live-v82 .live-creator-chat-form .input {
    height: 40px !important; border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(0, 0, 0, .42) !important;
    color: #fff !important; font-size: 16px !important;
  }
}

/* =====================================================================
   15 · GIFT DRAWER (v83)
   A bottom drawer over the LIVE video: coin balance and Get coins on top,
   tier tabs, a grid of gift cards, then quantity and one Send button that
   always shows the price. Sized so the drawer never hides the room.
   ===================================================================== */
.sg-gift-sheet {
  display: flex; flex-direction: column;
  gap: 12px;
  max-height: min(76vh, 620px);
}

/* ---- head: balance + top up ---------------------------------------- */
.sg-gift-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sg-gift-sheet-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.sg-gift-head-actions { display: flex; align-items: center; gap: 8px; }
.sg-coin-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 196, 0, .14);
  border: 1px solid rgba(255, 196, 0, .35);
  color: #ffd964; font-weight: 800; font-size: 13.5px;
}
.sg-coin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe89a, #ffb300 62%, #e98a00);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset;
}
.sg-gift-topup {
  height: 32px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 800;
}

/* ---- tier tabs ------------------------------------------------------ */
.sg-gift-tiers {
  display: flex; gap: 7px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.sg-gift-tiers::-webkit-scrollbar { display: none; }
.sg-gift-tier-btn {
  flex: 0 0 auto;
  height: 34px; padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: #b9bddc; font-size: 13px; font-weight: 700;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sg-gift-tier-btn.is-active {
  border-color: transparent;
  background: var(--brand); color: #fff;
}

/* ---- the gifts ------------------------------------------------------ */
.sg-gift-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 2px;
  min-height: 0;
}
.sg-gift-grid::-webkit-scrollbar { display: none; }
.sg-gift-card {
  display: grid; justify-items: center; gap: 3px;
  padding: 10px 4px 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.sg-gift-card:active { transform: scale(.96); }
.sg-gift-card.is-selected {
  border-color: rgba(155, 120, 255, .75);
  background: rgba(var(--violet-rgb, 139, 92, 255), .16);
  box-shadow: 0 0 0 1px rgba(155, 120, 255, .35) inset;
}
.sg-gift-card-emoji { font-size: 28px; line-height: 1.1; }
.sg-gift-card-name {
  font-size: 11px; color: #c9cce8;
  max-width: 100%; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sg-gift-card-cost {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 800; color: #ffd964;
}
.sg-gift-card-cost i {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe89a, #ffb300 62%, #e98a00);
}
/* the rarer the gift, the warmer the card */
.sg-gift-card[data-tier="epic"] { background: linear-gradient(160deg, rgba(var(--violet-rgb, 139, 92, 255), .14), transparent 70%); }
.sg-gift-card[data-tier="legendary"] {
  background: linear-gradient(160deg, rgba(var(--magenta-rgb, 255, 46, 209), .18), rgba(255, 176, 0, .10) 70%);
  border-color: rgba(255, 176, 0, .35);
}

/* ---- quantity + send ------------------------------------------------ */
.sg-gift-send-row { display: flex; align-items: center; gap: 10px; }
.sg-gift-qty {
  display: flex; align-items: center; gap: 2px;
  height: 46px; padding: 0 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
}
.sg-gift-qty button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: none; color: #e7e9ff; font-size: 18px; font-weight: 700;
}
.sg-gift-qty button:active { background: rgba(255, 255, 255, .08); }
.sg-gift-qty b { min-width: 26px; text-align: center; font-size: 15px; }
.sg-gift-send {
  flex: 1; height: 46px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #ff2d55, var(--magenta, #ff2ed1));
  color: #fff; font-size: 15.5px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(var(--magenta-rgb, 255, 46, 209), .34);
}
.sg-gift-send:disabled {
  background: rgba(255, 255, 255, .07);
  color: var(--dim);
  box-shadow: none;
}
.sg-gift-note { margin: 0; font-size: 12px; color: var(--dim); text-align: center; }
.sg-gift-note.is-warn { color: #ffb45c; }

@media (max-width: 380px) {
  .sg-gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================
   16 · SUPPORT (v84) — help, username, verification, appeals
   ===================================================================== */
.support-page { padding-bottom: 28px; }
.support-intro { margin: 8px 16px 14px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.support-staff-link { margin: 0 16px 14px; }
.support-form { display: grid; gap: 14px; padding: 0 16px; }

.support-kinds { display: grid; gap: 8px; }
.support-kind {
  display: grid; gap: 2px; text-align: start;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
}
.support-kind b { font-size: 14px; }
.support-kind span { font-size: 12px; color: var(--muted); }
.support-kind.is-on {
  border-color: rgba(155, 120, 255, .6);
  background: rgba(var(--violet-rgb, 139, 92, 255), .14);
}

.support-field { display: grid; gap: 6px; }
.support-field > span:first-child { font-size: 12.5px; color: var(--muted); }
.support-field textarea.input { min-height: 110px; resize: vertical; line-height: 1.45; }
.support-field .tiny.dim { text-align: end; }

.support-h3 { margin: 26px 16px 10px; font-size: 15px; }
.support-card {
  margin: 0 16px 10px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.support-card.is-answered { border-color: rgba(46, 204, 130, .35); }
.support-card.is-closed { opacity: .72; }
.support-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.support-user { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.support-status {
  flex: none;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}
.support-card.is-answered .support-status { background: rgba(46, 204, 130, .18); color: #7ce0ae; }
.support-kind-line { margin: 4px 0 8px; font-size: 12px; color: var(--dim); }
.support-body { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-reply {
  margin-top: 11px; padding: 10px 12px;
  border-radius: 12px;
  background: rgba(var(--cyan-rgb, 0, 216, 255), .08);
  border: 1px solid rgba(var(--cyan-rgb, 0, 216, 255), .22);
}
.support-reply-mark {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; color: #6fdcff;
}
.support-reply-mark svg { width: 14px; height: 14px; }
.support-reply p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.support-answer { display: grid; gap: 8px; margin-top: 11px; }

/* v84.1 — the ShotGram Support account's own tag */
.badge-support {
  display: inline-flex; align-items: center;
  padding: 2px 7px; margin-inline-start: 4px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ffd964, #ffa62e);
  color: #241a00;
  font-size: 10px; font-weight: 900; letter-spacing: .04em;
}
.thread.support-thread, .system-thread.support-thread {
  background: linear-gradient(90deg, rgba(255, 196, 0, .08), transparent 70%);
}

/* v85 — the back-and-forth inside a support request */
.support-thread { display: grid; gap: 8px; margin-top: 10px; }
.support-msg {
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
}
.support-msg.is-staff {
  background: rgba(var(--cyan-rgb, 0, 216, 255), .08);
  border-color: rgba(var(--cyan-rgb, 0, 216, 255), .22);
}
.support-msg-who {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; color: var(--muted);
}
.support-msg.is-staff .support-msg-who { color: #6fdcff; }
.support-msg-who svg { width: 13px; height: 13px; }
.support-msg p { margin: 4px 0 2px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-msg-time { font-size: 11px; color: var(--dim); }

/* =====================================================================
   17 · LIVE CHAT BADGES (v87)
   The artwork is a clean transparent PNG/WebP; the size lives here.
   ===================================================================== */
.sg-badges { display: inline-flex; align-items: center; gap: 3px; vertical-align: -3px; margin-inline-end: 4px; }
.sg-badge { display: inline-flex; align-items: center; gap: 2px; }
.sg-badge img { display: block; width: 20px; height: 20px; }
.sg-badge b {
  font-size: 10px; font-weight: 800; letter-spacing: .01em;
  color: #ffd964;
}
/* phones: a touch smaller so a long name still fits on one line */
@media (max-width: 480px) {
  .sg-badge img { width: 18px; height: 18px; }
  .sg-badge b { font-size: 9.5px; }
}
/* the creator's own panel and profiles show them bigger */
.live-creator-chat .sg-badge img { width: 18px; height: 18px; }
.profile-badges .sg-badge img { width: 34px; height: 34px; }
html.rtl .sg-badges { margin-inline-end: 4px; }

/* =====================================================================
   18 · POST STREAM — swipe between posts (v87.1)
   Opening a video from Explore or a profile lands you in a stream of that
   whole grid. It scrolled like a web page, so it felt like nothing had
   happened. Each post now snaps into place like Reels.
   ===================================================================== */
.post-stream { scroll-snap-type: y proximity; }
.post-stream .post-card {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: calc(var(--sa-top-h) + 6px);
}
@media (max-width: 760px) {
  /* a video post takes the screen, so a swipe moves exactly one post */
  .post-stream { scroll-snap-type: y mandatory; }
  .post-stream .post-card:has(.media-wrap.is-video) { scroll-snap-stop: always; }
}

/* v139.6 — mixed photo + video carousels: one frame shaped like the tallest
   item, every slide shown whole (letterboxed), nothing cut off. */
.media-wrap.has-video .slides {
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-ar, 1);
  max-height: calc(100vh - var(--sa-top-h, 60px) - var(--bar-h, 64px) - var(--dock-gap, 0px) - 120px);
  max-height: calc(100svh - var(--sa-top-h, 60px) - var(--bar-h, 64px) - var(--dock-gap, 0px) - 120px);
  background: #000;
}
.media-wrap.has-video .media-slide-stage { position: relative; }
.media-wrap.has-video img.slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 50%; transform: none !important;
}