/* SquidTech Lead Chatbot Pro */
.sqbot,
.sqbot *{
  box-sizing:border-box;
}

.sqbot{
  --sqbot-dark:#050916;
  --sqbot-panel:#0b1220;
  --sqbot-card:#111827;
  --sqbot-cyan:#18e6ff;
  --sqbot-purple:#8b2cff;
  --sqbot-text:#ffffff;
  --sqbot-muted:#c7d5eb;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  width:100%;
  max-width:920px;
  margin:30px auto;
  color:var(--sqbot-text);
}

.sqbot-card{
  background:
    radial-gradient(circle at 10% 10%,rgba(24,230,255,.12),transparent 32%),
    radial-gradient(circle at 90% 20%,rgba(139,44,255,.16),transparent 34%),
    linear-gradient(145deg,#050916,#0b1220);
  border:1px solid rgba(24,230,255,.18);
  border-radius:30px;
  box-shadow:0 24px 70px rgba(0,0,0,.34);
  overflow:hidden;
}

.sqbot-header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:28px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.sqbot-pill{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--sqbot-purple),var(--sqbot-cyan));
  font-weight:950;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:12px;
}

.sqbot-header h2{
  margin:0 0 8px;
  font-size:clamp(1.9rem,4vw,3.2rem);
  line-height:.98;
  letter-spacing:-.055em;
}

.sqbot-header p{
  margin:0;
  color:var(--sqbot-muted);
  font-weight:650;
  line-height:1.6;
}

.sqbot-avatar{
  flex:0 0 70px;
  width:70px;
  height:70px;
  border-radius:24px;
  display:grid;
  place-items:center;
  font-size:2.1rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(24,230,255,.22);
}

.sqbot-progress{
  height:5px;
  background:rgba(255,255,255,.07);
}

.sqbot-progress span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--sqbot-purple),var(--sqbot-cyan));
  transition:width .25s ease;
}

.sqbot-form{
  padding:28px;
}

.sqbot-step{
  display:none;
  animation:sqbotFade .22s ease;
}

.sqbot-step.is-active{
  display:block;
}

@keyframes sqbotFade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.sqbot-message{
  display:inline-flex;
  max-width:100%;
  padding:14px 18px;
  border-radius:18px 18px 18px 4px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-weight:850;
  line-height:1.45;
  margin-bottom:18px;
}

.sqbot-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.sqbot-options button{
  border:1px solid rgba(24,230,255,.22);
  background:rgba(255,255,255,.06);
  color:#ffffff;
  padding:12px 15px;
  border-radius:999px;
  cursor:pointer;
  font-weight:850;
  transition:all .18s ease;
}

.sqbot-options button:hover,
.sqbot-options button.is-selected{
  background:linear-gradient(135deg,var(--sqbot-purple),var(--sqbot-cyan));
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

.sqbot-field{
  display:block;
  margin:14px 0;
}

.sqbot-field span{
  display:block;
  margin-bottom:8px;
  color:var(--sqbot-muted);
  font-weight:850;
}

.sqbot-field input,
.sqbot-field textarea{
  width:100%;
  border:1px solid rgba(24,230,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:14px 15px;
  font:inherit;
  outline:0;
}

.sqbot-field input::placeholder,
.sqbot-field textarea::placeholder{
  color:rgba(255,255,255,.42);
}

.sqbot-field input:focus,
.sqbot-field textarea:focus{
  border-color:var(--sqbot-cyan);
  box-shadow:0 0 0 4px rgba(24,230,255,.10);
}

.sqbot-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:24px;
}

.sqbot-actions button,
.sqbot-whatsapp-link{
  min-height:48px;
  border:0;
  border-radius:999px;
  padding:0 20px;
  font-weight:950;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sqbot-back{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12) !important;
}

.sqbot-next,
.sqbot-submit,
.sqbot-whatsapp-link{
  background:linear-gradient(135deg,var(--sqbot-purple),var(--sqbot-cyan));
  color:#fff;
  box-shadow:0 16px 34px rgba(24,230,255,.16);
}

.sqbot-submit{
  display:none;
}

.sqbot-error{
  display:none;
  margin-top:18px;
  padding:13px 15px;
  border-radius:16px;
  background:rgba(255,77,109,.14);
  border:1px solid rgba(255,77,109,.34);
  color:#ffd7df;
  font-weight:800;
}

.sqbot-error.is-visible{
  display:block;
}

.sqbot.is-submitting{
  pointer-events:none;
  opacity:.76;
}

@media(max-width:700px){
  .sqbot{
    margin:20px auto;
  }

  .sqbot-card{
    border-radius:22px;
  }

  .sqbot-header{
    padding:22px;
  }

  .sqbot-avatar{
    display:none;
  }

  .sqbot-form{
    padding:22px;
  }

  .sqbot-options{
    display:grid;
    grid-template-columns:1fr;
  }

  .sqbot-options button{
    width:100%;
    border-radius:16px;
    text-align:left;
  }

  .sqbot-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .sqbot-actions button,
  .sqbot-whatsapp-link{
    width:100%;
  }
}

/* v1.3.0: details-first flow */
.sqbot-soft-note{
  margin:8px 0 16px;
  color:var(--sqbot-muted);
  font-weight:700;
  line-height:1.55;
}