.gpt-chatbot-floating {
position: fixed;
bottom: 20px;
z-index: 2147483647;
font-family: Arial, Helvetica, sans-serif;
}
.gpt-chatbot-launcher {
width: 62px;
height: 62px;
border: 0;
border-radius: 50%;
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
transition: transform 0.18s ease, box-shadow 0.18s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gpt-chatbot-launcher:hover,
.gpt-chatbot-launcher:focus {
transform: translateY(-1px);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
outline: none;
}
.gpt-chatbot-launcher-icon {
display: block;
width: 38px;
height: 38px;
object-fit: contain;
pointer-events: none;
}
.gpt-chatbot-soft-pulse {
animation: gptSoftPulse 1.8s ease-in-out 2;
}
@keyframes gptSoftPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.06);
}
}
.gpt-chatbot-attention {
display: none;
position: absolute;
bottom: 76px;
width: 250px;
padding: 12px 36px 12px 14px;
background: #ffffff;
color: #1f2933;
border: 1px solid #d7dee8;
border-radius: 8px;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.2);
font-size: 14px;
line-height: 1.35;
}
.gpt-chatbot-attention:after {
content: "";
position: absolute;
bottom: -7px;
width: 12px;
height: 12px;
background: #fff;
border-right: 1px solid #d7dee8;
border-bottom: 1px solid #d7dee8;
transform: rotate(45deg);
}
.gpt-chatbot-floating.is-right .gpt-chatbot-attention:after {
right: 24px;
}
.gpt-chatbot-floating.is-left .gpt-chatbot-attention:after {
left: 24px;
}
.gpt-chatbot-attention-close {
position: absolute;
top: 6px;
right: 8px;
width: 24px;
height: 24px;
border: 0;
background: transparent;
color: #52606d;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.gpt-chatbot-panel {
display: none;
position: fixed;
bottom: 20px;
z-index: 2147483647;
width: 380px;
max-width: calc(100vw - 32px);
background: #fff;
border: 1px solid #d9e2ec;
border-radius: 8px;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
.gpt-chatbot-panel.open,
.gpt-chatbot-expanded {
display: block;
}
.chat-header {
min-height: 68px;
padding: 10px 12px;
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.chat-header span {
min-width: 0;
overflow-wrap: anywhere;
}
.chatbot-header-close {
margin-left: auto;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 18px;
cursor: pointer;
}
.chatbot-header-close:hover,
.chatbot-header-close:focus {
background: rgba(255, 255, 255, 0.28);
outline: none;
}
.chatbot-avatar {
width: 54px;
height: 54px;
border-radius: 8px;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.92);
flex: 0 0 auto;
}
.chat-messages {
padding: 14px;
height: 390px;
overflow-y: auto;
background: #f7f9fb;
font-size: 15px;
line-height: 1.45;
}
.user-message,
.bot-message {
width: fit-content;
max-width: 88%;
margin: 8px 0;
padding: 9px 11px;
border-radius: 8px;
overflow-wrap: anywhere;
}
.user-message {
margin-left: auto;
background: #dff6f8;
color: #173f46;
text-align: left;
}
.bot-message {
margin-right: auto;
background: #eef8e8;
color: #203326;
}
.bot-message a,
.user-message a {
color: #a86600;
font-weight: 600;
}
.chat-input {
padding: 12px;
background: #fff;
border-top: 1px solid #e4e7eb;
display: flex;
flex-direction: column;
gap: 9px;
}
#user-message {
width: 100%;
min-height: 76px;
margin: 0;
padding: 10px;
border: 1px solid #cbd2d9;
border-radius: 6px;
resize: vertical;
font-size: 15px;
box-sizing: border-box;
}
#user-message:focus {
border-color: #829ab1;
outline: 2px solid rgba(130, 154, 177, 0.24);
}
.chat-buttons-row {
display: flex;
justify-content: flex-end;
gap: 8px;
}
#send-message,
#close-chat {
min-height: 38px;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
}
#send-message {
color: #fff;
border: 0;
font-weight: 700;
}
#close-chat {
background: #f5f7fa;
color: #303841;
border: 1px solid #cbd2d9;
}
#send-message:disabled,
#close-chat:disabled {
cursor: wait;
opacity: 0.7;
}
.typing-dots {
letter-spacing: 1px;
}
.gpt-chatbot-embed {
max-width: 620px;
margin: 32px auto;
background: #fff;
border: 1px solid #d9e2ec;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
font-family: Arial, Helvetica, sans-serif;
}
.gpt-chatbot-embed .chat-messages {
height: 340px;
}
@media (max-width: 600px) {
.gpt-chatbot-floating {
bottom: 16px;
}
.gpt-chatbot-attention {
width: min(280px, calc(100vw - 34px));
bottom: 74px;
}
.gpt-chatbot-panel.fullscreen-mobile {
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 76px !important;
width: 100vw !important;
height: calc(100vh - 76px) !important;
max-width: 100vw !important;
border-radius: 0;
display: flex !important;
flex-direction: column;
}
.gpt-chatbot-panel.fullscreen-mobile .chat-messages {
height: auto;
flex: 1 1 auto;
}
.chat-header {
min-height: 62px;
}
.chatbot-avatar {
width: 46px;
height: 46px;
}
.chat-buttons-row {
width: 100%;
}
#send-message,
#close-chat {
flex: 1 1 0;
min-height: 44px;
}
}