/* ---------------------------------------------------------------
   CSIR AI — floating chat widget (button + popup panel)
--------------------------------------------------------------- */
.chatbot{position:fixed;right:22px;bottom:22px;z-index:200}

.chatbot__fab{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:15px 22px 15px 17px;border-radius:999px;border:0;
  background:linear-gradient(135deg,var(--navy) 0%,#0d2732 100%);color:#fff;
  font-family:var(--f-body);font-size:14px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 16px 36px rgba(18,59,74,.34);cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .25s var(--ease),visibility .25s;
}
.chatbot__fab:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(18,59,74,.4)}
/* Static two-tone hairline tracing the button's exact edge — no motion. */
.chatbot__fab::before{
  content:"";position:absolute;inset:0;border-radius:999px;padding:1.5px;
  background:linear-gradient(135deg,var(--orange) 0%,rgba(255,255,255,.35) 50%,var(--orange) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.chatbot__fab-icon{width:21px;height:21px;fill:currentColor;flex:none}
.chatbot__fab-dot{
  position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;
  background:var(--orange);border:2.5px solid var(--paper);
}
.chatbot.is-open .chatbot__fab{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.9)}

.chatbot__panel{
  position:absolute;right:0;bottom:calc(100% + 16px);
  width:384px;max-width:calc(100vw - 32px);
  height:min(600px,calc(100vh - 150px));
  display:none;flex-direction:column;
  background:var(--paper);border-radius:20px;overflow:hidden;
  box-shadow:0 34px 80px rgba(18,59,74,.3),0 0 0 1px rgba(18,59,74,.07);
  transform-origin:bottom right;
}
.chatbot.is-open .chatbot__panel{display:flex;animation:chatbot-in .32s var(--ease)}
@keyframes chatbot-in{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:none}
}

.chatbot__head{
  position:relative;display:flex;align-items:center;gap:12px;padding:18px 16px;
  background:linear-gradient(135deg,var(--navy) 0%,#0d2732 100%);color:#fff;flex:none;
  overflow:hidden;
}
.chatbot__head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120px 90px at 100% 0%,rgba(197,107,60,.35),transparent 70%);
}
.chatbot__head-avatar{
  position:relative;width:38px;height:38px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
.chatbot__head-text{position:relative;flex:1;min-width:0}
.chatbot__title{margin:0;font-family:var(--f-display);font-size:16px;font-weight:700;line-height:1.3}
.chatbot__subtitle{
  margin:3px 0 0;font-size:11.5px;color:rgba(255,255,255,.75);line-height:1.3;
  display:flex;align-items:center;gap:5px;
}
.chatbot__subtitle::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#4ade80;flex:none;
  box-shadow:0 0 0 3px rgba(74,222,128,.22);
}
.chatbot__close{
  position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.12);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.chatbot__close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}
.chatbot__close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.chatbot__body{
  flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;
  background:
    radial-gradient(600px 300px at 100% -10%,rgba(197,107,60,.05),transparent 60%),
    var(--paper);
}
.chatbot__msg{display:flex;animation:chatbot-msg-in .32s var(--ease)}
@keyframes chatbot-msg-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.chatbot__msg--user{justify-content:flex-end}
.chatbot__msg--bot{justify-content:flex-start}
.chatbot__bubble{
  max-width:84%;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;
}
.chatbot__msg--bot .chatbot__bubble{
  background:#fff;color:var(--ink);border-bottom-left-radius:5px;
  box-shadow:0 1px 2px rgba(18,59,74,.08),0 0 0 1px var(--line);
}
.chatbot__msg--user .chatbot__bubble{
  background:linear-gradient(135deg,var(--navy) 0%,#0d2732 100%);color:#fff;border-bottom-right-radius:5px;
}

.chatbot__typing{display:flex;align-items:center;gap:4px;padding:14px 16px}
.chatbot__typing span{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:chatbot-bounce 1.1s ease-in-out infinite;
}
.chatbot__typing span:nth-child(2){animation-delay:.15s}
.chatbot__typing span:nth-child(3){animation-delay:.3s}
@keyframes chatbot-bounce{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-4px);opacity:1}
}

.chatbot__link{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 15px;border-radius:14px;border-bottom-left-radius:5px;
  background:rgba(197,107,60,.1);color:var(--orange-dark);
  font-size:13px;font-weight:700;text-decoration:none;
  box-shadow:0 0 0 1px rgba(197,107,60,.22);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.chatbot__link:hover{background:rgba(197,107,60,.18);transform:translateX(2px)}
.chatbot__link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.chatbot__suggestions{
  display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px;flex:none;
  border-bottom:1px solid var(--line);background:var(--paper-alt);
}
.chatbot__suggestions:empty{padding:0;border-bottom:0}
.chatbot__chip{
  border:1px solid var(--line);background:#fff;color:var(--navy);
  padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.chatbot__chip:hover{
  background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(18,59,74,.22);
}

.chatbot__input{
  display:flex;align-items:center;gap:8px;padding:14px;flex:none;
  border-top:1px solid var(--line);background:#fff;
}
.chatbot__input input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;
  padding:12px 17px;font-family:var(--f-body);font-size:13.5px;color:var(--ink);
  background:var(--paper-alt);outline:none;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.chatbot__input input:focus{border-color:var(--orange);background:#fff}
.chatbot__input button{
  flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.chatbot__input button:hover{background:var(--orange-dark);transform:translateY(-1px) scale(1.04)}
.chatbot__input button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.chatbot__body::-webkit-scrollbar,.chatbot__suggestions::-webkit-scrollbar{width:5px}
.chatbot__body::-webkit-scrollbar-thumb,.chatbot__suggestions::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}

/* ---------------- Responsive ---------------- */
@media (max-width:640px){
  .chatbot{right:14px;bottom:14px}
  .chatbot__fab span{display:none}
  .chatbot__fab{padding:16px;border-radius:50%}
  .chatbot__fab-icon{width:23px;height:23px}
  .chatbot__panel{
    position:fixed;left:12px;right:12px;bottom:12px;
    width:auto;max-width:none;height:min(74vh,600px);
    border-radius:18px;
  }
}
@media (max-width:380px){
  .chatbot__panel{left:8px;right:8px;bottom:8px;height:72vh}
  .chatbot__bubble{max-width:88%}
}

@media (prefers-reduced-motion:reduce){
  .chatbot.is-open .chatbot__panel{animation:none}
  .chatbot__typing span{animation:none;opacity:.8}
  .chatbot__msg{animation:none}
}
