/* iPhone 15 Pro-style device + iOS apps (Messages, lock screen, Safari).
   Logical screen 393x852. Everything inside uses the system font so on a Mac
   it renders in real SF Pro. */

.iphone{position:absolute;width:417px;height:876px;transform-origin:top left}
.iphone>.body{position:absolute;inset:0;border-radius:66px;background:#0B0B0C;
  box-shadow:0 0 0 2.5px #4B4F55,0 0 0 4px #2A2C30,0 0 0 5px #61656C,0 50px 110px rgba(0,0,0,.6),0 18px 40px rgba(0,0,0,.35)}
.iphone>.btn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#3C3F44,#6A6E75)}
.iphone>.btn.a{left:-6px;top:142px;height:30px}
.iphone>.btn.v1{left:-6px;top:198px;height:58px}
.iphone>.btn.v2{left:-6px;top:268px;height:58px}
.iphone>.btn.p{right:-6px;left:auto;top:222px;height:92px;background:linear-gradient(270deg,#3C3F44,#6A6E75)}
.iphone>.screen{position:absolute;left:12px;top:12px;width:393px;height:852px;border-radius:55px;overflow:hidden;background:#fff;font-family:var(--ios);color:#000;-webkit-font-smoothing:antialiased;isolation:isolate}
.iphone>.screen>.island{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000;z-index:90}
.iphone>.screen>.sb{position:absolute;left:0;right:0;top:0;height:54px;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:3px 0 0;pointer-events:none}
.iphone>.screen>.sb .tm{width:136px;text-align:center;font-weight:600;font-size:17px;letter-spacing:-.02em;padding-left:6px}
.iphone>.screen>.sb .ic{width:136px;display:flex;justify-content:center;align-items:center;gap:6px;padding-right:4px}
.iphone>.screen>.sb svg{display:block;fill:currentColor}
.iphone>.screen>.sb.light{color:#fff}
.iphone>.screen>.home{position:absolute;left:50%;bottom:8px;width:136px;height:5px;margin-left:-68px;border-radius:3px;background:#000;z-index:85}
.iphone>.screen>.home.light{background:#fff}
.iphone>.screen>.app{position:absolute;inset:0}

/* ---------- Messages: thread ---------- */
.th{position:absolute;inset:0;background:#fff}
.th-head{position:absolute;left:0;right:0;top:0;height:146px;z-index:20;background:rgba(248,248,248,.94);backdrop-filter:blur(20px);border-bottom:.5px solid rgba(0,0,0,.14)}
.th-head .back{position:absolute;left:10px;top:66px;display:flex;align-items:center;gap:2px;color:#007AFF;font-size:17px}
.th-head .back svg{width:13px;height:21px}
.th-head .back b{font-weight:400;min-width:22px;height:22px;border-radius:11px;background:#007AFF;color:#fff;font-size:13.5px;font-weight:600;display:grid;place-items:center;padding:0 6px;margin-left:3px}
.th-head .who{position:absolute;left:0;right:0;top:56px;display:flex;flex-direction:column;align-items:center}
.th-head .av{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:500;letter-spacing:.02em;background:linear-gradient(180deg,#A8AEB8,#868B95)}
.th-head .nm{margin-top:5px;font-size:12px;font-weight:400;color:#000;display:flex;align-items:center;gap:3px}
.th-head .nm svg{width:6px;height:10px;opacity:.35}
.th-head .vid{position:absolute;right:16px;top:74px;color:#007AFF}
.th-head .vid svg{width:28px;height:19px}
.th-scroll{position:absolute;left:0;right:0;top:146px;bottom:92px;overflow:hidden}
.th-content{position:absolute;left:0;right:0;top:0;padding:10px 0 14px;will-change:transform}
.th-label{text-align:center;font-size:12px;color:#8A8A8E;line-height:1.35;margin:4px 0 10px}
.th-label b{font-weight:600}
.ts{text-align:center;font-size:12px;color:#8A8A8E;margin:16px 0 8px;line-height:1.3}
.ts b{font-weight:600}
.m{display:flex;padding:0 14px;margin-top:2px;will-change:transform,opacity}
.m.me{justify-content:flex-end}
.m.gap{margin-top:9px}
.b{position:relative;max-width:268px;padding:7px 13px 8px;border-radius:19px;font-size:17px;line-height:22px;letter-spacing:-.01em;word-wrap:break-word;white-space:pre-wrap}
.me .b{background:#0A84FF;background:linear-gradient(180deg,#2D97FF 0%,#0A7DFF 100%);color:#fff}
.them .b{background:#E9E9EB;color:#000}
.green .me .b{background:linear-gradient(180deg,#3CD161 0%,#30C153 100%)}
/* tails */
.b.tail:before,.b.tail:after{content:'';position:absolute;bottom:0;height:20px}
.me .b.tail:before{right:-7px;width:20px;background:#0A7DFF;border-bottom-left-radius:16px 14px}
.green .me .b.tail:before{background:#30C153}
.me .b.tail:after{right:-26px;width:26px;background:#fff;border-bottom-left-radius:10px}
.them .b.tail:before{left:-7px;width:20px;background:#E9E9EB;border-bottom-right-radius:16px 14px}
.them .b.tail:after{left:-26px;width:26px;background:#fff;border-bottom-right-radius:10px}
.b .emo{font-size:17px}
/* photo + link preview */
.pic{border-radius:18px;overflow:hidden;width:214px;border:.5px solid rgba(0,0,0,.08)}
.pic img{display:block;width:100%;height:auto}
.lp{width:262px;border-radius:18px;overflow:hidden;background:#E9E9EB;border:.5px solid rgba(0,0,0,.06)}
.lp .img{height:138px;background-size:cover;background-position:center;position:relative}
.lp .tx{padding:9px 13px 11px}
.lp .tx b{display:block;font-size:15px;line-height:19px;font-weight:600;color:#000;letter-spacing:-.01em}
.lp .tx span{display:block;font-size:13px;color:#8A8A8E;margin-top:2px}
/* typing */
.typing{position:absolute;left:14px;width:64px;height:38px;border-radius:19px;background:#E9E9EB;display:flex;align-items:center;justify-content:center;gap:5px;opacity:0}
.typing:before{content:'';position:absolute;left:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:#E9E9EB}
.typing:after{content:'';position:absolute;left:-7px;bottom:-8px;width:7px;height:7px;border-radius:50%;background:#E9E9EB}
.typing i{width:9px;height:9px;border-radius:50%;background:#8E8E93}
/* compose bar */
.th-input{position:absolute;left:0;right:0;bottom:0;height:92px;background:#fff;z-index:20;padding:8px 10px 0 10px;display:flex;align-items:flex-start;gap:9px}
.th-input .plus{width:35px;height:35px;border-radius:50%;background:#E9E9EB;display:grid;place-items:center;color:#8A8A8E;flex:none}
.th-input .plus svg{width:15px;height:15px}
.th-input .field{flex:1;height:36px;border-radius:18px;border:1px solid #D1D1D6;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:17px;color:#B3B3B8}
.th-input .field svg{width:16px;height:20px;color:#8A8A8E}

/* ---------- Messages: inbox ---------- */
.inbox{position:absolute;inset:0;background:#fff}
.inbox .top{position:absolute;left:0;right:0;top:54px;padding:0 16px}
.inbox .edit{display:flex;justify-content:space-between;align-items:center;height:44px;color:#007AFF;font-size:17px}
.inbox .edit svg{width:24px;height:24px}
.inbox h1{font-size:34px;font-weight:700;letter-spacing:.01em;margin:2px 0 8px}
.inbox .search{height:36px;border-radius:10px;background:#EEEEF0;display:flex;align-items:center;gap:6px;padding:0 9px;color:#8A8A8E;font-size:17px}
.inbox .search svg{width:15px;height:15px}
.inbox .list{position:absolute;left:0;right:0;top:204px;bottom:0;overflow:hidden}
.inbox .row{position:absolute;left:0;right:0;height:80px;padding:10px 16px 0 32px;display:flex;gap:11px;background:#fff}
.inbox .row .ud{position:absolute;left:11px;top:34px;width:11px;height:11px;border-radius:50%;background:#007AFF;opacity:0}
.inbox .row .av{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:18px;font-weight:500;background:linear-gradient(180deg,#A8AEB8,#868B95);margin-top:2px}
.inbox .row .tx{flex:1;min-width:0;border-bottom:.5px solid #D9D9DE;height:70px}
.inbox .row .l1{display:flex;align-items:center;gap:6px}
.inbox .row .l1 b{font-size:17px;font-weight:600;letter-spacing:-.01em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox .row .l1 span{font-size:15px;color:#8A8A8E}
.inbox .row .l1 svg{width:7px;height:12px;color:#C4C4C7}
.inbox .row .pv{font-size:15px;line-height:19.5px;color:#8A8A8E;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:4px}

/* ---------- notification banners ---------- */
.ban{position:absolute;left:9px;right:9px;height:74px;border-radius:24px;background:rgba(246,246,248,.86);backdrop-filter:blur(26px) saturate(1.6);box-shadow:0 8px 30px rgba(0,0,0,.16);display:flex;gap:11px;align-items:flex-start;padding:12px 14px 10px 12px;z-index:70;opacity:0}
.ban .ai{width:38px;height:38px;border-radius:9px;flex:none;margin-top:2px}
.ban .bt{flex:1;min-width:0}
.ban .bt b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ban .bt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:19px;color:#1C1C1E}
.ban .now{font-size:13px;color:#6E6E73;flex:none}

/* ---------- lock screen ---------- */
.lock{position:absolute;inset:0;color:#fff;overflow:hidden}
.lock .wall{position:absolute;inset:0;background:
  radial-gradient(120% 70% at 20% 0%, #3C7058 0%, transparent 60%),
  radial-gradient(100% 60% at 100% 100%, #A45E25 0%, transparent 55%),
  linear-gradient(170deg,#1D4030 0%,#0F211A 55%,#1A120C 100%)}
.lock .date{position:absolute;left:0;right:0;top:80px;text-align:center;font-size:21px;font-weight:600;opacity:.92}
.lock .clock{position:absolute;left:0;right:0;top:100px;text-align:center;font-size:104px;font-weight:600;letter-spacing:-4px;line-height:1.05;font-variant-numeric:tabular-nums;font-family:-apple-system,'SF Pro Rounded','SF Pro Display',sans-serif;text-shadow:0 2px 20px rgba(0,0,0,.15)}
.lock .notes{position:absolute;left:10px;right:10px;top:254px;height:520px}
.lock .nt{position:absolute;left:0;right:0;height:72px;border-radius:21px;background:rgba(30,30,32,.42);backdrop-filter:blur(24px) saturate(1.4);display:flex;gap:11px;align-items:flex-start;padding:10px 13px 8px 12px;opacity:0;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.lock .nt .ai{width:38px;height:38px;border-radius:9px;flex:none;margin-top:1px}
.lock .nt .bt{flex:1;min-width:0}
.lock .nt b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lock .nt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:17.5px;color:rgba(255,255,255,.88)}
.lock .nt .now{font-size:13px;color:rgba(255,255,255,.6);flex:none}
.lock .qa{position:absolute;bottom:50px;width:50px;height:50px;border-radius:50%;background:rgba(40,40,42,.45);backdrop-filter:blur(20px);display:grid;place-items:center}
.lock .qa svg{width:22px;height:22px;fill:#fff}
.lock .qa.l{left:46px}.lock .qa.r{right:46px}

/* ---------- Safari ---------- */
.saf{position:absolute;inset:0;background:#fff}
.saf .pg{position:absolute;left:0;right:0;top:0;bottom:84px;overflow:hidden}
.saf .pg .inner{position:absolute;left:0;right:0;top:0;will-change:transform}
.saf .bar{position:absolute;left:0;right:0;bottom:0;height:84px;background:rgba(249,249,249,.94);backdrop-filter:blur(20px);border-top:.5px solid rgba(0,0,0,.12);z-index:20}
.saf .addr{position:absolute;left:12px;right:12px;top:7px;height:44px;border-radius:13px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;gap:6px;font-size:16px;color:#000}
.saf .addr .aa{position:absolute;left:14px;font-size:15px;font-weight:500}
.saf .addr svg{width:11px;height:13px;color:#555}
.saf .addr .rl{position:absolute;right:14px;width:16px;height:16px;color:#333}
.saf .tools{position:absolute;left:0;right:0;top:56px;display:flex;justify-content:space-around;padding:0 20px;color:#007AFF;display:none}
.saf .stat{position:absolute;left:0;right:0;top:0;height:54px;z-index:15;background:linear-gradient(#fff 70%,rgba(255,255,255,0))}

/* sheet (payment) */
.sheet{position:absolute;left:0;right:0;bottom:0;border-radius:14px 14px 0 0;background:#F2F2F7;z-index:60;padding:10px 18px 40px;box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translateY(105%)}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:#C7C7CC;margin:0 auto 14px}
.sheet h4{font-size:17px;font-weight:600;text-align:center}
.sheet .to{font-size:13px;color:#6E6E73;text-align:center;margin-top:3px}
.sheet .amt{font-size:44px;font-weight:700;letter-spacing:-1px;text-align:center;margin:16px 0 18px;font-variant-numeric:tabular-nums}
.sheet .row{background:#fff;border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:12px;font-size:16px;margin-bottom:10px}
.sheet .row .cc{width:42px;height:28px;border-radius:5px;background:linear-gradient(135deg,#1A1F71,#2B3AA8);color:#fff;font:800 11px Inter;display:grid;place-items:center;letter-spacing:.02em;font-style:italic}
.sheet .row span{color:#6E6E73;margin-left:auto;font-size:15px}
.sheet .pay{height:52px;border-radius:13px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px;font-weight:600;margin-top:16px;position:relative;overflow:hidden}
.sheet .pay .spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;position:absolute;opacity:0}
.sheet .ok{position:absolute;inset:0;background:#F2F2F7;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;border-radius:14px 14px 0 0}
.sheet .ok .tick{width:74px;height:74px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin-bottom:14px}
.sheet .ok .tick svg{width:38px;height:38px}
.sheet .ok b{font-size:20px}
.sheet .ok span{font-size:14.5px;color:#6E6E73;margin-top:5px;text-align:center;line-height:1.4;padding:0 20px}