.phone{--surface:#fafafa;--ink:#17211c;--wall:#eee9e0;--in:#fff;--out:#d9fdd3;--meta:#748376;--field:#eee;--border:#dededb;width:100%;max-width:350px;margin:auto;border:8px solid #202523;border-radius:43px;background:var(--surface);color:var(--ink);overflow:hidden;box-shadow:0 22px 35px #1d302521}.phone.dark{--surface:#101514;--ink:#f4f5f4;--wall:#090b0a;--in:#222827;--out:#154d3b;--meta:#9eafa8;--field:#272a28;--border:#202623}.statusbar{height:45px;padding:14px 23px 5px;display:flex;align-items:center;justify-content:space-between;font-size:14px}.statusbar>div{display:flex;align-items:center;gap:6px}.statusbar svg{width:17px;height:17px}.signal{font-size:10px;letter-spacing:-2px}.battery{background:var(--ink);color:var(--surface);border-radius:4px;font-size:9px;padding:2px 4px}.contact{height:64px;display:flex;align-items:center;gap:8px;padding:8px 12px 12px 7px;border-bottom:1px solid var(--border)}svg{width:22px;height:22px;flex-shrink:0}.back{display:flex}.avatar{width:37px;height:37px;border-radius:50%;background:#315c49;color:#fff;display:grid;place-items:center;font-size:26px;flex-shrink:0}.contact>strong{font-size:16px;margin-right:auto}.calls{display:flex;gap:17px;padding:9px 10px;border:1px solid var(--border);border-radius:25px;background:color-mix(in srgb,var(--ink) 3%,transparent)}.thread{height:425px;padding:12px 12px 15px;overflow-y:auto;scrollbar-width:thin;background:var(--wall) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTYwIDE4MCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOGM4YzgwIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4xOCI+PHBhdGggZD0ibTEyIDE1IDE4LTUgNyAyNS0xOCA1WiBNMTcgMTlsMTAtM00yMCAyNWw5LTMgTTc1IDEyYzIwLTIwIDM2IDEyIDQgMjQtMjctMTctMTctMjgtNC0yNFogTTExOSA1OGgyNXYxOGgtMjV6TTE0MyA2MnExNiAyIDAgMTBNMTE4IDgyaDI4IE0xOCA4MHE4LTE5IDIzLTRsLTMgMTktMjQtM1ogTTEzIDEwMGgyOSBNNjIgNjNsOC05IDcgOSAxMiAyLTkgOSAxIDEzLTExLTYtMTEgNiAyLTEzLTktOVogTTgwIDEyMmgyOHYyMEg5MWwtOSA3di03aC0yWiBNODggMTI5aDE0TTg4IDEzNWg4IE0xNyAxNDRsMTAtMTIgMTAgMTItMTAgMTVaIE0xMzIgMTIzdjIzTTEyMCAxMzVoMjQgTTEzMCAxNWwxMCA4LTcgMTEtMTAtOFoiLz48Y2lyY2xlIGN4PSI1NCIgY3k9IjEyMyIgcj0iNyIvPjxjaXJjbGUgY3g9IjE0NyIgY3k9IjE2NiIgcj0iOCIvPjxwYXRoIGQ9Ik00NCA0OHE4LTggMTYgME0zNyAxNjhxMTAtMTMgMjMgMCIvPjwvZz48L3N2Zz4=);overscroll-behavior:contain}.date{margin:0 auto 14px;background:var(--surface);border-radius:6px;padding:4px 9px;font-size:11px;width:max-content;color:var(--meta)}.row{display:flex;margin:7px 0}.row.out{justify-content:flex-end}.row.grouped{margin-top:-3px}.bubble{position:relative;max-width:89%;width:fit-content;padding:7px 9px 6px;background:var(--in);border-radius:9px;color:var(--ink);font-size:13px;line-height:1.45;box-shadow:0 1px 1px #00000012;overflow-wrap:break-word}.out .bubble{background:var(--out)}.row:not(.grouped) .bubble:before{content:'';position:absolute;left:-5px;top:0;border-top:8px solid var(--in);border-left:6px solid transparent}.row.out:not(.grouped) .bubble:before{left:auto;right:-5px;border-left:0;border-right:6px solid transparent;border-top-color:var(--out)}.meta{float:right;display:inline-flex;gap:3px;align-items:center;font-size:9px;color:var(--meta);margin-left:10px;margin-top:5px;white-space:nowrap;line-height:1.3}.checks{font-size:12px;letter-spacing:-3px;margin-right:3px}.composer{height:51px;display:flex;align-items:center;gap:11px;padding:8px 12px;background:var(--surface)}.input{height:32px;flex:1;border-radius:20px;background:var(--field);display:flex;align-items:center;justify-content:flex-end;padding-right:9px}.composer>svg{width:23px;height:23px}.home{height:15px;display:flex;justify-content:center;align-items:center}.home span{width:105px;height:4px;border-radius:5px;background:var(--ink)}.signal-bars{display:inline-flex;align-items:flex-end;gap:2px;height:13px;width:18px}.signal-bars i{display:block;width:3px;background:currentColor;border-radius:1px}.signal-bars i:nth-child(1){height:4px}.signal-bars i:nth-child(2){height:7px}.signal-bars i:nth-child(3){height:10px}.signal-bars i:nth-child(4){height:13px}.day-demo .phone{font-family:Arial,Helvetica,sans-serif}.day-demo .thread{height:425px}.day-message{width:fit-content;max-width:89%;margin:7px 0}.day-message.you{margin-left:auto}.day-message p{font:13px/1.45 Arial,Helvetica,sans-serif;padding:7px 9px 6px;background:var(--in);color:var(--ink);border-radius:9px;margin:0;box-shadow:0 1px 1px #0001}.day-message.you p{background:var(--out);color:var(--ink);border-radius:9px}.day-time{float:right;display:inline;font-size:9px;margin:5px 0 0 10px;color:var(--meta)}.day-message small{display:none}.day-typing{font-size:11px;color:var(--meta);padding:8px 0}.phone .statusbar{background:var(--surface);color:var(--ink)}.phone .screen{height:610px;border-radius:0;background:var(--wall);display:flex;flex-direction:column}.film .phone{padding:0}.phone .phonehead{background:var(--surface);color:var(--ink);gap:8px;padding:8px 12px 12px 7px;height:64px;border-color:var(--border)}.phonehead .brandcircle{flex-shrink:0}.phonehead>div:has(b){margin-right:auto;min-width:0}.phonehead b{font-size:13px}.phonehead .calls{gap:12px;padding:9px 8px}.phone .messages{background:var(--wall);background-image:var(--chat-pattern);padding:12px;min-height:0}.phone .msg{width:fit-content;max-width:89%;padding:7px 9px 6px;font:13px/1.45 Arial,Helvetica,sans-serif;background:var(--in);color:var(--ink);border-radius:9px;margin:7px 0}.phone .msg.customer{margin-left:auto;background:var(--out);border-radius:9px}.phone .msg small{float:right;display:inline;color:var(--meta);margin:5px 0 0 10px;font-size:9px}.phone .typing{background:var(--wall);color:var(--meta);font-size:11px}.phone .composer{flex-shrink:0;border:0}.phone .ad{background:var(--surface);color:var(--ink)}.phone .ad h3,.phone .ad p{color:var(--ink)}.phonehead #online:empty{display:none}.phone .contact{justify-content:flex-start}.phone .thread{scroll-behavior:auto}@media(max-width:480px){.day-demo{max-width:350px}.phone{max-width:350px}.day-demo .thread{height:405px}}:root{--chat-pattern:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTYwIDE4MCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOGM4YzgwIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4xOCI+PHBhdGggZD0ibTEyIDE1IDE4LTUgNyAyNS0xOCA1WiBNMTcgMTlsMTAtM00yMCAyNWw5LTMgTTc1IDEyYzIwLTIwIDM2IDEyIDQgMjQtMjctMTctMTctMjgtNC0yNFogTTExOSA1OGgyNXYxOGgtMjV6TTE0MyA2MnExNiAyIDAgMTBNMTE4IDgyaDI4IE0xOCA4MHE4LTE5IDIzLTRsLTMgMTktMjQtM1ogTTEzIDEwMGgyOSBNNjIgNjNsOC05IDcgOSAxMiAyLTkgOSAxIDEzLTExLTYtMTEgNiAyLTEzLTktOVogTTgwIDEyMmgyOHYyMEg5MWwtOSA3di03aC0yWiBNODggMTI5aDE0TTg4IDEzNWg4IE0xNyAxNDRsMTAtMTIgMTAgMTItMTAgMTVaIE0xMzIgMTIzdjIzTTEyMCAxMzVoMjQgTTEzMCAxNWwxMCA4LTcgMTEtMTAtOFoiLz48Y2lyY2xlIGN4PSI1NCIgY3k9IjEyMyIgcj0iNyIvPjxjaXJjbGUgY3g9IjE0NyIgY3k9IjE2NiIgcj0iOCIvPjxwYXRoIGQ9Ik00NCA0OHE4LTggMTYgME0zNyAxNjhxMTAtMTMgMjMgMCIvPjwvZz48L3N2Zz4=")}.film .phone.dark{display:block;padding:0;margin:auto;grid-template-columns:none;gap:0;color:var(--ink)}.film .phone .screen{width:100%;min-width:0}.phone .statusbar,.phone .phonehead,.phone .home{flex-shrink:0}.phone.dark .ad .eyebrow{color:var(--ink)}

/* Keep timestamps inside each example bubble, even when they wrap. */
.film .phone .msg{display:flow-root;font-weight:400}.film .phone .msg small{white-space:nowrap;line-height:1.3;margin-top:5px;margin-bottom:0;max-width:100%}