/* SimpleBot marketing pages: motion (home, landing, help).
   One orchestrated moment, the hero chat playing a real conversation; everything else
   moves only in answer to the visitor (hover, open, scroll progress). Transform/opacity only,
   nothing moves when the visitor has asked for reduced motion.
   Cached immutable for a year: change the file name (motion-v2.css) when editing. */

:root{--ease-out:cubic-bezier(.22,.8,.24,1);--ease-spring:cubic-bezier(.34,1.4,.5,1)}

/* ---------- Breadcrumbs are a <nav> too: keep them out of the sticky header rule ---------- */
nav.crumbs{position:static;z-index:auto;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none}

/* ---------- Sticky nav: soft shadow once the page scrolls ---------- */
nav:not(.crumbs){transition:box-shadow .25s,background-color .25s}
nav.is-scrolled{box-shadow:0 6px 24px -12px rgba(15,23,42,.18);background:rgba(251,251,250,.94)}

/* ---------- Buttons ---------- */
.btn-teal,.btn-primary{transition:transform .18s var(--ease-out),background .15s,box-shadow .2s}
@media (hover:hover){
  .btn-teal:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(13,148,136,.65)}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.demo-card:focus-visible,.help-card:focus-visible,.qa summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------- Nav links: underline that grows from the left ---------- */
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
@media (hover:hover){.nav-links a:hover::after{transform:scaleX(1)}}

/* ---------- Hero chat: glow and the scripted conversation ---------- */
.hero-chat{box-shadow:0 24px 60px -20px rgba(0,0,0,.3),0 0 90px -20px rgba(20,184,166,.35)}
.hc-body{position:relative}
.hc-status{transition:color .2s}
.hc-status.is-typing{color:var(--night-muted)}

.hc-typing{position:absolute;display:flex;gap:4px;align-items:center;padding:12px 14px;border-radius:12px;border-bottom-left-radius:3px;background:var(--night-soft);opacity:0;transform:translateY(6px) scale(.96);transform-origin:left bottom;transition:opacity .2s,transform .25s var(--ease-out);pointer-events:none}
.hc-typing.is-on{opacity:1;transform:none}
.hc-typing i{width:6px;height:6px;border-radius:50%;background:var(--night-muted);animation:sb-dot 1s infinite ease-in-out}
.hc-typing i:nth-child(2){animation-delay:.15s}
.hc-typing i:nth-child(3){animation-delay:.3s}
@keyframes sb-dot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}

.sb-chat-play .hc-msg,.sb-chat-play .mini-card{opacity:0;transform:translateY(8px) scale(.98)}
.sb-chat-play .hc-msg.user{transform-origin:right bottom}
.sb-chat-play .hc-msg.bot{transform-origin:left bottom}
.sb-chat-play .hc-msg.is-in,.sb-chat-play .mini-card.is-in{opacity:1;transform:none;transition:opacity .35s var(--ease-out),transform .45s var(--ease-spring)}
/* Bot replies "stream" word by word, like the real widget. Words keep their space, so nothing jumps. */
.hc-msg .w{opacity:0;transition:opacity .18s}
.hc-msg .w.is-on{opacity:1}
.hc-input{transition:border-color .3s}
.hc-input.is-sending{border-color:var(--teal-deep)}

/* ---------- Clickable cards only: the arrow shows where the click leads ---------- */
.demo-meta .go,.help-card .go{display:inline-block;transition:transform .25s var(--ease-out)}
.chip-q{transition:border-color .2s,color .2s,background-color .2s}
@media (hover:hover){
  .demo-card:hover .go,.help-card:hover .go{transform:translateX(4px)}
  .demo-card:hover .chip-q{border-color:var(--teal-light);color:var(--teal-deep);background:#fff}
}

/* ---------- FAQ: smooth open where the browser supports it ---------- */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .qa::details-content{block-size:0;overflow:hidden;transition:block-size .32s var(--ease-out),content-visibility .32s allow-discrete}
  .qa[open]::details-content{block-size:auto}
}
.qa .ans{transition:opacity .3s .05s,transform .35s var(--ease-out)}
.qa:not([open]) .ans{opacity:0;transform:translateY(-4px)}
.qa summary{transition:color .2s}
@media (hover:hover){.qa summary:hover{color:var(--teal-deep)}}
.qa summary .x{transition:transform .3s var(--ease-spring)}

/* ---------- Final CTA: a still glow, no motion ---------- */
.final{position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;z-index:-1;top:-260px;left:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,184,166,.3),transparent);pointer-events:none}

/* ---------- Help articles: reading progress bar (no JS) ---------- */
@supports (animation-timeline:scroll()){
  .doc::before{content:'';position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--teal-deep),var(--teal-light));transform-origin:left;transform:scaleX(0);animation:sb-progress linear both;animation-timeline:scroll(root)}
  @keyframes sb-progress{to{transform:scaleX(1)}}
}
.aside-card a{transition:color .15s,transform .2s var(--ease-out)}
@media (hover:hover){.aside-card:not(.cta) a:hover{transform:translateX(3px)}}
.prose h2{scroll-margin-top:88px}

/* ---------- Reduced motion: keep the page still ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .sb-chat-play .hc-msg,.sb-chat-play .mini-card,.hc-msg .w{opacity:1!important;transform:none!important}
  .doc::before{display:none}
  @view-transition{navigation:none}
}