/* ── n8n ChatBot Widget ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --cb-primary: #6366f1;
  --cb-primary-dark: #4f46e5;
  --cb-radius: 18px;
  --cb-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
  --cb-font: 'DM Sans', system-ui, sans-serif;
  --cb-bg: #ffffff;
  --cb-surface: #f8f9fc;
  --cb-border: #e8eaf0;
  --cb-text: #1a1b2e;
  --cb-muted: #7b7d9a;
  --cb-bot-bubble: #f0f1f8;
  --cb-user-bubble: var(--cb-primary);
  --cb-user-text: #ffffff;
  --cb-z: 999999;
}

/* ── Toggle Button ── */
#n8n-chatbot-toggle {
  position: fixed;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--cb-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(99,102,241,.45);
  z-index: var(--cb-z);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
  outline: none;
}
#n8n-chatbot-toggle:hover { background: var(--cb-primary-dark); transform: scale(1.08); }
#n8n-chatbot-toggle.cb-open { transform: scale(1.05) rotate(15deg); }
#n8n-chatbot-toggle svg { width: 26px; height: 26px; fill: #fff; transition: opacity .2s; }
#n8n-chatbot-toggle .cb-icon-close { display: none; }
#n8n-chatbot-toggle.cb-open .cb-icon-chat  { display: none; }
#n8n-chatbot-toggle.cb-open .cb-icon-close { display: block; }

/* Unread badge */
#n8n-chatbot-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--cb-font);
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  opacity: 0;
  transform: scale(0);
  transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
#n8n-chatbot-badge.cb-show { opacity: 1; transform: scale(1); }

/* Position variants */
.cb-pos-bottom-right #n8n-chatbot-toggle,
.cb-pos-bottom-right #n8n-chatbot-window { right: 24px; }
.cb-pos-bottom-left  #n8n-chatbot-toggle,
.cb-pos-bottom-left  #n8n-chatbot-window { left: 24px; }
#n8n-chatbot-toggle  { bottom: 24px; }

/* ── Chat Window ── */
#n8n-chatbot-window {
  position: fixed;
  bottom: 96px;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: var(--cb-bg);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  display: flex;
  flex-direction: column;
  z-index: var(--cb-z);
  font-family: var(--cb-font);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(.97);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  border: 1px solid var(--cb-border);
}
#n8n-chatbot-window.cb-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ── Header ── */
#cb-header {
  background: var(--cb-primary);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
#cb-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#cb-avatar svg { width: 22px; height: 22px; fill: #fff; }
#cb-header-info { flex: 1; min-width: 0; }
#cb-bot-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}
#cb-status {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.cb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: cb-pulse 2s infinite;
}
@keyframes cb-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .4; }
}
#cb-clear-btn {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px;
  font-family: var(--cb-font);
  transition: background .2s;
  white-space: nowrap;
}
#cb-clear-btn:hover { background: rgba(255,255,255,.28); }

/* ── Messages ── */
#cb-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
#cb-messages::-webkit-scrollbar { width: 4px; }
#cb-messages::-webkit-scrollbar-track { background: transparent; }
#cb-messages::-webkit-scrollbar-thumb { background: var(--cb-border); border-radius: 2px; }

.cb-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: cb-slide-in .22s ease;
}
@keyframes cb-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cb-msg.cb-bot  { justify-content: flex-start; }
.cb-msg.cb-user { justify-content: flex-end; }

.cb-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.cb-bot  .cb-bubble {
  background: var(--cb-bot-bubble);
  color: var(--cb-text);
  border-bottom-left-radius: 4px;
}
.cb-user .cb-bubble {
  background: var(--cb-user-bubble);
  color: var(--cb-user-text);
  border-bottom-right-radius: 4px;
}

/* Timestamp */
.cb-time {
  font-size: 10px;
  color: var(--cb-muted);
  margin-top: 3px;
  text-align: right;
}
.cb-bot .cb-time { text-align: left; }

/* Typing indicator */
#cb-typing {
  display: none;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
}
#cb-typing.cb-show { display: flex; }
.cb-typing-bubble {
  background: var(--cb-bot-bubble);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 12px 16px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.cb-typing-bubble span {
  width: 7px; height: 7px;
  background: var(--cb-muted);
  border-radius: 50%;
  animation: cb-bounce .9s infinite;
}
.cb-typing-bubble span:nth-child(2) { animation-delay: .15s; }
.cb-typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes cb-bounce {
  0%,80%,100% { transform: translateY(0); }
  40%          { transform: translateY(-6px); }
}

/* ── Input Bar ── */
#cb-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--cb-border);
  flex-shrink: 0;
  background: var(--cb-bg);
}
#cb-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--cb-surface);
  border: 1.5px solid var(--cb-border);
  border-radius: 14px;
  padding: 8px 8px 8px 14px;
  transition: border-color .2s;
}
#cb-input-wrap:focus-within { border-color: var(--cb-primary); }

#cb-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  font-family: var(--cb-font);
  font-size: 14px;
  color: var(--cb-text);
  line-height: 1.5;
  max-height: 100px;
  outline: none;
  padding: 2px 0;
}
#cb-input::placeholder { color: var(--cb-muted); }

#cb-send-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--cb-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
}
#cb-send-btn:hover  { background: var(--cb-primary-dark); transform: scale(1.05); }
#cb-send-btn:active { transform: scale(.96); }
#cb-send-btn:disabled { background: var(--cb-border); cursor: not-allowed; transform: none; }
#cb-send-btn svg { width: 17px; height: 17px; fill: #fff; }

#cb-powered {
  font-size: 10px;
  text-align: center;
  color: var(--cb-muted);
  margin-top: 7px;
  opacity: .7;
}
#cb-powered a { color: var(--cb-muted); text-decoration: none; }

/* ── Error Toast ── */
#cb-error {
  margin: 0 14px 8px;
  padding: 8px 12px;
  background: #fff0f0;
  border: 1px solid #fca5a5;
  color: #dc2626;
  font-size: 12.5px;
  border-radius: 8px;
  display: none;
}
#cb-error.cb-show { display: block; }

/* ── Inline (shortcode) variant ── */
#n8n-chatbot-inline {
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  overflow: hidden;
  font-family: var(--cb-font);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* ── Responsive ── */
@media (max-width: 420px) {
  #n8n-chatbot-window {
    width: calc(100vw - 16px);
    height: calc(100vh - 100px);
    border-radius: 16px 16px 0 0;
    bottom: 80px;
  }
  .cb-pos-bottom-right #n8n-chatbot-window,
  .cb-pos-bottom-left  #n8n-chatbot-window { right: 8px; left: 8px; }
}