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

/* ── LAUNCHER ──
   A clean circular launcher button: chat-bubble icon in the brand's
   blue-to-teal gradient, swapping to a close (×) icon when the window
   is open. No photography dependency — pure SVG/CSS so it always
   renders correctly regardless of what's in img/. */
#chat-toggle{
  position:fixed;bottom:1.25rem;right:1.25rem;z-index:9920;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,#14328F,#12A88C);
  border:none;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -6px rgba(20,50,143,.45);
  transition:transform .2s,box-shadow .2s;
  animation:ctBounce 4s ease-in-out infinite;
}
#chat-toggle:hover{transform:scale(1.06);box-shadow:0 14px 30px -6px rgba(20,50,143,.55);}
#chat-toggle .ct-icon{width:26px;height:26px;display:block;pointer-events:none;}
#chat-toggle .ct-icon-close{display:none;}
#chat-toggle.open .ct-icon-chat{display:none;}
#chat-toggle.open .ct-icon-close{display:block;}
#chat-toggle.open{animation:none;}
#chat-toggle .ct-badge{
  position:absolute;top:-2px;right:-2px;
  width:19px;height:19px;border-radius:50%;
  background:#14328F;color:#0D2168;
  font-size:.64rem;font-weight:800;font-family:var(--font-body);
  display:flex;align-items:center;justify-content:center;
  border:2px solid #FFFFFF;
  animation:ctPulse 2s infinite;
}
.ct-label{display:none;}
@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(18,168,140,.5);}
  50%{box-shadow:0 0 0 5px rgba(18,168,140,0);}
}

/* ── BACKDROP ──
   Dims the page behind the chat modal (click it to close, like any
   standard modal) — also what makes a screen-centered window feel
   intentional rather than like a stray floating box. */
#chat-backdrop{
  position:fixed;inset:0;z-index:9919;
  background:rgba(8,17,54,.6);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
#chat-backdrop.open{opacity:1;pointer-events:all;}

/* ── CHAT WINDOW ──
   Opens centered on screen at a real, comfortable size — not a small
   corner popover — so a whole conversation is actually easy to read. */
#chat-window{
  position:fixed;top:50%;left:50%;z-index:9921;
  width:min(600px, 94vw);
  height:min(720px, 88vh);
  background:#FFFFFF;
  border:none;
  border-radius:20px;
  display:flex;flex-direction:column;
  box-shadow:0 40px 100px rgba(4,7,30,.45);
  transform:translate(-50%,-50%) scale(.95);
  opacity:0;pointer-events:none;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
#chat-window.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all;}

/* ── HEADER ──
   A solid dark navy panel — deliberately NOT a pale tint of the page's
   own cream/gold background, so it reads as a clear, distinct app bar
   instead of blending into whatever section happens to sit behind the
   modal. */
