/*==================================
HELP BUTTON
==================================*/

.helpbot-btn{

position:fixed;

right:28px;

bottom:28px;

width:62px;

height:62px;

border:none;

border-radius:50%;

background:#222;

color:#fff;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 15px 35px rgba(0,0,0,.25);

transition:.35s;

z-index:9999;

}

.helpbot-btn:hover{

transform:translateY(-4px) scale(1.05);

background:#111;

}

.helpbot-btn svg{

width:26px;

height:26px;

}

/*==================================
OVERLAY
==================================*/

#helpBotOverlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

backdrop-filter:blur(3px);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9998;

}

#helpBotOverlay.show{

opacity:1;

visibility:visible;

}

/*==================================
WINDOW
==================================*/

#helpBotWindow{

position:fixed;

right:28px;

bottom:105px;

width:390px;

height:680px;

background:#fff;

border-radius:26px;

overflow:hidden;

display:flex;

flex-direction:column;

box-shadow:

0 25px 60px rgba(0,0,0,.25);

transform:

translateY(40px)

scale(.95);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9999;

}

#helpBotWindow.show{

transform:

translateY(0)

scale(1);

opacity:1;

visibility:visible;

}

/*==================================
HEADER
==================================*/

.helpbot-header{

background:#1f1f1f;

color:#fff;

padding:18px 22px;

display:flex;

justify-content:space-between;

align-items:center;

}

.helpbot-header h3{

font-size:18px;

margin-bottom:4px;

}

.helpbot-header p{

font-size:12px;

opacity:.75;

}

#closeHelpBot{

background:none;

border:none;

color:#fff;

font-size:22px;

cursor:pointer;

transition:.25s;

}

#closeHelpBot:hover{

transform:rotate(90deg);

}

/*==================================
MESSAGES
==================================*/

.chat-messages{

flex:1;

overflow-y:auto;

padding:22px;

background:#f7f7f7;

}

.chat-messages::-webkit-scrollbar{

width:6px;

}

.chat-messages::-webkit-scrollbar-thumb{

background:#ddd;

border-radius:50px;

}

/*==================================
MESSAGE
==================================*/

.bot-message,

.user-message{

display:flex;

gap:12px;

margin-bottom:18px;

animation:fadeUp .35s ease;

}

.user-message{

justify-content:flex-end;

}

.bot-avatar{

width:42px;

height:42px;

border-radius:50%;

background:#222;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

flex-shrink:0;

}

.message{

background:#fff;

padding:14px 16px;

border-radius:18px;

max-width:78%;

box-shadow:

0 8px 20px rgba(0,0,0,.05);

line-height:1.55;

font-size:14px;

}

.user-message .message{

background:#222;

color:#fff;

}

/*==================================
QUICK ACTIONS
==================================*/

.quick-actions{

display:flex;

gap:10px;

padding:14px;

overflow-x:auto;

overflow-y:hidden;

flex-wrap:nowrap;

white-space:nowrap;

scrollbar-width:none;

border-top:1px solid #eee;

border-bottom:1px solid #eee;

background:#fff;

}

.quick-actions::-webkit-scrollbar{

display:none;

}

.quick-chip{

flex:0 0 auto;

padding:10px 18px;

border:none;

border-radius:30px;

background:#f3f3f3;

font-size:13px;

font-weight:500;

cursor:pointer;

transition:.25s;

white-space:nowrap;

}

.quick-chip:hover{

background:#222;

color:#fff;

}

.quick-menu{

padding:15px;

background:#fff;

border-top:1px solid #eee;

position:relative;

}

.quick-toggle{

width:100%;

height:45px;

border:none;

border-radius:10px;

background:#222;

color:#fff;

font-weight:600;

cursor:pointer;

}

.quick-dropdown{

display:none;

margin-top:10px;

border:1px solid #eee;

border-radius:12px;

overflow:hidden;

background:#fff;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.quick-dropdown.show{

display:block;

animation:fadeDown .25s;

}

.quick-dropdown .quick-chip{

width:100%;

padding:14px;

text-align:left;

border:none;

background:#fff;

cursor:pointer;

border-bottom:1px solid #eee;

transition:.25s;

}

.quick-dropdown .quick-chip:last-child{

border-bottom:none;

}

.quick-dropdown .quick-chip:hover{

background:#f7f7f7;

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-8px);

}

to{

opacity:1;

transform:none;

}

}

/*==================================
INPUT
==================================*/

.chat-input{

display:flex;

padding:16px;

gap:12px;

border-top:1px solid #eee;

background:#fff;

}

.chat-input input{

flex:1;

height:48px;

border-radius:50px;

border:1px solid #ddd;

padding:0 18px;

font-size:14px;

outline:none;

}

.chat-input input:focus{

border-color:#222;

}

.chat-input button{

border:none;

background:#222;

color:#fff;

padding:0 22px;

border-radius:50px;

cursor:pointer;

font-weight:600;

transition:.25s;

}

.chat-input button:hover{

background:#111;

}

/*==================================
TYPING
==================================*/

.typing-box{

display:none;

align-items:flex-end;

gap:12px;

padding:0 22px 18px;

animation:fadeUp .3s;

}

.typing-bubble{

background:#fff;

padding:16px 18px;

border-radius:18px;

display:flex;

gap:7px;

box-shadow:

0 8px 20px rgba(0,0,0,.05);

}

.typing-bubble span{

width:8px;

height:8px;

border-radius:50%;

background:#777;

animation:typing 1s infinite;

}

.typing-bubble span:nth-child(2){

animation-delay:.15s;

}

.typing-bubble span:nth-child(3){

animation-delay:.3s;

}

/*==================================
ANIMATION
==================================*/

@keyframes typing{

0%,100%{

transform:translateY(0);

opacity:.3;

}

50%{

transform:translateY(-5px);

opacity:1;

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(16px);

}

to{

opacity:1;

transform:none;

}

}

/*==================================*/

.help-actions{

margin-top:18px;

display:flex;

gap:10px;

}

.help-actions button{

padding:9px 14px;

border:none;

border-radius:50px;

cursor:pointer;

font-size:13px;

}

.help-yes{

background:#222;

color:#fff;

}

.help-no{

background:#ececec;

}

.wa-btn{

width:100%;

height:46px;

border:none;

background:#25D366;

color:#fff;

font-weight:600;

border-radius:12px;

cursor:pointer;

margin-top:12px;

transition:.3s;

}

.wa-btn:hover{

transform:translateY(-2px);

}

.thanks-msg{

color:#008000;

font-weight:600;

}

.pulse{

animation:pulse 2s infinite;

}

.typing-answer{

white-space:pre-line;

line-height:1.7;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(0,0,0,.4);

}

70%{

box-shadow:0 0 0 18px rgba(0,0,0,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,0,0,0);

}

}

/*==================================
MOBILE
==================================*/

@media(max-width:768px){

.helpbot-btn{

right:18px;

bottom:18px;

width: 40px;

margin-right: 10px;

height:40px;

}

#helpBotWindow{

right:0;

bottom:0;

width:100%;

height:100%;

border-radius:0;

}

.message{

max-width:86%;

}

.quick-actions{

overflow-x:auto;

flex-wrap:nowrap;

}

.quick-actions::-webkit-scrollbar{

display:none;

}

}