/* ═══════════════════════════════════════════════════════
   FutKitZone Chatbot Widget — Premium Dark Edition
   Palette: #0a0812 bg · #a855f7 accent · #d4a017 gold
   Fonts: Bebas Neue (headers) · Source Sans 3 (body)
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

.fkz-chatbot{
  position:fixed;bottom:24px;right:24px;z-index:9000;
  font-family:'Source Sans 3',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ── Toggle button ────────────────────────────────────── */
.fkz-chatbot-toggle{
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(168,85,247,.45),0 0 0 0 rgba(168,85,247,.3);
  transition:transform .2s cubic-bezier(.2,.8,.4,1),box-shadow .2s;
  display:flex;align-items:center;justify-content:center;
  animation:fkz-pulse 2.8s ease-in-out infinite;
}
.fkz-chatbot-toggle:hover{
  transform:scale(1.1);
  box-shadow:0 6px 28px rgba(168,85,247,.65),0 0 0 8px rgba(168,85,247,.12);
  animation:none;
}
.fkz-chatbot-toggle svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@keyframes fkz-pulse{
  0%,100%{box-shadow:0 4px 20px rgba(168,85,247,.45),0 0 0 0 rgba(168,85,247,.25);}
  50%{box-shadow:0 4px 20px rgba(168,85,247,.55),0 0 0 10px rgba(168,85,247,0);}
}
@media(prefers-reduced-motion:reduce){.fkz-chatbot-toggle{animation:none;}}

