/* Android preview (Oct 29 2026). Loaded only on index, about and how-it-works, after every other stylesheet.
   Phone mockups reuse the Google Messages (v4) rules in styles.css; this file adds the RCS read receipt icon,
   the pink sent bubble option (?android=5), Google Messages (v4) and Samsung Messages (v3, default) bubbles for the How It Works chat cards. */
html[data-gpink]{--g-out:#FB0A7B}
html[data-android="4"] .receipt{display:flex;justify-content:flex-end}
html[data-android="4"] .g-rc{display:inline-flex;width:calc(var(--u)*15);height:calc(var(--u)*15);color:var(--g-out)}
html[data-android="4"] .g-rc svg{width:100%;height:100%;display:block}

/* How It Works chat cards */
html[data-android="4"] .about .o3e .chat .b{max-width:80%;font:400 19px/1.34 var(--g);letter-spacing:0;border-radius:22px;padding:11px 18px;margin-left:0;margin-right:0;-webkit-font-smoothing:antialiased}
html[data-android="4"] .about .o3e .chat .b.out{background:var(--g-out);color:#fff}
html[data-android="4"] .about .o3e .chat .b.in{background:var(--g-in);color:var(--g-ink)}
html[data-android="4"] .o3e .b::before,html[data-android="4"] .o3e .b::after{display:none}
html[data-android="4"] .o3e .b+.b{margin-top:8px}
html[data-android="4"] .about .o3e .chat .stamp{font:500 13px/16px var(--g);letter-spacing:.01em;color:var(--g-mute);margin:18px 0 10px}
html[data-android="4"] .o3e .chat .stamp b{font-weight:500}
html[data-android="4"] .o3e .g-emoji{font-family:'Noto Color Emoji',sans-serif}
@media (max-width:760px){html[data-android="4"] .about .o3e .chat .b{font-size:16px;padding:10px 16px;border-radius:20px}}
html[data-android="4"] .o3e .chat{background:none;border-radius:0;padding:0 14px;top:auto;bottom:auto}
@media (max-width:760px){html[data-android="4"] .o3e .chat{padding:0 10px}}

/* ---- Samsung Messages (v3, default since Oct 29) ---- */
/* RCS read receipt the Samsung way: "Read" stacked over the time beside the sent bubble */
html[data-android="3"] .b[data-r]::after{content:attr(data-r) "\A" attr(data-t);white-space:pre;text-align:right;line-height:1.3}
/* How It Works chat cards */
html[data-android="3"] .o3e .chat{background:none;border-radius:0;padding:0 14px;top:auto;bottom:auto}
html[data-android="3"] .about .o3e .chat .b{max-width:72%;font:400 18px/1.36 var(--g);letter-spacing:0;border-radius:20px;padding:10px 16px;margin-left:0;margin-right:0;-webkit-font-smoothing:antialiased}
html[data-android="3"] .about .o3e .chat .b.out{background:var(--g-out);color:#fff}
html[data-android="3"] .about .o3e .chat .b.in{background:var(--g-in);color:var(--g-ink)}
html[data-android="3"] .o3e .b::before{display:none}
html[data-android="3"] .o3e .b::after{display:block;font:400 12px/1.3 var(--g);color:var(--g-mute);bottom:2px}
html[data-android="3"] .o3e .b.out::after{right:calc(100% + 7px)}
html[data-android="3"] .o3e .b.in::after{left:calc(100% + 7px)}
html[data-android="3"] .o3e .b+.b{margin-top:12px}
html[data-android="3"] .about .o3e .chat .stamp{font:400 13px/16px var(--g);letter-spacing:0;color:var(--g-mute);margin:18px 0 12px}
html[data-android="3"] .o3e .chat .stamp b{font-weight:400}
html[data-android="3"] .o3e .g-emoji{font-family:'Noto Color Emoji',sans-serif}
@media (max-width:760px){html[data-android="3"] .about .o3e .chat .b{font-size:16px;padding:9px 14px;border-radius:19px}html[data-android="3"] .o3e .chat{padding:0 10px}}