/* Verva Assistant: the corner bot's bubble becomes a chat panel. Uses the Verva theme's colour tokens.
   #vbot-bubble keeps these rules ahead of the theme's own bubble styles. */
#vbot-bubble.va-on{--va-v:#6D5DF5;--va-v2:#4A3DD6;--va-night:#0C0C38;display:flex;flex-direction:column;width:min(384px,calc(100vw - 24px));max-height:min(600px,calc(100vh - 220px));padding:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -24px rgb(12 12 56/.55),0 0 0 1px rgb(109 93 245/.08);transform-origin:calc(100% - 40px) 100%;animation:va-pop .5s cubic-bezier(.22,1.2,.36,1)}
#vbot-bubble.va-on[hidden]{display:none}
/* Thank-you notes from the theme (after the form is sent) keep the small bubble. */
#vbot-bubble.va-on.custom{display:block;width:min(320px,calc(100vw - 36px));padding:1.1rem 1.1rem 1rem;border-radius:14px}
#vbot-bubble.custom .va-chat{display:none}
#vbot-bubble.va-on:not(.custom)>p,#vbot-bubble.va-on:not(.custom) .vbot-actions{display:none}
.va-chat{display:flex;flex-direction:column;flex:1;min-height:0}

/* Close button sits on the header */
#vbot-bubble.va-on:not(.custom) .vbot-close{z-index:2;top:21px;right:14px;width:36px;height:36px;padding:0;font-size:0;color:#C9C4E8;transition:background .25s,color .25s,transform .4s cubic-bezier(.34,1.56,.64,1)}
#vbot-bubble.va-on:not(.custom) .vbot-close:hover{background:rgb(255 255 255/.12);color:#fff;transform:rotate(90deg)}

