/* ================================================================
   PRIYO STORY — COMPOSER + COLLAGE + REEL CARD FOOT
   ================================================================ */

/* ================================================================
   1. REEL CARD — compact corner avatar + view pill
   (replaces the old full-width bottom overlay so the whole
   video / thumbnail stays visible)
   ================================================================ */
.reel-foot{
  position:absolute;
  left:9px; bottom:10px;
  display:flex; align-items:center; gap:7px;
  z-index:3;
  max-width:calc(100% - 18px);
}
.reel-ava{
  width:30px; height:30px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:2px solid #fff;
  background:#2b3a33;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.reel-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-viewpill{
  display:flex; align-items:center; gap:4px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;
  font-size:14px; font-weight:600;
  padding:4px 9px;
  border-radius:20px;
  white-space:nowrap;
  line-height:1;
}
.reel-viewpill svg{ width:12px; height:12px; flex-shrink:0; }

.mini-reel-card .reel-foot{ left:6px; bottom:7px; gap:5px; }
.mini-reel-card .reel-ava{ width:24px; height:24px; border-width:1.5px; }
.mini-reel-card .reel-viewpill{ font-size:12.5px; padding:3px 7px; }
.mini-reel-card .reel-viewpill svg{ width:10px; height:10px; }

@media (max-width:760px){
  .reel-foot{ left:12px; bottom:14px; gap:9px; }
  .reel-ava{ width:38px; height:38px; }
  .reel-viewpill{ font-size:15.5px; padding:6px 12px; }
  .reel-viewpill svg{ width:14px; height:14px; }
}

/* ================================================================
   2. PHOTO COLLAGE (feed posts)
   ================================================================ */
