: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}.removed-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}.removed-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}}

/* The whole surface shares the same low-contrast moving light. */
#backdrop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.8}
.agent-space,.thread,.bottom-space{position:relative;z-index:1}
.agent-space{height:35%;padding-top:25px}
.agent-space canvas{touch-action:none;cursor:grab;outline-offset:-18px}
.agent-space canvas:active{cursor:grabbing}
.thread{padding:22px 24px 12px;gap:13px;scrollbar-width:none;overflow-anchor:none;touch-action:none;cursor:grab;user-select:none;scroll-behavior:auto}
.thread:active{cursor:grabbing}
.thread::-webkit-scrollbar{display:none}
.thread::before{content:'';flex:1 0 0px}
.message,.message.assistant,.message:first-child.assistant{position:relative;max-width:94%;flex-shrink:0;padding:15px 18px;border:1px solid #d5ccdf90;border-radius:24px 24px 24px 7px;background:rgba(253,252,255,.95);box-shadow:0 6px 22px -16px #63507630,inset 0 1px 0 #fff;color:#61566d;font-size:14px;line-height:1.65;animation:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.75,.2,1),filter .45s ease;transform:translateY(0);will-change:opacity,transform}
.message.user{border-radius:24px 24px 7px 24px;background:rgba(235,229,244,.96);color:#655179;font-size:13px}
.message.initial{font-size:18px!important;padding:15px 20px;letter-spacing:-.3px!important}
.message.is-archived{opacity:0;transform:translateY(-12px);filter:blur(2px);pointer-events:none}
.thread.is-browsing .message.is-archived{opacity:.9;transform:translateY(0);filter:none;pointer-events:auto}
.message.is-current{opacity:1;filter:none;pointer-events:auto}
.thread.is-returning .message.is-archived{transition-duration:.6s}
.typing{width:55px;min-height:40px;padding:16px!important;gap:4px}
.suggestions button,.quick-reply{background:rgba(253,252,255,.95);border-color:#cfc7dbc0;backdrop-filter:blur(18px)}
.composer{background:rgba(254,253,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.bottom-space{background:none}
@media(prefers-reduced-motion:reduce){.message{will-change:auto;transform:none!important;filter:none!important}}

/* Centered welcome, lifted conversation, and the illustrated phone keyboard. */
.agent-space{position:absolute;top:50%;left:0;width:100%;height:35%;min-height:0;padding:0;transform:translateY(-50%);transition:top .85s cubic-bezier(.22,.8,.22,1),height .85s cubic-bezier(.22,.8,.22,1),transform .85s cubic-bezier(.22,.8,.22,1);z-index:2}
.agent-reserve{height:34%;flex:0 0 auto;transition:height .75s cubic-bezier(.22,.8,.22,1);pointer-events:none}
.is-engaged .agent-space{top:22px;height:31%;transform:translateY(0)}
.keyboard-open .agent-space{top:28px;height:19%;transform:translateY(0)}
.keyboard-open .agent-reserve{height:23%}
.keyboard-open .thread{padding-top:10px;gap:10px}
.keyboard-open .bottom-space{padding-top:5px;padding-bottom:10px}
.keyboard-open .local-note{display:none}
.keyboard-open .suggestions{margin-bottom:8px;min-height:28px}
.virtual-keyboard{position:relative;z-index:3;height:0;flex:0 0 auto;overflow:hidden;opacity:0;background:linear-gradient(180deg,#e5e1ebee,#d9d4e3f5);border-top:1px solid transparent;padding:0 6px;transition:height .55s cubic-bezier(.22,.8,.22,1),opacity .4s ease,padding .55s cubic-bezier(.22,.8,.22,1);backdrop-filter:blur(20px);touch-action:manipulation}
.keyboard-open .virtual-keyboard{height:226px;opacity:1;padding-top:4px;border-top-color:#c9bfd733}
.keyboard-toolbar{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 9px 4px;font-size:9px;letter-spacing:.7px;color:#8e829e}
.keyboard-toolbar .done{width:auto;min-height:22px;background:none;box-shadow:none;font-size:11px;color:#6f5a86;padding:0 7px;flex:none}
.keyboard-row{display:flex;justify-content:center;gap:4px;margin-bottom:7px;height:35px}
.keyboard-row.row-1{padding:0 15px}.keyboard-row.row-2{gap:4px}
.key{min-width:0;flex:1;padding:0;border:0;border-radius:6px;background:#fbfaff;color:#5e526e;font-size:15px;box-shadow:0 1px 1px #84759145;transition:background .1s,transform .1s;touch-action:manipulation}
.key:active{background:#ece3f9;transform:translateY(1px)}
.key.utility{background:#c8c0d5;font-size:15px;flex:1.25}.key.active{background:#fff}.key.symbols{font-size:11px;flex:1.2}
.key.space{flex:4.6;font-size:12px}.key.return{flex:1.65;background:#8d79a5;color:#fff;font-size:12px}
.keyboard-home{height:4px;width:98px;border-radius:99px;background:#8d839a;margin:10px auto 0;opacity:.55}
.thread .has-artifact{max-width:100%;width:100%;padding:12px 13px;font-size:12px;line-height:1.5}
.thread .has-artifact>.message-text{margin-bottom:9px}
@media(max-height:700px){.keyboard-open .virtual-keyboard{height:198px}.keyboard-row{height:29px;margin-bottom:6px}.keyboard-toolbar{height:24px}.keyboard-home{margin-top:7px}.keyboard-open .agent-space{height:17%;top:25px}.keyboard-open .agent-reserve{height:22%}.keyboard-open .thread{padding:8px 18px}.keyboard-open .message{padding:10px 13px;font-size:12px}.keyboard-open .suggestions button{padding:6px 10px;font-size:10px}.keyboard-open .composer{height:43px}}
@media(prefers-reduced-motion:reduce){.agent-space,.agent-reserve,.virtual-keyboard{transition:none}}

/* Status belongs to the phone; artwork fits the clear space beneath it. */
.glass-pane{--status-height:38px}
.status-bar{position:relative;z-index:60;flex:0 0 var(--status-height);height:var(--status-height);display:flex;align-items:center;justify-content:space-between;padding:6px 26px 0;color:#6f637a;background:linear-gradient(180deg,#f9f8fded,#f9f8fd80);pointer-events:none}
.status-time{font-size:11px;font-weight:600;letter-spacing:.3px}.status-icons{display:flex;align-items:center;gap:5px}.status-icons svg{display:block;width:15px;height:11px;fill:currentColor}.status-icons svg:last-child{width:22px}.status-icons .status-wifi{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.glass-pane .agent-space{top:var(--agent-top,160px);height:var(--agent-size,280px);padding:0;min-height:0;transform:none;transition:top .75s cubic-bezier(.22,.8,.22,1),height .75s cubic-bezier(.22,.8,.22,1)}
.glass-pane .agent-space canvas{position:relative;top:2%;height:100%;width:100%}
.agent-reserve{height:29%}.keyboard-open .agent-reserve{height:19%}
.artifact-open .agent-space{visibility:hidden}
@media(max-height:700px){.agent-reserve{height:25%}.keyboard-open .agent-reserve{height:18%}}
@media(prefers-reduced-motion:reduce){.glass-pane .agent-space{transition:none}}