/*
 * n8n Chatbot Widget — brand & layout overrides for @n8n/chat (window mode).
 *
 * Brand colour and sender labels come from CSS variables printed by the plugin
 * (see inc/render.php → n8nchat_root_css): --fsc-primary, --fsc-primary-dark,
 * --fsc-primary-rgb, --fsc-bot-label, --fsc-user-label. The n8n geometry/spacing
 * variables below are static defaults shared across every site.
 */

:root {
  /* Rounded, smooth geometry — kills the "blocky" feel */
  --chat--border-radius: 14px;
  --chat--window--border-radius: 18px;
  --chat--message--border-radius: 16px;
  --chat--input--border-radius: 12px;
  --chat--input--container--border-radius: 14px;
  --chat--input--button--border-radius: 14px;
  --chat--button--border-radius: 10px;

  /* Sizing & rhythm */
  --chat--window--width: 400px;
  --chat--window--height: 620px;
  --chat--toggle--size: 60px;
  --chat--spacing: 1rem;
  --chat--message--font-size: 14px;
  --chat--message-line-height: 1.55;
  --chat--message--padding: 12px 15px;
  --chat--transition-duration: .25s;
  --chat--font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Header — compact */
  --chat--header--color: #ffffff;
  --chat--header--padding: 13px 18px;
  --chat--heading--font-size: 18px;
  --chat--subtitle--font-size: 13px;
  --chat--subtitle--line-height: 1.45;

  /* Messages */
  --chat--color-light: #f4f6f9;
  --chat--color-dark: #212121;
  --chat--body--background: #f4f6f9;
  --chat--message--bot--background: #ffffff;
  --chat--message--bot--color: #212121;
  --chat--message--user--color: #ffffff;

  /* Input — sleek inset field, no divider line, margin all round */
  --chat--textarea--height: 40px;
  --chat--footer--background: #ffffff;
  --chat--footer--border-top: none;
  --chat--footer--padding: 16px;
  --chat--input--container--background: #f1f4f8;
  --chat--input--container--border: 1px solid #e6e9f1;
  --chat--input--container--border-radius: 16px;
  --chat--input--container--padding: 6px;
  --chat--input--background: transparent;
  --chat--input--padding: 8px 14px;   /* balanced top/bottom → single line sits vertically centred */

  /* Brand-coloured n8n vars (fall back to the dynamic --fsc-primary the plugin prints) */
  --chat--header--background: var(--fsc-primary, #1779bb);
  --chat--message--user--background: var(--fsc-primary, #1779bb);
}

/* Soft, modern window: drop the hard border, add depth, clip to the radius */
.chat-window {
  border: none !important;
  box-shadow: 0 18px 50px rgba(17, 28, 45, .22) !important;
  overflow: hidden !important;
}
/* Sleek gradient header — tighter title/subtitle gap so it's shorter */
.chat-header {
  background: linear-gradient(135deg, var(--fsc-primary) 0%, var(--fsc-primary-dark) 100%) !important;
  gap: 5px !important;
  position: relative !important;
}
.chat-header h1 { margin: 0 !important; padding-right: 96px !important; }
.chat-header p  { margin: 0 !important; padding-right: 96px !important; }
/* Floating toggle: gradient + glow + hover lift */
.chat-window-toggle {
  background: linear-gradient(135deg, var(--fsc-primary) 0%, var(--fsc-primary-dark) 100%) !important;
  box-shadow: 0 8px 22px rgba(var(--fsc-primary-rgb), .45) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.chat-window-toggle:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 12px 28px rgba(var(--fsc-primary-rgb), .55) !important;
}
/* Message bubbles: subtle lift, comfortable width, smooth entrance.
   overflow:visible lets the sender label (::before, below) sit ABOVE the bubble —
   the widget defaults to overflow:hidden, which would clip it. Text is padded so
   the rounded corners still look clean. */
.chat-message {
  position: relative !important;
  overflow: visible !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important;
  max-width: 88% !important;
  animation: fsc-msg-in .28s ease both;
}
.chat-message-from-user { margin-left: auto !important; }
@keyframes fsc-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Sender "eyebrow" label above each message (text comes from --fsc-bot-label /
   --fsc-user-label; the plugin hides these when no bot label is configured) */
.chat-messages-list .chat-message { margin-top: 24px !important; }
.chat-message.chat-message-from-bot::before,
.chat-message.chat-message-from-user::before {
  position: absolute;
  top: -16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.chat-message.chat-message-from-bot::before  { content: var(--fsc-bot-label, ""); left: 2px;  color: var(--fsc-primary); }
.chat-message.chat-message-from-user::before { content: var(--fsc-user-label, "You"); right: 2px; color: #8a93a0; }
/* Sleek inset input field — no divider line, blue focus ring */
.chat-footer { border-top: none !important; }
.chat-inputs {
  align-items: center !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.chat-inputs:focus-within {
  border-color: var(--fsc-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--fsc-primary-rgb), .12) !important;
}
/* Smaller textarea, single line vertically centred.
   !important beats the inline height the widget's auto-resize sets;
   line-height == content-box height centres the one line. */
.chat-inputs textarea {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 24px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
/* slim scrollbar */
.chat-messages-list::-webkit-scrollbar { width: 8px; }
.chat-messages-list::-webkit-scrollbar-thumb { background: #cfd8e3; border-radius: 8px; }
.chat-messages-list::-webkit-scrollbar-track { background: transparent; }

/* Clickable links in bot replies — brand colour, and kill the default
   "(https://full-url)" suffix the widget appends after every link */
.chat-message-markdown a,
.chat-message a {
  color: var(--fsc-primary) !important;
  text-decoration: underline !important;
  font-weight: 600;
}
.chat-message-markdown a:hover,
.chat-message a:hover { color: var(--fsc-primary-dark) !important; }
.chat-message-markdown a[href^="http"]::after { content: "" !important; }

/* "Copy" pill at the bottom of each bot reply (injected via JS) */
.fsc-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--fsc-primary);
  background: rgba(var(--fsc-primary-rgb), .08);
  border: 1px solid rgba(var(--fsc-primary-rgb), .22);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease;
}
.fsc-copy:hover { background: rgba(var(--fsc-primary-rgb), .16); }
.fsc-copy svg { display: block; }

/* "New chat" button (injected into the header) */
.fsc-newchat {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background .15s ease;
}
.fsc-newchat:hover { background: rgba(255, 255, 255, .3); }

/* Remove the "Powered by n8n" footer link */
[class*="poweredBy"],
[class*="powered-by"],
[class*="chat"] a[href*="n8n.io"] { display: none !important; }

/* Three bouncing dots while the bot is thinking
   (overrides the widget's default 3.6s-delayed, static-looking dots) */
@keyframes fsc-chat-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: .4; }
  40%           { transform: translateY(-6px); opacity:  1; }
}
.chat-message-typing .chat-message-typing-circle {
  animation: fsc-chat-bounce .9s ease-in-out 0s infinite !important;
  background-color: var(--chat--color-primary, var(--fsc-primary)) !important;
}
.chat-message-typing .chat-message-typing-circle:nth-child(2) { animation-delay: .18s !important; }
.chat-message-typing .chat-message-typing-circle:nth-child(3) { animation-delay: .36s !important; }

/* Near-fullscreen on small phones */
@media (max-width: 480px) {
  :root {
    --chat--window--width: calc(100vw - 24px);
    --chat--window--height: calc(100dvh - 110px);
  }
}