/* WhatsApp for iOS (2026) at native 402×874 pt, matched to Bernard's iPhone screenshots (31 Oct 2026). Rendered at 3x into Apple's iPhone 17 Pro bezel. */
:root {
  --wp: #efe9e1;          /* chat wallpaper */
  --in: #ffffff;
  --out: #d9fdd3;
  --text: #0b0b0c;
  --meta: #7a7f84;
  --meta-out: #6b8a72;
  --tick: #53bdeb;
  --link: #027eb5;
  --btn: #0a7cc4;
  --notice: #fcf1d4;
  --bar: #f6f5f3;
  --sys: -apple-system, "SF Pro Text", "SF Pro", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 402px; height: 874px; overflow: hidden; background: var(--wp); }
body { font-family: var(--sys); color: var(--text); -webkit-font-smoothing: antialiased; }

.ios { position: relative; width: 402px; height: 874px; overflow: hidden;
  background-color: var(--wp);
  background-image: url("doodle.svg"); background-size: 180px 180px; }

/* Status bar: bold time in the left ear, icons in the right ear */
.sb { position: absolute; inset: 0 0 auto; height: 62px; z-index: 5; }
.sb .t { position: absolute; left: 0; width: 138px; top: 19px; text-align: center; font: 600 17px/22px var(--sys); letter-spacing: -.2px; }
.sb .ic { position: absolute; right: 0; width: 138px; top: 23px; display: flex; justify-content: center; gap: 6px; align-items: center; }

/* Header: back is its own glass circle; avatar and name sit on the wallpaper; one glass capsule of actions */
.nav { position: absolute; left: 0; right: 0; top: 56px; height: 56px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.navbg { position: absolute; inset: 0 0 auto; height: 124px; z-index: 3;
  background: linear-gradient(to bottom, rgba(239,233,225,.97) 0%, rgba(239,233,225,.9) 70%, rgba(239,233,225,0) 100%); }
.glass { background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  border: .5px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 6px 18px rgba(30,25,20,.10), inset 0 1px 0 rgba(255,255,255,.9); }
.back { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; font: 600 15px var(--sys); color: #fff; }
.av img { width: 40px !important; height: 40px !important; }
.who b { display: block; font: 600 17px/21px var(--sys); letter-spacing: -.3px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { display: block; font: 400 13px/16px var(--sys); color: #6d7175; white-space: nowrap; }
.acts { height: 44px; border-radius: 22px; display: flex; align-items: center; gap: 20px; padding: 0 16px; flex: none; }

/* Messages: a short chat starts at the top; a long one keeps its newest messages above the composer */
.chat { position: absolute; left: 0; right: 0; top: 116px; bottom: 92px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 4px 14px 10px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.day { align-self: center; margin: 8px 0 6px; padding: 5px 12px; border-radius: 10px; background: #fff; font: 600 15px/18px var(--sys); color: #000; letter-spacing: -.2px; box-shadow: 0 1px .5px rgba(11,20,26,.08); }
.notice { align-self: center; max-width: 340px; margin: 6px 0 8px; padding: 9px 14px; border-radius: 12px; background: var(--notice); font: 400 15px/20px var(--sys); color: #3b3b3b; text-align: center; letter-spacing: -.2px; }
.notice svg { display: inline-block; vertical-align: -1px; margin-right: 4px; }
.notice b { font-weight: 600; color: #3b3b3b; }

.m { position: relative; display: flow-root; max-width: 318px; padding: 6px 10px 7px 11px; border-radius: 18px; font: 400 17px/22px var(--sys); letter-spacing: -.35px; color: var(--text); box-shadow: 0 1px .5px rgba(11,20,26,.12); }
.m.in { align-self: flex-start; background: var(--in); }
.m.out { align-self: flex-end; background: var(--out); }
.m.gap { margin-top: 8px; }
.m .tm { float: right; margin: 9px -2px -6px 10px; font: 400 12px/14px var(--sys); color: var(--meta); display: inline-flex; gap: 3px; align-items: center; }
.m.out .tm { color: var(--meta-out); }
.m a { color: var(--link); text-decoration: none; }

/* Tails: a small curl at the bottom corner of the last bubble in a run */
.m.tail.in { border-bottom-left-radius: 4px; }
.m.tail.out { border-bottom-right-radius: 4px; }
.m.tail::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 14px; background-repeat: no-repeat; background-size: 10px 14px; }
.m.tail.in::after { left: -6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M10 0v14H1.5C.6 14 .2 13 .9 12.4 4.2 9.6 6 5.6 6 0z' fill='%23ffffff'/%3E%3C/svg%3E"); }
.m.tail.out::after { right: -6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M0 0v14h8.5c.9 0 1.3-1 .6-1.6C5.8 9.6 4 5.6 4 0z' fill='%23d9fdd3'/%3E%3C/svg%3E"); }

/* Link preview inside a bubble */
.lp { display: block; margin: -2px -6px 6px -7px; border-radius: 13px; overflow: hidden; background: rgba(11,20,26,.045); }
.m.out .lp { background: rgba(11,60,20,.06); }
.lp .txt { padding: 8px 10px 9px; }
.lp b { display: block; font: 600 15px/19px var(--sys); }
.lp small { display: block; font: 400 13px/17px var(--sys); color: var(--meta); }
.lpi { width: 66px; flex: none; background: #ebe1cf url("ml-logo.svg") center / contain no-repeat; }

/* Template buttons: segments under the bubble */
.tpl { align-self: flex-start; max-width: 318px; width: 100%; }
.tpl .m { max-width: none; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.tpl .b { margin-top: 2px; height: 44px; background: var(--in); border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 17px var(--sys); letter-spacing: -.3px; color: var(--btn); box-shadow: 0 1px .5px rgba(11,20,26,.12); }
.tpl .m.tail::after { display: none; }
.tpl .b:last-child { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }

/* Composer: plain glyphs and a white field on a light bar */
.compbar { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: var(--bar); z-index: 4; box-shadow: 0 -.5px 0 rgba(0,0,0,.08); }
.comp { position: absolute; left: 12px; right: 14px; bottom: 38px; height: 40px; z-index: 5; display: flex; align-items: center; gap: 12px; }
.comp .g { width: 28px; height: 36px; flex: none; display: grid; place-items: center; }
.field { flex: 1; height: 38px; border-radius: 19px; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; font: 400 17px var(--sys); color: #8a959c; }
.home { position: absolute; left: 50%; bottom: 8px; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: #0b0b0c; z-index: 6; }