#fcb-root {
--fcb-blue: #3574b7;
--fcb-blue-soft: #e4eef6;
--fcb-bot: #f1f1f1;
--fcb-text: #111;
--fcb-grey: #808080;
--fcb-font: Verdana, Geneva, "DejaVu Sans", sans-serif;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 2147483000;
font-family: var(--fcb-font);
font-size: 15px;
line-height: 1.45;
color: var(--fcb-text);
text-align: left;
letter-spacing: normal;
text-transform: none;
}
#fcb-root *, #fcb-root *::before, #fcb-root *::after { box-sizing: border-box; }
#fcb-root, #fcb-root p, #fcb-root div, #fcb-root span, #fcb-root label, #fcb-root button, #fcb-root input, #fcb-root select {
font-family: var(--fcb-font); font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;
}
#fcb-root .fcb-bubble-bot, #fcb-root .fcb-welcome-card p { color: var(--fcb-text); }
#fcb-root .fcb-bubble-user { color: #fff; }
#fcb-root b, #fcb-root strong, #fcb-root .fcb-welcome-title, #fcb-root .fcb-field > span { font-weight: 700; }
#fcb-root .fcb-panel, #fcb-root .fcb-bubble, #fcb-root .fcb-form { text-align: left; }
#fcb-root button { font-family: inherit; cursor: pointer; margin: 0; }
#fcb-root p { margin: 0; }
#fcb-root img { display: block; max-width: 100%; } .fcb-launcher {
width: 64px; height: 64px; border-radius: 50%;
border: 3px solid #fff; padding: 0; overflow: hidden;
background: var(--fcb-blue); color: #fff;
box-shadow: 0 6px 20px rgba(0,0,0,.25);
display: flex; align-items: center; justify-content: center;
transition: transform .15s ease;
}
.fcb-launcher:hover { transform: scale(1.05); }
.fcb-launcher img { width: 100%; height: 100%; object-fit: cover; }
.fcb-launcher svg { width: 28px; height: 28px; } .fcb-welcome {
position: absolute; right: 0; bottom: 80px;
width: 320px; padding-top: 44px;
opacity: 0; transform: translateY(12px); pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
#fcb-root.fcb-welcome-visible .fcb-welcome { opacity: 1; transform: none; pointer-events: auto; }
.fcb-welcome-close {
position: absolute; top: 0; right: 0;
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid #ddd; background: #f0f0f0; color: var(--fcb-grey);
display: flex; align-items: center; justify-content: center; padding: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.fcb-welcome-close svg { width: 18px; height: 18px; }
.fcb-welcome-card {
background: #fff; border: 3px solid var(--fcb-blue); border-radius: 22px;
padding: 58px 22px 22px; text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.fcb-welcome-avatar {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
border: 4px solid #fff; background: var(--fcb-blue-soft);
box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.fcb-welcome-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fcb-welcome-title { font-weight: 700; font-size: 20px; line-height: 1.25; }
.fcb-welcome-sub { margin-top: 10px !important; font-size: 16px; }
.fcb-welcome-options { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.fcb-welcome-btn {
background: var(--fcb-blue); color: #fff; border: 0; border-radius: 26px;
padding: 12px 18px; font-size: 15px; line-height: 1.3;
box-shadow: 0 3px 8px rgba(53,116,183,.3);
}
.fcb-welcome-btn:hover { filter: brightness(1.08); } .fcb-panel {
position: absolute; right: 0; bottom: 80px;
width: 380px; height: min(640px, calc(100vh - 120px));
background: #fff; border-radius: 18px; overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,.28);
display: flex; flex-direction: column;
opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
}
#fcb-root.fcb-open .fcb-panel { opacity: 1; transform: none; pointer-events: auto; }
.fcb-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px 8px 14px; background: #fff; flex: none;
}
.fcb-logo { height: 44px; width: auto; }
.fcb-logo-text { font-weight: 700; font-style: italic; color: var(--fcb-blue); font-size: 20px; letter-spacing: .5px; }
.fcb-header-actions { display: flex; gap: 8px; }
.fcb-icon-btn {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid #ddd; background: #f0f0f0; color: var(--fcb-grey);
display: flex; align-items: center; justify-content: center; padding: 0;
}
.fcb-icon-btn:hover { background: #e6e6e6; }
.fcb-icon-btn svg { width: 18px; height: 18px; }
.fcb-body { flex: 1; overflow-y: auto; padding: 8px 12px 18px; } .fcb-row { display: flex; margin-top: 10px; }
.fcb-row-bot { align-items: flex-start; gap: 10px; padding-right: 20px; }
.fcb-row-user { justify-content: flex-end; }
.fcb-avatar {
width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
background: var(--fcb-blue-soft);
}
.fcb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fcb-bubble { padding: 10px 15px; max-width: 100%; word-wrap: break-word; }
.fcb-bubble b, .fcb-bubble strong { font-weight: 700; }
.fcb-bubble-bot { background: var(--fcb-bot); border-radius: 18px; }
.fcb-bubble-bot a { color: var(--fcb-blue); text-decoration: underline; }
.fcb-bubble-email { text-decoration: underline; word-break: break-all; }
.fcb-bubble-user {
background: var(--fcb-blue); color: #fff;
border-radius: 18px 18px 0 18px; margin-left: 40px;
} .fcb-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.fcb-typing i { width: 7px; height: 7px; border-radius: 50%; background: #999; animation: fcb-dot 1s infinite ease-in-out; }
.fcb-typing i:nth-child(2) { animation-delay: .15s; }
.fcb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes fcb-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .fcb-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-left: 0; }
.fcb-option {
background: #fff; color: var(--fcb-blue); border: 1.5px solid var(--fcb-blue);
border-radius: 22px; padding: 8px 16px; font-size: 14.5px; line-height: 1.3; text-align: left;
}
.fcb-option:hover { background: var(--fcb-blue-soft); } .fcb-form { margin: 14px 0 0 50px; }
.fcb-form-card { background: #f8f8f8; border: 1px solid #ddd; border-radius: 16px; padding: 14px 16px; }
.fcb-field { display: block; margin-top: 10px; }
.fcb-field:first-child { margin-top: 0; }
.fcb-field > span { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 5px; }
#fcb-root .fcb-field input, #fcb-root .fcb-phone select {
width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 10px;
padding: 0 12px; font-family: inherit; font-size: 15px; color: var(--fcb-text);
background: #fff; margin: 0; box-shadow: none;
}
#fcb-root .fcb-field input:focus, #fcb-root .fcb-phone select:focus { outline: 2px solid var(--fcb-blue); outline-offset: -1px; border-color: var(--fcb-blue); }
.fcb-phone { display: flex; border: 1px solid #ddd; border-radius: 10px; background: #fff; overflow: hidden; }
#fcb-root .fcb-phone select { width: auto; max-width: 118px; border: 0; border-radius: 0; padding: 0 4px 0 8px; background: #fff; }
#fcb-root .fcb-phone input { border: 0; border-radius: 0; }
.fcb-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.fcb-error { color: #c0392b; font-size: 13px; margin-top: 10px !important; }
.fcb-submit {
width: 100%; margin-top: 12px !important; background: #fff; color: var(--fcb-blue);
border: 1.5px solid var(--fcb-blue); border-radius: 24px; padding: 10px; font-size: 15px;
}
.fcb-submit:hover:not(:disabled) { background: var(--fcb-blue-soft); }
.fcb-submit:disabled { opacity: .6; cursor: default; } @media (max-width: 480px) {
#fcb-root { right: 14px; bottom: 14px; }
.fcb-welcome { width: calc(100vw - 28px); }
.fcb-panel {
position: fixed; inset: 0; width: 100vw; height: 100%; border-radius: 0;
}
#fcb-root.fcb-open .fcb-launcher { display: none; }
.fcb-form { margin-left: 0; }
.fcb-options { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fcb-panel, .fcb-welcome, .fcb-launcher { transition: none; }
.fcb-typing i { animation: none; }
}