/* =========================================================
   CHICKOO ASSISTANT — floating knowledge bot
   Self-contained. Loaded on every page via includes/chatbot.php
   Sits bottom-LEFT, stacked above the WhatsApp float button.
   ========================================================= */

.cb-root{
  --cb-blue:#29B6F6; --cb-blue-d:#0288D1; --cb-navy:#14235A;
  --cb-coral:#FF6F61; --cb-green:#66BB6A; --cb-yellow:#FFCA28;
  font-family:'Mukta','Baloo 2',sans-serif;
}

/* ---------- Launcher ---------- */
.cb-launcher{
  position:fixed; left:22px; bottom:calc(88px + env(safe-area-inset-bottom,0px));
  z-index:1030; width:56px; height:56px; padding:0; border:none;
  border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,#4FC3F7,#0288D1);
  box-shadow:0 8px 22px rgba(2,136,209,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.cb-launcher::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(41,182,246,.45); animation:cbPulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes cbPulse{
  0%{ transform:scale(.9); opacity:.9; }
  70%{ transform:scale(1.25); opacity:0; }
  100%{ opacity:0; }
}
.cb-launcher:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 14px 30px rgba(2,136,209,.55); }
.cb-launcher img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:2.5px solid #fff; display:block;
}
.cb-launcher .cb-dot{
  position:absolute; top:-2px; right:-2px; width:16px; height:16px;
  background:var(--cb-coral); border:2px solid #fff; border-radius:50%;
  box-shadow:0 2px 6px rgba(230,74,59,.5);
}
.cb-root.cb-open .cb-launcher{ transform:scale(.85); opacity:.55; }
.cb-root.cb-open .cb-launcher::after{ display:none; }
.cb-root.cb-open .cb-launcher .cb-dot{ display:none; }

/* Greeting tooltip that pops once */
.cb-hint{
  position:fixed; left:88px; bottom:calc(100px + env(safe-area-inset-bottom,0px));
  z-index:1030; max-width:210px; background:#fff; color:var(--cb-navy);
  font-size:.86rem; font-weight:600; line-height:1.45;
  padding:.6rem .85rem; border-radius:14px 14px 14px 4px;
  box-shadow:0 10px 26px -8px rgba(20,35,90,.3); border:1px solid #E3F2FD;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.cb-hint.show{ opacity:1; transform:translateY(0); }

/* ---------- Panel ---------- */
.cb-panel{
  position:fixed; left:22px; bottom:calc(88px + env(safe-area-inset-bottom,0px));
  z-index:1031; width:360px; max-width:calc(100vw - 32px);
  height:min(540px, calc(100vh - 150px));
  background:#fff; border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 60px -18px rgba(20,35,90,.45), 0 2px 0 rgba(0,0,0,.04);
  border:1px solid rgba(41,182,246,.25);
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.96);
  transform-origin:bottom left;
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.4,.64,1), visibility .25s;
}
.cb-root.cb-open .cb-panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

