/**
 * Estilos para corrigir o UI do chatbot Guardian
 * Foco em remover fundos brancos e garantir que as mensagens do bot têm o aspeto visual correto
 */

/* Forçar aikit-message-content a ser igual ao guardian-message-bubble */
.aikit-message-bot .aikit-message-content,
.aikit-message-bot span.aikit-message-content,
div.aikit-message-bot .aikit-message-content,
div.aikit-message-bot span.aikit-message-content,
.aikit-message.aikit-message-bot .aikit-message-content,
.aikit-message.aikit-message-bot span.aikit-message-content,
.guardian-message-bubble,
.aikit-message-content {
    background-color: #1D1D1D !important;
    color: #F0A030 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    position: relative !important;
    display: inline-block !important;
    max-width: 85% !important;
    margin-left: 15px !important;
    box-sizing: border-box !important;
}

/* Remover todos os fundos brancos do chatbot */
.aikit-chat .aikit-chat-messages > div,
.aikit-chat .aikit-message-container,
.aikit-chat .aikit-message-wrapper,
.aikit-chat .aikit-message-bot > div:not(.guardian-message-container):not(.guardian-message-bubble):not(.aikit-message-content),
.aikit-chat .aikit-message-bot div:not(.guardian-message-container):not(.guardian-message-bubble):not(.aikit-message-content),
.aikit-message-bot > div:not(.guardian-message-container):not(.guardian-message-bubble):not(.aikit-message-content) {
    background-color: transparent !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Remover especificamente o fundo branco por baixo da mensagem */
.aikit-chat .aikit-chat-messages .aikit-message-bot > *,
.aikit-chat .aikit-chat-messages .aikit-message-bot > div,
.aikit-chat .aikit-chat-messages .aikit-message-bot > div > div,
.aikit-chat .aikit-chat-messages .aikit-message-bot > div > div > div {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Remover qualquer elemento que possa ser o fundo branco */
.aikit-chat .aikit-chat-messages .aikit-message-bot > div:first-child:not(.aikit-message-content):not(.guardian-message-container):not(.guardian-message-bubble) {
    display: none !important;
}

/* Remover padding e margens desnecessárias */
.aikit-chat .aikit-chat-messages .aikit-message-bot {
    padding: 0 !important;
    margin-bottom: 10px !important;
}

/* Garantir que as mensagens do bot têm o aspeto visual correto */
.aikit-message-bot .aikit-message-content,
.aikit-message-bot span.aikit-message-content,
div.aikit-message-bot .aikit-message-content,
div.aikit-message-bot span.aikit-message-content,
.aikit-message.aikit-message-bot .aikit-message-content,
.aikit-message.aikit-message-bot span.aikit-message-content,
.guardian-message-bubble {
    background-color: #1D1D1D !important;
    color: #F0A030 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    position: relative !important;
    display: inline-block !important;
    max-width: 85% !important;
    margin-left: 15px !important;
    box-sizing: border-box !important;
}

/* Estilo para as mensagens do utilizador - cores do branding Glender */
.aikit-message-user .aikit-message-content,
.aikit-message-user span.aikit-message-content,
div.aikit-message-user .aikit-message-content,
div.aikit-message-user span.aikit-message-content,
.aikit-message.aikit-message-user .aikit-message-content,
.aikit-message.aikit-message-user span.aikit-message-content {
    background-color: #F0A030 !important; /* Dourado Glender */
    color: #1D1D1D !important; /* Texto escuro para contraste */
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    position: relative !important;
    display: inline-block !important;
    max-width: 85% !important;
    margin-right: 15px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Contentor das mensagens do utilizador */
.aikit-message-user {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

/* Cauda para mensagens do utilizador */
.aikit-message-user .aikit-message-content::after,
.aikit-message-user span.aikit-message-content::after,
div.aikit-message-user .aikit-message-content::after,
div.aikit-message-user span.aikit-message-content::after,
.aikit-message.aikit-message-user .aikit-message-content::after,
.aikit-message.aikit-message-user span.aikit-message-content::after {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    right: -10px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 8px 0 8px 10px !important;
    border-color: transparent transparent transparent #F0A030 !important;
    z-index: 1 !important;
}

/* Cauda da mensagem */
.aikit-message-bot .aikit-message-content::before,
.aikit-message-bot span.aikit-message-content::before,
div.aikit-message-bot .aikit-message-content::before,
div.aikit-message-bot span.aikit-message-content::before,
.aikit-message.aikit-message-bot .aikit-message-content::before,
.aikit-message.aikit-message-bot span.aikit-message-content::before {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: -10px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 8px 10px 8px 0 !important;
    border-color: transparent #1D1D1D transparent transparent !important;
    z-index: 1 !important;
}

/* Remover qualquer fundo branco adicional */
.aikit-chat {
    --aikit-message-bot-bg: transparent !important;
    --aikit-message-bot-color: #F0A030 !important;
}

/* Garantir que o contentor da mensagem do bot não tem fundo */
.aikit-message-bot {
    background-color: transparent !important;
    background: none !important;
}