/* Header */
.va-head{position:relative;display:flex;align-items:center;gap:.75rem;padding:1rem 3.4rem 1rem 1rem;background:radial-gradient(240px 140px at 100% 0,rgb(155 140 255/.55),transparent 70%),linear-gradient(135deg,#15154A,var(--va-night));color:#F3EFE8;overflow:hidden;isolation:isolate}
.va-head::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgb(255 255 255/.09) 1px,transparent 1.2px) 0 0/14px 14px;-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000)}
.va-ava{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}
.va-ava::after{content:"";position:absolute;inset:-4px;border-radius:19px;border:1.5px solid rgb(169 169 242/.5);animation:va-ring 2.8s ease-out infinite}
.va-face{width:34px;height:34px;overflow:visible}
.va-face .va-fh{fill:#F3EFE8}
.va-face .va-screen{fill:var(--va-night)}
.va-face .va-eyes rect{fill:#A9A9F2}
.va-face .va-stalk{stroke:#F3EFE8;stroke-width:2;stroke-linecap:round}
.va-face .va-ant{fill:#F7CEB5;animation:va-glow 2s ease-in-out infinite}
.va-face .va-eyes{transform-box:fill-box;transform-origin:center;animation:va-blink 4.5s infinite}
.va-who{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.va-who b{font-weight:500;font-size:1rem;letter-spacing:-.01em}
.va-who>span{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:#B9B4D6}
.va-live{position:relative;width:8px;height:8px;border-radius:50%;background:#3DDC97}
.va-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3DDC97;animation:va-ping 1.8s cubic-bezier(0,0,.2,1) infinite}

/* Scrolling body: welcome, then the conversation */
.va-body{flex:1;min-height:min(260px,32vh);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding:1rem;background:radial-gradient(rgb(109 93 245/.09) 1px,transparent 1.2px) 0 0/16px 16px}
#vbot-bubble.va-active .va-hello{display:none}
#vbot-bubble .va-hi{position:relative;margin:0 0 1rem;padding:.85rem .95rem .85rem 2.6rem;border-radius:16px;border-top-left-radius:4px;background:var(--tint,#ECEAF7);font-size:.92rem;line-height:1.5}
.va-hi b{font-weight:600}
.va-spark{position:absolute;left:.85rem;top:.9rem;width:20px!important;height:20px!important;color:var(--va-v);animation:va-twinkle 2.4s ease-in-out infinite}
#vbot-bubble .va-k{margin:0 0 .5rem;font-family:var(--font-mono,monospace);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#6A6680)}
.va-asks{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem}
.va-ask{display:flex;align-items:center;gap:.6rem;width:100%;min-height:44px;padding:.5rem .75rem;border:1px solid var(--line,#DDD8EC);border-radius:12px;background:var(--surface,#fff);color:var(--ink,#0C0C38);font:inherit;font-size:.88rem;text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.va-ask .va-i{flex:none;width:28px;height:28px;padding:5px;border-radius:9px;background:var(--tint,#ECEAF7);color:var(--va-v);transition:background .25s,color .25s}
.va-ask:hover{border-color:var(--va-v);transform:translateX(3px)}
.va-ask:hover .va-i{background:var(--va-v);color:#fff}
.va-ask:focus-visible,.va-links a:focus-visible,.va-form button:focus-visible{outline:2px solid var(--va-v);outline-offset:2px}
.va-links{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.va-links a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:0 .5rem;border-radius:999px;background:var(--tint,#ECEAF7);color:var(--ink,#0C0C38);font-size:.8rem;font-weight:500;text-decoration:none;transition:background .25s,color .25s}
.va-links a:hover{background:var(--va-v);color:#fff}
.va-links .va-i{width:16px;height:16px}
.va-i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Messages */
.va-log{display:flex;flex-direction:column;gap:.6rem}
.va-log:empty{display:none}
#vbot-bubble .va-msg{margin:0;max-width:84%;padding:.6rem .85rem;border-radius:16px;font-size:.9rem;line-height:1.5;overflow-wrap:anywhere}
.va-me{align-self:flex-end;background:linear-gradient(135deg,var(--va-v),var(--va-v2));color:#fff;border-bottom-right-radius:5px;box-shadow:0 8px 18px -10px rgb(74 61 214/.8);transform-origin:100% 100%;animation:va-me .4s cubic-bezier(.34,1.4,.64,1)}
.va-bot{position:relative;align-self:flex-start;margin-left:34px!important;background:var(--tint,#ECEAF7);color:var(--ink,#0C0C38);border-bottom-left-radius:5px;transform-origin:0 100%;animation:va-bot .45s cubic-bezier(.34,1.4,.64,1)}
.va-bot::before{content:"";position:absolute;left:-34px;bottom:0;width:26px;height:26px;border-radius:9px;box-shadow:0 0 0 1px rgb(169 169 242/.3);background:var(--va-night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 10V6' stroke='%23F3EFE8' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='5' r='2.6' fill='%23F7CEB5'/%3E%3Crect x='5' y='10' width='30' height='23' rx='10' fill='%23F3EFE8'/%3E%3Crect x='9.5' y='14' width='21' height='15' rx='6.5' fill='%230C0C38'/%3E%3Crect x='14' y='18' width='3.8' height='6.4' rx='1.9' fill='%23A9A9F2'/%3E%3Crect x='22.2' y='18' width='3.8' height='6.4' rx='1.9' fill='%23A9A9F2'/%3E%3C/svg%3E") center/20px no-repeat}
.va-bot p,.va-bot ul,.va-bot ol{margin:0}
#vbot-bubble .va-bot>*+*{margin-top:.55rem}
.va-bot ul,.va-bot ol{padding-left:1.15rem;display:grid;gap:.2rem}
.va-bot li::marker{color:var(--violet,#6D5DF5)}
.va-bot strong{font-weight:600}
.va-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px;unicode-bidi:isolate}
.va-err{background:transparent!important;border:1px solid var(--line,#DDD8EC)}
.va-typing{display:flex;gap:5px;padding:.85rem 1rem!important}
.va-typing i{width:7px;height:7px;border-radius:50%;background:var(--va-v);animation:va-dot 1.1s ease-in-out infinite}
.va-typing i:nth-child(2){animation-delay:.15s}.va-typing i:nth-child(3){animation-delay:.3s}

/* Composer */
.va-form{display:flex;align-items:center;gap:.4rem;margin:0 .85rem;padding:5px 5px 5px .4rem;border:1px solid var(--line,#DDD8EC);border-radius:999px;background:var(--surface,#fff);transition:border-color .25s,box-shadow .25s}
.va-chat>.va-form{margin-top:.75rem}
.va-form:focus-within{border-color:var(--va-v);box-shadow:0 0 0 4px rgb(109 93 245/.16)}
.va-form input{flex:1;min-width:0;height:40px;padding:0 .6rem;border:0;background:transparent;color:var(--ink,#0C0C38);font:inherit;font-size:16px;outline:0}
.va-form button{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--va-v),var(--va-v2));color:#fff;cursor:pointer;overflow:hidden;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s,filter .25s}
.va-form button .va-i{width:18px;height:18px;stroke-width:2}
.va-form input:placeholder-shown+button{filter:saturate(.4);opacity:.6}
.va-form button:hover{transform:scale(1.08)}
.va-form button:disabled{cursor:wait}
.va-form button.va-fly .va-i{animation:va-fly .7s cubic-bezier(.5,0,.3,1)}
#vbot-bubble .va-note{margin:.5rem 1rem .8rem;font-size:.7rem;color:var(--muted,#6A6680);text-align:center}
.va-note a{color:inherit}
.va-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Opening: the panel springs out of the bot, then its contents rise in */
#vbot-bubble.va-on:not(.custom) .va-head>*,#vbot-bubble.va-on:not(.custom) .va-hi,#vbot-bubble.va-on:not(.custom) .va-k,#vbot-bubble.va-on:not(.custom) .va-asks li,#vbot-bubble.va-on:not(.custom) .va-links{animation:va-rise .5s cubic-bezier(.22,1,.36,1) backwards}
#vbot-bubble .va-head>:nth-child(2){animation-delay:.08s}
#vbot-bubble .va-hi{animation-delay:.14s}
#vbot-bubble .va-k{animation-delay:.2s}
#vbot-bubble .va-asks li{animation-delay:calc(.24s + var(--i) * .05s)}
#vbot-bubble .va-links{animation-delay:.46s}

@keyframes va-pop{from{opacity:0;transform:translateY(18px) scale(.86)}}
@keyframes va-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes va-me{from{opacity:0;transform:translate(10px,8px) scale(.9)}}
@keyframes va-bot{from{opacity:0;transform:translate(-10px,8px) scale(.9)}}
@keyframes va-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
@keyframes va-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes va-glow{50%{opacity:.45}}
@keyframes va-ring{0%{transform:scale(.9);opacity:.9}80%,100%{transform:scale(1.18);opacity:0}}
@keyframes va-ping{75%,100%{transform:scale(2.4);opacity:0}}
@keyframes va-twinkle{50%{transform:rotate(15deg) scale(1.12)}}
@keyframes va-fly{0%{transform:none}45%{transform:translate(18px,-18px);opacity:0}46%{transform:translate(-18px,18px);opacity:0}100%{transform:none;opacity:1}}

@media (max-width:600px){
	#vbot-bubble.va-on:not(.custom){left:12px;right:12px;width:auto;bottom:96px;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
}
@media (prefers-reduced-motion:reduce){
	#vbot-bubble.va-on,#vbot-bubble.va-on *,#vbot-bubble.va-on ::before,#vbot-bubble.va-on ::after{animation:none!important}
	.va-body{scroll-behavior:auto}
}
/* A drawn cross, so it sits dead centre whatever the font */
#vbot-bubble.va-on:not(.custom) .vbot-close::before,#vbot-bubble.va-on:not(.custom) .vbot-close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.8px;margin:-.9px 0 0 -7px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
#vbot-bubble.va-on:not(.custom) .vbot-close::after{transform:rotate(-45deg)}
/* Only the conversation area gives up height on short screens; the header, input and note keep their size. */
.va-head,.va-form,#vbot-bubble .va-note{flex:none}