/* Lanka Property ChatBots - Advanced AI Assistant Styles */

/* ChatBots Toggle Button */
.chatbot-toggle {
    position: fixed !important;
    bottom: var(--spacing-xl) !important;
    left: var(--spacing-xl) !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-teal)) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    padding: var(--btn-padding-y-md) var(--btn-padding-x-lg) !important;
    font-size: var(--font-body) !important;
    font-weight: var(--font-weight-semibold) !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition-all) !important;
    z-index: var(--z-index-fixed) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-md) !important;
    font-family: var(--font-family-primary) !important;
}

.chatbot-toggle:hover {
    transform: translateY(calc(-1 * var(--spacing-xs))) scale(1.05) !important;
    box-shadow: var(--shadow-lg) !important;
}

.chatbot-toggle i {
    font-size: var(--icon-md) !important;
}

/* ChatBots Container */
.chatbot-container {
    position: fixed !important;
    bottom: clamp(80px, 12vh, 100px) !important;
    left: var(--spacing-xl) !important;
    width: clamp(300px, 30vw, 380px) !important;
    height: clamp(400px, 50vh, 500px) !important;
    background: var(--color-white) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: calc(var(--z-index-fixed) - 1) !important;
    border: var(--border-width) solid var(--color-border-light) !important;
    font-family: var(--font-family-primary) !important;
}

/* ChatBots Header */
.chatbot-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-teal)) !important;
    color: var(--color-text-inverse) !important;
    padding: var(--spacing-lg) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-weight: var(--font-weight-semibold) !important;
}

.chatbot-header h3 {
    margin: 0 !important;
    font-size: var(--font-title-h6) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.chatbot-close {
    background: none !important;
    border: none !important;
    color: var(--color-text-inverse) !important;
    font-size: var(--icon-lg) !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: var(--transition-all) !important;
}

.chatbot-close:hover {
    opacity: 1 !important;
}

/* ChatBots Body (Messages) */
.chatbot-body {
    flex: 1 !important;
    padding: var(--spacing-lg) !important;
    overflow-y: auto !important;
    background: var(--color-gray-100) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-md) !important;
}

.chatbot-message {
    max-width: 85% !important;
    padding: var(--spacing-md) !important;
    border-radius: var(--radius-lg) !important;
    line-height: var(--line-height-normal) !important;
    font-size: var(--font-body-small) !important;
    position: relative !important;
    margin-bottom: var(--spacing-md) !important;
}

.chatbot-message a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-weight: var(--font-weight-medium) !important;
}

.chatbot-message a:hover {
    text-decoration: underline !important;
}

.bot-message {
    background: var(--color-primary-lighter) !important;
    align-self: flex-start !important;
    color: var(--color-text-primary) !important;
}

.user-message {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-teal)) !important;
    color: var(--color-text-inverse) !important;
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.chatbot-message .timestamp {
    font-size: var(--font-size-xs) !important;
    color: var(--color-text-secondary) !important;
    margin-top: var(--spacing-xs) !important;
}

.user-message .timestamp {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ChatBots Footer (Input) */
.chatbot-footer {
    padding: var(--spacing-md) !important;
    border-top: var(--border-width) solid var(--color-border-light) !important;
    background: var(--color-white) !important;
    display: flex !important;
    gap: var(--spacing-md) !important;
}

.chatbot-footer input {
    flex: 1 !important;
    border: var(--border-width) solid var(--color-border-medium) !important;
    border-radius: var(--radius-full) !important;
    padding: var(--input-padding-y) var(--input-padding-x) !important;
    font-size: var(--input-font-size) !important;
    outline: none !important;
    transition: var(--transition-all) !important;
}

.chatbot-footer input:focus {
    border-color: var(--color-primary) !important;
}

.chatbot-footer button {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-teal)) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    width: clamp(2.5rem, 5vw, 2.8125rem) !important;
    height: clamp(2.5rem, 5vw, 2.8125rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: var(--transition-all) !important;
}

.chatbot-footer button:hover {
    transform: scale(1.05) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chatbot-container {
        width: 90% !important;
        height: 80% !important;
        bottom: var(--spacing-lg) !important;
        right: 5% !important;
        left: 5% !important;
        max-width: none !important;
    }

    .chatbot-toggle {
        bottom: var(--spacing-lg) !important;
        right: auto !important;
        left: var(--spacing-lg) !important;
        width: auto !important;
        padding: var(--btn-padding-y-sm) var(--btn-padding-x-md) !important;
        font-size: var(--font-body-small) !important;
    }
}

/* Animation for smooth appearance */
@keyframes slideInUp {
    from {
        transform: translateY(var(--spacing-4xl));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.chatbot-container.show {
    animation: slideInUp 0.3s ease-out !important;
}

/* Scrollbar Styling */
.chatbot-body::-webkit-scrollbar {
    width: var(--spacing-xs);
}

.chatbot-body::-webkit-scrollbar-track {
    background: var(--color-gray-200);
    border-radius: var(--radius-sm);
}

.chatbot-body::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: var(--radius-sm);
}

.chatbot-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}