#qbot-btn{position:fixed;bottom:100px;right:34px;width:52px;height:52px;border-radius:50%;background:#2563eb;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,99,235,0.4);z-index:9998;transition:transform .2s;animation:qbotFloat 3s ease-in-out infinite}
@keyframes qbotFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
#qbot-btn:has(i.ti-x) {
  animation: none;
}
#qbot-btn:hover {
  transform: scale(1.08);
  animation: none;
}
#qbot-btn i{font-size:22px;color:#fff}
#qbot-win{position:fixed;bottom:168px;right:24px;width:360px;max-height:520px;background:#0f172a;border:1px solid rgba(255,255,255,0.1);border-radius:16px;display:flex;flex-direction:column;z-index:9997;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.4);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s,transform .25s}
#qbot-win.open{opacity:1;pointer-events:all;transform:translateY(0)}
.qbot-head{flex-shrink:0;background:#2563eb;padding:14px 16px;display:flex;align-items:center;gap:10px}
.qbot-avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:#fff}
.qbot-hname{color:#fff;font-weight:600;font-size:14px}
.qbot-hstatus{color:rgba(255,255,255,0.75);font-size:11px}
#qbot-close{margin-left:auto;background:none;border:none;color:rgba(255,255,255,0.7);cursor:pointer;font-size:20px;line-height:1;padding:0}
.qbot-cats{flex-shrink:0;display:flex;gap:5px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.08);overflow-x:auto;scrollbar-width:none}
.qbot-cats::-webkit-scrollbar{display:none}
.qbot-cat{padding:4px 10px;border-radius:100px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:rgba(255,255,255,0.5);font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:'Inter',sans-serif}
.qbot-cat.active,.qbot-cat:hover{background:rgba(37,99,235,0.25);color:#60a5fa;border-color:rgba(37,99,235,0.4)}
#qbot-msgs{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.1) transparent}
.qbot-msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.55;font-family:'Inter',sans-serif}
.qbot-msg.bot{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);border-radius:4px 12px 12px 12px;align-self:flex-start}
.qbot-msg.user{background:#2563eb;color:#fff;border-radius:12px 4px 12px 12px;align-self:flex-end}
.qbot-typing{display:flex;gap:4px;align-items:center}
.qbot-typing span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.4);animation:qbdot .9s infinite}
.qbot-typing span:nth-child(2){animation-delay:.2s}
.qbot-typing span:nth-child(3){animation-delay:.4s}
@keyframes qbdot{0%,80%,100%{transform:scale(0.6);opacity:.4}40%{transform:scale(1);opacity:1}}
#qbot-sugs{flex-shrink:0;padding:8px 12px;display:flex;flex-direction:column;gap:5px;border-top:1px solid rgba(255,255,255,0.06)}
.qbot-sug{padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:rgba(255,255,255,0.55);font-size:12px;cursor:pointer;text-align:left;transition:all .15s;line-height:1.4;font-family:'Inter',sans-serif}
.qbot-sug:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);border-color:rgba(255,255,255,0.2)}
.qbot-input-row{flex-shrink:0;display:flex;gap:6px;padding:10px 12px;border-top:1px solid rgba(255,255,255,0.08)}
.qbot-input-row input{flex:1;border-radius:8px;font-size:13px;padding:7px 10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.9);outline:none;font-family:'Inter',sans-serif}
.qbot-input-row input::placeholder{color:rgba(255,255,255,0.3)}
.qbot-input-row input:focus{border-color:rgba(37,99,235,0.5)}
#qbot-send{width:34px;height:34px;border-radius:8px;background:#2563eb;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#qbot-send i{font-size:15px;color:#fff}
#qbot-send:hover{background:#1d4ed8}

/* ≤768px: mismo umbral que .whatsapp-float (index.php) -- antes este bloque
   solo actuaba en ≤480px, así que entre 481-768px el botón de WhatsApp ya
   usaba su tamaño/posición móvil pero QentBot seguía con los valores de
   escritorio, quedando desalineados. */
@media (max-width: 768px) {
  #qbot-btn {
    bottom: 84px;
    right: 16px;
    width: 46px;
    height: 46px;
  }
  #qbot-win {
    bottom: 142px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 70vh;
  }
}

.qbot-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 16px;
  background: #2563eb;
  color: #fff;
  border-radius: 9px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.2s;
  text-decoration: none;
}
.qbot-cta-btn:hover { background: #1d4ed8; }

.qbot-msg.bot strong { color: #fff; }
.qbot-msg.bot { line-height: 1.6; }