/* ════════════════════════════════════════════════════
   CHATBOT WIDGET — floating rule-based assistant
════════════════════════════════════════════════════ */

/* ── LAUNCHER BUTTON ── */
#chat-toggle{
  position:fixed;bottom:2rem;right:2rem;z-index:9920;
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#E31E24,#B8151A);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 28px rgba(227,30,36,.5);
  transition:all .35s;
  animation:ctBounce 4s ease-in-out infinite;
}
#chat-toggle svg{width:26px;height:26px;color:#fff;}
#chat-toggle:hover{transform:scale(1.12);box-shadow:0 10px 36px rgba(227,30,36,.65);}
#chat-toggle .ct-badge{
  position:absolute;top:-4px;right:-4px;
  width:19px;height:19px;border-radius:50%;
  background:#FFB800;color:#17181C;
  font-size:.64rem;font-weight:800;font-family:var(--font-body);
  display:flex;align-items:center;justify-content:center;
  border:2px solid #F7F6F3;
  animation:ctPulse 2s infinite;
}
.ct-label{
  position:absolute;right:68px;bottom:50%;transform:translateY(50%);
  background:rgba(20,21,26,.94);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  padding:.4rem .85rem;border-radius:50px;border:1px solid rgba(255,255,255,.1);
  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);}
}
@keyframes ctPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,184,0,.5);}
  50%{box-shadow:0 0 0 5px rgba(255,184,0,0);}
}

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

