/*=================================================
    Trail Blazer Guide
==================================================*/

#tb-chat-button{

    position:fixed;
    right:20px;
    bottom:15px;

    width:68px;
    height:68px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    background:#27c46b;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

    transition:.25s;

    z-index:999999;
}

#tb-chat-button:hover{

    transform:scale(1.08);

}

#tb-chat-button img{

    width:34px;
    height:34px;

}

#tb-teaser{
position:fixed;
right:95px;
bottom:28px;
background:#1f2937;
color:#fff;
padding:10px 14px;
border-radius:20px;
font-size:13px;
box-shadow:0 5px 15px rgba(0,0,0,.2);
animation:tbTeaser 6s forwards;
z-index:999998;
}

@keyframes tbTeaser{
0%{opacity:0;transform:translateX(20px);}
10%{opacity:1;transform:translateX(0);}
80%{opacity:1;}
100%{opacity:0;transform:translateX(20px);visibility:hidden;}
}

/*==========================
Window
===========================*/

#tb-chat-window{

    position:fixed;

    right:20px;
    bottom:95px;

    width:320px;

    height:600px;

    max-height:75vh;

    display:flex;

    flex-direction:column;

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.20);

    opacity:0;

    transform:translateY(25px);

    pointer-events:none;

    transition:.30s;

    z-index:999999;

}

#tb-chat-window.open{

    opacity:1;

    transform:translateY(0);

    pointer-events:auto;

}

#tb-chat-button{
animation:tbPulse 3s infinite;
}

@keyframes tbPulse{
0%{transform:scale(1);}
10%{transform:scale(1.08);}
20%{transform:scale(1);}
100%{transform:scale(1);}
}

.tb-row{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:15px;
}

.tb-user-row{
display:flex;
justify-content:flex-end;
margin-bottom:15px;
}

.tb-avatar{
width:34px;
height:34px;
border-radius:50%;
overflow:hidden;
flex-shrink:0;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.tb-avatar img{
width:100%;
height:100%;
object-fit:cover;
}

.tb-bot{
max-width:82%;
background:#fff;
padding:12px 15px;
border-radius:16px;
box-shadow:0 3px 10px rgba(0,0,0,.08);
line-height:1.6;
}

.tb-user{
max-width:82%;
background:#2563eb;
color:#fff;
padding:12px 15px;
border-radius:16px;
line-height:1.6;
box-shadow:0 3px 10px rgba(0,0,0,.08);
}

#tb-suggestions{
margin-top:18px;
display:flex;
flex-wrap:wrap;
gap:8px;
}

.tb-chip{
background:#f1f5f9;
border:1px solid #d7dde4;
border-radius:20px;
padding:7px 14px;
font-size:12px;
cursor:pointer;
transition:.2s;
}

.tb-chip:hover{
background:#2563eb;
color:#fff;
border-color:#2563eb;
}

.tb-notify{
animation:tbBounce 1.2s infinite;
}

@keyframes tbBounce{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
}

/*==========================
Header
===========================*/

.tb-header{

    height:72px;

    background:#1f2937;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px;

}

.tb-header-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.tb-logo{

    width:42px;

    height:42px;

    border-radius:50%;

}

.tb-title{

    font-size:16px;

    font-weight:bold;

}

.tb-status{

    font-size:12px;

    color:#6ee7b7;

}

#tb-close{

    background:none;

    border:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}

/*==========================
Messages
===========================*/

#tb-messages{

    flex:1;

    overflow-y:auto;

    background:#f5f7fa;

    padding:18px;

}

.tb-bot{

    display:inline-block;

    max-width:85%;

    background:white;

    padding:12px 15px;

    border-radius:14px;

    margin-bottom:12px;

    line-height:1.6;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

}

.tb-user{

    float:right;

    clear:both;

    max-width:85%;

    background:#27c46b;

    color:white;

    padding:12px 15px;

    border-radius:14px;

    margin-bottom:12px;

}

/*==========================
Quick Menu
===========================*/

#tb-menu{
max-height:0;
overflow:hidden;
padding:0 15px;
background:#fafafa;
border-top:1px solid #ececec;
transition:max-height .35s ease,padding .35s ease;
}

#tb-menu.show{
max-height:300px;
padding:15px;
}

.tb-option{

    width:100%;

    border:1px solid #d8dde5;

    background:#f5f7fa;

    color:#374151;

    border-radius:8px;

    padding:10px 14px;

    text-align:left;

    cursor:pointer;

    transition:.2s;

    font-size:14px;

}

.tb-option:hover{

    background:#eceff3;

    transform:translateX(4px);

}

/*==========================
Input Area
===========================*/

#tb-input-area{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px;

    background:white;

    border-top:1px solid #ececec;

}

#tb-input{

    flex:1;

    height:40px;

    font-size:13px;

    border:1px solid #d7dde4;

    border-radius:22px;

    padding:0 15px;

    outline:none;

    font-size:14px;

}

#tb-input:focus{

    border-color:#27c46b;

}

#tb-menu-button,
#tb-send{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    transition:.2s;

}

#tb-menu-button{

    background:#eef1f5;

    color:#374151;

}

#tb-menu-button:hover{

    background:#dfe5ea;

}

#tb-send{

    background:#27c46b;

    color:white;

}

#tb-send:hover{

    transform:scale(1.08);

}

/*==========================
Scrollbar
===========================*/

#tb-messages::-webkit-scrollbar{

    width:6px;

}

#tb-messages::-webkit-scrollbar-thumb{

    background:#cfd6de;

    border-radius:10px;

}

/*==========================
Responsive
===========================*/

@media(max-width:768px){

    #tb-chat-window{

        width:95%;

        right:2.5%;

        height:88vh;

        bottom:90px;

    }

}

/*==========================
Typing Animation
===========================*/

.tb-typing{

    display:flex;

    align-items:center;

    gap:5px;

    padding:6px 0;

}

.tb-typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#9ca3af;

    animation:tbtyping 1.2s infinite;

}

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

    animation-delay:.2s;

}

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

    animation-delay:.4s;

}

.tb-fade{
animation:tbFade .25s ease;
}
@keyframes tbFade{
from{
opacity:0;
transform:translateY(12px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.tb-time{
margin-top:6px;
font-size:10px;
opacity:.6;
text-align:right;
}

@keyframes tbtyping{

0%{

transform:translateY(0);

opacity:.3;

}

50%{

transform:translateY(-5px);

opacity:1;

}

100%{

transform:translateY(0);

opacity:.3;

}

}