@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");
#fh-chatbot-widget {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 99999;
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
line-height: 1.4;
color: #1a1a1a;
box-sizing: border-box;
}
#fh-chatbot-widget *,
#fh-chatbot-widget *::before,
#fh-chatbot-widget *::after {
box-sizing: inherit;
} #fh-chat-bubble {
width: 72px;
height: 72px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0;
outline: none;
animation: fhBounceIn 0.65s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
}
#fh-chat-bubble:focus-visible {
outline: 3px solid #e8621a;
outline-offset: 3px;
border-radius: 50%;
} #fh-chat-badge {
position: absolute;
top: 2px;
right: 2px;
background: #e53e3e;
color: white;
border-radius: 50%;
min-width: 18px;
height: 18px;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid #fff;
pointer-events: none;
z-index: 2;
} #fh-fab-inner {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: opacity 0.2s ease;
animation: fhFloat 3.2s ease-in-out infinite;
}
#fh-fab-inner svg {
width: 72px;
height: 82px;
overflow: visible;
} .fh-ring {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1.5px solid rgba(232,98,26,0.3);
opacity: 0;
pointer-events: none;
}
.fh-ring1 { animation: fhPulse 2.8s ease-out 1s infinite; }
.fh-ring2 { animation: fhPulse 2.8s ease-out 1.8s infinite; } #fh-fab-shadow {
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 8px;
border-radius: 50%;
background: rgba(45,31,14,0.15);
animation: fhShadow 3.2s ease-in-out infinite;
pointer-events: none;
} #fh-fab-x {
position: absolute;
opacity: 0;
transform: rotate(-45deg) scale(0.5);
transition: opacity 0.2s ease, transform 0.2s ease;
width: 40px;
height: 40px;
background: #2d1f0e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#fh-chatbot-widget.fh-open #fh-fab-inner { opacity: 0; pointer-events: none; }
#fh-chatbot-widget.fh-open #fh-fab-x    { opacity: 1; transform: rotate(0deg) scale(1); }
#fh-chatbot-widget.fh-open #fh-fab-shadow { opacity: 0; } .fh-eye-l { animation: fhBlink 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.fh-eye-r { animation: fhBlink 4s ease-in-out infinite 0.12s; transform-origin: center; transform-box: fill-box; }
.fh-ant-dot { animation: fhAntGlow 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } #fh-chat-tooltip {
position: absolute;
right: 0;
bottom: 88px;
background: #2d1f0e;
color: #fff;
border-radius: 18px 18px 18px 4px;
padding: 9px 36px 9px 15px;
font-size: 13px;
font-weight: 500;
font-family: 'Outfit', sans-serif;
min-width: 200px;
max-width: 250px;
line-height: 1.4;
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, visibility 0.28s ease;
z-index: 100;
pointer-events: none;
white-space: nowrap;
}
#fh-chat-tooltip::after {
content: '';
position: absolute;
bottom: -7px;
right: 22px;
border: 7px solid transparent;
border-top-color: #2d1f0e;
border-bottom: 0;
}
#fh-chat-tooltip.fh-tooltip-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#fh-chat-tooltip p {
margin: 0;
color: #fff;
font-size: 13px;
}
#fh-tooltip-close {
position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
color: rgba(255,255,255,0.6);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 2px 3px;
transition: color 0.15s;
font-family: inherit;
}
#fh-tooltip-close:hover { color: #fff; } #fh-chat-window {
position: absolute;
bottom: 88px;
right: 0;
width: 360px;
height: 500px;
background: #f8f7f5;
border-radius: 20px;
border: 0.5px solid #e8e4df;
display: flex;
flex-direction: column;
overflow: hidden;
animation: fhSlideUp 0.28s cubic-bezier(0.34,1.1,0.64,1);
} #fh-chat-header {
background: #2d1f0e;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.fh-header-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #e8621a;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.fh-header-avatar svg { width: 36px; height: 36px; overflow: visible; }
.fh-header-info { flex: 1; min-width: 0; }
.fh-header-name {
color: #fff;
font-weight: 700;
font-size: 13.5px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fh-header-sub {
color: rgba(255,255,255,0.5);
font-size: 10.5px;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fh-online-dot {
width: 8px;
height: 8px;
background: #4ade80;
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.fh-online-dot::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: rgba(74,222,128,0.3);
animation: fhPulseDot 2s ease-out infinite;
}
#fh-chat-minimize {
background: none;
border: none;
color: rgba(255,255,255,0.6);
cursor: pointer;
font-size: 16px;
padding: 4px 5px;
line-height: 1;
transition: color 0.15s, background 0.15s;
border-radius: 6px;
}
#fh-chat-minimize:hover { color: #fff; background: rgba(255,255,255,0.1); } #fh-chat-messages {
flex: 1;
overflow-y: auto;
padding: 12px 12px 6px;
display: flex;
flex-direction: column;
gap: 7px;
scroll-behavior: smooth;
min-height: 0;
}
#fh-chat-messages::-webkit-scrollbar       { width: 3px; }
#fh-chat-messages::-webkit-scrollbar-thumb { background: #e8e4df; border-radius: 2px; } .fh-message {
max-width: 84%;
padding: 9px 12px;
font-size: 13.5px;
line-height: 1.5;
word-break: break-word;
white-space: pre-wrap;
font-family: 'Outfit', sans-serif;
}
.fh-message-user {
background: #e8621a;
color: #fff;
border-radius: 14px 14px 3px 14px;
align-self: flex-end;
max-width: 80%;
}
.fh-message-assistant {
background: #fff;
color: #1a1a1a;
border-radius: 14px 14px 14px 3px;
border: 0.5px solid #e8e4df;
align-self: flex-start;
} .fh-typing {
display: flex !important;
align-items: center;
gap: 5px;
padding: 12px 15px;
min-width: 54px;
white-space: normal;
}
.fh-typing span {
width: 7px;
height: 7px;
background: #6b6560;
border-radius: 50%;
opacity: 0.5;
animation: fhBounce 1.3s infinite ease-in-out;
display: block;
}
.fh-typing span:nth-child(1) { animation-delay: 0s; }
.fh-typing span:nth-child(2) { animation-delay: 0.2s; }
.fh-typing span:nth-child(3) { animation-delay: 0.4s; } #fh-chat-suggestions {
padding: 0 12px 8px;
display: flex;
flex-direction: column;
gap: 5px;
flex-shrink: 0;
}
.fh-suggestion {
background: #fff;
border: 0.5px solid #e8621a;
color: #e8621a;
border-radius: 20px;
padding: 7px 13px;
font-size: 12px;
text-align: left;
cursor: pointer;
line-height: 1.35;
transition: background 0.15s, color 0.15s, transform 0.15s;
font-family: 'Outfit', sans-serif;
}
.fh-suggestion:hover  { background: #e8621a; color: #fff; transform: translateY(-1px); }
.fh-suggestion:active { transform: scale(0.98); } #fh-chat-input-area {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #fff;
border-top: 0.5px solid #e8e4df;
flex-shrink: 0;
}
#fh-chat-input {
flex: 1;
border: 0.5px solid #e8e4df;
border-radius: 22px;
padding: 9px 14px;
font-size: 13px;
outline: none;
transition: border-color 0.15s;
background: #f8f7f5;
color: #1a1a1a;
font-family: 'Outfit', sans-serif;
min-width: 0;
}
#fh-chat-input::placeholder { color: #b0a9a4; }
#fh-chat-input:focus        { border-color: #e8621a; background: #fff; }
#fh-chat-input:disabled     { opacity: 0.5; cursor: not-allowed; }
#fh-chat-send {
width: 36px;
height: 36px;
border-radius: 50%;
background: #e8621a;
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, transform 0.1s;
padding: 0;
}
#fh-chat-send svg      { width: 17px; height: 17px; }
#fh-chat-send:hover    { background: #c45114; }
#fh-chat-send:active   { transform: scale(0.92); }
#fh-chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } #fh-feedback-form {
padding: 11px 12px;
background: #fff;
border-top: 0.5px solid #e8e4df;
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
#fh-feedback-form p { margin: 0; font-size: 13px; font-weight: 600; color: #1a1a1a; }
#fh-feedback-input {
border: 0.5px solid #e8e4df;
border-radius: 10px;
padding: 8px 10px;
font-size: 13px;
resize: none;
height: 68px;
outline: none;
font-family: 'Outfit', sans-serif;
color: #1a1a1a;
transition: border-color 0.15s;
background: #f8f7f5;
}
#fh-feedback-input:focus { border-color: #e8621a; background: #fff; }
.fh-feedback-actions { display: flex; gap: 8px; }
#fh-feedback-submit {
background: #e8621a;
color: #fff;
border: none;
border-radius: 8px;
padding: 7px 16px;
font-size: 13px;
cursor: pointer;
font-family: 'Outfit', sans-serif;
font-weight: 600;
transition: background 0.15s, transform 0.1s;
}
#fh-feedback-submit:hover    { background: #c45114; }
#fh-feedback-submit:active   { transform: scale(0.98); }
#fh-feedback-submit:disabled { opacity: 0.5; cursor: not-allowed; }
#fh-feedback-cancel {
background: none;
border: 0.5px solid #e8e4df;
border-radius: 8px;
padding: 7px 14px;
font-size: 13px;
cursor: pointer;
color: #6b6560;
font-family: 'Outfit', sans-serif;
transition: border-color 0.15s, color 0.15s;
}
#fh-feedback-cancel:hover { border-color: #6b6560; color: #1a1a1a; } #fh-chat-footer {
background: #fff;
padding: 6px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-top: 0.5px solid #e8e4df;
flex-shrink: 0;
}
#fh-chat-footer span { font-size: 10px; color: #b0a9a4; line-height: 1.3; flex: 1; }
#fh-feedback-btn {
background: none;
border: none;
color: #e8621a;
cursor: pointer;
font-size: 11px;
font-weight: 500;
padding: 3px 8px;
border-radius: 6px;
white-space: nowrap;
transition: background 0.15s;
font-family: 'Outfit', sans-serif;
flex-shrink: 0;
}
#fh-feedback-btn:hover { background: #fde8d8; } .fh-hidden { display: none !important; } .fh-md-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; font-family: 'Courier New', monospace; }
.fh-md-table td { border: 0.5px solid #e8e4df; padding: 5px 7px; vertical-align: top; }
.fh-md-table tr:nth-child(even) { background: #f8f7f5; } @media (max-width: 480px) {
#fh-chatbot-widget { bottom: 0; right: 0; left: 0; }
#fh-chat-bubble {
position: fixed;
bottom: 18px;
right: 18px;
}
#fh-chat-window {
position: fixed;
bottom: 0; right: 0; left: 0;
width: 100%;
height: 88dvh;
border-radius: 20px 20px 0 0;
animation: fhSlideUpMobile 0.3s cubic-bezier(0.34,1.1,0.64,1);
}
#fh-chat-tooltip {
right: 5px; left: 5px;
bottom: 100px;
max-width: none;
border-radius: 16px;
white-space: normal;
text-align: left;
pointer-events: none !important;
}
#fh-chat-tooltip::after { right: 30px; }
} @keyframes fhBounceIn {
0%   { opacity: 0; transform: scale(0.3) translateY(24px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fhFloat {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(-8px); }
}
@keyframes fhShadow {
0%, 100% { opacity: 0.3; transform: translateX(-50%) scaleX(1); }
50%       { opacity: 0.1; transform: translateX(-50%) scaleX(0.65); }
}
@keyframes fhPulse {
0%   { opacity: 0.6; transform: scale(0.9); }
100% { opacity: 0;   transform: scale(1.5); }
}
@keyframes fhPulseDot {
0%   { opacity: 0.7; transform: scale(1); }
100% { opacity: 0;   transform: scale(2.2); }
}
@keyframes fhBlink {
0%, 88%, 100% { transform: scaleY(1); }
94%            { transform: scaleY(0.08); }
}
@keyframes fhAntGlow {
0%, 100% { opacity: 0.5; }
50%       { opacity: 1; }
}
@keyframes fhBounce {
0%, 60%, 100% { transform: translateY(0);    opacity: 0.5; }
30%            { transform: translateY(-5px); opacity: 1; }
}
@keyframes fhSlideUp {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fhSlideUpMobile {
from { opacity: 0; transform: translateY(40px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes fhCursorBlink { 50% { opacity: 0; } }