/* Phone mockup: what the business owner sees when a lead arrives.
   Markup: .phone > .ph-screen > (.ph-top, .ph-chat > .ph-msg > time). Tint the frame with --phone-frame. */
.phone { width: 290px; max-width: 100%; aspect-ratio: 290 / 590; border-radius: 44px; padding: 11px; background: var(--phone-frame, #1c1f22);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.55); position: relative; }
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 14px; background: #000; z-index: 2; }
.ph-screen { height: 100%; border-radius: 34px; overflow: hidden; display: flex; flex-direction: column; background: #efeae2;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; direction: rtl; }
.ph-top { display: flex; align-items: center; gap: 10px; padding: 50px 14px 10px; background: #f6f6f6; border-bottom: 1px solid #e2e2e2; color: #111; }
.ph-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #cfd8dc; color: #37474f; font-weight: 700; flex: none; }
.ph-top b { display: block; font-size: 14px; line-height: 1.2; }
.ph-top small { font-size: 12px; color: #667781; }
.ph-chat { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 14px 14px; }
.ph-day { align-self: center; font-size: 12px; background: #fff; color: #54656f; border-radius: 7px; padding: 3px 9px; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.ph-msg { align-self: flex-start; max-width: 92%; background: #fff; color: #111b21; border-radius: 8px 0 8px 8px; padding: 7px 9px 20px; font-size: 13px; line-height: 1.45;
  white-space: pre-line; position: relative; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.ph-msg time { position: absolute; bottom: 3px; left: 8px; font-size: 12px; color: #667781; }
.ph-msg.new { animation: phIn .35s ease-out; }
.ph-cap { font-size: 13px; margin-top: 12px; text-align: center; }
@keyframes phIn { from { transform: translateY(8px) scale(.98); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ph-msg.new { animation: none; } }