/* ============================================================
   n8n chat widget — BotBridge theme
   The widget's own stylesheet is inserted before this file on first
   click, so everything here overrides its defaults. Uses the site
   tokens from style.css (--blue, --cyan, --line, --grad-2, --ease…).
   ============================================================ */

:root{
  /* Colors */
  --chat--color--primary:var(--blue);
  --chat--color--primary-shade-50:var(--blue-bright);
  --chat--color--primary--shade-100:var(--navy);
  --chat--color--secondary:var(--cyan);
  --chat--color-secondary-shade-50:var(--blue);
  --chat--color-white:#fff;
  --chat--color-light:var(--ink);
  --chat--color-light-shade-50:var(--line);
  --chat--color-light-shade-100:var(--line);
  --chat--color-medium:var(--ink-dim);
  --chat--color-dark:var(--ink);
  --chat--color-disabled:rgba(128,149,176,.45);
  --chat--color-typing:var(--cyan);

  /* Base layout */
  --chat--spacing:1rem;
  --chat--border-radius:16px;
  --chat--transition-duration:.25s;
  --chat--font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Window */
  --chat--window--width:400px;
  --chat--window--height:min(620px,calc(100dvh - 190px));
  --chat--window--bottom:20px;
  --chat--window--right:20px;
  --chat--window--z-index:9999;
  --chat--window--border:1px solid var(--line-2);
  --chat--window--border-radius:24px;
  --chat--window--margin-bottom:14px;

  /* Header */
  --chat--header-height:auto;
  --chat--header--padding:18px 20px 16px 78px;
  --chat--header--background:transparent;
  --chat--header--color:var(--ink);
  --chat--header--border-top:none;
  --chat--header--border-bottom:1px solid var(--line);
  --chat--header--border-left:none;
  --chat--header--border-right:none;
  --chat--heading--font-size:1.25rem;
  --chat--subtitle--font-size:.84rem;
  --chat--subtitle--line-height:1.4;

  /* Messages */
  --chat--message--font-size:.95rem;
  --chat--message--padding:.72rem 1rem;
  --chat--message--border-radius:18px;
  --chat--message-line-height:1.55;
  --chat--message--margin-bottom:.6rem;
  --chat--message--bot--background:rgba(255,255,255,.05);
  --chat--message--bot--color:var(--ink);
  --chat--message--bot--border:1px solid var(--line);
  --chat--message--user--background:var(--blue);
  --chat--message--user--color:#03121F;
  --chat--message--user--border:none;
  --chat--message--pre--background:rgba(255,255,255,.06);
  --chat--messages-list--padding:18px 16px 12px;

  /* Toggle */
  --chat--toggle--size:62px;
  --chat--toggle--width:var(--chat--toggle--size);
  --chat--toggle--height:var(--chat--toggle--size);
  --chat--toggle--border-radius:50%;
  --chat--toggle--background:var(--grad-2);
  --chat--toggle--hover--background:var(--grad-2);
  --chat--toggle--active--background:var(--grad-2);
  --chat--toggle--color:#03121F;

  /* Input */
  --chat--textarea--height:48px;
  --chat--textarea--max-height:9rem;
  --chat--input--font-size:.95rem;
  --chat--input--border:0;
  --chat--input--border-radius:14px;
  --chat--input--padding:.8rem .95rem;
  --chat--input--background:transparent;
  --chat--input--text-color:var(--ink);
  --chat--input--line-height:1.5;
  --chat--input--placeholder--font-size:var(--chat--input--font-size);
  --chat--input--border-active:0;
  --chat--input--left--panel--width:2rem;
  --chat--input--send--button--background:transparent;
  --chat--input--send--button--color:var(--cyan);
  --chat--input--send--button--background-hover:rgba(59,232,255,.12);
  --chat--input--send--button--color-hover:#fff;
  --chat--input--file--button--background:transparent;
  --chat--input--file--button--color:var(--cyan);
  --chat--input--file--button--background-hover:rgba(59,232,255,.12);
  --chat--input--file--button--color-hover:#fff;
  --chat--files-spacing:.25rem;

  /* Buttons (e.g. "New conversation") */
  --chat--button--padding:.7rem 1.2rem;
  --chat--button--border-radius:999px;
  --chat--button--font-size:.94rem;
  --chat--button--line-height:1;
  --chat--button--color--primary:#03121F;
  --chat--button--background--primary:var(--blue);
  --chat--button--border--primary:none;
  --chat--button--color--primary--hover:#03121F;
  --chat--button--background--primary--hover:var(--cyan);
  --chat--button--border--primary--hover:none;
  --chat--button--color--primary--disabled:var(--ink-dim);
  --chat--button--background--primary--disabled:var(--bg-3);
  --chat--button--border--primary--disabled:none;
  --chat--button--color--secondary:var(--ink);
  --chat--button--background--secondary:var(--glass-2);
  --chat--button--border--secondary:1px solid var(--line-2);
  --chat--button--color--secondary--hover:var(--ink);
  --chat--button--background--secondary--hover:rgba(255,255,255,.1);
  --chat--button--border--secondary--hover:1px solid var(--line-2);
  --chat--button--color--secondary--disabled:var(--ink-dim);
  --chat--button--background--secondary--disabled:var(--glass);
  --chat--button--border--secondary--disabled:none;
  --chat--close--button--color-hover:var(--cyan);

  /* Body and footer */
  --chat--body--background:transparent;
  --chat--footer--background:rgba(5,11,20,.45);
  --chat--footer--color:var(--ink);
  --chat--footer--border-top:1px solid var(--line);
  --chat--footer--padding:12px;
}

