:root{--wa-chat-bg:#efeae2;--wa-bubble-in:#fff;--wa-bubble-out:#d9fdd3;--wa-header:#f0f2f5;--wa-text:#111b21;--wa-meta:#667781;--wa-icon:#54656f;--wa-tick:#8696a0;--wa-tick-read:#53bdeb;--wa-pill-bg:#fffd;--wa-pill-text:#54656f;--wa-accent:#00a884;--wa-composer-bg:#f0f2f5;--wa-composer-field:#fff;--wa-bubble-shadow:0 1px .5px #0b141a21;--stage-bg:#101417;--stage-glow:#1d262b;--stage-text:#cbd5da;--stage-control:#1b2226;--stage-control-hover:#253036;--stage-border:#2c383e;--phone-width:390px;--phone-height:844px;--phone-radius:46px;--font:"Segoe UI", Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font);background:var(--stage-bg);color:var(--stage-text);-webkit-font-smoothing:antialiased;margin:0}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.stage{background:radial-gradient(ellipse 60% 55% at 50% 45%, var(--stage-glow), transparent 70%), var(--stage-bg);flex-direction:column;justify-content:center;align-items:center;gap:18px;height:100dvh;padding:20px 16px;display:flex}.phone{width:min(var(--phone-width), 100%);height:var(--phone-height);border-radius:var(--phone-radius);background:linear-gradient(160deg,#3a464d,#171d21 45%,#333f45);flex:0 auto;min-height:0;max-height:100%;padding:10px;position:relative;box-shadow:0 0 0 1px #0c1013,0 40px 80px -20px #000000bf,0 2px 5px #00000080}.phone__screen{border-radius:calc(var(--phone-radius) - 10px);background:var(--wa-chat-bg);height:100%;min-height:0;color:var(--wa-text);flex-direction:column;display:flex;position:relative;overflow:hidden}.status-bar{background:var(--wa-header);color:var(--wa-text);font-variant-numeric:tabular-nums;align-items:center;gap:8px;padding:8px 22px 6px;font-size:13px;font-weight:600;display:flex}.status-bar__notch{margin:-4px 0;background:#10151a;border-radius:0 0 14px 14px;flex:1;max-width:118px;height:22px;margin-inline:auto}.status-bar__icons{align-items:center;gap:4px;display:flex}.chat-header{background:var(--wa-header);color:var(--wa-icon);z-index:2;border-bottom:1px solid #0b141a14;align-items:center;gap:10px;padding:7px 12px 7px 6px;display:flex}.chat-header__back{color:inherit;cursor:default;background:0 0;border:0;padding:4px;display:flex}.avatar{color:#fff;background:#d1d7db;border-radius:50%;flex:none;place-items:center;width:40px;height:40px;font-size:19px;font-weight:600;display:grid}.chat-header__identity{flex:1;min-width:0}.chat-header__title{color:var(--wa-text);text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:500;line-height:1.35;overflow:hidden}.chat-header__subtitle{color:var(--wa-meta);text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;line-height:1.35;overflow:hidden}.chat-header__subtitle--typing{color:var(--wa-accent)}.chat-header__actions{color:var(--wa-icon);align-items:center;gap:18px;display:flex}.messages{overscroll-behavior:contain;background-color:var(--wa-chat-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23968b7d' stroke-opacity='.16' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M22 31h9M118 12h7M64 57l8-5M151 74h8M13 104l7 4M88 129h9M44 163h8M133 151l6-6M172 39h6M98 88h7M36 78l5 6M164 118h7M76 178h8M108 61h6'/%3E%3Cpath d='M53 18v8M143 96v7M28 133v9M181 158v7M69 111v8M119 172v6M5 61v7M96 33v7'/%3E%3Ccircle cx='84' cy='24' r='2.2'/%3E%3Ccircle cx='19' cy='84' r='2.2'/%3E%3Ccircle cx='158' cy='55' r='2.2'/%3E%3Ccircle cx='127' cy='113' r='2.2'/%3E%3Ccircle cx='58' cy='142' r='2.2'/%3E%3Ccircle cx='176' cy='134' r='2.2'/%3E%3Ccircle cx='102' cy='153' r='2.2'/%3E%3Ccircle cx='38' cy='47' r='2.2'/%3E%3Ccircle cx='146' cy='183' r='2.2'/%3E%3C/g%3E%3C/svg%3E");flex:1 1 0;min-height:0;overflow-y:auto}.messages__inner{flex-direction:column;justify-content:flex-end;min-height:100%;padding:12px 5% 14px;display:flex}.day{justify-content:center;margin:10px 0 12px;display:flex}.day__pill{background:var(--wa-pill-bg);color:var(--wa-pill-text);box-shadow:var(--wa-bubble-shadow);text-align:center;border-radius:8px;max-width:85%;padding:5px 12px;font-size:12.5px}.day--system .day__pill{text-transform:none}.row{margin-top:2px;display:flex}.row--head{margin-top:10px}.row--in{justify-content:flex-start;padding-left:8px}.row--out{justify-content:flex-end;padding-right:8px}.bubble{max-width:78%;color:var(--wa-text);box-shadow:var(--wa-bubble-shadow);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:8px;padding:6px 9px 8px;font-size:14.6px;line-height:1.34;animation:.14s ease-out both pop;position:relative}.bubble--in{background:var(--wa-bubble-in);color:var(--wa-text)}.bubble--out{background:var(--wa-bubble-out)}.row--head .bubble--in{border-top-left-radius:0}.row--head .bubble--out{border-top-right-radius:0}.bubble__tail{display:block;position:absolute;top:0}.bubble--in .bubble__tail{color:var(--wa-bubble-in);left:-8px}.bubble--out .bubble__tail{color:var(--wa-bubble-out);right:-8px}.bubble__sender{margin-bottom:1px;font-size:13px;font-weight:600;line-height:1.5}.bubble__spacer{width:38px;height:1px;display:inline-block}.bubble__spacer--out{width:58px}.bubble__meta{color:var(--wa-meta);white-space:nowrap;align-items:center;gap:3px;font-size:11px;line-height:1;display:flex;position:absolute;bottom:5px;right:9px}.ticks{color:var(--wa-tick);transition:color .22s}.ticks--read{color:var(--wa-tick-read)}.bubble--jumbo .bubble__text{font-size:36px;line-height:1.2}.bubble--typing{padding-bottom:10px}.dots{align-items:center;gap:4px;height:14px;padding:2px 2px 0;display:flex}.dots i{background:#9aa6ac;border-radius:50%;width:7px;height:7px;animation:1.25s ease-in-out infinite blink}.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}.composer{background:var(--wa-composer-bg);color:var(--wa-icon);align-items:center;gap:8px;padding:7px 10px 12px;display:flex}.composer__field{background:var(--wa-composer-field);border-radius:22px;flex:1;align-items:center;gap:10px;padding:8px 12px;display:flex}.composer__placeholder{color:#8696a0;flex:1;font-size:15px}.composer__mic{background:var(--wa-accent);color:#fff;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;display:grid}.curtain{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:3;background:#090d109e;place-items:center;display:grid;position:absolute;inset:0}.curtain__button{background:var(--wa-accent);color:#fff;font:inherit;cursor:pointer;border:0;border-radius:999px;align-items:center;gap:10px;padding:13px 22px;font-size:15px;font-weight:600;transition:transform .16s,filter .16s;display:flex;box-shadow:0 10px 30px -8px #00a884b3}.curtain__button:hover{filter:brightness(1.07);transform:translateY(-1px)}.playbar{background:var(--stage-control);border:1px solid var(--stage-border);opacity:1;border-radius:999px;flex:none;align-items:center;gap:8px;padding:6px;transition:opacity .5s;display:flex}.playbar--dimmed{opacity:.12}.playbar:hover,.playbar:focus-within{opacity:1}.playbar__button{width:34px;height:34px;color:var(--stage-text);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;transition:background .16s;display:grid}.playbar__button:hover:not(:disabled){background:var(--stage-control-hover)}.playbar__button:disabled{opacity:.35;cursor:default}.playbar__speeds{border-left:1px solid var(--stage-border);gap:2px;margin-left:2px;padding-left:4px;display:flex}.playbar__speed{color:#7c8b93;font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:6px 10px;font-size:12.5px;transition:background .16s,color .16s}.playbar__speed:hover{background:var(--stage-control-hover)}.playbar__speed.is-active{background:var(--wa-accent);color:#fff}:focus-visible{outline:2px solid var(--wa-accent);outline-offset:2px}@keyframes pop{0%{opacity:0;transform:translateY(6px)scale(.985)}to{opacity:1;transform:none}}@keyframes blink{0%,60%,to{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}@media (prefers-reduced-motion:reduce){.bubble{animation:none}.dots i{animation-name:fade;animation-duration:2.4s}.curtain__button:hover{transform:none}}@keyframes fade{0%,60%,to{opacity:.35}30%{opacity:1}}@media (width<=430px){.stage{justify-content:flex-start;gap:0;padding:0}.phone{width:100%;height:100%;max-height:none;box-shadow:none;background:0 0;border-radius:0;flex:1;padding:0}.phone__screen{border-radius:0}.status-bar__notch{background:0 0}.playbar{z-index:4;position:fixed;bottom:76px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000080}}