/* Simulação WhatsApp (tema claro, igual ao app no celular) */
.wa-sim {
  --wa-green: #008069;
  --wa-accent: #00a884;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-bg: #efeae2;
  --wa-ink: #111b21;
  --wa-muted: #667781;
  --wa-tick: #53bdeb;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--wa-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--wa-ink);
  position: relative;
  -webkit-font-smoothing: antialiased;
}
.phero__phone-screen .wa-sim img { height: auto; object-position: center; }

/* Barra de status (fica sob a ilha do telefone) + cabeçalho da conversa */
.wa-sim__top { flex: 0 0 auto; background: var(--wa-green); color: #fff; }
.wa-sim__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  padding: 6px 22px 0 26px;
  font-size: 11px;
  font-weight: 600;
}
.wa-sim__status-icons { display: inline-flex; gap: 4px; align-items: center; }
.wa-sim__status-icons svg { width: 13px; height: 13px; fill: #fff; }
.wa-sim__header { display: flex; align-items: center; gap: 6px; padding: 4px 8px 8px 4px; }
.wa-sim__back { width: 20px; height: 20px; fill: #fff; flex: 0 0 auto; }
.wa-sim__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  flex: 0 0 auto;
}
.phero__phone-screen .wa-sim__avatar img { width: 100%; height: 100%; object-fit: cover; }
.wa-sim__meta { flex: 1; min-width: 0; line-height: 1.15; }
.wa-sim__meta strong { display: flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.wa-sim__verified { width: 13px; height: 13px; flex: 0 0 auto; }
.wa-sim__meta span { display: block; font-size: 11px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-sim__actions { display: inline-flex; gap: 12px; padding-right: 2px; }
.wa-sim__actions svg { width: 17px; height: 17px; fill: #fff; }

/* Conversa com o papel de parede do WhatsApp */
.wa-sim__thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 6px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background-color: var(--wa-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d6cfc4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.75'%3E%3Cpath d='M14 18c4-6 12-6 16 0s-4 12-8 14c-4-2-12-8-8-14z'/%3E%3Ccircle cx='82' cy='20' r='7'/%3E%3Cpath d='M78 20h8M82 16v8'/%3E%3Cpath d='M40 60l10-6 10 6-10 6z'/%3E%3Crect x='90' y='62' width='16' height='12' rx='3'/%3E%3Cpath d='M94 62v-3h8v3'/%3E%3Cpath d='M12 92q8-10 16 0t16 0'/%3E%3Ccircle cx='70' cy='98' r='4'/%3E%3Cpath d='M62 34l4 4 8-8'/%3E%3C/g%3E%3C/svg%3E");
}
.wa-sim__thread::-webkit-scrollbar { display: none; }

.wa-day, .wa-notice {
  margin: 2px auto 8px;
  border-radius: 7px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  font-size: 10.5px;
}
.wa-day { display: table; padding: 4px 10px; background: #fff; color: var(--wa-muted); text-transform: uppercase; font-weight: 500; }
.wa-notice { max-width: 92%; padding: 6px 10px; background: #ffeecd; color: #54656f; line-height: 1.35; text-align: center; }

.wa-bubble {
  max-width: 82%;
  width: fit-content;
  margin: 0 0 3px;
  padding: 6px 8px 5px 9px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.36;
  position: relative;
  animation: waIn 0.22s ease-out both;
  word-break: break-word;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.wa-bubble--bot { background: var(--wa-in); margin-right: auto; }
.wa-bubble--user { background: var(--wa-out); margin-left: auto; }
.wa-bubble--first { margin-top: 8px; }
.wa-bubble--bot.wa-bubble--first { border-top-left-radius: 0; }
.wa-bubble--user.wa-bubble--first { border-top-right-radius: 0; }
.wa-bubble--first::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.wa-bubble--bot.wa-bubble--first::before { left: -8px; background: var(--wa-in); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-bubble--user.wa-bubble--first::before { right: -8px; background: var(--wa-out); clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-bubble__text { white-space: pre-wrap; }
.wa-bubble__agent { display: block; font-size: 12px; font-weight: 600; color: #c2410c; margin-bottom: 1px; }
/* hora + tiques flutuam no fim da última linha, como no app */
.wa-bubble__meta {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 6px 0 -3px 10px;
  font-size: 10px;
  color: var(--wa-muted);
  line-height: 1;
  position: relative;
  top: 3px;
}
.wa-tick { width: 15px; height: 10px; fill: #8696a0; transition: fill 0.3s; }
.wa-tick.is-read { fill: var(--wa-tick); }
.wa-bubble::after { content: ""; display: block; clear: both; }

.wa-bubble--typing { display: inline-flex; gap: 4px; padding: 11px 13px; }
.wa-bubble--typing::after { display: none; }
.wa-bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: waDot 1s infinite ease-in-out; }
.wa-bubble--typing i:nth-child(2) { animation-delay: 0.15s; }
.wa-bubble--typing i:nth-child(3) { animation-delay: 0.3s; }

/* Mensagem com foto de produto */
.wa-bubble--media { padding: 3px 3px 5px; }
.wa-bubble--media .wa-bubble__text { padding: 4px 6px 0; }
.wa-bubble--media .wa-bubble__meta { margin-right: 5px; }
.wa-product { border-radius: 6px; overflow: hidden; }
.phero__phone-screen .wa-product img { display: block; width: 100%; height: 128px; object-fit: cover; }
.wa-product__cap { padding: 6px 6px 0; font-size: 12.5px; }
.wa-product__cap strong { display: block; font-weight: 600; }
.wa-product__cap span { color: var(--wa-muted); font-size: 12px; }

/* Botões de resposta rápida (mensagem interativa) */
.wa-buttons { display: grid; gap: 3px; margin: 0 0 3px; width: 82%; animation: waIn 0.22s ease-out both; }
.wa-buttons span {
  display: block;
  padding: 8px;
  border-radius: 8px;
  background: var(--wa-in);
  color: #027eb5;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.wa-buttons span.is-picked { background: #e7f3ff; }

/* Resumo do pedido */
.wa-card { margin: 6px 0 2px; border-radius: 6px; background: #f5f6f6; padding: 6px 8px; font-size: 12px; }
.wa-card__item { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.wa-card__item strong { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-card__item--off strong { color: #1fa855; }
.wa-card__total { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 5px; border-top: 1px solid #e3e6e8; font-weight: 700; }

.wa-coupon { margin: 6px 0 2px; padding: 8px 10px; border-radius: 6px; border: 1.5px dashed #25d366; background: #f0fbf3; }
.wa-coupon__tag { display: block; font-size: 10px; font-weight: 700; color: #1fa855; letter-spacing: 0.05em; text-transform: uppercase; }
.wa-coupon strong { display: block; font-size: 15px; letter-spacing: 0.08em; }
.wa-coupon__txt { display: block; font-size: 11.5px; color: var(--wa-muted); }

/* Carrossel de ofertas */
.wa-carousel { margin: 0 -10px 3px 0; overflow: hidden; animation: waIn 0.22s ease-out both; }
.wa-carousel__track { display: flex; gap: 6px; width: max-content; animation: waCarouselPan 6s ease-in-out 1s infinite alternate; }
.wa-slide {
  flex: 0 0 150px;
  background: var(--wa-in);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  display: flex;
  flex-direction: column;
}
.phero__phone-screen .wa-slide img,
.wa-slide__ph { display: block; width: 100%; height: 88px; object-fit: cover; background: #e9edef; }
.wa-slide__body { padding: 6px 8px 4px; font-size: 12px; flex: 1; }
.wa-slide__body strong { display: block; font-weight: 600; line-height: 1.25; }
.wa-slide__body span { color: var(--wa-muted); }
.wa-slide em { display: block; font-style: normal; text-align: center; padding: 7px; border-top: 1px solid #e9edef; color: #027eb5; font-size: 12px; font-weight: 500; }
.wa-slide__promo {
  height: 88px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  font-weight: 800;
  font-size: 19px;
}

/* Barra de digitar mensagem */
.wa-sim__composer { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 5px 6px 16px; background: var(--wa-bg); }
.wa-sim__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 20px;
  background: #fff;
  color: #8696a0;
  font-size: 13px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.wa-sim__field span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-sim__field span.is-typing { color: var(--wa-ink); }
.wa-sim__field svg { width: 18px; height: 18px; fill: #8696a0; flex: 0 0 auto; }
.wa-sim__mic { width: 36px; height: 36px; border-radius: 50%; background: var(--wa-accent); display: grid; place-items: center; flex: 0 0 auto; }
.wa-sim__mic svg { width: 17px; height: 17px; fill: #fff; }

/* Controles ficam FORA do telefone */
.wa-demo { display: flex; flex-direction: column; align-items: center; }
.wa-controls { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.wa-controls button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--ink-15, #d0d4d8);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}
.wa-controls button:hover { border-color: var(--accent, #0f766e); }

@keyframes waCarouselPan { from { transform: translateX(0); } to { transform: translateX(-156px); } }
@keyframes waIn { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes waDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wa-carousel__track, .wa-bubble, .wa-buttons { animation: none; }
}

.phero__phone-screen .wa-sim { border-radius: inherit; }
.phero__media:has(.wa-sim) { display: flex; justify-content: center; }

/* Nesta página: no celular, texto e botões de fluxo vêm antes do telefone */
@media (max-width: 900px) {
  #demo-whatsapp .phero__media { order: 2; margin-top: 8px; }
}