/* === Chat Plugin Full CSS (v1.12.1) === */

:root {
    --ai-chat-primary-color: #0073aa;
    --ai-chat-header-color: #0073aa; 
    --ai-chat-send-button-color: #0073aa;
    --ai-chat-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --ai-chat-text-color: #333;
    --ai-chat-bg-light: #f9f9f9;
    --ai-chat-bg-white: #ffffff;
    --ai-chat-border-color: #e0e0e0;
    --ai-chat-base-font-size: 16px; 

    /* Variables for bubble colors (can be overridden by JS) */
    --user-bubble-bg-color: #e9e9eb;
    --user-bubble-text-color: #333333;
    --assistant-bubble-bg-color: var(--ai-chat-primary-color, #0073aa);
    --assistant-bubble-text-color: #FFFFFF;

    /* Variables for action buttons */
    --action-btn-solid-bg: var(--ai-chat-primary-color, #0073aa);
    --action-btn-solid-text: #FFFFFF;
    --action-btn-outline-color: var(--ai-chat-primary-color, #0073aa);
    --action-btn-outline-hover-bg: var(--ai-chat-primary-color, #0073aa);
    --action-btn-outline-hover-text: #FFFFFF;

    /* Defaults for Welcome Screen Buttons (will be overridden by JS if settings exist) */
    --welcome-general-bg-color: transparent;
    --welcome-general-text-color: var(--ai-chat-primary-color, #0073aa);
    --welcome-general-border-color: var(--ai-chat-primary-color, #0073aa);
    --welcome-action-bg-color: var(--ai-chat-primary-color, #0073aa);
    --welcome-action-text-color: #FFFFFF;
    --welcome-action-border-color: var(--ai-chat-primary-color, #0073aa);
}

#aiChatBubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: var(--ai-chat-primary-color, #0073aa); 
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483646; 
    transition: transform 0.2s ease-in-out, background-color 0.3s;
    animation: pulseGlow 2.5s infinite;
}
#aiChatBubble:hover {
    transform: scale(1.1);
}

#aiNotificationBadge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    display: none; 
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2147483647; 
    box-shadow: 0 0 0 3px var(--ai-chat-bg-white, #fff); 
}

#aiChatTooltip {
    position: fixed;
    background-color: var(--ai-chat-bg-white, #fff);
    color: var(--ai-chat-text-color, #333);
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 14px;
    line-height: 1.4;
    max-width: 180px;
    z-index: 2147483645; 
    display: none; 
    border: 1px solid var(--ai-chat-border-color, #eee);
    opacity: 0;
    transform: translateX(10px); 
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    white-space: normal;
    word-wrap: break-word;
    font-weight:bolder;
}

#aiChatTooltip.tooltip-visible {
    opacity: 1;
    transform: translateX(0);
}

#aiChatTooltip::after { 
    content: '';
    position: absolute;
    top: 50%;
    right: -7px; 
    left: auto;
    margin-top: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent transparent var(--ai-chat-bg-white, #fff); 
}
#aiChatTooltip.tooltip-left::after {
    left: -7px;
    right: auto;
    border-color: transparent var(--ai-chat-bg-white, #fff) transparent transparent;
}


#aiChatWindow {
    position: fixed;
    bottom: 90px; 
    right: 20px;
    width: 370px;
    max-width: calc(100vw - 40px); 
    height: 70vh;
    max-height: 600px; 
    background: var(--ai-chat-bg-white, #fff);
    border: 1px solid var(--ai-chat-border-color, #e0e0e0);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 2147483647; 
    overflow: hidden; 
    display: none; 
    flex-direction: column;
    font-family: var(--ai-chat-font-family, system-ui);
    color: var(--ai-chat-text-color, #333);
    font-size: var(--ai-chat-base-font-size);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; 
    opacity: 0;
    transform: translateY(20px);
}

#aiChatWindow.chat-visible { 
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.ai-chat-header {
    background-color: var(--ai-chat-header-color);
    color: white; 
    padding: 12px 15px;
    font-weight: 600;
    font-size: 1.05em; 
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top-left-radius: 11px; 
    border-top-right-radius: 11px;
    flex-shrink: 0; 
}

.ai-chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
    background-color: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
}

.ai-chat-header span {
    flex-grow: 1;
}

.ai-close-chat {
    background: transparent;
    border: none;
    color: white; 
    font-size: 28px; 
    font-weight: 300; 
    cursor: pointer;
    padding: 0 5px; 
    line-height: 1; 
    opacity: 0.8;
    transition: opacity 0.2s;
    margin-left: auto;
}
.ai-close-chat:hover { opacity: 1; }

.ai-chat-button-row {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    border-bottom: 1px solid var(--ai-chat-border-color, #e0e0e0);
    background: var(--ai-chat-bg-light, #f9f9f9);
    gap: 10px; 
    flex-shrink: 0; 
}

.ai-action-button {
    flex-grow: 1; 
    padding: 10px 12px;
    border-radius: 20px; 
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9em;
    text-align: center;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    border: 2px solid transparent; 
    line-height: 1.2;
}
.ai-action-button.action-style-solid {
    background-color: var(--action-btn-solid-bg);
    color: var(--action-btn-solid-text);
    border-color: transparent;
}
.ai-action-button.action-style-solid:hover { filter: brightness(90%); transform: translateY(-1px); }
.ai-action-button.action-style-solid:active { transform: translateY(0px); filter: brightness(80%); }

.ai-action-button.action-style-outline {
    background-color: transparent;
    border-width: 2px;
    border-style: solid;
    border-color: var(--action-btn-outline-color);
    color: var(--action-btn-outline-color);
}
.ai-action-button.action-style-outline:hover {
    background-color: var(--action-btn-outline-hover-bg);
    color: var(--action-btn-outline-hover-text);
    border-color: var(--action-btn-outline-hover-bg); 
    transform: translateY(-1px);
}
.ai-action-button.action-style-outline:active { transform: translateY(0px); filter: brightness(90%); }


.ai-messages {
    flex: 1; 
    padding: 15px;
    overflow-y: auto; 
    background: var(--ai-chat-bg-light, #f9f9f9);
    display: flex;
    flex-direction: column;
    gap: 4px; 
    font-size: 0.95em;
    min-height: 100px; 
}
.ai-messages::-webkit-scrollbar { width: 8px; }
.ai-messages::-webkit-scrollbar-track { background: var(--ai-chat-bg-light, #f9f9f9); border-radius: 10px; }
.ai-messages::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 10px; border: 2px solid var(--ai-chat-bg-light, #f9f9f9); }
.ai-messages::-webkit-scrollbar-thumb:hover { background-color: #888; }
.ai-messages { scrollbar-width: thin; scrollbar-color: #aaa var(--ai-chat-bg-light, #f9f9f9); }


.assistant-message-wrapper {
    display: flex;
    align-items: flex-end; /* Aligns avatar with the bottom of the bubble */
    gap: 8px;
    max-width: 90%;
    align-self: flex-start;
    margin-right: auto;
}
.assistant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background-color: #e0e0e0; 
}

.ai-message {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 100%;
    word-wrap: break-word;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.ai-message strong { 
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.9em;
    opacity: 0.8;
}

.user-message {
    background-color: var(--user-bubble-bg-color);
    color: var(--user-bubble-text-color);
    align-self: flex-end; 
    margin-left: auto;
    border-radius: 18px 18px 4px 18px; 
    max-width: 85%;
    font-weight:400;
}
.assistant-message {
    background-color: var(--assistant-bubble-bg-color);
    color: var(--assistant-bubble-text-color);
    align-self: flex-start; 
    margin-right: auto;
    border-radius: 18px 18px 18px 4px;
    font-weight:400;
}
.assistant-message-wrapper .assistant-message {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 18px; /* Ensure top left is rounded */
}

.ai-message a {
    color: inherit; /* Inherit color from the bubble (e.g., white on dark, dark on light) */
    text-decoration: underline;
    font-weight: 600;
}

.ai-message a:hover {
    text-decoration: none;
}

.ai-chat-button-in-message {
    display: inline-block;
    padding: 10px 18px;
    margin-top: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--ai-chat-primary-color, #0073aa) !important; /* Important to override the inherited color */
    border-radius: 25px;
    text-decoration: none !important;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color 0.2s, color 0.2s;
}

.user-message .ai-chat-button-in-message {
     background-color: var(--ai-chat-primary-color, #0073aa);
     color: #fff !important;
     border: 1px solid #fff;
}

.ai-chat-button-in-message:hover {
    background-color: rgba(255, 255, 255, 1);
    text-decoration: none !important;
    filter: brightness(95%);
}

.ai-message.assistant-message.typing-indicator {
    padding-top: 14px; 
    padding-bottom: 14px;
    background-color: var(--assistant-bubble-bg-color);
}
.ai-message.assistant-message.typing-indicator strong { 
    display: none;
}
.ai-message.assistant-message.typing-indicator .typing-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background-color: var(--assistant-bubble-text-color); 
    border-radius: 50%;
    opacity: 0;
    animation: aiTypingDots 1.4s infinite ease-in-out both;
    vertical-align: middle;
}
.ai-message.assistant-message.typing-indicator .typing-dot:nth-child(1) { animation-delay: 0s; }
.ai-message.assistant-message.typing-indicator .typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-message.assistant-message.typing-indicator .typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiTypingDots {
    0%, 80%, 100% { transform: scale(0); opacity: 0; }
    40% { transform: scale(1.0); opacity: 1; }
}


.ai-input-area {
    padding: 12px 15px;
    border-top: 1px solid var(--ai-chat-border-color, #e0e0e0);
    display: flex;
    gap: 10px; 
    align-items: center;
    background: var(--ai-chat-bg-white, #fff);
    flex-shrink: 0; 
}

.ai-input {
    flex: 1; 
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 24px; 
    font-size: 1em;
    font-family: var(--ai-chat-font-family, system-ui);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    height: 48px; 
    line-height: normal; 
}
.ai-input:focus {
    outline: none;
    border-color: var(--ai-chat-primary-color, #0073aa);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2); 
}
.ai-input::placeholder {
    color: #999;
    opacity: 1;
}

.ai-send {
    background-color: var(--ai-chat-send-button-color);
    color: white; 
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s;
    flex-shrink: 0; 
}
.ai-send .iconify { 
    font-size: 24px !important; 
}
.ai-send:hover { filter: brightness(90%); }
.ai-send:active { transform: scale(0.95); filter: brightness(80%); }
.ai-send:disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
}
.ai-send:disabled .iconify { 
    color: #888 !important;
}

.ai-welcome-screen {
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    height: 100%; 
    box-sizing: border-box;

}
.ai-messages.no-messages { 
    display: flex; 
    align-items: center;
    justify-content: center;
}
.ai-welcome-text {
    font-size: 1.5em;
    color: var(--ai-chat-text-color, #333);
    margin-bottom: 20px;
    font-weight: 400;
}
.ai-welcome-options {
    display: flex;
    flex-direction: column; 
    gap: 12px; 
    width: 100%;
    max-width: 280px; 
}
.ai-welcome-button {
    padding: 12px 15px;
    border-radius: 25px; 
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95em;
    text-align: center;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    border-width: 2px;
    border-style: solid;
    line-height: 1.3;
    width: 100%; 
}
#aiWelcomeGeneralQuestions {
    background-color: var(--welcome-general-bg-color);
    color: var(--welcome-general-text-color);
    border-color: var(--welcome-general-border-color);
}
#aiWelcomeGeneralQuestions:hover {
    filter: brightness(95%);
    opacity: 0.9;
}
#aiWelcomePrimaryAction {
    background-color: var(--welcome-action-bg-color);
    color: var(--welcome-action-text-color);
    border-color: var(--welcome-action-border-color);
}
#aiWelcomePrimaryAction:hover {
    filter: brightness(90%);
}

.ai-quick-reply-container {
    display: flex;
    justify-content: flex-start; 
    gap: 8px; 
    margin-top: 8px; 
    margin-bottom: 4px; 
    padding-left: 10px; 
    flex-wrap: wrap; 
}
.ai-quick-reply-button {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--ai-chat-primary-color, #0073aa);
    background-color: var(--ai-chat-bg-white, #fff);
    color: var(--ai-chat-primary-color, #0073aa);
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s, color 0.2s;
}
.ai-quick-reply-button:hover {
    background-color: var(--ai-chat-primary-color, #0073aa);
    color: var(--ai-chat-bg-white, #fff);
}
@media (max-width: 400px) {
    .ai-quick-reply-container {
        flex-direction: column; 
        align-items: flex-start;
    }
    .ai-quick-reply-button {
        width: auto; 
        max-width: 90%;
        margin-bottom: 5px; 
    }
    .ai-quick-reply-button:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    #aiChatWindow:not(.mobile-fullscreen) {
        width: calc(100vw - 30px); 
        right: 15px;
        bottom: 80px; 
        height: 65vh;
        max-height: 520px; 
        font-size: calc(var(--ai-chat-base-font-size) * 0.95);
    }
    #aiChatBubble { 
        width: 55px;
        height: 55px;
        bottom: 15px;
        right: 15px;
    }
    #aiChatTooltip {
        font-size: 13px;
        max-width: 160px;
    }
}
@media (max-width: 480px) {
    #aiChatWindow:not(.mobile-fullscreen) {
        width: calc(100vw - 20px);
        height: auto; 
        min-height: 380px; 
        max-height: calc(100vh - 90px); 
        bottom: 75px;
        right: 10px;
        font-size: calc(var(--ai-chat-base-font-size) * 0.92);
    }
    #aiChatBubble { 
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 10px;
    }
    #aiChatBubble .iconify { 
        font-size: 26px !important;
    }
    #aiChatWindow:not(.mobile-fullscreen) .ai-chat-button-row {
        flex-direction: column; 
        padding: 8px;
    }
    #aiChatWindow:not(.mobile-fullscreen) .ai-action-button {
        font-size: 0.88em;
        padding: 10px;
    }
    #aiChatWindow:not(.mobile-fullscreen) .ai-messages {
        padding: 10px;
        font-size: 0.98em; 
    }
    #aiChatWindow:not(.mobile-fullscreen) .ai-message {
        max-width: 90%;
    }
    #aiChatWindow:not(.mobile-fullscreen) .ai-input-area {
        padding: 8px 10px;
    }
    #aiChatWindow:not(.mobile-fullscreen) .ai-input {
        height: 44px;
        padding: 8px 12px;
        border-radius: 22px;
    }
    #aiChatWindow:not(.mobile-fullscreen) .ai-send {
        width: 44px;
        height: 44px;
    }
    #aiChatWindow:not(.mobile-fullscreen) .ai-send .iconify {
        font-size: 20px !important;
    }
    #aiChatTooltip {
        font-size: 12px;
        max-width: 140px;
        padding: 6px 10px;
    }
}

@media (max-width: 768px) { 
    body.ai-chat-mobile-fullscreen-active {
        overflow: hidden !important; 
    }
    body.ai-chat-mobile-fullscreen-active #aiChatBubble {
        display: none !important; 
    }
    #aiChatWindow.mobile-fullscreen {
        width: 100vw !important; 
        height: 100vh !important; 
        max-width: 100% !important; 
        max-height: 100% !important; 
        top: 0 !important;
        left: 0 !important;
        right: auto !important; 
        bottom: auto !important; 
        border-radius: 0 !important; 
        border: none !important; 
        box-shadow: none !important; 
        z-index: 2147483647; 
        opacity: 1 !important;
        transform: none !important;
    }
    #aiChatWindow.mobile-fullscreen .ai-chat-header {
        border-top-left-radius: 0; 
        border-top-right-radius: 0;
        padding: 12px 15px; 
    }
    #aiChatWindow.mobile-fullscreen .ai-close-chat {
        font-size: 30px; 
        padding: 5px 8px; 
    }
    #aiChatWindow.mobile-fullscreen .ai-messages {
        padding: 10px 15px; 
        font-size: var(--ai-chat-base-font-size); 
    }
     #aiChatWindow.mobile-fullscreen .ai-message {
        max-width: 100%; 
    }
    #aiChatWindow.mobile-fullscreen .assistant-message-wrapper {
        max-width: 90%;
    }
    #aiChatWindow.mobile-fullscreen .ai-input-area {
        padding: 10px 12px; 
        box-sizing: border-box;
    }
    #aiChatWindow.mobile-fullscreen .ai-input {
         font-size: 16px; 
         height: 48px; 
         padding: 10px 15px;
    }
    #aiChatWindow.mobile-fullscreen .ai-send {
        width: 48px;
        height: 48px;
    }
    #aiChatWindow.mobile-fullscreen .ai-send .iconify {
        font-size: 24px !important;
    }
}

