/* Estilos gerais para o widget do chatbot */
.chatbot-widget {
    position: fixed; /* Fixa a posição na tela */
    bottom: 50px;    /* 20px do fundo */
    right: 20px;     /* 20px da direita */
    z-index: 1000;   /* Garante que fique acima de outros elementos */
    /* Adicione estas linhas para melhor compatibilidade em mobile, se o widget ficar no canto */
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */
}

/* ... (chat-bubble styles remain the same) ... */

/* Estilos para o cartão do chat (quando maximizado) */
.chat-card {
    width: 300px;
    height: 400px; /* Fixed height is good, but consider max-height for smaller screens */
    display: none;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;

    /* --- Adições/Ajustes aqui para Mobile --- */
    /* Para telas menores, ajuste a largura e altura para não ficarem presas */
    @media (max-width: 400px) { /* Exemplo para telas de celular pequenas */
        width: 90vw; /* Usa 90% da largura da viewport */
        height: 80vh; /* Usa 80% da altura da viewport */
        right: 5vw; /* Centraliza mais na tela */
        left: 5vw; /* Centraliza mais na tela */
        bottom: 10px; /* Mais perto da parte inferior em mobile */
        max-height: calc(100vh - 70px); /* Previne que o card exceda a tela quando o teclado abre */
    }
}

.chat-card.active {
    display: flex;
}

.chat-body {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto; /* Esta é a propriedade chave para o scroll */
    background-color: #f8f9fa;

    /* --- Adição importante para rolagem suave em iOS --- */
    -webkit-overflow-scrolling: touch;
    /* Certifique-se de que nenhum min-height ou height esteja forçando o body a expandir */
    /* Se houver, remova ou ajuste-o. */
}

/* ... (message, bot-message, user-message, card-footer styles remain the same) ... */