/* =====================================================================
   ShotGram v90
   1 · Story viewer respects the notch / Dynamic Island and home indicator
   2 · Settings → App icon picker
   ===================================================================== */

/* ---- 1 · Story viewer safe area -------------------------------------
   The progress bars sat at top:10px and the name row at top:22px, measured
   from the very top of the screen, so on every notch iPhone the username,
   time and delete button were drawn under the clock and battery. */
.story-bars {
  top: calc(8px + var(--sa-t, env(safe-area-inset-top, 0px)));
  left: max(10px, var(--sa-l, 0px));
  right: max(10px, var(--sa-r, 0px));
}
.story-top {
  top: calc(20px + var(--sa-t, env(safe-area-inset-top, 0px)));
  left: max(10px, var(--sa-l, 0px));
  right: max(10px, var(--sa-r, 0px));
}
.story-foot { bottom: calc(14px + var(--sa-b, env(safe-area-inset-bottom, 0px))); }
.story-caption { bottom: calc(96px + var(--sa-b, env(safe-area-inset-bottom, 0px))); }
/* The tap zones start below the header, so tapping the name or the X never
   also skips to the next story. */
.story-half {
  top: calc(72px + var(--sa-t, env(safe-area-inset-top, 0px)));
  bottom: calc(78px + var(--sa-b, env(safe-area-inset-bottom, 0px)));
}
.story-close { top: calc(14px + var(--sa-t, env(safe-area-inset-top, 0px))); }

/* ---- 2 · App icon picker -------------------------------------------- */
.app-icon-thumb {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  object-fit: cover; box-shadow: 0 0 0 1px var(--line);
}
.app-icon-hint { margin: 0 4px 12px; color: var(--muted); font-size: 13px; }
/* Discord-style list: icon, name, radio. */
.app-icon-list {
  display: grid; border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.app-icon-option {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 72px; padding: 10px 14px;
  background: none; border: 0; color: var(--text); text-align: start;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.app-icon-option + .app-icon-option { border-top: 1px solid var(--line); }
.app-icon-option:active { background: rgba(255, 255, 255, .05); }
.app-icon-img {
  width: 52px; height: 52px; border-radius: 12px; flex: none; object-fit: cover;
  -webkit-user-drag: none;
}
.app-icon-name { flex: 1; font-size: 15.5px; font-weight: 600; }
.app-icon-name .muted { font-weight: 500; }
.app-icon-radio {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255, 255, 255, .35); transition: border .15s, box-shadow .15s;
}
.app-icon-option.selected .app-icon-radio {
  border: 7px solid var(--cyan); box-shadow: 0 0 0 1px rgba(var(--cyan-rgb, 0, 216, 255), .35);
}
.app-icon-option.locked .app-icon-img { filter: saturate(.4) brightness(.7); }
.app-icon-lock { color: var(--muted); display: grid; }
.app-icon-lock svg { width: 18px; height: 18px; }
.app-icon-option.busy { opacity: .6; }
.app-icon-note { min-height: 18px; margin: 12px 4px 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---- 3 · LIVE creator screen (phone) ---------------------------------
   What the screenshots showed:
   · the top row sat ~90px too low: v82 set `top: safe-area + 10px` but an
     older rule still added `padding-top: 12px + safe-area`, so the inset was
     counted twice and the row landed on top of the host card;
   · the host card (name + timer) covered the close button;
   · the "Go LIVE / Creator control room" heading was still visible (v82 hid
     `.live-panel-head`, but this screen's heading is a different element);
   · the mic/flip dock sat bottom-right, under the send button and End LIVE. */
@media (max-width: 760px) {
  html body .live-v82 .live-top-row {
    top: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 8px) !important;
    padding: 0 !important;
    left: max(10px, var(--sa-l, 0px)) !important;
    right: max(10px, var(--sa-r, 0px)) !important;
    min-height: 40px;
  }
  html body .live-v82 .live-status-cluster { margin-inline: auto; }
  html body .live-v82 .live-host-card {
    top: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 58px) !important;
    bottom: auto !important;
    inset-inline-start: max(10px, var(--sa-l, 0px)) !important;
    inset-inline-end: auto !important;
    left: auto; right: auto;
    width: max-content !important; max-width: calc(100% - 84px) !important;
    z-index: 6 !important;
  }
  html:not(.rtl) body .live-v82 .live-host-card { left: max(10px, var(--sa-l, 0px)) !important; }
  html.rtl body .live-v82 .live-host-card { right: max(10px, var(--sa-r, 0px)) !important; }

  html body .live-v82 .live-creator-command-head { display: none !important; }

  /* mic under the flip button, top-end; flip already lives in the top row */
  html body .live-v82 .sg-live-quick {
    inset-block-start: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 58px) !important;
    inset-block-end: auto !important;
    inset-inline-end: max(10px, var(--sa-r, 0px)) !important;
    z-index: 7 !important;
  }
  html body .live-v82 #sgQuickFlip { display: none !important; }

  /* the bottom bar stopped ~40px short of the right edge */
  html body .live-v82 .live-control-panel {
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: none !important; margin: 0 !important;
    box-sizing: border-box;
  }
  html body .live-v82 .sg-quick-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
}

