/* ================================================================
   PRIYO STORY — PEOPLE CARDS, FRIEND BUTTONS, NOTIFICATIONS
   ================================================================ */

/* ---------------- friend button ---------------- */
.fr-btn{
  border:none;
  border-radius:9px;
  padding:9px 14px;
  font-family:'Hind Siliguri', sans-serif;
  font-size:16px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer;
  transition:opacity .16s ease, background .16s ease;
  min-width:0;
  line-height:1.2;
}
.fr-btn svg{ width:16px; height:16px; flex-shrink:0; }
.fr-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-btn.primary{ background:var(--green-dark, #0f5132); color:#fff; }
.fr-btn.ghost{ background:var(--bg, #f0f2f0); color:var(--text, #1f2a24); }
.fr-btn:hover{ opacity:.9; }
.fr-btn:disabled{ opacity:.55; cursor:default; }

/* ---------------- person card ---------------- */
.pp-card{
  background:var(--card, #fff);
  border:1px solid var(--border, #e2e8e4);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.pp-photo{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  background:var(--green-light, #e8f5ee);
  overflow:hidden;
}
.pp-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-body{ padding:11px 12px 12px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.pp-name{
  font-size:17.5px; font-weight:700;
  color:var(--text, #1f2a24);
  display:flex; align-items:center; gap:5px;
  text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pp-name:hover{ text-decoration:underline; }
.pp-ver{ width:15px; height:15px; color:#1877f2; flex-shrink:0; }
.pp-sub{
  font-size:15px; color:var(--muted, #6b7a72);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pp-near{
  font-size:14px; font-weight:700;
  color:var(--green-dark, #0f5132);
  background:var(--green-light, #e8f5ee);
  padding:2px 8px; border-radius:20px;
  align-self:flex-start;
}
.pp-actions{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.pp-actions .fr-btn{ width:100%; }

/* grid of person cards */
.pp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:14px;
}
/* horizontal rail, used on the home page */
.pp-rail{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.pp-rail::-webkit-scrollbar{ display:none; }
.pp-rail .pp-card{ flex:0 0 172px; scroll-snap-align:start; }

.pp-empty{
  grid-column:1 / -1;
  padding:26px 18px;
  text-align:center;
  color:var(--muted, #6b7a72);
  font-size:16.5px;
  border:1px dashed var(--border, #e2e8e4);
  border-radius:12px;
}

/* small horizontal row (profile sidebar) */
.pp-mini{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.pp-mini a{
  text-decoration:none;
  color:inherit;
  min-width:0;
  /* these are <span>s inside an <a>; without display:block the photo
     ignores its size and the name runs over the next row */
  display:block;
}
.pp-mini-photo{ display:block; }
.pp-mini-name{
  display:block;
  line-height:1.35;
  max-width:100%;
}
.pp-mini .pp-mini-photo{
  width:100%; aspect-ratio:1 / 1;
  border-radius:10px; overflow:hidden;
  background:var(--green-light, #e8f5ee);
  margin-bottom:5px;
}
.pp-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-mini-name{
  font-size:15px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ================================================================
   NOTIFICATIONS
   ================================================================ */
.nf-wrap{ position:relative; display:flex; align-items:center; }
.nf-bell{ position:relative; }
.nf-panel{
  position:absolute;
  right:0; top:calc(100% + 10px);
  width:min(370px, calc(100vw - 24px));
  background:#fff;
  border:1px solid var(--border, #e2e8e4);
  border-radius:14px;
  box-shadow:0 16px 44px rgba(0,0,0,.18);
  z-index:950;
  display:none;
  overflow:hidden;
  font-family:'Hind Siliguri', sans-serif;
}
.nf-panel.open{ display:block; }
.nf-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 15px;
  border-bottom:1px solid var(--border, #e2e8e4);
}
.nf-head h4{ font-size:18px; font-weight:700; }
.nf-readall{
  border:none; background:transparent;
  font-family:inherit; font-size:15px; font-weight:700;
  color:var(--green-dark, #0f5132);
  cursor:pointer;
}
.nf-readall:hover{ text-decoration:underline; }
.nf-list{ max-height:min(420px, 60vh); overflow-y:auto; }
.nf-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 15px;
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid var(--border, #e2e8e4);
  position:relative;
}
.nf-item:last-child{ border-bottom:none; }
.nf-item:hover{ background:var(--bg, #f0f2f0); }
.nf-item.unread{ background:var(--green-light, #e8f5ee); }
.nf-item img{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  background:var(--bg, #f0f2f0);
}
.nf-body{ flex:1; min-width:0; }
.nf-text{ font-size:16.5px; line-height:1.5; color:var(--text, #1f2a24); word-break:break-word; }
.nf-time{ font-size:14.5px; color:var(--muted, #6b7a72); margin-top:2px; }
.nf-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--green, #1a7a4c);
  flex-shrink:0; align-self:center;
}
.nf-empty{ padding:30px 18px; text-align:center; color:var(--muted, #6b7a72); font-size:16.5px; }

/* ---------------- responsive ---------------- */
@media (max-width:700px){
  .pp-grid{ grid-template-columns:repeat(auto-fill, minmax(145px, 1fr)); gap:11px; }
  .pp-rail .pp-card{ flex:0 0 148px; }
  .nf-panel{
    position:fixed;
    left:8px; right:8px; top:calc(var(--header-h, 64px) + 8px);
    width:auto;
  }
  .nf-list{ max-height:65vh; }
}
@media (max-width:380px){
  .pp-grid{ grid-template-columns:1fr 1fr; gap:9px; }
  .pp-rail .pp-card{ flex:0 0 138px; }
  .fr-btn{ font-size:15px; padding:8px 10px; }
  .pp-mini{ gap:7px; }
}

/* ---------------- compact sidebar rows ---------------- */
.rs-row{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border, #e2e8e4);
}
.rs-row:last-child{ border-bottom:none; }
.rs-pic{
  width:56px; height:56px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--green-light, #e8f5ee);
  display:block;
}
.rs-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.rs-main{ flex:1; min-width:0; }
.rs-name{
  font-size:16.5px; font-weight:700;
  color:var(--text, #1f2a24);
  text-decoration:none;
  display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rs-name:hover{ text-decoration:underline; }
.rs-sub{
  font-size:14.5px; color:var(--muted, #6b7a72);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-bottom:6px;
}
.rs-acts{ display:flex; gap:6px; }
.rs-acts .fr-btn{ flex:1; padding:7px 8px; font-size:15px; }
.rs-acts .fr-btn svg{ width:14px; height:14px; }

/* the friend button must never resize as its label changes */
.fr-btn{
  min-height:38px;
  min-width:132px;
}
.pp-actions .fr-btn,
.rs-acts .fr-btn{ min-width:0; }
.rs-acts .fr-btn{ min-height:32px; }
#pfFriendBtn{ min-width:150px; }

/* urgent (blood) notifications stand out */
.nf-item.urgent{
  background:#fdecea;
  border-left:4px solid var(--red, #e2231a);
}
.nf-item.urgent.unread{ background:#fbdad5; }
.nf-item.urgent .nf-text{ color:#8f2018; }
.nf-item.urgent .nf-dot{ background:var(--red, #e2231a); }
.nf-tag{
  display:inline-block;
  font-size:13.5px; font-weight:800;
  background:var(--red, #e2231a);
  color:#fff;
  padding:2px 8px;
  border-radius:20px;
  margin-bottom:4px;
  letter-spacing:.2px;
}

/* birthday greetings look warm, not alarming */
.nf-item.bday{
  background:#fff6e5;
  border-left:4px solid #e3a913;
}
.nf-item.bday.unread{ background:#ffeecb; }
.nf-item.bday .nf-text{ color:#7a5510; }
.nf-item.bday .nf-dot{ background:#e3a913; }
.nf-tag.bday{ background:#e3a913; color:#3d2c00; }