.pc-collage{
  display:grid;
  gap:3px;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:10px;
  background:#0e1512;
  width:100%;
}
.pc-cell{
  position:relative;
  overflow:hidden;
  background:#0e1512;
  cursor:pointer;
  min-width:0; min-height:0;
}
.pc-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pc-more{
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:27px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.pc-n1{ grid-template-columns:1fr; aspect-ratio:4/3; }
.pc-n2{ grid-template-columns:1fr 1fr; aspect-ratio:2/1; }
.pc-n3{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:3/2; }
.pc-n3 > .pc-cell:first-child{ grid-row:1 / span 2; }
.pc-n4{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:1/1; }
.pc-n5{ grid-template-columns:repeat(6,1fr); grid-template-rows:1fr 1fr; aspect-ratio:3/2; }
.pc-n5 > .pc-cell:nth-child(1), .pc-n5 > .pc-cell:nth-child(2){ grid-column:span 3; }
.pc-n5 > .pc-cell:nth-child(3), .pc-n5 > .pc-cell:nth-child(4), .pc-n5 > .pc-cell:nth-child(5){ grid-column:span 2; }
.pc-n6{ grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr; aspect-ratio:3/2; }

/* text-only status card */
.pc-textcard{
  border-radius:12px;
  padding:34px 22px;
  min-height:170px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-size:23px; font-weight:700; line-height:1.5;
  color:#fff;
  margin-bottom:10px;
  word-break:break-word;
}
.pc-bg-1{ background:linear-gradient(135deg,#0f5132,#1fa855); }
.pc-bg-2{ background:linear-gradient(135deg,#8b1a15,#e2231a); }
.pc-bg-3{ background:linear-gradient(135deg,#1e3a8a,#3b82f6); }
.pc-bg-4{ background:linear-gradient(135deg,#4c1d95,#8b5cf6); }
.pc-bg-5{ background:linear-gradient(135deg,#7c2d12,#f59e0b); }

.pc-own-badge{
  font-size:14px; font-weight:700;
  color:var(--green-dark, #0f5132);
  background:var(--green-light, #e8f5ee);
  padding:2px 8px; border-radius:20px;
  margin-left:6px;
}
.pc-del{
  margin-left:auto;
  border:none; background:transparent;
  color:var(--muted, #6b7a72);
  cursor:pointer;
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pc-del:hover{ background:#fdecea; color:var(--red, #e2231a); }
.pc-del svg{ width:17px; height:17px; }

/* ================================================================
   3. COMPOSER MODAL
   ================================================================ */
/* Mobile browsers treat 100vh as the height WITHOUT the address bar,
   so a sheet measured in vh ends up taller than what you can actually
   see and its top slides off screen. dvh is the visible height. */
.cp-overlay{
  position:fixed; inset:0;
  height:100vh;
  height:100dvh;
  background:rgba(15,25,20,.62);
  z-index:10000;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .2s ease;
  font-family:'Hind Siliguri', sans-serif;
  -webkit-overflow-scrolling:touch;
}
.cp-overlay.open{ display:flex; }
.cp-overlay.shown{ opacity:1; }
body.cp-lock{ overflow:hidden !important; }

.cp-modal{
  width:min(560px, 100%);
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  background:#fff;
  border-radius:16px;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  transform:translateY(14px) scale(.98);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  color:var(--text, #1f2a24);
}
.cp-overlay.shown .cp-modal{ transform:none; }

.cp-head{
  padding:14px 16px;
  border-bottom:1px solid var(--border, #e2e8e4);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.cp-head h3{ font-size:19.5px; font-weight:700; }
.cp-x{
  border:none; background:var(--bg, #f0f2f0);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted, #6b7a72);
}
.cp-x:hover{ background:#e6ebe7; }
.cp-x svg{ width:18px; height:18px; }

.cp-body{
  flex:1;
  overflow-y:auto;
  padding:16px;
  min-height:0;
  -webkit-overflow-scrolling:touch;
}
.cp-who{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.cp-who .photo-box{ width:42px; height:42px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.cp-who img{ width:100%; height:100%; object-fit:cover; display:block; }
.cp-who-name{ font-size:17.5px; font-weight:700; }
.cp-who-sub{ font-size:14.5px; color:var(--muted, #6b7a72); margin-top:1px; }

.cp-tabs{
  display:flex; gap:8px;
  margin-bottom:14px;
  background:var(--bg, #f0f2f0);
  padding:4px; border-radius:11px;
}
.cp-tab{
  flex:1; min-width:0;
  border:none; background:transparent;
  padding:9px 6px;
  border-radius:8px;
  font-family:inherit; font-size:16px; font-weight:700;
  color:var(--muted, #6b7a72);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all .16s ease;
}
.cp-tab svg{ width:16px; height:16px; flex-shrink:0; }
.cp-tab.active{ background:#fff; color:var(--green-dark, #0f5132); box-shadow:0 1px 4px rgba(0,0,0,.08); }

.cp-pane{ display:none; }
.cp-pane.active{ display:block; }

.cp-text{
  width:100%;
  border:none; outline:none;
  resize:none;
  font-family:inherit;
  font-size:19px;
  line-height:1.6;
  color:var(--text, #1f2a24);
  min-height:96px;
  background:transparent;
}
.cp-text::placeholder{ color:#9aa8a1; }
.cp-text.big{ font-size:22px; font-weight:700; text-align:center; min-height:120px; }

.cp-bgrow{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }
.cp-bg{
  width:34px; height:34px; border-radius:9px;
  border:2px solid transparent; cursor:pointer;
  flex-shrink:0;
}
.cp-bg.sel{ border-color:var(--green-dark, #0f5132); }
.cp-bg-none{ background:#fff; border:2px solid var(--border, #e2e8e4); position:relative; }
.cp-bg-none::after{
  content:''; position:absolute; left:4px; right:4px; top:50%;
  height:2px; background:var(--red, #e2231a); transform:rotate(-45deg);
}

.cp-emoji-bar{
  display:flex; align-items:center; gap:8px;
  border-top:1px solid var(--border, #e2e8e4);
  padding-top:10px; margin-top:10px;
  flex-wrap:wrap;
}
.cp-emoji-btn{
  border:1px solid var(--border, #e2e8e4);
  background:#fff;
  border-radius:9px;
  padding:7px 12px;
  font-family:inherit; font-size:16px; font-weight:600;
  color:var(--muted, #6b7a72);
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.cp-emoji-btn:hover{ background:var(--green-light, #e8f5ee); }
.cp-quick{ display:flex; gap:4px; flex-wrap:wrap; }
.cp-quick button{
  border:none; background:transparent;
  font-size:21px; line-height:1;
  padding:4px; border-radius:7px; cursor:pointer;
}
.cp-quick button:hover{ background:var(--bg, #f0f2f0); }

.cp-emoji-grid{
  display:none;
  grid-template-columns:repeat(auto-fill, minmax(38px, 1fr));
  gap:2px;
  max-height:168px;
  overflow-y:auto;
  border:1px solid var(--border, #e2e8e4);
  border-radius:10px;
  padding:8px;
  margin-top:10px;
  background:#fbfdfc;
}
.cp-emoji-grid.open{ display:grid; }
.cp-emoji-grid button{
  border:none; background:transparent;
  font-size:22px; line-height:1;
  padding:6px 0; border-radius:7px; cursor:pointer;
}
.cp-emoji-grid button:hover{ background:var(--green-light, #e8f5ee); }

/* drop zone */
.cp-drop{
  border:2px dashed var(--border, #e2e8e4);
  border-radius:12px;
  padding:26px 16px;
  text-align:center;
  cursor:pointer;
  transition:all .16s ease;
  background:#fbfdfc;
}
.cp-drop:hover, .cp-drop.hot{ border-color:var(--green, #1a7a4c); background:var(--green-light, #e8f5ee); }
.cp-drop svg{ width:30px; height:30px; color:var(--green, #1a7a4c); margin-bottom:8px; }
.cp-drop-title{ font-size:17px; font-weight:700; margin-bottom:3px; }
.cp-drop-sub{ font-size:15px; color:var(--muted, #6b7a72); }

.cp-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
  gap:8px;
  margin-top:12px;
}
.cp-thumb{
  position:relative;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:#0e1512;
}
.cp-thumb img, .cp-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.cp-thumb-x{
  position:absolute; top:4px; right:4px;
  width:24px; height:24px; border-radius:50%;
  border:none; background:rgba(0,0,0,.6); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.cp-thumb-x svg{ width:13px; height:13px; }
.cp-count{ font-size:15px; color:var(--muted, #6b7a72); margin-top:8px; }

/* form fields */
.cp-field{ margin-top:14px; }
.cp-label{
  display:block;
  font-size:15.5px; font-weight:700;
  margin-bottom:6px;
  color:var(--text, #1f2a24);
}
.cp-label .req{ color:var(--red, #e2231a); }
.cp-input, .cp-area{
  width:100%;
  border:1.5px solid var(--border, #e2e8e4);
  border-radius:10px;
  padding:10px 12px;
  font-family:inherit; font-size:17px;
  color:var(--text, #1f2a24);
  outline:none;
  background:#fff;
  transition:border-color .16s ease;
}
.cp-area{ resize:vertical; min-height:74px; line-height:1.55; }
.cp-input:focus, .cp-area:focus{ border-color:var(--green, #1a7a4c); }
.cp-hint{ font-size:14.5px; color:var(--muted, #6b7a72); margin-top:5px; }

.cp-cats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cp-cat{
  border:2px solid var(--border, #e2e8e4);
  border-radius:12px;
  padding:12px 10px;
  cursor:pointer;
  text-align:center;
  transition:all .16s ease;
  background:#fff;
}
.cp-cat:hover{ border-color:var(--green, #1a7a4c); }
.cp-cat.sel{ border-color:var(--green-dark, #0f5132); background:var(--green-light, #e8f5ee); }
.cp-cat-ico{
  width:38px; height:38px; margin:0 auto 7px;
  border-radius:9px;
  background:var(--bg, #f0f2f0);
  display:flex; align-items:center; justify-content:center;
  color:var(--green-dark, #0f5132);
}
.cp-cat.sel .cp-cat-ico{ background:#fff; }
.cp-cat-ico svg{ width:19px; height:19px; }
.cp-cat-name{ font-size:16.5px; font-weight:700; }
.cp-cat-sub{ font-size:14px; color:var(--muted, #6b7a72); margin-top:2px; }

.cp-tagchips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cp-tagchip{
  font-size:14.5px; font-weight:600;
  background:var(--green-light, #e8f5ee);
  color:var(--green-dark, #0f5132);
  padding:4px 10px; border-radius:20px;
}

.cp-err{
  font-size:15.5px; font-weight:600;
  color:var(--red, #e2231a);
  background:#fdecea;
  border-radius:9px;
  padding:9px 12px;
  margin-top:12px;
  display:none;
}
.cp-err.show{ display:block; }

.cp-foot{
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border, #e2e8e4);
  flex-shrink:0;
  background:#fff;
}
.cp-submit{
  width:100%;
  border:none;
  background:var(--green-dark, #0f5132);
  color:#fff;
  padding:13px;
  border-radius:10px;
  font-family:inherit; font-size:18px; font-weight:700;
  cursor:pointer;
  transition:opacity .16s ease;
}
.cp-submit:hover{ opacity:.92; }
.cp-submit:disabled{ background:#c3cec8; cursor:not-allowed; }

/* progress while saving */
.cp-saving{
  display:none;
  align-items:center; gap:9px;
  justify-content:center;
  font-size:16.5px; font-weight:600;
  color:var(--green-dark, #0f5132);
  padding:4px 0 8px;
}
.cp-saving.show{ display:flex; }
.cp-spin{
  width:17px; height:17px;
  border:2.5px solid var(--green-light, #e8f5ee);
  border-top-color:var(--green-dark, #0f5132);
  border-radius:50%;
  animation:cpspin .7s linear infinite;
}
@keyframes cpspin{ to{ transform:rotate(360deg); } }

/* toast */
.cp-toast{
  position:fixed;
  left:50%; bottom:26px;
  transform:translateX(-50%) translateY(12px);
  background:#0f5132;
  color:#fff;
  font-family:'Hind Siliguri', sans-serif;
  font-size:16.5px; font-weight:600;
  padding:11px 20px;
  border-radius:24px;
  z-index:10001;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  max-width:90vw; text-align:center;
}
.cp-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ================================================================
   4. PHOTO LIGHTBOX
   ================================================================ */
.pl-box{
  position:fixed; inset:0;
  background:rgba(8,12,10,.94);
  z-index:10002;
  display:none;
  align-items:center; justify-content:center;
  padding:56px 16px;
}
.pl-box.open{ display:flex; }
.pl-box img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  border-radius:8px;
}
.pl-x, .pl-prev, .pl-next{
  position:absolute;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.15);
  color:#fff;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.pl-x:hover, .pl-prev:hover, .pl-next:hover{ background:rgba(255,255,255,.32); }
.pl-x{ top:14px; right:14px; }
.pl-prev{ left:12px; top:50%; transform:translateY(-50%); }
.pl-next{ right:12px; top:50%; transform:translateY(-50%); }
.pl-x svg, .pl-prev svg, .pl-next svg{ width:20px; height:20px; }
.pl-count{
  position:absolute; top:20px; left:16px;
  color:#fff; font-size:16px; font-weight:600;
  font-family:'Hind Siliguri', sans-serif;
}

/* ================================================================
   5. RESPONSIVE
   ================================================================ */
@media (max-width:700px){
  .cp-overlay{ padding:0; align-items:flex-end; }
  .cp-head{
    padding-top:calc(16px + env(safe-area-inset-top, 0px));
    position:relative;
  }
  .cp-head::before{
    content:'';
    position:absolute; left:50%; top:6px;
    transform:translateX(-50%);
    width:38px; height:4px; border-radius:4px;
    background:var(--border, #e2e8e4);
  }
  .cp-modal{
    width:100%;
    max-height:92vh;
    max-height:92dvh;
    border-radius:16px 16px 0 0;
    transform:translateY(24px);
  }
  .cp-body{ padding:14px; }
  .cp-text{ font-size:19px; }
  .cp-tab span{ font-size:15.5px; }
  .pc-textcard{ font-size:21px; padding:28px 18px; min-height:150px; }
}
@media (max-width:380px){
  .cp-tab{ padding:8px 4px; font-size:15px; gap:4px; }
  .cp-tab svg{ width:14px; height:14px; }
  .cp-cats{ grid-template-columns:1fr; }
  .cp-thumbs{ grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); }
  .cp-head h3{ font-size:18px; }
}
@media (prefers-reduced-motion:reduce){
  .cp-overlay, .cp-modal, .cp-toast{ transition:none !important; }
  .cp-spin{ animation:none; }
}

/* ================================================================
   6. FITTING INTO THE EXISTING FEED CARDS
   ================================================================ */
.post-header .pc-del{ align-self:flex-start; }
.post-card .post-text{ white-space:pre-line; }
.post-action{ cursor:pointer; user-select:none; }
.post-action.liked{ color:var(--red, #e2231a) !important; }
.video-feed-action{ cursor:pointer; }

/* newly uploaded reel in the video grid gets a soft highlight */
.reel-card[data-post-id], .video-feed-card[data-post-id] .video-feed-thumb,
.mini-reel-card[data-post-id]{
  outline:2px solid var(--green, #1a7a4c);
  outline-offset:-2px;
}

/* category chip on a video post */
.pc-cat-chip{
  display:inline-block;
  font-size:14px; font-weight:700;
  background:var(--green-light, #e8f5ee);
  color:var(--green-dark, #0f5132);
  padding:2px 9px;
  border-radius:20px;
  vertical-align:middle;
  margin-left:4px;
}

/* red variant of the notice bar */
.pc-warn.pc-warn-bad{
  background:#fdecea;
  border-color:#f5c6c0;
}
.pc-warn.pc-warn-bad svg{ color:#c0392b; }
.pc-warn.pc-warn-bad .pc-warn-title{ color:#8f2018; }
.pc-warn.pc-warn-bad .pc-warn-text{ color:#a03328; }
.pc-warn.pc-warn-bad code{ background:#fbdad5; }
.pc-warn.pc-warn-bad .pc-warn-x{ color:#c0392b; }

/* ================================================================
   CALL TO ACTION PICKER
   ================================================================ */
.cp-cta{ margin-top:16px; }
.cp-cta-row{
  display:flex; gap:7px; flex-wrap:wrap;
  margin-bottom:10px;
}
.cp-cta-opt{
  border:1.5px solid var(--border, #e2e8e4);
  background:#fff;
  border-radius:20px;
  padding:8px 14px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--text, #1f2a24);
  cursor:pointer;
  white-space:nowrap;
}
.cp-cta-opt:hover{ border-color:var(--green, #1a7a4c); }
.cp-cta-opt.sel{
  border-color:var(--green-dark, #0f5132);
  background:var(--green-light, #e8f5ee);
  color:var(--green-dark, #0f5132);
  font-weight:700;
}
.cp-cta-fields{ display:flex; flex-direction:column; gap:9px; }
.cp-cta-hint{
  font-size:12px;
  color:var(--muted, #6b7a72);
  line-height:1.65;
}

@media (max-width:420px){
  .cp-cta-opt{ padding:8px 11px; font-size:12.5px; }
}