/* ════════════════════════════════════════════════════
   CHATBOT WIDGET
════════════════════════════════════════════════════ */

/* ── TOGGLE BUTTON ── */
#chat-toggle {
  position:fixed; bottom:2rem; right:2rem; z-index:9920;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,#00D4AA,#00B8F5);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  box-shadow:0 6px 28px rgba(0,212,170,.5);
  transition:all .35s;
  animation:ctBounce 4s ease-in-out infinite;
}
#chat-toggle:hover { transform:scale(1.12); box-shadow:0 10px 36px rgba(0,212,170,.65); }
#chat-toggle .ct-badge {
  position:absolute; top:-4px; right:-4px;
  width:18px; height:18px; border-radius:50%;
  background:#FF4444; color:#fff;
  font-size:.6rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--dark);
  animation:pulse 2s infinite;
}
.ct-label {
  position:absolute; right:68px; bottom:50%; transform:translateY(50%); white-space:nowrap;
  background:rgba(2,11,24,.92); color:var(--teal);
  font-size:.68rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.28rem .75rem;
  border-radius:50px; border:1px solid rgba(0,212,170,.3);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .3s;
}
#chat-toggle:hover .ct-label { opacity:1; }
@keyframes ctBounce {
  0%,100% { transform:translateY(0); }
  40%      { transform:translateY(-7px); }
  60%      { transform:translateY(-3px); }
}

/* ── CHAT WINDOW ── */
#chat-window {
  position:fixed; bottom:5.5rem; right:2rem; z-index:9921;
  width:390px; max-width:calc(100vw - 1.5rem);
  height:580px; max-height:calc(100vh - 9rem);
  background:var(--navy-2);
  border:1px solid rgba(0,212,170,.25);
  border-radius:20px;
  display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 50px rgba(0,212,170,.08);
  transform:translateY(20px) scale(.96);
  opacity:0; pointer-events:none;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
#chat-window.open {
  transform:translateY(0) scale(1);
  opacity:1; pointer-events:all;
}

/* ── CHAT HEADER ── */
.chat-hdr {
  background:linear-gradient(135deg,rgba(0,212,170,.18),rgba(0,184,245,.1));
  border-bottom:1px solid rgba(0,212,170,.2);
  padding:1rem 1.2rem;
  display:flex; align-items:center; gap:.85rem;
  flex-shrink:0;
}
.chat-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0; position:relative;
}
.chat-avatar::after {
  content:''; position:absolute; bottom:1px; right:1px;
  width:10px; height:10px; border-radius:50%;
  background:#00e676; border:2px solid var(--navy-2);
}
.chat-hdr-info { flex:1 }
.chat-hdr-name {
  font-family:var(--fh); font-size:.95rem; font-weight:700; line-height:1;
}
.chat-hdr-status {
  font-size:.7rem; color:#00e676; margin-top:3px;
  display:flex; align-items:center; gap:4px;
}
.chat-hdr-status::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:#00e676; animation:pulse 2s infinite;
  display:inline-block;
}
.chat-close {
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  color:var(--muted); cursor:pointer; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s;
}
.chat-close:hover { background:rgba(255,80,80,.2); color:#ff5050; }

/* ── MESSAGES AREA ── */
.chat-msgs {
  flex:1; overflow-y:auto; padding:1rem;
  display:flex; flex-direction:column; gap:.8rem;
  scroll-behavior:smooth;
}
.chat-msgs::-webkit-scrollbar { width:4px; }
.chat-msgs::-webkit-scrollbar-track { background:transparent; }
.chat-msgs::-webkit-scrollbar-thumb { background:rgba(0,212,170,.25); border-radius:4px; }

/* ── MESSAGE BUBBLES ── */
.msg { display:flex; gap:.6rem; align-items:flex-end; max-width:100%; }
.msg.bot  { align-self:flex-start; }
.msg.user { align-self:flex-end;   flex-direction:row-reverse; }

.msg-av {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem;
}
.msg.user .msg-av {
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  border:1px solid var(--border);
}

.msg-bubble {
  padding:.65rem 1rem; border-radius:16px;
  font-size:.84rem; line-height:1.55;
  max-width:82%; word-break:break-word;
  animation:popIn .3s ease;
}
.msg.bot  .msg-bubble {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-bottom-left-radius:4px;
  color:var(--white);
}
.msg.user .msg-bubble {
  background:linear-gradient(135deg,rgba(0,212,170,.22),rgba(0,184,245,.15));
  border:1px solid rgba(0,212,170,.3);
  border-bottom-right-radius:4px;
  color:var(--white);
}
.msg-time {
  font-size:.6rem; color:var(--muted);
  margin-top:3px; padding:0 2px;
  align-self:flex-end;
}
.msg.user .msg-time { text-align:right; }

/* ── TYPING INDICATOR ── */
.typing-indicator {
  display:flex; gap:.5rem; padding:.65rem 1rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; border-bottom-left-radius:4px;
  width:fit-content; animation:popIn .3s ease;
}
.typing-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--teal); opacity:.4;
}
.typing-dot:nth-child(1) { animation:typingBounce 1.2s .0s infinite; }
.typing-dot:nth-child(2) { animation:typingBounce 1.2s .2s infinite; }
.typing-dot:nth-child(3) { animation:typingBounce 1.2s .4s infinite; }
@keyframes typingBounce {
  0%,60%,100% { transform:translateY(0); opacity:.4; }
  30%          { transform:translateY(-6px); opacity:1; }
}

