/* The faces' chats (orders, night desk) drawn as a WhatsApp chat in dark mode: the business's own number answering.
   Loaded after a face's own styles, so it only restyles; nothing in the face's workings changes. No WhatsApp marks. */
.phone { padding: 0; overflow: hidden; border-radius: 22px; border-color: rgba(134,150,160,.22); background: #0B141A; }
.ph-head { padding: 10px 12px; background: #202C33; border-bottom: 0; }
.ph-head .av { width: 36px; height: 36px; background: #2A6F5F; color: #E9EDEF; }
.ph-head b { color: #E9EDEF; font-size: 15px; } .ph-head small { color: #8696A0; }
.phone .thread {
  padding: 12px 10px; gap: 6px;
  background-color: #0B141A;
  background-image: radial-gradient(rgba(233,237,239,.035) 1.2px, transparent 1.3px), radial-gradient(rgba(233,237,239,.025) 1px, transparent 1.1px);
  background-size: 22px 22px, 34px 34px; background-position: 0 0, 11px 17px;
}
.phone .b { max-width: 84%; padding: 6px 9px 5px; border: 0; border-radius: 8px; font-size: 14.5px; color: #E9EDEF; box-shadow: 0 1px .5px rgba(11,20,26,.4); }
.phone .b.me { background: #005C4B; border-start-end-radius: 0; }
.phone .b.bot { background: #202C33; border-start-start-radius: 0; }
.phone .b small { font: 11px var(--sans, sans-serif); color: rgba(233,237,239,.6); opacity: 1; text-align: end; margin-top: 2px; }
.phone .b.me small::after { content: " ✓✓"; color: #53BDEB; letter-spacing: -.18em; padding-inline-end: .18em; }
.phone .compose { margin: 0; padding: 8px; gap: 8px; background: #0B141A; align-items: center; }
.phone .compose input { background: #2A3942; border: 0; border-radius: 22px; color: #E9EDEF; padding: 12px 16px; }
.phone .compose input::placeholder { color: #8696A0; }
.phone .compose input:focus { box-shadow: 0 0 0 1.5px rgba(0,168,132,.7); }
/* the round green send button; its word stays for screen readers */
.phone .compose button { flex: none; width: 46px; min-height: 46px; padding: 0; border: 0; border-radius: 50%; background: #00A884; color: transparent; font-size: 0; position: relative; }
.phone .compose button::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: #0B141A; -webkit-mask: var(--wa-send) center / contain no-repeat; mask: var(--wa-send) center / contain no-repeat; }
html[dir="rtl"] .phone .compose button::after { transform: scaleX(-1); }
.phone .compose button:disabled { opacity: .45; }
.phone { --wa-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4 21.5 12 3.4 3.6 3.4 10.1 16 12 3.4 13.9z'/%3E%3C/svg%3E"); }
.phone .b.bot.sos { background: #4A1F24; }