.chat-body{min-height:100dvh;display:flex;flex-direction:column;background:hsl(var(--hue) 33% 97.1%);overflow-x:hidden}
.chat-back{position:fixed;top:18px;left:22px;z-index:2;font-size:13px;font-weight:650;color:hsl(var(--hue) 17% 27.8%);text-decoration:none;padding:8px 10px;border-radius:999px}
.chat-back:hover{background:hsl(var(--hue) 32% 92.0%)}.chat-back:focus-visible{outline:2px solid var(--green)}
.chat-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:min(640px,100% - 40px);margin:0 auto;padding:70px 0 14px;text-align:center}
.chat-pip{width:min(200px,42vw);height:min(200px,42vw);margin:0}
.chat-reply{min-height:7.2em;width:100%;max-width:40em;font-size:clamp(17px,2.4vw,20px);line-height:1.6;color:hsl(var(--hue) 17% 17.1%);overflow-wrap:anywhere}
.chat-reply .w{animation:chat-in .28s ease-out both}
.chat-reply.error{color:#8a4b2a;font-size:15px}
.chat-reply.thinking:after{content:'';display:inline-block;width:.5em;height:.5em;border-radius:50%;background:hsl(var(--hue) calc(54% * var(--sat)) calc(53.7% + var(--lift)));animation:chat-pulse 1s ease-in-out infinite}
.chat-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:40px}
.chat-chips button{border:1px solid hsl(var(--hue) 24% 82.5%);background:#fff;border-radius:999px;padding:9px 15px;font-size:13px;color:hsl(var(--hue) 29% 27.5%)}
.chat-chips button:hover{background:hsl(var(--hue) 37% 92.0%)}
.chat-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;width:min(640px,100% - 32px);margin:0 auto;padding:7px 7px 7px 20px;background:#fff;border:1px solid hsl(var(--hue) 24% 86.1%);border-radius:999px;box-shadow:0 8px 28px hsl(var(--hue) 33% 17.1% / 0.078)}
.chat-bar:focus-within{border-color:hsl(var(--hue) calc(54% * var(--sat)) calc(53.7% + var(--lift)));box-shadow:0 8px 28px hsl(var(--hue) 33% 17.1% / 0.078),0 0 0 3px hsl(var(--hue) calc(54% * var(--sat)) calc(53.7% + var(--lift)) / 0.161)}
.chat-bar input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;padding:10px 0;color:var(--ink)}
.chat-bar button{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border:0;border-radius:50%;background:var(--green);color:#fff}
.chat-bar button svg{width:20px;height:20px}.chat-bar button:disabled{background:hsl(var(--hue) 14% 84.5%);color:#fff}
.chat-bar button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.chat-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chat-note{margin:9px 16px max(14px,env(safe-area-inset-bottom));text-align:center;font-size:11px;color:#7b8a75}
@keyframes chat-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes chat-pulse{50%{opacity:.25;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){.chat-reply .w,.chat-reply.thinking:after{animation:none}}

.chat-reply .chat-text{margin:0 auto 14px;max-width:34em}.chat-reply .chat-text:last-child{margin-bottom:0}

.chat-pip-wrap{position:relative;display:grid;place-items:center}
.chat-pip-wrap .pip-say{right:auto;left:calc(100% + 6px);top:18px;border-radius:18px 18px 18px 4px;transform-origin:left center}
.chat-pip-wrap .pip-say:after{right:auto;left:-6px;border:0;border-bottom:1px solid hsl(var(--hue) 22% 83%);border-left:1px solid hsl(var(--hue) 22% 83%);transform:rotate(45deg)}
.chat-legal{position:fixed;top:18px;right:22px;z-index:2;font-size:13px;font-weight:650;color:#40533b;text-decoration:none;padding:8px 10px;border-radius:999px}.chat-legal:hover{background:#e9f1e4}
@media(max-width:560px){.chat-pip-wrap .pip-say{left:50%;top:calc(100% - 6px);transform:translateX(-50%);max-width:min(280px,calc(100vw - 32px))}.chat-pip-wrap .pip-say.shown{transform:translateX(-50%)}.chat-pip-wrap .pip-say:after{display:none}}