.belivo-faq-chat-wrapper {
max-width: 640px;
margin: 1.5rem auto;
padding: 1.25rem;
border-radius: 8px;
border: 1px solid #e1e4e8;
background: #ffffff;
box-sizing: border-box;
}
.belivo-faq-chat-title {
margin: 0 0 1rem;
font-size: 1.25rem;
font-weight: 600;
color: #111827;
}
.belivo-faq-chat-window {
border-radius: 8px;
border: 1px solid #e5e7eb;
background: #f9fafb;
padding: 0.75rem;
max-height: 360px;
overflow-y: auto;
margin-bottom: 0.75rem;
box-sizing: border-box;
}
.belivo-faq-chat-window.is-empty {
display: none !important;
}
.belivo-faq-messages {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 48px;
}
.belivo-faq-messages.is-hidden {
display: none !important;
}
.belivo-faq-message {
display: flex;
}
.belivo-faq-message-user {
justify-content: flex-end;
}
.belivo-faq-message-bot {
justify-content: flex-start;
}
.belivo-faq-bubble {
max-width: 85%;
padding: 0.9rem 1rem;
border-radius: 18px;
font-size: 0.95rem;
line-height: 1.5;
box-sizing: border-box;
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
}
.belivo-faq-message-user .belivo-faq-bubble {
background: #007148;
color: #ffffff;
border-bottom-right-radius: 6px;
}
.belivo-faq-message-bot .belivo-faq-bubble {
background: #e5e7eb;
color: #111827;
border-bottom-left-radius: 6px;
border-top-left-radius: 12px;
}
.belivo-faq-bubble p {
margin: 0 0 0.65rem;
}
.belivo-faq-bubble p:last-child {
margin-bottom: 0;
} .belivo-faq-chat-form {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.belivo-faq-input {
width: 100%;
min-height: 80px;
padding: 0.5rem 0.75rem;
border-radius: 6px;
border: 1px solid #d1d5db;
resize: vertical;
font-size: 0.95rem;
box-sizing: border-box;
}
.belivo-faq-input:focus {
outline: none;
border-color: #007148;
box-shadow: 0 0 0 1px rgba(0, 113, 72, 0.1);
}
.belivo-faq-submit {
align-self: flex-end;
padding: 0.45rem 1.2rem;
border-radius: 9999px;
border: none !important;
background: #007148 !important;
color: #ffffff;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease, transform 0.05s ease;
}
.belivo-faq-submit:hover {
background: #005a36;
}
.belivo-faq-submit:active {
transform: scale(0.98);
} .belivo-faq-loading .belivo-faq-bubble {
display: flex;
align-items: center;
gap: 0.25rem;
}
.belivo-faq-dot {
width: 6px;
height: 6px;
border-radius: 9999px;
background: #4b5563;
display: inline-block;
animation: belivo-faq-bounce 1.4s infinite ease-in-out both;
}
.belivo-faq-dot:nth-child(1) {
animation-delay: -0.32s;
}
.belivo-faq-dot:nth-child(2) {
animation-delay: -0.16s;
} .belivo-faq-bubble a {
text-decoration: underline !important;
color: inherit; }
.belivo-faq-bubble a:hover {
text-decoration: underline !important;
opacity: 0.85; }
@keyframes belivo-faq-bounce {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1.0);
}
} .screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
} .belivo-faq-accordion {
margin: 1.5rem auto !important;
max-width: 720px !important;
border-radius: 12px !important;
border: 1px solid #e5e7eb !important;
background: #ffffff !important;
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05) !important;
overflow: hidden !important;
}
.belivo-faq-accordion-item + .belivo-faq-accordion-item {
border-top: 1px solid #f1f2f4 !important;
}
.belivo-faq-accordion-trigger {
width: 100% !important;
text-align: left !important;
background: none !important;
border: none !important;
margin: 0 !important;
padding: 1rem 1.25rem !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #0f172a !important;
display: flex !important;
gap: 0.75rem !important;
justify-content: flex-start !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
white-space: normal !important;
cursor: pointer !important;
transition: background 0.15s ease !important;
}
.belivo-faq-accordion-trigger:hover,
.belivo-faq-accordion-trigger:focus {
background: #f9fafb !important;
outline: none !important;
}
.belivo-faq-accordion-question {
flex: 1 1 auto !important;
padding-right: 1rem !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
display: block !important;
}
.belivo-faq-accordion-icon {
width: 1.5rem !important;
height: 1.5rem !important;
border-radius: 4px !important;
background: #ffffff !important;
border: 1px solid #111827 !important;
color: #111827 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 600 !important;
transition: transform 0.15s ease !important;
flex: 0 0 auto !important;
}
.belivo-faq-accordion-trigger[aria-expanded="true"] .belivo-faq-accordion-icon {
transform: rotate(45deg) !important;
}
.belivo-faq-accordion-panel {
padding: 0 1.25rem 1.25rem !important;
}
.belivo-faq-accordion-panel[hidden] {
display: none !important;
}
.belivo-faq-accordion-answer {
font-size: 0.97rem !important;
line-height: 1.55 !important;
color: #1f2937 !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
.belivo-faq-accordion-answer p {
margin: 0 0 0.75rem !important;
}
.belivo-faq-accordion-answer p:last-child {
margin-bottom: 0 !important;
}
.belivo-faq-support-form {
display: none !important;
margin-top: 1rem !important;
}
.belivo-faq-support-form.is-visible {
display: block !important;
}