.chat-toggle {
  position: fixed;
  bottom: 25px;
  right: 30px;
  width: 51px;
  height: 59px;
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  animation: pulse 1.5s infinite;
  z-index: 9;
}
.chat-toggle img{width: 100%;}
.chat-header img
{
  width:16px;
  margin-right:6px;
}

.chat-hint {
  position: absolute; right: 70px; bottom: 0;
  background:#05125D; color:#fff; padding:8px 14px;
  border-radius:20px; font-size:14px; white-space:nowrap;
  z-index: 999999; display:flex; align-items:center; gap:6px;
}

.chat-hint .close-hint {
      cursor: pointer;
      font-size: 10px;
      color: #fff;
      font-weight: bold;
      background-color: #f00;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

.chat-container {
  position: fixed; bottom: -650px; right: 25px;
  width: 430px; height:600px; background:#fff;
  border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,0.25);
  display:flex; flex-direction:column; overflow:hidden;
  transition: bottom 0.5s ease-in-out; z-index: 999999;
}
.chat-container.active { bottom: 100px; }

.chat-header {
  background: linear-gradient(0deg,rgba(35, 63, 229, 1) 0%, rgba(0, 24, 166, 1) 100%); color:#fff; padding:16px;
  font-weight:bold; font-size:18px; position:relative;
}
.chat-close { position:absolute; right:15px; top:12px; cursor:pointer; font-size:18px; color:#fff!important }

#chatbox {
  flex:1; padding:20px; overflow-y:auto; background:#f7f9fc;
  display:flex; flex-direction:column; scroll-behavior:smooth;
  text-align: left!important;
}

.msg { margin:10px 0; max-width:75%; padding:12px 16px;
  border-radius:25px; font-size:15px; line-height:1.5;
  display:inline-block; animation: fadeInUp 0.3s ease-in-out; }
.user { background:#0018A6; color:#fff; align-self:flex-end; margin-left:auto; border-bottom-right-radius:8px; }
.bot { background:#e9ecef; color:#333; align-self:flex-start; margin-right:auto; border-bottom-left-radius:8px; }

.typing { background:#e9ecef; align-self:flex-start; margin-right:auto;
  border-radius:25px; padding:12px 16px; display:flex; gap:5px;
  animation: fadeInUp 0.3s ease-in-out; }
.dot { width:7px; height:7px; background:#555; border-radius:50%; animation:blink 1.2s infinite; }
.dot:nth-child(2){animation-delay:0.2s;}
.dot:nth-child(3){animation-delay:0.4s;}

.chat-footer { display:flex; padding:12px; background:#fff; border-top:1px solid #ddd; }
.chat-footer input { flex:1; padding:12px; border:1px solid #ddd; border-radius:25px; outline:none; font-size:15px; }
.chat-footer input:focus { border-color:#05125D; }
.chat-footer button { margin-left:10px; padding:12px 20px; border:none; border-radius:25px;
  background:#05125D; color:#fff; cursor:pointer; font-size:15px; font-weight:bold;
  transition: transform 0.2s, background 0.3s; }
.chat-footer button:hover { background:#05125D; transform:scale(1.05); }

.cursor { display:inline-block; width:2px; background:#333; animation:blink 0.8s infinite; }

/* --- Animations --- */
    @keyframes fadeInUp {
      from{opacity:0; transform:translateY(12px);}
      to{opacity:1; transform:translateY(0);}
    }
    @keyframes blink {0%,80%,100%{opacity:0.2;}40%{opacity:1;}}
    @keyframes pulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(5, 18, 93, 0.7); }
      70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(5, 18, 93, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(5, 18, 93, 0); }
    }