/* chat-custom.css */
.n8n-chat {
  /* Brand palette */
  --mm-black: #113025;
  --mm-white: #ffffff;
  --mm-grey: #f9f8f5;

  --mm-border: rgba(17, 48, 37, 0.12);
  --mm-border-strong: rgba(17, 48, 37, 0.20);

  --mm-radius: 2px;

  /* Above the storefront nav/header layer (120000), below critical full-page overlays. */
  --chat--window--z-index: 120001;

  /* Shadows */
  --mm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --mm-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --mm-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12);

  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mm-black);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   Window
   ========================= */
.n8n-chat .chat-window {
  border-radius: var(--mm-radius) !important;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--mm-white);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-lg);
}

/*
 * WebKit can leave the chat subtree unpainted when an overflow-hidden window
 * opens from the vendor's transform: scale(0) transition. Keep the fade on
 * iOS, but do not move the window onto that broken transform paint path.
 */
@supports (-webkit-touch-callout: none) {
  .n8n-chat .chat-window.chat-window-transition-enter-active,
  .n8n-chat .chat-window.chat-window-transition-leave-active {
    transition-property: opacity !important;
  }

  .n8n-chat .chat-window.chat-window-transition-enter-from,
  .n8n-chat .chat-window.chat-window-transition-leave-to {
    transform: none !important;
  }
}

/* Allow the hint bubble to render outside the window */
.n8n-chat .chat-window-wrapper {
  overflow: visible !important;

  /* Preserve the storefront-specific sticky-header clearance outside the vendor CSS. */
  max-height: calc(100% - var(--chat--window--bottom, var(--chat--spacing)) * 2 - 130px);
}

/* Layout backgrounds */
.n8n-chat .chat-layout,
.n8n-chat .chat-wrapper,
.n8n-chat .chat-body,
.n8n-chat .chat-footer {
  background: var(--mm-grey) !important;
}

.n8n-chat .chat-header {
  background: linear-gradient(180deg, #1a4435 0%, #113025 100%) !important;
  color: var(--mm-white) !important;
  border-bottom: none;

  padding: 14px 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.n8n-chat .chat-header .chat-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  text-align: center;

  position: relative;
  z-index: 2;
}

/* Hide the 2nd line title ("My Moissanite AI") */
.n8n-chat .mm-header-title {
  display: none !important;
}

/* The WhatsApp fallback text is moved into a collapsible panel in the body via JS */
.n8n-chat .chat-header > p {
  display: none !important;
}

.n8n-chat .mm-header-controls {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  right: 16px;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;

  /* prevents the empty middle area from blocking clicks on the centered heading */
  pointer-events: none;

  z-index: 3;
}

.n8n-chat .mm-header-controls > * {
  pointer-events: auto;
}

/* =========================
   Header Logo
   ========================= */
.n8n-chat .mm-header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.n8n-chat .mm-header-logo-img {
  height: 26px;
  width: auto;
}

.n8n-chat .mm-support-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;

  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2px;
  padding: 9px 12px;

  border-radius: var(--mm-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.n8n-chat .mm-support-toggle span[aria-hidden="true"] {
  font-size: 11px;
  opacity: 0.85;
}

/* Make the panel visible even when the user is scrolled down in the conversation */
.n8n-chat .mm-support-panel {
  position: sticky;
  top: 0;
  z-index: 7;

  padding: 10px 16px;
  border-bottom: 1px solid var(--mm-border);
  background: var(--mm-grey);
}

.n8n-chat .mm-support-panel-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--mm-black);
}

