/* =========================================================================
   Milo's own phone and the WhatsApp chat inside it, ported from milo.ng by
   .azza-clone-saved/port_live_css.py. Do not edit by hand: change milo.css,
   which loads after this and sets sizes and places.
   ========================================================================= */
.mphone {
  --bubble: #0A7CFF;
  --brand: #092C11;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k-lav-800: #1E9E45;
}
.mphone { --pw: 520px; position: relative; width: var(--pw); aspect-ratio: 430 / 880; padding: calc(var(--pw) * 0.023); border-radius: calc(var(--pw) * 0.125); background: #2b2630; box-shadow: 0 2px 3px rgba(255, 255, 255, .35) inset, 0 60px 90px -40px rgba(19, 52, 26, .55), 0 20px 44px -26px rgba(19, 52, 26, .5); }
.mphone_screen { position: relative; height: 100%; border-radius: calc(var(--pw) * 0.104); overflow: hidden; background: #0a0f17; font-size: calc(var(--pw) / 430 * 16); display: flex; flex-direction: column; }
.ph_status { display: flex; align-items: center; justify-content: space-between; padding: 0.85em 1.6em 0.2em; color: #fff; font-size: 0.95em; font-weight: 600; }
.ph_status_r { display: flex; align-items: center; gap: 0.35em; }
.ph_bars, .ph_wifi { width: 1.1em; height: 0.8em; background: no-repeat 50% / contain; }
.ph_bars { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='white'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='9' rx='1'/%3E%3Crect x='15' y='.5' width='3' height='11.5' rx='1'/%3E%3C/svg%3E"); }
.ph_wifi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='white'%3E%3Cpath d='M8 11.4 5.6 8.6a3.6 3.6 0 0 1 4.8 0L8 11.4Zm4.1-4.8a7.2 7.2 0 0 0-8.2 0L2.3 4.8a9.6 9.6 0 0 1 11.4 0l-1.6 1.8Z'/%3E%3C/svg%3E"); }
.ph_batt { min-width: 2em; padding: 0.05em 0.4em; border-radius: 0.35em; background: #f5c944; color: #1a1400; font-size: 0.78em; font-weight: 800; text-align: center; }
.ph_notch { position: absolute; top: 0.55em; left: 50%; width: 7.4em; height: 2.1em; transform: translateX(-50%); border-radius: 999px; background: #000; }
.ph_notch::after { content: ""; position: absolute; right: 0.75em; top: 50%; width: 0.62em; height: 0.62em; transform: translateY(-50%); border-radius: 50%; background: #10151c; box-shadow: inset 0 0 0 1px #222a37; }
.ph_head { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 1em 0.7em 0.7em; background: #0e1620; }
.ph_back { display: flex; align-items: center; gap: 0.3em; padding: 0.28em 0.62em 0.28em 0.42em; border-radius: 999px; background: #222a36; color: #fff; font-size: 0.95em; font-weight: 600; }
.ph_back svg { width: 0.7em; height: 0.9em; }
.ph_av { width: 2.4em; height: 2.4em; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; }
.ph_av svg { width: 1.35em; height: 1.35em; }
.ph_who { min-width: 0; line-height: 1.15; }
.ph_who b { display: block; color: #fff; font-size: 1.05em; font-weight: 700; }
.ph_who span { display: flex; align-items: center; gap: 0.3em; color: #8b9aa4; font-size: 0.82em; }
.ph_tick { width: 0.85em; height: 0.85em; border-radius: 50%; background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7CFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat 50% / 0.55em; }
.ph_thread { position: relative; flex: 1; min-height: 0; padding: 0.7em 0.7em 1em; display: flex; flex-direction: column; gap: 0.55em; background: #0a0f17; overflow: hidden; }
.ph_thread::before { content: ""; position: absolute; inset: 0; opacity: 0.055; background-image: url(assets/img/milo-doodle.svg); background-size: 260px 260px; }
.ph_thread > * { position: relative; }
.ph_sys { align-self: center; padding: 0.28em 0.85em; border-radius: 0.5em; background: #161c25; color: #8b9aa4; font-size: 0.8em; font-weight: 600; }
.ph_menu { display: flex; align-items: center; gap: 0.5em; padding: 0.55em 0.8em; border-radius: 0.55em; background: #1c232f; color: #4fc3a1; font-size: 1em; font-weight: 600; }
.ph_msg { max-width: 82%; padding: 0.45em 0.7em 0.35em; border-radius: 0.6em; color: #e9edef; font-size: 1em; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.28); }
.ph_msg--out { align-self: flex-end; background: var(--bubble); color: #fff; border-top-right-radius: 0; }
.ph_msg--in { align-self: flex-start; background: #1c232f; border-top-left-radius: 0; }
.ph_meta { display: flex; align-items: center; justify-content: flex-end; gap: 0.28em; margin-top: 0.1em; color: rgba(255,255,255,.7); font-size: 0.72em; font-weight: 500; }
.ph_msg--in .ph_meta { color: #8b9aa4; }
.ph_checks { width: 1em; height: 0.7em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.6 4.4 10 11 2'/%3E%3Cpath d='M8 6.6 11.4 10 18 2'/%3E%3C/svg%3E") no-repeat 50% / contain; }
.ph_amount { color: #fff; font-weight: 700; }
.ph_acct { color: #53bdeb; text-decoration: underline; }
.ph_cta { margin-top: 0.4em; padding: 0.62em 0; border-top: 1px solid rgba(255,255,255,.13); color: #53bdeb; font-size: 1em; font-weight: 500; text-align: center; }
.ph_photo { width: 100%; border-radius: 0.4em; overflow: hidden; background: #0e141c; }
.ph_photo img { width: 100%; display: block; }
.ph_msg--photo { padding: 0.22em 0.22em 0.3em; max-width: 74%; }
.ph_fwd { position: absolute; left: -2.4em; top: 42%; width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: #222a36; }
.ph_fwd svg { width: 0.9em; height: 0.9em; }
.ph_voice { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .5em; max-width: 88%; }
.ph_voice_av { width: 2.2em; height: 2.2em; border-radius: 50%; background: #cfa07a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4' fill='%234a3020'/%3E%3Cpath d='M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8z' fill='%234a3020'/%3E%3C/svg%3E") no-repeat 50% / cover; }
.ph_voice_play { width: 1em; height: 1.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 3.5 20 12 6 20.5z'/%3E%3C/svg%3E") no-repeat 50% / contain; }
.ph_voice_wave { display: flex; align-items: center; gap: .13em; height: 1.5em; }
.ph_voice_wave i { flex: 1; height: var(--h); border-radius: 1px; background: rgba(255,255,255,.55); }
.ph_voice_wave i:first-child { background: #fff; }
.ph_voice_time { grid-column: 3; grid-row: 2; font-size: .72em; color: #8fa6a0; }
.ph_voice .ph_meta { grid-column: 4; grid-row: 2; }
.ph_doc_row { display: flex; align-items: center; gap: .6em; }
.ph_doc_icon { width: 2.1em; height: 2.1em; flex: none; border-radius: .4em; background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") no-repeat 50% / 1.1em; }
.ph_doc_row b { display: block; font-size: 1em; font-weight: 600; }
.ph_doc_row i { font-style: normal; font-size: .82em; color: #b9d9cf; }
.ph_cta--green { color: #b9f0d8; }
.ph_receipt { align-self: flex-start; width: 74%; padding: .8em .9em; border-radius: .5em; background: #fff; color: #0a0f17; text-align: center; }
.ph_receipt b { display: block; font-size: 1.2em; font-weight: 800; color: #092C11; }
.ph_receipt i { display: block; font-style: normal; font-size: .66em; color: #827d76; margin-top: .1em; }
.ph_receipt span { display: block; margin-top: .7em; font-size: .72em; text-align: left; border-top: 1px solid #f5efe6; padding-top: .5em; }
.ph_receipt em { font-style: normal; color: #827d76; }
.ph_bar { display: flex; align-items: center; gap: .55em; padding: .5em .7em .7em; background: #0a0f17; }
.ph_bar_plus { width: 1.2em; height: 1.2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9aa4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat 50% / contain; }
.ph_bar_field { flex: 1; height: 2.1em; border-radius: 999px; background: #1c232f; }
.ph_bar_ico { width: 1.2em; height: 1.2em; background: no-repeat 50% / contain; }
.ph_bar_ico--sticker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9aa4' stroke-width='2'%3E%3Cpath d='M14 3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h6l9-9V6a3 3 0 0 0-3-3z'/%3E%3Cpath d='M12 21v-6h6'/%3E%3C/svg%3E"); }
.ph_bar_ico--cam { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9aa4' stroke-width='2'%3E%3Crect x='2.5' y='6' width='19' height='14' rx='3'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3Cpath d='M8 6l1.6-2.5h4.8L16 6'/%3E%3C/svg%3E"); }
.ph_bar_ico--mic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b9aa4'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0' fill='none' stroke='%238b9aa4' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 18v4' stroke='%238b9aa4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ph_thread > .is-typing { opacity: 0; transform: translateY(8px) scale(.98); }
.ph_thread > .is-said { animation: msg-in .42s var(--ease) forwards; }
.ph_dots { align-self: flex-start; display: inline-flex; gap: .28em; padding: .78em .85em; border-radius: .6em; border-top-left-radius: 0; background: #1c232f; }
.ph_dots i { width: .42em; height: .42em; border-radius: 50%; background: #8b9aa4; animation: dot 1.1s ease-in-out infinite; }
.ph_dots i:nth-child(2) { animation-delay: .18s; }
.ph_dots i:nth-child(3) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .ph_dots i { animation: none; }
  .ph_thread > .is-typing { opacity: 1; transform: none; }
}
.ph_quote { display: block; margin-bottom: .35em; padding: .42em .6em; border-radius: .35em; border-left: .28em solid #cfa658; background: rgba(0, 0, 0, .22); font-size: .92em; line-height: 1.3; }
.ph_msg--in .ph_quote { background: rgba(255, 255, 255, .06); border-left-color: var(--k-lav-800); }
.ph_quote b { display: block; margin-bottom: .12em; color: #cfa658; font-weight: 600; }
.ph_msg--in .ph_quote b { color: var(--k-lav-800); }
.ph_quote span { color: #b9c8c2; }
.ph_msg--in .ph_quote span { color: #8b9aa4; }
.ph_btns { margin-top: .4em; }
.ph_btn { display: flex; align-items: center; justify-content: center; gap: .4em; padding: .6em 0; border-top: 1px solid rgba(255, 255, 255, .13); color: #4fc3a1; font-size: .98em; font-weight: 500; }
.ph_btn::before { content: ""; width: .95em; height: .95em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17 4 12l5-5'/%3E%3Cpath d='M20 18v-1a5 5 0 0 0-5-5H4'/%3E%3C/svg%3E") no-repeat 50% / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17 4 12l5-5'/%3E%3Cpath d='M20 18v-1a5 5 0 0 0-5-5H4'/%3E%3C/svg%3E") no-repeat 50% / contain; }
.ph_list { margin: .5em 0 .1em; padding-left: .2em; list-style: none; }
.ph_list li { position: relative; padding-left: .95em; margin-bottom: .42em; }
.ph_list li::before { content: "\2022"; position: absolute; left: 0; color: #8b9aa4; }
.ph_list b { color: #fff; font-weight: 700; }
.ph_fab { position: absolute; right: .7em; bottom: .7em; width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: 50%; background: #1c232f; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.ph_fab::before { content: ""; width: 1em; height: 1em; background: #8b9aa4; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat 50% / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat 50% / contain; }
.ph_fab i { position: absolute; top: -.25em; right: -.15em; min-width: 1.35em; height: 1.35em; display: grid; place-items: center; padding: 0 .3em; border-radius: 999px; background: #25d366; color: #0a0f17; font-size: .62em; font-style: normal; font-weight: 800; }
.ph_receipt span { display: flex; justify-content: space-between; gap: 1em; }
.ph_receipt span + span { border-top: 0; padding-top: .3em; margin-top: .3em; }
.ph_thread { justify-content: flex-end; padding-bottom: var(--thread-pad, 9.4em); }
@media (max-width: 900px) {
  .ph_thread { --thread-pad: 1em; }
}
.mphone { aspect-ratio: 402 / 874; padding: calc(var(--pw) * 0.0155); border-radius: calc(var(--pw) * 0.137); background: linear-gradient(90deg, #6d6560 0%, #cfc7bf 0.7%, #f4efe9 2.0%, #a49a91 4.2%, #7c736c 7.5%, #8b827a 50%, #7c736c 92.5%, #a49a91 95.8%, #f4efe9 98.0%, #cfc7bf 99.3%, #6d6560 100%); box-shadow: 0 calc(var(--pw) * 0.0022) 0 rgba(255, 255, 255, .55) inset, 0 calc(var(--pw) * -0.0022) 0 rgba(0, 0, 0, .38) inset, 0 calc(var(--pw) * 0.02) calc(var(--pw) * 0.03) calc(var(--pw) * -0.02) rgba(30, 22, 16, .45), 0 calc(var(--pw) * 0.11) calc(var(--pw) * 0.17) calc(var(--pw) * -0.09) rgba(30, 22, 16, .34), 0 calc(var(--pw) * 0.26) calc(var(--pw) * 0.34) calc(var(--pw) * -0.16) rgba(30, 22, 16, .26); }
.mphone::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, transparent calc(11% - 1px), rgba(58,52,46,.5) 11%, transparent calc(11% + 2px)), linear-gradient(180deg, transparent calc(89% - 1px), rgba(58,52,46,.5) 89%, transparent calc(89% + 2px)); }
.mphone::after { content: ""; position: absolute; inset: calc(var(--pw) * 0.0155); border-radius: calc(var(--pw) * 0.1215); pointer-events: none; box-shadow: 0 0 0 calc(var(--pw) * 0.0045) #18782D, 0 0 0 calc(var(--pw) * 0.008) rgba(0, 0, 0, .5); }
.mphone_screen { border-radius: calc(var(--pw) * 0.1215); font-size: calc(var(--pw) / 402 * 15.4); background: #000; }
.ph_island { position: absolute; top: calc(var(--pw) * 0.030); left: 50%; width: calc(var(--pw) * 0.311); height: calc(var(--pw) * 0.0896); transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 6; }
.ph_lens { position: absolute; right: calc(var(--pw) * 0.022); top: 50%; width: calc(var(--pw) * 0.035); height: calc(var(--pw) * 0.035); transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #283548 0 20%, #0e141c 46%, #040609 80%); box-shadow: 0 0 0 1px rgba(41, 100, 54, .15), inset 0 0 calc(var(--pw) * 0.006) rgba(24, 118, 45, .32); }
.ph_hw { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.ph_hw i { position: absolute; border-radius: calc(var(--pw) * 0.005); background: linear-gradient(90deg, #4f4842, #b3a99f 32%, #ded7ce 50%, #8b8279 76%, #46403b); box-shadow: 0 0 calc(var(--pw) * 0.004) rgba(0, 0, 0, .45); }
.ph_hw_action { left: calc(var(--pw) * -0.0072); top: 15.4%; width: calc(var(--pw) * 0.0145); height: 3.4%; }
.ph_hw_vol--up { left: calc(var(--pw) * -0.0072); top: 22.6%; width: calc(var(--pw) * 0.0145); height: 5.6%; }
.ph_hw_vol--dn { left: calc(var(--pw) * -0.0072); top: 30.2%; width: calc(var(--pw) * 0.0145); height: 5.6%; }
.ph_hw_side { right: calc(var(--pw) * -0.0072); top: 25.4%; width: calc(var(--pw) * 0.0145); height: 8.2%; }
.ph_hw_cam { right: calc(var(--pw) * -0.0060); top: 38.6%; width: calc(var(--pw) * 0.0120); height: 4.6%; background: linear-gradient(90deg, #37332e, #9a9189 38%, #d4cdc4 54%, #6f6862 80%, #37332e); }
.ph_home { position: absolute; left: 50%; bottom: calc(var(--pw) * 0.022); width: 35%; height: calc(var(--pw) * 0.0128); transform: translateX(-50%); border-radius: 999px; background: rgba(252, 247, 242, .92); z-index: 5; }
.ph_glass { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; background: linear-gradient(126deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 17%, rgba(252,247,242,0) 34%, rgba(252,247,242,0) 74%, rgba(255,255,255,.022) 92%, rgba(255,255,255,.05) 100%); }
.ph_status { padding: calc(var(--pw) * 0.036) calc(var(--pw) * 0.064) calc(var(--pw) * 0.012); }
.ph_thread { --thread-pad: 0.8em; }
.ph_bar { padding-bottom: calc(var(--pw) * 0.058) !important; }
.mphone_screen { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.012em; }
.ph_thread { background: #0a0f17; }
.ph_msg { color: #e9edef; border-radius: 7.5px; box-shadow: 0 1px .5px rgba(10, 15, 23, .13); }
.ph_msg--out { background: var(--bubble); color: #fff; border-top-right-radius: 0; }
.ph_msg--in { background: #1c232f; border-top-left-radius: 0; }
.ph_meta { color: rgba(233, 237, 239, .6); }
.ph_msg--in .ph_meta { color: #8696a0; }
.ph_head { background: #1c232f; }
.ph_bar { background: #1c232f; }
.ph_bar_field { background: #262e3b; }
.ph_msg--out::after, .ph_msg--in::after { content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
.ph_msg--out::after { right: -0.5em; border-width: 0 0 0.62em 0.52em; border-color: transparent transparent transparent var(--bubble); }
.ph_msg--in::after { left: -0.5em; border-width: 0 0.52em 0.62em 0; border-color: transparent #1c232f transparent transparent; }
.ph_msg--out + .ph_msg--out::after, .ph_msg--in  + .ph_msg--in::after { display: none; }
.ph_msg--out + .ph_msg--out { border-top-right-radius: 7.5px; }
.ph_msg--in  + .ph_msg--in { border-top-left-radius: 7.5px; }
.ph_msg { padding: 0.4em 0.62em 0.42em; }
.ph_meta { float: right; margin: 0.32em 0 -0.14em 0.62em; font-size: 0.688em; line-height: 1; }
.ph_cta, .ph_btns { clear: both; }
.ph_msg--photo .ph_meta, .ph_voice .ph_meta, .ph_doc .ph_meta { float: none; margin: 0.1em 0 0; }
.ph_checks { width: 1.05em; height: 0.72em; }
.ph_acct { color: #53bdeb; }
.ph_thread > .is-typing { display: block; opacity: 1; transform: none; }
.ph_dots { display: none; }
.ph_thread::before { opacity: .043; background-size: calc(var(--pw) * 0.72) calc(var(--pw) * 0.72); }
.ph_msg--out::after, .ph_msg--in::after { content: none; }
.ph_msg--out::before, .ph_msg--in::before { content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
.ph_msg--out::before { right: -0.5em; border-width: 0 0 0.62em 0.52em; border-color: transparent transparent transparent var(--bubble); }
.ph_msg--in::before { left: -0.5em; border-width: 0 0.52em 0.62em 0; border-color: transparent #1c232f transparent transparent; }
.ph_msg--out + .ph_msg--out::before, .ph_msg--in  + .ph_msg--in::before { display: none; }
.ph_msg::after { content: ""; display: inline-block; width: 3.5em; height: 0; }
.ph_msg--out::after { width: 4.4em; }
.ph_msg--photo::after, .ph_voice::after, .ph_doc::after { content: none; }
.mphone_screen { font-size: calc(var(--pw) / 402 * 16.4); }
.ph_status { height: calc(var(--pw) * 0.132); padding: 0 calc(var(--pw) * 0.062); align-items: center; flex: none; }
.ph_head { height: calc(var(--pw) * 0.126); padding: 0 calc(var(--pw) * 0.030); gap: calc(var(--pw) * 0.022); flex: none; }
.ph_av { width: 2.28em; height: 2.28em; }
.ph_back { padding: 0.26em 0.6em 0.26em 0.4em; font-size: 0.92em; }
.ph_who b { font-size: 1.02em; line-height: 1.2; }
.ph_who span { font-size: 0.8em; line-height: 1.25; }
.ph_bar { height: calc(var(--pw) * 0.178); padding: 0 calc(var(--pw) * 0.032) calc(var(--pw) * 0.052) !important; align-items: center; flex: none; }
.ph_msg { line-height: 1.294; padding: 0.38em 0.6em 0.4em; }
.ph_thread { padding: 0.62em 0.62em 0.5em; gap: 0.5em; }
.ph_thread > * { transition: opacity .19s var(--ease), transform .19s var(--ease); }
.mphone.is-out .ph_thread > * { opacity: 0; transform: translateX(-8%); }
.mphone.is-in .ph_thread > * { animation: beat-in .44s cubic-bezier(.22, 1, .3, 1) both; animation-delay: calc(var(--n, 0) * 42ms); }
.mphone.is-out .ph_head, .mphone.is-out .ph_bar, .mphone.is-out .ph_status, .mphone.is-in .ph_head { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mphone.is-in .ph_thread > *, .ph_thread > * { animation: none; transition: none; opacity: 1; transform: none; }
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes dot { 0%,60%,100% { opacity: .3; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }
@keyframes beat-in {
  from { opacity: 0; transform: translateX(11%) scale(.975); }
  to   { opacity: 1; transform: none; }
}