/* ── HEADER ── */
.chat-hdr{
  background:linear-gradient(135deg,rgba(227,30,36,.22),rgba(184,21,26,.12));
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:1rem 1.1rem;display:flex;align-items:center;gap:.8rem;flex-shrink:0;
}
.chat-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#E31E24,#B8151A);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;
}
.chat-avatar svg{width:20px;height:20px;color:#fff;}
.chat-avatar::after{
  content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;
  background:#22C55E;border:2px solid #17181C;
}
.chat-hdr-info{flex:1;min-width:0;}
.chat-hdr-name{font-family:var(--font-display);font-size:.92rem;font-weight:700;color:#fff;letter-spacing:.01em;}
.chat-hdr-status{font-size:.7rem;color:#4ADE80;margin-top:2px;display:flex;align-items:center;gap:4px;}
.chat-hdr-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#4ADE80;animation:ctPulse2 2s infinite;display:inline-block;}
@keyframes ctPulse2{0%,100%{opacity:1;}50%{opacity:.4;}}
.chat-close{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);color:#9B9DA8;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;font-size:.9rem;
}
.chat-close:hover{background:rgba(227,30,36,.2);color:#FF6B6B;}

/* ── VOICE CONTROLS (header) ── */
.chat-voice-controls{display:flex;align-items:center;gap:.4rem;flex-shrink:0;}
.chat-lang-select{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#E7E7EA;font-size:.68rem;font-family:var(--font-body);border-radius:8px;
  padding:.3rem .4rem;cursor:pointer;max-width:74px;outline:none;
}
.chat-lang-select:focus{border-color:rgba(227,30,36,.45);}
.chat-autospeak-btn{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);color:#9B9DA8;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;
}
.chat-autospeak-btn svg{width:14px;height:14px;}
.chat-autospeak-btn:hover{background:rgba(227,30,36,.15);color:#FF8A8E;}
.chat-autospeak-btn.active{background:rgba(227,30,36,.28);border-color:rgba(227,30,36,.5);color:#FF8A8E;}

/* ── MESSAGES ── */
.chat-msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;scroll-behavior:smooth;}
.chat-msgs::-webkit-scrollbar{width:4px;}
.chat-msgs::-webkit-scrollbar-track{background:transparent;}
.chat-msgs::-webkit-scrollbar-thumb{background:rgba(227,30,36,.3);border-radius:4px;}

.msg{display:flex;gap:.55rem;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:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#E31E24,#B8151A);
  display:flex;align-items:center;justify-content:center;
}
.msg-av svg{width:14px;height:14px;color:#fff;}
.msg.user .msg-av{background:var(--asphalt-3, #26282F);border:1px solid rgba(255,255,255,.1);}
.msg.user .msg-av svg{width:13px;height:13px;color:#D8D9DE;}

.msg-bubble{
  padding:.6rem .9rem;border-radius:14px;font-size:.83rem;line-height:1.55;
  max-width:84%;word-break:break-word;color:#E7E7EA;
}
.msg.bot .msg-bubble{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-bottom-left-radius:4px;}
.msg.user .msg-bubble{background:rgba(227,30,36,.18);border:1px solid rgba(227,30,36,.3);border-bottom-right-radius:4px;color:#fff;}
.msg-time{font-size:.6rem;color:#666975;margin-top:2px;padding:0 2px;}
.msg.user .msg-time{text-align:right;}

/* ── TYPING INDICATOR ── */
.typing-indicator{
  display:flex;gap:.4rem;padding:.6rem .9rem;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);border-radius:14px;border-bottom-left-radius:4px;width:fit-content;
}
.typing-dot{width:6px;height:6px;border-radius:50%;background:#E31E24;opacity:.5;}
.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:.5;}30%{transform:translateY(-5px);opacity:1;}}

/* ── QUICK-REPLY CHIPS ── */
.chips-wrap{display:flex;flex-wrap:wrap;gap:.4rem;padding:.3rem 0 .1rem;}
.chip{
  padding:.36rem .8rem;background:rgba(227,30,36,.08);border:1px solid rgba(227,30,36,.28);
  border-radius:50px;font-size:.74rem;font-weight:600;color:#FF8A8E;cursor:pointer;
  transition:all .2s;white-space:nowrap;font-family:var(--font-body);
}
.chip:hover{background:rgba(227,30,36,.18);border-color:rgba(227,30,36,.5);transform:translateY(-1px);}

/* ── CATEGORY GRID ── */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.cat-btn{
  display:flex;align-items:center;gap:.55rem;padding:.6rem .8rem;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;cursor:pointer;transition:all .2s;font-family:var(--font-body);
  color:#E7E7EA;font-size:.76rem;font-weight:500;text-align:left;
}
.cat-btn:hover{background:rgba(227,30,36,.1);border-color:rgba(227,30,36,.35);transform:translateY(-2px);}
.cat-btn .cat-ico{font-size:1.05rem;flex-shrink:0;}

/* ── INPUT AREA ── */
.chat-input-wrap{
  padding:.8rem .9rem;border-top:1px solid rgba(255,255,255,.08);
  display:flex;gap:.55rem;align-items:center;background:#141519;flex-shrink:0;
}
#chat-input{
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:50px;padding:.55rem 1rem;color:#fff;font-family:var(--font-body);
  font-size:.82rem;outline:none;transition:border-color .2s;
}
#chat-input::placeholder{color:#666975;}
#chat-input:focus{border-color:rgba(227,30,36,.45);}
#chat-send{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#E31E24,#B8151A);
  border:none;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;
}
#chat-send svg{width:16px;height:16px;}
#chat-send:hover{transform:scale(1.08);}

/* ── MIC BUTTON ── */
#chat-mic{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#9B9DA8;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
#chat-mic svg{width:16px;height:16px;}
#chat-mic:hover{background:rgba(227,30,36,.15);color:#FF8A8E;border-color:rgba(227,30,36,.35);}
#chat-mic.listening{
  background:linear-gradient(135deg,#E31E24,#B8151A);color:#fff;border-color:transparent;
  animation:micPulse 1.4s ease-in-out infinite;
}
@keyframes micPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(227,30,36,.5);}
  50%{box-shadow:0 0 0 8px rgba(227,30,36,0);}
}

/* ── PER-MESSAGE SPEAKER ICON ── */
.msg-speak-btn{
  background:none;border:none;cursor:pointer;font-size:.68rem;opacity:.55;
  margin-left:5px;padding:0;transition:opacity .2s;vertical-align:middle;
}
.msg-speak-btn:hover{opacity:1;}
.chat-footer-note{text-align:center;font-size:.6rem;color:#666975;padding:.3rem 0 .1rem;flex-shrink:0;}

/* ── ANSWER BOX ── */
.answer-box{
  background:rgba(227,30,36,.05);border:1px solid rgba(227,30,36,.16);
  border-radius:10px;padding:.85rem .95rem;font-size:.81rem;color:#E7E7EA;line-height:1.6;
}
.answer-box ul{padding-left:1.05rem;margin:.4rem 0 0;}
.answer-box li{margin-bottom:.28rem;color:#B7B9C4;}
.answer-box strong{color:#FF8A8E;}
.answer-box a{color:#FFB800;}

/* ── RESULTS LIST (multiple matches) ── */
.results-list{display:flex;flex-direction:column;gap:.35rem;}
.result-item{
  padding:.55rem .85rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:8px;cursor:pointer;font-size:.78rem;font-weight:500;
  transition:all .2s;color:#E7E7EA;display:flex;align-items:center;gap:.55rem;
}
.result-item:hover{background:rgba(227,30,36,.1);border-color:rgba(227,30,36,.28);color:#FF8A8E;}
.result-item .ri-ico{font-size:.85rem;opacity:.7;flex-shrink:0;}

@media (max-width:480px){
  #chat-window{right:.5rem;left:.5rem;width:auto;bottom:5.5rem;}
  #chat-toggle{right:1rem;bottom:1rem;}
  .chat-lang-select{max-width:56px;font-size:.62rem;padding:.28rem .3rem;}
}