.n8n-chat .mm-reset-session {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;

  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2px;
  padding: 9px 12px;

  border-radius: var(--mm-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.n8n-chat .mm-reset-session span[aria-hidden="true"] {
  font-size: 11px;
  opacity: 0.85;
  transition: transform 0.3s ease;
}

.n8n-chat .mm-chat-close {
  display: none !important;
}

/* =========================
   Messages Area
   ========================= */
.n8n-chat .chat-body {
  position: relative;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  /*
   * Never add -webkit-overflow-scrolling: touch here. It moves the message
   * area onto a legacy composited scroll layer, and when the v-show'd window
   * goes display:none -> visible on reopen, iOS Safari can reattach that
   * cached layer without repainting it: the window opens as a blank white
   * panel. iOS >= 13 has momentum scrolling by default anyway.
   */
}

.n8n-chat .chat-layout {
  /* Keep one vertical scroller; nested scroll containers leak touch gestures to the page on iOS. */
  overflow: hidden !important;
}

.n8n-chat .chat-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(180deg, rgba(249, 248, 245, 0.9) 0%, rgba(249, 248, 245, 0) 100%);
  pointer-events: none;
  z-index: 5;
}

.n8n-chat .chat-messages-list {
  padding: 12px 16px 20px !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  gap: 10px;
}

.n8n-chat .chat-messages-list > .chat-message {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  animation: messageSlideIn 0.25s ease-out;
}

.n8n-chat .chat-messages-list > .chat-message.chat-message-from-user,
.n8n-chat .chat-messages-list > .chat-message.chat-message-from-bot {
  display: flex !important;
  align-items: flex-start !important;
}

.n8n-chat .chat-messages-list > .chat-message.chat-message-from-user {
  justify-content: flex-end !important;
}

.n8n-chat .chat-messages-list > .chat-message.chat-message-from-bot {
  justify-content: flex-start !important;
}

.n8n-chat .chat-message,
.n8n-chat .chat-message-from-bot,
.n8n-chat .chat-message-from-user,
.n8n-chat .chat-message-actions,
.n8n-chat .chat-message-markdown {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================
   Message Bubbles
   ========================= */
.n8n-chat .chat-message-markdown {
  max-width: 74%;
  padding: 12px 14px !important;
  border-radius: var(--mm-radius) !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.1px;
}

.n8n-chat .chat-message-from-bot .chat-message-markdown {
  background: var(--mm-white) !important;
  color: var(--mm-black) !important;
  border: 1px solid var(--mm-border) !important;
  box-shadow: var(--mm-shadow-sm) !important;
  border-left: 2px solid #d4a837 !important;
}

.n8n-chat .chat-message-from-user .chat-message-markdown {
  background: var(--mm-black) !important;
  color: var(--mm-white) !important;
  border: none !important;
  box-shadow: var(--mm-shadow-md) !important;
}

.n8n-chat .chat-message-from-user *[style*="background"],
.n8n-chat .chat-message-from-bot *[style*="background"] {
  background: inherit !important;
}

/* Markdown typography */
.n8n-chat .chat-message-markdown p {
  margin: 0;
}

.n8n-chat .chat-message-markdown p + p {
  margin-top: 10px;
}

.n8n-chat .chat-message-markdown a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}

.n8n-chat .chat-message-markdown a:hover {
  opacity: 0.75;
}

.n8n-chat .chat-message-markdown ul,
.n8n-chat .chat-message-markdown ol {
  margin: 8px 0;
  padding-left: 20px;
}

.n8n-chat .chat-message-markdown li {
  margin: 4px 0;
}

/* =========================
   Input Area
   ========================= */
.n8n-chat .chat-footer {
  border-top: 1px solid var(--mm-border);
  background: var(--mm-white) !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.n8n-chat .chat-input {
  padding: 14px 16px !important;
  background: var(--mm-white) !important;
}

.n8n-chat .chat-inputs {
  display: grid !important;
  grid-template-columns: 1fr 46px;
  gap: 10px;

  /* keep the send button pinned to the bottom as the textarea grows */
  align-items: end;
}

.n8n-chat textarea[data-test-id="chat-input"] {
  height: 46px;
  min-height: 46px !important;
  max-height: 220px !important;

  resize: none !important;
  width: 100%;
  box-sizing: border-box;

  font-family: inherit;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.1px;

  padding: 10px 14px !important;
  border-radius: var(--mm-radius) !important;
  border: 1px solid var(--mm-border-strong) !important;
  background: var(--mm-grey) !important;
  color: var(--mm-black) !important;
  outline: none;

  overflow-y: hidden;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.n8n-chat textarea[data-test-id="chat-input"]:hover {
  border-color: rgba(17, 48, 37, 0.30) !important;
}

.n8n-chat textarea[data-test-id="chat-input"]:focus {
  border-color: rgba(17, 48, 37, 0.45) !important;
  background: var(--mm-white) !important;
  box-shadow: 0 0 0 3px rgba(17, 48, 37, 0.06) !important;
}

.n8n-chat textarea[data-test-id="chat-input"]::placeholder {
  color: rgba(17, 48, 37, 0.45);
}

.n8n-chat .chat-inputs-controls {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  color: var(--mm-black) !important;
}

.n8n-chat .chat-input-send-button {
  align-self: end;
}

/* =========================
   Send Button
   ========================= */
.n8n-chat .chat-input-send-button {
  width: 46px !important;
  height: 46px !important;
  border-radius: var(--mm-radius) !important;
  border: 1px solid var(--mm-border-strong) !important;
  background: var(--mm-black) !important;
  color: var(--mm-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

.n8n-chat .chat-input-send-button:hover:enabled {
  background: #1a4435 !important;
  border-color: rgba(17, 48, 37, 0.35) !important;
  box-shadow: var(--mm-shadow-sm);
  transform: translateY(-1px);
}

.n8n-chat .chat-input-send-button:active:enabled {
  transform: translateY(0) scale(0.97);
}

.n8n-chat .chat-input-send-button:disabled {
  background: var(--mm-grey) !important;
  border-color: var(--mm-border) !important;
  color: rgba(17, 48, 37, 0.30) !important;
  cursor: not-allowed;
}

.n8n-chat .chat-input-send-button svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.n8n-chat .chat-input-send-button:hover:enabled svg {
  transform: translateX(1px);
}

.n8n-chat .chat-input-send-button svg,
.n8n-chat .chat-input-send-button path {
  color: currentColor !important;
  fill: currentColor !important;
}

/* =========================
   Toggle Button
   ========================= */
.n8n-chat .chat-window-toggle {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--mm-black) !important;
  color: var(--mm-white) !important;
  border: none;
  box-shadow: var(--mm-shadow-lg);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.n8n-chat .chat-window-toggle:hover {
  transform: scale(1.05);
  background: #1a4435 !important;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22), 0 6px 14px rgba(0, 0, 0, 0.15);
}

.n8n-chat .chat-window-toggle:active {
  transform: scale(0.98);
}

.n8n-chat .chat-window-toggle svg {
  width: 26px;
  height: 26px;
  transition: transform 0.3s ease;
}

/* =========================
   Scrollbars
   ========================= */
.n8n-chat *::-webkit-scrollbar {
  width: 8px;
}

.n8n-chat *::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.n8n-chat *::-webkit-scrollbar-thumb {
  background: rgba(17, 48, 37, 0.15);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background 0.2s ease;
}

.n8n-chat *::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 48, 37, 0.28);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* =========================
   Typing Indicator
   ========================= */
.n8n-chat .chat-message-typing {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.n8n-chat .chat-message-typing-body {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 16px 20px !important;
  background: var(--mm-white) !important;
  border: 1px solid var(--mm-border) !important;
  border-left: 2px solid #d4a837 !important;
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow-sm) !important;
}

.n8n-chat .chat-message-typing-circle {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  background: rgba(17, 48, 37, 0.45) !important;
  border-radius: 50% !important;
  border: none !important;
  display: block !important;
  animation: mmTypingBounce 1.4s ease-in-out infinite !important;
}

.n8n-chat .chat-message-typing-circle:nth-child(1) { animation-delay: 0s !important; }
.n8n-chat .chat-message-typing-circle:nth-child(2) { animation-delay: 0.15s !important; }
.n8n-chat .chat-message-typing-circle:nth-child(3) { animation-delay: 0.3s !important; }

/* =========================
   Typing Wait Message
   ========================= */
.n8n-chat .mm-typing-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  margin-left: 4px;
  padding: 10px 14px;
  max-width: 74%;
  background: rgba(17, 48, 37, 0.06);
  border-radius: var(--mm-radius);
  border: 1px solid rgba(17, 48, 37, 0.12);
  border-left: 2px solid #d4a837;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(17, 48, 37, 0.75);
  letter-spacing: 0.1px;
  animation: mmFadeIn 0.4s ease-out;
}

.n8n-chat .mm-typing-message-icon {
  font-size: 13px;
  flex-shrink: 0;
  animation: mmSparkle 2s ease-in-out infinite;
}

.n8n-chat .mm-typing-message-text {
  flex: 1;
}

/* =========================
   Chat Hint Bubble
   ========================= */
.n8n-chat .mm-chat-bubble {
  position: absolute;
  right: 0;
  bottom: 76px; /* above the 58px toggle button */
  max-width: 320px;

  background: var(--mm-white);
  border: 1px solid rgba(17, 48, 37, 0.10);
  border-radius: 2px;
  box-shadow: var(--mm-shadow-md);

  padding: 14px 16px;
  cursor: pointer;
  user-select: none;

  z-index: 30;
  animation: mmBubbleIn 0.35s ease-out;
}

.n8n-chat .mm-chat-bubble__content {
  padding-right: 30px; /* keep text away from the X */
}

.n8n-chat .mm-chat-bubble__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.n8n-chat .mm-chat-bubble__text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--mm-black);
}

/* X button */
.n8n-chat .mm-chat-bubble__close {
  position: absolute;
  top: 10px;   /* adds the "margin" look */
  right: 10px; /* adds the "margin" look */

  width: 26px;
  height: 26px;

  /* force 2px */
  border-radius: var(--mm-radius) !important;

  border: 1px solid rgba(17, 48, 37, 0.12);
  background: rgba(249, 248, 245, 0.98);
  color: rgba(17, 48, 37, 0.75);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;

  cursor: pointer;
}

.n8n-chat .mm-chat-bubble__close:hover {
  background: rgba(249, 248, 245, 1);
  color: rgba(17, 48, 37, 0.9);
}

/* =========================
   Animations
   ========================= */
@keyframes messageSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mmTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

@keyframes mmFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mmSparkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes mmBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 480px) {
  .n8n-chat .mm-header-title h1 {
    font-size: 16px;
  }

  .n8n-chat .mm-reset-session,
  .n8n-chat .mm-support-toggle,
  .n8n-chat .mm-chat-close {
    font-size: 12px;
    padding: 8px 10px;
    gap: 6px;
  }

  .n8n-chat .mm-chat-close {
    padding: 8px 9px;
  }

  .n8n-chat .mm-reset-session span[aria-hidden="true"],
  .n8n-chat .mm-support-toggle span[aria-hidden="true"] {
    font-size: 12px;
  }

  .n8n-chat .chat-message-markdown,
  .n8n-chat .mm-typing-message {
    max-width: 86%;
  }

  .n8n-chat .mm-header-logo-img {
    margin-right: 0 !important;
  }

.n8n-chat .mm-chat-bubble {
  position: absolute;
  right: 0;
  bottom: 76px;
  max-width: 320px;

  background: var(--mm-white);
  border: 1px solid rgba(17, 48, 37, 0.10);

  /* force 2px */
  border-radius: var(--mm-radius) !important;

  box-shadow: var(--mm-shadow-md);

  padding: 14px 16px;
  cursor: pointer;
  user-select: none;

  z-index: 5; /* keep low */
}


  .n8n-chat .mm-chat-bubble__text {
    font-size: 13px;
  }

  #n8n-chat .mm-chat-bubble__text {
    white-space: normal !important;
  }
}