/* ── Panel ────────────────────────────────────────────── */
.fkz-chatbot-panel{
  position:absolute;bottom:70px;right:0;
  width:340px;max-height:500px;
  background:#0d0a14;
  border:1px solid rgba(168,85,247,.25);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(168,85,247,.1),0 0 40px rgba(168,85,247,.08);
  display:flex;flex-direction:column;overflow:hidden;
  animation:fkz-slideup .28s cubic-bezier(.2,.8,.4,1);
}
.fkz-chatbot-panel--hidden{display:none;}
@keyframes fkz-slideup{
  from{opacity:0;transform:translateY(20px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* ── Header ───────────────────────────────────────────── */
.fkz-chatbot-header{
  background:linear-gradient(135deg,#1a0d2e 0%,#220f3a 60%,#1a0d2e 100%);
  border-bottom:1px solid rgba(168,85,247,.2);
  padding:12px 14px;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
}
.fkz-chatbot-header-info{display:flex;align-items:center;gap:10px;min-width:0;}
.fkz-chatbot-header-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  box-shadow:0 0 12px rgba(168,85,247,.5);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fkz-chatbot-header-avatar svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.fkz-chatbot-header-text{min-width:0;}
.fkz-chatbot-header-title{
  font-family:'Bebas Neue','Source Sans 3',sans-serif;
  font-size:16px;letter-spacing:2px;
  color:#fff;display:block;line-height:1;
}
.fkz-chatbot-header-sub{
  font-size:11px;color:#c084fc;
  font-weight:500;letter-spacing:.5px;
  display:block;margin-top:2px;
}
.fkz-chatbot-header-status{
  width:7px;height:7px;border-radius:50%;
  background:#22c55e;flex-shrink:0;
  box-shadow:0 0 6px rgba(34,197,94,.7);
  animation:fkz-blink 2s ease-in-out infinite;
}
@keyframes fkz-blink{0%,100%{opacity:1;}50%{opacity:.4;}}
.fkz-chatbot-close{
  background:none!important;border:none!important;
  color:rgba(255,255,255,.7);
  font-size:20px;cursor:pointer;padding:0!important;line-height:1;
  width:26px!important;height:26px!important;
  min-width:26px!important;max-width:26px!important;
  box-sizing:content-box!important;
  display:flex!important;align-items:center;justify-content:center;
  border-radius:50%;flex-shrink:0;
  transition:background .15s,color .15s;
  margin:0!important;
}
.fkz-chatbot-close:hover{background:rgba(255,255,255,.1);color:#fff;}

/* ── Messages area ────────────────────────────────────── */
.fkz-chatbot-messages{
  flex:1;overflow-y:auto;
  padding:14px;
  background:#0d0a14;
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(168,85,247,.3) transparent;
}
.fkz-chatbot-messages::-webkit-scrollbar{width:4px;}
.fkz-chatbot-messages::-webkit-scrollbar-thumb{background:rgba(168,85,247,.3);border-radius:2px;}

/* Bot message */
.fkz-chatbot-msg{display:flex;}
.fkz-chatbot-msg p{
  margin:0;padding:10px 14px;
  border-radius:4px 16px 16px 16px;
  max-width:88%;
  font-size:13.5px;line-height:1.5;
  word-wrap:break-word;
}
.fkz-chatbot-msg--bot p{
  background:#1a1527;
  border:1px solid rgba(168,85,247,.18);
  color:#e5e0f0;
}
/* User message */
.fkz-chatbot-msg--user{justify-content:flex-end;}
.fkz-chatbot-msg--user p{
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;
  border-radius:16px 4px 16px 16px;
  box-shadow:0 4px 14px rgba(168,85,247,.3);
}

/* Image bubble */
.fkz-chatbot-image{
  background:#1a1527;
  border:1px solid rgba(168,85,247,.18);
  border-radius:4px 16px 16px 16px;
  padding:8px;
  font-size:13px;width:100%;box-sizing:border-box;
  display:flex;justify-content:center;
}
.fkz-chatbot-image img{max-width:100%;height:auto;display:block;border-radius:10px;}

/* Products list */
.fkz-chatbot-products{
  background:#1a1527;
  border:1px solid rgba(168,85,247,.18);
  border-radius:4px 16px 16px 16px;
  padding:11px 14px;
  font-size:13px;width:100%;box-sizing:border-box;
}
.fkz-chatbot-products strong{
  display:block;margin-bottom:8px;
  font-family:'Bebas Neue',sans-serif;
  font-size:13px;letter-spacing:2px;
  color:#a855f7;
}
.fkz-chatbot-products ul{list-style:none;padding:0;margin:0;}
.fkz-chatbot-products li{
  padding:7px 0;
  border-bottom:1px solid rgba(168,85,247,.1);
  line-height:1.4;
}
.fkz-chatbot-products li:last-child{border-bottom:none;}
.fkz-chatbot-products a{
  color:#d4a017;text-decoration:none;font-weight:600;
  transition:color .15s;
}
.fkz-chatbot-products a:hover{color:#f0b820;text-decoration:underline;}
.fkz-chatbot-products small{color:rgba(255,255,255,.6);font-size:11.5px;}

/* ── Input area ───────────────────────────────────────── */
.fkz-chatbot-input-wrap{
  display:flex;gap:8px;padding:10px 12px;
  border-top:1px solid rgba(168,85,247,.15);
  background:#110d1c;
}
.fkz-chatbot-input{
  flex:1;padding:9px 13px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(168,85,247,.2);
  border-radius:20px;
  font-size:13.5px;color:#e5e0f0;
  font-family:'Source Sans 3',sans-serif;
  outline:none;
  transition:border-color .2s,background .2s;
}
.fkz-chatbot-input::placeholder{color:rgba(255,255,255,.3);}
.fkz-chatbot-input:focus{
  border-color:#a855f7;
  background:rgba(168,85,247,.07);
  box-shadow:0 0 0 3px rgba(168,85,247,.12);
}
.fkz-chatbot-send{
  padding:9px 15px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;border:none;border-radius:20px;
  font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Source Sans 3',sans-serif;
  white-space:nowrap;letter-spacing:.3px;
  transition:opacity .18s,transform .18s,box-shadow .18s;
  box-shadow:0 4px 14px rgba(168,85,247,.35);
}
.fkz-chatbot-send:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 18px rgba(168,85,247,.5);}
.fkz-chatbot-send:active{transform:scale(.97);}
.fkz-chatbot-send:disabled{
  background:rgba(255,255,255,.1);
  box-shadow:none;cursor:not-allowed;opacity:.5;
  transform:none;
}

/* ── Typing dots ──────────────────────────────────────── */
.fkz-chatbot-dot{
  display:inline-block;width:7px;height:7px;
  background:#a855f7;border-radius:50%;margin:0 2px;
  animation:fkz-dot-pulse 1.4s infinite;
}
.fkz-chatbot-dot:nth-child(2){animation-delay:.2s;}
.fkz-chatbot-dot:nth-child(3){animation-delay:.4s;}
@keyframes fkz-dot-pulse{
  0%,80%,100%{opacity:.25;transform:scale(.75);}
  40%{opacity:1;transform:scale(1);}
}

/* ── Quick reply buttons ─────────────────────────────── */
.fkz-chatbot-buttons{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:2px 0 4px;align-self:flex-start;max-width:100%;
}
.fkz-chatbot-btn{
  background:transparent;
  border:1.5px solid rgba(168,85,247,.35);
  border-radius:20px;color:#c084fc;
  font-size:12px;font-weight:600;padding:5px 12px;
  cursor:pointer;font-family:'Source Sans 3',sans-serif;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
  white-space:nowrap;line-height:1.3;letter-spacing:.2px;
}
.fkz-chatbot-btn:hover{
  background:rgba(168,85,247,.15);
  border-color:#a855f7;color:#e9d5ff;
  box-shadow:0 0 10px rgba(168,85,247,.2);
}
.fkz-chatbot-btn:active{transform:scale(.97);}

/* ── Suggestion chips ─────────────────────────────────── */
.fkz-chatbot-suggestions{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  padding:2px 0;align-self:flex-start;max-width:100%;
}
.fkz-chatbot-suggestions-label{
  font-size:10px;color:#a855f7;
  font-weight:600;letter-spacing:1px;text-transform:uppercase;
  margin-right:2px;white-space:nowrap;
}
.fkz-chatbot-suggestion-chip{
  background:rgba(168,85,247,.08);
  border:1px solid rgba(168,85,247,.2);
  border-radius:14px;color:rgba(255,255,255,.5);
  font-size:11.5px;padding:3px 10px;
  cursor:pointer;font-family:'Source Sans 3',sans-serif;
  transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;line-height:1.4;
}
.fkz-chatbot-suggestion-chip:hover{
  background:rgba(168,85,247,.18);
  color:#e9d5ff;border-color:rgba(168,85,247,.45);
}
.fkz-chatbot-suggestion-chip:active{transform:scale(.97);}

/* ── Emoji prefix ─────────────────────────────────────── */
.fkz-chatbot-emoji{font-style:normal;margin-right:2px;}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:600px){
  .fkz-chatbot{bottom:16px;right:16px;}
  .fkz-chatbot-panel{width:calc(100vw - 32px);max-height:65vh;}
}
@media(max-width:400px){
  .fkz-chatbot-btn{font-size:11px;padding:4px 9px;}
  .fkz-chatbot-suggestion-chip{font-size:11px;padding:3px 8px;}
}