/* ---------- Launcher (shown before the widget loads) ---------- */
.chat-launcher{
  position:fixed;right:var(--chat--window--right);bottom:var(--chat--window--bottom);z-index:var(--chat--window--z-index);
  width:var(--chat--toggle--width);height:var(--chat--toggle--height);border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;border:0;cursor:pointer;
  background:var(--grad-2);color:#03121F;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7),0 0 34px -6px rgba(59,232,255,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.chat-launcher svg{position:relative;transition:transform .4s var(--ease);}
.chat-launcher:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 36px -10px rgba(0,0,0,.75),0 0 48px -4px rgba(59,232,255,.75);}
.chat-launcher:hover svg{transform:rotate(-10deg) scale(1.06);}
.chat-launcher:active{transform:scale(.96);}
.chat-launcher:disabled{cursor:progress;}
.chat-launcher:disabled svg{animation:bb-chat-wait 1s ease-in-out infinite;}
.chat-launcher:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;}

/* hover label */
.chat-launcher-label{
  position:absolute;right:calc(100% + 12px);top:50%;white-space:nowrap;pointer-events:none;
  padding:8px 14px;border-radius:999px;font:600 .86rem/1 'DM Sans',system-ui,sans-serif;color:var(--ink);
  background:rgba(12,26,44,.92);border:1px solid var(--line-2);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8),0 0 24px -10px rgba(92,169,242,.6);
  opacity:0;transform:translate(8px,-50%);transition:opacity .3s ease,transform .4s var(--ease);
}
.chat-launcher:hover .chat-launcher-label,.chat-launcher:focus-visible .chat-launcher-label{opacity:1;transform:translate(0,-50%);}
@media (hover:none){.chat-launcher-label{display:none;}}

@keyframes bb-chat-wait{50%{transform:scale(.86);}}

/* ---------- Toggle (the widget's own button once loaded) ---------- */
.chat-window-wrapper .chat-window-toggle{
  background:var(--grad-2);color:#03121F;margin-left:auto;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7),0 0 34px -6px rgba(59,232,255,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.chat-window-wrapper .chat-window-toggle:hover,.chat-window-wrapper .chat-window-toggle:focus{
  background:var(--grad-2);transform:translateY(-3px) scale(1.05);
  box-shadow:0 16px 36px -10px rgba(0,0,0,.75),0 0 48px -4px rgba(59,232,255,.75);
}
.chat-window-wrapper .chat-window-toggle:active{background:var(--grad-2);transform:scale(.96);}

