/* ==========================================
   DiSA - Dies Smart Assistant
========================================== */

#disa-container{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:99999;
    font-family:'Open Sans',sans-serif;
}

/* ==========================================
   Floating Button
========================================== */

#disa-button{

    width:68px;
    height:68px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:30px;

    color:#fff;

    background:linear-gradient(135deg,#ff3d3d,#b30000);

    box-shadow:0 8px 25px rgba(255,0,0,.45);

    transition:.3s;

}

#disa-button:hover{

    transform:scale(1.08);

}

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

#disa-chat{

    width:370px;

    height:560px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    display:none; 

    flex-direction:column;

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

    margin-bottom:15px;

}

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

.disa-header{

    height:75px;

    background:linear-gradient(135deg,#ff3d3d,#a00000);

    display:flex;

    align-items:center;

    padding:15px;

    color:#fff;

}

.disa-avatar{

    width:50px;

    height:50px;

    border-radius:50%;

    background:rgba(255,255,255,.2);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    margin-right:12px;

}

.disa-title{

    flex:1;

}

.disa-title h4{

    margin:0;

    font-size:18px;

    font-weight:bold;

}

.disa-title span{

    font-size:12px;

    opacity:.85;

}

#disa-close{

    background:none;

    border:none;

    color:#fff;

    font-size:28px;

    cursor:pointer;

}

/* ==========================================
   Body
========================================== */

#disa-body{

    flex:1;

    overflow-y:auto;

    background:#f5f5f5;

    padding:18px;

}

.disa-message{

    display:inline-block;

    max-width:82%;

    padding:12px 16px;

    border-radius:18px;

    margin-bottom:12px;

    font-size:14px;

    line-height:22px;

    clear:both;

}

.disa-bot{

    background:#fff;

    color:#333;

    float:left;

    border-bottom-left-radius:5px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.disa-user{

    background:#d71920;

    color:#fff;

    float:right;

    border-bottom-right-radius:5px;

}

/* ==========================================
   Footer
========================================== */

.disa-footer{

    height:70px;

    display:flex;

    align-items:center;

    padding:12px;

    border-top:1px solid #eee;

    background:#fff;

}

#disa-input{

    flex:1;

    height:44px;

    border:1px solid #ddd;

    border-radius:25px;

    padding:0 16px;

    outline:none;

    font-size:14px;

}

#disa-input:focus{

    border-color:#d71920;

}

#disa-send{

    width:46px;

    height:46px;

    margin-left:10px;

    border:none;

    border-radius:50%;

    background:#d71920;

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

#disa-send:hover{

    background:#b30000;

}

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

#disa-body::-webkit-scrollbar{

    width:6px;

}

#disa-body::-webkit-scrollbar-thumb{

    background:#ccc;

    border-radius:20px;

}

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

@media(max-width:768px){

    #disa-container{

        right:15px;

        bottom:15px;

    }

    #disa-chat{

        width:calc(100vw - 30px);

        height:70vh;

    }

}

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

.disa-typing{

    display:flex;

    align-items:center;

    gap:6px;

}

.disa-typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#999;

    animation:disaTyping .8s infinite alternate;

}

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

    animation-delay:.2s;

}

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

    animation-delay:.4s;

}

@keyframes disaTyping{

    from{

        opacity:.3;
        transform:translateY(0);

    }

    to{

        opacity:1;
        transform:translateY(-4px);

    }

}

.disa-cursor{

    display:inline-block;

    animation:blink .8s infinite;

}

@keyframes blink{

    50%{

        opacity:0;

    }

}