/* ------------------------------------------------------------------ */
/* 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; }

.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; }

/* Floating heart burst on double-tap, Instagram-style */
.story-heart-fly { color: #ff405e; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); font-size: 74px; left: 50%; opacity: 0; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(.4); z-index: 4; }
.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; }
}