/* Header */
.cb-head{
  background:linear-gradient(135deg,#0288D1 0%, #29B6F6 55%, #4FC3F7 100%);
  color:#fff; padding:.85rem 1rem; display:flex; align-items:center; gap:.7rem;
  flex-shrink:0;
}
.cb-head img{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.75); flex-shrink:0;
}
.cb-head-txt{ flex:1; min-width:0; }
.cb-head-txt strong{
  display:block; font-family:'Baloo 2',sans-serif; font-size:1.02rem;
  line-height:1.2; color:#fff;
}
.cb-head-txt span{ font-size:.76rem; opacity:.92; display:flex; align-items:center; gap:.3rem; }
.cb-head-txt span i{ font-size:.55rem; color:#B9F6CA; }
.cb-close{
  background:rgba(255,255,255,.2); border:none; color:#fff; width:30px; height:30px;
  border-radius:50%; font-size:1.05rem; line-height:1; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.cb-close:hover{ background:rgba(255,255,255,.35); }

/* Body */
.cb-body{
  flex:1; overflow-y:auto; padding:1rem .9rem .5rem;
  background:linear-gradient(180deg,#F3F8FF 0%, #FFFDF7 100%);
  scrollbar-width:thin; scrollbar-color:#BBDEFB transparent;
}
.cb-body::-webkit-scrollbar{ width:6px; }
.cb-body::-webkit-scrollbar-thumb{ background:#BBDEFB; border-radius:8px; }

.cb-msg{ display:flex; gap:.5rem; margin-bottom:.8rem; animation:cbIn .3s ease both; }
@keyframes cbIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.cb-msg .cb-av{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; object-fit:cover;
  border:2px solid #fff; box-shadow:0 3px 8px -2px rgba(20,35,90,.3);
}
.cb-bubble{
  background:#fff; border-radius:16px 16px 16px 4px; padding:.65rem .85rem;
  font-size:.9rem; line-height:1.65; color:#33406b; max-width:86%;
  box-shadow:0 6px 16px -8px rgba(20,35,90,.25); border:1px solid #EAF3FF;
  word-wrap:break-word; overflow-wrap:anywhere;
}
.cb-bubble b, .cb-bubble strong{ color:var(--cb-navy); }
.cb-bubble ul{ margin:.35rem 0 0; padding-left:1.1rem; }
.cb-bubble li{ margin-bottom:.15rem; }
.cb-bubble a.cb-inline{ color:var(--cb-blue-d); font-weight:700; }
.cb-msg.cb-me{ justify-content:flex-end; }
.cb-msg.cb-me .cb-bubble{
  background:linear-gradient(135deg,#0288D1,#29B6F6); color:#fff;
  border-radius:16px 16px 4px 16px; border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(2,136,209,.5);
}

/* link buttons inside an answer */
.cb-links{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem; }
.cb-links a{
  font-size:.78rem; font-weight:700; color:var(--cb-blue-d);
  background:#EAF7FF; border:1px solid #B3E5FC; border-radius:999px;
  padding:.3rem .7rem; display:inline-flex; align-items:center; gap:.3rem;
  transition:background .18s, transform .18s;
}
.cb-links a:hover{ background:#D4EFFF; transform:translateY(-1px); color:var(--cb-blue-d); }

/* Typing dots */
.cb-typing span{
  display:inline-block; width:7px; height:7px; margin-right:3px; border-radius:50%;
  background:#90CAF9; animation:cbBounce 1.2s infinite;
}
.cb-typing span:nth-child(2){ animation-delay:.15s; }
.cb-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes cbBounce{
  0%,60%,100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-5px); opacity:1; }
}

/* Quick replies */
.cb-chips{
  display:flex; flex-wrap:wrap; gap:.35rem; padding:0 .9rem .6rem;
  background:#FFFDF7; flex-shrink:0;
}
.cb-chips button{
  font-size:.78rem; font-weight:600; color:var(--cb-navy);
  background:#fff; border:1.5px solid #D7EEFF; border-radius:999px;
  padding:.32rem .75rem; cursor:pointer; transition:all .18s;
  font-family:inherit;
}
.cb-chips button:hover{ background:#EAF7FF; border-color:var(--cb-blue); transform:translateY(-1px); }

/* Input */
.cb-form{
  display:flex; gap:.45rem; padding:.65rem .8rem calc(.75rem + env(safe-area-inset-bottom,0px));
  background:#fff; border-top:1px solid #EEF5FF; flex-shrink:0;
}
.cb-form input{
  flex:1; min-width:0; border:1.5px solid #E1EFFA; background:#F7FBFF;
  border-radius:999px; padding:.55rem .95rem; font-size:.9rem; color:var(--cb-navy);
  outline:none; transition:border-color .2s, background .2s; font-family:inherit;
}
.cb-form input:focus{ border-color:var(--cb-blue); background:#fff; }
.cb-form button{
  width:40px; height:40px; flex-shrink:0; border:none; border-radius:50%;
  background:linear-gradient(135deg,#0288D1,#29B6F6); color:#fff; font-size:1.05rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px -5px rgba(2,136,209,.6); transition:transform .18s;
}
.cb-form button:hover{ transform:scale(1.08); }

/* ---------- Mobile ---------- */
@media (max-width: 576px){
  .cb-launcher{ left:16px; bottom:calc(78px + env(safe-area-inset-bottom,0px)); width:50px; height:50px; }
  .cb-hint{ left:76px; bottom:calc(86px + env(safe-area-inset-bottom,0px)); max-width:170px; font-size:.8rem; }
  .cb-panel{
    left:8px; right:8px; width:auto; max-width:none;
    bottom:calc(78px + env(safe-area-inset-bottom,0px));
    height:min(70vh, calc(100vh - 140px));
  }
}
@media (prefers-reduced-motion: reduce){
  .cb-launcher, .cb-panel, .cb-msg{ transition:none !important; animation:none !important; }
  .cb-launcher::after{ animation:none; opacity:0; }
}