/* Kai Context AI Widget Styles */

#kai-chat-widget {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

#kai-chat-toggle {
    transition: all 0.3s ease;
}

#kai-chat-toggle:hover {
    transform: scale(1.1);
    background: #0056b3 !important;
}

#kai-messages {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

#kai-messages::-webkit-scrollbar {
    width: 6px;
}

#kai-messages::-webkit-scrollbar-track {
    background: transparent;
}

#kai-messages::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

#kai-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

#kai-send-btn:hover {
    background: #0056b3;
}

#kai-send-btn:active {
    transform: translateY(1px);
}

/* Highlight animation for guided elements */
.kai-highlight {
    animation: kai-pulse 2s infinite;
}

@keyframes kai-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

/* Kai marker spans - invisible but selectable */
.kai-marker {
    font-size: 0 !important;
    opacity: 0 !important;
    user-select: text;
    line-height: 0 !important;
    display: inline !important;
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Typing indicator animation */
.kai-typing-dots {
    animation: kai-blink 1.5s infinite;
}

@keyframes kai-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* Mobile responsiveness */
@media (max-width: 575.98px) {
    #kai-chat-widget {
        width: calc(100vw - 20px) !important;
        height: 70vh !important;
        bottom: 10px !important;
        right: 10px !important;
        left: 10px !important;
        margin: 0 !important;
    }
    
    #kai-chat-widget #kai-messages {
        max-height: calc(70vh - 180px) !important;
    }
}