/* ═══ CHAT WIDGET STYLES ═══ */
#cs-chat-root *{box-sizing:border-box;margin:0;padding:0}
#cs-chat-root{font-family:'Inter','Segoe UI',sans-serif}

/* Launcher Button */
#cs-launcher{
  position:fixed;bottom:24px;left:24px;z-index:9999;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#0a1628,#0d1f3c);
  border:1.5px solid rgba(0,200,232,.4);
  border-radius:50px;padding:10px 18px 10px 12px;
  cursor:pointer;box-shadow:0 4px 24px rgba(0,200,232,.25),0 2px 8px rgba(0,0,0,.4);
  transition:all .3s;user-select:none;
}
#cs-launcher:hover{
  border-color:rgba(0,200,232,.7);
  box-shadow:0 6px 36px rgba(0,200,232,.4),0 2px 12px rgba(0,0,0,.5);
  transform:translateY(-2px)
}
#cs-launcher-icon{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#00c8e8,#00a0c0);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;
}
#cs-launcher-icon svg{width:20px;height:20px}
#cs-launcher-pulse{
  position:absolute;top:0;right:0;width:11px;height:11px;
  background:#2ecc71;border-radius:50%;border:2px solid #0a1628;
  animation:cs-pulse 2s infinite;
}
@keyframes cs-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
#cs-launcher-text{line-height:1.25}
#cs-launcher-text .cs-lt1{font-size:.8rem;font-weight:700;color:#e8f0f8;letter-spacing:.02em}
#cs-launcher-text .cs-lt2{font-size:.68rem;color:#00c8e8;font-weight:600}

/* Chat Window */
#cs-window{
  position:fixed;bottom:88px;left:24px;z-index:9999;
  width:380px;max-width:calc(100vw - 48px);
  background:#0a1628;
  border:1px solid rgba(0,200,232,.2);
  border-radius:18px;overflow:hidden;
  box-shadow:0 16px 64px rgba(0,0,0,.6),0 0 0 1px rgba(0,200,232,.08);
  display:none;flex-direction:column;
  animation:cs-slidein .3s ease;
  max-height:calc(100vh - 120px);
}
#cs-window.open{display:flex}
@keyframes cs-slidein{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:none}
}

/* Header */
#cs-header{
  background:linear-gradient(135deg,#0d1f3c,#0f2848);
  padding:14px 16px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(0,200,232,.12);flex-shrink:0;
}
#cs-avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#00c8e8,#0090b0);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;position:relative;
}
#cs-avatar-status{
  position:absolute;bottom:1px;right:1px;
  width:10px;height:10px;border-radius:50%;
  background:#2ecc71;border:2px solid #0d1f3c;
}
#cs-header-info{flex:1;min-width:0}
#cs-header-name{font-size:.9rem;font-weight:700;color:#e8f0f8;letter-spacing:.02em}
#cs-header-status{font-size:.7rem;color:#2ecc71;font-weight:600;display:flex;align-items:center;gap:4px}
#cs-header-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#2ecc71;flex-shrink:0}
#cs-header-actions{display:flex;gap:6px}
#cs-minimize,#cs-close-btn{
  width:30px;height:30px;border-radius:7px;border:none;
  background:rgba(255,255,255,.06);color:#7a9bb5;
  cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
#cs-minimize:hover,#cs-close-btn:hover{background:rgba(0,200,232,.12);color:#00c8e8}

/* Quick Actions */
#cs-quick-actions{
  display:flex;gap:6px;padding:10px 14px;
  background:rgba(0,200,232,.03);border-bottom:1px solid rgba(0,200,232,.08);
  overflow-x:auto;scrollbar-width:none;flex-shrink:0;
}
#cs-quick-actions::-webkit-scrollbar{display:none}
.cs-quick-btn{
  white-space:nowrap;font-size:.7rem;font-weight:600;
  background:rgba(0,200,232,.08);border:1px solid rgba(0,200,232,.2);
  border-radius:100px;padding:5px 12px;color:#00c8e8;cursor:pointer;
  transition:all .2s;flex-shrink:0;font-family:inherit;
}
.cs-quick-btn:hover{background:rgba(0,200,232,.18);border-color:rgba(0,200,232,.4)}

/* Messages */
#cs-messages{
  flex:1;overflow-y:auto;padding:16px 14px;
  display:flex;flex-direction:column;gap:12px;
  scroll-behavior:smooth;min-height:200px;
}
#cs-messages::-webkit-scrollbar{width:3px}
#cs-messages::-webkit-scrollbar-thumb{background:rgba(0,200,232,.2);border-radius:2px}

