/* WhatsApp iOS chat, drawn at true proportions then scaled by --ui (spec 3.5).
   Colours are WhatsApp's own UI colours (product depiction, not brand palette). */
.wa { position: absolute; left: 0; top: 0; width: 393px; height: 852px; font-family: -apple-system, "SF Pro Text", "PJS", sans-serif;
  background-color: #EFEAE2; background-image: radial-gradient(rgba(11,20,26,.045) 1.2px, transparent 1.4px), radial-gradient(rgba(11,20,26,.03) 1px, transparent 1.2px); background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px; color: #111B21; overflow: hidden; transform-origin: 0 0; }
.wa .status { height: 54px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 30px 6px 40px; font-weight: 600; font-size: 17px; }
.wa .status .icons { display: flex; gap: 6px; align-items: center; }
.wa .status .bars { width: 18px; height: 11px; background: linear-gradient(90deg, #111 0 3px, transparent 3px 5px, #111 5px 8px, transparent 8px 10px, #111 10px 13px, transparent 13px 15px, #111 15px 18px); }
.wa .status .batt { width: 25px; height: 12px; border: 1.5px solid #111; border-radius: 4px; position: relative; }
.wa .status .batt::after { content: ""; position: absolute; inset: 1.5px; right: 5px; background: #111; border-radius: 1.5px; }
.wa .head { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #F6F6F6; border-bottom: 0.5px solid #D1D7DB; }
.wa .back { color: #007AFF; font-size: 30px; line-height: 1; margin-right: 2px; }
.wa .avatar { width: 38px; height: 38px; border-radius: 50%; background: #F6F1E9; display: flex; align-items: center; justify-content: center;
  font-family: "PJS", sans-serif; font-weight: 800; font-size: 19px; color: #221E1A; letter-spacing: -0.02em; }
.wa .avatar i { font-style: normal; color: #1F6B47; }
.wa .status { position: relative; }
.wa .island { position: absolute; left: 50%; top: 11px; width: 125px; height: 37px; margin-left: -62.5px; background: #000; border-radius: 20px; }
.wa .acts, .wa .input .cam, .wa .input .mic { color: #007AFF; }
.wa .input .field svg { color: #8696A0; }
.wa .acts { margin-left: auto; display: flex; align-items: center; gap: 16px; padding-right: 2px; flex: none; }
.wa .sub { white-space: nowrap; }
.wa .who { display: flex; flex-direction: column; }
.wa .name { font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 5px; }
.wa .tick { width: 15px; height: 15px; border-radius: 50%; background: #25D366; display: inline-grid; place-items: center; color: #fff; font-size: 10px; }
.wa .sub { font-size: 12.5px; color: #667781; }
.wa .chat { padding: 10px 8px 0; display: flex; flex-direction: column; gap: 6px; }
.wa .day { align-self: center; background: #FFFFFF; color: #54656F; font-size: 12.5px; padding: 5px 12px; border-radius: 8px; margin: 4px 0 6px; box-shadow: 0 1px 0.5px rgba(11,20,26,.13); }
.wa .bub { max-width: 86%; padding: 6px 8px 6px 9px; border-radius: 8px; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; box-shadow: 0 1px 0.5px rgba(11,20,26,.13); position: relative; }
.wa .in { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 0; }
.wa .in::before { content: ""; position: absolute; left: -6px; top: 0; width: 8px; height: 12px; background: #FFFFFF; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.wa .out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 0; }
.wa .out::before { content: ""; position: absolute; right: -6px; top: 0; width: 8px; height: 12px; background: #D9FDD3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa .bub p { margin: 0; }
.wa .bub p + p { margin-top: 0; }
.wa .gap { height: 0.66em; }
.wa .meta { float: right; font-size: 11px; color: #667781; margin: 6px 0 -4px 10px; }
.wa .out .meta::after { content: " \2713\2713"; color: #53BDEB; letter-spacing: -3px; margin-left: 3px; }
.wa .input { position: absolute; bottom: 0; left: 0; right: 0; height: 84px; background: #F6F6F6; border-top: 0.5px solid #D1D7DB;
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; }
.wa .input .field { display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; }
.wa .input .cam, .wa .input .mic { margin-top: 4px; }
.wa .input .plus { color: #007AFF; font-size: 28px; line-height: 1; }
.wa .input .field { flex: 1; height: 34px; border-radius: 18px; background: #fff; border: 0.5px solid #D1D7DB; }