/* Extra small screens */
@media (max-width: 320px) {
  .n8n-chat .mm-header-title h1 {
    font-size: 14px;
  }

  .n8n-chat .mm-reset-session span:not([aria-hidden]),
  .n8n-chat .mm-support-toggle span:not([aria-hidden]) {
    display: none;
  }

  .n8n-chat .mm-chat-bubble {
    max-width: 230px;
  }

  .n8n-chat .mm-chat-bubble__text {
    font-size: 14px;
  }
}

/* =========================
   Reduced Motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .n8n-chat *,
  .n8n-chat *::before,
  .n8n-chat *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.n8n-chat .mm-support-toggle { order: 1; }
.n8n-chat .mm-reset-session { order: 2; }

.n8n-chat .chat-window {
  position: relative;
  z-index: 20;
}

.n8n-chat .chat-window-toggle {
  position: relative;
  z-index: 10;
}
/* =========================
   FINAL bubble override (paste at very bottom)
   ========================= */

#n8n-chat .mm-chat-bubble {
  border-radius: 2px !important;
  overflow: hidden !important;            /* makes the 2px corners actually clip */
  max-width: none !important;
  width: auto !important;
}

/* =========================
   Bigger chat window / better responsive sizing
   ========================= */
.n8n-chat {
  --chat--window--width: 480px;
  --chat--window--height: min(640px, calc(100vh - 170px));
  --chat--window--bottom: 20px;
}

