/* Stories row, viewer and upload modal — tokens from home-v2.css */
.stories-row{margin:0 0 18px;font-family:Lato,Arial,sans-serif}
.stories-title{margin:0 0 10px;font-size:15px;font-weight:700;color:#2d3e4f}
.stories-scroller-wrap{position:relative;border-bottom:1px solid #ecebe8;padding-bottom:14px}
.stories-scroller{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:4px 44px 2px 2px}
.stories-scroller::-webkit-scrollbar{display:none}
.story-item{flex:0 0 auto;width:72px;text-align:center}
.story-ring{position:relative;display:block;width:72px;height:72px;padding:3px;border:0;border-radius:50%;cursor:pointer;background:linear-gradient(45deg,#ff8a5c,#e74c3c 55%,#c2185b)}
.story-ring.seen{background:#d9d7d2}
.story-ring-add{background:#fbe4e1}
.story-ring-add.has-story{background:linear-gradient(45deg,#ff8a5c,#e74c3c 55%,#c2185b)}
.story-avatar{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:#fff;border:3px solid #fff;overflow:hidden;box-sizing:border-box}
.story-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.story-plus{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:#e74c3c;border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.story-name{display:block;margin-top:6px;font-size:12px;color:#6b7680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stories-next{position:absolute;right:0;top:20px;width:36px;height:36px;border-radius:50%;border:1px solid #ecebe8;background:#fff;box-shadow:0 1px 3px rgba(45,62,79,.12);cursor:pointer;display:flex;align-items:center;justify-content:center}
.stories-next[hidden]{display:none}

/* viewer */
.sv-overlay{position:fixed;inset:0;z-index:100000;background:rgba(15,20,26,.94);display:flex;align-items:center;justify-content:center;font-family:Lato,Arial,sans-serif}
.sv-stage{position:relative;height:min(100vh,calc(100vw*16/9));aspect-ratio:9/16;max-width:100vw;background:#000;border-radius:14px;overflow:hidden;user-select:none}
.sv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.sv-bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.sv-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sv-bar i{display:block;height:100%;width:0;background:#fff}
.sv-bar.done i{width:100%}
.sv-head{position:absolute;top:22px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:3;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.sv-head img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.sv-head b{font-size:14px}
.sv-head small{opacity:.8;font-size:12px}
.sv-spacer{flex:1}
.sv-btn{background:none;border:0;color:#fff;cursor:pointer;padding:6px;display:flex;align-items:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.sv-tap{position:absolute;top:70px;bottom:70px;width:35%;z-index:2;cursor:pointer}
.sv-tap-l{left:0}.sv-tap-r{right:0;width:65%}
.sv-caption{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 18px;color:#fff;font-size:15px;line-height:1.4;background:linear-gradient(transparent,rgba(0,0,0,.65));z-index:3;word-wrap:break-word}
.sv-caption.has-owner{padding-bottom:56px}
.sv-owner{position:absolute;left:14px;bottom:14px;z-index:4;display:flex;gap:8px}
.sv-pill{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px}
.sv-pill:hover{background:rgba(255,255,255,.3)}
.sv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:100001;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sv-nav-l{left:calc(50% - min(50vh*9/16,50vw) - 56px)}
.sv-nav-r{right:calc(50% - min(50vh*9/16,50vw) - 56px)}
.sv-close{position:absolute;top:14px;right:18px;z-index:100001;background:none;border:0;color:#fff;cursor:pointer}
.sv-sheet{position:absolute;left:0;right:0;bottom:0;max-height:60%;background:#fff;border-radius:16px 16px 0 0;z-index:6;display:flex;flex-direction:column;color:#2d3e4f}
.sv-sheet h4{margin:0;padding:14px 16px;font-size:15px;border-bottom:1px solid #ecebe8;display:flex;justify-content:space-between;align-items:center}
.sv-sheet h4 button{background:none;border:0;font-size:20px;cursor:pointer;color:#6b7680}
.sv-sheet ul{list-style:none;margin:0;padding:6px 16px 14px;overflow:auto}
.sv-sheet li{display:flex;align-items:center;gap:10px;padding:8px 0}
.sv-sheet li img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.sv-sheet li span{flex:1;font-size:14px}.sv-sheet li small{color:#97a3ad;font-size:12px}
.sv-empty{padding:22px 16px;color:#97a3ad;text-align:center;font-size:14px}
@media (max-width:720px){
 .sv-stage{height:100vh;width:100vw;aspect-ratio:auto;border-radius:0}
 .sv-nav{display:none}
 .stories-scroller{gap:12px}
}

/* upload modal */
.su-overlay{position:fixed;inset:0;z-index:100000;background:rgba(15,20,26,.7);display:flex;align-items:center;justify-content:center;padding:16px;font-family:Lato,Arial,sans-serif}
.su-card{width:100%;max-width:380px;background:#fff;border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);color:#2d3e4f}
.su-card h3{margin:0 0 4px;font-size:18px}
.su-card p{margin:0 0 12px;color:#6b7680;font-size:13px}
.su-preview{width:100%;aspect-ratio:9/16;max-height:52vh;object-fit:contain;background:#111;border-radius:10px;display:block;margin:0 auto 10px}
.su-card input[type=text]{width:100%;box-sizing:border-box;border:1px solid #eeece8;background:#faf9f7;border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:10px}
.su-error{color:#c0392b;font-size:13px;margin:0 0 10px;display:none}
.su-progress{height:6px;background:#eeece8;border-radius:3px;overflow:hidden;margin-bottom:10px;display:none}
.su-progress i{display:block;height:100%;width:0;background:#e74c3c;transition:width .15s}
.su-actions{display:flex;gap:10px;justify-content:flex-end}
.su-btn{border:0;border-radius:999px;padding:9px 20px;font-size:14px;font-weight:700;cursor:pointer}
.su-btn-cancel{background:#f4f3f1;color:#6b7680}
.su-btn-post{background:#e74c3c;color:#fff}
.su-btn[disabled]{opacity:.6;cursor:default}

/* Story Quick Emoji Reactions & Direct Replies */
.sv-footer-controls{position:absolute;left:12px;right:12px;bottom:14px;z-index:5;display:flex;flex-direction:column;gap:8px;align-items:center}
.sv-reaction-bar{position:relative;left:auto;bottom:auto;transform:none;margin:0 auto;display:flex;align-items:center;gap:10px;background:rgba(20,24,30,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.sv-reaction-btn{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:50%;transition:transform .15s cubic-bezier(.175,.885,.32,1.275);user-select:none;-webkit-tap-highlight-color:transparent}
.sv-reaction-btn:hover,.sv-reaction-btn:active{transform:scale(1.35)}

.sv-reply-box{display:flex;align-items:center;width:100%;max-width:380px;background:rgba(20,24,30,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 6px 4px 14px;box-shadow:0 6px 24px rgba(0,0,0,.4);box-sizing:border-box;transition:border-color .2s,background .2s}
.sv-reply-box:focus-within{background:rgba(15,18,22,.85);border-color:rgba(255,255,255,.5)}
.sv-reply-input{flex:1;background:none;border:0;outline:none;color:#fff;font-size:13px;font-family:inherit;line-height:1.3;padding:4px 0}
.sv-reply-input::placeholder{color:rgba(255,255,255,.65);font-size:12.5px}
.sv-reply-send-btn{width:30px;height:30px;border-radius:50%;border:0;background:#e74c3c;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s;flex-shrink:0;margin-left:6px;box-shadow:0 2px 8px rgba(231,76,60,.4)}
.sv-reply-send-btn:hover{background:#ff5252;transform:scale(1.08)}
.sv-reply-send-btn[disabled]{opacity:.5;cursor:default;transform:none}

.sv-particle{position:absolute;z-index:20;font-size:26px;pointer-events:none;animation:floatUpAndFade 0.95s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes floatUpAndFade{
  0%{transform:translateY(0) scale(0.6);opacity:1}
  50%{transform:translateY(-50px) scale(1.2);opacity:0.9}
  100%{transform:translateY(-100px) scale(0.8);opacity:0}
}
.sv-viewer-reaction{font-size:16px;margin-left:6px;line-height:1;vertical-align:middle}

.sv-toast{position:absolute;top:70px;left:50%;transform:translateX(-50%) translateY(-10px);z-index:25;background:rgba(20,24,30,.92);color:#fff;padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 24px rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;opacity:0;transition:opacity .25s ease,transform .25s ease;white-space:nowrap}
.sv-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.sv-input-shake{animation:svInputShake .35s ease-in-out}
@keyframes svInputShake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-4px)}
  40%,80%{transform:translateX(4px)}
}

/* Recipe Pin Sticker Overlay (Feature B) */
.sv-recipe-sticker{position:absolute;left:14px;bottom:116px;z-index:4;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);color:#2d3e4f;padding:7px 14px;border-radius:999px;font-size:13px;text-decoration:none;box-shadow:0 4px 15px rgba(0,0,0,.25);backdrop-filter:blur(4px);transition:transform .15s ease,background .15s ease;max-width:calc(100% - 28px);box-sizing:border-box}
.sv-recipe-sticker:hover{background:#fff;transform:translateY(-2px);color:#e74c3c}
.sv-sticker-icon{font-size:15px;line-height:1}
.sv-sticker-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-sticker-text b{color:#1a252f;font-weight:700}
.sv-recipe-sticker:hover .sv-sticker-text b{color:#e74c3c}
.sv-sticker-arrow{font-weight:700;font-size:14px;opacity:.7}
.sv-caption.has-sticker{padding-bottom:160px}


/* highlight picker */
.hl-picker{z-index:100001}
.hl-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;margin-bottom:6px}
.hl-option{display:flex;margin:0;box-sizing:border-box;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid #eeece8;background:#faf9f7;border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700;color:#2d3e4f;cursor:pointer;text-align:left}
.hl-option:hover{border-color:#e74c3c;background:#fff5f4}
.hl-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-option small{flex:none;font-weight:400;color:#6b7680;font-size:12px}
.su-card p.hl-or{margin:8px 0 8px}
.hl-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:50vh;overflow-y:auto;margin-bottom:12px}
.hl-story{position:relative;border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;cursor:pointer;background:#111;aspect-ratio:9/16}
.hl-story:hover{border-color:#e74c3c}
.hl-story img,.hl-story video{width:100%;height:100%;object-fit:cover;display:block}
.hl-story small{position:absolute;left:6px;bottom:5px;color:#fff;font-size:11px;text-shadow:0 1px 3px rgba(0,0,0,.7)}

/* caption sits above the reactions + reply box for viewers */
.sv-caption.has-footer{padding-bottom:124px}
.sv-pill-rx{gap:8px}
.sv-rx{white-space:nowrap}

/* reply box: glass style — beat the site-wide white input[type=text] styling */
.sv-reply-box .sv-reply-input,
.sv-reply-box .sv-reply-input:focus,
.sv-reply-box .sv-reply-input:hover{background:transparent !important;border:0 !important;box-shadow:none !important;outline:0 !important;color:#fff !important;-webkit-text-fill-color:#fff;caret-color:#fff;height:auto !important;margin:0 !important;border-radius:0 !important;padding:6px 0 !important}
.sv-reply-box .sv-reply-input::placeholder{color:rgba(255,255,255,.6) !important;-webkit-text-fill-color:rgba(255,255,255,.6)}
.sv-reply-box{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.sv-reply-box:focus-within{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}

/* viewers / reactions sheet tabs */
.sv-tabs{display:flex;gap:6px}
.sv-sheet h4 .sv-tab{background:#f4f3f1;border:0;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;color:#6b7680;cursor:pointer;font-family:inherit}
.sv-sheet h4 .sv-tab.active{background:#e74c3c;color:#fff}
.sv-sheet h4 .sv-sheet-close{background:none;border:0;font-size:22px;cursor:pointer;color:#6b7680}
.sv-person{flex:1;display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.sv-person span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-person:hover span{color:#e74c3c}
.sv-sheet li .sv-viewer-reaction{flex:none;margin:0 4px 0 0}
/* the viewer's own saved reaction */
.sv-reaction-btn.is-mine{background:rgba(255,255,255,.22);box-shadow:0 0 0 2px rgba(255,255,255,.55)}

/* hold-to-pause: no long-press image menu / text selection / double-tap zoom on phones */
.sv-stage, .sv-media, .sv-tap { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.sv-tap { touch-action: manipulation; }