.chat-hdr{
  background:linear-gradient(135deg,#0D2168 0%,#123078 100%);
  border-bottom:none;
  padding:1.1rem 1.2rem;display:flex;align-items:center;gap:.85rem;flex-shrink:0;
}
.chat-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#12A88C,#0C7F69);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;overflow:hidden;
  border:2px solid rgba(255,255,255,.18);
}
.chat-avatar svg{width:20px;height:20px;color:#fff;}
.chat-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.chat-avatar::after{
  content:'';position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;
  background:#22C55E;border:2px solid #123078;
}
.chat-hdr-info{flex:1;min-width:0;}
.chat-hdr-name{font-family:var(--font-display);font-size:1rem;font-weight:700;color:#FFFFFF;letter-spacing:.01em;}
.chat-hdr-status{font-size:.72rem;color:#4ADE80;margin-top:3px;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:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;font-size:.9rem;
}
.chat-close:hover{background:#12A88C;border-color:#12A88C;}

/* ── VOICE CONTROLS (header) ── */
.chat-voice-controls{display:flex;align-items:center;gap:.4rem;flex-shrink:0;}
.chat-lang-select{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:.68rem;font-family:var(--font-body);border-radius:8px;
  padding:.3rem .4rem;cursor:pointer;max-width:74px;outline:none;
}
.chat-lang-select option{background:#123078;color:#fff;}
.chat-lang-select:focus{border-color:var(--gold);}
.chat-autospeak-btn{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);color:#fff;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(255,255,255,.18);}
.chat-autospeak-btn.active{background:var(--gold);border-color:var(--gold);color:#fff;}

/* ── 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(18,168,140,.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,#12A88C,#0C7F69);
  display:flex;align-items:center;justify-content:center;
}
.msg-av svg{width:14px;height:14px;color:#fff;}
.msg.user .msg-av{background:#DCE6F7;border:1px solid #E1E5EB;}
.msg.user .msg-av svg{width:13px;height:13px;color:#0D2168;}

.msg-bubble{
  padding:.6rem .9rem;border-radius:14px;font-size:.83rem;line-height:1.55;
  max-width:84%;word-break:break-word;color:#16233F;
}
.msg.bot .msg-bubble{background:#FFFFFF;border:1px solid #E1E5EB;border-bottom-left-radius:4px;}
.msg.user .msg-bubble{background:rgba(18,168,140,.08);border:1px solid rgba(18,168,140,.22);border-bottom-right-radius:4px;color:#16233F;}
.msg-time{font-size:.6rem;color:#8A8D97;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:#FFFFFF;
  border:1px solid #E1E5EB;border-radius:14px;border-bottom-left-radius:4px;width:fit-content;
}
.typing-dot{width:6px;height:6px;border-radius:50%;background:#12A88C;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(20,50,143,.14);border:1px solid rgba(13,33,104,.35);
  border-radius:50px;font-size:.74rem;font-weight:600;color:#0D2168;cursor:pointer;
  transition:all .2s;white-space:nowrap;font-family:var(--font-body);
}
.chip:hover{background:rgba(20,50,143,.26);border-color:rgba(13,33,104,.6);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:#FFFFFF;border:1px solid #E1E5EB;
  border-radius:10px;cursor:pointer;transition:all .2s;font-family:var(--font-body);
  color:#16233F;font-size:.76rem;font-weight:500;text-align:left;
}
.cat-btn:hover{background:#DCE6F7;border-color:#14328F;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 #E1E5EB;
  display:flex;gap:.55rem;align-items:center;background:#FFFFFF;flex-shrink:0;
}
#chat-input{
  flex:1;background:#fff;border:1px solid #E1E5EB;
  border-radius:50px;padding:.55rem 1rem;color:#16233F;font-family:var(--font-body);
  font-size:.82rem;outline:none;transition:border-color .2s;
}
#chat-input::placeholder{color:#A9ABB4;}
#chat-input:focus{border-color:#14328F;}
#chat-send{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#12A88C,#0C7F69);
  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(22,35,63,.05);border:1px solid rgba(22,35,63,.12);
  color:#5B6472;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(18,168,140,.1);color:#12A88C;border-color:rgba(18,168,140,.3);}
#chat-mic.listening{
  background:linear-gradient(135deg,#12A88C,#0C7F69);color:#fff;border-color:transparent;
  animation:micPulse 1.4s ease-in-out infinite;
}
@keyframes micPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(18,168,140,.5);}
  50%{box-shadow:0 0 0 8px rgba(18,168,140,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:#A9ABB4;padding:.3rem 0 .1rem;flex-shrink:0;}

/* ── ANSWER BOX ── */
.answer-box{
  background:#FFFFFF;border:1px solid #E1E5EB;
  border-radius:10px;padding:.85rem .95rem;font-size:.81rem;color:#16233F;line-height:1.6;
}
.answer-box ul{padding-left:1.05rem;margin:.4rem 0 0;}
.answer-box li{margin-bottom:.28rem;color:#5B6472;}
.answer-box strong{color:#12A88C;}
.answer-box a{color:#0D2168;}

/* ── RESULTS LIST (multiple matches) ── */
.results-list{display:flex;flex-direction:column;gap:.35rem;}
.result-item{
  padding:.55rem .85rem;background:#FFFFFF;border:1px solid #E1E5EB;
  border-radius:8px;cursor:pointer;font-size:.78rem;font-weight:500;
  transition:all .2s;color:#16233F;display:flex;align-items:center;gap:.55rem;
}
.result-item:hover{background:#DCE6F7;border-color:#14328F;color:#0D2168;}
.result-item .ri-ico{font-size:.85rem;opacity:.7;flex-shrink:0;}

@media (max-width:480px){
  #chat-toggle{right:1rem;bottom:1rem;width:54px;height:54px;}
  #chat-toggle .ct-icon{width:23px;height:23px;}
  .chat-lang-select{max-width:56px;font-size:.62rem;padding:.28rem .3rem;}
}