/* ==========================================================
   CocoaFlow IA
   CHAT
========================================================== */

/* ==========================================================
   ÁREA DA CONVERSA
========================================================== */

.conversation{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/* ==========================================================
   MENSAGEM
========================================================== */

.message{

    display:flex;

    align-items:flex-start;

    gap:14px;

    width:100%;

    animation:fadeIn .25s ease;

}

/* ==========================================================
   MENSAGEM DO USUÁRIO
========================================================== */

.message.user{

    justify-content:flex-end;

}

.message.user .message-content{

    background:#2E7D32;

    color:#FFFFFF;

    border-radius:

        18px
        18px
        4px
        18px;

    max-width:80%;

}

/* ==========================================================
   MENSAGEM IA
========================================================== */

.message.assistant{

    justify-content:flex-start;

}

.message.assistant .message-content{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:

        18px
        18px
        18px
        4px;

    max-width:85%;

}

/* ==========================================================
   CONTEÚDO
========================================================== */

.message-content{

    padding:16px 18px;

    line-height:1.7;

    font-size:15px;

    color:#1F2937;

    word-break:break-word;

    box-shadow:

        0 4px 12px rgba(0,0,0,.04);

}

/* ==========================================================
   PARÁGRAFOS
========================================================== */

.message-content p{

    margin-bottom:12px;

}

.message-content p:last-child{

    margin-bottom:0;

}

/* ==========================================================
   TÍTULOS
========================================================== */

.message-content h1{

    font-size:24px;

    margin-bottom:14px;

}

.message-content h2{

    font-size:20px;

    margin-bottom:12px;

}

.message-content h3{

    font-size:18px;

    margin-bottom:10px;

}

/* ==========================================================
   LISTAS
========================================================== */

.message-content ul{

    margin:12px 0;

    padding-left:22px;

}

.message-content li{

    margin-bottom:8px;

}

/* ==========================================================
   BLOCO DE CÓDIGO
========================================================== */

.message-content pre{

    margin-top:14px;

}

.message-content code{

    font-family:

        Consolas,
        monospace;

}

/* ==========================================================
   TABELAS
========================================================== */

.message-content table{

    margin-top:14px;

}

/* ==========================================================
   LOADING
========================================================== */

.message.loading .message-content{

    padding:18px;

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .conversation{

        gap:18px;

    }

    .message-content{

        font-size:14px;

        padding:14px 16px;

    }

    .message.user .message-content{

        max-width:92%;

    }

    .message.assistant .message-content{

        max-width:94%;

    }

}