/* A faithful iPhone Messages screen, drawn at 393pt and scaled with its container.
   Every measurement is in "u" (1pt on a 393pt-wide iPhone screen). */
.ios-shot{container-type:inline-size;aspect-ratio:393/852;position:relative;border-radius:calc(100cqw * 0);}
.ios-screen{--u:calc(100cqw / 393);--blue:#0a7cff;--gray:#e9e9eb;--label:#000;--secondary:#8e8e93;
  position:absolute;inset:0;overflow:hidden;background:#fff;border-radius:calc(46 * var(--u));
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro","Inter",system-ui,"Helvetica Neue",sans-serif;
  color:var(--label);font-size:calc(17 * var(--u));line-height:calc(22 * var(--u));letter-spacing:-.022em;
  box-shadow:0 0 0 1px rgba(40,32,18,.08),0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-30 * var(--u)) rgba(40,32,18,.35),0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-12 * var(--u)) rgba(40,32,18,.18);
  -webkit-font-smoothing:antialiased;user-select:none;transition:opacity .45s}
.ios-screen.fading{opacity:0}

/* Status bar: screenshots never include the Dynamic Island. */
.ios-status{position:absolute;z-index:4;top:0;left:0;right:0;height:calc(54 * var(--u));display:flex;align-items:center;justify-content:space-between;padding:calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(48 * var(--u))}
.ios-time{font-size:calc(17 * var(--u));font-weight:600;letter-spacing:-.01em}
.ios-icons{display:flex;align-items:center;gap:calc(6 * var(--u))}
.ios-icons svg{display:block;fill:#000}
.ios-signal{width:calc(18 * var(--u));height:calc(12 * var(--u))}
.ios-wifi{width:calc(16 * var(--u));height:calc(12 * var(--u))}
.ios-battery{width:calc(27 * var(--u));height:calc(13 * var(--u))}

/* Navigation header with frosted material. */
.ios-header{position:absolute;z-index:3;top:0;left:0;right:0;height:calc(146 * var(--u));background:rgba(249,249,249,.82);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:calc(.5 * var(--u)) solid rgba(0,0,0,.14)}
.ios-back{position:absolute;left:calc(14 * var(--u));top:calc(71 * var(--u));width:calc(12 * var(--u));height:calc(21 * var(--u))}
.ios-back-count{position:absolute;left:calc(32 * var(--u));top:calc(71 * var(--u));min-width:calc(22 * var(--u));height:calc(21 * var(--u));padding:0 calc(6 * var(--u));border-radius:calc(11 * var(--u));background:var(--blue);color:#fff;font-size:calc(14 * var(--u));line-height:calc(21 * var(--u));font-weight:600;text-align:center;letter-spacing:0}
.ios-video{position:absolute;right:calc(16 * var(--u));top:calc(73 * var(--u));width:calc(27 * var(--u));height:calc(18 * var(--u))}
.ios-contact{position:absolute;left:50%;top:calc(58 * var(--u));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(5 * var(--u))}
.ios-avatar{width:calc(52 * var(--u));height:calc(52 * var(--u));border-radius:50%;display:grid;place-items:center;color:#fff;font-size:calc(22 * var(--u));font-weight:500;letter-spacing:0;background:linear-gradient(#a6abb6,#858a95)}
.ios-avatar.brand{background:linear-gradient(#35684e,#24493a);font-family:"Satoshi",sans-serif;font-weight:700;font-size:calc(30 * var(--u));letter-spacing:-.06em;padding-bottom:calc(3 * var(--u))}
.ios-name{font-size:calc(11.5 * var(--u));line-height:calc(14 * var(--u));letter-spacing:.01em;display:flex;align-items:center;gap:calc(3 * var(--u));white-space:nowrap}
.ios-name svg{width:calc(5 * var(--u));height:calc(9 * var(--u))}

/* Conversation */
.ios-thread{position:absolute;z-index:1;top:0;left:0;right:0;bottom:calc(84 * var(--u));overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(152 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u))}
.ios-thread.from-top{justify-content:flex-start}
.ios-inner{display:flex;flex-direction:column;will-change:transform}
.ios-sentinel{height:0}
.ios-stamp{text-align:center;color:var(--secondary);font-size:calc(12 * var(--u));line-height:calc(15 * var(--u));letter-spacing:0;margin:calc(14 * var(--u)) 0 calc(8 * var(--u))}
.ios-stamp b{font-weight:600}
.ios-stamp .service{display:block;font-weight:400}
.ios-row{display:flex;margin-top:calc(2 * var(--u))}
.ios-row.them{justify-content:flex-start}
.ios-row.me{justify-content:flex-end}
.ios-row.me+.ios-row.them,.ios-row.them+.ios-row.me,.ios-receipt+.ios-row{margin-top:calc(10 * var(--u))}
.ios-stamp+.ios-row{margin-top:0}
.ios-row.has-tap{margin-top:calc(16 * var(--u))!important}

.ios-bubble{position:relative;max-width:calc(268 * var(--u));padding:calc(7 * var(--u)) calc(13 * var(--u)) calc(7 * var(--u)) calc(13 * var(--u));border-radius:calc(18 * var(--u));overflow-wrap:break-word}
.them .ios-bubble{background:var(--gray);color:#000}
.me .ios-bubble{background:var(--blue);color:#fff}
/* Classic iOS tails, cut with the screen colour. */
.ios-row.tail .ios-bubble::before,.ios-row.tail .ios-bubble::after{content:"";position:absolute;bottom:0;height:calc(20 * var(--u))}
.me.tail .ios-bubble::before{right:calc(-7 * var(--u));width:calc(20 * var(--u));background:var(--blue);border-bottom-left-radius:calc(16 * var(--u)) calc(14 * var(--u))}
.me.tail .ios-bubble::after{right:calc(-26 * var(--u));width:calc(26 * var(--u));background:#fff;border-bottom-left-radius:calc(10 * var(--u))}
.them.tail .ios-bubble::before{left:calc(-7 * var(--u));width:calc(20 * var(--u));background:var(--gray);border-bottom-right-radius:calc(16 * var(--u)) calc(14 * var(--u))}
.them.tail .ios-bubble::after{left:calc(-26 * var(--u));width:calc(26 * var(--u));background:#fff;border-bottom-right-radius:calc(10 * var(--u))}

/* Tapback: a small reaction bubble on the bubble's top corner. */
.ios-tap{position:absolute;z-index:2;top:calc(-18 * var(--u));width:calc(32 * var(--u));height:calc(32 * var(--u));border-radius:50%;display:grid;place-items:center;border:calc(2 * var(--u)) solid #fff}
.them .ios-tap{right:calc(-18 * var(--u));background:var(--blue)}
.me .ios-tap{left:calc(-18 * var(--u));background:var(--gray)}
.ios-tap svg{width:calc(15 * var(--u));height:calc(15 * var(--u))}
.ios-tap::after{content:"";position:absolute;bottom:calc(-5 * var(--u));width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;background:inherit;border:calc(2 * var(--u)) solid #fff}
.them .ios-tap::after{left:calc(1 * var(--u))}
.me .ios-tap::after{right:calc(1 * var(--u))}

.ios-receipt{align-self:flex-end;color:var(--secondary);font-size:calc(11 * var(--u));line-height:calc(13 * var(--u));letter-spacing:0;margin-top:calc(3 * var(--u));padding-right:calc(3 * var(--u))}
.ios-receipt b{font-weight:600}

/* Typing indicator */
.ios-bubble.typing{display:flex;gap:calc(4 * var(--u));align-items:center;height:calc(36 * var(--u));padding:0 calc(13 * var(--u))}
.ios-bubble.typing i{width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;background:#98989d;animation:ios-dot 1.2s infinite ease-in-out}
.ios-bubble.typing i:nth-child(2){animation-delay:.18s}
.ios-bubble.typing i:nth-child(3){animation-delay:.36s}
.ios-row.typing .ios-bubble::before{content:"";position:absolute;left:calc(-2 * var(--u));bottom:calc(-2 * var(--u));width:calc(11 * var(--u));height:calc(11 * var(--u));border-radius:50%;background:var(--gray)}
.ios-row.typing .ios-bubble::after{content:"";position:absolute;left:calc(-8 * var(--u));bottom:calc(-8 * var(--u));width:calc(5 * var(--u));height:calc(5 * var(--u));border-radius:50%;background:var(--gray)}
@keyframes ios-dot{0%,60%,100%{opacity:.35;transform:scale(.9)}30%{opacity:1;transform:scale(1)}}

/* Composer: grows with the message, like the real field. */
.ios-composer{position:absolute;z-index:3;left:0;right:0;bottom:0;min-height:calc(84 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u)) calc(42 * var(--u)) calc(54 * var(--u));background:rgba(255,255,255,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.ios-plus{position:absolute;left:calc(12 * var(--u));bottom:calc(42 * var(--u));width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:50%;background:#e9e9eb;display:grid;place-items:center}
.ios-plus svg{width:calc(15 * var(--u));height:calc(15 * var(--u))}
.ios-field{position:relative;min-height:calc(34 * var(--u));border:calc(1 * var(--u)) solid #c9c9ce;border-radius:calc(17 * var(--u));padding:calc(5 * var(--u)) calc(38 * var(--u)) calc(5 * var(--u)) calc(12 * var(--u));font-size:calc(17 * var(--u));line-height:calc(22 * var(--u));color:#000}
.ios-text:empty::before{content:"iMessage";color:#c1c1c6}
.ios-caret{display:none;width:calc(2 * var(--u));height:calc(20 * var(--u));background:var(--blue);vertical-align:calc(-4 * var(--u));margin-left:calc(1 * var(--u));border-radius:calc(1 * var(--u))}
.ios-composer.focused .ios-caret{display:inline-block}
.ios-composer.focused .ios-text:empty::before{content:none}
.ios-mic,.ios-send{position:absolute;right:calc(4 * var(--u));bottom:calc(3 * var(--u));width:calc(26 * var(--u));height:calc(26 * var(--u))}
.ios-mic{right:calc(6 * var(--u))}
.ios-send{display:none;border-radius:50%;background:var(--blue);place-items:center}
.ios-send svg{width:calc(13 * var(--u));height:calc(14 * var(--u))}
.ios-composer.has-text .ios-send{display:grid}
.ios-composer.has-text .ios-mic{display:none}
.ios-home{position:absolute;left:50%;bottom:calc(8 * var(--u));width:calc(134 * var(--u));height:calc(5 * var(--u));border-radius:calc(3 * var(--u));background:#000;transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){.ios-bubble.typing i{animation:none;opacity:.6}}