/* ============================================================
   eSkilled n8n Chat Widget Theme for Zoho Desk
   ============================================================ */

:root {
  --chat--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --chat--color-primary: #ff6b35;
  --chat--color-primary-shade-50: #f5691f;
  --chat--color-primary-shade-100: #d9581a;
  --chat--color-secondary: #16225c;
  --chat--color-secondary-shade-50: #0f1a45;
  --chat--color-white: #ffffff;
  --chat--color-light: #fff7ed;
  --chat--color-light-shade-50: #ffe9d6;
  --chat--color-light-shade-100: #ffd8b8;
  --chat--color-medium: #94a3b8;
  --chat--color-dark: #16225c;
  --chat--color-disabled: #cbd5e1;
  --chat--color-typing: #64748b;
  --chat--spacing: 1rem;
  --chat--border-radius: 1.1rem;
  --chat--transition-duration: 0.2s;
  --chat--window--width: 390px;
  --chat--window--height: 620px;
  --chat--window--border: none;
  --chat--window--border-radius: 28px;
  --chat--header--background: linear-gradient(125deg, #ff4e3e 0%, #ff308f 42%, #d926b5 75%, #8b25e2 100%);
  --chat--header--color: #ffffff;
  --chat--header--padding: 1.8rem 1.4rem 1.5rem 1.6rem;
  --chat--heading--font-size: 1.65rem;
  --chat--subtitle--font-size: 0.95rem;
  --chat--subtitle--line-height: 1.4;
  --chat--message--font-size: 0.95rem;
  --chat--message--border-radius: 1.2rem;
  --chat--message-line-height: 1.55;
  --chat--message--padding: 0.85rem 1.15rem;
  --chat--message--bot--background: #ffffff;
  --chat--message--bot--color: #1e293b;
  --chat--message--bot--border: none;
  --chat--message--user--background: #ff6b35;
  --chat--message--user--color: #ffffff;
  --chat--message--user--border: none;
  --chat--toggle--size: 80px;
  --chat--toggle--border-radius: 50%;
  --chat--toggle--background: transparent;
  --chat--toggle--hover--background: transparent;
  --chat--toggle--active--background: transparent;
  --chat--toggle--color: #16225c;
  --chat--input--border-radius: 999px;
  --chat--input--background: #ffffff;
  --chat--textarea--height: 44px;
  --chat--body--background: #fbf5ee;
  --chat--footer--background: #fbf5ee;
}

/* Box Sizing & Overflow Reset */
.chat-window,
.chat-layout,
.chat-wrapper,
.chat-body,
.chat-footer,
.chat-input,
.chat-input * {
  box-sizing: border-box !important;
}

.chat-layout,
.chat-wrapper,
.chat-window,
.chat-footer,
.chat-body {
  overflow-x: hidden !important;
}

/* Positioning */
.chat-window-wrapper, .chat-window-toggle {
  z-index: 9999999 !important;
  position: fixed !important;
}

.chat-window-wrapper {
  right: 25px !important;
  bottom: 115px !important;
  max-width: calc(100vw - 40px) !important;
}

.chat-window-toggle {
  right: 25px !important;
  bottom: 25px !important;
  width: 80px !important;
  height: 80px !important;
  box-shadow: none !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* .chat-window-toggle:hover {
  transform: scale(1.08) translateY(-2px) !important;
} */

/* Elevated Floating Window Shell */
.chat-window-wrapper .chat-window {
  border-radius: 28px !important;
  box-shadow: 0 25px 60px -15px rgba(22, 34, 92, 0.25), 0 0 1px 1px rgba(22, 34, 92, 0.04) !important;
  overflow: hidden !important;
  animation: n8n-chat-window-in 0.25s ease-out;
}

@keyframes n8n-chat-window-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header with Robot Illustration */
.chat-header {
  background: linear-gradient(125deg, #ff4e3e 0%, #ff308f 42%, #d926b5 75%, #8b25e2 100%) !important;
  color: #ffffff !important;
  padding: 1.8rem 1.4rem 1.5rem 1.6rem !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 120px !important;
  box-sizing: border-box !important;
}

.chat-header::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 175px !important;
  height: 118px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 175 118' fill='none'><defs><linearGradient id='wh' x1='0' y1='0' x2='0' y2='100%'><stop offset='0%' stop-color='%23ffffff'/><stop offset='100%' stop-color='%23e2e8f0'/></linearGradient><linearGradient id='cy' x1='0' y1='0' x2='100%' y2='100%'><stop offset='0%' stop-color='%2338bdf8'/><stop offset='100%' stop-color='%2306b6d4'/></linearGradient></defs><g filter='drop-shadow(0 4px 8px rgba(0,0,0,0.18))'><path d='M28 22 C28 11, 42 11, 54 11 C66 11, 76 11, 76 22 C76 33, 66 33, 56 33 L36 38 L38 31 C28 31, 28 31, 28 22 Z' fill='%23ffffff'/><circle cx='44' cy='22' r='2.5' fill='%23ec4899'/><circle cx='52' cy='22' r='2.5' fill='%23ec4899'/><circle cx='60' cy='22' r='2.5' fill='%23ec4899'/></g><g transform='translate(72, 7)'><path d='M28 80 C28 68, 36 64, 50 64 C64 64, 72 68, 72 80 L76 95 L24 95 Z' fill='url(%23wh)' stroke='%23cbd5e1' stroke-width='1'/><path d='M38 65 C42 70, 58 70, 62 65 C60 73, 40 73, 38 65 Z' fill='%230f172a'/><circle cy='80' cx='50' r='9' fill='url(%23cy)' stroke='%23ffffff' stroke-width='1.5'/><path d='M47 80 C47 77.5, 53 77.5, 53 80 L47 80 C47 82.2, 53 82.8, 53 81.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' fill='none'/><rect x='21' y='32' width='10' height='24' rx='5' fill='%230f172a'/><rect x='73' y='32' width='10' height='24' rx='5' fill='%230f172a'/><rect x='75.5' y='37' width='3' height='14' rx='1.5' fill='%2306b6d4'/><rect x='26' y='16' width='52' height='49' rx='22' fill='url(%23wh)' stroke='%23cbd5e1' stroke-width='1'/><rect x='31' y='26' width='42' height='27' rx='12' fill='%23090d16'/><path d='M37 38 C37 34, 44 34, 44 38' stroke='%2300f5ff' stroke-width='3' stroke-linecap='round' fill='none'/><path d='M60 38 C60 34, 67 34, 67 38' stroke='%2300f5ff' stroke-width='3' stroke-linecap='round' fill='none'/><path d='M48 44 Q51 47 54 44' stroke='%2300f5ff' stroke-width='2' stroke-linecap='round' fill='none'/><g transform='translate(8, 50)'><path d='M0 15 L-10 5 L-18 -5' stroke='url(%23wh)' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/><path d='M-18 -5 C-22 -7, -23 -12, -20 -15 C-18 -18, -14 -18, -13 -13 L-10 -5' fill='%230f172a'/></g></g></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: bottom right !important;
  pointer-events: none !important;
}

.chat-header .chat-heading { position: relative !important; z-index: 2 !important; max-width: 60% !important; margin: 0 !important; }
.chat-header .chat-heading h1 { font-size: 1.65rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #ffffff !important; margin: 0 !important; line-height: 1.15 !important; }
.chat-header p { font-size: 0.95rem !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.95) !important; margin: 0.35rem 0 0 0 !important; position: relative !important; z-index: 2 !important; max-width: 60% !important; }

/* Bot Message Avatar & Bubble */
.chat-body, .chat-messages-list { background: #fbf5ee !important; }
.chat-message-from-bot {
  display: flex !important;
  align-items: flex-end !important;
  position: relative !important;
  padding-left: 46px !important;
  margin: 0 0 0.85rem 0 !important;
}

.chat-message-from-bot::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><defs><linearGradient id='bg' x1='15%' y1='5%' x2='85%' y2='95%'><stop offset='0%' stop-color='%23c026d3'/><stop offset='35%' stop-color='%23ec4899'/><stop offset='70%' stop-color='%23f43f5e'/><stop offset='100%' stop-color='%23fb7185'/></linearGradient><linearGradient id='wh' x1='0' y1='0' x2='0' y2='100%'><stop offset='0%' stop-color='%23ffffff'/><stop offset='100%' stop-color='%23e2e8f0'/></linearGradient><linearGradient id='cy' x1='0' y1='0' x2='100%' y2='100%'><stop offset='0%' stop-color='%2338bdf8'/><stop offset='100%' stop-color='%2306b6d4'/></linearGradient><clipPath id='cc'><circle cx='50' cy='50' r='50'/></clipPath></defs><circle cx='50' cy='50' r='50' fill='url(%23bg)'/><g clip-path='url(%23cc)'><path d='M22 80 C22 66, 32 62, 50 62 C68 62, 78 66, 78 80 L84 104 L16 104 Z' fill='url(%23wh)' stroke='%23cbd5e1' stroke-width='1.2'/><path d='M35 63 C40 70, 60 70, 65 63 C63 73, 37 73, 35 63 Z' fill='%230f172a'/><circle cx='50' cy='80' r='10' fill='url(%23cy)' stroke='%23ffffff' stroke-width='1.6'/><rect x='15' y='27' width='11' height='26' rx='5.5' fill='%230f172a'/><rect x='74' y='27' width='11' height='26' rx='5.5' fill='%230f172a'/><rect x='17.5' y='33' width='3.5' height='14' rx='1.75' fill='%2306b6d4'/><rect x='79' y='33' width='3.5' height='14' rx='1.75' fill='%2306b6d4'/><rect x='21' y='9' width='58' height='54' rx='25' fill='url(%23wh)' stroke='%23cbd5e1' stroke-width='1.2'/><rect x='27' y='21' width='46' height='30' rx='14' fill='%23090d16'/><path d='M34 33.5 C34 29, 42 29, 42 33.5' stroke='%2300f5ff' stroke-width='3.5' stroke-linecap='round' fill='none'/><path d='M58 33.5 C58 29, 66 29, 66 33.5' stroke='%2300f5ff' stroke-width='3.5' stroke-linecap='round' fill='none'/><path d='M46.5 41 Q50 44.5 53.5 41' stroke='%2300f5ff' stroke-width='2.6' stroke-linecap='round' fill='none'/></g></svg>") !important;
  background-size: cover !important;
  box-shadow: 0 4px 10px rgba(236, 72, 153, 0.28) !important;
}

.chat-message-from-bot .chat-message-markdown {
  background: #ffffff !important;
  color: #1e293b !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 0.75rem 1.15rem !important;
  box-shadow: 0 3px 12px rgba(22, 34, 92, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  border: none !important;
}

/* Footer & Input Bar with Send Button */
.chat-footer {
  background: #fbf5ee !important;
  padding: 0.75rem 1.25rem 1.25rem 1.25rem !important;
  border-top: none !important;
}

.chat-input {
  background: #ffffff !important;
  border: 1.5px solid #ebdcd0 !important;
  border-radius: 999px !important;
  padding: 4px 6px 4px 18px !important;
  box-shadow: 0 4px 16px rgba(22, 34, 92, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.chat-input:focus-within {
  border-color: #ff6b35 !important;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.12) !important;
}

.chat-input textarea {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 8px 0 !important;
  font-size: 0.95rem !important;
  font-family: 'Poppins', sans-serif !important;
  color: #1e293b !important;
  height: 38px !important;
  resize: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

.chat-input textarea::placeholder {
  color: #94a3b8 !important;
}

.chat-input-send-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #c026d3 0%, #ec4899 50%, #f43f5e 100%) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-left: 8px !important;
  transition: transform 0.15s, filter 0.15s, opacity 0.15s !important;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35) !important;
}

.chat-input-send-button:hover:not(:disabled) {
  transform: scale(1.08) !important;
  filter: brightness(1.08) !important;
}

.chat-input-send-button svg {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}

.chat-input-send-button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Robot Avatar Launcher & Open State Toggle */
.chat-window-toggle svg { display: none; }
.chat-window-toggle.n8n-chat-toggle-open {
  background: linear-gradient(135deg, #c026d3 0%, #ec4899 50%, #f43f5e 100%) !important;
  box-shadow: 0 10px 25px rgba(236, 72, 153, 0.45) !important;
}
.chat-window-toggle.n8n-chat-toggle-open svg {
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  fill: #ffffff !important;
  color: #ffffff !important;
}

.chat-window-toggle:not(.n8n-chat-toggle-open)::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 80px; height: 80px;
  transform: translate(-50%, -50%);
  background-image: url("https://trg-cdn.s3.ap-southeast-2.amazonaws.com/chatbot/eBot%20Support%20Chat%20Animation%20cropped.gif") !important;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  /* filter: drop-shadow(0 12px 24px rgba(236, 72, 153, 0.42)) drop-shadow(0 4px 10px rgba(249, 115, 22, 0.25)); */
  background-position: center !important;
  z-index: 1 !important;
}

/* Support Chat Callout Badge */
.chat-support-callout {
  position: fixed !important;
  right: 25px !important;
  bottom: 115px !important;
  z-index: 9999998 !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 12px 18px 12px 16px !important;
  box-shadow: 0 12px 32px rgba(22, 34, 92, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, opacity 0.2s ease !important;
  animation: chat-callout-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-support-callout:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px rgba(22, 34, 92, 0.2), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.chat-support-callout::after {
  content: '' !important;
  position: absolute !important;
  bottom: -7px !important;
  right: 34px !important;
  width: 14px !important;
  height: 14px !important;
  background: #ffffff !important;
  transform: rotate(45deg) !important;
  border-bottom-right-radius: 3px !important;
  box-shadow: 3px 3px 5px rgba(22, 34, 92, 0.04) !important;
}

.chat-support-callout-icon {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'><defs><linearGradient id='sg' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%239333ea'/><stop offset='50%' stop-color='%23ec4899'/><stop offset='100%' stop-color='%23ff7a33'/></linearGradient></defs><path d='M18 6C10.82 6 5 11.37 5 18C5 21.31 6.45 24.27 8.81 26.35C8.42 28.27 7.42 30.11 5.75 31.33C5.46 31.54 5.48 31.98 5.8 32.14C6.28 32.38 6.94 32.5 7.69 32.5C10.89 32.5 13.62 30.83 15.11 29.59C16.04 29.86 17.01 30 18 30C25.18 30 31 24.63 31 18C31 11.37 25.18 6 18 6Z' stroke='url(%23sg)' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/><circle cx='12.5' cy='18' r='1.6' fill='url(%23sg)'/><circle cx='18' cy='18' r='1.6' fill='url(%23sg)'/><circle cx='23.5' cy='18' r='1.6' fill='url(%23sg)'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.chat-support-callout-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  margin-right: 4px !important;
}

.chat-support-callout-close {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #71717a !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: all 0.15s ease !important;
  z-index: 2 !important;
}

.chat-support-callout-close:hover {
  background: rgba(0, 0, 0, 0.12) !important;
  color: #18181b !important;
  transform: scale(1.1) !important;
}

.chat-support-callout.chat-callout-hidden,
.chat-support-callout.chat-callout-dismissed {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@keyframes chat-callout-in { from { opacity: 0; transform: translateY(8px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Message Animations */
.chat-message { animation: n8n-chat-message-in 0.2s ease-out; }
@keyframes n8n-chat-message-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-messages-list { scrollbar-width: thin; scrollbar-color: #ffd8b8 transparent; }
.chat-messages-list::-webkit-scrollbar { width: 6px; }
.chat-messages-list::-webkit-scrollbar-thumb { background-color: #ffd8b8; border-radius: 999px; }

/* Markdown Formatting */
.chat-message-markdown { font-weight: 400 !important; }
.chat-message-markdown p { margin: 0 0 0.65rem 0 !important; }
.chat-message-markdown p:last-child { margin-bottom: 0 !important; }
.chat-message-markdown strong, .chat-message-markdown b { font-weight: 700 !important; }
.chat-message-markdown ul, .chat-message-markdown ol { margin: 0.4rem 0 0.65rem 0 !important; padding-left: 1.4rem !important; list-style-position: outside !important; }
.chat-message-markdown ul { list-style-type: disc !important; }
.chat-message-markdown ol { list-style-type: decimal !important; }
.chat-message-markdown li { margin: 0.3rem 0 !important; padding-left: 0.15rem !important; }
.chat-message-markdown li > ul, .chat-message-markdown li > ol { margin: 0.3rem 0 0.3rem 0 !important; }
.chat-message-markdown li::marker { color: var(--chat--color-primary); font-weight: 600; }
.chat-message-markdown a { color: var(--chat--color-secondary) !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 2px; }
.chat-message-markdown a:hover { color: #ff3d9e !important; }
.chat-message-markdown code { background: rgba(255, 107, 53, 0.1); color: #d9581a; padding: 0.15rem 0.4rem; border-radius: 0.35rem; font-size: 0.85em; font-family: monospace; }
.chat-message-markdown pre { background: #16225c; color: #e2e8f0; padding: 0.85rem 1rem; border-radius: 0.6rem; overflow-x: auto; margin: 0.5rem 0; }
.chat-message-markdown pre code { background: transparent; color: inherit; padding: 0; }
.chat-message-markdown blockquote { border-left: 3px solid var(--chat--color-primary); margin: 0.5rem 0 !important; padding: 0.3rem 0 0.3rem 0.85rem; color: #475569; font-style: italic; }
.chat-message-markdown h1, .chat-message-markdown h2, .chat-message-markdown h3 { font-weight: 700 !important; margin: 0.6rem 0 0.4rem 0 !important; line-height: 1.3 !important; }
.chat-message-markdown h1 { font-size: 1.25rem !important; }
.chat-message-markdown h2 { font-size: 1.15rem !important; }
.chat-message-markdown h3 { font-size: 1.05rem !important; }
.chat-message-markdown hr { border: none; border-top: 1px solid var(--chat--color-light-shade-50); margin: 0.75rem 0; }
.chat-message-markdown table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; font-size: 0.9em; }
.chat-message-markdown th, .chat-message-markdown td { border: 1px solid var(--chat--color-light-shade-50); padding: 0.4rem 0.6rem; text-align: left; }
.chat-message-markdown th { background: var(--chat--color-light); font-weight: 600 !important; }

/* Added */
.chat-window-wrapper .chat-window-toggle { background: transparent !important; }
.chat-window-toggle:not(.n8n-chat-toggle-open)::after {
  content: "Support Chat";
  position: absolute;
  width: 230px !important;
  height: 50px !important;
  box-sizing: border-box !important;
  background: #FD6B47;
  background: linear-gradient(45deg, rgba(253, 107, 71, 1) 0%, rgba(245, 69, 144, 1) 34%, rgba(157, 55, 225, 1) 100%);
  transition: 0.5s ease !important;
  border-radius: 100px;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 22px;
  padding-right: 65px;
  font-family: 'Poppins', sans-serif !important;
  font-size: 19px;
  font-weight: 600;
  color: #ffffff !important;
  white-space: nowrap !important;
  padding-bottom: 2px;
}

.chat-window-toggle.n8n-chat-toggle-open {
  background: #FD6B47;
  background: linear-gradient(45deg, rgba(253, 107, 71, 1) 0%, rgba(245, 69, 144, 1) 34%, rgba(157, 55, 225, 1) 100%) !important;
  width: 60px !important;
  height: 60px !important;
}

.chat-layout .chat-header { gap: 0 !important; padding: 20px 0 20px 30px !important; background-image: url(https://trg-cdn.s3.ap-southeast-2.amazonaws.com/chatbot/Message%20Banner%20Background.webp) !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important; }
.chat-header::after { background-image: url(https://trg-cdn.s3.ap-southeast-2.amazonaws.com/chatbot/eBot%20-%20Banner%20Img%204.webp) !important; }
.chat-message.chat-message-from-bot:not(.chat-message-transparent) { background: transparent !important; padding-bottom: 0;  }
.chat-message-from-bot::before { background-image: url(https://trg-cdn.s3.ap-southeast-2.amazonaws.com/chatbot/eBot%20Profile.webp) !important; box-shadow: none !important; }
.chat-header .chat-heading h1 { font-weight: 700 !important; font-family: 'Poppins' !important; }
.chat-header p, .n8n-markdown.chat-message-markdown p { font-family: 'Poppins' !important; }
.chat-inputs-controls, .chat-input { display: flex !important ; align-items: center !important; }
.chat-inputs { background: transparent !important; align-items: center !important; display: flex !important; }
button.chat-input-file-button, button.chat-input-send-button { width: 20px !important; margin: 0 8px !important; }
.chat-input { border: none !important; box-shadow: 0 2px 5px -3px #5d5d5d !important; }
.chat-input-send-button:hover:not(:disabled){ transform: none !important; }

/* Left-Side Widget & Callout Positioning */
.chat-window-toggle.chat-side-left:not(.n8n-chat-toggle-open)::after {
  left: 0 !important;
  right: auto !important;
  width: 230px !important;
  height: 50px !important;
  box-sizing: border-box !important;
  background: linear-gradient(45deg, rgba(157, 55, 225, 1) 0%, rgba(245, 69, 144, 1) 66%, rgba(253, 107, 71, 1) 100%) !important;
  padding-left: 76px !important;
  padding-right: 22px !important;
}

.chat-window-toggle.chat-side-left:not(.n8n-chat-toggle-open)::before {
  transform: translate(-50%, -50%) scaleX(-1) !important;
}

.chat-support-callout.chat-side-left {
  left: 25px !important;
  right: auto !important;
}

.chat-support-callout.chat-side-left::after {
  left: 34px !important;
  right: auto !important;
}

.chat-header,
.chat-window-toggle,
.chat-support-callout {
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
}

.chat-header:active,
.chat-window-toggle:active,
.chat-support-callout:active {
  cursor: grabbing !important;
}

/* Semi-transparent state while actively dragging */
.chat-is-dragging,
.chat-window-wrapper.chat-is-dragging,
.chat-window-toggle.chat-is-dragging {
  opacity: 0.65 !important;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.25)) !important;
  transition: opacity 0.15s ease !important;
}

/* Hide the callout bubble during active drag to eliminate visual clutter */
.chat-support-callout.chat-drag-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.9) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}