/**
 * Consolidated Chatbot Fixes for Glender Theme
 * Merges: chatbot-fix.css, chatbot-direct-fix.css, chatbot-content-match.css,
 *         chatbot-container-fix.css, chatbot-send-button-fix.css, chatbot-typing-fix.css
 */

/* === RESET: Remove all default AIKit backgrounds === */
.aikit-chat {
    --aikit-message-bot-bg: transparent !important;
    --aikit-message-bot-color: #F0A030 !important;
    --aikit-message-user-bg: #F0A030 !important;
    --aikit-message-user-color: #1D1D1D !important;
}

.aikit-message,
.aikit-message.aikit-message-bot,
.aikit-chat .aikit-message,
.aikit-chat .aikit-message.aikit-message-bot {
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 0 10px 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    overflow-wrap: normal !important;
    display: block !important;
    max-width: 100% !important;
    clear: both !important;
    position: relative !important;
    transition: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
}

.aikit-message-bot,
.aikit-chat .aikit-message-bot,
.aikit-message.aikit-message-bot {
    background-color: transparent !important;
    background: none !important;
    margin-bottom: 10px !important;
}

/* Remove white backgrounds from all chatbot wrappers */
.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):not(.emergency-message-container):not(.emergency-message-bubble),
.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;
}

/* Hide empty wrapper divs inside bot messages */
.aikit-message-bot > div:not(.aikit-message-content):not(.guardian-message-container):not(.guardian-message-bubble):not(.emergency-message-container):not(.emergency-message-bubble) {
    display: none !important;
}

/* === BOT MESSAGE BUBBLE === */
html body .aikit-chat .aikit-chat-messages .aikit-message-bot .aikit-message-content,
html body .aikit-chat .aikit-message-bot .aikit-message-content,
html body .aikit-message-bot .aikit-message-content,
.aikit-message-bot .aikit-message-content,
.aikit-message-bot span.aikit-message-content,
.aikit-message-bot div.aikit-message-content,
.aikit-message-bot > .aikit-message-content,
.aikit-message-bot > div > .aikit-message-content,
.aikit-message-bot > div > div > .aikit-message-content,
.aikit-message-bot span[class="aikit-message-content"],
.aikit-message-bot span[classname="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;
    box-shadow: none !important;
    text-align: left !important;
    float: none !important;
    width: auto !important;
}

/* Bot message tail */
html body .aikit-chat .aikit-message-bot .aikit-message-content::before,
.aikit-message-bot .aikit-message-content::before,
.aikit-message-bot span.aikit-message-content::before,
.aikit-message-bot div.aikit-message-content::before,
.aikit-message-bot span[class="aikit-message-content"]::before,
.aikit-message-bot span[classname="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;
}

/* === USER MESSAGE BUBBLE === */
.aikit-message-user,
.aikit-chat .aikit-message-user,
.aikit-message.aikit-message-user {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    background: transparent !important;
}

html body .aikit-chat .aikit-message-user .aikit-message-content,
.aikit-message-user .aikit-message-content,
.aikit-message-user span.aikit-message-content,
.aikit-message-user div.aikit-message-content,
.aikit-message-user span[class="aikit-message-content"],
.aikit-message-user span[classname="aikit-message-content"] {
    background-color: #F0A030 !important;
    color: #1D1D1D !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-right: 15px !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    text-align: left !important;
}

/* User message tail */
.aikit-message-user .aikit-message-content::after,
.aikit-message-user span.aikit-message-content::after,
.aikit-message-user div.aikit-message-content::after,
.aikit-message-user span[class="aikit-message-content"]::after,
.aikit-message-user span[classname="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;
}

/* === SEND BUTTON === */
.glender-send-btn {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    height: 40px;
    width: 40px;
}

.glender-send-btn svg {
    display: block;
    width: 28px;
    height: 28px;
    stroke: #F0A030;
    fill: none;
    transition: stroke 0.2s;
}

.glender-send-btn:hover svg {
    stroke: #fff;
}

.aikit-chat-input-container,
.aikit-chat-input-wrapper,
.aikit-chat-input {
    position: relative !important;
}

.aikit-chat-input {
    padding-right: 50px !important;
}

/* === TYPING INDICATOR (3 dots) === */
.aikit-typing-container,
.aikit-message-bot.aikit-typing-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: rgba(29, 29, 29, 0.8) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    max-width: 80px !important;
    margin: 5px 0 !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

.aikit-typing {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 15px !important;
    min-width: 40px !important;
    position: relative !important;
    z-index: 101 !important;
}

.aikit-typing .aikit-dot {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    margin-right: 4px !important;
    background-color: #e6a95f !important;
    animation: mercuryTypingAnimation 1.8s infinite ease-in-out !important;
    animation-fill-mode: both !important;
    will-change: transform, background-color !important;
    box-shadow: 0 0 3px rgba(230, 169, 95, 0.5) !important;
}

.aikit-typing .aikit-dot:nth-child(1) { animation-delay: 200ms !important; }
.aikit-typing .aikit-dot:nth-child(2) { animation-delay: 300ms !important; }
.aikit-typing .aikit-dot:nth-child(3) { animation-delay: 400ms !important; margin-right: 0 !important; }

@keyframes mercuryTypingAnimation {
    0%   { transform: translateY(0px);  background-color: rgba(230, 169, 95, 1);   opacity: 1; }
    28%  { transform: translateY(-7px); background-color: rgba(230, 169, 95, 0.8); opacity: 0.8; }
    44%  { transform: translateY(0px);  background-color: rgba(230, 169, 95, 0.6); opacity: 0.6; }
    100% { transform: translateY(0px);  background-color: rgba(230, 169, 95, 1);   opacity: 1; }
}