/* ── THE TEXT SEND SCREEN ─────────────────────────────────────────────────────
   Paired with marketing-hub-sms.js, which carries the argument for why a text
   does not go out through the shared email sheet.

   It borrows `.cb-overlay`, `.cb-card`, `.cb-btn` and `.cb-note` from the piece
   builder's stylesheet so the two screens are visibly the same product — this
   file only adds what a phone needs and an inbox does not.
   ───────────────────────────────────────────────────────────────────────────── */

/* ⚠️ ABOVE THE REVIEW POPUP IT OPENS FROM, AND UNDER THE TOAST LAYER. The review
   overlay sits at 1000060 and stays up behind this on purpose; the toast floor
   is 2000400 and this must never cover its own confirmations — the same two
   bounds MhPick measures against. A number rather than a measurement is safe
   here only because this screen opens from exactly one place. */
.mhsms-ov {
  position: fixed; inset: 0; z-index: 1000120;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 23, 42, .42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

.mhsms-card {
  display: flex; flex-direction: column; width: min(560px, 100%);
  max-height: min(88vh, 860px); overflow: hidden;
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
}

.mhsms-h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 22px 14px; border-bottom: 1px solid #eceef1;
}

.mhsms-h b { display: block; font-size: 16px; font-weight: 700; color: #0f172a; letter-spacing: -.01em; }
.mhsms-h p { margin: 3px 0 0; font-size: 12.5px; color: #6b7280; }

.mhsms-x {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: #94a3b8; font-size: 19px; line-height: 1; cursor: pointer;
}
.mhsms-x:hover { background: #f1f5f9; color: #0f172a; }
.mhsms-x:disabled { opacity: .4; cursor: not-allowed; }

/* ⚠️ `min-height: 0` ON A FLEX CHILD THAT SCROLLS. Without it the body refuses
   to shrink below its content and the footer — with the Send button in it — is
   pushed off the bottom of the viewport on a long recipient list. */
.mhsms-b { padding: 16px 22px; overflow: auto; min-height: 0; }

.mhsms-sec { margin-bottom: 20px; }
.mhsms-sec:last-child { margin-bottom: 0; }

.mhsms-sec-h {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px;
  font-size: 11px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .045em;
}

.mhsms-sec-h em {
  font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: 11px; font-weight: 500; color: #9aa1ab;
}

/* ── the message, as it lands ──────────────────────────────────────────────
   Deliberately not a form control. See the note in shellHtml(). */
.mhsms-phone {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px; border-radius: 14px; background: #f4f5f7;
}

.mhsms-bubble {
  max-width: 84%; padding: 9px 13px; border-radius: 17px 17px 17px 5px;
  background: #fff; border: 1px solid #e3e5e9;
  font-size: 13.5px; line-height: 1.45; color: #0f172a;
  /* A text has no markup, so a long URL is the one thing that can blow the
     bubble out past the card. */
  overflow-wrap: anywhere;
}

.mhsms-bubble i { color: #9aa1ab; }

/* The appended opt-out line, drawn as what it is: not ours, not approved with
   the copy, and not editable. */
.mhsms-bubble.is-sys {
  background: #eceef1; border-color: #e3e5e9; color: #6b7280; font-size: 12px;
}

.mhsms-segline {
  margin-top: 9px; font-size: 12px; color: #4b5563;
}
.mhsms-segline b { color: #0f172a; }

/* Amber, never red. A multi-segment text sends perfectly well and simply costs
   more — the same distinction charOver() draws in the piece builder. */
.mhsms-segline.is-warn { color: #92400e; }
.mhsms-segline.is-warn b { color: #92400e; }

/* ── who gets it ──────────────────────────────────────────────────────────── */
.mhsms-rlist { border: 1px solid #eceef1; border-radius: 12px; overflow: hidden; }

.mhsms-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-bottom: 1px solid #f1f2f4;
}
.mhsms-row:last-child { border-bottom: 0; }

.mhsms-row-ic { flex: none; font-size: 9px; line-height: 1; }
.mhsms-row-ic.is-g { color: #0891b2; }
.mhsms-row-ic.is-p { color: #7c3aed; }

.mhsms-row-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.mhsms-row-t b { font-size: 13px; font-weight: 600; color: #0f172a; }

/* The named-people row lists who they are, and a long list must truncate rather
   than wrap to four lines and push the count out of view. */
.mhsms-row-t i {
  font-style: normal; font-size: 11.5px; color: #9aa1ab;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mhsms-row-n {
  flex: none; font-size: 13px; font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.mhsms-empty, .mhsms-warn {
  padding: 11px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.5;
}
.mhsms-empty { background: #f8f9fa; border: 1px solid #eceef1; color: #6b7280; }

/* A group that could not be read means a SHORT list going out, which is the
   quiet failure this box exists to make loud. */
.mhsms-warn { margin-top: 9px; background: #fff4f2; border: 1px solid #f6cfc6; color: #9a3412; }

.mhsms-held {
  display: block; width: 100%; margin-top: 9px; padding: 9px 12px;
  border: 1px solid #eceef1; border-radius: 11px; background: #fbfbfc;
  font-size: 12.5px; color: #6b7280; text-align: left; cursor: pointer;
}
.mhsms-held:hover { background: #f4f5f7; }
.mhsms-held b { color: #0f172a; }

.mhsms-heldlist {
  display: none; padding: 9px 12px 0; font-size: 11.5px; color: #9aa1ab; line-height: 1.5;
}
.mhsms-heldlist.is-open { display: block; }

/* ── what it costs ────────────────────────────────────────────────────────── */
.mhsms-cost {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border: 1px solid #eceef1; border-radius: 12px; background: #fbfbfc;
}

.mhsms-cost > div { display: flex; flex-direction: column; gap: 1px; }
.mhsms-cost span { font-size: 19px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.mhsms-cost i { font-style: normal; font-size: 10.5px; color: #9aa1ab; }
.mhsms-cost .is-total span { color: #0d9488; }
.mhsms-x-op { font-size: 14px; color: #cbd0d6; }

/* ── the typed confirmation ───────────────────────────────────────────────── */
.mhsms-confirm {
  display: flex; flex-direction: column; gap: 7px; margin-top: 4px;
  padding: 13px 15px; border: 1px solid #f6cfc6; border-radius: 12px; background: #fff8f6;
}

.mhsms-confirm label { display: flex; flex-direction: column; gap: 2px; }
.mhsms-confirm b { font-size: 13px; color: #9a3412; }
.mhsms-confirm code {
  padding: 1px 5px; border-radius: 5px; background: #fee3da; color: #7c2d12;
  font-size: 12.5px; font-weight: 700;
}
.mhsms-confirm span { font-size: 11.5px; color: #b45309; }
.mhsms-confirm .cb-input { max-width: 160px; }

.mhsms-blocked {
  display: none; margin-top: 12px; padding: 10px 13px;
  border: 1px solid #f6cfc6; border-radius: 11px; background: #fff4f2;
  font-size: 12.5px; color: #9a3412;
}
.mhsms-blocked.is-on { display: block; }

/* Amber, not red: an unapproved A2P registration is a risk to DELIVERY, not a
   refusal to send. Red beside a live Send button says "this will fail". */
.mhsms-blocked.is-warn {
  border-color: #fcd9a4; background: #fffbf2; color: #92400e;
}

/* ── progress ─────────────────────────────────────────────────────────────── */
.mhsms-prog { display: none; margin-top: 14px; }
.mhsms-prog.is-on { display: block; }

.mhsms-bar { height: 5px; border-radius: 3px; background: #eceef1; overflow: hidden; }
.mhsms-bar span { display: block; height: 100%; background: #0d9488; transition: width .25s; }
.mhsms-progt { margin-top: 6px; font-size: 11.5px; color: #6b7280; font-variant-numeric: tabular-nums; }

/* ── footer ───────────────────────────────────────────────────────────────── */
.mhsms-f {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 22px 16px; border-top: 1px solid #eceef1; background: #fafbfc;
}

.mhsms-foot { font-size: 11.5px; color: #9aa1ab; }
.mhsms-fbtns { display: flex; gap: 8px; }

/* ⚠️ `#mhSmsSend .cb-btn`, NOT `.cb-btn`. dashboard-meta.js injects a runtime
   `button:not(...){border-radius:var(--wt-theme-btn-radius)!important}` that
   beats a class even with !important, so every button on this screen renders as
   a capsule unless the selector carries an id.
   reference_runtime_button_radius_beats_classes. */
#mhSmsSend .cb-btn { border-radius: 10px !important; }

#mhSmsSend .cb-btn.is-primary {
  background: #0d9488; border-color: #0d9488; color: #fff;
}
#mhSmsSend .cb-btn.is-primary:hover:not(:disabled) { background: #0f766e; border-color: #0f766e; }
#mhSmsSend .cb-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 560px) {
.mhsms-ov { padding: 0; align-items: stretch; }
.mhsms-card { width: 100%; max-height: 100%; border-radius: 0; }
.mhsms-cost { flex-wrap: wrap; }
.mhsms-f { flex-direction: column-reverse; align-items: stretch; }
.mhsms-fbtns { display: grid; grid-template-columns: 1fr 1fr; }
}