@media (max-width: 600px), (max-height: 600px) and (hover: none) and (pointer: coarse) {
  .n8n-chat {
    --chat--window--width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    --chat--window--height: calc(100vh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    --chat--window--bottom: max(8px, env(safe-area-inset-bottom, 0px));
    --chat--window--right: max(8px, env(safe-area-inset-right, 0px));
  }

  .n8n-chat textarea[data-test-id="chat-input"] {
    /* Prevent iOS Safari from zooming the visual viewport when the composer receives focus. */
    font-size: 16px;
  }
}

/* =========================
   Bigger, more tappable header buttons (layout unchanged: logo centered, controls absolute)
   ========================= */
.n8n-chat .mm-support-toggle,
.n8n-chat .mm-reset-session {
  font-size: 14px;
  padding: 10px 14px;
  gap: 8px;
}

.n8n-chat .mm-support-toggle span[aria-hidden="true"],
.n8n-chat .mm-reset-session span[aria-hidden="true"] {
  font-size: 14px;
}

#n8n-chat .mm-chat-bubble__content {
  display: flex !important;
  align-items: center !important;
  padding-right: 30px !important;
}

#n8n-chat .mm-chat-bubble__text {
  white-space: nowrap !important;
}

#n8n-chat .mm-chat-bubble__close {
  border-radius: 2px !important;
  top: 10px !important;
  right: 10px !important;
}

