/* ============================================================
   chatbot.css — Step, the StepUp AI assistant (home page only)
============================================================ */
.sb-chat{ display:none; position:fixed; right:22px; bottom:22px; z-index:60; font-family:Inter,system-ui,sans-serif; }
body[data-route="home"] .sb-chat{ display:block; }

/* ---- launcher ---- */
.sb-launcher{
  position:relative; display:block; margin-left:auto;
  width:76px; height:76px; padding:0; border:none; cursor:pointer; border-radius:50%;
  background:radial-gradient(circle at 30% 20%,#fff,#e9e4ff 70%);
  box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(120,90,240,.45), 0 16px 32px -10px rgba(80,50,200,.6);
  animation:sb-float 3.2s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color:transparent;
}
.sb-launcher:hover{ transform:scale(1.08); animation-play-state:paused; }
.sb-launcher img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 40%; display:block; }
.sb-launcher:focus-visible{ outline:3px solid #7a5cf0; outline-offset:4px; }
.sb-bubble{
  position:absolute; right:88px; top:50%; transform:translateY(-50%); white-space:nowrap;
  background:#fff; color:#2b2457; font-size:13px; font-weight:600; padding:9px 14px; border-radius:14px;
  box-shadow:0 10px 24px -10px rgba(60,40,160,.5); animation:sb-pop .5s .8s both;
}
.sb-bubble::after{ content:""; position:absolute; right:-5px; top:50%; width:10px; height:10px; background:#fff; transform:translateY(-50%) rotate(45deg); }
.sb-chat.open .sb-bubble{ display:none; }
@keyframes sb-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
@keyframes sb-pop{ from{ opacity:0; transform:translateY(-50%) scale(.8); } to{ opacity:1; transform:translateY(-50%) scale(1); } }

/* ---- panel ---- */
.sb-panel{
  position:absolute; right:0; bottom:92px; width:372px; max-width:calc(100vw - 32px); height:520px; max-height:calc(100vh - 130px);
  display:flex; flex-direction:column; overflow:hidden; border-radius:24px;
  background:#fff; color:#2b2457;
  box-shadow:0 30px 60px -20px rgba(50,30,150,.55), 0 0 0 1px rgba(120,90,240,.15);
  transform-origin:100% 100%; transform:scale(.85) translateY(16px); opacity:0; visibility:hidden;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), opacity .2s, visibility .3s;
}
.sb-chat.open .sb-panel{ transform:none; opacity:1; visibility:visible; }

.sb-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; color:#fff; background:linear-gradient(135deg,#8a6bff,#5b34e6); }
.sb-avatar{ width:44px; height:44px; border-radius:50%; background:#fff; object-fit:cover; object-position:50% 40%; box-shadow:0 0 0 2px rgba(255,255,255,.6); }
.sb-title{ display:flex; flex-direction:column; line-height:1.25; flex:1; }
.sb-title b{ font:700 16px Sora,Inter,sans-serif; }
.sb-title span{ font-size:12px; opacity:.9; display:flex; align-items:center; gap:6px; }
.sb-dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.3); }
.sb-title em{ font-style:normal; }
.sb-head{ gap:8px; }
.sb-hb{ width:32px; height:32px; flex-shrink:0; border-radius:50%; border:none; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, transform .35s; }
.sb-hb:hover{ background:rgba(255,255,255,.32); }
#sbNew:hover svg{ transform:rotate(-180deg); } #sbNew svg{ transition:transform .4s; }
.sb-x{ font-size:22px; line-height:1; }
.sb-hb:focus-visible,.sb-send:focus-visible,.sb-mic:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.sb-confirm{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:#fff7e6; border-bottom:1px solid #ffe2a8; color:#6b4a00; font-size:12.5px; }
.sb-confirm[hidden]{ display:none; }
.sb-confirm span{ flex:1; line-height:1.35; }
.sb-confirm button{ font:600 12px Inter,sans-serif; padding:6px 11px; border-radius:999px; border:1px solid #e8c77a; background:#fff; color:#6b4a00; cursor:pointer; }
.sb-confirm button.go{ background:#5b34e6; border-color:#5b34e6; color:#fff; }

.sb-body{ flex:1; overflow-y:auto; padding:16px 14px 6px; display:flex; flex-direction:column; gap:12px; background:linear-gradient(180deg,#f7f5ff,#fff); scroll-behavior:smooth; }
.sb-msg{ display:flex; gap:8px; align-items:flex-end; max-width:92%; animation:sb-in .25s ease both; }
.sb-msg img{ width:28px; height:28px; border-radius:50%; background:#fff; object-fit:cover; object-position:50% 40%; flex-shrink:0; box-shadow:0 0 0 1.5px #d9d0ff; }
.sb-msg.user{ align-self:flex-end; }
.sb-col{ display:flex; flex-direction:column; min-width:0; }
.sb-msg.user .sb-col{ align-items:flex-end; }
.sb-meta{ display:flex; align-items:center; gap:8px; margin:3px 4px 0; font-size:11px; color:#8b86ad; min-height:20px; }
.sb-off{ color:#b7791f; background:#fff4d6; border-radius:999px; padding:1px 7px; font-weight:600; }
.sb-acts{ display:inline-flex; gap:2px; opacity:.55; transition:opacity .15s; }
.sb-msg:hover .sb-acts,.sb-acts:focus-within{ opacity:1; }
.sb-acts button{ width:24px; height:24px; border:none; border-radius:7px; background:none; color:#7a73a8; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sb-acts button:hover{ background:#efeaff; color:#5b34e6; }
.sb-acts button.on{ color:#5b34e6; background:#e6deff; }
.sb-text{ font-size:14px; line-height:1.5; padding:10px 13px; border-radius:16px; word-break:break-word; }
.sb-text p{ margin:0 0 6px; } .sb-text p:last-child{ margin:0; }
.sb-text ul{ margin:4px 0 0; padding-left:18px; } .sb-text li{ margin:2px 0; }
.sb-msg.bot .sb-text{ background:#fff; border:1px solid #e6e0ff; border-bottom-left-radius:5px; box-shadow:0 4px 12px -8px rgba(80,50,200,.4); }
.sb-msg.user .sb-text{ background:linear-gradient(135deg,#8a6bff,#5b34e6); color:#fff; border-bottom-right-radius:5px; }
@keyframes sb-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.sb-typing{ display:inline-flex; gap:4px; padding:4px 2px; }
.sb-typing i{ width:7px; height:7px; border-radius:50%; background:#8a6bff; animation:sb-bounce 1s infinite; }
.sb-typing i:nth-child(2){ animation-delay:.15s; } .sb-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes sb-bounce{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

.sb-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px; background:#fff; }
.sb-chips:not(:empty){ padding-top:8px; padding-bottom:4px; }
.sb-chips button{ font:500 12.5px Inter,sans-serif; color:#5b34e6; background:#f1edff; border:1px solid #d9d0ff; border-radius:999px; padding:7px 12px; cursor:pointer; }
.sb-chips button:hover{ background:#e6deff; }

.sb-jump{ position:absolute; left:50%; bottom:128px; transform:translateX(-50%); width:34px; height:34px; border-radius:50%; border:none; background:#fff; color:#5b34e6; font-size:17px; cursor:pointer; box-shadow:0 8px 20px -6px rgba(60,40,160,.6); z-index:2; }
.sb-jump[hidden]{ display:none; }
.sb-form{ display:flex; align-items:flex-end; gap:8px; padding:12px 14px 14px; background:#fff; border-top:1px solid #eee9ff; }
.sb-field{ flex:1; min-width:0; position:relative; }
.sb-field textarea{ display:block; width:100%; box-sizing:border-box; resize:none; font:14px/1.4 Inter,sans-serif; color:inherit; padding:11px 14px; border-radius:20px; border:1.5px solid #e0d9ff; outline:none; background:#faf9ff; max-height:110px; overflow-y:auto; }
.sb-field textarea:focus{ border-color:#8a6bff; background:#fff; }
.sb-field small{ position:absolute; right:12px; bottom:-14px; font-size:10px; color:#8b86ad; }
.sb-send,.sb-mic{ width:42px; height:42px; flex-shrink:0; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sb-send{ color:#fff; background:linear-gradient(135deg,#8a6bff,#5b34e6); box-shadow:0 8px 16px -8px rgba(91,52,230,.8); }
.sb-send:hover{ filter:brightness(1.08); }
.sb-send.stop{ background:linear-gradient(135deg,#ff7a8a,#e23a55); }
.sb-mic{ color:#5b34e6; background:#f1edff; }
.sb-mic[hidden]{ display:none; }
.sb-mic.on{ color:#fff; background:#e23a55; animation:sb-rec 1s infinite; }
@keyframes sb-rec{ 50%{ box-shadow:0 0 0 7px rgba(226,58,85,.25); } }

/* expanded window */
.sb-chat.big .sb-panel{ width:min(560px,calc(100vw - 32px)); height:calc(100vh - 130px); }

@media (max-width:480px){
  .sb-chat{ right:14px; bottom:14px; }
  .sb-launcher{ width:64px; height:64px; }
  .sb-bubble{ display:none; }
  .sb-panel,.sb-chat.big .sb-panel{ bottom:80px; width:calc(100vw - 28px); height:calc(100vh - 110px); }
  #sbBig{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .sb-launcher{ animation:none; } .sb-panel,.sb-msg{ transition:none; animation:none; } }