:root{color-scheme:light;--ink:#262626;--muted:#929292;--paper:#fafafa;--blue:#dbeafe;--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1)}
*{box-sizing:border-box}body{margin:0;background:#eeefed;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button{border:0;background:none}button:disabled{cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #6096ec;outline-offset:4px}[hidden]{display:none!important}button{transition:transform 160ms var(--ease-out),background 160ms ease}button:active{transform:scale(.97)}p,h1,h2{margin:0}img{display:block;pointer-events:none}.stage{min-height:100svh;display:flex;align-items:center;justify-content:center;gap:112px;padding:32px}.guide{width:255px}.eyebrow{font-size:10px;letter-spacing:2.1px;color:#747b74;display:flex;align-items:center;gap:8px}.eyebrow span{width:6px;height:6px;border-radius:50%;background:#86a28b}h1{font-size:42px;line-height:1.35;letter-spacing:-1.6px;font-weight:500;margin:30px 0 19px}.intro{font-size:15px;line-height:1.9;color:#7c807d}.steps{display:flex;flex-direction:column;margin:43px 0 25px;gap:9px}.steps button{padding:13px 0;display:flex;align-items:center;text-align:left;color:#8b8f8b;gap:17px;font-size:13px}.steps button>span{font-size:10px;letter-spacing:1px;font-variant-numeric:tabular-nums}.steps i{width:5px;height:5px;border-radius:50%;margin-left:auto;background:#424c44;opacity:0}.steps .selected{color:#303d32}.steps .selected i{opacity:1}.hint{font-size:12px;color:#7f857f;line-height:1.8;min-height:45px}.settings{border-top:1px solid #d9ddd7;margin-top:28px;padding-top:20px;display:flex;flex-direction:column;gap:15px;font-size:11px;color:#686f69}.settings label{display:flex;align-items:center;gap:7px;cursor:pointer}.settings input{accent-color:#526956;width:12px;height:12px;margin:0}.settings button{text-align:left;padding:0;font-size:11px;color:#68756b}.guide>small{display:block;font-size:10px;color:#9a9e99;margin-top:23px}.device-stage{position:relative}.device-wrap{width:393px;height:852px;position:relative}.phone{width:393px;height:852px;position:relative;background:var(--paper);border-radius:50px;overflow:hidden;transform-origin:top left;box-shadow:0 0 0 1px #fff,0 24px 75px -26px #333c3338,0 3px 12px #333c3305}.statusbar{position:absolute;z-index:12;left:0;right:0;top:0;height:54px;padding:19px 26px 0 54px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;color:#000;font-size:17px;font-weight:600;line-height:22px}.statusbar>div{display:flex;align-items:center;gap:7px;padding-top:3px}.home-indicator{position:absolute;bottom:8px;left:127px;width:139px;height:5px;border-radius:99px;background:#000;z-index:12}.chat-layer{position:absolute;inset:0;transition:opacity 250ms var(--ease-out),transform 300ms var(--ease-out)}.messages{position:absolute;inset:0 0 122px;overflow-y:auto;scrollbar-width:none;padding:16px 16px 8px;overscroll-behavior:contain}.messages::-webkit-scrollbar{display:none}.bubble{font-size:16px;line-height:24px;background:rgba(229,229,229,.72);border-radius:24px;padding:12px}.history{height:140px;margin-right:7px;margin-bottom:12px;overflow:hidden}.room{color:#2b7fff;text-decoration:underline dotted;font-size:16px;white-space:nowrap;letter-spacing:-.25px}.room img{display:inline-block;margin-right:3px;vertical-align:middle}.project{display:flex;align-items:center;gap:10px;margin-bottom:12px;height:68px;text-align:left}.project strong{font-size:16px;font-weight:500;display:block;line-height:24px}.project small{display:block;color:#686868;font-size:14px;line-height:20px}.file-icon{background:#fff;width:36px;height:36px;display:grid;place-items:center;border-radius:10px}.user{margin-left:24px;background:var(--blue);padding:12px 16px;margin-bottom:12px}.assistant{margin-right:24px;margin-bottom:8px}.email-card{margin-right:24px;display:flex;flex-direction:column;gap:6px}.email-preview{border-radius:12px;background:white;padding:12px;display:flex;flex-direction:column;gap:8px;text-align:left;width:100%;margin-top:2px;line-height:24px;font-size:16px}.email-preview>span{display:block}.email-preview em{color:#929292;font-style:normal;margin-right:9px}.email-excerpt{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.outline-action{text-align:left;border:1px dashed #a1a1a1;border-radius:10px;padding:7px 8px;line-height:20px;font-size:14px;height:36px}.outline-action+.outline-action{margin-top:2px}.top-fade{position:absolute;top:0;left:0;width:100%;height:120px;pointer-events:none;background:linear-gradient(#fafafa,rgba(250,250,250,.8) 50%,rgba(250,250,250,0));backdrop-filter:blur(.5px)}.chat-nav,.call-nav{position:absolute;top:54px;left:0;width:100%;height:56px;padding:0 16px;display:flex;justify-content:space-between;align-items:center}.round{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 4px 16px #0000000d;display:grid;place-items:center;border:1px solid #fff;flex-shrink:0;position:relative;backdrop-filter:blur(12px)}.round:active{transform:scale(.93)}.avatar{position:absolute;left:124.5px;top:250px;width:144px;height:144px;z-index:5;transform-origin:top center;transform:translateY(-194px) scale(.472222);transition:transform 500ms var(--ease-drawer);filter:drop-shadow(0 8px 16px #26262614);pointer-events:none}.portrait{position:relative;width:144px;height:144px;overflow:hidden;border-radius:50%;background:#fff;mask:url('assets/69625.svg') center / 144px 144px no-repeat}.portrait :where(.avatar-expression)>img{position:absolute;left:18px;top:1.33px;width:108px;height:144px;object-fit:cover;transition:opacity 250ms var(--ease-out)}.portrait .wave{opacity:0}.avatar-label{position:absolute;top:118px;left:150px;width:93px;border:1px solid #fff;border-radius:16px;padding:4px 12px;background:#ffffffb3;box-shadow:0 4px 16px #0000000d;backdrop-filter:blur(12px);display:flex;align-items:center;flex-direction:column}.avatar-label strong{font-size:16px;font-weight:500;line-height:24px}.avatar-label span{font-size:14px;color:#929292;line-height:20px;white-space:nowrap}.composer{position:absolute;bottom:34px;left:16px;width:361px;height:68px;padding:12px;border:1px solid white;border-radius:34px;display:flex;gap:8px;align-items:center;background:#ffffffa3;backdrop-filter:blur(20px);box-shadow:0 0 20px #0000000d,0 2px 20px #0000000d}.plain{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;padding:8px}.composer input[type=text],.composer input:not([type]){width:100%;min-width:0;border:0;outline:0;background:none;font-size:18px;padding:0;letter-spacing:-.18px}.composer input::placeholder{color:#a1a1a1}.send-arrow{font-size:26px;line-height:30px;color:#3478f6}.call-layer{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 300ms var(--ease-out)}.rings{position:absolute;left:48px;top:174px;width:297px;height:297px;transition:opacity 250ms var(--ease-out)}.ring{position:absolute}.outer{left:0;top:0;animation:ring-outer 2s var(--ease-in-out) infinite}.middle{left:39px;top:38px;animation:ring-middle 2s var(--ease-in-out) infinite}.call-title{position:absolute;top:483px;left:0;width:100%;text-align:center}.call-title h2{font-size:30px;line-height:36px;font-weight:500;letter-spacing:-.6px}.call-title p{margin-top:4px;font-size:18px;line-height:28px;color:#939393;letter-spacing:-.18px;font-variant-numeric:tabular-nums}.call-actions{position:absolute;bottom:50px;left:0;width:100%;display:flex;justify-content:center;gap:40px;transform:translateY(16px);transition:transform 300ms var(--ease-out)}.round.large{width:72px;height:72px;box-shadow:0 6.5px 26px #0000000d}.round.hangup{background:#fb2c36;border-color:#fb2c36}.round[aria-pressed=true]{background:#e3e8ee}.slash{position:absolute;height:2px;width:31px;background:#262626;transform:rotate(48deg);border:1px solid #fff;opacity:0}.round[aria-pressed=true] .slash{opacity:1}.subtitle{position:absolute;top:585px;left:40px;width:313px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out);pointer-events:none}.subtitle>span{font-size:11px;color:#a1a1a1}.subtitle p{font-size:16px;line-height:25px;margin-top:8px}.phone[data-captions=true][data-state=connected] .subtitle{opacity:1;transform:translateY(0)}.phone:not([data-state=chat]):not([data-collapsed=true]) .chat-layer{opacity:0;transform:scale(.97);pointer-events:none}.phone:not([data-state=chat]):not([data-collapsed=true]) .call-layer{opacity:1;pointer-events:auto}.phone:not([data-state=chat]):not([data-collapsed=true]) .avatar{transform:translateY(0) scale(1)}.phone:not([data-state=chat]) .call-actions{transform:translateY(0)}.phone[data-state=connected] .rings{opacity:0}.phone[data-state=connected] .neutral{opacity:0}.phone[data-state=connected] .wave{opacity:1}.phone[data-state=chat] .ring,.phone[data-state=connected] .ring{animation-play-state:paused}.toast{position:absolute;z-index:30;top:124px;left:50%;transform:translate(-50%,-8px);max-width:330px;width:max-content;padding:12px 18px;border-radius:22px;background:#262626ed;box-shadow:0 8px 30px #00000010;color:#fff;font-size:13px;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}.toast.visible{opacity:1;transform:translate(-50%,0)}#newMessages .bubble{margin-top:12px}.home-view{position:absolute;inset:54px 0 34px;background:#fafafa;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}.home-view>img{width:120px;height:120px;object-fit:cover;border-radius:50%}.home-view h2{font-size:30px;font-weight:500}.home-view p{font-size:15px;color:#929292}.home-view button,.primary-action{background:#262626;color:#fff;border-radius:20px;padding:12px 24px;margin-top:8px}.phone dialog{border:1px solid #fff;background:#fafafa;color:#262626;border-radius:28px;width:345px;padding:26px 22px;max-height:650px;box-shadow:0 30px 80px #00000030}.phone dialog::backdrop{background:#20202040;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:12px;top:10px;font-size:26px;color:#888;width:32px;height:32px}.phone dialog h3{font-size:20px;font-weight:500;margin:8px 0 24px}.phone dialog p{font-size:14px;line-height:1.8;margin:14px 0;color:#686868}.phone dialog label{display:block;font-size:12px;color:#929292;margin:12px 0}.phone dialog textarea{width:100%;height:185px;resize:vertical;background:#fff;border:1px solid #e5e5e5;padding:12px;border-radius:12px;font-size:15px;line-height:1.7}.phone dialog .primary-action{width:100%;font-size:14px}.mobile-note{display:none}@keyframes ring-outer{0%,100%{transform:scale(.99);opacity:.62}50%{transform:scale(1.025);opacity:1}}@keyframes ring-middle{0%,100%{transform:scale(.99);opacity:.7}50%{transform:scale(1.025);opacity:1}}
@media(hover:hover) and (pointer:fine){.round:hover{background:#fff}.hangup:hover{background:#ef2330}.steps button:hover{color:#303d32}.outline-action:hover{background:#ffffff65}.email-preview:hover{background:#ffffffb0}}
@media(max-width:850px){.stage{gap:55px;padding:24px}.guide{width:220px}h1{font-size:36px}}
@media(max-width:650px){.stage{padding:14px 12px 30px;gap:0;min-height:100svh}.guide{display:none}.mobile-note{display:block;position:fixed;bottom:8px;left:0;right:0;text-align:center;font-size:10px;color:#949993}.phone{box-shadow:0 0 0 1px white,0 18px 55px #303d321a}}
@media(prefers-reduced-motion:reduce){.avatar{transition:transform 0ms,opacity 200ms var(--ease-out)}.chat-layer,.call-actions,.subtitle,.toast{transition:opacity 200ms var(--ease-out);transform:none}.toast{transform:translateX(-50%)}.toast.visible{transform:translateX(-50%)}.ring{animation:none;opacity:.8}button:active{transform:none}}
/* Motion study: waiting, acknowledgement, then quiet presence. */
.play-sequence{width:100%;display:flex;align-items:center;justify-content:space-between;border-radius:14px;background:#343e36;color:#fff;padding:14px 17px;font-size:13px;margin-top:15px}.play-sequence span{font-size:17px;color:#bfcac1}.motion-progress{height:2px;background:#dbe0da;margin-top:23px;overflow:hidden}.motion-progress span{display:block;width:100%;height:100%;background:#788e7c;transform:scaleX(.06);transform-origin:left;transition:transform 500ms var(--ease-out)}.phase-legend{display:flex;justify-content:space-between;font-size:10px;color:#939b93;margin-top:9px}.guide>small{line-height:1.7}.settings{margin-top:24px}.steps{margin-top:32px;margin-bottom:16px}.hint{min-height:65px}.rings{transform-origin:center;transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-drawer)}.phone[data-state=calling] .rings{opacity:1;visibility:visible;transform:scale(1);transition:none}.phone[data-state=connected] .rings{opacity:0;visibility:hidden;transform:scale(1);transition:none}.ring.outer,.ring.middle{animation:none;opacity:.55}.signal-wave{position:absolute;width:174px;height:174px;top:61.5px;left:61.5px;border:1px solid rgba(118,141,165,.18);border-radius:50%;opacity:0;animation:signal-travel 2.4s linear infinite;will-change:transform,opacity}.signal-two{animation-delay:-1.2s}.phone:not([data-state=calling]) .signal-wave{animation-play-state:paused}.phone[data-state=calling] .portrait{animation:waiting-breath 3.2s var(--ease-in-out) infinite}.voice-field{position:absolute;left:96.5px;top:222px;width:200px;height:200px;opacity:0;transform:scale(.95);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out);pointer-events:none}.voice-glow{position:absolute;inset:-25px;border-radius:50%;background:radial-gradient(circle,transparent 37%,rgba(124,163,216,.08) 46%,rgba(151,179,220,.06) 53%,transparent 69%);opacity:.5}.voice-edge{position:absolute;inset:24px;border:1px solid #8eacd329;border-radius:50%}.phone[data-state=connected] .voice-field{opacity:0;transform:scale(1)}.phone[data-phase=speaking] .voice-glow{animation:speaking-field 1.6s linear infinite}.phone[data-phase=speaking] .voice-edge{animation:speaking-edge 1.6s linear infinite}.phone[data-phase=listening] .voice-glow{opacity:.25;animation:listening-breath 4.8s var(--ease-in-out) infinite}.phone[data-phase=listening] .voice-edge{opacity:.35}.arrival-ring{position:absolute;left:121.5px;top:247px;width:150px;height:150px;border:1.5px solid #ffffff70;border-radius:50%;opacity:0;pointer-events:none}.portrait{transform-origin:50% 80%;will-change:transform}.phone[data-state=connected] .portrait{animation:connected-breath 4.8s var(--ease-in-out) infinite}.portrait .wave{transform:translateY(5px) rotate(-2deg);transform-origin:50% 85%;transition:opacity 250ms var(--ease-out),transform 500ms var(--ease-drawer)}.phone[data-state=connected] .portrait .wave{transform:translateY(0) rotate(0deg)}.phone[data-state=connected][data-phase=listening] .portrait .wave{opacity:0}.phone[data-state=connected][data-phase=listening] .portrait .neutral{opacity:1}.call-status{position:relative;height:32px;margin-top:4px}.call-title .call-status p{position:absolute;left:0;right:0;top:0;margin:0;transition:transform 250ms var(--ease-out),opacity 200ms var(--ease-out)}.call-title #callTime{opacity:0;transform:translateY(6px)}.dial-label{opacity:1;transform:translateY(0)}.phone[data-state=connected] .dial-label{opacity:0;transform:translateY(-6px)}.phone[data-state=connected] #callTime{opacity:1;transform:translateY(0);transition-delay:100ms}.calling-dots{display:inline-flex;width:15px}.calling-dots i{font-style:normal;animation:calling-dot 1.2s linear infinite}.calling-dots i:nth-child(2){animation-delay:.16s}.calling-dots i:nth-child(3){animation-delay:.32s}.mobile-note button{font-size:11px;padding:5px 14px;background:#ffffffaa;border:1px solid #fff;border-radius:20px;color:#667768;margin:0 4px}.phone[data-collapsed=true] .portrait{animation:none}
@keyframes signal-travel{0%{transform:scale(.9);opacity:0}12%{opacity:.8}72%{opacity:.38}100%{transform:scale(1.75);opacity:0}}
@keyframes waiting-breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5px) scale(1.012)}}
@keyframes connected-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes speaking-field{0%,100%{transform:scale(.98);opacity:.45}24%{transform:scale(1.055);opacity:.85}45%{transform:scale(1.01);opacity:.6}72%{transform:scale(1.07);opacity:.9}}
@keyframes speaking-edge{0%,100%{transform:scale(1);opacity:.5}24%{transform:scale(1.025);opacity:.9}45%{transform:scale(1.005);opacity:.55}72%{transform:scale(1.035);opacity:.8}}
@keyframes listening-breath{0%,100%{transform:scale(1);opacity:.25}50%{transform:scale(1.025);opacity:.45}}
@keyframes calling-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes voice-bar{0%,100%{transform:scaleY(.25)}25%{transform:scaleY(.8)}45%{transform:scaleY(.4)}70%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.phone .portrait,.phone .voice-glow,.phone .voice-edge,.phone .calling-dots i{animation:none!important}.signal-wave{animation:none;opacity:.25}.signal-two{transform:scale(1.4)}.rings,.voice-field,.portrait .wave,.call-title .call-status p{transition-property:opacity}.phone[data-state=connected] .rings{transform:none}}
/* Connected voice atmosphere: broad, low-contrast color under the interface.
   Slow drift stays continuous across speaking/listening; only energy fades. */
.call-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 900ms var(--ease-out);mask-image:linear-gradient(to bottom,transparent 4%,#000 23%,#000 79%,transparent 100%)}
.phone[data-state=connected] .call-atmosphere{opacity:1}
.ambient-energy{position:absolute;inset:0;opacity:.78;transition:opacity 1200ms var(--ease-out)}
.phone[data-phase=answering] .ambient-energy{opacity:.88}
.phone[data-phase=speaking] .ambient-energy{opacity:1}
.ambient-color{position:absolute;pointer-events:none;will-change:transform;filter:blur(24px);animation-play-state:paused}
.ambient-blue{width:440px;height:460px;left:-90px;top:90px;background:radial-gradient(ellipse at center,rgba(88,195,255,.31) 0%,rgba(88,195,255,.17) 28%,rgba(88,195,255,.05) 49%,rgba(88,195,255,0) 70%);animation:ambient-blue-drift 18s var(--ease-in-out) infinite;animation-delay:-3s}
.ambient-lilac{width:410px;height:450px;left:60px;top:220px;background:radial-gradient(ellipse at center,rgba(184,132,255,.25) 0%,rgba(184,132,255,.13) 30%,rgba(184,132,255,.04) 51%,rgba(184,132,255,0) 70%);animation:ambient-lilac-drift 23s var(--ease-in-out) infinite;animation-delay:-8s}
.ambient-azure{width:400px;height:400px;left:-70px;top:285px;background:radial-gradient(ellipse at center,rgba(94,149,255,.23) 0%,rgba(94,149,255,.12) 28%,rgba(94,149,255,.035) 49%,rgba(94,149,255,0) 70%);animation:ambient-azure-drift 21s var(--ease-in-out) infinite;animation-delay:-5s}
.ambient-voice{position:absolute;width:570px;height:540px;left:-88px;top:80px;background:radial-gradient(ellipse at 48% 47%,rgba(155,223,255,.13),rgba(227,201,255,.06) 40%,rgba(242,230,255,0) 68%);opacity:0;transition:opacity 900ms var(--ease-out);animation:ambient-voice-breath 3.2s var(--ease-in-out) infinite;animation-play-state:paused}
.phone[data-phase=speaking] .ambient-voice{opacity:1;animation-play-state:running}
.phone[data-state=connected]:not([data-collapsed=true]) .ambient-color{animation-play-state:running}
.phone[data-collapsed=true] .ambient-voice{animation-play-state:paused}
/* Three translucent colors orbit the portrait and name; controls stay in white space. */
@keyframes ambient-blue-drift{
  0%,100%{transform:translate(0,-25px) rotate(-8deg) scale(.96)}
  25%{transform:translate(35px,-15px) rotate(8deg) scale(1.02)}
  50%{transform:translate(30px,25px) rotate(-4deg) scale(.94)}
  75%{transform:translate(-15px,15px) rotate(-10deg) scale(1)}
}
@keyframes ambient-lilac-drift{
  0%,100%{transform:translate(5px,15px) rotate(8deg) scale(.96)}
  25%{transform:translate(-15px,40px) rotate(-8deg) scale(1)}
  50%{transform:translate(-30px,-10px) rotate(6deg) scale(.93)}
  75%{transform:translate(15px,-40px) rotate(10deg) scale(1.02)}
}
@keyframes ambient-azure-drift{
  0%,100%{transform:translate(-10px,5px) rotate(-6deg) scale(.95)}
  25%{transform:translate(-20px,-30px) rotate(6deg) scale(1)}
  50%{transform:translate(25px,-15px) rotate(10deg) scale(.94)}
  75%{transform:translate(30px,25px) rotate(-4deg) scale(1.02)}
}
@keyframes ambient-voice-breath{0%,100%{transform:scale(.96) translateY(4px)}45%{transform:scale(1.12) translateY(-12px)}75%{transform:scale(1.02) translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.phone .ambient-color,.phone .ambient-voice{animation:none!important;transform:none}.call-atmosphere,.ambient-energy,.ambient-voice{transition-duration:250ms}}
.phone:not([data-state=connected]) .ambient-color,.phone[data-collapsed=true] .ambient-color{animation-play-state:paused}
/* V4 — Figma's grey concentric wave, a three-second call, then quiet speech. */
.ring.outer,.ring.middle{left:0;top:0;transform-origin:50% 50%;will-change:transform,opacity}
.phone[data-state=calling] .ring.outer,.phone[data-state=calling] .ring.middle{animation:outward-ripple 2.4s linear infinite}
.phone[data-state=calling] .ring.middle{animation-delay:-1.2s}

.phone[data-state=calling] .portrait{filter:saturate(1);opacity:1;animation:waiting-breath 3.2s var(--ease-in-out) infinite}
.portrait{transition:filter 500ms var(--ease-out),opacity 500ms var(--ease-out)}
.phone[data-state=connected] .portrait{filter:saturate(1);opacity:1}
.phone[data-state=connected] .portrait .neutral{opacity:1}
.portrait .talking-mouth{opacity:0;mask-image:radial-gradient(ellipse 11px 9px at 53px 70px,#000 60%,transparent 100%);transition:opacity 140ms linear}
.phone[data-state=connected][data-phase=speaking] .portrait .talking-mouth{animation:natural-speech 2.3s linear infinite}
.phone[data-state=calling] .call-atmosphere{opacity:.88}
.phone[data-phase=waiting] .ambient-energy{opacity:.68}
.phone:not([data-state=chat]):not([data-collapsed=true]) .ambient-color{animation-play-state:running}
@keyframes outward-ripple{0%{transform:scale(.46);opacity:0}12%{opacity:1}48%{opacity:.75}100%{transform:scale(1.16);opacity:0}}

@keyframes natural-speech{0%,100%{opacity:0}7%{opacity:.9}13%{opacity:.35}22%{opacity:1}30%{opacity:.15}37%{opacity:.65}43%,49%{opacity:0}57%{opacity:.85}64%{opacity:.25}73%{opacity:1}80%{opacity:.3}88%,94%{opacity:0}}
@media(prefers-reduced-motion:reduce){.phone[data-state=calling] .ring.outer,.phone[data-state=calling] .ring.middle{animation:none;opacity:.5;transform:scale(.76)}.phone[data-state=calling] .ring.middle{transform:scale(1.02);opacity:.3}.phone[data-phase=speaking] .portrait .talking-mouth{animation:none;opacity:1}.portrait{transition-duration:250ms}}
/* Captions follow the compact header and conversation layout in Figma. */
.phone .subtitle{inset:188px 0 auto;width:393px;height:510px;text-align:left;transform:translateY(8px)}
.caption-history{height:462px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:16px 0;font-size:16px;line-height:24px}
.caption-history::-webkit-scrollbar{display:none}
.caption-row{display:flex;padding:0 40px 0 16px;margin-bottom:12px;flex-shrink:0}
.caption-row:last-child{margin-bottom:0}
.caption-bubble{max-width:100%;padding:12px;border-radius:24px;background:rgba(229,229,229,.72)}
.caption-row.from-user{justify-content:flex-end;padding:0 16px 0 40px}
.from-user .caption-bubble{background:#dbeafe;padding:12px 16px}
.task-reply .caption-bubble{background:rgba(0,0,0,.04)}
.caption-fade{position:absolute;top:0;left:0;width:393px;height:90px;pointer-events:none;background:linear-gradient(#fafafa,rgba(250,250,250,.8) 50%,rgba(250,250,250,0));backdrop-filter:blur(.5px)}
.caption-tasks{height:48px;position:absolute;top:462px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:0 12px;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:rgba(255,255,255,.22);box-shadow:0 10px 10px rgba(0,0,0,.04),1px -1px 10px rgba(22,36,86,.04);backdrop-filter:blur(24px);white-space:nowrap}
.caption-tasks:active{transform:translateX(-50%) scale(.97)}
.caption-tasks strong{font-size:16px;line-height:24px;font-weight:500}
.task-bolt{width:24px;height:24px;border-radius:14px;background:#fd9a00;display:grid;place-items:center}
.task-count{display:flex;align-items:center;gap:2px;height:22px;font-size:14px;line-height:20px;font-weight:500;color:#929292}
.phone[data-captions=true][data-state=connected]:not([data-collapsed=true]) .avatar{transform:translateY(-190px) scale(.472222)}
.phone[data-captions=true][data-state=connected] .portrait{mask-image:url('assets/6ea89.svg')}
.phone[data-captions=true][data-state=connected] .call-title{transform:translateY(-347px)}
.call-title{transition:transform 500ms var(--ease-drawer)}
.phone[data-captions=true][data-state=connected] .call-title h2{font-size:18px;line-height:28px;letter-spacing:-.18px}
.phone[data-captions=true][data-state=connected] .call-title .call-status p{font-size:14px;line-height:20px;color:rgba(104,104,104,.72);letter-spacing:0}
.phone[data-captions=true][data-state=connected] .rings,.phone[data-captions=true][data-state=connected] .arrival-ring,.phone[data-captions=true][data-state=connected] .call-atmosphere{opacity:0}
.phone[data-captions=true][data-state=connected] .subtitle{pointer-events:auto}
.phone[data-captions=true] #captions{background:rgba(255,255,255,.7)}
@media(prefers-reduced-motion:reduce){.call-title{transition:none}.phone .subtitle{transform:none}.caption-tasks:active{transform:translateX(-50%)}}

/* A white base keeps the blue light clear as the layers cross. */
.phone:not([data-state=chat]):not([data-collapsed=true]):not([data-captions=true]) .call-layer{background:#fff}
/* Minimized call: the name settles first, then the compact controls appear. */
.avatar{transition:transform 500ms var(--ease-drawer),opacity 180ms var(--ease-out)}
.avatar-label{transition:transform 220ms var(--ease-out),opacity 180ms var(--ease-out)}
.phone[data-collapsed=true] .avatar{opacity:0}
.phone[data-collapsed=true] .avatar-label{top:65px;left:50%;width:auto;transform:translateX(-50%);transition-delay:100ms}
.phone[data-collapsed=true] .avatar-label span{display:none}
.phone[data-collapsed=true] #startCall img{opacity:.4}
.call-panel{position:absolute;z-index:8;left:8px;top:118px;width:377px;height:80px;padding:16px;display:flex;align-items:center;justify-content:space-between;border-radius:40px;background:rgba(255,255,255,.8);backdrop-filter:blur(3px);box-shadow:0 8px 20px rgba(0,0,0,.12);opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity 180ms var(--ease-out),transform 240ms var(--ease-out);transform-origin:50% 0}
.phone[data-collapsed=true]:not([data-state=chat]) .call-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;transition-delay:220ms}
.panel-profile{width:177px;min-width:0;height:48px;padding:0;display:flex;align-items:center;gap:12px;text-align:left;border-radius:24px}
.panel-avatar{position:relative;display:block;flex:none;width:48px;height:48px;background:#fff;border-radius:50%;filter:drop-shadow(0 2.667px 5.333px rgba(38,38,38,.08));overflow:hidden;mask:url('assets/fba0f.svg') center / 48px 48px no-repeat}
.panel-avatar img{position:absolute;width:36px;height:48px;left:6px;top:.3px;object-fit:cover}
.panel-status{display:flex;align-items:center;gap:8px;color:#686868;font-size:16px;line-height:24px;font-variant-numeric:tabular-nums;white-space:nowrap}
.panel-wave{display:flex;align-items:center;gap:3px;width:22px;height:16px}
.panel-wave i{display:block;flex:none;width:2px;height:16px;border-radius:3px;background:#51a2ff;transform:scaleY(.18);transform-origin:center;will-change:transform}
.panel-actions{display:flex;gap:12px;flex:none}
.panel-control{width:48px;height:48px;border-radius:50%;background:rgba(229,229,229,.64);position:relative;display:grid;place-items:center;padding:0}
.panel-control[aria-pressed=true]{background:#dbeafe}
.panel-hangup{background:#fb2c36;filter:drop-shadow(0 4.364px 8.727px rgba(0,0,0,.05))}
.panel-slash{position:absolute;width:24px;height:2px;transform:rotate(48deg);background:#262626;border:1px solid #fff;opacity:0}
#panelMute[aria-pressed=true] .panel-slash{opacity:1}
@media(prefers-reduced-motion:reduce){.call-panel{transform:none;transition:opacity 150ms var(--ease-out)}.phone[data-collapsed=true] .call-panel{transition-delay:0;transform:none}.avatar-label{transition:none}.phone[data-collapsed=true] .avatar-label{transition-delay:0}}

/* Alternate palette based on #E2EEFE, with a slightly deeper blue layer. */
.phone[data-palette=blue] .ambient-blue{background:radial-gradient(ellipse at center,#e2eefe 0%,#e2eefe 20%,rgba(226,238,254,.66) 40%,rgba(226,238,254,0) 70%)}
.phone[data-palette=blue] .ambient-lilac{background:radial-gradient(ellipse at center,rgba(199,221,255,.75) 0%,rgba(213,229,255,.56) 28%,rgba(234,243,255,.2) 49%,rgba(234,243,255,0) 70%)}
.phone[data-palette=blue] .ambient-voice{background:radial-gradient(ellipse at 48% 47%,rgba(193,219,255,.2),rgba(226,238,254,.1) 40%,rgba(226,238,254,0) 68%)}
.palette-picker{display:flex;gap:8px;margin-top:21px}
.palette-picker button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border:1px solid #dce0dc;border-radius:12px;color:#777f79;font-size:12px}
.palette-picker button[aria-pressed=true]{background:#fff;border-color:#c1cbc3;color:#303d32}
.palette-swatch{width:18px;height:18px;border-radius:50%;border:1px solid #ffffffb3}
.swatch-lilac{background:linear-gradient(135deg,#d4ecff,#e8d6ff)}
.swatch-blue{background:linear-gradient(135deg,#e2eefe,#c7ddff)}

/* Figma audio feedback: fixed neutral button surfaces and centered toast. */
.panel-control[aria-pressed=true]{background:rgba(229,229,229,.64)}
#mute[aria-pressed=true],#speaker[aria-pressed=true]{background:rgba(255,255,255,.7)}
.panel-icon{display:block;width:20px;height:20px}
.panel-icon img{transform:scale(.625);transform-origin:top left}
.toast.audio-feedback{top:50%;left:50%;transform:translate(-50%,-50%);padding:12px 16px;border-radius:16px;background:#262626;box-shadow:none;font-size:15px;font-weight:500;line-height:20px;white-space:nowrap;max-width:361px;transition:opacity 180ms var(--ease-out)}
.toast.audio-feedback.visible{transform:translate(-50%,-50%)}

/* Persistent end-of-call entry in the conversation, Figma 26763:93537. */
.call-ended{display:flex;justify-content:center;padding:0 16px;margin-top:12px;color:#686868;font-size:14px;line-height:20px}
.call-ended-content{display:flex;align-items:center;gap:2px;padding:8px 16px;border-radius:24px}
.call-ended-label{display:flex;align-items:center;gap:8px;opacity:.72;white-space:nowrap}
.call-ended img{flex-shrink:0}
.phone[data-call-ended=true][data-state=chat] .avatar-label{left:50%;width:auto;transform:translateX(-50%)}
.phone[data-call-ended=true][data-state=chat] .avatar-label span{display:none}

/* One presentation control beside the phone. */
.stage{flex-direction:row;gap:24px;padding:32px 20px}
.replay-demo{flex:none;align-self:center;width:76px;height:40px;padding:0;border:1px solid #fff;border-radius:20px;background:rgba(255,255,255,.85);color:#535b56;font-size:13px;font-weight:500;box-shadow:0 2px 12px #00000005}


.phone[data-phase=user-speaking] .talking-mouth{opacity:0;animation:none}

.phone[data-state=connected] .portrait .talking-mouth{animation:none;transition:none}
.phone[data-phase=working] .portrait .talking-mouth{animation:none;opacity:0}
.phone[data-phase=working] .ambient-energy{opacity:.78}

/* Preserve both hands and keyboard within the round working portrait. */
.portrait .working-pose{left:-8px;top:-10px;width:160px;height:160px;object-fit:contain;opacity:0;transition:opacity 250ms var(--ease-out)}
.phone[data-state=connected][data-phase=working] .portrait .working-pose{opacity:1}

.avatar-expression{position:absolute;inset:0;transform-origin:50% 80%}
.portrait .avatar-expression>.blink-eyes{top:-.1px;opacity:0;transition:none;mask-image:radial-gradient(ellipse 6px 6px at 46px 58px,#000 65%,transparent 100%),radial-gradient(ellipse 6px 6px at 60px 58px,#000 65%,transparent 100%)}

.phone[data-phase=listening] .portrait .talking-mouth{opacity:0;animation:none}
.phone .call-layer>.caption-tasks{top:auto;bottom:154px;z-index:4;background:rgba(255,255,255,.22);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,6px);transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out),visibility 250ms}
.phone[data-state=connected][data-needs-confirmation=true] .call-layer>.caption-tasks{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.avatar-expression{transform:none!important}.phone .call-layer>.caption-tasks{transform:translateX(-50%);transition-property:opacity,visibility}}
.panel-avatar .working-layer img{left:-2.667px;top:-3.333px;width:53.333px;height:53.333px;object-fit:contain}
.portrait .typing-hands{left:-8px;top:-10px;width:160px;height:160px;object-fit:contain;opacity:0;transition:none}
.working-hand-left{mask-image:radial-gradient(ellipse 13.125% 6.875% at 49.375% 80%,#000 65%,transparent 100%)}
.working-hand-right{mask-image:radial-gradient(ellipse 6.25% 5.625% at 64.375% 76.875%,#000 65%,transparent 100%)}
.panel-avatar .panel-typing-hands{opacity:0}
.panel-avatar .panel-blink-eyes{opacity:0;top:-.033px;mask-image:radial-gradient(ellipse 2px 2px at 15.333px 19.333px,#000 65%,transparent 100%),radial-gradient(ellipse 2px 2px at 20px 19.333px,#000 65%,transparent 100%)}
.phone[data-state=connected] .working-hand-left{animation:typing-near-hand 2.8s linear infinite}
.phone[data-state=connected] .working-hand-right{animation:typing-far-hand 2.8s linear infinite}
@keyframes typing-near-hand{0%,12%,27%,42%,58%,73%,87%,100%{opacity:0}6%,20%,35%,50%,80%,95%{opacity:1}}
@keyframes typing-far-hand{0%,17%,33%,47%,64%,76%,92%,100%{opacity:0}10%,25%,40%,56%,84%{opacity:1}}
@media(prefers-reduced-motion:reduce){.phone .typing-hands,.phone .panel-typing-hands{animation:none!important;opacity:0}}

/* Need you: lift into view, then acknowledge before fading in place. */
.phone .call-layer>.caption-tasks{transform:translate(-50%,18px) scale(.97);transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out),visibility 250ms}
.phone[data-state=connected][data-needs-confirmation=true] .call-layer>.caption-tasks{transform:translate(-50%,0) scale(1)}
.task-bolt{position:relative;transition:background-color 200ms ease,transform 250ms var(--ease-out)}
.task-bolt img,.task-bolt svg{position:absolute;transition:opacity 160ms ease,transform 250ms var(--ease-out)}
.task-bolt .task-complete-icon{opacity:0;transform:scale(.9)}
.caption-tasks[data-feedback=complete] .task-bolt{background:#00bc7d}
.caption-tasks[data-feedback=complete] .task-bolt .task-zap-icon{opacity:0;transform:scale(.9)}
.caption-tasks[data-feedback=complete] .task-bolt .task-complete-icon{opacity:1;transform:scale(1)}
.task-complete-icon path{stroke-dasharray:1;stroke-dashoffset:0;transform-origin:center;transform-box:fill-box}
.caption-tasks[data-feedback=complete] .task-complete-icon path{animation:task-check-draw 400ms var(--ease-out) both,task-check-scale 400ms var(--ease-out) both,task-check-appear 100ms ease both}
@keyframes task-check-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes task-check-scale{from{transform:scale(.5)}to{transform:scale(1)}}
@keyframes task-check-appear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.caption-tasks[data-feedback=complete] .task-complete-icon path{animation:task-check-appear 100ms ease both}.task-bolt svg{transform:none!important}}

.phone[data-needs-confirmation=false] .call-layer>.caption-tasks[data-feedback=complete]{transform:translate(-50%,0) scale(1);transition:opacity 250ms ease,visibility 250ms}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Native modal focus/dismissal, with the sheet clipped to the phone preview. */
.task-dialog{position:fixed;inset:auto;margin:0;padding:0;border:0;width:393px;height:852px;max-width:none;max-height:none;background:transparent;color:#262626;overflow:hidden;border-radius:50px;transform-origin:top left;outline:none}
.task-dialog::backdrop{background:transparent}
.task-backdrop{position:absolute;inset:0;background:rgba(20,18,18,.2);backdrop-filter:blur(4px);opacity:0;transition:opacity 300ms var(--ease-out)}
.task-sheet{position:absolute;top:auto;max-height:798px;bottom:0;left:0;right:0;display:flex;flex-direction:column;background:#fafafa;border-radius:34px 34px 50px 50px;overflow:hidden;transform:translateY(100%);transition:transform 500ms var(--ease-drawer)}
.task-dialog[data-open=true] .task-backdrop{opacity:1}
.task-dialog[data-open=true] .task-sheet{transform:translateY(0)}
.task-sheet-header{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:8px;flex-shrink:0}
.task-grabber{width:36px;height:5px;border-radius:2.5px;background:rgba(60,60,67,.3)}
.task-sheet-nav{position:relative;height:56px;width:100%;display:flex;align-items:center;padding:0 16px}
.task-sheet-nav h2{font-size:16px;line-height:22.4px;font-weight:600;position:absolute;left:70px;right:70px;text-align:center;pointer-events:none}
.task-close{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:0 5px 15px rgba(12,37,58,.1)}
.task-sheet-content{padding:12px 16px 0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;flex:0 1 auto;min-height:0}
.task-email-card{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:24px;background:rgba(229,229,229,.72)}
.task-email-card h3{margin:0;font-size:16px;line-height:24px;font-weight:400}
.task-email-preview{padding:12px;border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:24px}
.task-email-preview p{margin:0;color:#262626}
.task-email-preview p:not(.task-email-excerpt){display:flex;gap:12px;white-space:nowrap}
.task-email-preview p>span{color:#929292}
.task-email-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.task-email-actions{display:flex;flex-direction:column;gap:8px;margin-top:-2px}
.task-action{width:100%;height:36px;border:1px dashed #a1a1a1;border-radius:10px;padding:7px 11px;text-align:left;font-size:14px;line-height:20px;display:flex;align-items:center;justify-content:space-between;transition:border-color 160ms ease,background-color 160ms ease}
.task-action[aria-pressed=true]{border:1px solid #262626}
.task-action img{opacity:0;transition:opacity 160ms ease}
.task-action[aria-pressed=true] img{opacity:1}
.task-email-editor{display:flex;flex-direction:column;gap:8px}
.task-email-editor label{font-size:14px;line-height:20px}
.task-email-editor textarea{width:100%;min-height:150px;resize:vertical;border:1px solid #d4d4d4;border-radius:12px;padding:12px;background:#fff;font:inherit;font-size:16px;line-height:24px}
.task-sheet-footer{position:relative;height:37px;flex-shrink:0}
.task-home-indicator{position:absolute;bottom:8px;left:127px;width:139px;height:5px;border-radius:99px;background:#000;pointer-events:none}
@media(prefers-reduced-motion:reduce){.phone .call-layer>.caption-tasks,.phone[data-state=connected][data-needs-confirmation=true] .call-layer>.caption-tasks,.phone[data-needs-confirmation=false] .call-layer>.caption-tasks[data-feedback=complete]{transform:translateX(-50%);transition-property:opacity,visibility}.task-sheet,.task-dialog[data-open=true] .task-sheet{transform:none;transition:opacity 150ms ease}.task-sheet{opacity:0}.task-dialog[data-open=true] .task-sheet{opacity:1}.task-backdrop{transition-duration:150ms}.task-bolt img{transform:none!important}}

/* Continuous presence: only the pose layer fades; breathing and typing clocks never restart between phases. */
.working-layer{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity 300ms linear;will-change:opacity}
.working-layer img{position:absolute}
.portrait .working-layer .working-pose{opacity:1;transition:none}
.phone[data-state=connected][data-phase=working] .working-layer{opacity:1}
.phone[data-state=connected] .ambient-energy{transition:none}
@media(prefers-reduced-motion:reduce){.working-layer{transition-duration:150ms}.phone[data-state=connected] .portrait .talking-mouth{transition:opacity 100ms ease}}