.chat-powered-by {
  display: none !important;
}


/* =========================
   Overlay suppression
   =========================
   The launcher is fixed bottom-right at z-index 120001, above every storefront
   panel, so it keeps floating on top of whatever overlay currently owns the
   screen. On a phone its 58px circle lands exactly on the social row at the
   bottom of the open mobile menu and buries the WhatsApp icon there. Fold the
   launcher away for as long as an overlay is up; those panels carry their own
   contact links.

   Two state blocks on purpose: an unsupported :has() invalidates the whole
   selector list it appears in, so the plain-class hooks stay separate and the
   mobile menu keeps working everywhere. */
body.no-scroll,      /* mobile menu, drawers, desktop catalog menu */
body.modal-open {    /* Bootstrap modals: popup cart, info modals, cookie settings */
  --mm-chat-launcher-opacity: 0;
  --mm-chat-launcher-visibility: hidden;
  --mm-chat-launcher-events: none;
}

body:has(#overlay.active),                    /* shared storefront backdrop */
body:has(.ds-header-search.active),           /* mobile search overlay */
body:has(.ds-ff-dropdown.ocf-open),           /* category filter bottom sheet */
body:has(.ocf-container.ocf-mobile-active) {  /* OCFilter off-canvas */
  --mm-chat-launcher-opacity: 0;
  --mm-chat-launcher-visibility: hidden;
  --mm-chat-launcher-events: none;
}

/* Only the launcher and its hint, never .chat-window-wrapper: an open
   conversation must survive an overlay opening on top of it. */
.n8n-chat .chat-window-toggle,
.n8n-chat .mm-chat-bubble {
  opacity: var(--mm-chat-launcher-opacity, 1);
  visibility: var(--mm-chat-launcher-visibility, visible);
  pointer-events: var(--mm-chat-launcher-events, auto);
}