/* =========================================================================
   StoryBoost — assets/css/storyboost.css
   Loaded after Sngine's own theme CSS (via the footer snippet), so these
   rules naturally win the cascade without needing to touch any core file.
   ========================================================================= */

:root {
  --sb-primary: #7b2ff7;
  --sb-primary-2: #f107a3;
  --sb-gradient: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
  --sb-radius: 16px;
  --sb-dark: #121214;
  /* overridden inline by storyboost.js on boot from Settings → "Story
     width"/"Story height"; these are just the fallback until that runs */
  --sb-story-width: 140px;
  --sb-story-height: 240px;
}

/* -------------------------------------------------------------------------
   1. Modern redesign of the native timeline (story bubbles / avatar ring)
   ------------------------------------------------------------------------- */

/* Keep the theme's own tall full-photo "sngine" card (that's the actual
   requested look), remove the plain text header above it, and layer a
   small avatar+ring+badge chip and a legible name/time overlay on top. */
/* modern_v3's markup adds a "stories-card" class we can key off directly;
   default/dimaon2 don't add that class to their own copy of this card, so
   also match structurally (any card wrapping a .stories-wrapper) via
   :has() so the same "Stories" label + native delete/reply icon row gets
   hidden everywhere, not just on modern_v3. The full-screen story viewer
   still exposes its own delete button (storyboost.js injects that directly,
   theme-independent), so removing this homepage-level copy doesn't remove
   the feature, just the redundant/inconsistently-styled entry point. */
.stories-card .card-header,
.card:has(> .stories-wrapper) .card-header,
.card:has(> .card-body > .stories-wrapper) .card-header {
  display: none !important;
}

.stories-card,
.card:has(> .stories-wrapper),
.card:has(> .card-body > .stories-wrapper) {
  position: relative;
}

/* the theme's own 24px bottom padding on the wrapper left a visible strip
   of empty card background below the tiles — tighten it up */
.stories-wrapper {
  padding-bottom: 6px !important;
}

/* the replies-inbox shortcut this plugin used to inject next to the native
   delete button (or, on themes with no native delete button at all, in its
   own small floating toolbar) — hidden site-wide so every theme matches the
   clean, icon-free look of the reference (modern_v3) design. Replies are
   still readable inside the story viewer itself. */
.sb-inbox-btn,
.sb-story-toolbar {
  display: none !important;
}

/* dimaon2 ships its own native "N stories" count badge (class "story-count",
   top-right of the bubble) — StoryBoost already shows an equivalent count on
   its own avatar chip (.sb-story-count, bottom section below), so the native
   one is a redundant duplicate on that theme specifically. Hiding it here is
   harmless on themes that don't have it at all. */
/* dimaon2 sets this via an inline <style id="..."> block with selector
   "#stories .story .story-count" (specificity 1,2,0) — match or exceed
   that specificity, a bare ".story-count" loses the specificity tie. */
.story-count,
#stories .story .story-count,
#stories.stories .story .story-count {
  display: none !important;
}

/* Force every theme's "Create story" tile to the exact same size as an
   actual story bubble — some themes' own base CSS gives .add-story a
   different intrinsic size than .story (which gets its size from the
   forced .item-preview rule below), leaving a lopsided first tile. High
   specificity (#stories ID) so it reliably wins over each theme's own
   built-in .add-story sizing.

   Width and height both come from admin-configurable CSS variables
   (Settings → "Story width" / "Story height", injected by storyboost.js):
   default/dimaon2 natively ship .story/.add-story at 110x260, and
   modern_v3 hardcodes 160x290 — without this override every theme renders
   a different bubble size. 140x240 is the shared default target. */
#stories.stories .story,
#stories.stories .add-story {
  width: var(--sb-story-width, 140px) !important;
  height: var(--sb-story-height, 240px) !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  /* .item-link > .info is positioned absolute (below) and needs a sized
     ancestor to anchor to. Neither .story nor .item-link has
     position:relative in ANY theme's own native CSS (only .add-story
     happens to) — without this, .info's containing block search skips
     right past the bubble and lands on some much wider ancestor further
     up the tree, so the username label renders at that ancestor's full
     width instead of the ~200px bubble, bleeding across the whole row. */
  position: relative !important;
}

