/**
 * Estilos personalizados para o chatbot AIKit no tema Glender
 * 
 * Este ficheiro contém estilos para personalizar o chatbot AIKit,
 * substituindo os ícones originais por imagens personalizadas e
 * adaptando o design para corresponder ao tema Glender.
 * 
 * Última atualização: 06/06/2025
 */

/* Personalização do chatbot para o tema Glender */

/* Cores e estilo geral */
.aikit-chat {
    background-color: #111111 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 36px 0 rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #333333 !important;
    color: #F0A030 !important;
    font-family: 'Playfair Display', serif !important;
    max-height: 600px !important;
    min-width: 320px !important; /* Ensure overall chatbot width is sufficient */
    transition: all 0.3s ease !important;
}

/* Widget do chatbot */
.aikit-chat-widget {
    transition: all 0.3s ease !important;
}

/* Efeito de entrada do chatbot */
.aikit-chat-widget.d-none {
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

.aikit-chat-widget:not(.d-none) {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: fade-in 0.5s ease-out !important;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header do chatbot */
.aikit-chat-header {
    background: #111111 !important;
    color: #F0A030 !important;
    border-bottom: 1px solid #333333 !important;
    padding: 20px 10px !important; /* Reduced horizontal padding */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Remover a onda do header */
.aikit-chat-header::after {
    display: none !important;
}

/* Título do chatbot */
.aikit-chat-header .aikit-chat-welcome { /* Increased specificity */
    font-family: 'Playfair Display', serif !important;
    color: #F0A030 !important;
    font-size: 20px !important; /* Reduced from 22px */
    font-weight: 600 !important;
    display: block !important; /* Simpler block layout */
    /* align-items: flex-start removed */
    flex-grow: 1 !important;   /* Still a flex item in its parent .aikit-chat-header */
    margin-right: 5px !important; /* Space before the toggle/close button */
    /* min-width: 0 !important; removed */
    /* flex-basis: 0 !important; removed */
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* Allow text to wrap */
    overflow-wrap: break-word !important; /* Force break for long words if needed */
    text-overflow: clip !important; /* Prevent ellipsis if text overflows */
    overflow: auto !important; /* To contain the floated icon and establish BFC */
    height: auto !important; /* Ensure container can grow vertically */
}

/* Target potential span wrapper for the text with float layout */
.aikit-chat-header .aikit-chat-welcome > span {
    display: block !important; /* Allow it to take up space next to float and wrap text */
    overflow: visible !important; /* Override any potential hidden overflow */
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    height: auto !important;
}

/* Ícone personalizado no título do chatbot */
.aikit-chat-header .aikit-chat-welcome::before { /* Increased specificity */
    content: "" !important;
    float: left !important; /* Float the icon */
    /* display: block removed (or can be kept, float implies block) */
    /* flex-shrink: 0 removed */
    width: 40px !important;
    height: 40px !important;
    margin-right: 8px !important; /* Space between icon and text */
    background-image: url('../images/icon.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    /* Animation will be stopped by JS-injected style tag */
}

/* Mensagens do bot - regras com alta especificidade e !important para garantir aplicação */
body .aikit-chat .aikit-chat-messages .aikit-message-bot .aikit-message-content,
body .aikit-chat .aikit-chat-messages .aikit-message-bot span.aikit-message-content,
body .aikit-chat .aikit-chat-messages div.aikit-message-bot .aikit-message-content,
body .aikit-chat .aikit-chat-messages div.aikit-message-bot span.aikit-message-content,
body .aikit-chat .aikit-chat-messages .aikit-message.aikit-message-bot .aikit-message-content,
body .aikit-chat .aikit-chat-messages .aikit-message.aikit-message-bot span.aikit-message-content,
body div.aikit-chat div.aikit-chat-messages div.aikit-message-bot span.aikit-message-content {
    background-color: #1D1D1D !important; /* Fundo escuro para mensagens do bot */
    color: #F0A030 !important;
    border: none !important; /* Remover borda */
    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; /* Para posicionamento da cauda */
    display: inline-block !important; /* Garantir que o conteúdo se ajuste ao texto */
    max-width: 85% !important; /* Limitar a largura máxima */
    margin-left: 15px !important; /* Espaço para a cauda à esquerda */
    box-sizing: border-box !important;
}

/* Cauda para mensagens do bot */
.aikit-message-bot .aikit-message-content::after,
.aikit-message-bot span.aikit-message-content::after,
div.aikit-message-bot .aikit-message-content::after,
div.aikit-message-bot span.aikit-message-content::after,
.aikit-message.aikit-message-bot .aikit-message-content::after,
.aikit-message.aikit-message-bot span.aikit-message-content::after {
    content: '' !important;
    position: absolute !important;
    top: 10px !important; /* Posição vertical da cauda */
    left: -10px !important; /* Posição da cauda à esquerda, fora da bolha */
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    /* Isto cria um triângulo apontando para a esquerda */
    border-width: 8px 10px 8px 0 !important; /* Triângulo apontando para a esquerda */
    /* Cores: topo, direita, baixo, esquerda */
    border-color: transparent #1D1D1D transparent transparent !important; /* Cor da cauda corresponde ao fundo da bolha */
    z-index: 1 !important; /* Garantir que a cauda apareça */
}

/* Contentor da mensagem do bot */
.aikit-message.aikit-message-bot,
div.aikit-message.aikit-message-bot {
    display: flex !important;
    justify-content: flex-start !important; /* Alinhar à esquerda */
    margin-bottom: 10px !important;
    position: relative !important;
    width: 100% !important;
}

/* Mensagens do usuário */
.aikit-message-user .aikit-message-content {
    background-color: #222222 !important;
    color: #F0A030 !important;
    border: 1px solid #333333 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Área de input */
.aikit-input-group {
    background-color: #111111 !important;
    border-top: 1px solid #333333 !important;
    padding: 15px !important;
}

.aikit-footer-input-wrapper {
    background-color: #111111 !important;
    padding: 0 !important;
}

.aikit-footer-input-wrapper hr {
    display: none !important;
}

.aikit-input-row {
    display: flex !important;
    align-items: center !important;
    background-color: #222222 !important;
    border-radius: 20px !important;
    border: 1px solid #333333 !important;
    padding: 5px 10px !important;
    transition: all 0.3s ease !important;
}

.aikit-input-row:focus-within {
    border-color: #F0A030 !important;
    box-shadow: 0 0 0 2px rgba(240, 160, 48, 0.3) !important;
}

#aikit-new-message-textarea {
    background-color: transparent !important;
    color: #F0A030 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px !important;
    resize: none !important;
    flex: 1 !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

#aikit-new-message-textarea:focus {
    outline: none !important;
}

#aikit-new-message-textarea::placeholder {
    color: rgba(240, 160, 48, 0.6) !important;
    font-style: italic !important;
}

/* Botão de envio */
.aikit-button-body {
    background-color: #222222 !important;
    color: #F0A030 !important;
    border: 1px solid #333333 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.aikit-button-body:hover {
    background-color: #333333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    border-color: #F0A030 !important;
}

.aikit-button-body:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Estilização para o botão de envio - a substituição dos ícones é feita via JavaScript */
.aikit-chatbot-send-button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    transition: all 0.3s ease !important;
}

/* Esconder imediatamente todos os ícones originais do chatbot */
.aikit-open-chat-button .aikit-button-body i,
.aikit-open-chat-button .aikit-button-body svg,
.aikit-open-chat-button .aikit-button-body img:not(.glender-chat-icon),
.aikit-chatbot-send-button i,
.aikit-chatbot-send-button svg,
.aikit-chatbot-send-button img:not(.glender-send-icon),
.aikit-button-body > i,
.aikit-button-body > svg,
.aikit-button-body > img:not(.glender-chat-icon):not(.glender-send-icon) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Estilos para as imagens personalizadas */
.glender-chat-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
}

.glender-send-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
}