/* ---------- Window ---------- */
.chat-window-wrapper .chat-window{
  /* clip, not hidden: the drifting glow overflows, and an overflow:hidden box can still be
     scrolled sideways when a new message is scrolled into view */
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;transform-origin:bottom right;
  background:linear-gradient(160deg,rgba(14,28,48,.94),rgba(8,18,31,.92));
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow),0 0 70px -18px rgba(59,232,255,.32);
}
/* gradient hairline around the window */
.chat-window-wrapper .chat-window::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(150deg,rgba(59,232,255,.55),rgba(92,169,242,.12) 35%,transparent 60%,rgba(155,140,255,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* slow ambient glow behind the conversation */
.chat-window-wrapper .chat-window::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:340px;height:340px;top:-150px;right:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,232,255,.18),rgba(92,169,242,.08) 45%,transparent 70%);
  animation:bb-chat-drift 14s ease-in-out infinite;
}
@keyframes bb-chat-drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-70px,60px) scale(1.15);}}

/* open / close */
.chat-window-transition-enter-active{transition:transform .55s var(--ease),opacity .35s ease;}
.chat-window-transition-leave-active{transition:transform .25s ease,opacity .2s ease;}
.chat-window-transition-enter-from{opacity:0;transform:translateY(18px) scale(.9);}
.chat-window-transition-leave-to{opacity:0;transform:translateY(10px) scale(.96);}
/* reopened on a new page: the conversation should look like it never went away */
.chat-restoring .chat-window-transition-enter-active{transition:none;}
.chat-restoring .chat-window-transition-enter-from{opacity:1;transform:none;}

/* ---------- Header ---------- */
.chat-layout .chat-header{
  position:relative;gap:2px;
  background:linear-gradient(180deg,rgba(92,169,242,.1),rgba(92,169,242,0));
}
/* rotating gradient ring around the avatar */
.chat-layout .chat-header::before{
  content:"";position:absolute;left:18px;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--cyan),var(--blue),var(--violet),transparent 70%,var(--cyan));
  -webkit-mask:radial-gradient(circle,transparent 21px,#000 22px);mask:radial-gradient(circle,transparent 21px,#000 22px);
  animation:bb-chat-spin 6s linear infinite;
}
/* avatar: the BotBridge mark */
.chat-layout .chat-heading::before{
  content:"";position:absolute;left:22px;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:50%;
  background:var(--bg-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round'%3E%3Cg stroke='%23EAF2FB'%3E%3Cpath d='M50 13.5V22' stroke-width='5'/%3E%3Crect x='23' y='22' width='54' height='41' rx='12' stroke-width='5.5'/%3E%3Cpath d='M16 37v11M84 37v11' stroke-width='5.5'/%3E%3Cpath d='M40 48Q50 57 60 48' stroke-width='5'/%3E%3C/g%3E%3Cg fill='%23EAF2FB'%3E%3Ccircle cx='50' cy='9' r='4.5'/%3E%3Ccircle cx='39' cy='39' r='4.6'/%3E%3Ccircle cx='61' cy='39' r='4.6'/%3E%3C/g%3E%3Cg stroke='%235CA9F2' stroke-width='5'%3E%3Cpath d='M12 88c10-18 66-18 76 0'/%3E%3Cpath d='M31 76v12M69 76v12'/%3E%3C/g%3E%3C/svg%3E") center/24px no-repeat;
  box-shadow:0 0 22px -4px rgba(59,232,255,.45);
}
/* online dot */
.chat-layout .chat-header::after{
  content:"";position:absolute;left:52px;top:50%;margin-top:9px;width:11px;height:11px;border-radius:50%;
  background:#3DDC97;border:2px solid var(--bg-2);
  animation:bb-chat-online 2.4s ease-in-out infinite;
}
@keyframes bb-chat-spin{to{transform:rotate(360deg);}}
@keyframes bb-chat-online{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.55);}60%{box-shadow:0 0 0 6px rgba(61,220,151,0);}}

.chat-layout .chat-header h1{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0;
}
.chat-layout .chat-header p{color:var(--ink-dim);}
.chat-close-button{color:var(--ink-2);transition:color .2s ease,transform .3s var(--ease);}
.chat-close-button:hover{transform:rotate(90deg);}

/* ---------- Conversation ---------- */
.chat-layout .chat-body{scrollbar-width:thin;scrollbar-color:rgba(140,200,255,.22) transparent;}
.chat-layout .chat-body::-webkit-scrollbar{width:6px;}
.chat-layout .chat-body::-webkit-scrollbar-thumb{background:rgba(140,200,255,.22);border-radius:6px;}

