/* GOODLOAD — बातचीत का पर्दा
   ═══════════════════════════════════════════════════════════════
   demo से: अपना संदेश दाईं तरफ़ गहरा, सामने वाले का बाईं तरफ़
   हल्का। नीचे लिखने की पट्टी, दाईं तरफ़ नारंगी भेजने का बटन।
   ═══════════════════════════════════════════════════════════════ */

/* ── संदेशों वाला हिस्सा — यही सरकता है, पूरा पन्ना नहीं ── */
.cw-body{
  flex:1;
  min-height:0;                /* वरना flex में सरकना काम नहीं करता */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px clamp(12px,3.5vw,20px);
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ── एक संदेश ─────────────────────────────────────────────── */
.bub{
  position:relative;
  max-width:82%;
  padding:9px 12px 18px;
  border-radius:14px;
  font-size:.85rem;
  font-weight:600;
  line-height:1.5;
  word-break:break-word;       /* लंबा शब्द डिब्बे से बाहर न निकले */
  box-shadow:var(--shadow-sm);
}
.bub small{
  position:absolute;
  inset-block-end:5px; inset-inline-end:10px;
  bottom:5px; right:10px;
  font-size:.6rem; font-weight:700; opacity:.6;
}
.bub.uska{
  align-self:flex-start;
  background:#fff;
  border:1px solid var(--border);
  color:var(--txt);
  border-start-start-radius:4px;
}
.bub.mera{
  align-self:flex-end;
  background:#12233F;
  color:#fff;
  border-start-end-radius:4px;
}

/* ── नीचे लिखने की पट्टी ──────────────────────────────────── */
.cw-likhne{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:10px clamp(12px,3.5vw,20px) calc(10px + env(safe-area-inset-bottom));
  background:#fff;
  border-top:1px solid var(--border);
}
.cw-likhne input{
  flex:1; min-width:0;
  border-radius:1.4rem;
  font-weight:600;
}
.cw-send{
  flex:none;
  width:2.9rem; height:2.9rem;
  border-radius:50%;
  background:var(--acc);
  color:#fff;
  display:grid; place-items:center;
  box-shadow:0 5px 14px -5px rgba(240,112,13,.7);
}
.cw-send:active{ transform:scale(.94); }
.cw-send .ci{ width:var(--ic-md); height:var(--ic-md); }

/* ── ⋮ वाला मेनू — Play Store की शर्त यहीं रहती है ────────── */
#cw-menu-box{
  display:none;
  position:absolute;
  top:calc(52px + env(safe-area-inset-top));
  right:10px;
  z-index:40;
  background:#fff;
  border:1px solid var(--border);
  border-radius:.8rem;
  box-shadow:var(--shadow-lift, 0 12px 32px rgba(10,33,68,.18));
  overflow:hidden;
  min-width:12rem;
}
#cw-menu-box button{
  display:block;
  width:100%;
  text-align:start;
  padding:12px 14px;
  font-size:.85rem;
  font-weight:700;
  color:var(--txt);
  border-bottom:1px solid #F0F3F9;
}
#cw-menu-box button:last-child{ border-bottom:0; color:var(--red); }
#cw-menu-box button:active{ background:#F2F5FA; }

#chatwin{ position:relative; }