/* =====================================================
   UNIVERS AI
   Version 1.0
===================================================== */

:root{

    --ua-primary:#0A84FF;
    --ua-secondary:#0057D8;
    --ua-bg:#ffffff;
    --ua-dark:#1b1b1b;
    --ua-border:#e8e8e8;
    --ua-shadow:0 12px 40px rgba(0,0,0,.18);

    --radius:18px;

    --transition:.25s;

}

*{
    box-sizing:border-box;
}

#univers-ai-button{

    position:fixed;

    right:25px;

    bottom:25px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:linear-gradient(135deg,#0A84FF,#0049C7);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    cursor:pointer;

    box-shadow:var(--ua-shadow);

    z-index:999999;

    transition:.3s;

}

#univers-ai-button:hover{

    transform:scale(1.08);

}

#univers-ai-window{

    position:fixed;

    right:25px;

    bottom:105px;

    width:420px;

    height:650px;

    background:var(--ua-bg);

    border-radius:24px;

    box-shadow:var(--ua-shadow);

    overflow:hidden;

    display:none;

    flex-direction:column;

    z-index:999999;

    animation:universOpen .25s;

}

@keyframes universOpen{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

#univers-ai-header{

    height:72px;

    background:linear-gradient(135deg,#0A84FF,#0049C7);

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

}

.ua-title{

    font-size:20px;

    font-weight:bold;

}

#univers-ai-close{

    cursor:pointer;

    font-size:24px;

}

#univers-ai-body{

    flex:1;

    overflow-y:auto;

    padding:18px;

    background:#f6f8fb;

}

.ua-message{

    max-width:85%;

    padding:14px 18px;

    margin-bottom:15px;

    border-radius:18px;

    line-height:1.6;

    animation:fadeIn .3s;

}

.ua-message.ai{

    background:white;

    border:1px solid #eee;

}

.ua-message.user{

    background:#0A84FF;

    color:white;

    margin-left:auto;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

#univers-ai-suggestions{

    display:flex;

    gap:8px;

    overflow-x:auto;

    padding:12px;

    background:#fff;

}

.ua-suggestion{

    white-space:nowrap;

    border:none;

    background:#eef5ff;

    color:#0A84FF;

    padding:10px 15px;

    border-radius:30px;

    cursor:pointer;

    transition:.25s;

}

.ua-suggestion:hover{

    background:#0A84FF;

    color:white;

}

#univers-ai-footer{

    display:flex;

    padding:12px;

    border-top:1px solid #eee;

    background:white;

}

#univers-ai-input{

    flex:1;

    border:1px solid #ddd;

    border-radius:16px;

    resize:none;

    min-height:52px;

    max-height:140px;

    padding:12px;

    outline:none;

    font-size:15px;

}

#univers-ai-send{

    width:54px;

    margin-left:10px;

    border:none;

    border-radius:16px;

    background:#0A84FF;

    color:white;

    cursor:pointer;

    font-size:22px;

}

#univers-ai-send:hover{

    background:#0057D8;

}

@media(max-width:768px){

#univers-ai-window{

    width:100%;

    height:100%;

    right:0;

    bottom:0;

    border-radius:0;

}

#univers-ai-button{

    width:60px;

    height:60px;

    right:18px;

    bottom:18px;

}

}
#universAI{

position:fixed;

right:20px;

bottom:20px;

font-family:Arial;

z-index:9999;

}



#aiButton{

width:60px;

height:60px;

border-radius:50%;

border:none;

font-size:28px;

cursor:pointer;

}



#aiBox{

display:none;

width:350px;

height:450px;

background:white;

border-radius:15px;

box-shadow:0 5px 25px rgba(0,0,0,.2);

overflow:hidden;

}



#aiHeader{

padding:15px;

font-weight:bold;

display:flex;

justify-content:space-between;

}



#aiMessages{

height:330px;

overflow-y:auto;

padding:15px;

}



.aiMessage{

padding:10px;

margin-bottom:10px;

border-radius:10px;

background:#f1f1f1;

}



#aiInputArea{

display:flex;

padding:10px;

}



#aiInput{

flex:1;

padding:10px;

}



#sendAI{

padding:10px;

cursor:pointer;

}