/* iOS app replica — "Buddy List" screen. Geometry measured 1:1 from the screenshot (CSS px = image px / 2). */
.ios,.ios *{box-sizing:border-box}
.ios{position:relative;width:460px;height:1000px;background:#cbcbcb;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Hanken Grotesk","Segoe UI",sans-serif;color:#000;text-align:left;-webkit-font-smoothing:antialiased;margin:0 auto}
.ios div,.ios span,.ios svg{margin:0;padding:0}
.ios .a{position:absolute}
.ios .dk{left:440px;top:71px;width:20px;height:34px;background:#9b9b9b}
.ios .sheet{left:0;top:71px;width:460px;height:929px;background:#fff;border-radius:26px 26px 0 0}
.ios .time{left:53px;top:25px;font-size:19.5px;line-height:25px;font-weight:600;letter-spacing:-.3px;color:#000}
.ios .sb{fill:#000}
.ios .title{left:0;top:100px;width:460px;text-align:center;font-size:20px;line-height:30px;font-weight:600;color:#000}
.ios .done{left:357px;top:89.5px;width:85px;height:49.5px;border-radius:25px;border:1px solid #e3e3e3;background:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.16);color:#3a8379;font-size:20px;line-height:47.5px;text-align:center;font-weight:500}
.ios .ln{left:0;width:460px;height:1px;background:#d9d9de}
.ios .pill{top:168px;height:45px;border-radius:23px;font-size:18.5px;line-height:45px;text-align:center}
.ios .pill.on{left:16px;width:93px;background:#388378;color:#fff;font-weight:600}
.ios .pill.off{left:118.5px;width:82.5px;background:#ececec;color:#111;font-weight:400}
.ios .more{left:424px;top:181px;width:20px;height:20px;fill:none;stroke:#388378;stroke-width:1.8}
.ios .more circle.d{fill:#388378;stroke:none}
.ios .band{left:0;width:460px;background:#f1f1f6;font-size:17.5px;font-weight:600;color:#8c8c91}
.ios .band .t{position:absolute;left:60px;top:0}
.ios .band .n{font-weight:400;color:#a2a2a7;margin-left:9px}
.ios .band svg{position:absolute;width:14px;height:14px;fill:none;stroke:#8a8a8e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ios .dot{width:14px;height:14px;border-radius:50%;background:#66c566}
.ios .name{left:60px;font-size:21px;line-height:27px;font-weight:500;color:#000}
.ios .sub{left:60px;font-size:17px;line-height:23px;color:#8e8e93}
.ios .chev{width:15px;height:15px;fill:none;stroke:#8a8a8e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ios .sep{left:36px;width:424px;height:1px;background:#e5e5ea}
.ios .add{left:27.5px;top:885.5px;width:405px;height:57px;border-radius:18px;background:#388378;color:#fff;font-size:20px;line-height:57px;font-weight:600;text-align:center}

/* iOS app replica, light chat screen (#hangout). Same 460x1000 canvas as the Buddy List screen. */
.ios.lgchat{background:#fff;color:#1c1c1e}
.ios.lgchat .time{color:#000}
.ios.lgchat .hd{left:0;top:71px;width:460px;height:55px;border-bottom:1px solid #e5e5ea}
.ios.lgchat .ttl{left:0;top:78px;width:460px;text-align:center;font-size:20px;line-height:26px;font-weight:700;color:#000}
.ios.lgchat .subt{left:0;top:104px;width:460px;text-align:center;font-size:14px;line-height:18px;color:#8e8e93}
.ios.lgchat .topic{left:19px;top:126px;width:335px;height:46px;line-height:46px;font-size:15px;color:#8e8e93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ios.lgchat .modes{left:370px;top:132px;width:80px;height:33px;border-radius:17px;background:#e2f1ef;color:#2f7f74;font-size:16px;line-height:33px;font-weight:500;padding-left:34px}
.ios.lgchat .modes svg{position:absolute;left:10px;top:7px;width:19px;height:19px;fill:none;stroke:#2f7f74;stroke-width:1.7;stroke-linecap:round}
.ios.lgchat .ln{background:#e5e5ea}
.ios.lgchat .lg{left:0;top:173px;width:460px;height:699px;padding:0 20px 6px 19px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;font-family:"SF Mono",Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:16px;font-weight:500;color:#1c1c1e}
.ios.lgchat .lg .l{flex:none;white-space:pre-wrap;line-height:18.25px;min-height:18.25px;overflow-wrap:anywhere}
.ios.lgchat .lg .l u{color:#1c1c1e;text-decoration:underline}
.ios.lgchat .lg .l b{font-weight:700}
.ios.lgchat .c1{color:#9b6df0}.ios.lgchat .c2{color:#c56a00}.ios.lgchat .c3{color:#0b8f7b}.ios.lgchat .c4{color:#3b82f6}.ios.lgchat .c5{color:#e0561f}
.ios.lgchat .lg .sp{flex:none;display:flex;align-items:center;gap:8px;margin:7px 0 5px;height:16px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Hanken Grotesk","Segoe UI",sans-serif;font-size:13px;font-weight:600;color:#d9362b}
.ios.lgchat .lg .sp i{flex:1;height:1px;background:#e5534b;display:block}
.ios.lgchat .bar{left:0;top:873px;width:460px;height:127px;background:#fff;border-top:1px solid #e5e5ea}
.ios.lgchat .aa{left:26px;top:891px;font-size:21px;line-height:40px;color:#8e8e93}
.ios.lgchat .inp{left:65px;top:891px;width:320px;height:40px;border-radius:20px;background:#f1f1f4;color:#8e8e93;font-size:16.5px;line-height:40px;padding-left:15px}
.ios.lgchat .snd{left:399px;top:892px;width:38px;height:38px;border-radius:50%;background:#388378}
.ios.lgchat .snd svg{position:absolute;left:9px;top:9px;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ios.lgchat .home{left:155px;top:983px;width:150px;height:5px;border-radius:3px;background:#000}