/* ============================================================================
   Buyer "Send Message" popup — chat-style redesign (2026-07-21)

   Replaces the old plain form (First/Last/Email/Phone/Message + captcha) with a
   conversation view. Eric picked "Option 1 — warm cream": the thread sits on the
   same cream already used for admin card headers (#f7f4ee) and the compose area
   stays white, so the two zones read as separate. Previously every section was
   white and the popup looked like one undifferentiated block.

   Scoped entirely under .mlMsg* class names and NOT touching product-list.css, so
   nothing else on the listing pages can be affected by these rules.
   ========================================================================== */

.mlMsgPopup{
  --mlm-orange:#ff8922;
  --mlm-orange-d:#e9760f;
  --mlm-navy:#1B3047;
  --mlm-ink:#1f2733;
  --mlm-muted:#6b7787;
  --mlm-faint:#9aa4b1;
  --mlm-line:#e7eaef;
  --mlm-cream:#f7f4ee;      /* the conversation */
  --mlm-creamLine:#eae3d8;  /* borders that sit on cream */

  position:fixed; inset:0; z-index:100000;
  display:none; align-items:center; justify-content:center;
  padding:20px;
  font-family:'Gotham-Book',-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--mlm-ink);
}
.mlMsgPopup.isOpen{ display:flex; }
.mlMsgPopup *{ box-sizing:border-box; }
.mlMsgPopup [hidden]{ display:none !important; }

.mlMsgOverlay{ position:absolute; inset:0; background:rgba(16,24,38,.55); }

.mlMsgCard{
  position:relative; z-index:1;
  background:#fff; width:100%; max-width:620px;
  border-radius:16px; border:1px solid #e3e7ec;
  box-shadow:0 24px 60px rgba(18,30,55,.28);
  overflow:hidden; display:flex; flex-direction:column;
  max-height:calc(100vh - 40px);
}

