/* Conversa no celular do cliente (static/wa.js): páginas de solução e "Exemplo no WhatsApp" da documentação.
   Independente das variáveis de cada página: as cores moram aqui. */
.wa { --wa-mix: #28A7B2; --wa-dim: #8BA7AB; --wa-faint: #6F8A8F; color: #EAF2EE; text-align: left; width: min(400px, 100%); justify-self: center; border-radius: 30px; overflow: hidden; background: #061A1F; border: 1px solid #14353D;
  box-shadow: 0 50px 110px -45px rgba(0,0,0,.95), 0 0 0 8px #0A2228, 0 0 0 9px #14353D; display: grid; grid-template-rows: auto 1fr auto; }
.wa-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #0A2A30; border-bottom: 1px solid #14353D; }
.wa-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 0.8rem inherit; color: #03251A; background: var(--wa-mix); }
.wa-av.grp { background: #B9A3F5; }
.wa-top b { display: block; font-size: 0.98rem; }
.wa-top small { display: block; font-size: 0.76rem; color: var(--wa-dim); }
.wa-body { display: grid; align-content: start; gap: 10px; padding: 18px 14px 22px; min-height: 360px;
  background: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 16px 16px, #061A1F; }
.wa-row { display: grid; gap: 4px; max-width: 84%; justify-self: start; opacity: 0; transform: translateY(8px); }
.wa-row.out { justify-self: end; }
.wa.on .wa-row { animation: wa-in 420ms cubic-bezier(0.23, 1, 0.32, 1) forwards; animation-delay: calc(var(--d) * 800ms + 250ms); }
.wa.now .wa-row { animation: none; opacity: 1; transform: none; }
@keyframes wa-in { to { opacity: 1; transform: none; } }
.wa-m { position: relative; padding: 8px 10px 6px; border-radius: 12px; background: #11323A; font-size: 0.9rem; line-height: 1.42; }
.wa-row.in .wa-m { border-top-left-radius: 4px; }
.wa-row.out .wa-m { background: #0C4A44; border-top-right-radius: 4px; }
.wa-m p { margin: 0; }
.wa-m time { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 2px; font: 500 0.66rem inherit; color: rgba(234,242,238,.55); }
.wa-ticks { width: 15px; height: 9px; display: inline-block; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%2376C8F0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.5l2.5 2.5L9 2.5M6.5 8l1 0.5L14 2.5'/%3E%3C/svg%3E"); }
.wa-sender { display: block; font: 600 0.78rem inherit; color: #F5C58A; margin-bottom: 2px; }
.wa-tpl { display: inline-block; font: 600 0.66rem inherit; color: #8FB8FF; background: rgba(47,123,255,.14); padding: 2px 7px; border-radius: 999px; margin-bottom: 6px; }
.wa-head { display: block; margin-bottom: 2px; }
.wa-foot { display: block; margin-top: 4px; font-size: 0.74rem; color: rgba(234,242,238,.55); }
.wa-btns { display: grid; gap: 3px; }
.wa-btns span { display: block; text-align: center; padding: 8px 10px; border-radius: 10px; background: #11323A; color: #6FD3E0; font-weight: 600; font-size: 0.86rem; }
.wa-pix { display: grid; gap: 1px; margin: 8px 0 2px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.22); border: 1px solid #1E474F; }
.wa-pix small { font: 700 0.66rem inherit; color: var(--wa-mix); letter-spacing: 0.04em; }
.wa-pix b { font-size: 1.15rem; letter-spacing: -0.02em; }
.wa-pix span { font-size: 0.78rem; color: rgba(234,242,238,.6); }
.wa-doc, .wa-loc { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; margin: 2px 0 6px; padding: 9px 10px; border-radius: 10px; background: rgba(0,0,0,.22); }
.wa-doc i { width: 38px; height: 44px; border-radius: 6px; display: grid; place-items: center; font: 700 0.62rem inherit; font-style: normal; color: #fff; background: #D9534F; }
.wa-loc i { width: 38px; height: 38px; border-radius: 8px; background: #0E2C33 no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328A7B2' stroke-width='1.8'%3E%3Cpath d='M12 21s-7-6.1-7-11a7 7 0 0 1 14 0c0 4.9-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.wa-doc b, .wa-loc b { display: block; font-size: 0.86rem; }
.wa-doc small, .wa-loc small { display: block; font-size: 0.74rem; color: rgba(234,242,238,.6); }
.wa-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #0A2228; border-top: 1px solid #14353D; }
.wa-input span { flex: 1; padding: 9px 14px; border-radius: 999px; background: #11323A; color: var(--wa-faint); font-size: 0.86rem; }
.wa-input i { width: 38px; height: 38px; border-radius: 50%; background: var(--wa-mix); }


.wa.compact { width: min(360px, 100%); }
.wa.compact .wa-body { min-height: 0; padding-bottom: 18px; }
.wa-sys { justify-self: center; font-size: 0.72rem; color: var(--wa-dim); background: #0E2C33; padding: 4px 10px; border-radius: 8px; opacity: 0; }
.wa.on .wa-sys { animation: wa-in 420ms cubic-bezier(0.23, 1, 0.32, 1) forwards; animation-delay: calc(var(--d) * 800ms + 250ms); }
.wa.now .wa-sys { animation: none; opacity: 1; }
.wa-row.wide { max-width: 100%; }
.wa-m.bare { background: none !important; padding: 0; }
.wa-m.bare time { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.45); }
.wa-fwd { display: block; font-size: 0.72rem; font-style: italic; color: var(--wa-dim); margin-bottom: 2px; }
.wa-quote { display: block; margin: 0 0 6px; padding: 6px 8px; border-radius: 8px; border-left: 3px solid var(--wa-mix); background: rgba(0,0,0,.2); font-size: 0.8rem; color: rgba(234,242,238,.75); }
.wa-quote b { display: block; color: var(--wa-mix); font-size: 0.76rem; }
.wa-media { display: block; margin: -4px -6px 6px; }
.wa-photo { position: relative; display: grid; place-items: center; height: 170px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(150deg, #2B6F6A 0%, #0F3F48 55%, #0A2A30 100%); }
.wa-photo::before { content: ""; width: 54px; height: 54px; opacity: .55; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EAF2EE' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M3 17l5-5 4 4 3-3 6 6'/%3E%3C/svg%3E"); }
.wa-photo.vid::before, .wa-photo.gif::before { display: none; }
.wa-photo i, .wa-ptv i, .wa-audio i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; }
.wa-photo i svg, .wa-ptv i svg { width: 22px; height: 22px; }
.wa-photo small { position: absolute; left: 8px; bottom: 6px; font-size: 0.7rem; color: #fff; }
.wa-photo b { padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.45); font-size: 0.8rem; letter-spacing: 0.06em; }
.wa-ptv { position: relative; display: grid; place-items: center; width: 180px; height: 180px; border-radius: 50%; background: linear-gradient(150deg, #2B6F6A, #0A2A30); border: 3px solid #0E2C33; }
.wa-ptv small { position: absolute; bottom: 18px; font-size: 0.72rem; }
.wa-sticker { display: block; width: 120px; height: 120px; background: no-repeat center / contain url("/static/mensy-simbolo.svg"); }
.wa-link { display: grid; margin: -4px -6px 6px; border-radius: 9px; overflow: hidden; background: rgba(0,0,0,.25); }
.wa-link-img { height: 96px; background: linear-gradient(150deg, #2B6F6A, #0F3F48); }
.wa-link > span:last-child { display: grid; gap: 1px; padding: 8px 10px; }
.wa-link b { font-size: 0.84rem; } .wa-link small { font-size: 0.76rem; color: rgba(234,242,238,.65); } .wa-link i { font-style: normal; font-size: 0.72rem; color: var(--wa-dim); }
.wa-map { display: block; height: 110px; margin: -4px -6px 6px; border-radius: 9px; position: relative;
  background: repeating-linear-gradient(35deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px), repeating-linear-gradient(-55deg, rgba(255,255,255,.04) 0 2px, transparent 2px 30px), #15393F; }
.wa-map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -80%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s-7-6.1-7-12a7 7 0 0 1 14 0c0 5.9-7 12-7 12z' fill='%23E5534B'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='%23fff'/%3E%3C/svg%3E"); }
.wa-loc { display: block; margin: 0 0 4px; } .wa-loc > span { display: grid; } .wa-loc i { display: none; }
.wa-contact { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: center; padding: 6px 2px 8px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.wa-contact i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #03251A; background: #F5C58A; }
.wa-contact b { display: block; font-size: 0.9rem; } .wa-contact small { font-size: 0.76rem; color: rgba(234,242,238,.65); }
.wa-audio { display: grid; grid-template-columns: 40px minmax(140px, 1fr) auto; gap: 10px; align-items: center; min-width: 230px; padding: 2px 0; }
.wa-audio i { width: 40px; height: 40px; background: var(--wa-mix); color: #03251A; }
.wa-audio i svg { width: 20px; height: 20px; }
.wa-wave { height: 24px; background: repeating-linear-gradient(90deg, rgba(234,242,238,.6) 0 2px, transparent 2px 5px);
  clip-path: polygon(0 40%, 6% 20%, 12% 55%, 18% 10%, 26% 60%, 34% 25%, 42% 70%, 50% 15%, 58% 50%, 66% 30%, 74% 65%, 82% 20%, 90% 55%, 100% 35%, 100% 65%, 90% 45%, 82% 80%, 74% 35%, 66% 70%, 58% 50%, 50% 85%, 42% 30%, 34% 75%, 26% 40%, 18% 90%, 12% 45%, 6% 80%, 0 60%); }
.wa-audio small { font-size: 0.72rem; color: rgba(234,242,238,.7); }
.wa-event { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px; margin-bottom: 6px; border-radius: 10px; background: rgba(0,0,0,.22); }
.wa-event i { width: 42px; height: 42px; border-radius: 10px; background: #0E2C33 no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328A7B2' stroke-width='1.8'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.wa-event b { display: block; font-size: 0.9rem; } .wa-event small { display: block; font-size: 0.76rem; color: rgba(234,242,238,.65); }
.wa-poll { display: grid; gap: 6px; min-width: 230px; margin-bottom: 4px; }
.wa-poll > b { font-size: 0.92rem; } .wa-poll > small { font-size: 0.72rem; color: rgba(234,242,238,.6); margin-top: -4px; }
.wa-opt { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 8px; align-items: center; padding-bottom: 8px; font-size: 0.86rem; }
.wa-opt i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(234,242,238,.5); }
.wa-opt em { font-style: normal; font-size: 0.76rem; color: rgba(234,242,238,.7); }
.wa-opt u { position: absolute; left: 26px; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); text-decoration: none; }
.wa-opt u::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--wa-mix); }
.wa-del { font-style: italic; color: rgba(234,242,238,.6); }
.wa-react { justify-self: start; margin: -10px 0 0 10px; padding: 1px 6px; border-radius: 999px; background: #0E2C33; border: 2px solid #061A1F; font-size: 0.9rem; line-height: 1.3; position: relative; z-index: 1; }
.wa-row.out .wa-react { justify-self: end; margin: -10px 10px 0 0; }
.wa-btns span.wa-list::before { content: ""; display: inline-block; width: 14px; height: 12px; margin-right: 8px; vertical-align: -1px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%236FD3E0' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1h14M1 6h14M1 11h14'/%3E%3C/svg%3E"); }
.wa-carousel { display: flex; gap: 8px; overflow: hidden; padding-bottom: 2px; }
.wa-card { flex: none; width: 200px; display: grid; gap: 4px; padding: 6px 6px 0; border-radius: 12px; background: #11323A; }
.wa-card .wa-photo { height: 110px; }
.wa-card b { font-size: 0.86rem; padding: 0 4px; } .wa-card small { font-size: 0.76rem; color: rgba(234,242,238,.65); padding: 0 4px; }
.wa-card em { font-style: normal; text-align: center; padding: 8px; border-top: 1px solid rgba(255,255,255,.08); color: #6FD3E0; font-weight: 600; font-size: 0.84rem; }
/* mídia, prévia de link e mapa têm largura própria (o balão não encolhe até o texto) */
.wa-media, .wa-link, .wa-map { width: 260px; max-width: 100%; }