/* ============================================
   WIDGETS.CSS – WhatsApp Float + Chatbot
   ============================================ */

/* ── WHATSAPP ── */
#wa{position:fixed;bottom:90px;right:24px;z-index:999;width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#25D366,#1da851);display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;box-shadow:0 6px 20px rgba(37,211,102,.4);transition:all .3s cubic-bezier(.175,.885,.32,1.275)}
#wa:hover{transform:scale(1.15) rotate(-6deg);box-shadow:0 10px 28px rgba(37,211,102,.5)}
#wa-tip{position:fixed;bottom:94px;right:84px;z-index:999;background:#fff;color:#333;font-size:12px;font-weight:600;padding:7px 12px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.12);white-space:nowrap;opacity:0;pointer-events:none;transition:.25s;transform:translateX(8px)}
#wa-tip::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:#fff;border-right:none}
#wa:hover+#wa-tip{opacity:1;transform:translateX(0)}

/* ── CHATBOT ── */
#chatbot{position:fixed;bottom:24px;right:24px;z-index:1000}
#chat-toggle{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--blue),#0052cc);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;box-shadow:0 6px 20px rgba(0,56,147,.4);transition:all .3s cubic-bezier(.175,.885,.32,1.275);border:none;outline:none}
#chat-toggle:hover{transform:scale(1.1);box-shadow:0 10px 28px rgba(0,56,147,.5)}
#chat-box{position:absolute;bottom:62px;right:0;width:310px;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.2);overflow:hidden;display:none;animation:chatSlide .3s cubic-bezier(.4,0,.2,1)}
@keyframes chatSlide{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.chat-head{background:linear-gradient(135deg,var(--blue),#0052cc);padding:14px 16px;display:flex;align-items:center;gap:10px}
.chat-av{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.chat-hinfo{flex:1}
.chat-hname{color:#fff;font-weight:700;font-size:13px}
.chat-hstatus{color:rgba(255,255,255,.7);font-size:10px;display:flex;align-items:center;gap:4px}
.chat-online{width:6px;height:6px;background:#4ade80;border-radius:50%}
.chat-hclose{color:rgba(255,255,255,.7);cursor:pointer;font-size:16px;background:none;border:none;transition:.2s}
.chat-hclose:hover{color:#fff}
.chat-msgs{padding:14px;height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;background:#f8faff}
.chat-msgs::-webkit-scrollbar{width:3px}
.chat-msgs::-webkit-scrollbar-thumb{background:rgba(0,56,147,.2);border-radius:2px}
.msg{max-width:82%;padding:8px 12px;border-radius:12px;font-size:12.5px;line-height:1.5}
.msg-bot{background:#fff;color:#333;border:1px solid #e5eaf5;align-self:flex-start;border-bottom-left-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.msg-user{background:linear-gradient(135deg,var(--blue),#0052cc);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.chat-quick{padding:9px 12px;display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid #eef1f8;background:#fff}
.qbtn{background:var(--light);color:var(--blue);border:1px solid rgba(0,56,147,.12);padding:5px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:.2s}
.qbtn:hover{background:var(--blue);color:#fff}
.chat-input-row{display:flex;padding:10px;border-top:1px solid #eef1f8;gap:7px;background:#fff}
#chat-input{flex:1;border:1px solid #dde3f0;border-radius:8px;padding:7px 12px;font-size:12px;outline:none;transition:.2s}
#chat-input:focus{border-color:var(--blue)}
#chat-send{background:linear-gradient(135deg,var(--blue),#0052cc);color:#fff;border:none;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
#chat-send:hover{transform:scale(1.1)}