/* "On WhatsApp": the WhatsApp bot in a phone (whatsapp.js). Light WhatsApp look inside the phone, the page's own around it. */
.wa-wrap { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.wa-phone { --wa-green: #008069; --wa-out: #d9fdd3; --wa-bg: #efeae2; position: sticky; top: 150px; padding: 9px; border-radius: 46px; background: #0b141a; box-shadow: 0 30px 60px -20px rgba(0, 17, 35, .35), 0 0 0 1px rgba(0, 17, 35, .2), inset 0 0 0 2px #2a3942; }
.wa-screen { position: relative; display: flex; flex-direction: column; height: min(720px, calc(100vh - 170px)); min-height: 520px; overflow: hidden; border-radius: 37px; background: var(--wa-bg); font: 14.2px/1.42 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Tamil", sans-serif; color: #111b21; }
.wa-status { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 11px 28px 5px; background: var(--wa-green); color: #fff; font-size: 13px; }
.wa-status::after { content: ""; position: absolute; left: 50%; top: 8px; width: 86px; height: 22px; margin-left: -43px; border-radius: 12px; background: #0b141a; }
.wa-sbar { display: flex; gap: 5px; }
.wa-sbar svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.wa-sbar svg:first-child path, .wa-sbar svg:last-child path { fill: #fff; stroke-width: 1; }
.wa-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px 4px; background: var(--wa-green); color: #fff; }
.wa-head .wa-who { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.wa-who b { font-weight: 600; font-size: 16px; white-space: nowrap; }
.wa-tick-badge { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 2px; border-radius: 50%; background: #25d366; color: #fff; font-size: 10px; vertical-align: 1px; }
.wa-sub { font-size: 12.5px; opacity: .85; }
.wa-sub.live { opacity: 1; font-style: italic; }
.wa-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: inherit; cursor: default; }
.wa-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wa-head .wa-ico:first-child { width: 24px; }
.wa-ico.dim { color: #54656f; }
label.wa-ico { cursor: pointer; position: relative; border-radius: 50%; }
label.wa-ico:hover { color: var(--wa-green); background: #f0f2f5; }
label.wa-ico:focus-within { outline: 2px solid var(--wa-green); outline-offset: -2px; }
.wa-av { display: block; width: 38px; height: 38px; flex: none; overflow: hidden; border-radius: 50%; }
.wa-av svg { display: block; width: 100%; height: 100%; }

.wa-chat { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background-color: var(--wa-bg);
  background-image: radial-gradient(rgba(17, 27, 33, .045) 1.2px, transparent 1.3px), radial-gradient(rgba(17, 27, 33, .03) 1.2px, transparent 1.3px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; }
.wa-day { align-self: center; margin: 4px 0 6px; padding: 4px 12px; border-radius: 8px; background: #fff; color: #54656f; font-size: 12px; text-transform: uppercase; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-sys { align-self: center; max-width: 92%; margin-bottom: 8px; padding: 6px 12px; border-radius: 8px; background: #ffeecd; color: #54656f; font-size: 12.3px; text-align: center; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }

.wa-msg { position: relative; max-width: 86%; margin-top: 6px; padding: 6px 8px 8px 9px; border-radius: 8px; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; animation: wa-in .2s ease; }
.wa-msg + .wa-msg.in, .wa-msg.out + .wa-msg.out { margin-top: 2px; }
.wa-msg.in { align-self: flex-start; border-top-left-radius: 0; }
.wa-msg.out { align-self: flex-end; border-top-right-radius: 0; background: var(--wa-out); }
.wa-msg.in::before, .wa-msg.out::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.wa-msg.in::before { left: -8px; background: linear-gradient(to bottom left, #fff 50%, transparent 50%); }
.wa-msg.out::before { right: -8px; background: linear-gradient(to bottom right, var(--wa-out) 50%, transparent 50%); }
.wa-msg.has-btns { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
@keyframes wa-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.wa-text { white-space: pre-wrap; }
.wa-text b { font-weight: 600; }
.wa-text a { color: #027eb5; }
.wa-text.folded { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.wa-more { display: block; min-height: 0; margin-top: 2px; padding: 0; background: none; box-shadow: none; color: #027eb5; font: inherit; font-weight: 500; }
.wa-more:hover { box-shadow: none; color: #015a82; text-decoration: underline; }
.wa-meta { float: right; display: inline-flex; gap: 3px; align-items: center; margin: 8px 0 -4px 12px; color: #667781; font-size: 11px; line-height: 1; }
.wa-ticks { letter-spacing: -4px; padding-right: 4px; color: #8696a0; font-size: 12px; }
.wa-ticks.read { color: #53bdeb; }
.wa-img { display: block; width: 230px; max-width: 100%; max-height: 300px; object-fit: cover; margin: -2px -4px 4px -5px; border-radius: 6px; }
.wa-preview { display: flex; gap: 8px; align-items: center; margin: -2px -4px 6px -5px; padding: 8px 10px; border-radius: 6px; background: rgba(11, 20, 26, .05); }
.wa-preview > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.wa-preview b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-preview small { color: #667781; font-size: 12px; }
.wa-pv-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 6px; background: #fff; color: #54656f; }
.wa-pv-ico svg, .wa-card-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wa-typing { display: flex; gap: 4px; padding: 12px 14px; }
.wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: wa-dot 1.2s infinite ease-in-out; }
.wa-typing i:nth-child(2) { animation-delay: .15s; } .wa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* WhatsApp reply buttons under a bot message */
.wa-btns { align-self: flex-start; display: grid; gap: 2px; width: min(86%, 300px); margin-top: 2px; animation: wa-in .2s ease; }
.wa-btns button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 10px; border-radius: 2px; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); color: #027eb5; font: 500 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wa-btns button:last-child { border-radius: 2px 2px 8px 8px; }
.wa-btns button:hover { background: #f5f6f6; color: #015a82; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-btns svg { width: 15px; height: 15px; fill: currentColor; }
.wa-msg.btn-reply .wa-text::before { content: "↩ "; color: #667781; }

/* voice note */
.wa-msg.voice { width: 280px; padding-bottom: 6px; }
.wa-voice { display: flex; align-items: center; gap: 6px; }
.wa-play { display: grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; flex: none; border-radius: 50%; background: none; box-shadow: none; color: #54656f; }
.wa-play:hover { box-shadow: none; color: var(--wa-green); background: rgba(0, 128, 105, .08); }
.wa-play svg { width: 26px; height: 26px; fill: currentColor; }
.wa-wcol { display: grid; flex: 1; min-width: 0; }
.wa-wave { --p: 0%; position: relative; display: flex; align-items: center; gap: 2px; height: 26px; }
.wa-wave i { flex: 1; min-height: 3px; border-radius: 2px; background: #c5cdd2; transition: background-color .1s; }
.wa-wave i.played { background: #4fb88b; }
.wa-wave::after { content: ""; position: absolute; left: var(--p); top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5px; border-radius: 50%; background: #25d366; }
.wa-dur { color: #667781; font-size: 11px; margin-top: 1px; }
.wa-av.mic { position: relative; width: 44px; height: 44px; overflow: visible; }
.wa-av.mic svg { border-radius: 50%; }
.wa-av.mic::after { content: ""; position: absolute; right: -3px; bottom: -1px; width: 16px; height: 16px; border-radius: 50%; background: #25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V7a3 3 0 0 0-3-3zM7 11a5 5 0 0 0 10 0M12 16v3' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 0 0 2px #fff; }
.wa-vnote { display: block; color: #a35f00; font-size: 11.5px; }
.wa-vnote:empty { display: none; }
.wa-tr { margin-top: 2px; padding-left: 50px; font-size: 13px; }
.wa-tr summary { display: inline; color: #027eb5; font-size: 12px; cursor: pointer; list-style: none; }
.wa-tr summary::-webkit-details-marker { display: none; }
.wa-tr[open] summary { color: #667781; }
.wa-tr span { display: block; margin: 4px 0 0 -50px; padding: 6px 8px; border-radius: 6px; background: rgba(11, 20, 26, .04); color: #3b4a54; }

.wa-compose { display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px 16px; }
.wa-field { display: flex; align-items: flex-end; flex: 1; min-width: 0; padding: 3px 4px; border-radius: 24px; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-input { flex: 1; min-width: 0; max-height: 110px; padding: 8px 4px; border: 0; background: none; resize: none; font: inherit; color: #111b21; outline: none; }
.wa-input:focus-visible { outline: none; }
.wa-field:focus-within { box-shadow: 0 0 0 2px rgba(0, 128, 105, .35); }
.wa-send { display: grid; place-items: center; width: 46px; height: 46px; min-height: 0; padding: 0; flex: none; border-radius: 50%; background: #00a884; color: #fff; box-shadow: 0 1px 2px rgba(11, 20, 26, .2); }
.wa-send:hover { background: var(--wa-green); color: #fff; box-shadow: 0 1px 2px rgba(11, 20, 26, .2); }
.wa-send.rec, .wa-send.rec:hover { background: #e53935; }
.wa-send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-toast { position: absolute; left: 50%; bottom: 76px; z-index: 2; max-width: 86%; padding: 8px 14px; border-radius: 8px; background: rgba(11, 20, 26, .86); color: #fff; font-size: 13px; text-align: center; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.wa-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* beside the phone */
.wa-side { display: grid; gap: 26px; align-content: start; min-width: 0; }
.wa-sec { display: grid; gap: 10px; }
.wa-sec h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.25rem; }
.wa-sec h3 + p { margin: -4px 0 2px; }
.wa-n { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #25d366; color: #fff; font: 600 13px var(--font); letter-spacing: 0; }
.wa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.wa-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-card { display: flex; align-items: center; gap: 12px; min-height: 0; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: left; color: var(--ink); }
.wa-card:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px #00a884; background: #f3fbf7; color: var(--ink); transform: translateY(-1px); }
.wa-card:disabled { opacity: .55; }
.wa-card-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; background: #e7f8ef; color: #008069; }
.wa-card-t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.wa-card-t b { font-weight: 500; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-card-t small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-card.photo { flex-wrap: wrap; padding: 10px; }
.wa-card.photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.wa-card.photo .wa-card-t { flex-basis: 0; }
.wa-tag { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.wa-tag.red { background: var(--red-bg); color: var(--red); }
.wa-tag.amber { background: var(--amber-bg); color: var(--amber); }
.wa-tag.green { background: var(--green-bg); color: var(--green); }
.wa-tag.send { background: #e7f8ef; color: #008069; }
.wa-tag.grey { background: var(--unknown-bg); color: var(--unknown); }
.wa-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-lang { min-height: 36px; padding: 6px 14px; border-radius: 18px; font-size: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.wa-lang:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #00a884; color: #008069; background: #f3fbf7; }
.wa-lang[aria-pressed=true] { background: #008069; color: #fff; box-shadow: none; }
.wa-lang:disabled { opacity: .55; }

.wa-behind { padding: 18px 20px; border-radius: 12px; background: var(--soft); }
.wa-behind h3 { font-size: 1.1rem; }
.wa-run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.wa-run small { color: var(--muted); font-weight: 400; margin-left: auto; }
.wa-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; font: 12.5px/1.45 var(--mono); }
.wa-steps:empty { display: none; }
.wa-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.wa-steps li::before { content: "•"; color: var(--dim); }
.wa-steps li.wa-pending::before { content: "◌"; color: var(--blue); animation: wa-spin 1s linear infinite; display: inline-block; }
.wa-steps li.ok::before { content: "✓"; color: var(--green); }
.wa-steps li.bad::before { content: "✗"; color: var(--red); }
.wa-steps .wa-t { color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes wa-spin { to { transform: rotate(360deg); } }
.wa-diff { font-size: 14px; color: var(--ink-2); }
.wa-diff summary { cursor: pointer; color: var(--blue); }
.wa-diff ul { margin: 8px 0 0; padding-left: 18px; }

@media (max-width: 900px) {
  .wa-wrap { grid-template-columns: minmax(0, 1fr); }
  .wa-phone { position: static; justify-self: center; width: 100%; max-width: 400px; }
  .wa-screen { height: min(680px, 80vh); }
}
@media (max-width: 480px) {
  .wa-phone { padding: 0; border-radius: 16px; background: none; box-shadow: var(--shadow); }
  .wa-screen { border-radius: 16px; height: 76vh; min-height: 480px; }
  .wa-status { display: none; }
  .wa-head { padding-top: 10px; }
  .wa-msg.voice { width: 250px; }
  .wa-cards.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wa-card.photo .wa-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-msg, .wa-btns, .wa-typing i, .wa-steps li.wa-pending::before { animation: none; } .wa-card:hover { transform: none; } }