.messages-demo { width: min(436px, calc(100vw - 32px)); margin: 2.5rem auto 3.25rem !important; }
.messages-demo--lead { width: min(260px, calc(100vw - 72px)); margin-top: 1.75rem !important; margin-bottom: 2.5rem !important; }
.messages-demo figcaption { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.allowance-message-player,
:host {
  --amp-blue: #1a8cff;
  --amp-incoming: #e9e9eb;
  --amp-screen: #fff;
  position: relative;
  width: 100%;
  aspect-ratio: 426 / 886;
  display: block;
  overflow: visible;
  container-type: inline-size;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: normal;
  text-align: left;
  isolation: isolate;
  filter: drop-shadow(0 24px 28px rgba(14, 31, 21, 0.18));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.amp-device,
.amp-device *,
.amp-device *::before,
.amp-device *::after { box-sizing: border-box; }
.amp-device button { margin: 0; appearance: none; -webkit-appearance: none; font: inherit; }
.amp-device h2,
.amp-device p,
.amp-device ol { margin: 0; }

/* The frame geometry is copied from message-demo's 426 x 886 design space. */
.amp-device { position: absolute; inset: 0; }
.amp-screen { position: absolute; inset: 1.8% 3.8406% 1.8% 3.9366%; z-index: 1; overflow: hidden; border-radius: 13.9% / 6.45%; background: var(--amp-screen); isolation: isolate; }
.amp-frame { position: absolute; top: -7.71%; left: -70.2832%; z-index: 2; width: 240.0384%; max-width: none !important; height: auto; margin: 0 !important; pointer-events: none; user-select: none; }
.amp-messages-scene,
.amp-approval-scene { position: absolute; inset: 0; overflow: hidden; background: var(--amp-screen); }
.amp-messages-scene { transition: opacity 140ms ease-out; }
.amp-messages-scene[hidden],
.amp-approval-scene[hidden],
.amp-face-id[hidden],
.amp-confetti[hidden] { display: none; }

/* The transcript fills the screen while the chrome floats above it. */
.amp-transcript { position: absolute; z-index: 1; inset: 0; min-height: 100%; margin: 0 !important; padding: 37.09cqw 3.286cqw var(--amp-bottom-clearance, 21.6cqw) !important; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; list-style: none; display: flex; flex-direction: column; justify-content: flex-end; gap: .704cqw; background: var(--amp-screen); font-size: 4.108cqw; }
.amp-transcript::-webkit-scrollbar { display: none; }

.amp-chrome { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; }
.amp-chrome::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); }
.amp-chrome--top { top: 0; height: 34.742cqw; }
.amp-chrome--top::before { background: linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,.4)); -webkit-mask-image: linear-gradient(to bottom,#000 55%,transparent 100%); mask-image: linear-gradient(to bottom,#000 55%,transparent 100%); }
.amp-chrome--bottom { bottom: 0; min-height: 19.718cqw; padding-bottom: 9.39cqw; }
.amp-chrome--bottom::before { background: linear-gradient(to top,rgba(255,255,255,.86),rgba(255,255,255,.4)); -webkit-mask-image: linear-gradient(to top,#000 60%,transparent 100%); mask-image: linear-gradient(to top,#000 60%,transparent 100%); }

.amp-status { position: relative; z-index: 1; height: 12.676cqw; padding: 0 8.92cqw 0 12.91cqw; display: flex; align-items: center; justify-content: space-between; color: #000; font-size: 3.991cqw; font-weight: 600; letter-spacing: -.047cqw; font-variant-numeric: tabular-nums; }
.amp-status span { display: flex; align-items: center; gap: 1.408cqw; }
.amp-status svg { width: auto; height: 2.817cqw; display: block; }

.amp-header { position: relative; z-index: 1; height: 22.066cqw; padding: 0 3.286cqw; display: flex; align-items: flex-start; justify-content: space-between; }
.amp-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(248,248,248,.78); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 .235cqw .587cqw rgba(0,0,0,.09), 0 0 0 .117cqw rgba(0,0,0,.025); }
.amp-pill--side { width: 9.859cqw; height: 9.859cqw; color: #1c1c1e; }
.amp-pill--side svg { width: auto; height: 4.46cqw; }
.amp-video svg { width: 5.869cqw; height: auto; }
.amp-contact { position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; align-items: center; gap: .939cqw; transform: translateX(-50%); }
.amp-contact img { width: 12.207cqw; height: 12.207cqw; margin: 0 !important; border-radius: 50%; object-fit: cover; background: #fff; }
.amp-contact strong { gap: .423cqw; padding: .939cqw 2.113cqw .939cqw 2.817cqw; color: #000; font-size: 3.286cqw; font-weight: 700; line-height: 1; }
.amp-contact strong svg { width: 1.878cqw; height: 2.113cqw; color: rgba(0,0,0,.46); }

.amp-row { position: relative; display: flex; flex-direction: column; animation: amp-bubble-in 300ms cubic-bezier(.22,1,.36,1) both; }
.amp-row--user { align-items: flex-end; }
.amp-row--alfie { align-items: flex-start; }
.amp-row--user + .amp-row--alfie,
.amp-row--alfie + .amp-row--user { margin-top: 2.582cqw; }
.amp-row.amp-row--has-reaction { margin-top: 1.65em; }
.amp-bubble { position: relative; max-width: 76%; padding: .44em .76em .5em; border-radius: 1.16em; line-height: 1.3; letter-spacing: -.056em; overflow-wrap: anywhere; }
.amp-row--user .amp-bubble { color: #fff; background: var(--amp-blue); }
.amp-row--alfie .amp-bubble { color: #000; background: var(--amp-incoming); }
.amp-bubble::before,
.amp-bubble::after { content: ""; position: absolute; z-index: -1; bottom: -.11em; height: 1.16em; }
.amp-row--user .amp-bubble::before { right: -.4em; width: 1.16em; border-bottom-left-radius: .86em; background: var(--amp-blue); }
.amp-row--user .amp-bubble::after { right: -1.5em; width: 1.5em; border-bottom-left-radius: .58em; background: var(--amp-screen); }
.amp-row--alfie .amp-bubble::before { left: -.4em; width: 1.16em; border-bottom-right-radius: .86em; background: var(--amp-incoming); }
.amp-row--alfie .amp-bubble::after { left: -1.5em; width: 1.5em; border-bottom-right-radius: .58em; background: var(--amp-screen); }
.amp-row--user:has(+ .amp-row--user) .amp-bubble::before,
.amp-row--user:has(+ .amp-row--user) .amp-bubble::after,
.amp-row--alfie:has(+ .amp-row--alfie) .amp-bubble::before,
.amp-row--alfie:has(+ .amp-row--alfie) .amp-bubble::after { display: none; }
.amp-delivered { margin: .939cqw .939cqw .47cqw; color: #8a8a8e; font-size: .63em; font-weight: 500; }

.amp-media { width: 100%; margin-top: .42em; display: grid; gap: .24em; }
.amp-media > span { display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: .62em; background: #fff; }
.amp-media img { width: 100%; height: 100%; margin: 0 !important; display: block; border-radius: 0; object-fit: cover; background: #fff; }
.amp-media--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.amp-media--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.amp-row:has(.amp-media--1) .amp-bubble { max-width: min(68%,13em); }

.amp-bubble--preview-text { margin-block: .18em; }
.amp-bubble--preview-text::before,
.amp-bubble--preview-text::after { display: none; }
.amp-link-card { position: relative; width: min(76%,14em); overflow: hidden; border: .5px solid rgba(0,0,0,.08); border-radius: .95em; display: block; background: var(--amp-incoming); color: #1c1c1e; text-decoration: none; box-shadow: 0 .03em .03em rgba(0,0,0,.05); }
.amp-link-card > img { width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0 !important; display: block; object-fit: cover; object-position: 50% 28%; }
.amp-link-card > span { padding: .57em .69em .62em; display: block; }
.amp-link-card strong,
.amp-link-card small { display: block; }
.amp-link-card strong { overflow: hidden; font-size: .85em; line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; }
.amp-link-card small { margin-top: .17em; color: #6e6e73; font-size: .65em; line-height: 1.15; }

.amp-reaction { position: absolute; z-index: 3; top: -1.56em; left: -.78em; width: 1.95em; height: 1.95em; display: grid; place-items: center; border-radius: 50%; background: var(--amp-incoming); box-shadow: 0 0 0 .1em var(--amp-screen), 0 .1em .24em rgba(0,0,0,.08); transform-origin: 82% 88%; animation: amp-reaction-pop 420ms cubic-bezier(.2,.9,.28,1.2) both; }
.amp-reaction > span { font-size: 1.08em; line-height: 1; }
.amp-reaction i,
.amp-reaction b { position: absolute; display: block; border-radius: 50%; background: var(--amp-incoming); box-shadow: 0 0 0 .07em var(--amp-screen); }
.amp-reaction i { left: -.1em; bottom: -.18em; width: .38em; height: .38em; }
.amp-reaction b { left: -.28em; bottom: -.42em; width: .18em; height: .18em; }

.amp-typing .amp-bubble { padding: .62em .8em; display: flex; align-items: center; }
.amp-typing-dots { display: flex; align-items: center; gap: .24em; }
.amp-typing-dots i { width: .47em; height: .47em; border-radius: 50%; background: #8e8e93; animation: amp-typing-pulse 1250ms ease-in-out infinite; }
.amp-typing-dots i:nth-child(2) { animation-delay: 180ms; }
.amp-typing-dots i:nth-child(3) { animation-delay: 360ms; }

.amp-approval-link { width: 100%; margin-top: .55em; padding: .62em .7em; border: 0; border-radius: .72em; display: flex; align-items: center; gap: .52em; background: rgba(255,255,255,.72); color: #087cff; text-align: left; cursor: default; }
.amp-approval-link img { width: 1.48em; height: 1.48em; flex: 0 0 auto; margin: 0 !important; border-radius: .34em; object-fit: cover; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.amp-approval-link span { min-width: 0; flex: 1; }
.amp-approval-link strong,
.amp-approval-link small { display: block; }
.amp-approval-link strong { font-size: .88em; }
.amp-approval-link small { margin-top: .12em; color: #6e6e73; font-size: .62em; white-space: nowrap; }
.amp-approval-link b { font-size: 1.35em; font-weight: 400; }

.amp-composer { position: relative; z-index: 1; padding: 1.878cqw 2.817cqw 0; display: flex; align-items: center; gap: 2.113cqw; }
.amp-composer-plus { width: 8.451cqw; height: 8.451cqw; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(248,248,248,.78); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); box-shadow: 0 .235cqw .939cqw rgba(0,0,0,.1),0 0 0 .117cqw rgba(0,0,0,.04); color: #6b6b70; }
.amp-composer-plus svg { width: 4.46cqw; height: 4.46cqw; }
.amp-composer-field { min-width: 0; min-height: 8.451cqw; padding: 0 2.582cqw 0 3.521cqw; flex: 1; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); box-shadow: 0 .235cqw .939cqw rgba(0,0,0,.1),0 0 0 .117cqw rgba(0,0,0,.04); }
.amp-composer-copy { min-width: 0; overflow: hidden; color: #b0b0b6; font-size: 3.873cqw; white-space: nowrap; text-overflow: ellipsis; }
.amp-composer-action { flex: 0 0 auto; display: flex; align-items: center; color: #8e8e93; }
.amp-composer-action svg { width: auto; height: 4.46cqw; }
.amp-composer--active { align-items: flex-end; }
.amp-composer--active .amp-composer-field { min-height: 8.451cqw; height: auto; padding-top: 1.643cqw; padding-bottom: 1.643cqw; align-items: flex-end; border-radius: 4.225cqw; }
.amp-composer--active .amp-composer-copy { max-height: 6em; flex: 1; overflow-wrap: anywhere; color: #1c1c1e; font-size: 3.873cqw; line-height: 1.2; white-space: pre-wrap; }
.amp-composer--active .amp-composer-copy::after { content: ""; width: 1px; height: 1em; margin-left: 1px; display: inline-block; vertical-align: -.12em; background: currentColor; animation: amp-caret 700ms steps(1,end) infinite; }
.amp-composer-send { width: 5.399cqw; height: 5.399cqw; align-self: flex-end; display: grid; place-items: center; border-radius: 50%; background: #087cff; color: #fff; font-size: 3.991cqw; font-weight: 800; line-height: 1; }
.amp-home { position: absolute; left: 50%; bottom: 1.878cqw; z-index: 1; width: 32.864cqw; height: 1.174cqw; border-radius: 3px; background: #000; opacity: .85; transform: translateX(-50%); }

.amp-confetti { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; pointer-events: none; }

/* Approval is the same 426 x 886 design surface as message-demo. */
.amp-approval-scene { z-index: 5; color: #17201d; background: #f7f8f7; animation: amp-approval-in 140ms ease-out both; }
.amp-approval-scene--leaving { animation: amp-approval-out 140ms ease-in both; }
.amp-approval-scene .amp-status { height: 12.676cqw; background: #fff; }
.amp-browser { height: 9.859cqw; padding: 0 4.225cqw; display: grid; grid-template-columns: 7.042cqw 1fr 7.042cqw; align-items: center; border-bottom: 1px solid #e6e9e7; background: rgba(255,255,255,.96); color: #6c736f; font-size: 2.817cqw; text-align: center; }
.amp-browser button { width: 7.042cqw; height: 9.859cqw; padding: 0; border: 0; background: none; color: inherit; font-size: 6.103cqw; font-weight: 400; line-height: 1; }
.amp-browser strong { color: #303733; font-size: 2.817cqw; font-weight: 650; }
.amp-browser span { text-align: right; }
.amp-approval-content { position: relative; height: calc(100% - 22.535cqw); overflow-y: auto; scrollbar-width: none; }
.amp-approval-content::-webkit-scrollbar { display: none; }
.amp-checkout { width: min(100%,159.624cqw); margin: 0 auto; padding: 3.286cqw 5.634cqw 6.573cqw; display: grid; justify-items: center; color: #17201d; text-align: center; }
.amp-checkout-logo { width: 8.92cqw; height: 8.92cqw; margin: 0 0 2.817cqw !important; border-radius: 2.347cqw; object-fit: cover; box-shadow: 0 1.174cqw 3.286cqw rgba(31,138,100,.18); }
.amp-checkout h2,
.amp-approved h2 { margin: 0; font-size: 5.869cqw; letter-spacing: -.235cqw; text-wrap: balance; }
.amp-checkout-product { width: 26.291cqw; height: 26.291cqw; margin: 5.164cqw 0 3.052cqw !important; border-radius: 5.164cqw; object-fit: cover; box-shadow: 0 3.286cqw 7.042cqw rgba(49,38,29,.13); }
.amp-product-copy strong,
.amp-product-copy small { display: block; }
.amp-product-copy strong { max-width: 65.728cqw; font-size: 3.052cqw; line-height: 1.25; }
.amp-product-copy small { margin-top: .704cqw; color: #7b817e; font-size: 2.347cqw; }
.amp-limit { margin-top: 4.225cqw; }
.amp-limit b,
.amp-limit span { display: block; }
.amp-limit b { font-size: 6.573cqw; font-variant-numeric: tabular-nums; letter-spacing: -.263cqw; }
.amp-limit span { margin-top: -.235cqw; color: #7b817e; font-size: 2.113cqw; }
.amp-payment { margin: 4.695cqw 0 0 !important; color: #626966 !important; font-size: 2.347cqw !important; }
.amp-checkout-actions { width: 100%; margin-top: 5.634cqw; display: grid; gap: 2.347cqw; text-align: center; }
.amp-checkout-actions button { width: 100%; min-height: 10.798cqw; padding: 0; border: 0; border-radius: 2.817cqw; background: #1f8a64; color: #fff; font-size: 3.286cqw; font-weight: 750; }
.amp-checkout-actions p { order: 2; max-width: 70.423cqw; margin: 0 auto !important; color: #8a908d; font-size: 1.995cqw; line-height: 1.4; }
.amp-checkout-actions span { order: 3; min-height: 10.329cqw; display: grid; place-items: center; color: #737a76; font-size: 2.582cqw; }
.amp-approval-home { position: absolute; left: 50%; bottom: 1.878cqw; width: 32.864cqw; height: 1.174cqw; border-radius: 3px; background: #000; opacity: .85; transform: translateX(-50%); }

.amp-approved { height: 100%; padding: 17.371cqw 5.634cqw 0; display: grid; place-items: start center; align-content: start; justify-items: center; text-align: center; animation: amp-approved-in 360ms cubic-bezier(.2,.85,.3,1.1) both; }
.amp-approved .amp-checkout-logo { width: 12.207cqw; height: 12.207cqw; margin-bottom: 4.225cqw !important; border-radius: 3.286cqw; }
.amp-success-check { width: 14.554cqw; height: 14.554cqw; margin-bottom: 4.225cqw; display: grid; place-items: center; border-radius: 50%; background: #e5f6ee; color: #16805a; font-size: 7.277cqw; font-weight: 700; }
.amp-eyebrow { margin: 0 0 1.174cqw !important; color: #167352; font-size: 2.113cqw !important; font-weight: 800; letter-spacing: .258cqw; text-transform: uppercase; }
.amp-approved > p:not(.amp-eyebrow) { max-width: 58.685cqw; margin: 1.878cqw 0 5.634cqw !important; color: #6f7672; font-size: 2.817cqw; line-height: 1.4; }
.amp-approved-summary { width: min(100%,68.075cqw); padding: 2.347cqw; display: grid; grid-template-columns: 10.329cqw minmax(0,1fr); align-items: center; gap: 2.347cqw; border-block: 1px solid #e3e8e5; text-align: left; }
.amp-approved-summary img { width: 10.329cqw; height: 10.329cqw; margin: 0 !important; border-radius: 2.347cqw; object-fit: cover; }
.amp-approved-summary strong,
.amp-approved-summary small { display: block; }
.amp-approved-summary strong { overflow: hidden; font-size: 2.582cqw; text-overflow: ellipsis; white-space: nowrap; }
.amp-approved-summary small { margin-top: .704cqw; color: #7b817e; font-size: 2.113cqw; }

/* Face ID is a sibling of the frame, just as in message-demo, so it expands
   above the hardware Dynamic Island instead of being clipped beneath it. */
.amp-face-id { position: absolute; top: 6.338cqw; left: 50%; z-index: 4; width: 34.272cqw; height: 30.986cqw; border-radius: 8.92cqw; display: grid; place-items: center; overflow: hidden; background: #000; color: #fff; box-shadow: 0 3.756cqw 8.451cqw rgba(0,0,0,.24); transform-origin: 50% 0; animation: amp-island-expand 300ms cubic-bezier(.18,.86,.28,1.08) both; }
.amp-face-id-animation { width: 22.535cqw; height: 19.014cqw; animation: amp-island-content 260ms 150ms ease-out both; }
.amp-face-id-animation svg { transform: scale(1.85) !important; transform-origin: center; }

@keyframes amp-bubble-in { from { opacity: 0; transform: translateY(2.113cqw) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes amp-reaction-pop { 0% { opacity:0; transform:scale(.48) } 62% { opacity:1; transform:scale(1.12) } 82% { transform:scale(.96) } 100% { opacity:1; transform:scale(1) } }
@keyframes amp-typing-pulse { 0%,60%,100% { opacity:.36; transform:scale(.84) } 30% { opacity:1; transform:scale(1) } }
@keyframes amp-caret { 0%,52% { opacity:1 } 53%,100% { opacity:0 } }
@keyframes amp-approval-in { from { opacity:0 } to { opacity:1 } }
@keyframes amp-approval-out { from { opacity:1 } to { opacity:0 } }
@keyframes amp-island-expand { from { opacity:.92; transform:translateX(-50%) scale(.7,.24) } to { opacity:1; transform:translateX(-50%) scale(1) } }
@keyframes amp-island-content { from { opacity:0; transform:scale(.74) } to { opacity:1; transform:scale(1) } }
@keyframes amp-approved-in { from { opacity:0; transform:translateY(1.878cqw) scale(.98) } to { opacity:1; transform:none } }

.messages-channel-cta { margin: 2.5rem 0 1rem; padding: 2rem; text-align: center; border-radius: 24px; background: #101713; color: #fff; }
.messages-channel-cta p { margin: 0 0 1rem; color: #fff; font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 800; letter-spacing: -.035em; }
.messages-channel-cta > a { padding: .7rem 1.05rem; display: inline-block; border-radius: 999px; background: #0a84ff; color: #fff; font-weight: 800; text-decoration: none; }
.messages-channel-cta span { margin-top: 1rem; display: block; color: #b8c4bc; font-size: .86rem; }
.messages-channel-cta span a { color: #d7e6dd; }

@media (max-width: 430px) {
  .messages-demo { width: min(390px, calc(100vw - 24px)); }
  .messages-demo--lead { width: min(240px, calc(100vw - 72px)); }
}