/* =========================================
   FLOATING BUTTON
========================================= */

#zayin-button{

    position:fixed;

    bottom:25px;
    right:25px;

    width:120px;
    height:120px;

    cursor:pointer;

    z-index:10001;

    transition:.25s;

}

#zayin-button:hover{

    transform:scale(1.08);

}


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

#zayin-chat{

    position:fixed;

    right:25px;
    bottom:120px;

    width:360px;
    height:520px;

    display:none;
    flex-direction:column;

    background:#fff;

    border:3px solid #ecb611;

    border-radius:20px;

    overflow:hidden;

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

    z-index:10000;

}


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

#zayin-header{

    height:70px;

    background:#0c2691;

    border-bottom:2px solid #ecb611;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 18px;

    flex-shrink:0;

}

.zayin-header-avatar{

    width:42px;
    height:42px;

    object-fit:contain;

}

.zayin-header-info{

    display:flex;
    flex-direction:column;

}

.zayin-name{

    color:#fff;

    font-size:17px;

    font-weight:700;

}

.zayin-status{

    display:flex;

    align-items:center;

    gap:6px;

    color:#f4f4f4;

    font-size:13px;

}

.status-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#32d74b;

}


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

#zayin-messages{

    flex:1;

    overflow-y:auto;

    padding:20px;

    scroll-behavior:smooth;

}


/* =========================================
   WELCOME
========================================= */

.zayin-welcome{

    display:flex;

    justify-content:center;

}

.chat-bubble{

    text-align:center;

}

.zayin-avatar{

    width:85px;

    display:block;

    margin:20px auto;

}

#zayin-messages h3{

    color:#0c2691;

    font-size:22px;

    margin-bottom:15px;

}


/* =========================================
   CHAT HISTORY
========================================= */

#answer{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.user-message{

    align-self:flex-end;

    max-width:75%;

    background:#0c2691;

    color:#fff;

    padding:12px 16px;

    border-radius:18px 18px 4px 18px;

}

.ai-message{

    align-self:flex-start;

    max-width:75%;

    background:#f3f5fb;

    color:#333;

    padding:12px 16px;

    border-radius:18px 18px 18px 4px;

}


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

#zayin-input-area{

    padding:15px;

    background:#fff;

    border-top:1px solid #ececec;

    flex-shrink:0;

}

.zayin-input-wrapper{

    position:relative;

}

#question{

    width:100%;

    padding:16px 65px 16px 18px;

    border:1px solid #ddd;

    border-radius:30px;

    font-size:16px;

    box-sizing:border-box;

    transition:.2s;

}

#question:focus{

    outline:none;

    border-color:#ecb611;

}

#askButton{

    position:absolute;

    right:8px;

    top:50%;

    transform:translateY(-50%);

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:#0c2691;

    color:#fff;

    cursor:pointer;

    transition:.2s;

}

#askButton:hover{

    background:#1439c2;

}


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

#thinking{

    display:flex;

    gap:6px;

    align-items:center;

    padding:16px;

}

#thinking span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#0c2691;

    animation:typing 1.2s infinite;

}

#thinking span:nth-child(2){

    animation-delay:.2s;

}

#thinking span:nth-child(3){

    animation-delay:.4s;

}

@keyframes typing{

    0%,60%,100%{

        transform:translateY(0);

        opacity:.4;

    }

    30%{

        transform:translateY(-6px);

        opacity:1;

    }

}