.chat-message{animation:bb-chat-msg-in .5s var(--ease) both;}
.chat-message.chat-message-from-bot{border-bottom-left-radius:5px;transform-origin:bottom left;}
.chat-message.chat-message-from-user{border-bottom-right-radius:5px;transform-origin:bottom right;}
.chat-message.chat-message-from-user:not(.chat-message-transparent){
  background:var(--grad-2);font-weight:500;
  box-shadow:0 10px 26px -12px rgba(59,232,255,.65);
}
@keyframes bb-chat-msg-in{from{opacity:0;transform:translateY(10px) scale(.96);}}

/* formatted bot replies */
.chat-message-from-bot .n8n-markdown strong,.chat-message-from-bot .n8n-markdown b{color:#fff;}
.chat-message-from-bot .n8n-markdown a:not(:where(h1,h2,h3,h4,h5,h6) *){color:var(--cyan);text-decoration-color:rgba(59,232,255,.4);}
.chat-message-from-bot .n8n-markdown a:not(:where(h1,h2,h3,h4,h5,h6) *):hover{color:#fff;}
.chat-message-from-bot .n8n-markdown ul li::marker{color:var(--blue);}
.chat-message-from-bot .n8n-markdown ol li::marker{color:var(--blue);}
.chat-message-from-bot .n8n-markdown :not(pre)>code{background:rgba(255,255,255,.08);border-radius:6px;color:var(--ink);}
.chat-message-from-bot .n8n-markdown h1,.chat-message-from-bot .n8n-markdown h2,.chat-message-from-bot .n8n-markdown h3{color:#fff;font-family:'Space Grotesk',system-ui,sans-serif;}

/* typing indicator */
.chat-message-typing .chat-message-typing-circle{
  width:7px;height:7px;margin:3px;background:var(--cyan);box-shadow:0 0 10px rgba(59,232,255,.7);
}
.chat-message-typing.chat-message-typing-animation-scaling .chat-message-typing-circle,
.chat-message-typing.chat-message-typing-animation-bouncing .chat-message-typing-circle{
  animation:bb-chat-typing 1.1s ease-in-out infinite;
}
.chat-message-typing .chat-message-typing-circle:nth-child(2){animation-delay:.15s;}
.chat-message-typing .chat-message-typing-circle:nth-child(3){animation-delay:.3s;}
@keyframes bb-chat-typing{0%,70%,100%{opacity:.35;transform:translateY(0);}35%{opacity:1;transform:translateY(-5px);}}

/* ---------- Input ---------- */
.chat-window .chat-inputs{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;
  transition:border-color .25s ease,box-shadow .35s var(--ease),background .25s ease;
}
.chat-window .chat-inputs:focus-within{
  background:rgba(255,255,255,.06);border-color:rgba(59,232,255,.45);
  box-shadow:0 0 0 3px rgba(59,232,255,.1),0 0 32px -10px rgba(59,232,255,.55);
}
.chat-window .chat-inputs textarea{background:transparent;color:var(--ink);caret-color:var(--cyan);outline:none;resize:none;scrollbar-width:none;}
.chat-window .chat-inputs textarea::-webkit-scrollbar{display:none;}
.chat-window .chat-inputs textarea::placeholder{color:var(--ink-dim);}
.chat-window .chat-input-send-button{border-radius:12px;transition:background .2s ease,color .2s ease,transform .3s var(--ease);}
.chat-window .chat-input-send-button:hover:not([disabled]){transform:translateX(2px);}
.chat-window .chat-input-send-button:not([disabled]) svg{filter:drop-shadow(0 0 6px rgba(59,232,255,.55));}

/* ---------- Small screens ---------- */
@media (max-width:480px){
  :root{--chat--window--bottom:14px;--chat--window--right:14px;--chat--toggle--size:56px;--chat--window--width:calc(100vw - 28px);}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .chat-window-wrapper .chat-window::after,
  .chat-layout .chat-header::before,
  .chat-layout .chat-header::after,
  .chat-message{animation:none;}
  .chat-launcher,.chat-launcher svg,.chat-launcher-label,
  .chat-window-wrapper .chat-window-toggle,
  .chat-window-transition-enter-active,.chat-window-transition-leave-active{transition:opacity .2s ease;}
  .chat-launcher:hover,.chat-window-wrapper .chat-window-toggle:hover{transform:none;}
  .chat-message-typing .chat-message-typing-circle{animation-duration:2s;}
}