/* /whatsapp-cobra-por-mensagem/ — cobrança por mensagem da Meta e WhatsApp Flows. */
.wc-illustrative { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff4d6; color: #6b4a08; border: 1px solid #f0c36a; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.wc-illustrative .msym { font-size: 16px; }
.wc-note { margin-top: 16px; padding: 12px 16px; border: 1px solid #f0c36a; border-radius: 10px; background: #fffaf0; color: #6b4a08; font-size: 14px; line-height: 1.6; }

/* Hero: receipt over the chat */
.wc-stage { position: relative; width: 100%; max-width: 420px; margin: 0 auto; padding: 10px 0 30px; }
.wc-receipt { position: absolute; bottom: 70px; left: -54px; transform: rotate(-5deg); width: 236px; z-index: 3; background: #f7f1e3; color: #2b2b2b; font-family: "SFMono-Regular", Menlo, Consolas, monospace; padding: 16px 18px 14px; box-shadow: 0 18px 36px rgba(20,25,50,.18); clip-path: polygon(0 4%, 4% 0, 8% 4%, 12% 0, 16% 4%, 20% 0, 24% 4%, 28% 0, 32% 4%, 36% 0, 40% 4%, 44% 0, 48% 4%, 52% 0, 56% 4%, 60% 0, 64% 4%, 68% 0, 72% 4%, 76% 0, 80% 4%, 84% 0, 88% 4%, 92% 0, 96% 4%, 100% 0, 100% 100%, 0 100%); }
.wc-receipt-head { text-align: center; font-weight: 800; letter-spacing: .14em; font-size: 11px; text-transform: uppercase; border-bottom: 1px dashed #9a9384; padding: 6px 0 8px; }
.wc-receipt-head b { display: block; font-family: Poppins, sans-serif; font-size: 20px; letter-spacing: 0; text-transform: none; margin-bottom: 2px; }
.wc-receipt-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 6px 0 0; white-space: nowrap; }
.wc-receipt-line span:first-child { overflow: hidden; text-overflow: ellipsis; }
.wc-receipt-total { display: flex; justify-content: space-between; border-top: 1px dashed #9a9384; margin-top: 8px; padding-top: 8px; font-weight: 800; font-size: 14px; }
.wc-msg { max-width: 82%; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; background: #fff; color: #17162b; position: relative; }
.wc-msg.is-out { align-self: flex-end; background: #d9fdd3; }
.wc-msg em { display: block; font-style: normal; font-size: 10.5px; color: #b42318; font-weight: 800; margin-top: 3px; text-align: right; }
.wc-msg.is-in em { color: #0f7a4f; }

/* What changed: calendar + meter */
.wc-change { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.wc-change article { background: #fff; border: 1px solid #e6e8f2; border-radius: 14px; padding: 24px; }
.wc-change h3 { font-size: 18px; margin: 12px 0 6px; }
.wc-change p { color: #5a6178; font-size: 15px; line-height: 1.6; margin: 0; }
.wc-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: #2f1c67; color: #fff; font: 800 24px/1 Poppins, sans-serif; }
.wc-date small { font: 800 10px "Nunito Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; color: #c9c2ff; }
.wc-meter { margin-top: 16px; }
.wc-meter-bar { height: 10px; border-radius: 99px; background: #e9ebf3; overflow: hidden; }
.wc-meter-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #16a34a, #2de889); }
.wc-meter-legend { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: #5a6178; margin-top: 8px; }
.wc-who { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wc-who span { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #e6e8f2; border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 800; color: #17162b; }
.wc-who em { font-style: normal; color: #b42318; font-size: 12px; }

/* Price table */
.wc-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.wc-price { background: #fff; border: 1px solid #e6e8f2; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; }
.wc-price.is-service { border: 2px solid #2f1c67; }
.wc-price-tag { font: 800 12px "Nunito Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #5a6178; }
.wc-price strong { font: 800 40px/1.1 Poppins, sans-serif; color: #17162b; margin: 8px 0 4px; }
.wc-price strong small { font-size: 14px; color: #5a6178; font-weight: 700; }
.wc-price p { color: #5a6178; font-size: 14.5px; line-height: 1.55; margin: 6px 0 0; }

/* Quick bill */
.wc-quick { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; margin-top: 32px; }
.wc-quick form { background: #fff; border: 1px solid #e6e8f2; border-radius: 14px; padding: 28px; }
.wc-quick label { display: block; font-size: 13px; font-weight: 800; color: #17162b; }
.wc-quick output.wc-big { display: block; font: 800 28px Poppins, sans-serif; color: #2f1c67; margin: 4px 0 14px; }
.wc-quick input[type=range] { width: 100%; accent-color: #2f1c67; height: 28px; }
.wc-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: #6b7380; font-weight: 700; }
.wc-price-input { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 12px; align-items: end; margin-top: 22px; }
.wc-price-input input, .wc-flow-grid input { display: block; width: 100%; min-height: 46px; border: 1px solid #b9bdc9; border-radius: 7px; padding: 10px 9px; font-size: 16px; color: #17162b; margin-top: 8px; }
.wc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-pills button { border: 1px solid #d8d1f4; background: #fff; color: #2f1c67; border-radius: 99px; padding: 9px 13px; font: 800 12.5px "Nunito Sans", sans-serif; cursor: pointer; }
.wc-pills button[aria-pressed=true] { background: #2f1c67; color: #fff; border-color: #2f1c67; }
.wc-quick-result { background: #172a25; color: #fff; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.wc-quick-result span { color: #a1ccb7; font-size: 13px; font-weight: 800; }
.wc-quick-result output { display: block; font: 800 clamp(34px, 4vw, 48px) Poppins, sans-serif; color: #a7ecc1; margin: 6px 0 14px; }
.wc-quick-result dl { margin: 0; }
.wc-quick-result dl div { display: flex; justify-content: space-between; border-top: 1px solid #ffffff20; padding: 11px 0; font-size: 14px; }
.wc-quick-result dt { color: #c7d9d0; }
.wc-quick-result dd { margin: 0; font-weight: 900; }

/* 15 messages vs 1 Flow */
.wc-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-top: 32px; }
.wc-vs { font: 800 18px Poppins, sans-serif; color: #8a90a8; }
.wc-conv { background: #fff; border: 1px solid #e6e8f2; border-radius: 14px; padding: 24px; height: 100%; }
.wc-conv.is-flow { border: 2px solid #16a34a; }
.wc-conv h3 { font-size: 18px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.wc-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wc-dots span { aspect-ratio: 1; border-radius: 10px; background: #fdecea; color: #b42318; display: flex; align-items: center; justify-content: center; }
.wc-dots span .msym { font-size: 18px; }
.wc-dots.is-flow span { background: #e7f8ee; color: #0f7a4f; }
.wc-conv-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #edeff6; margin-top: 16px; padding-top: 12px; font-size: 14px; color: #5a6178; font-weight: 700; }
.wc-conv-total b { font: 800 26px Poppins, sans-serif; color: #b42318; }
.wc-conv.is-flow .wc-conv-total b { color: #0f7a4f; }
.wc-flow-preview { border: 1px solid #e6e8f2; border-radius: 10px; padding: 12px; background: #fbfbfd; }
.wc-flow-preview b { display: block; font-size: 14px; color: #17162b; }
.wc-flow-preview small { color: #5a6178; font-size: 12.5px; }
.wc-free { margin-top: 12px; display: flex; align-items: center; gap: 6px; color: #0f7a4f; font-size: 13px; font-weight: 800; }

/* Problems the chat creates */
.wc-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.wc-lead-card { background: #fff; border: 1px solid #e6e8f2; border-radius: 12px; padding: 16px; margin-top: 14px; }
.wc-lead-card .wa-label { display: block; margin-bottom: 10px; }
.wc-lead-card header { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #edeff6; }
.wc-lead-card header i { width: 42px; height: 42px; border-radius: 50%; background: #eeeafd; color: #2f1c67; font-style: normal; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.wc-lead-card header b { display: block; color: #17162b; }
.wc-lead-card header small { color: #0f7a4f; font-weight: 800; font-size: 12px; }
.wc-lead-card dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 14px 0 0; font-size: 14.5px; }
.wc-lead-card dt { color: #5a6178; }
.wc-lead-card dd { margin: 0; font-weight: 800; color: #17162b; }

/* Simulator chat vs flow */
.wc-flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wc-flow-grid label { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 800; line-height: 1.5; color: #17162b; }
.wc-savings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.wc-savings div { background: #ffffff0d; border: 1px solid #ffffff20; border-radius: 8px; padding: 12px; }
.wc-savings span { display: block; color: #c1d5ca; font-size: 11.5px; }
.wc-savings output { font-size: 20px !important; margin-top: 4px; }

/* Segments */
.wc-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.wc-seg h3 { font-size: 17px; margin: 14px 0 4px; }
.wc-seg p { color: #5a6178; font-size: 14.5px; line-height: 1.55; margin: 0; }

@media (max-width: 1080px) {
  .wc-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wc-change, .wc-prices, .wc-pains { grid-template-columns: 1fr; }
  .wc-quick { grid-template-columns: 1fr; }
  .wc-versus { grid-template-columns: 1fr; }
  .wc-vs { text-align: center; }
  .wc-flow-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wc-segments, .wc-savings { grid-template-columns: 1fr; }
  .wc-price-input { grid-template-columns: 1fr; }
  .wc-lead-card dl { grid-template-columns: 1fr; gap: 2px; }
  .wc-lead-card dd { margin-bottom: 8px; }
}

/* ---------- Hero extras ---------- */
.wc-updated { font-size: 12.5px; font-weight: 700; color: #6b7380; margin: 0 0 14px; }
.wc-stats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 600px; }
.wc-stats li { background: #fff; border: 1px solid #e6e8f2; border-radius: 12px; padding: 12px 14px; }
.wc-stats b { display: block; font: 800 24px/1.1 Poppins, sans-serif; color: #2f1c67; }
.wc-stats span { display: block; font-size: 12px; line-height: 1.4; color: #5a6178; margin-top: 4px; }
.wc-stage::before { content: ""; position: absolute; inset: 18% -12% -6% -12%; background: radial-gradient(closest-side, rgba(45,232,137,.28), transparent 70%); z-index: 0; filter: blur(8px); }

/* ---------- Short answer (AEO) ---------- */
.wc-short { padding: 56px 0 8px; }
.wc-short-box { background: linear-gradient(135deg, #2f1c67, #20134c); color: #fff; border-radius: 18px; padding: 32px 34px; box-shadow: 0 30px 60px rgba(47,28,103,.22); }
.wc-short-box h2 { display: flex; align-items: center; gap: 8px; font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; color: #8ef5b8; margin: 0 0 12px; }
.wc-short-box h2 .msym { font-size: 18px; }
.wc-short-box p { font-size: 19px; line-height: 1.6; color: #fff; margin: 0; max-width: 980px; }
.wc-keys { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wc-keys li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; font-weight: 700; line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; }
.wc-keys .msym { color: #8ef5b8; font-size: 19px; }

/* ---------- Steps (HowTo) ---------- */
.wc-steps { list-style: none; counter-reset: wcs; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.wc-steps li { counter-increment: wcs; background: #fff; border: 1px solid #e6e8f2; border-radius: 14px; padding: 24px; position: relative; }
.wc-steps li::before { content: counter(wcs); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #16a34a; color: #fff; font: 800 16px Poppins, sans-serif; box-shadow: 0 0 0 6px #e7f8ee; }
.wc-steps h3 { font-size: 17px; margin: 16px 0 6px; }
.wc-steps p { color: #5a6178; font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ---------- Interaction polish ---------- */
.wc-price, .wc-steps li, .wc-change article, .wc-pains .wa-card { transition: opacity .7s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease; }
.wc-price:hover, .wc-steps li:hover, .wc-change article:hover, .wc-pains .wa-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20,25,50,.10); }
.wc-pills button { transition: background .2s, color .2s, transform .15s; }
.wc-pills button:active { transform: scale(.96); }
.wc-quick-result output, .wa-calculator-result output { transition: color .3s; }

@media (max-width: 1080px) {
  .wc-keys, .wc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wc-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .wc-stats b { font-size: 19px; }
  .wc-stats span { font-size: 11px; }
  .wc-short-box { padding: 24px 20px; }
  .wc-short-box p { font-size: 17px; }
  .wc-keys, .wc-steps { grid-template-columns: 1fr; }
}

/* ---------- Motion (only when the visitor allows it) ---------- */
@keyframes wc-print { from { opacity: 0; transform: translateY(-30px) rotate(-10deg); } 70% { opacity: 1; } to { opacity: 1; transform: rotate(-5deg); } }
@keyframes wc-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes wc-tag { 0% { opacity: 0; transform: translateY(4px); } 60% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 1; transform: none; } }
@keyframes wc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wc-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes wc-bump { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes wc-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 100% { box-shadow: 0 0 0 12px rgba(22,163,74,0); } }

@media (prefers-reduced-motion: no-preference) {
  .wc-receipt { animation: wc-print .9s cubic-bezier(.2,.8,.2,1) both; }
  .wc-receipt-line, .wc-receipt-total { animation: wc-pop .4s ease both; animation-delay: calc(.9s + var(--i, 0) * .55s); }
  .wc-msg { animation: wc-pop .45s ease both; animation-delay: calc(.6s + var(--i, 0) * .55s); }
  .wc-msg em { animation: wc-tag .5s ease both; animation-delay: calc(.85s + var(--i, 0) * .55s); }
    .wc-stage::before { animation: wc-glow 5s ease-in-out infinite; }
    .wc-seg:nth-child(2)   .wc-seg:nth-child(3)   .wc-seg:nth-child(4)   .wc-steps li::before { animation: wc-pulse 2.4s ease-out infinite; }
  .wc-iphone.wc-chat { animation: wc-float 7s ease-in-out 3.6s infinite; }
  .wc-mini-ip { animation: wc-float 6s ease-in-out infinite; }
  .wc-seg:nth-child(2) .wc-mini-ip { animation-delay: -1.5s; }
  .wc-seg:nth-child(3) .wc-mini-ip { animation-delay: -3s; }
  .wc-seg:nth-child(4) .wc-mini-ip { animation-delay: -4.5s; }
  .wc-js [data-stagger] .wc-sheet { transform: translateY(100%); transition: transform .9s cubic-bezier(.2,.8,.2,1) .45s; }
  .wc-js [data-stagger].is-in .wc-sheet { transform: none; }
  .wc-bump { animation: wc-bump .45s ease; }

  /* Scroll reveal: only hidden once the script has started (html.wc-js) */
  .wc-js .wc-rv, .wc-js [data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .wc-js [data-stagger] > *:nth-child(2) { transition-delay: .1s; }
  .wc-js [data-stagger] > *:nth-child(3) { transition-delay: .2s; }
  .wc-js [data-stagger] > *:nth-child(4) { transition-delay: .3s; }
  .wc-js .wc-rv.is-in, .wc-js [data-stagger].is-in > * { opacity: 1; transform: none; }
  .wc-js .wc-steps .wc-rv:nth-child(2) { transition-delay: .12s; }
  .wc-js .wc-steps .wc-rv:nth-child(3) { transition-delay: .24s; }
  .wc-js .wc-steps .wc-rv:nth-child(4) { transition-delay: .36s; }

  .wc-js .wc-meter-bar span { width: 0; transition: width 1.6s cubic-bezier(.2,.8,.2,1) .3s; }
  .wc-js .is-in .wc-meter-bar span { width: 100%; }
  .wc-js .wc-dots span { opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.35s + var(--i, 0) * .09s); }
  .wc-js .is-in .wc-dots span { opacity: 1; transform: none; }
  .wc-js .wc-conv.is-flow .wc-free .msym { border-radius: 50%; animation: wc-pulse 2s ease-out infinite; }
}

/* ---------- iPhone mockup ---------- */
.wc-iphone { --ip-w: 300px; position: relative; width: var(--ip-w); max-width: 100%; aspect-ratio: 9 / 19.3; margin: 0 auto; padding: 11px; border-radius: calc(var(--ip-w) * .17);
  background: linear-gradient(145deg, #e3e4e8 0%, #8d9097 18%, #3b3d42 45%, #6c6f75 70%, #d5d7db 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 0 0 4px #1b1c1f, 0 50px 90px -20px rgba(20,25,50,.45), 0 18px 36px rgba(20,25,50,.18); z-index: 1; }
.wc-iphone::after { content: ""; position: absolute; inset: 11px; border-radius: calc(var(--ip-w) * .14); pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.07) 100%); }
.wc-ip-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #5b5e64, #a8abb1); }
.wc-ip-btn.is-action { left: -3px; top: 17%; height: 4.5%; }
.wc-ip-btn.is-up { left: -3px; top: 25%; height: 8.5%; }
.wc-ip-btn.is-down { left: -3px; top: 35.5%; height: 8.5%; }
.wc-ip-btn.is-power { right: -3px; left: auto; top: 27%; height: 13%; background: linear-gradient(270deg, #5b5e64, #a8abb1); }
.wc-ip-screen { position: relative; height: 100%; border-radius: calc(var(--ip-w) * .14); overflow: hidden; background: #efe7dc; display: flex; flex-direction: column; box-shadow: 0 0 0 3px #050506; }
.wc-ip-status { position: absolute; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0 30px; z-index: 4; color: #111; }
.wc-ip-status time { font: 700 15px -apple-system, "SF Pro Text", "Nunito Sans", sans-serif; letter-spacing: -.01em; }
.wc-ip-island { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 32%; height: 27px; border-radius: 20px; background: #050506; }
.wc-ip-island::after { content: ""; position: absolute; right: 13%; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a4a7a, #0b0d18 70%); }
.wc-ip-icons { display: flex; align-items: center; gap: 5px; }
.wc-ip-icons svg { height: 11px; width: auto; fill: currentColor; }
.wc-ip-icons svg:last-child { height: 12px; }
.wc-ip-home { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 36%; height: 5px; border-radius: 3px; background: #111; z-index: 6; }

/* WhatsApp chrome */
.wc-wa-head { display: flex; align-items: center; gap: 9px; padding: 52px 12px 9px 10px; background: #f6f6f6; border-bottom: 1px solid #e3e3e3; position: relative; z-index: 2; }
.wc-wa-back { color: #0a84ff; display: flex; } .wc-wa-back svg { width: 10px; height: 18px; }
.wc-wa-head i { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-style: normal; font: 800 14px Poppins, sans-serif; display: flex; align-items: center; justify-content: center; flex: none; }
.wc-wa-head div { flex: 1; min-width: 0; line-height: 1.2; }
.wc-wa-head b { display: block; font-size: 15px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-wa-head small { font-size: 11.5px; color: #8a8a8e; }
.wc-wa-head .msym { color: #0a84ff; font-size: 23px; }
.wc-chat-body { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden;
  background-color: #efe7dc; background-image: radial-gradient(rgba(120,100,70,.10) 1.2px, transparent 1.3px), radial-gradient(rgba(120,100,70,.07) 1px, transparent 1.1px); background-size: 22px 22px, 15px 15px; background-position: 0 0, 7px 9px; }
.wc-wa-day { align-self: center; background: #fff; color: #6b7380; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.06); margin-bottom: 4px; }
.wc-msg { box-shadow: 0 1px 1px rgba(0,0,0,.08); border-radius: 12px; }
.wc-msg.is-out { border-top-right-radius: 4px; } .wc-msg.is-in { border-top-left-radius: 4px; }
.wc-wa-input { display: flex; align-items: center; gap: 8px; padding: 8px 10px 22px; background: #f6f6f6; border-top: 1px solid #e3e3e3; }
.wc-wa-input > .msym { color: #0a84ff; font-size: 24px; }
.wc-wa-field { flex: 1; background: #fff; border: 1px solid #e3e3e3; border-radius: 18px; padding: 7px 12px; font-size: 13px; color: #a0a0a5; }
.wc-wa-mic { width: 34px; height: 34px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; }
.wc-wa-mic .msym { font-size: 19px; }

/* Flow bottom sheet */
.wc-mini-ip { --ip-w: 250px; }
.wc-mini-ip .wc-wa-head { padding-top: 46px; }
.wc-mini-ip .wc-wa-head b { font-size: 13px; }
.wc-mini-ip .wc-wa-head .msym { font-size: 20px; }
.wc-wa-dim { position: absolute; inset: 0; background: rgba(0,0,0,.38); z-index: 3; }
.wc-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 19%; background: #fff; border-radius: 16px 16px 0 0; z-index: 4; display: flex; flex-direction: column; overflow: hidden; }
.wc-sheet-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px; border-bottom: 1px solid #eee; }
.wc-sheet-bar b { font-size: 13px; color: #111; }
.wc-sheet-bar .msym { font-size: 19px; color: #3b3b3f; }
.wc-sheet-hero { height: 22%; background: linear-gradient(135deg, var(--seg), color-mix(in srgb, var(--seg) 55%, #000)); display: flex; align-items: center; justify-content: center; }
.wc-sheet-hero .msym { font-size: 40px; color: #fff; }
.wc-sheet-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wc-sheet-body > span { position: relative; border: 1px solid #d6d6db; border-radius: 8px; padding: 6px 30px 6px 10px; font-size: 12.5px; font-weight: 700; color: #111; }
.wc-sheet-body > span small { display: block; font-size: 10px; font-weight: 600; color: #8a8a8e; }
.wc-sheet-body em { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #8a8a8e; font-style: normal; }
.wc-sheet-body strong { margin-top: auto; text-align: center; background: #1fa855; color: #fff; border-radius: 20px; padding: 9px; font-size: 13px; }
.wc-sheet-body p { text-align: center; font-size: 9.5px; color: #8a8a8e; margin: 2px 0 14px; }
.wc-sheet-body u { color: #1fa855; text-decoration: none; font-weight: 700; }

@media (max-width: 1180px) { .wc-mini-ip { --ip-w: 220px; } }
@media (max-width: 900px) {
  .wc-stage { max-width: 340px; }
  .wc-receipt { left: -14px; bottom: 40px; width: 210px; }
}
@media (max-width: 1080px) {
  .wc-segments { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 6px 4px 18px; margin: 32px -4px 0; scrollbar-width: thin; }
  .wc-seg { flex: 0 0 min(260px, 76%); scroll-snap-align: center; }
  .wc-mini-ip { --ip-w: 236px; }
}
@media (max-width: 560px) {
  .wc-iphone { --ip-w: 280px; }
  .wc-mini-ip { --ip-w: 236px; }
  .wc-stage { max-width: 300px; padding-bottom: 150px; }
  .wc-receipt { left: 50%; bottom: 0; margin-left: -120px; width: 240px; }
}
/* Status bar spacing around the Dynamic Island */
.wc-ip-island { width: 29%; height: 25px; top: 12px; }
.wc-ip-status { padding: 6px 22px 0 28px; }
.wc-ip-status time { width: 30%; text-align: center; }
.wc-ip-icons { width: 30%; justify-content: center; gap: 4px; }
.wc-iphone.wc-chat { --ip-w: 288px; }
.wc-mini-ip .wc-ip-status { padding: 4px 16px 0 18px; }
.wc-mini-ip .wc-ip-status time { font-size: 13px; }
.wc-mini-ip .wc-ip-icons svg:first-child { display: none; }
.wc-mini-ip .wc-ip-island { height: 22px; top: 10px; }
.wc-mini-ip .wc-wa-head .msym:first-of-type { display: none; }
@media (max-width: 560px) { .wc-iphone.wc-chat { --ip-w: 270px; } }