/* ============================================================
   SoftPulse Digital — assistant
   Uses the theme's own tokens so it follows dark and light mode.
   ============================================================ */

.sp-bot-launcher{
  position:fixed; bottom:26px; right:26px; z-index:940;
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--grad); color:#fff; display:grid; place-items:center;
  box-shadow:var(--shadow-glow); transition:transform .28s ease, opacity .2s ease;
}
.sp-bot-launcher:hover{transform:translateY(-3px) scale(1.04)}
.sp-bot-launcher svg{width:26px; height:26px}
.sp-bot-launcher .sp-bot-x{display:none}
.sp-bot-launcher[aria-expanded="true"] .sp-bot-chat{display:none}
.sp-bot-launcher[aria-expanded="true"] .sp-bot-x{display:block}

.sp-bot-dot{
  position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%;
  background:#22d3ee; border:2px solid var(--bg); animation:sp-bot-pulse 2.4s infinite;
}
@keyframes sp-bot-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.sp-bot-launcher[aria-expanded="true"] .sp-bot-dot{display:none}

/* back-to-top sits above the launcher */
.back-to-top{bottom:96px !important}

.sp-bot-panel{
  position:fixed; bottom:98px; right:26px; z-index:941;
  width:min(374px, calc(100vw - 36px)); max-height:min(600px, calc(100vh - 150px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.98);
  transition:opacity .26s ease, transform .26s ease, visibility .26s;
}
.sp-bot-panel.is-open{opacity:1; visibility:visible; transform:none}

.sp-bot-head{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--border); background:var(--surface);
}
.sp-bot-avatar{
  width:38px; height:38px; border-radius:12px; background:var(--grad);
  display:grid; place-items:center; flex:none;
}
.sp-bot-avatar svg{width:22px; height:22px}
.sp-bot-head h4{
  margin:0; font-family:var(--font-head); font-size:.95rem; font-weight:600; color:var(--text);
}
.sp-bot-head p{margin:2px 0 0; font-size:.76rem; color:var(--text-muted)}
.sp-bot-head .sp-live{color:#22d3ee}

.sp-bot-log{
  flex:1 1 auto; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin;
}
.sp-bot-log::-webkit-scrollbar{width:6px}
.sp-bot-log::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px}

.sp-msg{max-width:86%; font-size:.87rem; line-height:1.55; padding:11px 14px; border-radius:14px}
.sp-msg.bot{
  align-self:flex-start; background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-bottom-left-radius:5px;
}
.sp-msg.me{
  align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px;
}
.sp-msg a{color:inherit; text-decoration:underline}

.sp-typing{align-self:flex-start; display:flex; gap:5px; padding:13px 15px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px; border-bottom-left-radius:5px}
.sp-typing i{width:6px; height:6px; border-radius:50%; background:var(--text-muted); display:block;
  animation:sp-bounce 1.3s infinite}
.sp-typing i:nth-child(2){animation-delay:.16s}
.sp-typing i:nth-child(3){animation-delay:.32s}
@keyframes sp-bounce{0%,60%,100%{transform:translateY(0); opacity:.45}30%{transform:translateY(-5px); opacity:1}}

.sp-bot-foot{padding:14px 18px 18px; border-top:1px solid var(--border); background:var(--surface)}
.sp-chips{display:flex; flex-wrap:wrap; gap:8px}
.sp-chip{
  font-family:var(--font-body); font-size:.82rem; font-weight:500; cursor:pointer;
  padding:9px 14px; border-radius:var(--radius-sm);
  background:transparent; color:var(--text); border:1px solid var(--border);
  transition:border-color .2s, transform .2s;
}
.sp-chip:hover{border-color:var(--blue); transform:translateY(-1px)}
.sp-chip.primary{background:var(--grad); border-color:transparent; color:#fff}

.sp-field{display:flex; gap:8px}
.sp-field input{
  flex:1 1 auto; min-width:0; font-family:var(--font-body); font-size:.87rem;
  padding:11px 13px; border-radius:var(--radius-sm);
  background:var(--bg-2); color:var(--text); border:1px solid var(--border);
}
.sp-field input:focus{outline:none; border-color:var(--blue)}
.sp-field input::placeholder{color:var(--text-muted)}
.sp-send{
  flex:none; border:0; cursor:pointer; width:42px; border-radius:var(--radius-sm);
  background:var(--grad); color:#fff; display:grid; place-items:center;
}
.sp-send svg{width:17px; height:17px}
.sp-err{margin:8px 0 0; font-size:.76rem; color:#f87171}
.sp-note{margin:10px 0 0; font-size:.72rem; color:var(--text-muted); text-align:center}

@media (max-width:520px){
  .sp-bot-launcher{width:52px; height:52px; bottom:18px; right:18px}
  .back-to-top{bottom:82px !important}
  .sp-bot-panel{bottom:82px; right:12px; left:12px; width:auto; max-height:calc(100vh - 120px)}
}
@media print{ .sp-bot-launcher, .sp-bot-panel{display:none !important} }
@media (prefers-reduced-motion:reduce){
  .sp-bot-launcher, .sp-bot-panel, .sp-chip{transition:none}
  .sp-typing i, .sp-bot-dot{animation:none}
}

/* WhatsApp float hidden for now. Delete this block to bring it back. */
.whatsapp-float{display:none !important}
