/* =====================================================================
   ShotGram 1.3.8 — calm pass (whole app).
   Owner's direction: one blue, small real-size controls, no glow, no
   rainbow gradients on buttons, tight spacing like the big apps.
   Only the DEFAULT look changes — the colour themes a person picked from
   the app-icon menu (html[data-theme=…]) are left as they chose them.
   (Phase 1 of ROADMAP.md folds this into the merged stylesheets.)
   ===================================================================== */

/* 1 · one blue instead of cyan → violet → pink */
html:not([data-theme]) {
  --cyan: #4fb3ff; --violet: #2f8cff; --magenta: #1f6fe5; --blue: #2f8cff;
  --cyan-rgb: 79, 179, 255; --violet-rgb: 47, 140, 255; --magenta-rgb: 31, 111, 229;
  --brand: linear-gradient(#2f8cff, #2f8cff);
  --accent: #2f8cff;
}

/* 2 · top bar: plain icons (no boxes), a small LIVE key */
.topbar .icon-btn { background: transparent !important; border-color: transparent !important; box-shadow: none !important; width: 34px; height: 34px; border-radius: 10px; }
.topbar .icon-btn svg { width: 22px; height: 22px; }
.topbar .icon-btn.is-current { background: rgba(255, 255, 255, .08) !important; }
.shotgram-live-pill {
  height: 28px !important; padding: 0 9px !important; gap: 5px !important; border-radius: 8px !important;
  border: 0 !important; background: rgba(255, 255, 255, .08) !important; font-size: 11px !important; font-weight: 700 !important;
}
.topbar .count-badge { background: #ff3b5c !important; }

/* 3 · bottom bar: no glowing pill behind the active tab; a small "+" */
.tab:not([data-view="create"])::before { display: none !important; }
.tab { color: #8a90a8; }
.tab.active { color: #fff; }
.tab svg { width: 24px; height: 24px; }
.tab.active .tab-avatar .avatar { box-shadow: 0 0 0 1.5px #0d0e1e, 0 0 0 3px #fff !important; }
.tabbar { box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important; }

/* 4 · buttons: solid, normal height, no glow */
.btn.primary, .follow-btn.primary {
  background: #2f8cff !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; color: #fff;
}
.btn { box-shadow: none; }
.pa-btn { height: 34px !important; min-width: 34px; padding: 0 12px; border-radius: 9px !important; font-size: 13.5px !important; font-weight: 600 !important; }
.pa-btn svg { width: 16px; height: 16px; }
.pa-icon { width: 34px !important; }
.pa-icon svg { width: 17px !important; height: 17px !important; }
.pa-primary { background: #2f8cff !important; box-shadow: none !important; }
.pa-glass { background: rgba(255, 255, 255, .09) !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pa-gift:not(.on) svg { animation: none !important; }
.pa-gift.on { background: rgba(47, 140, 255, .18) !important; box-shadow: none !important; }
.pa-gift.on svg { stroke: #9cc8ff !important; }

/* 5 · reels + the full-screen viewer: ONE even rhythm down the side.
      Every button is the same size slot (icon + a line for its number), so
      a button with no number (save, sound, more) no longer leaves a short
      gap and the column looks evenly spaced, like TikTok / Instagram. */
.reel-rail, html body .w-rail { display: flex !important; flex-direction: column; align-items: center; gap: 10px !important; }
.reel-rail .rail-btn, html body .w-btn {
  display: grid !important; grid-template-rows: 28px 15px; justify-items: center; align-items: center;
  width: 46px; height: 43px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; gap: 0 !important;
  font-size: 11.5px !important; font-weight: 600 !important; line-height: 15px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.reel-rail .rail-btn svg, html body .w-btn svg { width: 27px !important; height: 27px !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.reel-rail .rail-btn > span, html body .w-btn > span { display: block; min-height: 15px; line-height: 15px; }
.reel-rail .rail-btn:not(:has(> span))::after, html body .w-btn:not(:has(> span))::after { content: ''; height: 15px; }
.reel-rail .rail-author, html body .w-author { margin: 0 0 6px !important; }
.reel-rail .rail-author .avatar, html body .w-author .avatar { width: 42px !important; height: 42px !important; border-width: 1.5px !important; }
.reel-rail .rail-disc { margin-top: 4px !important; transform: scale(.8); transform-origin: 50% 0; }
.w-title { font-size: 14px !important; font-weight: 600 !important; }

/* 6 · profile cover without a photo: a quiet navy, not a purple/pink wash */
html:not([data-theme]) .cover.default, html:not([data-theme]) .edit-cover.default {
  background: linear-gradient(160deg, #13284a 0%, #0c1426 60%, #080b14 100%) !important;
}

/* 7 · a person with no photo: a plain grey silhouette (like iOS / Instagram),
      not a purple/pink square with a letter on it */
.avatar.placeholder:not([data-theme]) .avatar-initials { display: none; }

/* 8 · profile numbers: a thin grey line between them, no glowing rainbow */
.pf-b .pf-stats .stat + .stat::before { background: rgba(255, 255, 255, .1) !important; box-shadow: none !important; opacity: 1 !important; }

/* 9 · clans list: no gold glow round the first rows, quieter chips */
.clan-rank-row, .clan-rank-row.podium, .clan-rank-row.p1, .clan-rank-row.p2, .clan-rank-row.p3 {
  box-shadow: none !important; border-color: rgba(255, 255, 255, .08) !important;
}
.clan-rank-row.podium .clan-rank-no { font-size: 15px !important; font-weight: 700; color: #7fb6ff; }
.clan-rank.owner { background: rgba(47, 140, 255, .14) !important; color: #7fb6ff !important; border-color: transparent !important; }
.clan-policy, .clan-policy.open { background: rgba(255, 255, 255, .07) !important; color: rgba(255, 255, 255, .7) !important; border-color: transparent !important; }
.chip.go { background: rgba(47, 140, 255, .14) !important; color: #7fb6ff !important; border-color: transparent !important; }
.clan-card-open { height: 36px; border-radius: 9px !important; font-size: 14px; }

/* 10 · business label in chats: same quiet chip as everything else */
.bn-row-icon { background: rgba(47, 140, 255, .16) !important; color: #7fb6ff !important; box-shadow: none !important; }

/* 11 · kept exactly as before (owner's choice): the ShotGram word on top and
      the big "+" in the middle stay in the original logo gradient */
html:not([data-theme]) .wordmark { background: linear-gradient(135deg, #00d8ff 0%, #8b5cff 52%, #ff2ed1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html:not([data-theme]) .tab[data-view="create"]::before {
  background: linear-gradient(135deg, #00d8ff 0%, #8b5cff 52%, #ff2ed1 100%) !important;
  box-shadow: 0 6px 18px rgba(139, 92, 255, .38) !important;
}
html:not([data-theme]) .tab[data-view="create"].active::before {
  box-shadow: 0 6px 18px rgba(139, 92, 255, .38), 0 0 0 2px var(--chrome-bg), 0 0 0 3.5px rgba(255, 255, 255, .85) !important;
}
/* the opening screen (logo, word, loading bar) keeps the original colours too */
html:not([data-theme]) .app-splash {
  --cyan: #00d8ff; --violet: #8b5cff; --magenta: #ff2ed1;
  --cyan-rgb: 0, 216, 255; --violet-rgb: 139, 92, 255; --magenta-rgb: 255, 46, 209;
  --brand: linear-gradient(135deg, #00d8ff 0%, #8b5cff 52%, #ff2ed1 100%);
}

/* 12 · full-screen viewer (a post opened from a profile / feed) */
.watch-search { min-width: 0; height: 34px !important; border-radius: 10px !important; border: 0 !important; padding: 0 4px 0 10px !important; background: rgba(255, 255, 255, .12) !important; box-shadow: none !important; }
html[dir="rtl"] .watch-search { padding: 0 10px 0 4px !important; }
.watch-search svg { width: 15px !important; height: 15px !important; }
.watch-search input { font-size: 15px !important; }
.watch-search button { font-size: 13.5px !important; font-weight: 600 !important; padding: 0 10px !important; border-inline-start-color: rgba(255, 255, 255, .2) !important; }
.w-owner { gap: 14px !important; font-size: 13.5px !important; }
.w-owner svg { width: 16px !important; height: 16px !important; }
.w-insights { height: 30px !important; padding: 0 12px !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 600 !important; background: rgba(255, 255, 255, .12) !important; box-shadow: none !important; }
.w-insights svg { width: 14px !important; height: 14px !important; }

/* 13 · Reels side buttons, YouTube-Shorts style (1.3.8):
      clean outline icons with a name under each (number, or the word at 0),
      a soft shadow so they read on bright videos too, and the account
      picture at the bottom as a rounded square with a white frame. */
.reel-rail { gap: 14px !important; }
.reel-rail .rail-btn { grid-template-rows: 28px 16px !important; width: 56px !important; height: 46px !important; }
.reel-rail .rail-btn svg { width: 28px !important; height: 28px !important;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)) drop-shadow(0 0 6px rgba(0, 0, 0, .18)) !important; }
.reel-rail .rail-btn > span { font-size: 12px !important; font-weight: 600 !important; line-height: 16px !important; letter-spacing: -.01em;
  white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 8px rgba(0, 0, 0, .25) !important; }
.reel-rail .rail-btn.liked svg { color: #ff3b5c; }
.reel-rail .rail-btn.saved svg { color: #fff; }
.reel-rail .rail-btn[data-menu] { height: 30px !important; grid-template-rows: 28px !important; }
.reel-rail .rail-btn[data-menu]::after { display: none !important; }
.reel-rail .rail-btn:active svg { transform: scale(.88); transition: transform .08s ease; }
/* the account picture at the bottom: rounded square, works with any photo —
   bright, dark or a logo with a see-through background */
.reel-rail .rail-disc {
  width: 42px !important; height: 42px !important; padding: 0 !important; margin-top: 6px !important; transform: none !important;
  border-radius: 10px !important; overflow: hidden; animation: none !important;
  background: #1c2230 !important;                         /* behind see-through logos */
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, .45) !important;
}
.reel-rail .rail-disc .avatar { width: 100% !important; height: 100% !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
.reel-rail .rail-disc .avatar img { border-radius: 0 !important; object-fit: cover; }
html[lang="ar"] .reel-caption:not(.open)::after { content: ' المزيد'; }
/* readable on bright videos: a soft dark scrim at the bottom and down the side */
.reel-shade { z-index: 4 !important; inset: 0 !important; height: auto !important;   /* it sat UNDER the video (stage z 3) */
  background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .22) 26%, transparent 46%),
              linear-gradient(to left, rgba(0, 0, 0, .34), rgba(0, 0, 0, .12) 18%, transparent 32%) !important; }   /* the rail is on the right in both languages */
.reel-rail .rail-btn svg { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55)) drop-shadow(0 1px 3px rgba(0, 0, 0, .45)) !important; }
.reel-rail .rail-btn.liked > span { color: #fff !important; }
/* the author photo on top always has a frame, even a white photo on a white video */
.reel-rail .rail-author .avatar { box-shadow: 0 0 0 1.5px #fff, 0 2px 8px rgba(0, 0, 0, .45) !important; border: 0 !important; background-color: #1c2230; }
.reel-rail .rail-disc { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, .18), 0 3px 10px rgba(0, 0, 0, .5) !important; }

/* 14 · sound library: placeholder rows while loading, light covers */
.snd-skel { height: 56px; margin: 8px 2px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04)); background-size: 200% 100%; animation: sndSk 1.1s linear infinite; }
@keyframes sndSk { to { background-position: -200% 0; } }
.snd-cover.is-ph, .xp-sound-cover.is-ph { position: relative; overflow: hidden; background: #1c2230; display: grid; place-items: center; }
.snd-cover.is-ph .snd-cover-av, .xp-sound-cover.is-ph .snd-cover-av { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.snd-cover.is-ph .tile-ph, .xp-sound-cover.is-ph .tile-ph { position: absolute; inset: 0; }
.snd-cover img.tile-frame, .xp-sound-cover img.tile-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.snd-use { background: #2f8cff !important; padding: 6px 13px !important; border-radius: 8px !important; font-weight: 600 !important; }

/* 1.3.9.5 — tab icon spins while it refreshes */
.tab svg.tab-spin { animation: tab-spin .8s linear infinite; }
@keyframes tab-spin { to { transform: rotate(360deg); } }

/* 1.3.9.5 — photo carousels: the picture never drags up/down or diagonally; only left/right swipes.
   Also in the full-screen viewer, and no image "grab" ghost / long-press menu while swiping. */
.media-wrap .slides, .w-photos { overflow-y: hidden !important; overscroll-behavior: contain; }
.media-wrap .slides .media-slide-stage, .w-photo { overflow: hidden; }
.media-wrap .slides img, .w-photos img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: auto; touch-action: pan-x pan-y; }

/* 1.3.9.5 — "Find related content" bar: never wider than the screen (iPhone) and a neat width on a computer */
.watch-top { box-sizing: border-box; max-width: 100%; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
.watch-search { min-width: 0; max-width: 100%; height: 36px; border-width: 1px; padding: 0 4px 0 10px; box-sizing: border-box; overflow: hidden; }
.watch-search input { font-size: 14px; text-overflow: ellipsis; }
.watch-search button { flex: none; font-size: 13px; padding: 0 10px; }
@media (min-width: 900px) {
  .watch-top { left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); }
}