/* Conversations unfold inside the existing devices; the page keeps its layout. */
.phone-conversation,.desk-chat,.mini-browser-content,.demo-thread{position:relative}
.motion-ready .motion-item{opacity:0;transform:translate3d(0,12px,0) scale(.975);transform-origin:left bottom;transition:opacity 320ms ease-out,transform 560ms cubic-bezier(.16,1,.3,1)}
.motion-ready .motion-item.out,.motion-ready .sample-request{transform-origin:right bottom}
.motion-ready .motion-item.arrived{opacity:1;transform:none}
.motion-reset .motion-item{transition:none!important}
.typing-indicator{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;gap:4px;width:47px;height:29px;background:#eeeeef;border-radius:15px 15px 15px 4px;opacity:0;transform:translateY(5px) scale(.94);transition:opacity 160ms ease-out,transform 250ms cubic-bezier(.16,1,.3,1);pointer-events:none}
.typing-indicator.show{opacity:1;transform:none}
.typing-indicator i{display:block;width:5px;height:5px;border-radius:50%;background:#8e8e93;animation:typing-dot 1s ease-in-out infinite;animation-play-state:paused}
.typing-indicator i:nth-child(2){animation-delay:120ms}
.typing-indicator i:nth-child(3){animation-delay:240ms}
.motion-playing .typing-indicator.show i{animation-play-state:running}
.phone-conversation .typing-indicator{width:16cqw;height:9cqw;gap:1.05cqw;border-radius:4.5cqw 4.5cqw 4.5cqw 1.3cqw}
.phone-conversation .typing-indicator i{width:1.65cqw;height:1.65cqw}
.message-receipt{position:absolute;top:calc(100% + .5cqw);right:.6cqw;font-size:2cqw;line-height:1.2;letter-spacing:0;color:#8e8e93;opacity:0;transition:opacity 200ms ease-out;white-space:nowrap}
.message-receipt.show{opacity:1}
.composer-input{min-width:0;position:relative}
.composer-draft{display:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#242424;flex:1;min-width:0}
.composer-input.composing{border-color:#b5d8ff;box-shadow:0 0 0 .5cqw #007aff08}
.composing .composer-placeholder,.composing>.icon{display:none}
.composing .composer-draft{display:block}
.composer-send{display:none;place-items:center;background:#007aff;color:white;width:5.5cqw;height:5.5cqw;border-radius:50%;font-size:4cqw;line-height:1;flex:none;margin:-.8cqw -.9cqw -.8cqw 1cqw}
.composing .composer-send{display:grid}
.conversation-replay{display:none;align-items:center;justify-content:center;width:5.3cqw;height:5.3cqw;border-radius:50%;padding:0;background:#f1f4f8;color:#8493a7;font-family:Arial,sans-serif;font-size:4cqw;line-height:1;margin-left:1.5cqw;transition:color 160ms,background 160ms,transform 160ms}
.has-motion .conversation-replay{display:inline-flex}
.conversation-replay:active{transform:scale(.92)}
.conversation-replay:focus-visible{outline:2px solid #007aff;outline-offset:3px}
.voice-wave i{transform-origin:center;animation:voice-speaking 720ms ease-in-out infinite alternate;animation-play-state:paused}
.motion-playing .voice-wave i{animation-play-state:running}
.call-screen .voice-caption{transition:opacity 500ms ease-out,transform 650ms cubic-bezier(.16,1,.3,1)}
.call-screen.motion-ready .voice-caption{opacity:0;transform:translateY(8px)}
.call-screen.motion-ready .voice-caption.arrived{opacity:1;transform:none}
.desk-chat{padding-bottom:45px}
.demo-thread .typing-indicator{width:56px;height:37px;border-radius:18px 18px 18px 5px}
.demo-thread .typing-indicator i{width:6px;height:6px}
@keyframes typing-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
@keyframes voice-speaking{0%{transform:scaleY(.38);opacity:.55}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.55);opacity:.8}}
@media(hover:hover) and (pointer:fine){.conversation-replay:hover{color:#0071e3;background:#e7f1ff}}
@media(prefers-reduced-motion:reduce){.motion-ready .motion-item,.call-screen.motion-ready .voice-caption{opacity:1;transform:none}.typing-indicator,.conversation-replay{display:none!important}.voice-wave i{animation:none}.message-receipt{opacity:0}}
.capture .motion-ready .motion-item{opacity:1;transform:none}
.capture .typing-indicator,.capture .conversation-replay{display:none}