:root {
--chat--color--primary: #0bb4cd;
--chat--color--primary-shade-50: #099fb6;
--chat--color--primary--shade-100: #08899d;
--chat--color--secondary: #0bb4cd;
--chat--color-secondary-shade-50: #099fb6;
--chat--color-white: #ffffff;
--chat--color-light: #f5f7f9;
--chat--color-dark: #0f172a;
--chat--font-family: "Outfit", sans-serif;
--chat--border-radius: 12px;
--chat--window--z-index: 99999;
--chat--window--border-radius: 16px;
--chat--header--background: #0f172a;
--chat--header--color: #ffffff;
--chat--heading--font-size: 1.35rem;
--chat--message--bot--background: #ffffff;
--chat--message--bot--color: #0f172a;
--chat--message--user--background: #0bb4cd;
--chat--message--user--color: #ffffff;
--chat--toggle--background: #0bb4cd;
--chat--toggle--hover--background: #099fb6;
--chat--toggle--active--background: #08899d;
--chat--button--background--primary: #0bb4cd;
--chat--button--background--primary--hover: #099fb6;
--chat--input--send--button--color: #0bb4cd;
--gmb-chat-logo: none;
}
#n8n-chat-launcher {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 99999;
display: flex;
width: 64px;
height: 64px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: #0bb4cd;
color: #ffffff;
cursor: pointer;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.25);
transition: background 0.2s ease, transform 0.2s ease;
}
#n8n-chat-launcher:hover {
background: #099fb6;
transform: scale(1.05);
}
#n8n-chat-launcher:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
#n8n-chat-launcher:disabled {
cursor: wait;
opacity: 0.7;
}
#n8n-chat-launcher svg {
width: 32px;
height: 32px;
}
.chat-window-wrapper {
inset: 0 !important;
right: 0 !important;
bottom: 0 !important;
max-width: none !important;
max-height: none !important;
align-items: center;
justify-content: center;
pointer-events: none;
}
.chat-window-wrapper .chat-window {
width: min(560px, calc(100vw - 48px)) !important;
height: min(600px, calc(100dvh - 48px)) !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
border: 4px solid #ffffff !important;
border-radius: 16px !important;
transform-origin: center center !important;
pointer-events: auto;
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.45);
transition: height 0.35s ease, transform 0.15s ease, opacity 0.15s ease !important;
}
.chat-window-wrapper.chat-expanded .chat-window {
height: min(80dvh, calc(100dvh - 48px)) !important;
}
.chat-messages-list {
margin-top: 0 !important;
}
.chat-window-wrapper .chat-window-toggle {
position: fixed;
right: 16px;
bottom: 16px;
margin: 0 !important;
pointer-events: auto;
}
.chat-window-wrapper.chat-open .chat-window-toggle {
visibility: hidden;
pointer-events: none;
}
.chat-heading h1 {
width: 220px;
max-width: 70%;
height: 60px;
margin: 0;
background: var(--gmb-chat-logo) left center / contain no-repeat;
color: transparent !important;
font-size: 0 !important;
}
.chat-close-button {
color: #ffffff !important;
}
.chat-close-button svg {
width: 26px;
height: 26px;
}
.chat-quick-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 16px;
}
.chat-quick-actions .chat-quick-action {
flex: 1 1 auto;
padding: 10px 14px !important;
border: 0 !important;
border-radius: 10px !important;
background: #0bb4cd !important;
color: #ffffff !important;
font-family: "Outfit", sans-serif !important;
font-size: 0.85rem !important;
line-height: 1.2 !important;
font-weight: 600 !important;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.chat-quick-action:hover {
background: #099fb6 !important;
transform: translateY(-2px);
}
.chat-quick-action:focus-visible {
outline: 3px solid rgba(11, 180, 205, 0.3);
outline-offset: 2px;
}
.chat-quick-action:disabled {
cursor: wait;
opacity: 0.7;
}
.chat-backdrop {
position: fixed;
inset: 0;
z-index: 99998;
background: rgba(15, 23, 42, 0.62);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.chat-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 600px) {
.chat-window-wrapper .chat-window,
.chat-window-wrapper.chat-expanded .chat-window {
width: calc(100vw - 20px) !important;
height: calc(100dvh - 20px) !important;
border-width: 3px !important;
border-radius: 14px !important;
}
.chat-heading h1 {
width: 200px;
max-width: 75%;
height: 54px;
}
.chat-quick-actions {
justify-content: center;
}
.chat-quick-actions .chat-quick-action {
flex: 1 1 calc(33.333% - 8px);
min-width: 78px;
max-width: 110px;
}
}