/* ---- 4 · Gift drawer: the close X sat on top of "Get coins" ---------- */
.modal .sg-gift-sheet-head,
.sheet .sg-gift-sheet-head { padding-inline-end: 42px; }
.sg-gift-head-actions { flex-wrap: nowrap; min-width: 0; }
.sg-gift-topup { white-space: nowrap; }

/* ---- 5 · Clan wars: how a war starts -------------------------------- */
.war-howto {
  margin: 4px 0 14px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--cyan-rgb, 0, 216, 255), .07), rgba(var(--magenta-rgb, 255, 46, 209), .06));
  overflow: hidden;
}
.war-howto > summary {
  list-style: none; cursor: pointer; padding: 13px 16px;
  font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 8px;
}
.war-howto > summary::-webkit-details-marker { display: none; }
.war-howto > summary::after {
  content: ''; margin-inline-start: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s;
}
.war-howto[open] > summary::after { transform: rotate(225deg); }
.war-steps { list-style: none; margin: 0; padding: 0 14px 14px; display: grid; gap: 10px; }
.war-steps li { display: flex; gap: 12px; align-items: flex-start; }
.war-step-n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--cyan, #00d8ff), var(--magenta, #ff2ed1));
}
.war-steps b { display: block; font-size: 14px; }
.war-steps p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ---- 6 · Calls: back to chat (minimised pill) + speaker state -------- */
.call-min-btn {
  position: absolute; z-index: 5;
  top: calc(10px + var(--sa-t, env(safe-area-inset-top, 0px)));
  inset-inline-start: max(12px, var(--sa-l, 0px));
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.call-min-btn svg { width: 22px; height: 22px; }
.call-overlay.incoming .call-min-btn { display: none; }
.call-pill-end { display: none; }
.call-overlay { position: fixed; }   /* keeps its box when minimised */
.call-overlay audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* the pill: same overlay, same peer connection, just smaller */
.call-overlay.minimized {
  inset: auto !important;
  top: calc(8px + var(--sa-t, env(safe-area-inset-top, 0px))) !important;
  left: 50% !important; transform: translateX(-50%);
  width: min(360px, calc(100vw - 24px)); height: 58px !important;
  padding: 0 8px 0 10px !important;
  border-radius: 999px; overflow: hidden;
  background: linear-gradient(135deg, rgba(16, 185, 129, .95), rgba(5, 150, 105, .95)) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  flex-direction: row !important; align-items: center;
  animation: none; cursor: pointer; z-index: 2100;
}
.call-overlay.minimized .call-controls,
.call-overlay.minimized .call-min-btn,
.call-overlay.minimized .call-local,
.call-overlay.minimized .peer-muted-tag { display: none !important; }
.call-overlay.minimized .call-remote {
  display: block !important; position: absolute; width: 1px !important; height: 1px !important;
  opacity: 0; pointer-events: none; inset: auto !important;
}
.call-overlay.minimized .call-stage { flex: 1; min-width: 0; height: 100%; padding: 0 !important; overflow: visible; }
.call-overlay.minimized .call-person {
  position: static !important; inset: auto !important;
  flex-direction: row !important; justify-content: flex-start !important;
  gap: 10px !important; padding: 0 !important; height: 100%; text-align: start;
}
.call-overlay.minimized .call-person .avatar {
  display: grid !important; width: 38px !important; height: 38px !important;
  animation: none !important; flex: none;
}
.call-overlay.minimized .call-name { font-size: 15px; color: #fff; text-shadow: none; }
.call-overlay.minimized .call-status { color: rgba(255, 255, 255, .9); font-size: 13px; margin-inline-start: auto; text-shadow: none; }
.call-overlay.minimized .call-pill-end {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--bad, #ff4d6d); color: #fff; margin-inline-start: 8px;
}
.call-overlay.minimized .call-pill-end svg { width: 18px; height: 18px; }
/* the app underneath is usable while minimised */
body.call-minimized { overflow: auto; }

/* speaker: lit when the loudspeaker is on (not a crossed-out glyph) */
.call-btn.ghost.active { background: #fff; color: var(--ink, #06070f); }

/* ---- 7 · DM: pull to refresh, long press, sheets ---------------------- */
.room { position: relative; }
.dm-ptr {
  position: absolute; z-index: 3; left: 50%;
  top: 64px;
  transform: translate(-50%, calc(var(--pull, 0px) - 40px));
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(20, 22, 44, .92); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .15s;
}
.dm-ptr-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25); border-top-color: var(--cyan);
  transform: rotate(calc(var(--pull, 0px) * 4deg));
}
.dm-ptr.ready .dm-ptr-spin { border-color: var(--cyan); border-top-color: var(--magenta, #ff2ed1); }
.dm-ptr.busy .dm-ptr-spin { animation: dmPtrSpin .7s linear infinite; }
@keyframes dmPtrSpin { to { transform: rotate(360deg); } }

/* Long press used to start the browser's text selection: the bubble went
   blue with drag handles, and the handles even spilled onto the action sheet
   (screenshot). Messages and sheets are not selectable; "Copy text" in the
   menu is the deliberate way to copy. Inputs stay selectable. */
.room-body .bubble-row,
.room-body .bubble-row *,
.sheet, .sheet *,
.modal .sheet-list, .modal .sheet-list * {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.sheet input, .sheet textarea, .modal input, .modal textarea,
.room-bar input, .room-bar textarea {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.emoji-btn.icon-btn svg { width: 22px; height: 22px; }

/* ---- 8 · Story composer header ----------------------------------------- */
.story-compose { grid-template-rows: auto 1fr auto !important; }
.story-compose-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + var(--sa-t, env(safe-area-inset-top, 0px))) max(12px, var(--sa-r, 0px)) 8px max(12px, var(--sa-l, 0px));
  color: #fff; z-index: 2;
}
.story-compose-head b { flex: 1; text-align: center; font-size: 16px; }
.story-compose-head .icon-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.story-compose-spacer { width: 42px; }
.story-compose .story-close { display: none; }
/* the "Sharing your story…" card must not swallow taps: Cancel has to
   stay reachable while the file uploads */
body.story-composing .sg-upload,
body.story-composing .sg-upload * { pointer-events: none !important; }

/* ---- 9 · Double-tap like heart: ShotGram gradient, never flat white ---- */
.heart-burst .sg-burst-heart {
  width: 104px; height: 104px;
  filter: drop-shadow(0 8px 24px rgba(193, 60, 255, .55)) drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.heart-burst { color: #ff5fd2; }

/* ---- 10 · Avatar colour themes (one renderer: ui.js avatar()) ----------
   v90.2 — the first version painted the ring as 2px of padding and then put
   a 2px dark shadow on the photo, which covered the ring completely: every
   theme looked identical. The ring is now drawn OUTSIDE the avatar with
   box-shadows (dark gap + colour ring + soft glow), so the photo is never
   touched and the colour is always visible, at every avatar size. */
.avatar[data-theme] {
  box-shadow:
    0 0 0 2px var(--ink, #06070f),
    0 0 0 4.5px var(--av-a),
    0 0 0 5px var(--av-b),
    0 0 14px 2px var(--av-glow);
}
.avatar.xs[data-theme], .avatar.sm[data-theme] {
  box-shadow: 0 0 0 1.5px var(--ink, #06070f), 0 0 0 3.5px var(--av-a), 0 0 8px 1px var(--av-glow);
}
.avatar[data-theme].placeholder { background: var(--av-fill) !important; }
.avatar[data-theme="classic"] { --av-a: #3b82ff; --av-b: var(--magenta, #ff2ed1); --av-glow: rgba(160, 80, 255, .55); --av-fill: linear-gradient(135deg, #0b2a6b, #5a1050); }
.avatar[data-theme="cyan"]    { --av-a: #22d3ee; --av-b: #7dd3fc; --av-glow: rgba(34, 211, 238, .6);  --av-fill: linear-gradient(135deg, #073a4a, #0b2a4a); }
.avatar[data-theme="pink"]    { --av-a: var(--magenta, #ff2ed1); --av-b: #ff8ae3; --av-glow: rgba(var(--magenta-rgb, 255, 46, 209), .6);  --av-fill: linear-gradient(135deg, #5a1050, #3d0f2d); }
.avatar[data-theme="gold"]    { --av-a: #ffb800; --av-b: #ffe680; --av-glow: rgba(255, 184, 0, .6);   --av-fill: linear-gradient(135deg, #5a4308, #3a2a04); }
.avatar[data-theme="silver"]  { --av-a: #e5e9f0; --av-b: #94a3b8; --av-glow: rgba(203, 213, 225, .5); --av-fill: linear-gradient(135deg, #2a3140, #151a24); }
.avatar[data-theme="emerald"] { --av-a: #22e08a; --av-b: #7dffb8; --av-glow: rgba(34, 224, 138, .55); --av-fill: linear-gradient(135deg, #0a4a33, #053322); }
.avatar[data-theme="blaze"]   { --av-a: #ff7a1a; --av-b: #ffb14a; --av-glow: rgba(255, 110, 30, .6);  --av-fill: linear-gradient(135deg, #5a3208, #4a1204); }
.avatar[data-theme="crimson"] { --av-a: #ff2b3d; --av-b: #ff7a85; --av-glow: rgba(255, 43, 61, .6);   --av-fill: linear-gradient(135deg, #5a0b16, #33050c); }
/* rainbow: stacked bands, like the rainbow icon's frame */
.avatar[data-theme="rainbow"] {
  --av-fill: linear-gradient(135deg, #073a4a, #5a1050);
  box-shadow: 0 0 0 2px var(--ink, #06070f), 0 0 0 3px #22d3ee, 0 0 0 4px var(--violet, #8b5cff),
              0 0 0 5px var(--magenta, #ff2ed1), 0 0 0 6px #ffc414, 0 0 14px 2px rgba(var(--violet-rgb, 139, 92, 255), .55);
}
.avatar.xs[data-theme="rainbow"], .avatar.sm[data-theme="rainbow"] {
  box-shadow: 0 0 0 1.5px var(--ink, #06070f), 0 0 0 2.5px #22d3ee, 0 0 0 3.5px var(--magenta, #ff2ed1), 0 0 0 4.5px #ffc414;
}
.avatar-theme-live { display: grid; place-items: center; padding: 14px 0 12px; }
.avatar-theme-live .avatar { width: 96px !important; height: 96px !important; }
.avatar-theme-art { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; }
.avatar-theme-none { display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px dashed var(--line); color: var(--muted); }
.avatar-theme-none svg { width: 22px; height: 22px; }
.avatar-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
.avatar-theme-opt {
  display: grid; justify-items: center; gap: 10px; padding: 16px 4px 12px; border-radius: 14px;
  background: none; border: 1px solid transparent; color: var(--text);
}
.avatar-theme-opt.selected { border-color: var(--cyan); background: rgba(var(--cyan-rgb, 0, 216, 255), .06); }
.avatar-theme-opt span:last-child { font-size: 12.5px; color: var(--muted); }

/* ---- 11 · Icons that replaced emoji ------------------------------------ */
.sg-live-state-icon svg { width: 34px; height: 34px; }
.live-category-grid svg { width: 22px; height: 22px; display: block; margin: 0 auto 4px; }
.perm-icon svg { width: 34px; height: 34px; }
.clan-empty-icon svg { width: 40px; height: 40px; }
.contact-growth-icon svg { width: 26px; height: 26px; }
.onboarding-check svg { width: 14px; height: 14px; }
.clan-card span[title] svg { width: 14px; height: 14px; vertical-align: -2px; color: #ff9a3c; }
.rec-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; margin-inline-end: 4px; animation: sgIconPulse 1s infinite; }
@keyframes sgIconPulse { 50% { opacity: .35; } }
.sg-float-pink .sg-burst-heart, svg.sg-float-pink { filter: hue-rotate(0deg); }
svg.sg-float-violet { filter: hue-rotate(-25deg); }
svg.sg-float-cyan { filter: hue-rotate(-120deg); }
svg.sg-float-rose { filter: hue-rotate(20deg); }
.live-heart-burst span svg { width: 30px; height: 30px; display: block; }

/* ---- 12 · Dark text on dark cards --------------------------------------
   --ink is ShotGram's BACKGROUND colour (var(--ink, #06070f)). These rules used it as a
   text colour, so the clan names in Explore → Trending clans, the usernames
   under "Creators to discover", tag cards and several clan-channel labels
   were near-invisible dark-on-dark. They now use the text colour. */
.clan-channel-search input,
.mini-icon:hover,
.clan-channel-row:hover,
.clan-add-channel:hover,
.explore-clan-card,
.explore-person-card,
.explore-tag-cloud button,
.explore-tag-cloud b,
.explore-tag-cloud .explore-clan-tag-card b,
.clan-channel-row.active .clan-channel-main,
.clan-channel-voice-person:hover,
.clan-voice-discord-empty > svg,
.clan-voice-discord-empty > b,
.clan-channel-switch { color: var(--text) !important; }
.explore-clan-card b, .explore-person-card b { color: var(--text); }

/* ---- 13 · Identity badges + ShotGram Plus ------------------------------ */
.badge-slot { display: inline-flex; align-items: center; }
.badge-slot:empty { display: none; }
.plus-star-ico .identity-badge svg { width: 26px; height: 26px; }
.plus-hero { display: grid; justify-items: center; gap: 6px; padding: 8px 0 16px; text-align: center; }
.plus-hero .identity-badge svg { width: 64px; height: 64px; filter: drop-shadow(0 8px 22px rgba(255, 196, 20, .45)); }
.plus-hero b { font-size: 22px; background: linear-gradient(90deg, #ffe066, #ffb300); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plus-perks { display: grid; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.plus-perks > div { display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-size: 15px; }
.plus-perks > div + div { border-top: 1px solid var(--line); }
.plus-perks svg { width: 22px; height: 22px; color: #ffc414; flex: none; }
.plus-note { margin: 14px 4px 4px; text-align: center; color: var(--muted); font-size: 13px; }

/* =====================================================================
   v90.3 — ShotGram signature look: CALL
   Blurred photo backdrop + slow violet/cyan orbs, glass control dock with
   labels, a breathing ring while it rings, an "encrypted" chip (WebRTC
   media is DTLS-SRTP encrypted end to end between the two phones).
   ===================================================================== */
.call-overlay:not(.minimized) { background: #05060d; overflow: hidden; }
.call-aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.call-aura img {
  position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover;
  filter: blur(46px) saturate(1.35) brightness(.42); transform: scale(1.05);
}
/* v92 — same glow, far cheaper. The orbs used filter: blur(70px) plus
   mix-blend-mode on two screen-sized layers, animated forever — during a
   WebRTC call that competed with the camera/decoder for the GPU and made the
   iPhone lag. A radial gradient that fades to transparent already IS soft, so
   the blur and blend are gone, and the drift only runs on the ringing /
   calling screens (not during the conversation, never on video). */
.call-orb { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .42; will-change: transform; }
.call-orb.o1 { background: radial-gradient(circle, rgba(var(--violet-rgb, 139, 92, 255),.9) 0%, rgba(var(--violet-rgb, 139, 92, 255),.35) 30%, transparent 62%); top: -30vmax; left: -22vmax; }
.call-orb.o2 { background: radial-gradient(circle, rgba(var(--cyan-rgb, 0, 216, 255),.85) 0%, rgba(var(--cyan-rgb, 0, 216, 255),.3) 30%, transparent 62%); bottom: -34vmax; right: -24vmax; }
.call-overlay.incoming .call-orb.o1, .call-overlay.outgoing .call-orb.o1 { animation: sgOrb1 14s ease-in-out infinite alternate; }
.call-overlay.incoming .call-orb.o2, .call-overlay.outgoing .call-orb.o2 { animation: sgOrb2 17s ease-in-out infinite alternate; }
@keyframes sgOrb1 { to { transform: translate(18vmax, 22vmax) scale(1.15); } }
@keyframes sgOrb2 { to { transform: translate(-16vmax, -20vmax) scale(1.1); } }
.call-overlay.video .call-aura { display: none; }               /* v92 — video fills the screen; don't paint (or animate) an invisible layer */
.call-overlay .call-stage, .call-overlay .call-controls, .call-overlay .call-min-btn { position: relative; z-index: 2; }
.call-overlay .call-min-btn { position: absolute; }
.call-overlay.minimized .call-aura, .call-overlay.minimized .call-chip { display: none; }

.call-chip {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  top: calc(16px + var(--sa-t, env(safe-area-inset-top, 0px)));
  display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.82); white-space: nowrap;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.call-chip svg { width: 13px; height: 13px; }

/* the person */
.call-overlay:not(.minimized) .call-person .avatar {
  width: 132px !important; height: 132px !important; font-size: 44px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 0 10px rgba(var(--violet-rgb, 139, 92, 255),.14), 0 18px 60px rgba(0,0,0,.6);
}
.call-overlay.outgoing:not(.minimized) .call-person .avatar,
.call-overlay.incoming:not(.minimized) .call-person .avatar { animation: sgBreathe 2.2s ease-in-out infinite; }
@keyframes sgBreathe {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 0 10px rgba(var(--violet-rgb, 139, 92, 255),.16), 0 0 0 22px rgba(var(--cyan-rgb, 0, 216, 255),.06); }
  50%      { box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 0 0 16px rgba(var(--violet-rgb, 139, 92, 255),.22), 0 0 0 34px rgba(var(--cyan-rgb, 0, 216, 255),.10); }
}
.call-overlay:not(.minimized) .call-name { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 18px; }
.call-overlay:not(.minimized) .call-status { font-size: 15px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }

/* glass dock with labels */
.call-overlay:not(.minimized):not(.incoming) .call-controls {
  margin: 0 14px calc(18px + var(--sa-b, env(safe-area-inset-bottom, 0px)));
  padding: 16px 10px 12px; border-radius: 30px; gap: 6px !important;
  justify-content: space-around !important;
  background: rgba(20, 22, 40, .55); border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.call-overlay:not(.minimized) .call-controls .call-btn { position: relative; margin-bottom: 18px; }
.call-overlay:not(.minimized) .call-controls .call-btn::after {
  content: attr(aria-label); position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.7); pointer-events: none;
}
.call-overlay .call-btn.ghost { background: rgba(255,255,255,.12); color: #fff; }
.call-overlay .call-btn.ghost.off,
.call-overlay .call-btn.ghost.active { background: #fff; color: #07080f; }
.call-overlay .call-btn.decline { background: linear-gradient(145deg, #ff5a6e, #e11d48); box-shadow: 0 10px 28px rgba(225,29,72,.45); }
.call-overlay .call-btn.accept  { background: linear-gradient(145deg, #34f5a4, #10b981); box-shadow: 0 10px 28px rgba(16,185,129,.45); }
.call-overlay.incoming .call-btn.accept { animation: sgAcceptNudge 1.6s ease-in-out infinite; }
@keyframes sgAcceptNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* =====================================================================
   v90.3 — ShotGram signature look: LIVE
   One visual language with calls: glass pills, a gradient LIVE badge that
   breathes, brand glow on the viewer count and likes, rounder controls.
   ===================================================================== */
.live-status-badge {
  background: linear-gradient(135deg, #ff2e7a, var(--magenta, #ff2ed1) 55%, var(--violet, #8b5cff)) !important;
  color: #fff !important; border: 0 !important; letter-spacing: .12em; font-weight: 800;
  box-shadow: 0 6px 20px rgba(255, 46, 170, .45);
}
.is-broadcasting .live-status-badge, .live-status-badge.is-live { animation: sgLiveBreathe 1.8s ease-in-out infinite; }
@keyframes sgLiveBreathe { 50% { box-shadow: 0 6px 28px rgba(255, 46, 170, .75), 0 0 0 4px rgba(var(--magenta-rgb, 255, 46, 209), .15); } }
.live-viewers, .live-total-likes, .live-timer, .live-host-card, .live-watch-top .live-viewers {
  background: rgba(12, 13, 26, .45) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.live-round-btn, .live-device-btn {
  background: rgba(12, 13, 26, .45) !important; border: 1px solid rgba(255, 255, 255, .12) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.live-pulse { box-shadow: 0 0 0 0 rgba(var(--magenta-rgb, 255, 46, 209), .6); animation: sgDot 1.4s ease-out infinite; }
@keyframes sgDot { to { box-shadow: 0 0 0 8px rgba(var(--magenta-rgb, 255, 46, 209), 0); } }
.live-chat-empty { color: rgba(255, 255, 255, .7) !important; }

/* =====================================================================
   v90.3 — Security page: score card, real switches, tidy panels
   ===================================================================== */
.sec-hero {
  display: flex; align-items: center; gap: 16px; margin-top: 6px;
  padding: 18px; border-radius: var(--r-md, 16px);
  border: 1px solid var(--line); background: var(--surface-2);
}
.sec-strong { --sec-c: var(--violet); }
.sec-medium { --sec-c: var(--violet); }
.sec-weak   { --sec-c: var(--bad); }
.sec-ring {
  --p: 0; flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--sec-c) calc(var(--p) * 1%), var(--surface-3) 0);
}
.sec-ring > span {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text);
}
.sec-ring svg { width: 24px; height: 24px; }
.sec-eyebrow { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.sec-level { display: block; font-size: 19px; font-weight: 700; margin: 2px 0 8px; color: var(--text); }
.sec-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.sec-checks span {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-3);
}
.sec-checks span.ok { color: var(--text); }
.sec-checks span.ok svg { color: var(--violet); }
.sec-checks svg { width: 12px; height: 12px; stroke-width: 3; }
.sec-card { overflow: hidden; }
.sec-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text); }
.sec-ico svg { width: 18px; height: 18px; }
.sec-tip { display: flex; gap: 8px; align-items: center; margin: 8px 4px 0; font-size: 12.5px; color: var(--muted); }
.sec-tip svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.sec-switch-row { cursor: pointer; }

/* iOS-style switch, reusable anywhere: <span class="sg-switch"><input type=checkbox><i></i></span> */
.sg-switch { position: relative; flex: none; width: 51px; height: 31px; }
.sg-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sg-switch i {
  position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.16);
  transition: background .2s;
}
.sg-switch i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .22s cubic-bezier(.3,1.4,.5,1);
}
.sg-switch input:checked + i { background: var(--violet); }
.sg-switch input:checked + i::after { transform: translateX(20px); }
html.rtl .sg-switch i::after { left: auto; right: 2px; }
html.rtl .sg-switch input:checked + i::after { transform: translateX(-20px); }

/* panels */
.sec-panel + .sec-panel, .sec-card > .list-item + .list-item { border-top: 1px solid var(--line); }
.sec-panel > summary { list-style: none; cursor: pointer; }
.sec-panel > summary::-webkit-details-marker { display: none; }
.sec-panel > summary > svg:last-child { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
.sec-panel[open] > summary > svg:last-child { transform: rotate(90deg); }
html.rtl .sec-panel > summary > svg:last-child { transform: scaleX(-1); }
html.rtl .sec-panel[open] > summary > svg:last-child { transform: rotate(90deg); }
.sec-panel-body { padding: 4px 16px 16px; animation: secOpen .2s ease; }
@keyframes secOpen { from { opacity: 0; transform: translateY(-4px); } }

/* One switch style across the whole app: the older .switch (create, edit
   profile, studio) now looks and moves exactly like .sg-switch. */
.switch { width: 51px !important; height: 31px !important; }
.switch span {
  position: absolute; inset: 0; border-radius: 999px !important;
  background: var(--surface-3) !important; transition: background .2s;
}
.switch span::after {
  width: 27px !important; height: 27px !important; top: 2px !important; left: 2px !important;
  border-radius: 50%; background: #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .22s cubic-bezier(.3,1.4,.5,1) !important;
}
.switch input:checked + span { background: var(--violet) !important; }
.switch input:checked + span::after { transform: translateX(20px) !important; }
html.rtl .switch span::after { left: auto !important; right: 2px !important; }
html.rtl .switch input:checked + span::after { transform: translateX(-20px) !important; }
.sg-switch.sm { width: 42px; height: 25px; }
.sg-switch.sm i::after { width: 21px; height: 21px; }
.sg-switch.sm input:checked + i::after { transform: translateX(17px); }
.switch-row .sg-switch { margin-inline-start: 8px; }

/* 1.3.9.5 — light call screen: no blurred/mirrored avatar copy, no orbs, no animation (GIF avatars made calls heavy + hot) */
.call-aura { background: linear-gradient(180deg, #0b1220 0%, #0f2a52 55%, #0b1220 100%) !important; }
.call-aura img, .call-orb { display: none !important; animation: none !important; }
.call-overlay .call-person .avatar img, .call-overlay .call-person img { animation: none; }
/* 1.3.9.5 — calmer, smaller call buttons in ShotGram blue */
.call-overlay .call-btn { width: 54px !important; height: 54px !important; box-shadow: none !important; }
.call-overlay .call-btn.ghost { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.12); }
.call-overlay .call-btn.ghost.off, .call-overlay .call-btn.ghost.active { background: #2f8cff; color: #fff; border-color: transparent; }
.call-overlay .call-btn.decline { background: #e5484d; }
.call-overlay .call-btn.accept { background: #2f8cff; }
.call-overlay.incoming .call-btn.accept { animation: none !important; }
.call-btn#callScreen.active { background: #2f8cff !important; color: #fff !important; }