.ai-chat-settings-wrap .nav-tab-wrapper { margin-bottom: 20px; }
.ai-chat-settings-wrap .form-table th { width: 250px; padding-top: 15px; padding-bottom: 15px; }
.ai-chat-settings-wrap .form-table input[type="text"],
.ai-chat-settings-wrap .form-table textarea { width: 100%; max-width: 600px; }
.ai-chat-settings-wrap .form-table input[type="color"] { height: 30px; width: 60px; padding: 2px; box-sizing: border-box;}
.ai-chat-settings-wrap .description { font-style: italic; color: #666; }
.ai-chat-settings-wrap .submit input[type="submit"] { padding: 10px 20px; font-size: 1.1em; height: auto; }
.ai-chat-leads-table { width: 100%; margin-top: 20px; border-collapse: collapse; }
.ai-chat-leads-table th,
.ai-chat-leads-table td { border: 1px solid #ddd; padding: 8px; text-align: left; vertical-align: middle; }
.ai-chat-leads-table th { background-color: #f2f2f2; }
.ai-chat-leads-table tr:nth-child(even) { background-color: #f9f9f9; }
.ai-chat-export-button { margin-top: 15px; margin-bottom: 20px; }
.ai-chat-delete-lead-link { color: #a00; text-decoration: none; margin-left: 10px; }
.ai-chat-delete-lead-link:hover { color: #c00; text-decoration: underline; }
.ai-chat-leads-table .column-actions { width: 80px; }


/* === NEW Message Animation Styles === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-message-new {
  animation: fadeInUp 0.4s ease-out;
}

/* === NEW Pulsing Glow Animation === */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.ai-messages.no-messages + .ai-input-area {
    display: none;
}

/* === Add these new styles to your style.css file === */

.ai-chat-header {
    /* Existing styles... */
    /* Make sure flex is enabled */
    display: flex;
    align-items: center;
}

.ai-back-button {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    margin-right: 10px; /* Space between back button and avatar/title */
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
    display: flex; /* Helps center the icon */
    align-items: center;
    justify-content: center;
}

.ai-back-button:hover {
    opacity: 1;
}

/* Adjust the header avatar margin if a back button is present */
.ai-back-button + .ai-chat-header-avatar {
    margin-left: 0;
}

/* Make sure the title fills the remaining space */
.ai-chat-header span {
    flex-grow: 1;
}