/* ═══════════════════════════════════════════════════════════
   FEED
   ═══════════════════════════════════════════════════════════ */

/* ── Feed side nav ── */
/* border-right is split: ::before = straight line from y=12 down, ::after = curve at top */
.feed-sidenav{width:50px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:6px;background:var(--bg);position:relative;z-index:1;}
.feed-sidenav-btn{width:36px;height:36px;border-radius:20px;border:none;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .15s;}
.feed-sidenav-btn:hover{background:var(--bg3);color:var(--text);}
.feed-sidenav-btn.active{background:var(--accent-bg);color:var(--accent);border: 1px solid var(--border2);}

/* Straight border segment — starts where the curve ends */
.feed-sidenav::before{content:'';position:absolute;top:12px;right:-1px;width:1px;bottom:0;background:var(--border);pointer-events:none;}

/* Concave corner at top-right — curve fills the corner with page bg */
.feed-sidenav::after{content:'';position:absolute;top:0;right:-12px;width:12px;height:12px;background:var(--bg);border-top-left-radius:12px;box-shadow: inset 1px 1px 0 0 var(--border);pointer-events:none;}

#feed-page-search.hidden,#feed-page-dashboard.hidden{display:none;}

/* ── Search empty state / Kvasir game ── */
.feed-search-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;}
.feed-search-placeholder.hidden{display:none;}
#kvasir-game{display:block;cursor:pointer;}

/* ── Story card placeholder ── */
.story-card-wrap{display:flex;align-items:center;justify-content:center;height:100%;pointer-events:none;user-select:none;}
.story-card{width:300px;height:540px;border-radius:20px;background:var(--bg3);display:flex;align-items:flex-end;justify-content:center;padding-bottom:28px;}
.story-card-label{font-size:13px;color:var(--text3);letter-spacing:.03em;}

.story-card-dots::after{content:'';animation:dots-loop 1.6s steps(1) infinite;}
@keyframes dots-loop{0%{content:'';}25%{content:'.';}50%{content:'..';}75%{content:'...';}}