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

/* ── LAUNCHER ──
   Single pre-composed image (photo + "May I Help You?" speech bubble
   baked in together) — no separate HTML/CSS bubble needed anymore, it's
   all one picture. Just sized down and made clickable. */
#chat-toggle{
  position:fixed;bottom:0;right:.75rem;z-index:9920;
  background:none;border:none;cursor:pointer;padding:0;
  display:block;
  animation:ctBounce 4s ease-in-out infinite;
}
#chat-toggle .ct-mascot{
  height:190px;width:auto;display:block;pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(20,21,26,.25));
  transition:transform .25s;
}
#chat-toggle:hover .ct-mascot{transform:scale(1.05);}
#chat-toggle .ct-badge{
  position:absolute;top:2px;right:2px;
  width:19px;height:19px;border-radius:50%;
  background:#C9A84C;color:#12172B;
  font-size:.64rem;font-weight:800;font-family:var(--font-body);
  display:flex;align-items:center;justify-content:center;
  border:2px solid #FFFFFF;
}
#chat-toggle .ct-badge::before{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(255,184,0,.6);
  animation:ctPulse 2s ease-out infinite;
  pointer-events:none;
}
.ct-label{display:none;}
@keyframes ctBounce{
  0%,100%{transform:translateY(0);}
  40%{transform:translateY(-7px);}
  60%{transform:translateY(-3px);}
}
@keyframes ctPulse{
  0%{transform:scale(1);opacity:.6;}
  100%{transform:scale(1.7);opacity: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(10,12,22,.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(5,6,12,.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,#12172B 0%,#1D2545 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,#C8102E,#9C0D24);
  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 #1D2545;
}
.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:#C8102E;border-color:#C8102E;}

/* ── 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:#1D2545;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:#12172B;}

/* ── 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,#C8102E,#9C0D24);
  display:flex;align-items:center;justify-content:center;
}
.msg-av svg{width:14px;height:14px;color:#fff;}
.msg.user .msg-av{background:#F3E7C9;border:1px solid #EDE3CC;}
.msg.user .msg-av svg{width:13px;height:13px;color:#A8802E;}

.msg-bubble{
  padding:.6rem .9rem;border-radius:14px;font-size:.83rem;line-height:1.55;
  max-width:84%;word-break:break-word;color:#1A1B20;
}
.msg.bot .msg-bubble{background:#F7F4EC;border:1px solid #EDE3CC;border-bottom-left-radius:4px;}
.msg.user .msg-bubble{background:rgba(200,16,46,.08);border:1px solid rgba(200,16,46,.22);border-bottom-right-radius:4px;color:#1A1B20;}
.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:#F7F4EC;
  border:1px solid #EDE3CC;border-radius:14px;border-bottom-left-radius:4px;width:fit-content;
}
.typing-dot{width:6px;height:6px;border-radius:50%;background:#C8102E;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(201,168,76,.14);border:1px solid rgba(168,128,46,.35);
  border-radius:50px;font-size:.74rem;font-weight:600;color:#A8802E;cursor:pointer;
  transition:all .2s;white-space:nowrap;font-family:var(--font-body);
}
.chip:hover{background:rgba(201,168,76,.26);border-color:rgba(168,128,46,.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:#F7F4EC;border:1px solid #EDE3CC;
  border-radius:10px;cursor:pointer;transition:all .2s;font-family:var(--font-body);
  color:#1A1B20;font-size:.76rem;font-weight:500;text-align:left;
}
.cat-btn:hover{background:#F3E7C9;border-color:#C9A84C;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 #EDE3CC;
  display:flex;gap:.55rem;align-items:center;background:#FFFFFF;flex-shrink:0;
}
#chat-input{
  flex:1;background:#fff;border:1px solid #EDE3CC;
  border-radius:50px;padding:.55rem 1rem;color:#1A1B20;font-family:var(--font-body);
  font-size:.82rem;outline:none;transition:border-color .2s;
}
#chat-input::placeholder{color:#A9ABB4;}
#chat-input:focus{border-color:#C9A84C;}
#chat-send{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#C8102E,#9C0D24);
  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;position:relative;
  background:rgba(26,27,32,.05);border:1px solid rgba(26,27,32,.12);
  color:#6B6F7B;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(200,16,46,.1);color:#C8102E;border-color:rgba(200,16,46,.3);}
#chat-mic.listening{
  background:linear-gradient(135deg,#C8102E,#9C0D24);color:#fff;border-color:transparent;
}
#chat-mic.listening::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(227,30,36,.5);
  animation:micPulse 1.4s ease-out infinite;
  pointer-events:none;
}
@keyframes micPulse{
  0%{transform:scale(1);opacity:.6;}
  100%{transform:scale(1.7);opacity: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 #EDE3CC;
  border-radius:10px;padding:.85rem .95rem;font-size:.81rem;color:#1A1B20;line-height:1.6;
}
.answer-box ul{padding-left:1.05rem;margin:.4rem 0 0;}
.answer-box li{margin-bottom:.28rem;color:#6B6F7B;}
.answer-box strong{color:#C8102E;}
.answer-box a{color:#A8802E;}

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

@media (max-width:480px){
  #chat-toggle{right:.4rem;}
  #chat-toggle .ct-mascot{height:120px;}
  .chat-lang-select{max-width:56px;font-size:.62rem;padding:.28rem .3rem;}
}