/* ShotGram v139.43 (app 1.3.3) — fixes: clans, DMs, profile pull, Explore. */

/* clans — "members" in the header opens the list for everyone */
.clan-hero-stats > .clan-stat-btn { display: grid; justify-items: center; gap: 2px; padding: 11px 4px; background: rgba(5,6,13,.45);
  border: 0; color: inherit; font: inherit; cursor: pointer; }
.clan-hero-stats > .clan-stat-btn:active { background: rgba(255,255,255,.08); }

/* website: a new deploy no longer reloads the page by itself */
.sg-update-pill { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 64px); z-index: 2500;
  border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, #00b4ff, #8b5cff); box-shadow: 0 8px 24px rgba(0,0,0,.45); }

/* pull to refresh: the page's title row stays still and the content slides under it */
.screen > .stack-head { position: relative; z-index: 6; background: var(--ink, #06070f); }

/* DMs — calls, Instagram style: one slim grey row, the phone icon, how it went,
   and a small "Call back". No big red button on every call. */
.call-card-row { margin: 6px 12px; }
.call-card { min-width: 0; max-width: min(300px, 78%); padding: 9px 12px; gap: 10px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line); }
.call-card-icon { width: 32px; height: 32px; background: rgba(255,255,255,.07); color: var(--text); }
.call-card-icon svg { width: 16px; height: 16px; }
.call-card-text b { font-size: 14px; font-weight: 700; }
.call-card-again { width: auto; height: auto; border-radius: 0; background: none; color: var(--blue, #3f92ff);
  font-size: 12.5px; font-weight: 700; padding: 4px 2px; white-space: nowrap; }
.call-card.missed { background: var(--surface-2); border-color: var(--line); }
.call-card.missed .call-card-icon { background: rgba(255, 78, 107, .12); color: var(--bad, #ff4e6b); }
.call-card.missed .call-card-text b { color: var(--bad, #ff4e6b); }

/* DMs — the voice-room / clan invite always fits inside its bubble */
.bubble .dm-invite-card { width: 100%; max-width: 280px; min-width: 0; box-sizing: border-box; }
.bubble:has(.dm-invite-card) { max-width: min(304px, 80vw); }
.dm-invite-go { white-space: nowrap; }

/* DMs — voice-note recording bar sits IN the composer, next to send */
.room-bar.is-recording > :not(#micBtn):not(.vn-hint) { display: none !important; }   /* v1.3.5: the mic IS the ➤ while recording */
.room-bar.is-recording .vn-hint.vn-hint-inline { position: static; transform: none; inset: auto; flex: 1; min-width: 0; height: 44px; margin-inline-end: 6px; }
.room-bar.is-recording .vn-rec-tip { overflow: hidden; text-overflow: ellipsis; }

/* profile — no more "username" bar under the ShotGram header. The back and
   ☰ buttons float over the top corners of the profile instead. */
.screen:has(> .stack-head.pf-float) { position: relative; }
.screen > .stack-head.pf-float { position: absolute; top: 8px; left: 0; right: 0; z-index: 8; height: 0; min-height: 0;
  padding: 0 12px; margin: 0; border: 0 !important; background: none !important; box-shadow: none !important;
  display: flex; align-items: flex-start; justify-content: space-between; overflow: visible; pointer-events: none; }
.screen > .stack-head.pf-float .stack-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.screen > .stack-head.pf-float .icon-btn { pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(6, 7, 15, .5) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.screen > .stack-head.pf-float .icon-btn svg { width: 20px; height: 20px; }
.screen > .stack-head.pf-float > span:first-child { width: 38px; }

/* video tiles without a cover: a calm dark square with a play mark — the
   moving shimmer on many tiles at once was the Explore "twinkling" */
.tile .tile-ph { animation: none !important; background: #141520 !important; }
.tile .tile-ph::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-35%, -50%);
  border-left: 14px solid rgba(255, 255, 255, .28); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.ptr-freeze { background: var(--ink, #06070f); }

/* =====================================================================
   Start screen v2 (v139.43) — deeper and calmer: slow colour light behind,
   the logo inside a turning brand ring, the name, a short line, and a slim
   bar. Only transform/opacity move, so it stays smooth while the app loads.
   ===================================================================== */
.app-splash.v2 { overflow: hidden; background: #04050b; padding: 24px; }
.app-splash.v2 .app-splash-aurora { position: absolute; inset: 0; pointer-events: none; }
.app-splash.v2 .app-splash-aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .5;
  filter: blur(60px); will-change: transform; }
.app-splash.v2 .app-splash-aurora i:nth-child(1) { left: -30vmax; top: -28vmax; background: radial-gradient(closest-side, rgba(0, 200, 255, .55), transparent);
  animation: sgAur1 9s ease-in-out infinite alternate; }
.app-splash.v2 .app-splash-aurora i:nth-child(2) { right: -32vmax; top: 10vmax; background: radial-gradient(closest-side, rgba(139, 92, 255, .6), transparent);
  animation: sgAur2 11s ease-in-out infinite alternate; }
.app-splash.v2 .app-splash-aurora i:nth-child(3) { left: -10vmax; bottom: -40vmax; background: radial-gradient(closest-side, rgba(255, 46, 209, .42), transparent);
  animation: sgAur3 13s ease-in-out infinite alternate; }
.app-splash.v2 .app-splash-inner { position: relative; z-index: 1; gap: 14px; animation: sgSplashRise .6s cubic-bezier(.2, .8, .2, 1) both; }
.app-splash.v2 .app-splash-logo { position: relative; width: 156px; height: 156px; display: grid; place-items: center; margin-bottom: 6px; }
.app-splash.v2 .app-splash-orbit { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 18%, #00d8ff 30%, #8b5cff 52%, #ff2ed1 70%, transparent 82% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: sgOrbit 1.6s linear infinite; filter: drop-shadow(0 0 8px rgba(139, 92, 255, .7)); }
.app-splash.v2 .app-splash-logo::before { content: ''; position: absolute; inset: 22px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 255, .45), transparent); animation: sgGlow 2.4s ease-in-out infinite; }
.app-splash.v2 .app-splash-mark { width: 104px; height: 104px; border-radius: 30px; animation: sgFloat 3.2s ease-in-out infinite;
  box-shadow: 0 20px 60px rgba(139, 92, 255, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.app-splash.v2 .app-splash-word { font-size: 32px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
  background: linear-gradient(100deg, #00d8ff, #8b5cff 45%, #ff2ed1 80%, #00d8ff); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sgWordSheen 3s linear infinite; }
.app-splash.v2 .app-splash-tag { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .62); letter-spacing: .01em; margin-top: -4px; }
.app-splash.v2 .app-splash-tag .ar { display: none; }
html[lang="ar"] .app-splash.v2 .app-splash-tag .ar { display: inline; }
html[lang="ar"] .app-splash.v2 .app-splash-tag .en { display: none; }
.app-splash.v2 .app-splash-bar { width: 148px; height: 3px; margin-top: 14px; background: rgba(255, 255, 255, .08); box-shadow: none; }
.app-splash.v2 .app-splash-foot { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 1;
  text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .32em; color: rgba(255, 255, 255, .34); }
@keyframes sgAur1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes sgAur2 { to { transform: translate(-12vmax, 8vmax) scale(.9); } }
@keyframes sgAur3 { to { transform: translate(10vmax, -12vmax) scale(1.2); } }
@keyframes sgOrbit { to { transform: rotate(360deg); } }
@keyframes sgGlow { 50% { opacity: .45; transform: scale(1.12); } }
@keyframes sgFloat { 50% { transform: translateY(-5px) scale(1.02); } }
@keyframes sgWordSheen { to { background-position: -200% 0; } }
@keyframes sgSplashRise { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .app-splash.v2 .app-splash-aurora i, .app-splash.v2 .app-splash-mark, .app-splash.v2 .app-splash-word,
  .app-splash.v2 .app-splash-logo::before { animation: none; }
  .app-splash.v2 .app-splash-orbit { animation-duration: 3s; }
}