:root{
    --chat-bg:#f8f9fa;
    --chat-surface:#ffffff;
    --chat-border:#dee2e6;
    --chat-primary:#0d6efd;
    --chat-radius:18px;
}

html,
body{
    height:100%;
    margin:0;
    overflow:hidden;
    background:var(--chat-bg);
}

#chat-page{
    height:100vh;
}

#ai-chat-main {
    height: 100vh;
}

/* ---------- SIDEBAR ---------- */

#ai-chat-sidebar{
    width:300px;
    background:white;
    border-right:1px solid var(--chat-border);
    overflow-y:auto;
    height: 100vh;
    flex-shrink: 0;
}

#ai-conversations{
    padding:.75rem;
    cursor: pointer;
}

aside h6{
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.ai-conversation:hover{
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 10px;
}

#ai-conversations .list-group-item{

    border:none;
    border-radius:12px;
    margin-bottom:.4rem;
    cursor:pointer;
}

#ai-conversations .list-group-item:hover{
    background:#f2f4f7;
}

/* ---------- HEADER ---------- */

.ai-chat-header{
    background:white;
    border-bottom:1px solid var(--chat-border);
    padding:16px 24px;
}

.ai-chat-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
}

#ai-chat-options {
    position: relative;
    z-index: 1060;
}

/* ---------- MENSAGENS ---------- */

#ai-chat-messages{

    flex:1;
    overflow-y:auto;
    padding:30px;
}

.ai-message{

    max-width:75%;
    padding:14px 18px;
    border-radius:18px;
    margin-bottom:18px;
    line-height:1.6;
    word-break:break-word;
}

.ai-message.assistant{

    background:white;
    border:1px solid var(--chat-border);
}

.ai-message.user{

    background:var(--chat-primary);
    color:white;
    margin-left:auto;
}

/* Markdown */

.ai-message pre{

    border-radius:10px;
    overflow:auto;
    padding:1rem;
}

.ai-message code{

    font-size:.9rem;
}

/* ---------- INPUT ---------- */

#ai-chat-footer{

    background:white;
    border-top:1px solid var(--chat-border);
    padding:18px;
}

#ai-chat-input{

    resize:none;
    min-height:52px;
    max-height:180px;
}

#ai-chat-send{

    min-width:60px;
}

/* ---------- SCROLL ---------- */

#ai-chat-sidebar::-webkit-scrollbar,
#ai-chat-messages::-webkit-scrollbar{

    width:8px;
}

#ai-chat-sidebar::-webkit-scrollbar-thumb,
#ai-chat-messages::-webkit-scrollbar-thumb{

    background:#c7c7c7;
    border-radius:10px;
}

.ai-typing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 10px 14px;
}

.ai-typing span {
    width: 8px;
    height: 8px;
    background-color: var(--chat-primary);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.ai-typing span:nth-child(1) {
    animation-delay: 0s;
}

.ai-typing span:nth-child(2) {
    animation-delay: .2s;
}

.ai-typing span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: .4;
    }

    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* ---------- TABLET ---------- */

@media (max-width:991px){

    #ai-chat-sidebar{
        width:250px;
    }

    .ai-message{
        max-width:90%;
    }

}

/* ---------- CELULAR ---------- */

@media (max-width:767px){

    html,
    body{
        overflow:auto;
    }

    #chat-page{
        height:100vh;
    }

    #ai-chat-messages{
        padding:18px;
    }

    .ai-message{
        max-width:100%;
    }

    #ai-chat-footer{
        padding:12px;
    }

    #ai-chat-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 90%;
        max-width: 360px;
        background: white;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .3s ease;
    }

    #ai-chat-sidebar.show {
        transform: translateX(0);
    }

}