/* =====================================================
   FINBASE AI V2.1 - FIXED
=====================================================*/

/* Floating Button */
#finbase-chat-button{
position:fixed;
right:20px;
bottom:20px;
width:65px;
height:65px;
background:#0A2540;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:999999;
box-shadow:0 12px 35px rgba(0,0,0,.25);
transition:.3s;
}

#finbase-chat-button:hover{
transform:scale(1.08);
}

#finbase-chat-button img{
width:42px;
height:42px;
border-radius:50%;
object-fit:cover;
}

/* Chat Window */
#finbase-chat-window{
position:fixed;
right:20px;
bottom:95px;
width:370px;
height:560px;
background:#ffffff;
border-radius:18px;
overflow:hidden;
display:none;
z-index:999999;
box-shadow:0 20px 50px rgba(0,0,0,.25);
flex-direction:column;
}

/* Header */
.fb-header{
height:78px;
background:#0A2540;
padding:0 18px;
display:flex;
justify-content:space-between;
align-items:center;
color:#fff;
flex-shrink:0;
}

.fb-header-left{
display:flex;
align-items:center;
gap:12px;
}

.fb-header img{
width:46px;
height:46px;
border-radius:50%;
object-fit:cover;
box-shadow:0 0 18px rgba(31,182,166,.5);
}

.fb-header strong{
display:block;
font-size:17px;
font-weight:700;
}

.fb-status{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
opacity:.9;
margin-top:3px;
}

.fb-dot{
width:8px;
height:8px;
border-radius:50%;
background:#2be37c;
animation:fbPulse 1.8s infinite;
}

@keyframes fbPulse{
0%{box-shadow:0 0 0 0 rgba(43,227,124,.7);}
70%{box-shadow:0 0 0 10px rgba(43,227,124,0);}
100%{box-shadow:0 0 0 0 rgba(43,227,124,0);}
}

#fb-close{
font-size:22px;
cursor:pointer;
transition:.3s;
color:#fff;
}

#fb-close:hover{
transform:rotate(90deg);
opacity:.8;
}

/* Messages Area */
#fb-messages{
flex:1;
padding:12px;
overflow-y:auto;
background:#f4f7fb;
display:flex;
flex-direction:column;
gap:8px;
}

/* AI Bubble */
.fb-ai{
display:inline-block;
max-width:85%;
background:#fff;
padding:10px 14px;
border-radius:14px;
line-height:1.7;
white-space:pre-wrap;
word-break:break-word;
box-shadow:0 2px 10px rgba(0,0,0,.06);
align-self:flex-start;
margin:0;
}

/* User Bubble */
.fb-user{
display:block;
width:fit-content;
max-width:85%;
margin:0 0 0 auto;
padding:10px 14px;
background:#1FB6A6;
color:#fff;
border-radius:16px;
text-align:left !important;
white-space:pre-wrap;
word-break:break-word;
align-self:flex-end;
}

/* Loading */
.loading{
opacity:.7;
font-style:italic;
}

.fb-loader{
display:inline-block;
width:10px;
height:10px;
background:#1FB6A6;
border-radius:50%;
margin-right:8px;
animation:fbLoader .8s infinite alternate;
}

@keyframes fbLoader{
from{transform:scale(.7);opacity:.4;}
to{transform:scale(1.2);opacity:1;}
}

/* =====================================================
   INPUT AREA
=====================================================*/
.fb-input{
height:80px;
padding:14px;
background:#fff;
border-top:1px solid #ececec;
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
}

#fb-message{
flex:1;
height:48px;
padding:0 18px;
border:1px solid #d9d9d9;
border-radius:30px;
outline:none;
font-size:15px;
transition:.25s;
background:#fff;
}

#fb-message:focus{
border-color:#1FB6A6;
box-shadow:0 0 0 4px rgba(31,182,166,.12);
}

#fb-send{
width:48px;
height:48px;
border:none;
border-radius:50%;
background:#1FB6A6;
color:#fff;
font-size:18px;
cursor:pointer;
transition:.25s;
flex-shrink:0;
}

#fb-send:hover{
transform:scale(1.06);
background:#18a395;
}

/* =====================================================
   WELCOME
=====================================================*/
.fb-welcome-wrap{
display:flex;
flex-direction:column;
gap:8px;
}

.fb-welcome{
background:#fff;
padding:12px 14px;
border-radius:12px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,.05);
margin:0 !important;
}

.fb-welcome strong{
display:block;
font-size:15px;
margin-bottom:4px;
color:#0A2540;
line-height:1.4;
}

.fb-welcome p{
margin:0;
font-size:13px;
line-height:1.5;
color:#666;
}

/* =====================================================
   CHIPS
=====================================================*/
.fb-suggestions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
padding:0;
margin:0;
}

.fb-chip{
background:#eef8f7 !important;
border:1px solid #d0eeeb !important;
padding:8px 12px;
border-radius:30px;
font-size:12px;
cursor:pointer;
transition:.25s;
color:#0A2540 !important;
}

.fb-chip:hover{
background:#1FB6A6 !important;
color:#fff !important;
transform:translateY(-2px);
border-color:#1FB6A6 !important;
}

/* =====================================================
   TYPOGRAPHY
=====================================================*/
.fb-ai h1{font-size:20px;margin:12px 0 8px;color:#0A2540;}
.fb-ai h2{font-size:17px;margin:10px 0 6px;color:#0A2540;}
.fb-ai h3{font-size:15px;margin:8px 0 4px;color:#0A2540;}
.fb-ai strong{font-weight:700;}
.fb-ai em{font-style:italic;}
.fb-ai p{margin:0 0 8px;}
.fb-ai p:last-child{margin:0;}

/* =====================================================
   SCROLLBAR
=====================================================*/
#fb-messages::-webkit-scrollbar{width:5px;}
#fb-messages::-webkit-scrollbar-thumb{background:#d3d3d3;border-radius:20px;}
#fb-messages::-webkit-scrollbar-thumb:hover{background:#b5b5b5;}

/* =====================================================
   ANIMATION
=====================================================*/
.fb-ai,.fb-user{animation:fbFade .25s ease;}

@keyframes fbFade{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:none;}
}

/* =====================================================
   MOBILE
=====================================================*/
@media(max-width:768px){

#finbase-chat-button{
right:18px;
bottom:18px;
width:60px;
height:60px;
}

#finbase-chat-window{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100% !important;
height:100% !important;
border-radius:0;
display:none;
flex-direction:column;
}

#fb-messages{
flex:1;
height:auto !important;
padding:12px;
overflow-y:auto;
}

.fb-header{
height:70px;
padding:0 14px;
flex-shrink:0;
}

.fb-header img{
width:38px;
height:38px;
}

.fb-header strong{
font-size:15px;
}

.fb-status{
font-size:11px;
}

.fb-input{
height:76px;
padding:12px;
flex-shrink:0;
}

#fb-message{
font-size:16px;
}

.fb-chip{
font-size:12px !important;
padding:7px 11px;
}

}