/* Hide the browser's native horizontal scrollbar on the stories row — the
   "next" arrow button (.sb-stories-next, injected by storyboost.js only
   when the row actually overflows) is the intended way to advance instead.
   The row is still scrollable by touch/trackpad, just without the visible
   scrollbar track. */
.stories-wrapper {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.stories-wrapper::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
}

.sb-stories-next,
.sb-stories-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #1c1d29;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.sb-stories-next { right: 10px; }
.sb-stories-prev { left: 10px; }

/* Zuck.js's own base carousel CSS and the theme's "sngine" skin both set
   overlapping rules on .item-preview/img from different files, competing
   on specificity — force the values explicitly instead of trusting that
   cross-file cascade fight, which is what was leaving the photo invisible
   despite a perfectly valid <img src>.

   Root cause (thanks to Chrome DevTools' AI panel for spotting this one):
   .item-link is a flex item of .story with no explicit width, so it
   normally shrinks to fit its content — but that content's <img> is
   position:absolute (pulled out of flow), leaving nothing to size
   against, so .item-link collapses to 0px and item-preview's
   width:100% just resolves to 100% of that 0. Give .item-link an
   explicit width to break the circular shrink-to-fit dependency. */
.stories.sngine.carousel .story > .item-link,
#stories.stories .story > .item-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.stories.sngine.carousel .story > .item-link > .item-preview,
#stories.stories .story > .item-link > .item-preview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.stories.sngine.carousel .story > .item-link > .item-preview > img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
}

/* restore + darken the bottom gradient so the name/time overlay reads
   clearly, and so the corner chip reads clearly against the photo too */
.stories.sngine .story > a > .item-preview::before {
  display: block !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .78) 100%) !important;
}

.stories.sngine .story > .item-link > .info {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 2;
  margin: 0 !important;
  text-align: left;
}

.stories.sngine .story > .item-link > .info .name {
  display: block !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  white-space: normal;
}

.stories.sngine .story > .item-link > .info .time {
  display: block !important;
  color: rgba(255, 255, 255, .8) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  margin-top: 1px !important;
}

/* small circular avatar chip, top-left corner over the photo — the ring
   shows whether this user's story is unseen (gradient) or seen (gray) */
.sb-story-avatar-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 2px;
  background: var(--sb-gradient);
}

.sb-story-avatar-chip.seen {
  background: #d8d8d8;
}

.sb-story-avatar-chip img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}

/* "Create story" tile — plain gradient card with a centered + button and
   title/subtitle instead of the theme's bare icon-only version.
   inline-flex (not flex) — the carousel keeps everything on one row via
   white-space:nowrap on its container, which only stops *inline* boxes
   from wrapping; a block-level flex would force its own line break. */
.add-story {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  gap: 4px;
  background: linear-gradient(160deg, #ffe3f1, #e3e0ff) !important;
}

.add-story .img {
  display: none !important;
}

.add-story::before {
  display: none !important;
}

.add-story .add {
  /* theme's own rule still has left:50%/transform:translateX(-50%) from
     when this button was position:absolute — transform still applies
     regardless of position, so it was shifting the button off the center
     the parent flexbox already gives it. Clear both explicitly. */
  position: static !important;
  left: auto !important;
  transform: none !important;
  width: 56px !important;
  height: 56px !important;
  margin-bottom: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
  /* The theme's own CSS only ever centered the "+" icon by accident — its
     padding + inline-block/text-align happened to roughly work at the tiny
     native button size, but at our forced 56px box the icon sits visibly
     off-center (high and to one side). Flexbox centers it exactly
     regardless of the icon's own box model or the theme's padding. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.add-story .add .svg-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sb-add-story-text {
  /* #stories has white-space:nowrap for the carousel's own row-scrolling
     behavior, which inherits down to this text and — combined with
     overflow:hidden + centered text — clipped both ends symmetrically */
  white-space: normal;
  max-width: 124px;
}

.sb-add-story-text strong {
  display: block;
  font-size: 14px;
  color: #1c1d29;
}

.sb-add-story-text span {
  display: block;
  font-size: 12px;
  color: #70717c;
  margin-top: 2px;
}

.sb-story-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ff3040;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  z-index: 4;
}

