/* ShotGram v1.3.6 — Reels & viewer look the same, sound page, editor tools. */

/* =============================== editor: Trim + Cover (TikTok) =============================== */
.tt-trim, .tt-cover { padding: 0 14px 6px; color: #fff; }
.tt-trim-read { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.tt-trim-read b { font-size: 15px; color: #fff; font-weight: 800; }
.tt-strip { position: relative; height: 56px; border-radius: 10px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.tt-frames { position: absolute; inset: 0; display: flex; border-radius: 10px; overflow: hidden; background: #1c1c22; }
.tt-frames i { flex: 1; background: #2a2a33 center/cover no-repeat; border-inline-end: 1px solid rgba(0,0,0,.35); }
.tt-frames i:last-child { border: 0; }
.tt-dim { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.62); pointer-events: none; }
.tt-dim.l { left: 0; border-radius: 10px 0 0 10px; }
.tt-dim.r { right: 0; border-radius: 0 10px 10px 0; }
.tt-win { position: absolute; top: -3px; bottom: -3px; border: 3px solid #fff; border-inline-width: 0; border-radius: 6px; pointer-events: none; }
.tt-h { position: absolute; top: -3px; bottom: -3px; width: 16px; background: #fff; display: grid; place-items: center; pointer-events: auto; }
.tt-h::after { content: ''; width: 3px; height: 18px; border-radius: 2px; background: #111; }
.tt-h.l { left: -14px; border-radius: 6px 0 0 6px; }
.tt-h.r { right: -14px; border-radius: 0 6px 6px 0; }
.tt-play { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.6); pointer-events: none; }
.tt-speed { display: flex; justify-content: center; gap: 8px; margin: 14px 0 8px; }
.tt-speed button { min-width: 54px; height: 32px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 700; font-size: 13px; }
.tt-speed button.on { background: #fff; color: #000; }
.tt-mute { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; font-size: 14px; }
.tt-mute > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.tt-mute svg { width: 18px; height: 18px; }
.tt-cover-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 4px 0 6px; }
.tt-cover-strip button { aspect-ratio: 9 / 14; border: 0; padding: 0; border-radius: 6px; background: #2a2a33 center/cover no-repeat; outline: 2px solid transparent; outline-offset: 1px; }
.tt-cover-strip button.on { outline-color: #fff; transform: scale(1.06); }
.ig-toolbar { overflow-x: auto; scrollbar-width: none; justify-content: space-between; gap: 2px; }
.ig-toolbar::-webkit-scrollbar { display: none; }
.ig-toolbar button { min-width: 56px; flex: 1 0 auto; }

/* =============================== the old studio window: full screen on phones =============================== */
@media (max-width: 760px) {
  html body .modal-backdrop:has(> .modal .studio) { padding: 0 !important; align-items: stretch !important; }
  html body .modal-backdrop .modal:has(.studio) {
    width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important;
    border-radius: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  html body .modal .studio { flex: 1; min-height: 0; display: flex !important; flex-direction: column !important; height: 100% !important; max-height: none !important;
    padding: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 10px) 12px calc(var(--sa-b, env(safe-area-inset-bottom, 0px)) + 10px) !important; overflow: hidden !important; }
  html body .modal .studio .studio-head { flex: none; padding: 0 40px 8px 0 !important; margin: 0 !important; }
  html body .modal .studio .studio-head h2 { font-size: 17px !important; margin: 0 !important; }
  html body .modal .studio .studio-head .creator-kicker, html body .modal .studio .studio-meta { display: none !important; }
  html body .modal .studio .studio-body { flex: 1; min-height: 0; display: flex !important; flex-direction: column !important; gap: 8px !important; overflow: hidden !important; }
  html body .modal .studio .studio-stage-wrap { flex: none; }
  html body .modal .studio .studio-stage { max-height: 36vh !important; margin: 0 auto !important; }
  html body .modal .studio .studio-panel { flex: 1; min-height: 0; display: flex !important; flex-direction: column !important; }
  html body .modal .studio .studio-tabs { flex: none; }
  html body .modal .studio .studio-tab-body { flex: 1; min-height: 0; overflow-y: auto !important; -webkit-overflow-scrolling: touch; max-height: none !important; padding-bottom: 12px; }
  html body .modal .studio .studio-actions { flex: none; margin: 0 !important; padding-top: 8px !important; }
}

/* =============================== Reels + viewer: the same look =============================== */
.reel-rail .rail-author { position: relative; border: 0; background: none; padding: 0; margin: 0 0 10px; display: grid; place-items: center; }
.reel-rail .rail-author .avatar { width: 44px !important; height: 44px !important; border: 2px solid #fff; border-radius: 50%; }
.reel-rail .rail-follow, .w-follow {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: #fe2c55; color: #fff;
}
.reel-rail .rail-follow svg, .w-follow svg { width: 12px; height: 12px; stroke-width: 3; }
.w-stage .w-blur { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(24px) brightness(.55); }
html body .w-stage .w-video.is-cover { width: 100%; height: 100%; object-fit: cover; }
html body .w-stage .w-video.is-wide { position: relative; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
/* the viewer's rail: same sizes as Reels */
html body .w-rail { gap: 14px; right: 8px; }
html body .w-btn svg { width: 30px; height: 30px; }
html body .w-btn { font-size: 12px; }
html body .w-author .avatar { width: 44px !important; height: 44px !important; }

/* =============================== Explore: trending stories =============================== */
.xp-stories { margin: 4px 0 10px; }
.xp-stories .xp-block-head { padding: 0 14px; margin-bottom: 8px; }
.xp-story-row { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 14px 6px; scrollbar-width: none;
  overscroll-behavior-x: contain; touch-action: pan-x; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.xp-story-row::-webkit-scrollbar { display: none; }
.xp-story { flex: 0 0 auto; width: 72px; display: grid; justify-items: center; gap: 5px; border: 0; background: none; padding: 0; color: inherit; scroll-snap-align: start; cursor: pointer; }
.xp-story-name { max-width: 72px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =============================== editor: the sound under the video =============================== */
html body .ig-edit-meta .ig-round.ig-speaker { inset-inline-end: 54px; }
.ig-sound-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px 8px; min-height: 0; }
.ig-sound-bar:empty { display: none; }
.ig-sound-bar button { display: inline-flex; align-items: center; gap: 6px; height: 32px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 0 12px; }
.ig-sound-bar svg { width: 16px; height: 16px; flex: none; }
.ig-sound-bar .ig-snd-main { min-width: 0; max-width: 62%; }
.ig-sound-bar .ig-snd-main.add { background: rgba(255,255,255,.12); max-width: none; }
.ig-sound-bar .ig-snd-main span { min-width: 0; }
.ig-sound-bar .ig-snd-chip { font-variant-numeric: tabular-nums; }
.ig-sound-bar .ig-snd-x { width: 32px; padding: 0; justify-content: center; }

/* v1.3.6 — Reels: slow network → a clear "Try again" (no endless spinner) */
.reel-retry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 40vh; padding: 30px 20px; text-align: center; color: rgba(255,255,255,.75); scroll-snap-align: start; }
.reels > .reel-retry:only-child { height: 100%; }

/* v1.3.6 — photo posts with a sound */
.media-wrap[data-photo-sound] { position: relative; }
.media-wrap > .pc-photo-sound { position: absolute; z-index: 4; right: 10px; bottom: 10px; }
.pc-photo-sound-name {
  position: absolute; z-index: 4; left: 10px; bottom: 12px; max-width: calc(100% - 70px);
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pc-photo-sound-name svg { width: 13px; height: 13px; flex: none; }
.pc-photo-sound-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }