/* ==========================================================================
   Stage 9 — written messages (platform → merchants, merchant → customers),
   the platform Customers tab, and the storefront message strip.
   ========================================================================== */

/* ---------- the strip on the storefront ---------- */
.smsg-wrap{
  display:flex;flex-direction:column;gap:8px;
  max-width:1120px;margin:14px auto 0;padding:0 16px;
}
.smsg{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 14px;border-radius:16px;
  background:var(--grad-soft,linear-gradient(120deg,#F6ECFB 0%,#FFF1E8 100%));
  border:1px solid rgba(120,0,144,.14);
  box-shadow:0 14px 28px -24px rgba(58,0,72,.5);
}
.smsg-ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:10px;font-size:15px;
  background:#fff;color:var(--violet,#780090);
}
.smsg-txt{flex:1;min-width:0;font-size:13.5px;line-height:1.55;color:var(--ink,#1B0B2A)}
.smsg-txt b{display:block;font-size:14px;color:var(--violet-3,#4A0059);margin-bottom:2px}
.smsg-txt span{display:block;color:var(--muted,#6E6480)}
.smsg-x{
  flex:none;background:none;border:0;cursor:pointer;font-size:19px;line-height:1;
  color:var(--muted,#6E6480);padding:0 2px;
}
.smsg-x:hover{color:var(--bad,#D92D20)}

/* ---------- compose forms ---------- */
.msg-form textarea{min-height:120px;resize:vertical}
.msg-aud{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 4px}
.msg-aud-opt{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:10px 15px;border-radius:999px;
  border:1px solid var(--line,#EEE3F6);background:#fff;
  font-size:13.5px;font-weight:600;color:var(--muted,#6E6480);
  transition:border-color .16s ease,color .16s ease,background .16s ease,box-shadow .16s ease;
}
.msg-aud-opt input{accent-color:var(--violet,#780090);margin:0}
.msg-aud-opt:has(input:checked){
  border-color:rgba(120,0,144,.4);
  background:var(--violet-soft,#F6ECFB);
  color:var(--violet,#780090);
  box-shadow:0 0 0 4px rgba(120,0,144,.08);
}
.msg-client[hidden]{display:none}
.card-title{margin:0 0 12px;font-size:16px}

/* ---------- sent message rows ---------- */
.msg-body{
  display:block;margin-top:6px;white-space:normal;
  font-size:13.5px;line-height:1.6;color:var(--ink,#1B0B2A);
  background:#FCFAFF;border:1px solid var(--line,#EEE3F6);
  border-radius:12px;padding:9px 12px;max-width:640px;
}
.msg-list .tbl-row{align-items:flex-start}
.msg-row .tbl-status{display:flex;flex-direction:column;align-items:flex-end;gap:7px}

/* ---------- platform customers table ---------- */
.cust-tbl .cust-row{align-items:center;gap:14px}
.cust-tbl .tbl-main b{font-size:15px;letter-spacing:.2px}
.cust-tbl .tbl-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:130px}
.cust-tbl .money-usd{color:var(--violet,#780090);font-weight:700}
.mnote{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted,#6E6480)}

@media (max-width:720px){
  .msg-row,.cust-tbl .cust-row{flex-direction:column;align-items:stretch}
  .msg-row .tbl-status,.cust-tbl .tbl-status{align-items:flex-start;min-width:0}
  .smsg-wrap{padding:0 12px;margin-top:10px}
  .msg-aud-opt{padding:9px 13px;font-size:13px}
}

/* platform-origin badge on the storefront strip + the small "recipients" label */
.smsg-tag{
  display:inline-block;margin-bottom:4px;padding:2px 8px;border-radius:999px;
  background:#fff;color:var(--violet,#780090);font-size:11px;font-weight:700;
  font-style:normal;letter-spacing:.2px;
}
.msg-aud-lbl{align-self:center;font-size:12.5px;font-weight:600;color:var(--muted,#6E6480)}