.cs-msg{display:flex;gap:9px;align-items:flex-start;animation:cs-msgin .25s ease}
@keyframes cs-msgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cs-msg.user{flex-direction:row-reverse}

.cs-msg-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#00c8e8,#0090b0);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;flex-shrink:0;
}
.cs-msg.user .cs-msg-avatar{background:linear-gradient(135deg,#2ecc71,#1a9e55)}

.cs-bubble{
  max-width:82%;padding:10px 14px;border-radius:14px;
  font-size:.83rem;line-height:1.65;word-break:break-word;
}
.cs-msg.bot .cs-bubble{
  background:#0f1e38;border:1px solid rgba(0,200,232,.12);
  color:#e8f0f8;border-top-left-radius:4px;
}
.cs-msg.user .cs-bubble{
  background:linear-gradient(135deg,#00c8e8,#0090b0);
  color:#0a1628;font-weight:500;border-top-right-radius:4px;
}
.cs-bubble strong{color:#00c8e8}
.cs-msg.user .cs-bubble strong{color:#0a1628}
.cs-bubble a{color:#00c8e8;text-decoration:underline}
.cs-msg.user .cs-bubble a{color:#0a1628}
.cs-bubble ul{padding-left:16px;margin-top:6px}
.cs-bubble ul li{margin-bottom:4px}

/* Typing indicator */
.cs-typing .cs-bubble{background:#0f1e38;border:1px solid rgba(0,200,232,.12);padding:12px 16px}
.cs-dots{display:flex;gap:5px;align-items:center;height:14px}
.cs-dot{width:7px;height:7px;border-radius:50%;background:#00c8e8;opacity:.4;animation:cs-bounce .9s infinite}
.cs-dot:nth-child(2){animation-delay:.18s}
.cs-dot:nth-child(3){animation-delay:.36s}
@keyframes cs-bounce{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}

/* Suggested replies */
#cs-suggestions{padding:8px 14px 0;display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}
.cs-suggestion{
  font-size:.72rem;font-weight:600;color:#00c8e8;
  background:rgba(0,200,232,.07);border:1px solid rgba(0,200,232,.18);
  border-radius:100px;padding:5px 12px;cursor:pointer;transition:all .2s;
  font-family:inherit;
}
.cs-suggestion:hover{background:rgba(0,200,232,.16);border-color:rgba(0,200,232,.38)}

/* Input area */
#cs-input-area{
  padding:12px 14px;border-top:1px solid rgba(0,200,232,.1);
  background:#080f1e;flex-shrink:0;
}
#cs-input-row{display:flex;gap:8px;align-items:flex-end}
#cs-input{
  flex:1;background:#0f1e38;border:1px solid rgba(0,200,232,.18);
  border-radius:12px;padding:10px 14px;font-size:.83rem;color:#e8f0f8;
  font-family:inherit;outline:none;resize:none;line-height:1.45;
  max-height:100px;min-height:40px;transition:border-color .2s;
  scrollbar-width:none;
}
#cs-input:focus{border-color:rgba(0,200,232,.45)}
#cs-input::placeholder{color:rgba(122,155,181,.6)}
#cs-send{
  width:40px;height:40px;border-radius:11px;border:none;
  background:linear-gradient(135deg,#00c8e8,#0090b0);
  color:#0a1628;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
#cs-send:hover{transform:scale(1.08);box-shadow:0 0 16px rgba(0,200,232,.4)}
#cs-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
#cs-send svg{width:17px;height:17px}

/* Footer */
#cs-footer{
  padding:7px 14px;text-align:center;font-size:.62rem;
  color:rgba(122,155,181,.5);background:#080f1e;flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.04);
}
#cs-footer a{color:rgba(0,200,232,.5);text-decoration:none}

/* Notification badge */
#cs-badge{
  position:absolute;top:-4px;right:-4px;width:18px;height:18px;
  background:#e74c3c;border-radius:50%;font-size:.65rem;font-weight:700;
  color:#fff;display:flex;align-items:center;justify-content:center;
  animation:cs-pulse 2s infinite;border:2px solid #0a1628;display:none;
}

/* Mobile */
@media(max-width:480px){
  #cs-window{left:12px;right:12px;width:auto;bottom:82px}
  #cs-launcher{left:12px;bottom:16px}
}