#stories.stories .story .info .name {
  font-weight: 600;
  font-size: 12.5px;
}

.sb-inbox-btn {
  background: #f5f6fa !important;
  border: none !important;
  margin-inline-end: 6px;
  font-size: 14px;
  line-height: 1;
}

/* fallback toolbar for themes with no native delete-story button to anchor to */
.sb-story-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 0 8px;
}

.sb-reply-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }

.sb-reply-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f5f6fa;
  border-radius: 12px;
  padding: 10px;
}

.sb-reply-row.sb-reply-unread { background: #f3ecff; }

.sb-reply-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.sb-reply-body { flex: 1; min-width: 0; font-size: 13px; }
.sb-reply-body strong { display: block; margin-bottom: 2px; }
.sb-reply-body p { margin: 0; color: #444; word-break: break-word; }

.sb-reply-delete {
  border: none;
  background: none;
  color: #8a8b9a;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   2. Modern redesign of the Zuck.js story viewer
   ------------------------------------------------------------------------- */

#zuck-modal .story-viewer {
  background: var(--sb-dark) !important;
}

#zuck-modal .story-viewer .head {
  padding: 14px 14px 0 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent) !important;
}

#zuck-modal .story-viewer .head .left .profilePhoto {
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

#zuck-modal .story-viewer .head .left .info .name {
  color: #fff !important;
  font-weight: 700 !important;
}

#zuck-modal .story-viewer .slides-pointers .wrap span {
  border-radius: 3px !important;
  background: rgba(255, 255, 255, .35) !important;
}

#zuck-modal .story-viewer .slides-pointers .wrap span b {
  background: #fff !important;
  border-radius: 3px !important;
}

#zuck-modal .story-viewer .item .media {
  border-radius: 0 !important;
}

/* Zuck's own responsive CSS hides the native profile-photo/close(X) header
   below a 1024px viewport (assumes a swipe-down-to-close gesture instead) —
   force it visible at every size so it always shows on the photo. */
#zuck-modal-content .story-viewer .head .right .close {
  display: inline-block !important;
}

@media (min-width: 720px) {
  #zuck-modal .story-viewer {
    border-radius: var(--sb-radius) !important;
    overflow: hidden;
  }
}

/* -------------------------------------------------------------------------
   3. Reaction bar / reply bar / owner analytics bar (sit at bottom of viewer)
   ------------------------------------------------------------------------- */

.sb-viewer-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
}

/* Story-viewer prev/next arrows — visible equivalent of Zuck's own
   tap-left/tap-right navigation zones. */
.sb-viewer-prev,
.sb-viewer-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 45 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(0, 0, 0, .35) !important;
  color: #fff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background .15s ease !important;
}
.sb-viewer-prev:hover,
.sb-viewer-next:hover {
  background: rgba(0, 0, 0, .55) !important;
}
/* left/right deliberately NOT !important — renderViewerNavArrows() sets
   these inline per-frame to hug the actual visible media box (the slider
   itself spans the full modal width as one big tap zone), and an
   !important stylesheet rule would permanently pin these to the modal
   edges instead, overriding that. These are just the pre-JS fallback. */
.sb-viewer-prev { left: 10px; }
.sb-viewer-next { right: 10px; }
@media (max-width: 640px) {
  .sb-viewer-prev,
  .sb-viewer-next {
    width: 34px !important;
    height: 34px !important;
    font-size: 22px !important;
  }
}

.sb-reaction-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.sb-emoji-btn {
  border: none;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  font-size: 18px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.sb-emoji-btn.active {
  background: rgba(255, 255, 255, .28);
  transform: scale(1.15);
}

.sb-emoji-btn.sb-pop {
  animation: sbPop .3s ease;
}

@keyframes sbPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1.15); }
}

.sb-reaction-fly {
  position: absolute;
  bottom: 90px;
  font-size: 34px;
  z-index: 41;
  pointer-events: none;
  animation: sbReactionFly 1.1s ease-out forwards;
}

