/* ================================================================
   PRIYO STORY — SOCIAL LAYER
   Reactions · comments (text / voice / image) · replies · edit menu
   ================================================================ */

/* ================================================================
   1. POST HEADER
   ================================================================ */
.sp-head{
  display:flex; align-items:flex-start; gap:11px;
  margin-bottom:12px;
}
.sp-avatar{
  width:44px; height:44px; border-radius:50%;
  overflow:hidden; flex-shrink:0; background:var(--green-light, #e8f5ee);
}
.sp-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-headmain{ flex:1; min-width:0; }
.sp-nameline{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.sp-name{ font-size:17.5px; font-weight:700; color:var(--text, #1f2a24); }
.sp-verified{ width:16px; height:16px; color:#1877f2; flex-shrink:0; }
.sp-role{
  font-size:15px; color:var(--muted, #6b7a72);
  margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sp-time{
  font-size:14.5px; color:var(--muted, #6b7a72);
  margin-top:2px;
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.sp-time svg{ width:12px; height:12px; }
.sp-edited{ font-style:italic; opacity:.85; }

.sp-menu-wrap{ position:relative; flex-shrink:0; }
.sp-menu-btn{
  border:none; background:transparent;
  width:34px; height:34px; border-radius:50%;
  color:var(--muted, #6b7a72);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.sp-menu-btn:hover{ background:var(--bg, #f0f2f0); }
.sp-menu-btn svg{ width:18px; height:18px; }
.sp-menu{
  position:absolute;
  right:0; top:38px;
  background:#fff;
  border:1px solid var(--border, #e2e8e4);
  border-radius:11px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  min-width:180px;
  padding:6px;
  z-index:40;
  display:none;
}
.sp-menu.open{ display:block; }
.sp-menu button{
  width:100%;
  border:none; background:transparent;
  display:flex; align-items:center; gap:9px;
  padding:9px 10px;
  border-radius:8px;
  font-family:inherit; font-size:16.5px; font-weight:600;
  color:var(--text, #1f2a24);
  cursor:pointer;
  text-align:left;
}
.sp-menu button:hover{ background:var(--bg, #f0f2f0); }
.sp-menu button svg{ width:16px; height:16px; flex-shrink:0; color:var(--muted, #6b7a72); }
.sp-menu button.danger{ color:var(--red, #e2231a); }
.sp-menu button.danger svg{ color:var(--red, #e2231a); }

/* ================================================================
   2. STATS + ACTION ROW
   ================================================================ */
.sp-stats{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 2px;
  border-bottom:1px solid var(--border, #e2e8e4);
  font-size:15.5px;
  color:var(--muted, #6b7a72);
  flex-wrap:wrap;
}
.sp-reacts{ display:flex; align-items:center; gap:6px; min-width:0; cursor:pointer; }
.sp-react-bubbles{ display:flex; }
.sp-react-bubbles span{
  width:21px; height:21px; border-radius:50%;
  background:#fff;
  border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  margin-left:-6px;
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
.sp-react-bubbles span:first-child{ margin-left:0; }
.sp-stats-right{ display:flex; gap:12px; white-space:nowrap; }

.sp-actions{
  display:flex;
  padding-top:6px;
  gap:4px;
}
.sp-act{
  flex:1; min-width:0;
  border:none; background:transparent;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 6px;
  border-radius:9px;
  font-family:inherit; font-size:16.5px; font-weight:600;
  color:var(--muted, #6b7a72);
  cursor:pointer;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.sp-act:hover{ background:var(--bg, #f0f2f0); }
.sp-act svg{ width:17px; height:17px; flex-shrink:0; }
.sp-act .sp-act-emo{ font-size:20px; line-height:1; }
.sp-act.chosen{ color:var(--green-dark, #0f5132); }
.sp-act.chosen.r-love{ color:var(--red, #e2231a); }
.sp-act.chosen.r-haha, .sp-act.chosen.r-wow, .sp-act.chosen.r-sad{ color:#e3a913; }

/* reaction picker */
.sp-picker{
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(6px) scale(.94);
  background:#fff;
  border:1px solid var(--border, #e2e8e4);
  border-radius:30px;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
  padding:6px 8px;
  display:flex; gap:2px;
  z-index:45;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  max-width:min(94vw, 380px);
  overflow-x:auto;
  scrollbar-width:none;
}
.sp-picker::-webkit-scrollbar{ display:none; }
.sp-picker.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }
.sp-picker button{
  border:none; background:transparent;
  font-size:27px; line-height:1;
  width:42px; height:42px;
  border-radius:50%;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .14s ease, background .14s ease;
  flex-shrink:0;
}
.sp-picker button:hover{ transform:scale(1.22) translateY(-3px); background:var(--bg, #f0f2f0); }
.sp-picker button.sel{ background:var(--green-light, #e8f5ee); }

/* floating +1 animation */
.sp-pop{
  position:absolute;
  left:50%; bottom:100%;
  transform:translateX(-50%);
  font-size:25px;
  pointer-events:none;
  animation:sppop .8s ease-out forwards;
  z-index:50;
}
@keyframes sppop{
  0%{ opacity:0; transform:translateX(-50%) translateY(6px) scale(.6); }
  30%{ opacity:1; transform:translateX(-50%) translateY(-10px) scale(1.15); }
  100%{ opacity:0; transform:translateX(-50%) translateY(-46px) scale(.9); }
}

/* ================================================================
   3. COMMENTS
   ================================================================ */
.sp-comments{
  border-top:1px solid var(--border, #e2e8e4);
  margin-top:8px;
  padding-top:12px;
  display:none;
}
.sp-comments.open{ display:block; }

.sp-cmt-list{ margin-bottom:10px; }
.sp-cmt{ display:flex; gap:9px; margin-bottom:12px; }
.sp-cmt-ava{
  width:34px; height:34px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  background:var(--green-light, #e8f5ee);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:700; color:var(--green-dark, #0f5132);
}
.sp-cmt-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-cmt-main{ min-width:0; flex:1; }
.sp-cmt-bubble{
  background:var(--green-light, #e8f5ee);
  border-radius:14px;
  padding:8px 13px;
  display:inline-block;
  max-width:100%;
}
.sp-cmt-name{
  font-size:15.5px; font-weight:700;
  color:var(--text, #1f2a24);
  display:flex; align-items:center; gap:4px;
}
.sp-cmt-name svg{ width:13px; height:13px; color:#1877f2; }
.sp-cmt-role{ font-size:13.5px; font-weight:500; color:var(--muted, #6b7a72); }
.sp-cmt-text{
  font-size:16.5px; line-height:1.5;
  color:var(--text, #1f2a24);
  word-break:break-word;
  white-space:pre-line;
  margin-top:1px;
}
.sp-cmt-img{
  margin-top:6px;
  border-radius:12px;
  overflow:hidden;
  max-width:230px;
  cursor:pointer;
  display:block;
}
.sp-cmt-img img{ width:100%; display:block; }

/* voice note bubble */
.sp-voice{
  display:flex; align-items:center; gap:9px;
  padding:4px 2px;
  min-width:180px;
}
.sp-voice-play{
  width:34px; height:34px; border-radius:50%;
  border:none;
  background:var(--green-dark, #0f5132);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
}
.sp-voice-play svg{ width:15px; height:15px; }
.sp-voice-wave{
  flex:1;
  height:26px;
  display:flex; align-items:center; gap:2px;
  min-width:70px;
  cursor:pointer;
}
.sp-voice-wave i{
  flex:1;
  background:var(--green, #1a7a4c);
  opacity:.32;
  border-radius:2px;
  min-width:2px;
  transition:opacity .1s linear;
}
.sp-voice-wave i.on{ opacity:1; }
.sp-voice-time{ font-size:14.5px; font-weight:600; color:var(--muted, #6b7a72); flex-shrink:0; }

.sp-cmt-meta{
  display:flex; align-items:center; gap:12px;
  font-size:14.5px; font-weight:600;
  color:var(--muted, #6b7a72);
  margin:4px 0 0 13px;
  flex-wrap:wrap;
  position:relative;
}
.sp-cmt-meta button{
  border:none; background:transparent;
  font-family:inherit; font-size:14.5px; font-weight:700;
  color:var(--muted, #6b7a72);
  cursor:pointer; padding:0;
}
.sp-cmt-meta button:hover{ text-decoration:underline; }
.sp-cmt-meta button.chosen{ color:var(--green-dark, #0f5132); }
.sp-cmt-meta button.chosen.r-love{ color:var(--red, #e2231a); }
.sp-cmt-meta .sp-picker{ bottom:calc(100% + 4px); left:0; transform:translateY(6px) scale(.94); }
.sp-cmt-meta .sp-picker.open{ transform:translateY(0) scale(1); }
.sp-cmt-meta .sp-picker button{ font-size:23px; width:36px; height:36px; }
.sp-cmt-reacts{
  display:inline-flex; align-items:center; gap:3px;
  background:#fff;
  border:1px solid var(--border, #e2e8e4);
  border-radius:20px;
  padding:1px 7px;
  font-size:14px; font-weight:700;
  color:var(--muted, #6b7a72);
}

.sp-replies{ margin-left:20px; margin-top:10px; border-left:2px solid var(--border, #e2e8e4); padding-left:11px; }
.sp-replies .sp-cmt-ava{ width:28px; height:28px; font-size:15px; }

/* ---- comment composer ---- */
.sp-cbox{ display:flex; gap:9px; align-items:flex-start; }
.sp-cbox > .sp-cmt-ava{ margin-top:2px; }
.sp-cbox-main{ flex:1; min-width:0; }
.sp-cbox-row{
  display:flex; align-items:flex-end; gap:6px;
  background:#f4f7f5;
  border:1px solid var(--border, #e2e8e4);
  border-radius:20px;
  padding:5px 6px 5px 14px;
  transition:border-color .16s ease;
}
.sp-cbox-row:focus-within{ border-color:var(--green, #1a7a4c); background:#fff; }
.sp-cinput{
  flex:1; min-width:0;
  border:none; background:transparent;
  outline:none;
  resize:none;
  font-family:inherit; font-size:16.5px;
  line-height:1.5;
  color:var(--text, #1f2a24);
  max-height:110px;
  padding:6px 0;
}
.sp-cbtn{
  border:none; background:transparent;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--muted, #6b7a72);
  flex-shrink:0;
  transition:background .15s ease, color .15s ease;
}
.sp-cbtn:hover{ background:#e6ebe7; color:var(--green-dark, #0f5132); }
.sp-cbtn svg{ width:17px; height:17px; }
.sp-cbtn.send{ background:var(--green-dark, #0f5132); color:#fff; }
.sp-cbtn.send:hover{ opacity:.9; background:var(--green-dark, #0f5132); color:#fff; }
.sp-cbtn.mic.rec{ background:var(--red, #e2231a); color:#fff; animation:sprec 1s ease-in-out infinite; }
@keyframes sprec{ 50%{ transform:scale(1.12); } }

.sp-cemoji{
  display:none;
  grid-template-columns:repeat(auto-fill, minmax(34px, 1fr));
  gap:2px;
  max-height:132px;
  overflow-y:auto;
  border:1px solid var(--border, #e2e8e4);
  border-radius:12px;
  padding:7px;
  margin-top:8px;
  background:#fbfdfc;
}
.sp-cemoji.open{ display:grid; }
.sp-cemoji button{
  border:none; background:transparent;
  font-size:21px; padding:5px 0; border-radius:7px; cursor:pointer;
}
.sp-cemoji button:hover{ background:var(--green-light, #e8f5ee); }

.sp-cpreview{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.sp-cprev{
  position:relative;
  width:74px; height:74px;
  border-radius:10px; overflow:hidden;
  background:#0e1512;
}
.sp-cprev img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-cprev button{
  position:absolute; top:3px; right:3px;
  width:21px; height:21px; border-radius:50%;
  border:none; background:rgba(0,0,0,.62); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.sp-cprev button svg{ width:11px; height:11px; }

/* recording bar */
.sp-recbar{
  display:none;
  align-items:center; gap:10px;
  background:#fdecea;
  border:1px solid #f7c9c5;
  border-radius:20px;
  padding:9px 14px;
  margin-top:8px;
}
.sp-recbar.show{ display:flex; }
.sp-recdot{
  width:10px; height:10px; border-radius:50%;
  background:var(--red, #e2231a);
  animation:sprecdot 1s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes sprecdot{ 50%{ opacity:.25; } }
.sp-rectext{ font-size:15.5px; font-weight:700; color:var(--red, #e2231a); flex:1; min-width:0; }
.sp-rectime{ font-size:15.5px; font-weight:700; color:var(--red, #e2231a); }
.sp-recbar .sp-cbtn{ background:#fff; }

.sp-hint{ font-size:14px; color:var(--muted, #6b7a72); margin-top:6px; }

.sp-more-cmts{
  border:none; background:transparent;
  font-family:inherit; font-size:15.5px; font-weight:700;
  color:var(--green-dark, #0f5132);
  cursor:pointer; padding:4px 0; margin-bottom:8px;
}
.sp-empty-cmt{ font-size:15.5px; color:var(--muted, #6b7a72); padding:2px 0 10px; }

/* ================================================================
   4. EDIT MODAL
   ================================================================ */
.sp-edit-overlay{
  position:fixed; inset:0;
  background:rgba(15,25,20,.62);
  z-index:10000;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  font-family:'Hind Siliguri', sans-serif;
}
.sp-edit-overlay.open{ display:flex; }
.sp-edit{
  width:min(520px, 100%);
  max-height:calc(100vh - 40px);
  background:#fff;
  border-radius:16px;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  color:var(--text, #1f2a24);
}
.sp-edit-head{
  padding:14px 16px;
  border-bottom:1px solid var(--border, #e2e8e4);
  display:flex; align-items:center; justify-content:space-between;
}
.sp-edit-head h3{ font-size:19px; font-weight:700; }
.sp-edit-body{ padding:16px; overflow-y:auto; flex:1; min-height:0; }
.sp-edit-foot{
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border, #e2e8e4);
  display:flex; gap:8px;
}
.sp-edit-foot button{
  flex:1;
  border:none; border-radius:10px;
  padding:12px;
  font-family:inherit; font-size:17.5px; font-weight:700;
  cursor:pointer;
}
.sp-btn-cancel{ background:var(--bg, #f0f2f0); color:var(--muted, #6b7a72); }
.sp-btn-save{ background:var(--green-dark, #0f5132); color:#fff; }

/* ================================================================
   5. EMPTY STATES
   ================================================================ */
.sp-empty{
  background:#fff;
  border-radius:14px;
  padding:38px 22px;
  text-align:center;
  border:1px dashed var(--border, #e2e8e4);
  margin-bottom:16px;
}
.sp-empty-ico{
  width:56px; height:56px;
  margin:0 auto 12px;
  border-radius:16px;
  background:var(--green-light, #e8f5ee);
  color:var(--green-dark, #0f5132);
  display:flex; align-items:center; justify-content:center;
}
.sp-empty-ico svg{ width:26px; height:26px; }
.sp-empty h3{ font-size:19px; font-weight:700; margin-bottom:5px; color:var(--text, #1f2a24); }
.sp-empty p{ font-size:16px; color:var(--muted, #6b7a72); line-height:1.6; max-width:380px; margin:0 auto 14px; }
.sp-empty-btn{
  border:none;
  background:var(--green-dark, #0f5132);
  color:#fff;
  padding:11px 22px;
  border-radius:10px;
  font-family:inherit; font-size:16.5px; font-weight:700;
  cursor:pointer;
}
.sp-empty-btn:hover{ opacity:.92; }

/* ================================================================
   6. RESPONSIVE
   ================================================================ */
@media (max-width:700px){
  .sp-avatar{ width:40px; height:40px; }
  .sp-act{ font-size:15.5px; gap:5px; padding:9px 3px; }
  .sp-act svg{ width:16px; height:16px; }
  .sp-picker button{ font-size:24px; width:38px; height:38px; }
  .sp-replies{ margin-left:12px; padding-left:9px; }
  .sp-cmt-img{ max-width:180px; }
  .sp-empty{ padding:30px 16px; }
}
@media (max-width:380px){
  .sp-act span{ display:none; }
  .sp-act{ gap:0; }
  .sp-role{ font-size:14px; }
  .sp-stats{ font-size:14.5px; }
  .sp-picker button{ font-size:22px; width:34px; height:34px; }
  .sp-voice{ min-width:140px; }
}
@media (prefers-reduced-motion:reduce){
  .sp-picker, .sp-act, .sp-cbtn{ transition:none !important; }
  .sp-pop, .sp-cbtn.mic.rec, .sp-recdot{ animation:none !important; }
}

/* empty state placed inside a grid section */
.sp-empty-incell{
  grid-column:1 / -1;
  margin-bottom:0;
}

/* author name / picture link through to the profile page */
.sp-plink{
  text-decoration:none;
  color:inherit;
  display:inline-flex;
  align-items:center;
  min-width:0;
}
a.sp-plink:hover .sp-name{ text-decoration:underline; }
.sp-avatar.sp-avatar-link{
  display:block;
  flex-shrink:0;
}
.sp-head > .sp-plink{ flex-shrink:0; }

/* ---------------- donate button, deliberately loud ---------------- */
.sp-act.sp-donate{
  color:var(--red, #e2231a);
  font-weight:800;
}
.sp-act.sp-donate svg{ color:var(--red, #e2231a); }
.sp-act.sp-donate:hover{ background:#fdecea; }

/* the star button in the comment box */
.sp-cbtn.star{ color:#e3a913; }
.sp-cbtn.star:hover{ background:#fff6e5; }

@media (max-width:420px){
  /* four actions is a lot on a narrow phone — drop the labels */
  .sp-act span{ font-size:15px; }
  .sp-act{ padding:8px 6px; gap:4px; }
}

/* ---------------- money raised on a post ---------------- */
.sp-star-count{ color:#a8790a; font-weight:700; }
.sp-donate-count{ color:var(--red, #e2231a); font-weight:700; }

/* ================================================================
   REACTION PICKER

   The picker is centred on the box that holds the like button. On a
   phone that box is only a quarter of the card wide and sits on the
   left, so a 380px picker centred on it hung off the screen and the
   first few faces were unreachable. Making .sp-actions the anchor
   centres it on the whole card instead.
   ================================================================ */
.sp-actions{ position:relative; }

@media (max-width:700px){
  .sp-actions > div:first-child{ position:static; }
  .sp-picker{
    left:50%;
    /* seven faces have to fit without scrolling, so the buttons
       shrink instead of two of them hiding off the edge */
    max-width:calc(100vw - 20px);
    padding:5px 6px;
    gap:0;
    justify-content:center;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .sp-picker button{
    width:min(42px, calc((100vw - 44px) / 7));
    height:min(42px, calc((100vw - 44px) / 7));
    font-size:min(26px, calc((100vw - 74px) / 7));
  }
  .sp-picker::-webkit-scrollbar{ display:none; }

  .sp-stats{ gap:7px; }
  .sp-stats-right{ gap:9px; flex-wrap:wrap; }
}

/* four actions need room on a narrow screen */
@media (max-width:480px){
  .sp-actions{ gap:2px; }
  .sp-act{ padding:9px 3px; gap:5px; }
  .sp-act svg{ width:17px; height:17px; }
}
@media (max-width:360px){
  .sp-act span{ display:none; }
  .sp-act.sp-donate span{ display:inline; }
}

/* ================================================================
   LONG POSTS, LINKS AND ACTION BUTTONS
   ================================================================ */
.post-longtext{ position:relative; }
.post-text.clamped{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-more{
  border:none; background:transparent;
  color:var(--green-dark, #0f5132);
  font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer;
  padding:4px 0 0;
}
.post-more:hover{ text-decoration:underline; }

.post-link{
  color:#1877f2;
  text-decoration:none;
  word-break:break-word;
}
.post-link:hover{ text-decoration:underline; }

/* Sits right under the picture, the way Facebook does it — a line
   of text on the left and the button on the right. */
.post-cta-bar{
  display:flex; align-items:stretch; gap:10px;
  margin-top:-2px;
  padding:10px 0 2px;
}
.cta-caption{
  flex:1; min-width:0;
  display:flex; align-items:center;
  background:var(--bg, #f0f2f0);
  border-radius:11px;
  padding:12px 16px;
  font-size:15px; font-weight:700;
  color:var(--green-dark, #0f5132);
  line-height:1.4;
  word-break:break-word;
}
.post-cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  flex:0 0 auto;
  min-width:190px;
  padding:12px 22px;
  border:none;
  border-radius:11px;
  background:var(--green-dark, #0f5132);
  color:#fff;
  font-family:inherit; font-size:15px; font-weight:700;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.post-cta:hover{ opacity:.93; }
.cta-ico{
  font-size:17px; line-height:1;
  display:flex; align-items:center;
}
/* no caption written — the button takes the whole width */
.post-cta-bar > .post-cta:only-child{ flex:1; min-width:0; }

@media (max-width:600px){
  .post-cta-bar{ flex-direction:column; gap:8px; }
  .cta-caption{ padding:10px 14px; font-size:14px; }
  .post-cta{ width:100%; min-width:0; }
}

/* ---------------- where a post came from ---------------- */
.sp-origin{ margin-top:2px; }
.sp-origin-tag{
  font-size:11.5px; font-weight:700;
  color:var(--muted, #6b7a72);
  background:var(--bg, #f0f2f0);
  padding:2px 9px;
  border-radius:20px;
}
.sp-origin-tag.page{
  color:var(--green-dark, #0f5132);
  background:var(--green-light, #e8f5ee);
}
.sp-follow{
  border:none;
  background:transparent;
  color:var(--green-dark, #0f5132);
  font-family:inherit; font-size:13px; font-weight:800;
  cursor:pointer;
  padding:2px 8px;
  border-radius:7px;
  white-space:nowrap;
}
.sp-follow:hover{ background:var(--green-light, #e8f5ee); }
.sp-follow.on{ color:var(--muted, #6b7a72); font-weight:600; }
.sp-nameline{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }