/* Familiar app colors live inside the illustrative phones; Hexagon stays neutral. */
.mp-personal .mp-phone{width:350px;max-width:100%;padding:0;border:1px solid #d4d4d4;border-radius:36px;background:#fff;color:#111111;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 0 0 3px #e7e7e7,0 25px 65px -32px #0006;overflow:hidden;isolation:isolate}
.mp-personal .mp-phone-bar{position:relative;display:flex;align-items:center;justify-content:space-between;height:43px;padding:11px 23px 5px;color:#131313;background:#fafafa;font-size:12px;font-weight:600;letter-spacing:-.25px;z-index:2}
.mp-ios-island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:80px;height:23px;border-radius:20px;background:#121212}
.mp-ios-time{min-width:40px;text-align:center}.mp-ios-indicators{display:block;width:52px;height:14px}.mp-ios-indicators>svg{width:52px;height:14px;display:block;fill:currentColor}.mp-wifi{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.mp-battery{fill:none;stroke:currentColor;stroke-width:1;opacity:.6}.mp-battery-fill{stroke:currentColor;stroke-width:1;stroke-linecap:round}
.mp-personal .mp-app-icon{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.mp-personal .mp-phone-contact{position:relative;background:#fafafaeF;backdrop-filter:blur(18px);margin:0;padding:7px 14px 13px;gap:0;z-index:2;color:#191919}
.mp-contact-avatar{display:grid;place-items:center;background:#e9e9e9;border-radius:50%;width:42px;height:42px;flex:none}.mp-phone-contact .mp-contact-avatar img{width:31px;height:31px;object-fit:contain}
.mp-personal .mp-imessage .mp-phone-contact{height:87px;display:flex;align-items:center;justify-content:center}
.mp-imessage-person{display:flex;flex-direction:column;gap:7px;align-items:center}.mp-imessage-person>span:last-child{display:flex;align-items:center;gap:3px}.mp-personal .mp-imessage-person strong{font-size:13px;line-height:1.2;font-weight:600}.mp-personal .mp-imessage-person .mp-app-icon{width:11px;height:11px;stroke-width:2;color:#6b6b6b}.mp-imessage .mp-app-back{position:absolute;left:13px;top:16px;display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#fff;box-shadow:0 2px 10px #00000008;color:#0070e8}
.mp-personal .mp-messages{position:relative;padding:10px 15px 20px;gap:10px;min-height:373px;z-index:1}
.mp-chat-date{display:flex;gap:4px;align-items:center;justify-content:center;margin:2px 0 7px;font-size:10px;color:#777777;line-height:1.4}.mp-chat-date>span{font-weight:600}
.mp-personal .mp-bubble{position:relative;max-width:89%;padding:10px 12px;border-radius:17px;font-size:14px;font-weight:400;line-height:1.4;letter-spacing:-.16px;overflow-wrap:break-word}
.mp-personal .mp-bubble>p+p{margin-top:10px}.mp-personal .mp-bubble ul{margin:8px 0;padding-left:17px}.mp-personal .mp-bubble li{margin:5px 0}
.mp-personal .mp-imessage .mp-me{background:#0070e8;color:#fff;border-bottom-right-radius:15px}
.mp-personal .mp-imessage .mp-milo{background:#e9e9eb;color:#171717;border-bottom-left-radius:15px}
.mp-imessage .mp-bubble::after{content:'';position:absolute;bottom:0;width:12px;height:13px;background:inherit;pointer-events:none}
.mp-imessage .mp-me::after{right:-5px;clip-path:polygon(0 0,58% 0,70% 60%,100% 100%,33% 84%,0 63%)}
.mp-imessage .mp-milo::after{left:-5px;clip-path:polygon(42% 0,100% 0,100% 63%,67% 84%,0 100%,30% 60%)}
.mp-personal .mp-receipt{font-size:10px;line-height:1.45;letter-spacing:0;color:#666666;margin-top:9px}.mp-personal .mp-receipt svg{width:14px;height:14px}
.mp-personal .mp-inline-detail{font-size:12px;margin-top:11px}.mp-personal .mp-inline-detail summary{color:#5c5c5c;gap:12px;line-height:1.5}.mp-personal .mp-inline-detail>div{padding-top:12px;font-size:12px;color:#505050}.mp-personal .mp-inline-detail small{font-size:10px;color:#6b6b6b}
.mp-personal .mp-phone-compose{margin:0;border-radius:0;padding:9px 12px 7px;gap:9px;min-height:53px;background:#fafafaeF;backdrop-filter:blur(15px);color:#686868;font-size:13px;position:relative;z-index:2}
.mp-compose-plus{width:31px;height:31px;display:grid;place-items:center;flex:none;background:#ededed;border-radius:50%;color:#474747}
.mp-personal .mp-phone-compose>.mp-compose-plus:first-child{font-size:inherit;color:inherit}
.mp-compose-field{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;flex:1;height:35px;padding:0 11px;border-radius:22px;background:white;box-shadow:inset 0 0 0 1px #d3d3d3;color:#8d8d8d}.mp-compose-field>span{min-width:0;flex:1}.mp-personal .mp-compose-field .mp-app-icon{width:18px;height:18px;color:#8e8e8e}
.mp-home-indicator{position:relative;height:21px;background:#fafafa;z-index:2}.mp-home-indicator::after{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);height:4px;width:110px;background:#181818;border-radius:4px}
/* WhatsApp's light theme: neutral iOS chrome, green accents and a warm doodle canvas. */
.mp-personal .mp-whatsapp{background:#efeae2}.mp-personal .mp-whatsapp .mp-phone-contact{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;height:62px;padding:7px 13px 10px;background:#fafafa}
.mp-whatsapp .mp-app-back{color:#008069;margin-left:-5px;width:19px}
.mp-whatsapp .mp-contact-avatar{width:35px;height:35px;background:#ebebeb}.mp-phone-contact .mp-contact-avatar img{width:29px;height:29px}
.mp-contact-name{display:grid;gap:4px;min-width:0}.mp-personal .mp-contact-name strong{font-size:15px;font-weight:600;line-height:1.2}.mp-contact-name>span{font-size:9px;color:#737373;line-height:1.2;white-space:nowrap}.mp-contact-actions{display:flex;gap:16px;align-items:center;margin-left:auto;padding-left:6px;color:#008069}.mp-personal .mp-contact-actions .mp-app-icon{width:21px;height:21px}
.mp-whatsapp .mp-messages{padding:11px 14px 17px;gap:11px;background-color:#efeae2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='190' viewBox='0 0 156 190'%3E%3Cg fill='none' stroke='%238d9a87' stroke-opacity='.18' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 19 22-6-8 22-4-11-10-5Zm10 5 12-11M92 15h21v16H99l-7 5V15ZM98 21h8m-8 5h11M59 60c-8-9-20 4 0 16 20-12 8-25 0-16ZM122 75l4 7 8 1-6 6 1 8-7-4-8 4 2-8-6-6 9-1 3-7ZM14 108h18v15a7 7 0 0 1-7 7h-4a7 7 0 0 1-7-7v-15Zm18 3h4a5 5 0 0 1 0 10h-4M17 138h18M81 124l18 10-19 9 2-9-1-10Zm1 10h17M48 163c0-9 12-9 12 0 0 9-12 9-12 0Zm6-15v4m0 22v4m-15-15h4m22 0h4m-26-11 3 3m16 16 3 3m-22 0 3-3m16-16 3-3M123 162l14-7 8 16-14 7-8-16Z'/%3E%3Cpath d='M7 60l3-2m-4 13 5 2m75-28 4 2m12 57 3-3M4 177l6 1m105-59 3 4'/%3E%3C/g%3E%3C/svg%3E")}
.mp-whatsapp .mp-chat-date{align-self:center;display:block;padding:4px 9px;background:#fbfbfbdb;box-shadow:0 1px 2px #0000000a;border-radius:6px;margin-bottom:2px;color:#6e6e6e;font-size:10px}
.mp-personal .mp-whatsapp .mp-bubble{border-radius:9px;padding:9px 11px 7px;max-width:91%;color:#111b21;font-size:13.5px;line-height:1.45;box-shadow:0 1px 1px #13131316;letter-spacing:-.11px}
.mp-personal .mp-whatsapp .mp-me{background:#d9fdd3;border-top-right-radius:0}.mp-personal .mp-whatsapp .mp-milo{background:#fff;border-top-left-radius:0}
.mp-whatsapp .mp-bubble::before{content:'';position:absolute;top:0;width:8px;height:10px;background:inherit;pointer-events:none}.mp-whatsapp .mp-me::before{right:-7px;clip-path:polygon(0 0,100% 0,0 100%)}.mp-whatsapp .mp-milo::before{left:-7px;clip-path:polygon(0 0,100% 0,100% 100%)}
.mp-chat-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:4px -1px -2px 12px;line-height:1;font-size:9px;color:#707070;letter-spacing:0}.mp-personal .mp-chat-meta .mp-read-ticks{width:17px;height:12px;stroke:#34aede;stroke-width:1.7;overflow:visible}
.mp-whatsapp .mp-receipt{color:#717171}.mp-personal .mp-whatsapp .mp-phone-compose{background:#f4f4f4;gap:11px;padding-inline:12px;color:#008069}.mp-whatsapp .mp-compose-plus{background:transparent;color:#008069;width:22px}.mp-whatsapp .mp-compose-field{height:34px;box-shadow:inset 0 0 0 1px #dedede;padding:0 10px}.mp-personal .mp-whatsapp .mp-compose-field .mp-app-icon{color:#858585;width:18px;height:18px}.mp-personal .mp-whatsapp .mp-phone-compose>.mp-app-icon{width:22px;height:22px}.mp-whatsapp .mp-home-indicator{background:#f4f4f4}
@media(max-width:600px){.mp-personal .mp-phone{width:326px;border-radius:32px}.mp-personal .mp-device-scene{min-height:0;padding:24px 0 16px}.mp-personal .mp-bubble{font-size:13px;line-height:1.45}.mp-personal .mp-whatsapp .mp-bubble{font-size:13px}.mp-personal .mp-messages{padding-inline:13px;min-height:350px}.mp-personal .mp-phone-bar{padding-inline:20px}.mp-personal .mp-contact-actions{gap:12px}.mp-contact-name>span{font-size:9px}}
@media(max-width:360px){.mp-personal .mp-phone{border-radius:29px}.mp-personal .mp-phone-bar{padding-inline:17px}.mp-ios-island{width:68px;height:21px;top:10px}.mp-personal .mp-bubble,.mp-personal .mp-whatsapp .mp-bubble{font-size:12.5px;max-width:92%;padding-inline:10px}.mp-personal .mp-messages{padding-inline:11px;gap:10px}.mp-personal .mp-whatsapp .mp-phone-contact{gap:6px;padding-inline:10px}.mp-contact-name>span{font-size:8px}.mp-personal .mp-contact-actions{gap:11px;padding-left:3px}.mp-personal .mp-contact-actions .mp-app-icon{width:19px;height:19px}.mp-personal .mp-whatsapp .mp-phone-compose{gap:9px;padding-inline:10px}.mp-personal .mp-inline-detail{font-size:11px}.mp-personal .mp-inline-detail>div{font-size:11px}}

.mp-imessage .mp-imessage-call{position:absolute;right:13px;top:16px;display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#fff;box-shadow:0 2px 10px #00000008;color:#0070e8}.mp-personal .mp-imessage-call .mp-app-icon{width:20px;height:20px}.mp-whatsapp .mp-app-back,.mp-whatsapp .mp-contact-actions{color:#008069}

/* iMessage places the read state below the last outgoing bubble. */
.mp-personal .mp-imessage .mp-me:has(.mp-imessage-delivery){margin-bottom:17px}
.mp-imessage-delivery{position:absolute;right:1px;bottom:-18px;display:flex;gap:4px;align-items:center;color:#66666d;font-size:10px;line-height:1.4;white-space:nowrap;letter-spacing:0}
.mp-imessage-delivery>span{font-weight:600}
.mp-personal .mp-imessage .mp-inline-detail summary{color:#0064d2}