/* WhatsApp style phone (iOS look) */
.wa-phone { --wa-bg: #EFE7DE; position: relative; width: 390px; height: 800px; border-radius: 54px; background: #fff; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 0 11px #121212, 0 0 0 13px #2b2b2b, 0 60px 120px -40px rgba(30,27,22,.55); font-family: -apple-system, "SF Pro Text", "Inter Tight", system-ui, sans-serif; color: #111; }
.wa-phone[lang="ar"] { font-family: "Cairo", -apple-system, sans-serif; }
.wa-status { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 14px 34px 0; font-size: 16px; flex: none; }
.wa-status b { font-weight: 600; font-family: -apple-system, "Inter Tight", sans-serif; }
.wa-status::after { content: ""; position: absolute; left: 50%; top: 11px; width: 120px; height: 34px; margin-left: -60px; border-radius: 20px; background: #000; }
.wa-icons { display: flex; gap: 5px; align-items: center; }
.wa-icons i { display: block; width: 17px; height: 11px; border-radius: 3px; background: #111; }
.wa-icons i:nth-child(1) { width: 17px; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 1px; }
.wa-icons i:nth-child(2) { width: 15px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.wa-icons i:nth-child(3) { width: 25px; border-radius: 4px; background: linear-gradient(90deg, #111 78%, #bbb 78%); }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; background: #F6F6F6; border-bottom: 1px solid #e5e5e5; flex: none; }
.wa-back { width: 26px; height: 26px; color: #007AFF; }
.wa-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; }
.wa-av svg { width: 100%; height: 100%; display: block; }
.wa-name { display: grid; line-height: 1.2; flex: 1; min-width: 0; }
.wa-name b { font-size: 16.5px; font-weight: 600; }
.wa-name small { font-size: 12.5px; color: #777; }
.wa-acts { display: flex; gap: 18px; color: #007AFF; }
.wa-acts svg { width: 24px; height: 24px; }
.wa-chat { position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 10px 12px 12px; 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='%23d9cfc3' stroke-width='1.4' opacity='.7'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M70 15l8 8-8 8M96 70h14M100 64v12M30 86c6-8 14-8 20 0M78 96a6 6 0 1 0 12 0'/%3E%3Crect x='44' y='52' width='14' height='10' rx='3'/%3E%3C/g%3E%3C/svg%3E"); }
.wa-day { align-self: center; margin: 4px 0 8px; }
.wa-day span { display: inline-block; padding: 4px 10px; border-radius: 8px; background: #fff; color: #555; font-size: 12.5px; box-shadow: 0 1px .5px rgba(0,0,0,.1); }
.wa-row { display: flex; }
.wa-row.me { justify-content: flex-end; }
.wa-col { max-width: 84%; display: grid; gap: 3px; }
.wa-b { position: relative; padding: 7px 9px 8px 10px; border-radius: 9px; background: #fff; font-size: 15.5px; line-height: 1.38; box-shadow: 0 1px .5px rgba(0,0,0,.13); white-space: normal; word-wrap: break-word; }
.wa-phone[lang="ar"] .wa-b { font-size: 15.5px; line-height: 1.55; }
.wa-row.me .wa-b { background: #D9FDD3; }
.wa-b.tail::before { content: ""; position: absolute; top: 0; width: 10px; height: 13px; background: inherit; }
.wa-row.them .wa-b.tail { border-start-start-radius: 0; }
.wa-row.me .wa-b.tail { border-start-end-radius: 0; }
.wa-row.them .wa-b.tail::before { inset-inline-start: -8px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.wa-phone[dir="rtl"] .wa-row.them .wa-b.tail::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-row.me .wa-b.tail::before { inset-inline-end: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-phone[dir="rtl"] .wa-row.me .wa-b.tail::before { clip-path: polygon(100% 0, 0 0, 100% 100%); }
.wa-meta { float: inline-end; display: inline-flex; align-items: center; gap: 3px; margin: 8px 0 -4px 10px; margin-inline-start: 10px; font-size: 11px; color: #8a8a8a; line-height: 1; font-family: -apple-system, "Inter Tight", sans-serif; }
.wa-ticks { width: 17px; height: 11px; color: #53BDEB; }
.wa-btns { display: grid; gap: 3px; }
.wa-btn { display: block; padding: 10px; border-radius: 9px; background: #fff; text-align: center; color: #0B84C6; font-weight: 500; font-size: 15px; box-shadow: 0 1px .5px rgba(0,0,0,.13); transition: background .3s, transform .3s; }
.wa-btn.on { background: #e9f5ff; transform: scale(.97); }
.wa-b .emo, .wa-btn .emo { width: 1.25em; height: 1.25em; vertical-align: -.25em; display: inline-block; }
.wa-input { display: flex; align-items: center; gap: 10px; padding: 8px 12px 30px; background: #F6F6F6; border-top: 1px solid #e5e5e5; flex: none; }
.wa-field { flex: 1; height: 36px; display: flex; align-items: center; padding: 0 14px; border-radius: 18px; background: #fff; border: 1px solid #e3e3e3; color: #aaa; font-size: 15px; }
.wa-mic { color: #007AFF; }
.wa-mic svg { width: 24px; height: 24px; }
.wa-typing { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 9px; background: #fff; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9a9a9a; animation: watype 1.2s infinite; }
.wa-typing i:nth-child(2) { animation-delay: .15s; } .wa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes watype { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
img.emo { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; }