/* Site guide: a small bottom-left companion with pre-written, context-aware tips. */
.cmp{--c-text:#EDEDF2;--c-muted:#B4B4C3;--c-line:rgba(255,255,255,.16);--c-violet:#A78BFA;--c-cyan:#67E8F9;
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;pointer-events:none}
.cmp > *{pointer-events:auto}
.cmp[hidden],.cmp [hidden],.cmp-tab[hidden]{display:none!important}

/* the bot button */
.cmp-bot{position:relative;width:52px;height:52px;padding:0;border:0;border-radius:18px;cursor:pointer;background:transparent;
  transform:translateY(130%);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .4s;-webkit-tap-highlight-color:transparent}
.cmp.shown .cmp-bot{transform:none;opacity:1}
.cmp-bot:focus-visible{outline:2px solid var(--c-cyan);outline-offset:4px}
.cmp-head{position:absolute;inset:6px 4px 4px;border-radius:44% 44% 40% 40%;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.28),transparent 40%),radial-gradient(circle at 50% 130%,rgba(124,92,255,.65),transparent 62%),linear-gradient(160deg,#22222f,#0d0d14 65%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 10px 26px -8px rgba(0,0,0,.9),0 0 26px rgba(124,92,255,.35);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.cmp-bot:hover .cmp-head{transform:translateY(-2px) rotate(-3deg)}
.cmp-visor{position:absolute;left:14%;right:14%;top:32%;height:36%;border-radius:999px;background:#050508;box-shadow:inset 0 0 0 1px rgba(103,232,249,.3);display:flex;align-items:center;justify-content:center;gap:24%;overflow:hidden}
.cmp-eye{width:16%;aspect-ratio:.62;border-radius:999px;background:linear-gradient(#D7FBFF,#67E8F9);box-shadow:0 0 6px #22D3EE;transition:transform .35s ease,scale .3s}
.cmp-antenna{position:absolute;left:50%;top:-2px;width:2px;height:9px;margin-left:-1px;background:linear-gradient(to top,rgba(255,255,255,.2),var(--c-violet))}
.cmp-antenna::after{content:"";position:absolute;left:50%;top:-4px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--c-violet);box-shadow:0 0 8px var(--c-violet)}
.cmp-arm{position:absolute;right:-6px;top:24px;width:12px;height:5px;border-radius:4px;background:#2a2a38;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transform-origin:left center;opacity:0;transition:opacity .2s}
.cmp-dot{position:absolute;right:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 2px #050507,0 0 10px #4ADE80;opacity:0;transition:opacity .3s}
.cmp.has-msg .cmp-dot{opacity:1}

/* idle animations (disabled for reduced motion) */
.cmp.anim-look .cmp-eye{transform:translateX(-35%)}
.cmp.anim-look2 .cmp-eye{transform:translateX(35%)}
.cmp.anim-blink .cmp-eye{scale:1 .12}
.cmp.anim-wave .cmp-arm{opacity:1;animation:cmp-wave .9s ease-in-out 2}
.cmp.anim-hop .cmp-head{animation:cmp-hop .7s cubic-bezier(.34,1.56,.64,1)}
.cmp.anim-busy .cmp-antenna::after{animation:cmp-busy .5s ease-in-out 4}
@keyframes cmp-wave{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-70deg)}}
@keyframes cmp-hop{40%{transform:translateY(-7px)}}
@keyframes cmp-busy{50%{background:var(--c-cyan);box-shadow:0 0 12px var(--c-cyan)}}

/* speech bubble (overlay next to the robot) */
.cmp-bubble{position:relative;width:min(330px,calc(100vw - 32px));padding:14px 16px;border-radius:18px 18px 18px 6px;
  background:linear-gradient(180deg,rgba(30,27,48,.97),rgba(16,15,26,.97));box-shadow:inset 0 0 0 1px rgba(167,139,250,.35),0 22px 50px -16px rgba(0,0,0,.95),0 0 40px -12px rgba(139,92,246,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--c-text);font-size:15.5px;line-height:1.5;transform-origin:bottom left;animation:cmp-pop .45s cubic-bezier(.34,1.56,.64,1)}
.cmp-bubble::after{content:"";position:absolute;left:18px;bottom:-7px;width:14px;height:14px;transform:rotate(45deg);border-radius:0 0 4px 0;
  background:rgba(17,16,27,.98);box-shadow:inset -1px -1px 0 rgba(167,139,250,.35)}
.cmp-bubble p{margin:0}
.cmp-text{font-weight:500;padding-right:28px}
@keyframes cmp-pop{from{opacity:0;transform:translateY(10px) scale(.92)}}
.cmp-typing{display:none;gap:5px;align-items:center;height:22px}
.cmp-typing i{width:7px;height:7px;border-radius:50%;background:var(--c-violet);animation:cmp-dots 1s ease-in-out infinite}
.cmp-typing i:nth-child(2){animation-delay:.15s}.cmp-typing i:nth-child(3){animation-delay:.3s}
@keyframes cmp-dots{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.cmp-bubble.is-typing{width:auto;padding-right:16px}
.cmp-bubble.is-typing .cmp-typing{display:flex}
.cmp-bubble.is-typing .cmp-text,.cmp-bubble.is-typing .cmp-actions,.cmp-bubble.is-typing .cmp-x,.cmp-bubble.is-typing .cmp-more{display:none}
.cmp-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.cmp-actions:empty{display:none}
.cmp-more{display:none;margin-top:10px;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--c-violet);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cmp-bubble.compact .cmp-actions{display:none}
.cmp-bubble.compact .cmp-more{display:inline-block}
.cmp-act{display:inline-flex;align-items:center;min-height:36px;padding:7px 12px;border-radius:999px;border:0;font:inherit;font-size:13.5px;font-weight:500;line-height:1.2;cursor:pointer;text-decoration:none;
  color:var(--c-text);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--c-line);transition:background .2s,color .2s}
.cmp-act:hover,.cmp-act:focus-visible{background:rgba(255,255,255,.15);color:#fff}
.cmp-act.primary{color:#0a0a0f;background:#F2F1FF;box-shadow:none}
.cmp-act.primary:hover,.cmp-act.primary:focus-visible{background:#fff;color:#0a0a0f}
.cmp-act:focus-visible,.cmp-x:focus-visible,.cmp-chip:focus-visible,.cmp-cta:focus-visible,.cmp-hide:focus-visible,.cmp-tab:focus-visible,.cmp-more:focus-visible{outline:2px solid var(--c-cyan);outline-offset:2px}
.cmp-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;color:var(--c-muted);background:transparent;font-size:20px;line-height:1;display:grid;place-items:center}
.cmp-x:hover{color:#fff;background:rgba(255,255,255,.08)}

/* panel */
.cmp-panel{position:relative;width:min(340px,calc(100vw - 32px));padding:16px;border-radius:22px;overflow:hidden;
  background:radial-gradient(420px 180px at 0% 0%,rgba(139,92,246,.28),transparent 70%),radial-gradient(300px 160px at 100% 100%,rgba(34,211,238,.12),transparent 70%),rgba(12,12,19,.97);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.3),0 30px 70px -20px rgba(0,0,0,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--c-text);font-size:15px;line-height:1.55;transform-origin:bottom left;animation:cmp-pop .4s cubic-bezier(.34,1.56,.64,1)}
.cmp-ph{display:flex;align-items:center;gap:12px;padding-right:34px;margin-bottom:14px}
.cmp-avatar{position:relative;flex:none;width:44px;height:40px;border-radius:44% 44% 40% 40%;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.28),transparent 40%),radial-gradient(circle at 50% 130%,rgba(124,92,255,.65),transparent 62%),linear-gradient(160deg,#22222f,#0d0d14 65%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 20px rgba(124,92,255,.4)}
.cmp-avatar .cmp-visor{left:12%;right:12%}
.cmp-who h2{margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.01em;outline:none}
.cmp-status{display:flex;align-items:center;gap:7px;margin:2px 0 0;font-size:13px;color:var(--c-muted)}
.cmp-status i{width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80}
.cmp-panel .cmp-x{top:14px;right:12px}
.cmp-msg{position:relative;margin:0 0 14px;padding:12px 14px;border-radius:6px 16px 16px 16px;font-size:15px;line-height:1.5;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cmp-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.cmp-chip{display:flex;align-items:center;gap:9px;min-height:46px;padding:10px 12px;border-radius:14px;text-decoration:none;font-size:14.5px;font-weight:500;line-height:1.25;color:var(--c-text);
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .2s,box-shadow .2s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.cmp-chip svg{flex:none;width:18px;height:18px;color:var(--c-violet)}
.cmp-chip:hover{background:rgba(139,92,246,.16);box-shadow:inset 0 0 0 1px rgba(167,139,250,.5);transform:translateY(-1px)}
.cmp-chip:nth-child(3) svg{color:var(--c-cyan)}
.cmp-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;color:#0a0a0f;
  background:#F2F1FF;box-shadow:0 10px 30px -10px rgba(139,92,246,.9);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.cmp-cta:hover{transform:translateY(-1px);background:#fff}
.cmp-cta span{transition:transform .3s}
.cmp-cta:hover span{transform:translateX(3px)}
.cmp-hide{display:block;margin:12px auto 0;border:0;background:none;padding:4px 6px;font:inherit;font-size:13.5px;color:var(--c-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cmp-hide:hover{color:#fff}
@media (max-width:360px){.cmp-chips{grid-template-columns:1fr}}

/* minimised tab */
.cmp-tab{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 12px;border:0;border-radius:999px;cursor:pointer;
  font:500 13.5px/1 'Geist',ui-sans-serif,system-ui,sans-serif;color:#D6D6E1;background:rgba(14,14,20,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.cmp-tab::before{content:"";width:8px;height:8px;border-radius:50%;background:#A78BFA;box-shadow:0 0 8px #A78BFA}
.cmp-tab:hover{color:#fff}

@media (max-width:520px){
  .cmp{left:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .cmp-bot{width:46px;height:46px}
  .cmp-bubble{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .cmp-bot,.cmp-head,.cmp-eye,.cmp-bubble,.cmp-panel{transition:none!important;animation:none!important}
}
