/* Product-specific conversations, objects and delivery routes preserve the
   shared scenario card grid and copy rows. */
.sms-page[data-product="whatsapp"] .sms-scenario {
  grid-template-rows: minmax(116px, auto) 300px;
}
.sms-page[data-product="whatsapp"] .sms-scenario-visual {
  display: block;
  width: 100%;
  height: 300px;
  margin: 0;
  aspect-ratio: auto;
}
.wa-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 580px;
  height: 100%;
  margin-inline: auto;
  color: #10264d;
  font-size: 12px;
  line-height: 1.45;
}
.wa-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 2%;
  background: radial-gradient(#517fbf50 1px, transparent 1.5px) 0 0 / 13px 13px;
  mask-image: radial-gradient(ellipse, #000 15%, transparent 72%);
}
.wa-scene--retail::before {
  background-image: radial-gradient(#b8d3ff80 1px, transparent 1.5px);
}
.wa-scene svg { width: 18px; height: 18px; flex: none; }
.wa-scene__sender { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11px; line-height: 16px; }
.wa-scene__sender > svg:first-child { color: #247051; }
.wa-scene__sender > svg:last-child { width: 14px; height: 14px; color: #376bd7; margin-left: auto; }
.wa-scene__sender b { font-weight: 600; }
.wa-scene__muted { display: block; color: #536783; font-size: 11px; line-height: 17px; }

/* A WhatsApp customer conversation inside a recognizable phone. */
.wa-scene .wa-finance__bank {
  position: absolute;
  left: 7%;
  top: 64px;
  width: 144px;
  height: 162px;
}
.wa-handset {
  position: absolute;
  top: -14px;
  left: 64%;
  width: 232px;
  height: 382px;
  overflow: hidden;
  border: 5px solid #193e6e;
  border-radius: 31px;
  background: #e9f0eb;
  box-shadow: 0 14px 30px #163c6d24;
  transform: translateX(-50%) rotate(-8deg);
  text-align: start;
}
.wa-handset__status { display: flex; align-items: center; justify-content: space-between; height: 27px; padding: 3px 17px 0; font-size: 8px; font-weight: 600; color: #1e3e50; }
.wa-handset__status i { width: 55px; height: 10px; background: #193e6e; border-radius: 0 0 8px 8px; align-self: start; }
.wa-handset__header { display: flex; align-items: center; gap: 6px; padding: 6px 7px; background: #086859; color: #fff; }
.wa-handset__header > svg { width: 15px; height: 15px; }
.wa-handset__header b { display: block; font-size: 10px; line-height: 13px; font-weight: 600; }
.wa-handset__header small { display: block; margin-top: 2px; font-size: 8px; line-height: 11px; color: #e1f6ee; }
.wa-handset__avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #e4f3ec; color: #086859; flex: none; }
.wa-handset__chat { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 9px; }
.wa-handset__day { align-self: center; padding: 2px 8px; border-radius: 5px; background: #f8fcf8; color: #52675d; font-size: 8px; line-height: 11px; }
.wa-chat { min-width: 0; max-width: 96%; font-size: 10px; line-height: 14px; }
.wa-chat--in { display: grid; gap: 3px; width: 94%; padding: 9px 10px 0; border-radius: 2px 9px 9px; background: #fff; }
.wa-chat--in b { font-size: 11px; line-height: 15px; }
.wa-chat--in strong { font-size: 23px; line-height: 27px; letter-spacing: -.02em; }
.wa-chat--in > span:not(.wa-chat__action) { color: #536783; }
.wa-chat__action { margin: 4px -10px 0; padding: 7px 5px; border-top: 1px solid #e2e9e5; color: #086859; text-align: center; font-weight: 600; font-size: 10px; line-height: 14px; }
.wa-chat--out { align-self: flex-end; display: grid; gap: 3px; padding: 7px 9px; border-radius: 9px 2px 9px 9px; background: #d8f4c4; }
.wa-chat--out small { display: flex; gap: 3px; align-items: center; justify-self: end; font-size: 7px; line-height: 10px; color: #476653; }
.wa-chat--out small svg { width: 13px; height: 10px; color: #286a9c; }
.wa-chat--confirmation { display: flex; align-items: center; gap: 5px; padding: 7px 8px; background: #fff; border-radius: 2px 9px 9px; }
.wa-chat--confirmation > svg { width: 12px; height: 12px; color: #3c752e; }
.wa-chat--confirmation small { font-size: 7px; line-height: 10px; color: #61746b; }
.wa-handset__input { position: absolute; inset: auto 7px 13px; display: flex; align-items: center; gap: 7px; padding: 5px 8px; background: #fff; border-radius: 16px; color: #52675d; }
.wa-handset__input span { flex: 1; font-size: 9px; line-height: 13px; }
.wa-handset__input svg { width: 13px; height: 13px; }
.wa-handset__home { position: absolute; bottom: 4px; left: 36%; width: 28%; height: 3px; border-radius: 3px; background: #243c34; }

/* Only the retail scene keeps the layered product/message composition. */
.wa-scene__product { position: absolute; top: 18px; left: 1%; width: 66%; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 12px 26px #102c5814; transform: rotate(-4deg); }
.wa-scene__product .wa-scene__sender { margin-bottom: 8px; }
.wa-scene__product img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.wa-scene__message { position: absolute; padding: 14px; border-radius: 13px; background: #e7efff; box-shadow: 0 10px 26px #00112a24; }
.wa-scene__message > strong { display: block; margin: 9px 0 5px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.wa-scene__order { right: 0; bottom: 8px; width: 70%; }
.wa-scene__message-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; line-height: 15px; }
.wa-scene__message-top small { font-size: 9px; color: #536783; }
.wa-scene__reply { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #cbd9ef; color: #2858ba; font-size: 11px; line-height: 16px; font-weight: 500; }
.wa-scene__reply svg { width: 14px; height: 14px; }
.wa-scene__retail-status { position: absolute; bottom: 12px; left: 1%; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: 27%; color: #d7e5ff; font-size: 10px; line-height: 15px; }
.wa-scene__retail-status svg { width: 25px; height: 25px; padding: 4px; border-radius: 50%; background: #c7e981; color: #26461e; }

/* A free-standing controller and an actual WhatsApp invitation distinguish
   gaming from the Email product's physical ticket illustration. */
.wa-game__controller { position: absolute; top: -4px; left: 50%; display: block; width: 80%; height: 185px; object-fit: contain; transform: translateX(-50%) rotate(10deg); }
.wa-notice { color: #10264d; background: #fff; padding: 12px 14px; border-radius: 3px 14px 14px; box-shadow: 0 9px 24px #102c581c; }
.wa-notice__header { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 16px; }
.wa-notice__header > svg { width: 18px; height: 18px; color: #187653; }
.wa-notice__header b { font-weight: 600; }
.wa-notice__header small { margin-left: auto; color: #60758c; font-size: 9px; line-height: 13px; }
.wa-notice > strong { display: block; margin-top: 8px; font-size: 14px; line-height: 18px; font-weight: 600; }
.wa-notice > p { margin: 4px 0 0; color: #536783; font-size: 11px; line-height: 16px; }
.wa-notice__action { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #deebe6; color: #086859; font-size: 11px; line-height: 16px; font-weight: 600; }
.wa-notice__action > svg { width: 15px; height: 15px; }
.wa-notice--game { position: absolute; right: 0; bottom: 10px; left: 0; }

/* A route with physical objects, without a floating map panel. */
.wa-scene--logistics { color: #fff; }
.wa-scene--logistics::before { content: none; }
.wa-notice--delivery { position: absolute; z-index: 1; top: 0; left: 2%; width: 64%; max-width: 340px; border-radius: 14px; background: #f5f9ff; }
.wa-scene .wa-route__drawing { position: absolute; top: 62px; display: block; width: 100%; height: 195px; }
.wa-route__labels { position: absolute; top: 260px; right: 0; left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; text-align: center; }
.wa-route__labels > div { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; align-content: start; gap: 4px; }
.wa-route__labels b { font-size: 12px; line-height: 16px; font-weight: 600; }
.wa-route__labels small { font-size: 10px; line-height: 14px; color: #e1edff; }

@container (max-width: 380px) {
  .wa-scene .wa-finance__bank { left: 0; top: 72px; width: 95px; height: 127px; }
  .wa-handset { left: 60%; width: 216px; }
  .wa-scene__sender { gap: 5px; font-size: 10px; }
  .wa-scene__sender > svg:first-child { width: 16px; height: 16px; }
  .wa-scene__sender > svg:last-child { width: 12px; height: 12px; }
  .wa-scene__product { width: 73%; }
  .wa-scene__product img { height: 137px; }
  .wa-scene__message { padding: 11px; }
  .wa-scene__order { width: 72%; }
  .wa-scene__message > strong { font-size: 14px; }
  .wa-notice { padding: 10px 12px; }
  .wa-notice--delivery { width: 88%; }
  .wa-scene .wa-route__drawing { height: 185px; }
  .wa-route__labels { top: 250px; }
}
@container (max-width: 260px) {
  .wa-handset { left: 52%; width: 204px; transform: translateX(-50%) rotate(-6deg); }
  .wa-scene .wa-finance__bank { left: -13px; width: 75px; }
  .wa-route__labels b { font-size: 11px; }
}
@media (max-width: 760px) {
  .sms-page[data-product="whatsapp"] .sms-scenario { grid-template-rows: auto 300px; }
}