/* /sms-whatsapp/ — page-only styles. Every selector is scoped to .page-sms-whatsapp.
   Tokens and components come from site.css (docs/site-v3/COMPONENTS.md). Channel colour: SMS coral.
   1. Hero: the compose screen on a phone, the delivered SMS lifted off its edge
   2. SMS module: the real screen across the page
   3. SMS length checker (.smsc): live count of SMS parts, with and without diacritics; the photo
   4. WhatsApp and chat (night band): the real conversation that builds as you scroll */


/* 1. Hero ------------------------------------------------------------------- */
/* The SMS is the same screen's phone preview (below the phone's window, so never seen twice). It
   hangs off the phone's left edge over the bezel and the card margin only: every field stays legible. */
.page-sms-whatsapp .sw-hero__stage {
  width: min(100%, 320px);
  margin-inline: auto;
}
.page-sms-whatsapp .sw-hero__phone { --phone-w: 100%; }
.page-sms-whatsapp .sw-hero__lift { --lw: 72%; --lx: -64%; --ly: 42%; }
.page-sms-whatsapp .sw-hero .phero__cap { max-width: 30em; margin-inline: auto; text-align: center; text-wrap: balance; }
@media (min-width: 1100px) {
  .page-sms-whatsapp .sw-hero__stage { margin-right: max(0px, calc(50% - 250px)); }
}
@media (min-width: 1600px) {
  .page-sms-whatsapp .sw-hero__stage { width: 350px; }
}
/* Phones: no room on the left, so the phone steps left and the SMS overlaps its right edge, where
   the form shows only the dropdown arrows */
@media (max-width: 759.98px) {
  .page-sms-whatsapp .sw-hero__stage { width: min(70%, 256px); margin-left: 4%; }
  .page-sms-whatsapp .sw-hero__lift { --lw-sm: 48%; --lx: 82%; --ly: 40%; }
}


/* 2. SMS module -------------------------------------------------------------- */
.page-sms-whatsapp .sw-sms__tags { margin-top: var(--s5); }
.page-sms-whatsapp .sw-sms__media .caption { margin-top: var(--s4); }
@media (max-width: 759.98px) {
  .page-sms-whatsapp .sw-sms__media .frame { max-width: 360px; margin-inline: auto; }
}


/* 3. SMS length checker ------------------------------------------------------ */
/* A white card on the lavender ground; the two results are tinted tiles in the SMS coral and
   the brand violet, so the cost of the diacritics reads at a glance */
.page-sms-whatsapp .smsc {
  padding: clamp(20px, 2vw, 32px);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
.page-sms-whatsapp .smsc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
}
.page-sms-whatsapp .smsc__len {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--violet-50);
  color: var(--slate);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.page-sms-whatsapp .smsc__input { min-height: 128px; margin-top: var(--s3); }

.page-sms-whatsapp .smsc__out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: var(--s4);
  margin-top: var(--s5);
}
/* Subgrid keeps number, label, meter and note on shared rows when a label wraps */
.page-sms-whatsapp .smsc__col {
  --tone: var(--coral-ink);
  --fill: var(--coral);
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
  padding: 18px 20px 20px;
  border-radius: var(--r-lg);
  background: var(--coral-tint);
}
.page-sms-whatsapp .smsc__col--plain {
  --tone: var(--violet-700);
  --fill: var(--violet);
  background: var(--violet-tint);
}
.page-sms-whatsapp .smsc__num {
  color: var(--tone);
  font-size: clamp(2.75rem, 2.1rem + 1.9vw, 4rem);
  font-weight: 800;
  font-stretch: var(--wd-num);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.page-sms-whatsapp .smsc__label { margin-top: var(--s2); color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.4; }
.page-sms-whatsapp .smsc__label [data-smsc-unit] { white-space: nowrap; }

/* One bar per SMS part; the fill is the share of that part in use */
.page-sms-whatsapp .smsc__meter { display: flex; gap: 4px; margin-top: var(--s4); }
.page-sms-whatsapp .smsc__seg {
  flex: 1 1 0;
  min-width: 0;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--paper);
}
.page-sms-whatsapp .smsc__seg > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fill);
  transition: width var(--t-fast) var(--ease);
}
.page-sms-whatsapp .smsc__meta {
  margin-top: var(--s2);
  color: var(--slate);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* Which characters force Unicode */
.page-sms-whatsapp .smsc__why { margin-top: var(--s4); color: var(--slate); font-size: .9375rem; line-height: 1.9; }
.page-sms-whatsapp .smsc__chars { white-space: normal; }
.page-sms-whatsapp .smsc__char {
  display: inline-block;
  min-width: 1.9em;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--coral-tint);
  color: var(--coral-ink);
  font-weight: 650;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 419.98px) {
  .page-sms-whatsapp .smsc__out { column-gap: var(--s2); }
  .page-sms-whatsapp .smsc__col { padding: 14px 14px 16px; }
}

/* The illustrative photo under the text: the customer who reads the message */
.page-sms-whatsapp .sw-len__photo { margin-top: var(--s7); }
.page-sms-whatsapp .sw-len__photo figcaption { margin-top: var(--s3); }
@media (max-width: 899.98px) {
  .page-sms-whatsapp .sw-len__photo { max-width: 560px; margin-top: var(--s6); }
}


/* 4. WhatsApp and chat ------------------------------------------------------- */
/* The four real messages (cut-outs of the chat screen), the customer on the left and the AI agent
   on the right. sms-whatsapp.js builds them one by one while the section scrolls (pinned on large
   screens); without JS or with reduced motion they are simply all there. */
.page-sms-whatsapp .sw-thread { --bw: 460px; }
.page-sms-whatsapp .sw-thread__list {
  display: grid;
  gap: 18px;
  max-width: 560px;
  margin-inline: auto;
}
.page-sms-whatsapp .sw-msg {
  width: min(100%, calc(var(--bw) * var(--w, 402) / 402));
  height: auto;
  filter: drop-shadow(0 2px 3px rgb(8 4 30 / .3)) drop-shadow(0 18px 28px rgb(8 4 30 / .5));
}
.page-sms-whatsapp .sw-msg--out { justify-self: end; }
.page-sms-whatsapp .sw-thread .caption { max-width: 560px; margin: var(--s5) auto 0; }
.page-sms-whatsapp .sw-play { margin-top: clamp(64px, 6vw, 112px); }
@media (max-width: 759.98px) {
  .page-sms-whatsapp .sw-thread { --bw: 92%; }
  .page-sms-whatsapp .sw-thread__list { gap: 12px; }
  .page-sms-whatsapp .sw-play .frame { max-width: 400px; margin-inline: auto; }
}