/* ── QUICK REPLIES / CHIPS ── */
.chips-wrap {
  display:flex; flex-wrap:wrap; gap:.45rem;
  padding:.4rem 0 .2rem; animation:fadeUp .3s ease;
}
.chip {
  padding:.38rem .85rem;
  background:rgba(0,212,170,.07);
  border:1px solid rgba(0,212,170,.25);
  border-radius:50px; font-size:.76rem; font-weight:600;
  color:var(--teal); cursor:pointer;
  transition:all .25s; white-space:nowrap;
  font-family:var(--fb);
}
.chip:hover {
  background:rgba(0,212,170,.18);
  border-color:rgba(0,212,170,.55);
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,212,170,.2);
}

/* ── CATEGORY BUTTONS ── */
.cat-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.5rem; animation:fadeUp .3s ease;
}
.cat-btn {
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .9rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:12px; cursor:pointer;
  transition:all .28s; font-family:var(--fb);
  color:var(--white); font-size:.78rem; font-weight:500;
}
.cat-btn:hover {
  background:rgba(0,212,170,.1);
  border-color:rgba(0,212,170,.35);
  transform:translateY(-2px);
}
.cat-btn .cat-ico { font-size:1.1rem; }

/* ── INPUT AREA ── */
.chat-input-wrap {
  padding:.85rem 1rem;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; gap:.6rem; align-items:center;
  background:rgba(0,0,0,.2); flex-shrink:0;
}
#chat-input {
  flex:1; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:50px; padding:.55rem 1rem;
  color:var(--white); font-family:var(--fb);
  font-size:.84rem; outline:none;
  transition:border-color .3s, box-shadow .3s;
}
#chat-input::placeholder { color:var(--muted); }
#chat-input:focus {
  border-color:rgba(0,212,170,.45);
  box-shadow:0 0 0 3px rgba(0,212,170,.07);
}
#chat-send {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  border:none; cursor:pointer; color:var(--dark);
  font-size:1rem; display:flex; align-items:center;
  justify-content:center; transition:all .28s;
  flex-shrink:0;
}
#chat-send:hover { transform:scale(1.1); box-shadow:0 0 16px rgba(0,212,170,.45); }
.chat-footer-note {
  text-align:center; font-size:.6rem; color:var(--muted);
  padding:.3rem 0 .1rem; flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.04);
}

/* ── ANSWER DETAIL BOX ── */
.answer-box {
  background:rgba(0,212,170,.05);
  border:1px solid rgba(0,212,170,.18);
  border-radius:12px; padding:.9rem 1rem;
  font-size:.82rem; color:var(--white);
  line-height:1.65; animation:popIn .3s ease;
}
.answer-box ul { padding-left:1.1rem; margin-top:.5rem; }
.answer-box li { margin-bottom:.3rem; color:var(--muted); }
.answer-box strong { color:var(--teal); }

/* ── SEARCH RESULTS LIST ── */
.results-list {
  display:flex; flex-direction:column; gap:.4rem;
  animation:fadeUp .3s ease;
}
.result-item {
  padding:.6rem .9rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px; cursor:pointer;
  font-size:.8rem; font-weight:500;
  transition:all .25s; color:var(--white);
  display:flex; align-items:center; gap:.6rem;
}
.result-item:hover {
  background:rgba(0,212,170,.1);
  border-color:rgba(0,212,170,.3);
  color:var(--teal);
}
.result-item .ri-ico { font-size:.9rem; opacity:.7; }
.no-results {
  font-size:.82rem; color:var(--muted);
  text-align:center; padding:.5rem 0;
}

/* mobile */
@media(max-width:480px){
  #chat-window { right:.5rem; left:unset; width:330px; max-width:calc(100vw - 1.5rem); bottom:5.5rem; }
  #chat-toggle { right:.75rem; bottom:1rem; }
}