/* Garantir que os botões usam flexbox para centralizar o conteúdo */
.aikit-open-chat-button .aikit-button-body,
.aikit-chatbot-send-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Esconder o botão de envio quando o chatbot está fechado */
.aikit-chat-widget:not(.expanded) .aikit-chatbot-send-button,
.aikit-chat-widget:not(.expanded) .aikit-button-send-wrapper,
.aikit-chat-widget:not(.expanded) .aikit-button.aikit-send-button-container,
.aikit-chat-widget.d-none .aikit-chatbot-send-button,
.aikit-chat-widget.d-none .aikit-button-send-wrapper,
.aikit-chat-widget.d-none .aikit-button.aikit-send-button-container,
.aikit-chat-widget:not([class*="expanded"]) .aikit-chatbot-send-button,
.aikit-chat-widget:not([class*="expanded"]) .aikit-button-send-wrapper,
.aikit-chat-widget:not([class*="expanded"]) .aikit-button.aikit-send-button-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(100%) !important;
}

/* Efeito hover para as imagens personalizadas */
.aikit-open-chat-button:hover .glender-chat-icon,
.aikit-chatbot-send-button:hover .glender-send-icon {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* Botão de abrir chat */
.aikit-open-chat-button {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
    animation: chat-button-pulse 2s infinite ease-in-out !important;
}

@keyframes chat-button-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Botão de abrir chat - estilos adicionais */
.aikit-open-chat-button {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Garantir que o corpo do botão ocupa todo o espaço disponível */
.aikit-open-chat-button .aikit-button-body {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.aikit-open-chat-button .aikit-button-body:hover {
    background-color: #333333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(240, 160, 48, 0.2) !important;
    border-color: #F0A030 !important;
}

.aikit-open-chat-button .aikit-button-body:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Estilização para os botões do chatbot - a substituição dos ícones é feita via JavaScript */
.aikit-open-chat-button .aikit-button-body {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    transition: all 0.3s ease !important;
}

/* Estilização para a imagem personalizada do botão de abrir chat */
.glender-chat-icon {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    transition: all 0.3s ease !important;
}

.aikit-open-chat-button .aikit-button-body:hover,
.glender-chat-icon:hover {
    transform: scale(1.1) !important;
    filter: brightness(1.2) !important;
}

/* Animação de digitação */
.aikit-typing .aikit-dot {
    background-color: #F0A030 !important;
}

/* Botão de voz */
.aikit-voice-button {
    background-color: transparent !important;
    color: #F0A030 !important;
    border: none !important;
    padding: 8px !important;
    margin-right: 5px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.aikit-voice-button:hover {
    background-color: rgba(240, 160, 48, 0.1) !important;
    transform: scale(1.1) !important;
}

.aikit-voice-button:active {
    transform: scale(0.95) !important;
}

/* Ícone do microfone */
.aikit-mic-icon {
    fill: #F0A030 !important;
    width: 20px !important;
    height: 20px !important;
    transition: all 0.3s ease !important;
}

.aikit-voice-button:hover .aikit-mic-icon {
    fill: #FFB040 !important;
}

/* Animação de pulso */
.aikit-pulse-ring {
    border-color: rgba(240, 160, 48, 0.5) !important;
    animation: pulse 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite !important;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(240, 160, 48, 0.5);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(240, 160, 48, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(240, 160, 48, 0);
    }
}

/* Botão de minimizar */
.aikit-exit-chat {
    color: #F0A030 !important;
    background-color: transparent !important;
    border: none !important;
    padding: 8px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 14px !important;
}

.aikit-exit-chat:hover {
    background-color: rgba(240, 160, 48, 0.1) !important;
    color: #FFB040 !important;
}

.aikit-exit-chat svg {
    fill: #F0A030 !important;
    margin-right: 5px !important;
    transition: all 0.3s ease !important;
}

.aikit-exit-chat:hover svg {
    fill: #FFB040 !important;
    transform: translateX(-2px) !important;
}

/* Área de conversação */
#aikit-conversation {
    background-color: #111111 !important;
    padding: 15px !important;
    overflow-y: auto !important;
    max-height: 400px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #333333 #111111 !important;
}

#aikit-conversation::-webkit-scrollbar {
    width: 8px !important;
}

#aikit-conversation::-webkit-scrollbar-track {
    background: #111111 !important;
}

#aikit-conversation::-webkit-scrollbar-thumb {
    background-color: #333333 !important;
    border-radius: 10px !important;
    border: 2px solid #111111 !important;
}

/* Espaçamento entre mensagens */
.aikit-message {
    margin-bottom: 12px !important;
}

/* Estilo do título "Guardian of the Ritual" */
.aikit-chat-welcome span {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding-left: 50px !important;
}

.aikit-chat-welcome span::before {
    content: "" !important;
    display: inline-block !important;
    width: 40px !important;
    height: 40px !important;
    position: absolute !important;
    left: 0 !important;
    background-image: url('../../images/icon.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    margin-right: 10px !important;
    animation: pulse-glow 2s infinite ease-in-out !important;
}

@keyframes pulse-glow {
    0% {
        filter: drop-shadow(0 0 2px rgba(240, 160, 48, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(240, 160, 48, 0.8));
    }
    100% {
        filter: drop-shadow(0 0 2px rgba(240, 160, 48, 0.5));
    }
}