/* Estilo para o título do assistente */
#chatgpt-math-chat h4 {
    margin: 0;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    height: auto; /* Permite que o título se ajuste ao conteúdo */
    max-height: 50px; /* Limita a altura máxima do título */
    overflow: hidden; /* Evita que o título exceda a altura máxima */
    flex-shrink: 0; /* Impede que o título diminua */
    box-sizing: border-box;
    text-overflow: ellipsis; /* Adiciona reticências se o texto for muito longo */
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
}

/* Estilos gerais para a janela do chat */
#chatgpt-math-chat {
    width: 60vw;
    height: 60vh;
    max-width: 100%;
    max-height: 100%;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

/* Estilos para a área de mensagens */
#chat-output {
    flex-grow: 1; /* Permite que a área de mensagens cresça para ocupar o espaço restante */
    padding: 10px;
    overflow-y: auto; /* Habilita a rolagem vertical */
    box-sizing: border-box;
    word-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column; /* Coloca mensagens em coluna */
    gap: 10px; /* Maior espaçamento entre as mensagens */
    min-height: 0;
    font-family: 'Arial', sans-serif; /* Fonte padrão para o texto */
    font-size: 16px; /* Tamanho da fonte padrão */
    line-height: 1.6; /* Aumenta o espaçamento entre linhas para melhor legibilidade */
    color: #333; /* Cor do texto mais suave */
}

/* Estilos para a mensagem do usuário */
.user-message {
    text-align: right;
    background-color: #e1ffc7;
    padding: 10px 15px;
    margin: 0 5px 5px auto; /* Espaçamento adequado e alinhamento à direita */
    border-radius: 12px;
    display: inline-block;
    max-width: 80%;
    align-self: flex-end; /* Garante o alinhamento à direita no flexbox */
    font-family: 'Arial', sans-serif; /* Fonte do usuário */
    font-size: 15px; /* Tamanho da fonte do usuário */
    color: #333; /* Cor do texto */
}

/* Estilos para a mensagem do ChatGPT */
.chatgpt-message {
    text-align: left;
    background-color: #f1f1f1;
    padding: 12px 15px;
    margin: 0 auto 5px 5px; /* Espaçamento adequado e alinhamento à esquerda */
    border-radius: 12px;
    display: inline-block;
    max-width: 80%;
    align-self: flex-start; /* Garante o alinhamento à esquerda no flexbox */
    font-family: 'Arial', sans-serif; /* Fonte da mensagem do ChatGPT */
    font-size: 15px; /* Tamanho da fonte da mensagem */
    color: #333; /* Cor do texto da mensagem */
    line-height: 1.6; /* Melhor espaçamento entre linhas para legibilidade */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Leve sombra para destaque */
}

/* Preservação do estilo de renderização das equações do MathJax */
.MathJax {
    font-family: 'Times New Roman', serif !important; /* Fonte de estilo para as equações */
    color: inherit; /* Preserva a cor das equações */
    font-size: inherit; /* Preserva o tamanho da fonte das equações */
}

/* Estilos para a área de entrada de mensagem */
.chat-container {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    position: sticky; /* Mantém a caixa de entrada fixa ao rolar */
    bottom: 0; /* Posiciona a caixa de entrada na parte inferior */
    z-index: 10; /* Garante que a caixa de entrada fique acima do conteúdo de mensagens */
}

/* Estilos para o input e botão */
#user-message {
    flex-grow: 1;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-right: 5px;
    box-sizing: border-box;
}

/* Cor da borda do input quando focado */
#user-message:focus {
    border-color: #048603; /* Cor da borda ao focar */
    outline: none; /* Remove o contorno padrão do navegador */
}

#send-message {
    padding: 5px 10px;
    border: none;
    background-color: #048603;
    color: #ffffff;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transição suave ao passar o mouse */
}

/* Cor do botão enviar ao passar o mouse */
#send-message:hover {
    background-color: #13e811; /* Cor mais clara ao passar o mouse */
}

/* Tornar o chat adaptável a dispositivos móveis */
@media (max-width: 768px) {
    #chatgpt-math-chat {
        width: 90vw;
        height: 50vh;
    }

    #chat-output {
        max-width: 100%;
    }

    /* Ajustes adicionais para o input e botão em dispositivos móveis */
    .chat-container {
        padding: 5px; /* Reduz o padding para telas menores */
    }
    #user-message {
        font-size: 14px; /* Tamanho da fonte menor para dispositivos móveis */
    }
    #send-message {
        font-size: 14px; /* Tamanho da fonte menor para o botão em dispositivos móveis */
    }
}