/* ---- seller header ---- */
.mlMsgHead{ display:flex; align-items:center; gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--mlm-line); flex:0 0 auto; }
.mlMsgAv{ width:44px; height:44px; border-radius:50%; background:#b06a16; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Gotham-Bold',sans-serif; font-size:17px; flex:0 0 auto; }
.mlMsgWho{ flex:1; min-width:0; }
.mlMsgWho .t{ font-family:'Gotham-Bold',sans-serif; font-size:16.5px; line-height:1.2;
  letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlMsgWho .s{ color:var(--mlm-muted); font-size:12.5px; margin-top:2px; }
.mlMsgVerified{ display:inline-flex; align-items:center; gap:5px; background:#f1fbf5;
  color:#1b7a45; border:1px solid #bfe6cd; border-radius:999px; padding:3px 10px;
  font-family:'Gotham-Medium',sans-serif; font-size:11.5px; flex:0 0 auto; }
.mlMsgVerified svg{ width:12px; height:12px; display:block; }
.mlMsgClose{ width:32px; height:32px; border-radius:8px; border:1px solid var(--mlm-line);
  background:#fff; color:var(--mlm-muted); display:flex; align-items:center;
  justify-content:center; cursor:pointer; flex:0 0 auto; padding:0; }
.mlMsgClose:hover{ background:#f6f8fb; color:var(--mlm-ink); }
.mlMsgClose svg{ width:15px; height:15px; display:block; }

/* ---- the conversation (cream) ---- */
.mlMsgThread{ padding:16px 18px; background:var(--mlm-cream); flex:1 1 auto;
  min-height:250px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.mlMsgPinned{ background:#fff; border:1px solid var(--mlm-creamLine); border-radius:12px;
  padding:10px; display:flex; gap:11px; align-items:center; flex:0 0 auto; }
.mlMsgThumb{ width:58px; height:44px; border-radius:8px; flex:0 0 auto; object-fit:cover;
  background:#e8ded1; display:block; }
.mlMsgPinnedT{ flex:1; min-width:0; }
.mlMsgPinnedT .n{ font-family:'Gotham-Medium',sans-serif; font-size:14px; line-height:1.25; }
.mlMsgPinnedT .m{ color:var(--mlm-muted); font-size:12px; margin-top:2px; }
.mlMsgPrice{ font-family:'Gotham-Bold',sans-serif; font-size:16px; color:var(--mlm-navy);
  flex:0 0 auto; white-space:nowrap; }

/* centres in the space left under the pinned listing */
.mlMsgEmpty{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding:10px; color:var(--mlm-muted);
  font-size:13px; line-height:1.55; }
.mlMsgEmpty b{ font-family:'Gotham-Medium',sans-serif; font-size:14.5px;
  color:var(--mlm-ink); display:block; margin-bottom:4px; font-weight:normal; }

.mlMsgBubbleRow{ display:flex; justify-content:flex-end; }
.mlMsgBubble{ background:var(--mlm-orange); color:#fff; border-radius:15px 15px 4px 15px;
  padding:11px 15px; font-size:14px; line-height:1.45; max-width:80%;
  white-space:pre-wrap; word-wrap:break-word; }
.mlMsgStamp{ font-size:11px; color:var(--mlm-faint); text-align:right; margin-top:4px; }

/* phone ask — appears in the thread AFTER the first message is sent */
.mlMsgPhoneCard{ background:#fff; border:1px solid var(--mlm-creamLine);
  border-left:3px solid var(--mlm-orange); border-radius:12px; padding:12px 13px; flex:0 0 auto; }
.mlMsgPhoneCard .ct{ font-family:'Gotham-Medium',sans-serif; font-size:13.5px; line-height:1.3; }
.mlMsgPhoneCard .cs{ font-size:12.5px; color:var(--mlm-muted); margin:3px 0 10px; line-height:1.45; }
.mlMsgPhoneRow{ display:flex; align-items:center; gap:8px; }
.mlMsgPhoneInput{ flex:1; min-width:0; border:1px solid var(--mlm-line); border-radius:9px;
  padding:9px 12px; font-family:'Gotham-Book',sans-serif; font-size:13.5px;
  color:var(--mlm-ink); background:#fff; outline:none; }
.mlMsgPhoneInput:focus{ border-color:#ffc588; box-shadow:0 0 0 3px rgba(255,137,34,.13); }
.mlMsgPhoneInput.isBad{ border-color:#f0cfcf; }
.mlMsgPhoneSave{ background:var(--mlm-orange); border:none; color:#fff;
  font-family:'Gotham-Medium',sans-serif; font-size:13px; padding:9px 16px;
  border-radius:9px; cursor:pointer; flex:0 0 auto; }
.mlMsgPhoneSave:hover{ background:var(--mlm-orange-d); }
.mlMsgPhoneSave:disabled{ background:#d7dce3; cursor:not-allowed; }
.mlMsgSkip{ font-family:'Gotham-Medium',sans-serif; font-size:12.5px; color:var(--mlm-muted);
  cursor:pointer; background:none; border:none; padding:0 2px; flex:0 0 auto; }
.mlMsgSkip:hover{ text-decoration:underline; }
.mlMsgPhoneDone{ display:flex; align-items:center; gap:8px; font-size:13px; color:#1b7a45; }
.mlMsgPhoneDone svg{ width:15px; height:15px; flex:0 0 auto; display:block; }
.mlMsgErr{ color:#a23b3b; font-size:12px; margin-top:7px; }

/* ---- white compose dock: starters + composer + footer ---- */
.mlMsgStarters{ padding:11px 18px 0; background:#fff; flex:0 0 auto;
  display:flex; align-items:center; gap:7px; border-top:1px solid var(--mlm-creamLine); }
.mlMsgChips{ flex:1; min-width:0; display:flex; gap:7px; overflow-x:auto;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.mlMsgChips::-webkit-scrollbar{ display:none; }
/* fade the clipped pill at whichever edge has more, so it reads as "there's more"
   rather than looking like a rendering bug */
.mlMsgChips.fadeR{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
                           mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); }
.mlMsgChips.fadeL{ -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);
                           mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent); }
.mlMsgChips.fadeL.fadeR{ -webkit-mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent);
                                 mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent); }
.mlMsgChip{ flex:0 0 auto; white-space:nowrap; border:1px solid var(--mlm-line);
  background:#fff; border-radius:999px; padding:7px 13px; font-family:'Gotham-Book',sans-serif;
  font-size:12.5px; color:#42505f; cursor:pointer; transition:.12s; }
.mlMsgChip:hover{ border-color:#ffd9b0; background:#fff8f1; color:#b5650b; }
.mlMsgChip.isUsed{ opacity:.4; pointer-events:none; }
.mlMsgArrow{ width:27px; height:27px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--mlm-line); background:#fff; color:#5a6675; display:flex;
  align-items:center; justify-content:center; cursor:pointer; padding:0; }
.mlMsgArrow:hover{ border-color:#ffd9b0; background:#fff8f1; color:var(--mlm-orange-d); }
.mlMsgArrow svg{ width:13px; height:13px; display:block; }

.mlMsgComposer{ display:flex; align-items:flex-end; gap:9px; padding:11px 18px 10px; background:#fff; }
.mlMsgBox{ flex:1; min-width:0; }
.mlMsgInput{ width:100%; min-height:44px; max-height:110px; border:1px solid var(--mlm-line);
  border-radius:22px; padding:12px 16px; font-family:'Gotham-Book',sans-serif; font-size:13.5px;
  color:var(--mlm-ink); line-height:1.5; resize:none; outline:none; background:#fff; display:block; }
.mlMsgInput:focus{ border-color:#ffc588; box-shadow:0 0 0 3px rgba(255,137,34,.13); }
.mlMsgCount{ font-size:11px; color:var(--mlm-faint); text-align:right; margin-top:5px; padding-right:6px; }
.mlMsgCount.isOver{ color:#a23b3b; }
.mlMsgSend{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; background:var(--mlm-orange);
  border:none; color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin-bottom:2px; }
.mlMsgSend:hover:not(:disabled){ background:var(--mlm-orange-d); }
.mlMsgSend:disabled{ background:#d7dce3; cursor:not-allowed; }
.mlMsgSend svg{ width:18px; height:18px; display:block; }
.mlMsgSend.isBusy{ opacity:.6; pointer-events:none; }

.mlMsgFoot{ font-size:11.5px; color:var(--mlm-muted); padding:0 18px 13px;
  line-height:1.45; background:#fff; }
.mlMsgFoot b{ font-family:'Gotham-Medium',sans-serif; font-weight:normal; color:#42505f; }

@media (max-width:560px){
  .mlMsgPopup{ padding:0; }
  .mlMsgCard{ max-width:100%; height:100%; max-height:100%; border-radius:0; border:0; }
  /* header: avatar + name + close on row 1, Verified pill drops to row 2 --
     side by side the pill squeezed the name into a 3-line column and overlapped
     the seller's location */
  .mlMsgHead{ flex-wrap:wrap; padding:13px 15px; gap:10px; }
  .mlMsgAv{ order:1; width:40px; height:40px; font-size:15px; }
  .mlMsgWho{ order:2; flex:1 1 0; }
  .mlMsgClose{ order:3; }
  .mlMsgHead:after{ content:""; order:4; flex:0 0 100%; height:0; }
  .mlMsgVerified{ order:5; margin-left:50px; }
  .mlMsgThread,.mlMsgStarters,.mlMsgComposer,.mlMsgFoot{ padding-left:15px; padding-right:15px; }
  /* on touch you swipe the pills; arrows would only steal width */
  .mlMsgArrow{ display:none; }
}