/* ═══ Charge Connect Chat — Modern UI ═══ */

/* ── Window ── */
#n8n-chat .chat-window-wrapper{
  box-shadow:0 8px 60px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06)!important;
  border-radius:20px!important;
  overflow:hidden!important;
  border:none!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
}

/* ── Header — glassmorphism style ── */
#n8n-chat .chat-header{
  background:linear-gradient(135deg,#6fb842 0%,#3ba55c 50%,#198fd9 100%)!important;
  padding:22px 20px!important;
  border:none!important;
  position:relative!important;
  overflow:hidden!important;
}
#n8n-chat .chat-header::after{
  content:''!important;
  position:absolute!important;
  top:-50%!important;right:-50%!important;
  width:100%!important;height:100%!important;
  background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%)!important;
  pointer-events:none!important;
}
#n8n-chat .chat-heading{
  font-weight:700!important;
  font-size:1.15em!important;
  letter-spacing:-.02em!important;
}

/* ── Close button ── */
#n8n-chat .chat-close-button{
  background:rgba(255,255,255,.12)!important;
  backdrop-filter:blur(8px)!important;
  border-radius:12px!important;
  border:none!important;
  transition:background .2s ease!important;
}
#n8n-chat .chat-close-button:hover{
  background:rgba(255,255,255,.22)!important;
}

/* ── Messages area ── */
#n8n-chat .chat-messages-list{
  background:linear-gradient(180deg,#f8faf5 0%,#f1f5f9 100%)!important;
  padding:24px 16px!important;
}
#n8n-chat .chat-messages-list::-webkit-scrollbar{width:4px!important}
#n8n-chat .chat-messages-list::-webkit-scrollbar-thumb{background:#c1c9d4!important;border-radius:20px!important}

/* ── Bot messages ── */
#n8n-chat .chat-message-from-bot{border:none!important;outline:none!important}
#n8n-chat .chat-message-from-bot .chat-message-markdown{
  background:#fff!important;
  border:none!important;
  outline:none!important;
  border-radius:18px!important;
  border-top-left-radius:4px!important;
  padding:14px 18px!important;
  color:#1e293b!important;
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03)!important;
  font-size:.9rem!important;
  line-height:1.65!important;
}

/* ── User messages ── */
#n8n-chat .chat-message-from-user{border:none!important;outline:none!important}
#n8n-chat .chat-message-from-user .chat-message-markdown{
  background:linear-gradient(135deg,#84c951,#6fb842)!important;
  border:none!important;
  outline:none!important;
  border-radius:18px!important;
  border-top-right-radius:4px!important;
  padding:14px 18px!important;
  color:#fff!important;
  box-shadow:0 2px 8px rgba(132,201,81,.25)!important;
  font-size:.9rem!important;
  line-height:1.65!important;
}

/* ── All messages — no borders ── */
#n8n-chat .chat-message{border:none!important;outline:none!important;box-shadow:none!important;animation:ccSlide .35s cubic-bezier(.22,1,.36,1)!important}
#n8n-chat .chat-message-markdown{border:none!important;outline:none!important}
#n8n-chat .chat-message-markdown p{margin:0 0 6px!important}
#n8n-chat .chat-message-markdown p:last-child{margin:0!important}
@keyframes ccSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── Typing indicator ── */
#n8n-chat .chat-message-typing .chat-message-typing-body{
  background:#fff!important;
  border-radius:18px!important;
  border-top-left-radius:4px!important;
  box-shadow:0 1px 3px rgba(0,0,0,.05)!important;
}
#n8n-chat .chat-message-typing-circle{background:#84c951!important}

/* ── Input area ── */
#n8n-chat .chat-inputs{
  padding:16px!important;
  background:#fff!important;
  border-top:1px solid #f1f5f9!important;
  gap:10px!important;
}
#n8n-chat .chat-input{
  background:#f8faf5!important;
  border:1.5px solid #e2e8f0!important;
  border-radius:14px!important;
  padding:13px 16px!important;
  font-family:Inter,-apple-system,sans-serif!important;
  font-size:.9rem!important;
  color:#1e293b!important;
  transition:all .2s ease!important;
}
#n8n-chat .chat-input::placeholder{color:#94a3b8!important}
#n8n-chat .chat-input:focus{
  border-color:#84c951!important;
  box-shadow:0 0 0 4px rgba(132,201,81,.1)!important;
  background:#fff!important;
  outline:none!important;
}

/* ── Send button ── */
#n8n-chat .chat-input-send-button{
  background:linear-gradient(135deg,#84c951,#6fb842)!important;
  border:none!important;
  border-radius:14px!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  color:#fff!important;
  transition:transform .15s ease,box-shadow .15s ease!important;
  box-shadow:0 2px 8px rgba(132,201,81,.3)!important;
}
#n8n-chat .chat-input-send-button:hover{
  transform:scale(1.06)!important;
  box-shadow:0 4px 14px rgba(132,201,81,.4)!important;
}
#n8n-chat .chat-input-send-button:disabled{
  opacity:.4!important;
  transform:none!important;
  box-shadow:none!important;
}

/* ── Get Started button ── */
#n8n-chat .chat-button-primary{
  background:linear-gradient(135deg,#84c951,#6fb842)!important;
  border:none!important;
  border-radius:14px!important;
  padding:14px 28px!important;
  font-weight:600!important;
  font-size:.95rem!important;
  font-family:Inter,-apple-system,sans-serif!important;
  color:#fff!important;
  box-shadow:0 4px 14px rgba(132,201,81,.3)!important;
  transition:transform .15s ease,box-shadow .15s ease!important;
  letter-spacing:-.01em!important;
}
#n8n-chat .chat-button-primary:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 6px 20px rgba(132,201,81,.4)!important;
}

/* ── Footer ── */
#n8n-chat .chat-footer,
#n8n-chat .chat-powered-by{
  background:#fff!important;
  font-size:.7rem!important;
  color:#b0b8c4!important;
  padding:6px!important;
}
#n8n-chat .chat-powered-by a{color:#84c951!important}

/* ── Links ── */
#n8n-chat .chat-message-markdown a{color:#198fd9!important;text-decoration:none!important;font-weight:500!important}
#n8n-chat .chat-message-markdown a:hover{text-decoration:underline!important}
#n8n-chat .chat-message-from-user .chat-message-markdown a{color:rgba(255,255,255,.9)!important}

/* ── Mobile ── */
@media(max-width:480px){
  #n8n-chat .chat-window-wrapper{width:100vw!important;height:100vh!important;max-height:100vh!important;bottom:0!important;right:0!important;border-radius:0!important}
}