.chatbot-icon{ position:fixed; right:20px; bottom:20px; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff; font-size:26px; background:linear-gradient(135deg,#6c36a4,#2aa0ff); box-shadow:0 16px 36px rgba(31,155,222,.35), 0 6px 16px rgba(2,6,23,.18); transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;z-index:9999; }
    .chatbot-icon:hover{ transform:translateY(-1px); box-shadow:0 22px 48px rgba(31,155,222,.40), 0 8px 22px rgba(2,6,23,.22); filter:saturate(1.05); }
    .chatbot-popup{ position:fixed; right:20px; bottom:96px; width:360px; background:var(--card); border:1px solid #ccc; border-radius:20px; overflow:hidden; display:none; box-shadow:0 24px 60px rgba(2,6,23,.16), 0 4px 14px rgba(2,6,23,.12);    z-index: 9999999; }
    .chat-header{ position:relative; color:#fff; background:linear-gradient(135deg,#6c36a4,#2aa0ff); padding:14px 56px 14px 60px; font-size:16px; font-weight:700; text-align:left; letter-spacing:.2px; }
    .chat-header::before{ content:"AI"; position:absolute; left:14px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; background:linear-gradient(135deg,#2aa0ff,#6c36a4); box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); }
    .chat-close{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; cursor:pointer; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#6c36a4,#2aa0ff); color:#fff; font-size:18px; font-weight:700; line-height:1; box-shadow:0 6px 16px rgba(2,6,23,.22), inset 0 0 0 2px rgba(255,255,255,.18); transition:transform .1s ease, filter .2s ease; }
    .chat-close:hover{ filter:brightness(1.05); }
    .chat-close:active{ transform:translateY(-50%) scale(.96); }
    .chat-body{ height:320px; overflow-y:auto; padding:14px; background:linear-gradient(180deg,#fbfdff,#ffffff); }
    .chat-body .message{ margin:10px 0; display:flex; align-items:flex-start; }
    .chat-body .message.bot{ justify-content:flex-start; }
    .chat-body .message.user{ justify-content:flex-end; }
    .chat-body .message .text{ max-width:75%; padding:10px 12px; border-radius:18px; font-size:14px; line-height:1.35; box-shadow:0 1px 4px rgba(2,6,23,.06); }
    .chat-body .message.bot .text{ background:#f2f3ff; border:1px solid #ccc; }
    .chat-body .message.user .text{ background:linear-gradient(135deg,#6c36a4,#2aa0ff); color:#fff; border:none; box-shadow:0 8px 18px rgba(31,155,222,.28); }
    .chat-footer{ padding:12px 12px 14px; border-top:1px solid #ccc; background:#fff; }
    .chat-footer input{ width:100%; padding:12px 14px; border:1px solid #ccc; border-radius:20px; outline:0; background:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
    .options{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
    .option{ background:linear-gradient(135deg,#6c36a4,#2aa0ff); color:#fff; border:none; padding:8px 12px; border-radius:999px; cursor:pointer; font-size:13px; box-shadow:0 6px 16px rgba(31,155,222,.25); transition:transform .1s ease, box-shadow .2s ease; }
    .option:hover{ transform:translateY(-1px); }
    /* Small form styles inside chat bubble */
    .mini-form{ width:100%; }
    .mini-form .row{ display:flex; flex-direction:column; gap:6px; margin:6px 0; }
    .mini-form label {
        font-size: 12px;
        font-weight: bold;
        margin: 0;
        padding: 0 3px;
    }
    .mini-form input{ width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:10px; outline:0; }
    .mini-form textarea { width: 100%;padding: 10px 12px;border: 1px solid #ccc;border-radius: 10px;outline: 0;}
    .mini-form button{ margin-top:8px; width:100%; padding:10px 12px; border:none; border-radius:12px; cursor:pointer; background:linear-gradient(135deg,#6c36a4,#2aa0ff); color:#fff; font-weight:700; box-shadow:0 6px 16px rgba(31,155,222,.25); }
    .mini-form .hint{ font-size:12px; opacity:.75; margin-top:6px; }
.zindexlow1 { z-index:123; }
.cs_banner_thumbnail img { width:80% !important;border-radius:20px; }
.cs_banner_thumbnail {margin:0 auto;text-align: center;}
img.aiagent {
    width: 53px;
    position: absolute;
    left: 5px;
    top: 2px;
}
/* subtle infinite bounce for the agent image */
.chatbot-icon{
  display:block;
  animation: ai-bounce 2.2s ease-in-out infinite;
  will-change: transform;
}

/* pause on hover (optional) */
.chatbot-icon:hover .aiagent{
  animation-play-state: paused;
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .chatbot-icon .aiagent{ animation: none; }
}

@keyframes ai-bounce{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); } /* adjust height of bounce here */
  100% { transform: translateY(0); }
}
.chat-tooltip {
    width: 150px;
    text-align: center;
    font-size: 12px;
    background: #4a26cb;
    margin-top: -70px;
}
#chatbot-icon .chat-tooltip{
  position: absolute;
  right: 68px;              /* bubble to the left of avatar */
  bottom: 50%;
  transform: translateY(50%) scale(.96);
  transform-origin: right center;
  color: #fff;
  font: 500 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  opacity: 1;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10;
}
#chatbot-icon .chat-tooltip .tip{
  content:"";
  position:absolute;
  right:-6px; top:50%;
  transform: translateY(-50%) rotate(45deg);
  width:12px; height:12px;
  background:#1f2937; border-radius:2px;
}
.cs_scrollup.cs_scrollup_show {
    display: none;
}