:root{font-family:Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#373342;background:#eeedf1;font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:26px;background:radial-gradient(ellipse at 30% 30%,#f9f8fb 0,transparent 50%),radial-gradient(ellipse at 80% 90%,#e5e2ec 0,transparent 48%),#eeedf1}
button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,.thread:focus-visible{outline:2px solid #9180b5;outline-offset:5px}button{cursor:pointer}button:disabled{cursor:default}
.phone{height:min(860px,calc(100svh - 52px));width:auto;aspect-ratio:0.485;position:relative;border:1.2px solid #938e9b;border-radius:53px;padding:6px;box-shadow:0 30px 80px -38px #51465a55,0 1px 2px #fff inset;isolation:isolate}
.phone:before{content:"";position:absolute;inset:3px;border:1px solid #ffffffc9;border-radius:50px;pointer-events:none}
.glass-pane{height:100%;overflow:hidden;position:relative;display:flex;flex-direction:column;border-radius:46px;background:linear-gradient(155deg,#ffffffb0 0%,#f9f7ff6b 42%,#ffffffb8 100%);box-shadow:inset 0 0 25px #ffffff90}
.glass-pane:before{content:"";position:absolute;pointer-events:none;inset:0;background:radial-gradient(ellipse at 50% 27%,#e6ddf745,transparent 43%);z-index:-1}
.signature{position:absolute;left:27px;top:25px;font-size:14px;font-weight:500;color:#645c70;z-index:2}.demo-label{position:absolute;right:24px;top:28px;font-size:9px;letter-spacing:1.1px;color:#8d8597;z-index:2}
.agent-space{height:37%;min-height:150px;flex-shrink:0;position:relative;padding-top:25px}.agent-space canvas{display:block;width:100%;height:100%;touch-action:pan-y}.presence{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:2.15px;color:#8a8097;display:flex;align-items:center;justify-content:center;gap:7px}.presence span{width:4px;height:4px;background:#9f90b8;border-radius:50%;box-shadow:0 0 7px #a591bc60}
.thread{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c5bbd33d transparent;padding:24px 25px 12px;display:flex;flex-direction:column;gap:20px;mask-image:linear-gradient(to bottom,transparent,black 14px,black calc(100% - 9px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 14px,black calc(100% - 9px),transparent)}
.message{max-width:96%;font-size:14px;line-height:1.65;letter-spacing:-.18px;flex-shrink:0;animation:arrive .5s ease both}.message p{margin:0}.message p+p{margin-top:9px}.message.assistant{align-self:flex-start;padding:0 3px;color:#625a6b}.message.user{align-self:flex-end;border:1px solid #b4a5ca36;background:#e8e1f14f;border-radius:21px 21px 6px 21px;padding:10px 15px;max-width:89%;color:#68547f;font-size:12px}.message .demo-tag,.demo-tag{display:block;margin-top:8px;font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:#9d93a8}.message:first-child.assistant{font-size:16px;color:#544b60;line-height:1.6}.typing{display:flex;align-items:center;gap:4px;padding:8px 2px;min-height:24px}.typing span{width:4px;height:4px;background:#9d8db4;border-radius:50%;animation:breathe 1s infinite ease-in-out}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
.bottom-space{position:relative;flex-shrink:0;padding:10px 18px 17px;background:linear-gradient(0deg,#f6f4fa66,transparent)}
.suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 13px;min-height:31px}.suggestions button,.quick-reply{border:1px solid #cfc7db8c;background:#ffffff55;border-radius:100px;color:#7a6c8c;font-size:10px;line-height:1.4;padding:8px 12px;transition:background .2s,border-color .2s,transform .2s;white-space:nowrap}.suggestions button:hover{background:#fff9;border-color:#b5a5c8;transform:translateY(-2px)}.suggestions button:disabled{opacity:.5;transform:none}
.composer{height:49px;display:flex;align-items:center;gap:6px;border:1px solid #cec7d8a6;border-radius:99px;padding:5px 6px 5px 17px;background:linear-gradient(120deg,#ffffffbb,#ffffff65);box-shadow:0 3px 12px #89719c05,inset 0 1px 0 #fff9}.composer:focus-within{border-color:#a89ab9}.composer input{width:0;min-width:0;flex:1;border:0;outline:none!important;background:transparent;color:#534960;font-size:12px;letter-spacing:.1px}.composer input::placeholder{color:#a59bab}.send{width:35px;height:35px;border:0;border-radius:100%;display:grid;place-items:center;background:#837297;color:white;transition:background .2s,transform .2s}.send:hover{background:#6e5c84;transform:translateY(-1px)}.send:disabled{opacity:.45}.send svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.local-note{text-align:center;font-size:7px;letter-spacing:.3px;color:#a69dad;margin:11px 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(max-width:500px){body{padding:10px}.phone{height:calc(100svh - 20px);width:min(100%,430px);aspect-ratio:auto;border-radius:48px}.phone:before{border-radius:45px}.glass-pane{border-radius:41px}.bottom-space{padding-bottom:max(15px,env(safe-area-inset-bottom))}.thread{font-size:15px}}
@media(max-height:620px){.phone{border-radius:32px}.phone:before{border-radius:29px}.glass-pane{border-radius:25px}.agent-space{min-height:125px}.signature{top:14px}.demo-label{top:17px}.thread{padding-top:15px;gap:12px}.bottom-space{padding-top:4px;padding-bottom:10px}.local-note{margin-top:6px}.suggestions{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.message-text{white-space:pre-line;overflow-wrap:anywhere}.message.user{width:fit-content;margin-left:auto}.message.initial{font-size:19px!important;letter-spacing:-.4px!important}.suggestions button{font-size:11px}.composer input{font-size:14px}@media(max-width:500px){.composer input{font-size:16px}}