/* Floating Button */

#ruby-ai-button{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    background:#d71920;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    cursor:pointer;
    z-index:999999;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:.3s;
}

#ruby-ai-button:hover{
    transform:scale(1.08);
}

/* Chat Window */

#ruby-ai-window{
    position: fixed;
    right: 20px;
    bottom: 90px;

    width: 380px;
    height: 700px;

    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    z-index: 999999;
}

/* Header */

.ruby-header{
    height:80px;
    min-height:80px;

    background:#d71920;
    color:#fff;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px;

    flex-shrink:0;
}

.ruby-header h3{

    margin:0;

    font-size:18px;

}

.ruby-header span{

    font-size:13px;

    opacity:.9;

}
.ruby-header-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.ruby-header-info h3{
    margin:0;
    font-size:28px;
    color:#fff;
    line-height:1;
}

.ruby-header-info span{
    margin-top:6px;
    font-size:14px;
    color:#fff;
}

#ruby-close{

    border:none;

    background:none;

    color:#fff;

    font-size:28px;

    cursor:pointer;

}

/* Body */

.ruby-body{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;

    padding:15px;

    min-height:0;
}
#ruby-chat-messages{
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 100%;
}

/* Messages */

.ruby-message{

    padding:14px;

    border-radius:14px;

    line-height:1.6;

    font-size:14px;

    word-break:break-word;

}

.ruby-message.bot{

    background:#ffffff;

    color:#222;

    align-self:flex-start;

    max-width:90%;

}

.ruby-message.user{

    background:#d71920;

    color:#fff;

    align-self:flex-end;

    max-width:90%;

}

/* Suggestions */

.ruby-suggestions{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:15px;

}

.ruby-suggestions button{
    background:#fff;
    border:1px solid #ddd;
    border-radius:25px;
    padding:10px 16px;
    cursor:pointer;
    transition:.3s;
}
.ruby-suggestions button:hover{

    background:#d71920;

    color:#fff;

}

/* Typing */

#ruby-typing{

    display:none;

    padding:10px 20px;

    background:#fff;

    border-top:1px solid #eee;

}

#ruby-typing span{

    width:8px;

    height:8px;

    background:#999;

    border-radius:50%;

    display:inline-block;

    margin-right:5px;

    animation:rubyTyping .8s infinite alternate;

}

#ruby-typing span:nth-child(2){

    animation-delay:.2s;

}

#ruby-typing span:nth-child(3){

    animation-delay:.4s;

}

@keyframes rubyTyping{

    from{opacity:.3;}

    to{opacity:1;}

}

/* Footer */

.ruby-footer{
    display:flex;
    align-items:center;
    gap:10px;

    padding:15px;

    background:#fff;

    border-top:1px solid #eee;

    flex-shrink:0;
}

#ruby-message{

    flex:1;

    border:1px solid #ddd;

    border-radius:30px;

    padding:12px 18px;

    outline:none;

    font-size:14px;

}

#ruby-send{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#d71920;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}

/* Scrollbar */

.ruby-body::-webkit-scrollbar{

    width:6px;

}

.ruby-body::-webkit-scrollbar-thumb{

    background:#ccc;

    border-radius:20px;

}

/* Mobile */

@media(max-width:480px){

    #ruby-ai-window{

        width:100%;

        height:100%;

        right:0;

        bottom:0;

        border-radius:0;

    }

}