/* ------------------------------------------------------------------ */
/* Stories — bar, viewer, and the heart/like button.                    */
/* Kept in its own file (loaded after styles.css) so this feature can   */
/* keep growing — reactions, replies, whatever comes next — without     */
/* the main stylesheet getting any bigger.                              */
/* ------------------------------------------------------------------ */

/* ---- Stories bar --------------------------------------------------- */
.stories-bar { display: flex; gap: 14px; margin-bottom: 18px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.stories-bar::-webkit-scrollbar { display: none; }

.story-ring { background: none; border: none; cursor: pointer; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 6px; width: 66px; }
.story-ring-avatar-wrap { align-items: center; border-radius: 50%; display: flex; height: 60px; justify-content: center; position: relative; width: 60px; }
.story-ring-avatar { align-items: center; background: #eef0f7; border: 2.5px solid #fff; border-radius: 50%; color: #6a7284; display: flex; font-size: 15px; font-weight: 800; height: 56px; justify-content: center; overflow: hidden; position: relative; width: 56px; z-index: 1; }
.story-ring-avatar img { height: 100%; object-fit: cover; width: 100%; }

/* Active story = a soft rotating gradient ring behind the avatar, the
   familiar "there's something new here" cue, rendered on its own
   pseudo-element rather than an outline so it can be a true gradient. */
.story-ring.has-story .story-ring-avatar-wrap::before,
.story-ring-add.has-story .story-ring-avatar-wrap::before {
  background: conic-gradient(from 0deg, #ff8a5c, #d1547e, #8b5cf6, #6a5cf0, #ff8a5c);
  border-radius: 50%; content: ''; inset: -3px; position: absolute;
}
.story-ring:not(.has-story) .story-ring-avatar-wrap { box-shadow: 0 0 0 2.5px #e6e9f0 inset; }
/* Every story in the ring already viewed -> the same muted ring as "no
   story at all", so an unseen ring is the one thing that visually pops
   in the bar (the exact convention every big app's story tray uses). */
.story-ring.is-seen .story-ring-avatar-wrap::before { display: none; }
.story-ring.is-seen .story-ring-avatar-wrap { box-shadow: 0 0 0 2.5px #e6e9f0 inset; }
body[data-theme="dark"] .story-ring.is-seen .story-ring-avatar-wrap { box-shadow: 0 0 0 2.5px rgba(255,255,255,.09) inset; }

.story-ring small { color: #4b5568; font-size: 9.5px; font-weight: 700; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-ring-add .story-ring-avatar-wrap { position: relative; }
.story-ring-plus { align-items: center; background: linear-gradient(120deg, #6a5cf0, #8b5cf6); border: 2.5px solid #fff; border-radius: 50%; bottom: -2px; box-shadow: 0 3px 8px rgba(107,92,240,.4); color: #fff; display: flex; font-size: 14px; font-weight: 800; height: 20px; justify-content: center; position: absolute; right: -2px; width: 20px; z-index: 2; }

body[data-theme="dark"] .story-ring-avatar { background: #171c30; border-color: #0b0f1e; }
body[data-theme="dark"] .story-ring:not(.has-story) .story-ring-avatar-wrap { box-shadow: 0 0 0 2.5px rgba(255,255,255,.09) inset; }
body[data-theme="dark"] .story-ring small { color: #c7cbdb; }
body[data-theme="dark"] .story-ring-plus { border-color: #0b0f1e; }

/* ---- Story viewer ---------------------------------------------------- */
#storyViewerLayer { align-items: center; background: rgba(6,7,14,.96); backdrop-filter: blur(2px); display: flex; inset: 0; justify-content: center; position: fixed; z-index: 320; }
.story-viewer { background: #0b0d16; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); height: min(88vh, 780px); max-width: 420px; overflow: hidden; position: relative; width: min(92vw, 440px); }
.story-viewer img { background: #000; height: 100%; object-fit: contain; width: 100%; }

.story-viewer-bars { display: flex; gap: 4px; left: 12px; position: absolute; right: 12px; top: 10px; z-index: 2; }
.story-bar-track { background: rgba(255,255,255,.3); border-radius: 3px; flex: 1; height: 2.5px; overflow: hidden; }
.story-bar-fill { background: #fff; display: block; height: 100%; width: 0; }
.story-bar-fill.is-full { width: 100%; }
.story-bar-fill.is-active { animation: story-fill 5s linear forwards; }
@keyframes story-fill { from { width: 0; } to { width: 100%; } }

/* Head row: Back button, avatar, name + time-ago (stacked so long names
   never crowd anything else out), and Delete — shown only to the person
   who posted it. Everything that isn't the name/time text is flex: 0 0
   auto, so the name is the only thing that can ever shrink or truncate —
   nothing gets pushed off the edge of the screen regardless of how long
   a display name is. */
.story-viewer-head { align-items: center; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); display: flex; gap: 8px; left: 0; padding: 20px 10px 26px; position: absolute; right: 0; top: 0; z-index: 2; }
.story-viewer-back { align-items: center; background: none; border: none; border-radius: 999px; color: #fff; cursor: pointer; display: flex; flex: 0 0 auto; gap: 2px; padding: 6px 8px 6px 4px; transition: background .15s; }
.story-viewer-back:hover { background: rgba(255,255,255,.12); }
.story-viewer-back svg { fill: none; flex: 0 0 auto; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 18px; }
.story-viewer-back span { font-size: 11px; font-weight: 700; }
.story-viewer-avatar { border: 1.5px solid rgba(255,255,255,.5); flex: 0 0 auto; height: 26px; width: 26px; }
.story-viewer-namewrap { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
.story-viewer-name { color: #fff; font-size: 11px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-viewer-time { color: rgba(255,255,255,.72); font-size: 9px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-viewer-delete { align-items: center; background: rgba(255,64,94,.16); border: none; border-radius: 999px; color: #ff7a8f; cursor: pointer; display: flex; flex: 0 0 auto; gap: 4px; padding: 6px 10px; transition: background .15s; }
.story-viewer-delete:hover { background: rgba(255,64,94,.28); }
.story-viewer-delete svg { fill: none; flex: 0 0 auto; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 13px; }
.story-viewer-delete span { font-size: 9.5px; font-weight: 800; }
/* Narrow header down to just the icons if space is genuinely tight —
   still never overlaps or overflows, just drops the text labels first. */
@media (max-width: 360px) { .story-viewer-back span, .story-viewer-delete span { display: none; } .story-viewer-delete { padding: 7px; } }

.story-viewer-nav { background: none; border: none; bottom: 62px; color: rgba(255,255,255,.85); cursor: pointer; position: absolute; top: 52px; width: 30%; }
.story-viewer-nav svg { display: none; }
.story-viewer-prev { left: 0; }
.story-viewer-next { right: 0; }

/* ---- Heart / like button --------------------------------------------- */
.story-viewer-foot { align-items: center; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); bottom: 0; display: flex; justify-content: flex-end; left: 0; padding: 18px 14px 16px; position: absolute; right: 0; z-index: 3; }
.story-heart-button { align-items: center; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border-radius: 999px; color: #fff; cursor: pointer; display: flex; flex: 0 0 auto; gap: 6px; padding: 9px 14px; transition: background .15s, transform .12s; }
.story-heart-button:active { transform: scale(.94); }
.story-heart-button.is-liked { background: rgba(255,64,110,.22); }
.story-heart-icon { fill: none; flex: 0 0 auto; height: 19px; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: fill .15s, stroke .15s, transform .18s cubic-bezier(.34,1.9,.64,1); width: 19px; }
.story-heart-button.is-liked .story-heart-icon { fill: #ff405e; stroke: #ff405e; transform: scale(1.12); }
.story-heart-button.heart-pop .story-heart-icon { animation: heart-pop .38s cubic-bezier(.34,1.9,.64,1); }
@keyframes heart-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1.12); } }
.story-heart-count { flex: 0 0 auto; font-size: 11px; font-weight: 800; min-width: 8px; }
.story-heart-count:empty { display: none; }

/* ---- "N viewed" pill (your own story) and the viewers sheet ---------- */
.story-viewers-button { align-items: center; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border-radius: 999px; color: #fff; cursor: pointer; display: flex; flex: 0 0 auto; gap: 6px; padding: 9px 14px; transition: background .15s, transform .12s; }
.story-viewers-button:hover { background: rgba(255,255,255,.22); }
.story-viewers-button:active { transform: scale(.94); }
.story-viewers-button svg { fill: none; flex: 0 0 auto; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 17px; }
.story-viewers-button span { font-size: 11px; font-weight: 800; }
.story-viewers-sheet { background: #14161f; border-radius: 18px 18px 0 0; bottom: 0; left: 0; max-height: 55%; padding: 10px 16px 20px; position: absolute; right: 0; z-index: 5; overflow-y: auto; box-shadow: 0 -12px 32px rgba(0,0,0,.35); }
.story-viewers-sheet-handle { background: rgba(255,255,255,.22); border-radius: 3px; height: 4px; margin: 2px auto 12px; width: 34px; }
.story-viewers-sheet-title { color: rgba(255,255,255,.5); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; margin: 0 0 10px; text-transform: uppercase; }
.story-viewer-row { align-items: center; display: flex; gap: 10px; padding: 8px 0; }
.story-viewer-row-name { display: grid; gap: 1px; }
.story-viewer-row-name strong { color: #fff; font-size: 11.5px; }
.story-viewer-row-name small { color: rgba(255,255,255,.5); font-size: 9.5px; }
.story-viewers-empty { color: rgba(255,255,255,.5); font-size: 10.5px; padding: 14px 0; text-align: center; }

/* Floating heart burst on double-tap, Instagram-style */
.story-heart-fly { color: #ff405e; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); left: 50%; opacity: 0; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(.4); z-index: 4; }
.story-heart-fly svg { display: block; fill: currentColor; height: 74px; width: 74px; }
.story-heart-fly.is-flying { animation: heart-fly .75s cubic-bezier(.2,.9,.35,1) forwards; }
@keyframes heart-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(4deg); }
  40% { transform: translate(-50%, -50%) scale(.95) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.05) rotate(0deg); }
}

@media (max-width: 480px) {
  #storyViewerLayer { padding: 0; }
  /* height: 100% (not 100vh) — the layer above is already sized exactly
     to the visible viewport via inset:0, so filling it with a percentage
     can never be taller than what's actually on screen. 100vh is what
     caused this to spill past the bottom of the screen on phones: mobile
     browsers define 100vh against the *largest* possible viewport (with
     the address bar collapsed), which is taller than what's actually
     visible whenever the address bar is showing. */
  .story-viewer { border-radius: 0; height: 100%; max-width: 100vw; width: 100vw; }
}