/**
 * SPPP Chatbot Styles
 * @package    SPPP Chatbot
 * @copyright  Copyright (C) 2024 Suruhanjaya Pelabuhan Pulau Pinang. All rights reserved.
 * @license    GNU General Public License version 2 or later
 */

/* Base reset for chatbot elements */
.sppp-chatbot-widget *,
.sppp-chatbot-widget *::before,
.sppp-chatbot-widget *::after {
    box-sizing: border-box;
}

/* Ensure chatbot is above other elements */
.sppp-chatbot-toggle,
.sppp-chatbot-widget {
    z-index: 9999 !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .sppp-chatbot-widget {
        width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: 12px !important;
        bottom: 12px !important;
        max-height: calc(100vh - 24px);
    }

    .sppp-chatbot-toggle {
        right: 12px !important;
        bottom: 12px !important;
        width: 52px;
        height: 52px;
    }

    .sppp-chat-messages {
        max-height: 50vh !important;
    }

    .sppp-language-buttons {
        flex-direction: column;
    }

    .sppp-lang-btn {
        width: 100%;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .sppp-chatbot-widget {
        background: #1f2937;
        border-color: #374151;
    }

    .sppp-chat-header {
        background: #1f2937;
        border-color: #374151;
    }

    .sppp-chat-name {
        color: #f9fafb;
    }

    .sppp-chat-subtitle {
        color: #9ca3af;
    }

    .sppp-chat-messages {
        background: #111827;
    }

    .sppp-message.bot .sppp-message-bubble {
        background: #374151;
        color: #f9fafb;
        border-color: #4b5563;
    }

    .sppp-chat-input-area {
        background: #1f2937;
        border-color: #374151;
    }

    .sppp-chat-input {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }

    .sppp-chat-input::placeholder {
        color: #9ca3af;
    }

    .sppp-lang-btn {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }

    .sppp-lang-btn:hover {
        background: #4b5563;
    }

    .sppp-suggestion-btn {
        background: #374151;
        border-color: #4b5563;
        color: #60a5fa;
    }

    .sppp-typing {
        background: #374151;
        border-color: #4b5563;
        color: #9ca3af;
    }
}

/* Accessibility improvements */
.sppp-chat-action:focus,
.sppp-send-btn:focus,
.sppp-lang-btn:focus,
.sppp-suggestion-btn:focus,
.sppp-chat-input:focus,
.sppp-chatbot-toggle:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Print styles - hide chatbot */
@media print {
    .sppp-chatbot-toggle,
    .sppp-chatbot-widget {
        display: none !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sppp-chatbot-toggle,
    .sppp-chatbot-widget,
    .sppp-typing-dot {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .sppp-message-bubble {
        border-width: 2px;
    }

    .sppp-chat-input {
        border-width: 2px;
    }
}