@keyframes sbReactionFly {
  0% { opacity: 0; transform: translateY(0) scale(.5); }
  15% { opacity: 1; transform: translateY(-20px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-220px) scale(1); }
}

.sb-reply-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  box-sizing: border-box;
}

.sb-reply-input {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
}

.sb-reply-input::placeholder { color: rgba(255, 255, 255, .7); }

.sb-reply-send {
  border: none;
  background: var(--sb-gradient);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.sb-owner-bar {
  display: flex;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.sb-owner-stats {
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

/* Sits as a real sibling of Zuck's own native .close button inside
   .head .right, so it lines up next to it in the same row instead of
   floating separately below. Both shrunk to match each other. */
.sb-owner-delete-btn {
  float: right;
  width: 30px;
  height: 30px;
  margin: 9px 6px 0 0;
  border-radius: 50%;
  border: none;
  background: rgba(220, 38, 38, .85);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#zuck-modal-content .story-viewer .head .right .close {
  width: 30px !important;
  height: 30px !important;
  font-size: 24px !important;
  line-height: 30px !important;
}

.sb-owner-delete-btn {
  background: rgba(220, 53, 69, .85);
}

.sb-analytics-block { margin-bottom: 16px; }
.sb-analytics-block strong { display: block; margin-bottom: 8px; font-size: 13px; color: #1c1d29; }

.sb-reaction-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-reaction-chip { background: #f5f6fa; border-radius: 999px; padding: 6px 12px; font-size: 13px; }

.sb-viewer-list { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; }
.sb-viewer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
}
.sb-viewer-row:last-child { border-bottom: none; }
.sb-viewer-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.sb-empty-inline { color: #8a8b9a; font-size: 13px; }

.sb-insights-stats { font-size: 13px; color: #55565f; margin-bottom: 16px; }

.sb-insight-body { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.sb-insight-name { font-weight: 600; flex-shrink: 0; }
.sb-insight-reaction { font-size: 15px; flex-shrink: 0; }
.sb-insight-sep { color: #ccc; flex-shrink: 0; }

.sb-insight-comment {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  color: #70717c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   4. Music pill
   ------------------------------------------------------------------------- */

.sb-music-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  padding: 4px 12px 4px 8px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  max-width: 160px;
}

.sb-music-note {
  display: inline-block;
  animation: sbSpin 2.5s linear infinite;
}

.sb-music-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes sbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------
   6. Profile highlights strip
   ------------------------------------------------------------------------- */

.sb-highlights-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 14px 4px;
  margin-bottom: 6px;
}

.sb-highlight-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  width: 68px;
}

.sb-highlight-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #ddd, #bbb);
  display: block;
}

.sb-highlight-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
}

.sb-highlight-name {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   7. Highlight viewer (lightweight standalone lightbox)
   ------------------------------------------------------------------------- */

.sb-hl-viewer {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  opacity: 0;
  transition: opacity .25s ease;
}

.sb-hl-viewer.open { opacity: 1; }

.sb-hl-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-hl-stage img, .sb-hl-stage video {
  max-width: 100%;
  max-height: 100%;
}

.sb-hl-progress {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.sb-hl-seg {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
}

.sb-hl-seg b {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
}

.sb-hl-seg.done b { width: 100%; animation: none !important; }

@keyframes sbHlBar { from { width: 0; } to { width: 100%; } }

.sb-hl-close {
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   8. Shared bottom-sheet modal (replies inbox / highlight picker)
   ------------------------------------------------------------------------- */

.sb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  /* was 99998 — one below #zuck-modal's 100000, so this whole sheet
     (insights, replies inbox, highlight picker) rendered
     behind the story viewer instead of over it */
  z-index: 100025;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
}

.sb-overlay.open { opacity: 1; }

.sb-sheet {
  background: #fff;
  width: 100%;
  max-width: 480px;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform .2s ease;
}

.sb-overlay.open .sb-sheet { transform: translateY(0); }

@media (min-width: 560px) {
  .sb-overlay { align-items: center; }
  .sb-sheet { border-radius: var(--sb-radius); }
}

.sb-sheet-title {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 14px;
  color: #1c1d29;
}

.sb-empty { color: #8a8b9a; text-align: center; padding: 20px 0; }

.sb-thumb-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.sb-thumb {
  width: 64px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  background: #eee;
}

.sb-thumb img, .sb-thumb video { width: 100%; height: 100%; object-fit: cover; }

.sb-thumb.selected { border-color: var(--sb-primary); }

.sb-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sb-action-btn {
  flex: 1;
  min-width: 120px;
  border: none;
  background: #f5f6fa;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}

.sb-input {
  width: 100%;
  border: 1px solid #e7e8ef;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.sb-btn-primary {
  border: none;
  background: var(--sb-gradient);
  color: #fff;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sb-full { width: 100%; }

.sb-track-list { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; }

.sb-track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f5f6fa;
  border-radius: 12px;
  padding: 8px 10px;
}

.sb-track-play, .sb-track-use {
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  padding: 8px 12px;
}

.sb-track-play { background: #fff; }
.sb-track-use { background: var(--sb-primary); color: #fff; }

.sb-track-meta { flex: 1; display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.sb-track-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-track-meta span { color: #8a8b9a; font-size: 11px; }

.sb-highlight-row { display: flex; gap: 12px; flex-wrap: wrap; }

.sb-highlight-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  border: none;
  background: none;
  cursor: pointer;
}

.sb-highlight-pick img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.sb-highlight-pick span { font-size: 11px; font-weight: 600; text-align: center; }

.sb-highlight-new .sb-plus {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f5f6fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--sb-primary);
}

/* -------------------------------------------------------------------------
   9. Toast
   ------------------------------------------------------------------------- */

.sb-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1c1d29;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  z-index: 999999;
  opacity: 0;
  transition: all .25s ease;
  max-width: 90vw;
  text-align: center;
}

.sb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* -------------------------------------------------------------------------
   10. Confirm-dialog stacking fix
   The theme's shared confirm dialog (.modal) sits at z-index 99999 — one
   below #zuck-modal's 100000, so it silently rendered behind the story
   viewer instead of over it. Bump both the dialog and its backdrop above
   zuck's own top layer (100020) — backdrop must stay *below* the dialog
   (same rule Bootstrap itself uses) or it paints over the dialog and
   swallows every click, since .modal-backdrop is appended after .modal
   in the DOM and equal z-index falls back to DOM order.
   ------------------------------------------------------------------------- */

.modal {
  z-index: 100031 !important;
}

.modal-backdrop {
  z-index: 100030 !important;
}

/* -------------------------------------------------------------------------
   11. Hide Zuck's native "Visit Link" tip
   Replaced by our own reply bar (message-the-owner box) for viewers.
   ------------------------------------------------------------------------- */

#zuck-modal-content .story-viewer .slides .item .tip.link {
  display: none !important;
}

/* -------------------------------------------------------------------------
   12. "Create New Story" popup redesign
   ------------------------------------------------------------------------- */

.sb-create-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-create-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sb-gradient);
  flex-shrink: 0;
}

.sb-create-header-icon svg { width: 18px; height: 18px; fill: #fff; }

.sb-ads-row {
  background: #fff6ea;
  border: 1px solid #ffe6c2;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.sb-message-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.sb-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 2px;
}

.sb-message-group { flex: 1; min-width: 0; margin-bottom: 0; }

/* Wraps the avatar+textarea row plus the background-color picker, so
   clicking a color can recolor the whole card (textarea included) — same
   idea as the dimaon2 theme's own text-story compose card. */
.sb-compose-card {
  border: 1.5px solid #e4e6eb;
  border-radius: var(--sb-radius);
  padding: 14px 16px 10px;
  margin-bottom: 16px;
  transition: background .15s ease;
}

.sb-compose-card .sb-message-row { margin-bottom: 10px; }

.sb-compose-card textarea {
  background: transparent !important;
  transition: color .15s ease;
}

.sb-color-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.sb-color-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}

.sb-color-circle:hover { transform: scale(1.15); }

.sb-color-circle.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--sb-primary);
}

.sb-char-count {
  margin-left: auto;
  font-size: 11px;
  color: #b4b5c2;
  white-space: nowrap;
}

.sb-upload-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.sb-upload-box { flex: 1; margin-bottom: 0; }

.sb-upload-box .attachments ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* once a file is actually uploaded, the native uploader inserts its own
   preview <li> (not our .sb-upload-tile) at whatever size the theme's
   default attachment widget uses — cap it explicitly so it can't render
   at native image size and blow out the layout */
.sb-upload-box .attachments ul li:not(.sb-upload-tile) {
  width: 90px !important;
  height: 90px !important;
  max-width: 90px !important;
  max-height: 90px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  flex-shrink: 0;
}

.sb-upload-box .attachments ul li:not(.sb-upload-tile) img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover;
  border-radius: 14px !important;
}

.sb-upload-tile {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  /* the theme's own core rule `.attachments li { width: 96px }` (set at the
     768px breakpoint) has higher specificity (class+type) than a bare
     `.sb-upload-tile` class selector, so it was winning over an
     un-!important width and shrinking the tile to 96px inside its
     ~227px .sb-upload-box container — force it the same way height is
     forced below */
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  /* fixed height, not min-height — the photo/video icons differ slightly
     in size, which was enough to make the two boxes stretch to different
     heights when only a minimum was enforced */
  height: 130px !important;
  box-sizing: border-box !important;
  /* the theme's own native .attachments li.add rule sets padding/color/
     font-size meant for its old "big plus sign in the corner" look —
     override all of it, not just add on top of it */
  padding: 0 !important;
  color: #8a8b9a !important;
  font-size: inherit !important;
  border: 2px dashed #dcdfe6 !important;
  border-radius: 16px !important;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}

.sb-upload-tile:hover { border-color: var(--sb-primary); background: #faf8ff; }

/* the uploader's actual click target is a wrapper div core JS injects
   around the icon at runtime (class "x-uploader", not to be confused
   with our own "js_x-uploader" icon class) — make sure it never breaks
   out of the tile's centered flex layout regardless of its own sizing */
.sb-upload-tile .x-uploader {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.sb-upload-tile .js_x-uploader {
  position: relative;
  z-index: 1;
  font-size: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0f1f6;
  color: #70717c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  pointer-events: none;
}

.sb-upload-tile strong { font-size: 13px; color: #1c1d29 !important; font-weight: 700; }
.sb-upload-tile span { font-size: 11.5px; color: #8a8b9a !important; }

.sb-music-dropdown-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  border: 1px solid #e2e2ea;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1c1d29;
}

.sb-music-dropdown-summary::-webkit-details-marker { display: none; }
.sb-music-dropdown-summary::after { content: '▾'; margin-left: auto; color: #8a8b9a; }
.sb-music-dropdown[open] .sb-music-dropdown-summary::after { content: '▴'; }

.sb-music-selected-label { font-weight: 700; color: var(--sb-primary); }

.sb-music-picker {
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e2e2ea;
  border-radius: 12px;
}

.sb-music-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f5;
}

.sb-music-picker-row:last-child { border-bottom: none; }
.sb-music-picker-row.active { background: #faf5ff; }

.sb-music-picker-play {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #f0f1f6;
  color: #1c1d29;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-music-picker-play.sb-music-picker-none {
  background: none;
  color: #ccc;
  cursor: default;
}

.sb-music-picker-title {
  font-size: 13.5px;
  color: #1c1d29;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-music-picker-row.active .sb-music-picker-title { font-weight: 700; color: var(--sb-primary); }

/* "Show more" — tracks beyond the first page (storyboost.js reveals 5 at a
   time via .sb-music-track-row) are display:none until this is clicked. */
.sb-music-more {
  display: none;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  color: var(--sb-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.sb-music-more:hover { background: #faf5ff; }

.sb-create-footer {
  display: flex;
  gap: 10px;
}

.sb-cancel-btn {
  flex: 1;
  background: #f0f1f6 !important;
  border: none !important;
  color: #1c1d29 !important;
  border-radius: 999px !important;
  font-weight: 600;
}

.sb-publish-btn {
  flex: 2;
  background: var(--sb-gradient) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700;
}