.difl-chat {
position: fixed;
bottom: var(--df-chat-y, 24px);
z-index: var(--df-chat-z, 9999);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
font-family: inherit;
font-size: 15px;
line-height: 1.45;
color: #1f2937;
-webkit-font-smoothing: antialiased;
}
.difl-chat--right { right: var(--df-chat-x, 24px); }
.difl-chat--left  { left: var(--df-chat-x, 24px); align-items: flex-start; }
.difl-chat *,
.difl-chat *::before,
.difl-chat *::after { box-sizing: border-box; }
.difl-chat svg { display: block; width: 1em; height: 1em; } .difl-chat .difl-chat__icon-img { display: block; width: 1em; height: 1em; object-fit: contain; border-radius: 0; } .difl-chat__launcher { display: flex; align-items: center; }
.difl-chat__bubble {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-start;
min-width: var(--df-chat-size, 60px);
height: var(--df-chat-size, 60px);
margin: 0;
padding: 0;
border: 0;
border-radius: var(--df-chat-bubble-radius, 100px);
background: var(--df-chat-bubble-bg, var(--df-chat-accent, #3D4DFF));
color: var(--df-chat-bubble-icon, #fff);
font-family: inherit;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
-webkit-tap-highlight-color: transparent;
}
.difl-chat--shadow .difl-chat__bubble { box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .45); }
.difl-chat__bubble:hover { transform: scale(1.04); }
.difl-chat__bubble:focus-visible { outline: 3px solid var(--df-chat-bubble-bg, var(--df-chat-accent)); outline-offset: 3px; } .difl-chat__bubble-media {
position: relative;
flex: none;
width: var(--df-chat-size, 60px);
height: var(--df-chat-size, 60px);
}
.difl-chat__bubble-icon,
.difl-chat__bubble-close {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--df-chat-size, 60px) * .46);
transition: transform .25s ease, opacity .25s ease;
}
.difl-chat__bubble-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.difl-chat.is-open .difl-chat__bubble-icon { opacity: 0; transform: rotate(90deg) scale(.6); }
.difl-chat.is-open .difl-chat__bubble-close { opacity: 1; transform: none; } .difl-chat__bubble-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.difl-chat--bubble-image .difl-chat__bubble-media { border-radius: inherit; overflow: hidden; } .difl-chat__bubble-prompt { position: absolute; inset: 0; overflow: hidden; border-radius: var(--df-chat-bubble-radius, 100px); opacity: 0; transform: scale(.6); transition: transform .25s ease, opacity .25s ease; }
.difl-chat__bubble-prompt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.difl-chat.is-prompting .difl-chat__bubble-prompt { opacity: 1; transform: none; }
.difl-chat.is-prompting .difl-chat__bubble-icon { opacity: 0; transform: scale(.6); }
.difl-chat--bubble-image.is-open .difl-chat__bubble-close { background: var(--df-chat-bubble-bg, var(--df-chat-accent, #3D4DFF)); } .difl-chat__bubble-label {
display: block;
max-width: 260px;
padding: 0 22px 0 0;
overflow: hidden;
color: inherit;
font-size: var(--df-chat-label-size, 15px);
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
text-overflow: ellipsis;
transition: max-width .3s ease, opacity .2s ease, padding .3s ease;
}
.difl-chat--left .difl-chat__bubble { flex-direction: row-reverse; }
.difl-chat--left .difl-chat__bubble-label { padding: 0 0 0 22px; } .difl-chat--label-hover .difl-chat__bubble-label { max-width: 0; padding: 0; opacity: 0; }
.difl-chat--label-hover .difl-chat__bubble:hover .difl-chat__bubble-label,
.difl-chat--label-hover .difl-chat__bubble:focus-visible .difl-chat__bubble-label { max-width: 260px; padding: 0 22px 0 0; opacity: 1; }
.difl-chat--label-hover.difl-chat--left .difl-chat__bubble:hover .difl-chat__bubble-label,
.difl-chat--label-hover.difl-chat--left .difl-chat__bubble:focus-visible .difl-chat__bubble-label { padding: 0 0 0 22px; } .difl-chat--pulse .difl-chat__bubble::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--df-chat-bubble-bg, var(--df-chat-accent, #3D4DFF));
opacity: .45;
animation: difl-chat-pulse 2.2s ease-out infinite;
z-index: -1;
}
.difl-chat--pulse.is-open .difl-chat__bubble::before { animation: none; opacity: 0; }
@keyframes difl-chat-pulse {
0%   { transform: scale(1);   opacity: .45; }
70%  { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
} .difl-chat__box {
width: var(--df-chat-width, 340px);
max-width: calc(100vw - 2 * var(--df-chat-x, 24px));
max-height: calc(100vh - var(--df-chat-y, 24px) - var(--df-chat-size, 60px) - 40px);
overflow: hidden auto;
border-radius: var(--df-chat-radius, 16px);
background: var(--df-chat-body-bg, #fff);
box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .45), 0 2px 10px rgba(15, 23, 42, .08);
transform-origin: bottom right;
animation: difl-chat-slide-up .28s cubic-bezier(.2, .8, .2, 1) both;
}
.difl-chat--left .difl-chat__box { transform-origin: bottom left; }
.difl-chat__box[hidden] { display: none; }
.difl-chat--anim-fade .difl-chat__box { animation-name: difl-chat-fade; }
.difl-chat--anim-zoom .difl-chat__box { animation-name: difl-chat-zoom; }
@keyframes difl-chat-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes difl-chat-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes difl-chat-zoom     { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.difl-chat__header {
display: flex;
align-items: center;
gap: 14px;
padding: var(--df-chat-header-pad, 20px);
background: var(--df-chat-header-bg, var(--df-chat-accent, #3D4DFF));
color: var(--df-chat-header-text, #fff);
}
.difl-chat__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.difl-chat__title { font-size: var(--df-chat-title-size, 18px); font-weight: 700; line-height: 1.2; color: inherit; }
.difl-chat__subtitle { font-size: var(--df-chat-subtitle-size, 14px); opacity: .85; }
.difl-chat__close {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: -6px -6px 0 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
opacity: .8;
font-size: 20px;
cursor: pointer;
align-self: flex-start;
}
.difl-chat__close:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
.difl-chat__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .difl-chat__avatar {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--df-chat-header-image, 56px);
height: var(--df-chat-header-image, 56px);
overflow: hidden;
border-radius: var(--df-chat-header-image-radius, 100px);
background: var(--df-chat-header-icon-bg, #fff);
border: 3px solid rgba(255, 255, 255, .55);
}
.difl-chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.difl-chat__avatar--icon { color: var(--df-chat-header-icon, var(--df-chat-item, var(--df-chat-accent, #3D4DFF))); font-size: calc(var(--df-chat-header-image, 56px) * .5); }
.difl-chat__body { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 220px; padding: var(--df-chat-body-pad, 18px); } .difl-chat__message { display: flex; align-items: flex-start; gap: 10px; }
.difl-chat__message-avatar {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
overflow: hidden;
border-radius: var(--df-chat-header-image-radius, 100px);
background: var(--df-chat-header-icon-bg, #fff);
box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
font-size: 18px;
}
.difl-chat__message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.difl-chat__message-avatar--icon { color: var(--df-chat-header-icon, var(--df-chat-item, var(--df-chat-accent, #3D4DFF))); }
.difl-chat__message-text {
padding: 12px 14px;
border-radius: var(--df-chat-msg-radius, 14px);
border-top-left-radius: 4px;
background: var(--df-chat-msg-bg, #F1F3F6);
color: var(--df-chat-msg-text, #1f2937);
font-size: var(--df-chat-msg-size, 15px);
white-space: pre-line;
} .difl-chat__bar {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
padding: 12px 16px;
border-radius: var(--df-chat-btn-radius, 12px);
background: var(--df-chat-bar-bg, var(--df-chat-accent, #3D4DFF));
color: var(--df-chat-bar-text, #fff);
font-size: 16px;
font-weight: 700;
}
.difl-chat__bar-icons { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--df-chat-btn-gap, 8px); }
.difl-chat__bar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--df-chat-btn-icon, 22px) + 14px);
height: calc(var(--df-chat-btn-icon, 22px) + 14px);
border-radius: 50%;
background: #fff;
color: var(--df-chat-item, var(--df-chat-accent, #3D4DFF)) !important;
font-size: var(--df-chat-btn-icon, 22px);
text-decoration: none !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.difl-chat__bar-icon:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(15, 23, 42, .25); }
.difl-chat__bar-icon:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .difl-chat__channels { display: flex; flex-direction: column; gap: 8px; }
.difl-chat__buttons-text { margin: 0; color: var(--df-chat-msg-text, #1f2937); font-size: 14px; font-weight: 600; text-align: center; }
.difl-chat__buttons { display: flex; flex-wrap: wrap; gap: var(--df-chat-btn-gap, 8px); }
.difl-chat__button {
flex: 1 1 var(--df-chat-btn-height, 44px);
min-width: var(--df-chat-btn-height, 44px);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: var(--df-chat-btn-height, 44px);
border-radius: var(--df-chat-btn-radius, 12px);
background: var(--df-chat-item, var(--df-chat-accent, #3D4DFF));
color: #fff !important;
font-size: var(--df-chat-btn-icon, 22px);
text-decoration: none !important;
transition: filter .15s ease, transform .15s ease;
}
.difl-chat__button.has-text { flex-basis: auto; padding: 0 18px; }
.difl-chat__button-text { font-size: var(--df-chat-btn-font, 15px); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.difl-chat__button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.difl-chat__button:focus-visible { outline: 3px solid var(--df-chat-item, var(--df-chat-accent)); outline-offset: 2px; } .difl-chat--btn-custom .difl-chat__button { background: var(--df-chat-btn-bg, var(--df-chat-accent, #3D4DFF)); color: var(--df-chat-btn-fg, #fff) !important; }
.difl-chat--btn-custom .difl-chat__button-text { color: var(--df-chat-btn-label, #fff); } .difl-chat__prompt {
position: relative;
width: var(--df-chat-prompt-width, 300px);
max-width: calc(100vw - 2 * var(--df-chat-x, 24px));
padding: 18px 20px 20px;
border-radius: var(--df-chat-prompt-radius, 8px);
background: var(--df-chat-prompt-bg, #fff);
color: var(--df-chat-prompt-text, #1f2937);
box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .35), 0 2px 8px rgba(15, 23, 42, .08);
animation: difl-chat-slide-up .28s cubic-bezier(.2, .8, .2, 1) both;
}
.difl-chat__prompt[hidden] { display: none; }
.difl-chat__prompt-text { margin: 0 0 14px; padding-right: 14px; color: inherit; font-size: var(--df-chat-prompt-size, 18px); line-height: 1.4; }
.difl-chat__prompt-btn {
display: block;
width: 100%;
margin: 0;
padding: 12px 16px;
border: 0;
border-radius: 4px;
background: var(--df-chat-prompt-btn-bg, var(--df-chat-accent, #3D4DFF));
color: var(--df-chat-prompt-btn-text, #fff);
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
cursor: pointer;
transition: filter .15s ease;
}
.difl-chat__prompt-btn:hover { filter: brightness(1.08); }
.difl-chat__prompt-btn:focus-visible { outline: 3px solid var(--df-chat-prompt-btn-bg, var(--df-chat-accent)); outline-offset: 2px; } .difl-chat__prompt-close {
position: absolute;
top: 6px;
right: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
font-size: 14px;
opacity: 0;
cursor: pointer;
transition: opacity .15s ease;
}
.difl-chat__prompt:hover .difl-chat__prompt-close,
.difl-chat__prompt-close:focus-visible { opacity: .6; }
.difl-chat__prompt-close:hover { opacity: 1; }
@media (hover: none) { .difl-chat__prompt-close { opacity: .6; } } @media screen and (min-width: 1025px) { .difl-chat--hide-desktop { display: none !important; } }
@media screen and (min-width: 768px) and (max-width: 1024px) { .difl-chat--hide-tablet { display: none !important; } }
@media screen and (max-width: 767px) { .difl-chat--hide-mobile { display: none !important; } } @media screen and (max-width: 480px) {
.difl-chat__box { width: calc(100vw - 2 * var(--df-chat-x, 24px)); }
.difl-chat__bubble-label { max-width: 160px; }
} [dir="rtl"] .difl-chat__bubble { flex-direction: row-reverse; }
[dir="rtl"] .difl-chat--left .difl-chat__bubble { flex-direction: row; }
[dir="rtl"] .difl-chat__bubble-label { padding: 0 0 0 22px; }
[dir="rtl"] .difl-chat--left .difl-chat__bubble-label { padding: 0 22px 0 0; }
[dir="rtl"] .difl-chat__message-text { border-top-left-radius: var(--df-chat-msg-radius, 14px); border-top-right-radius: 4px; } @media (prefers-reduced-motion: reduce) {
.difl-chat__box,
.difl-chat__prompt,
.difl-chat--pulse .difl-chat__bubble::before { animation: none !important; }
.difl-chat__bubble,
.difl-chat__bubble-icon,
.difl-chat__bubble-close,
.difl-chat__bubble-label,
.difl-chat__bubble-prompt,
.difl-chat__bar-icon,
.difl-chat__button { transition: none !important; }
}