/**
 * iO AI Chatbot - Plugin CSS Variables
 *
 * Priority order:
 * 1. Admin settings (inline styles via PHP) - highest priority
 * 2. Theme variables (tools.io-ai-chatbot.css) - set by developers per project
 * 3. Plugin defaults (this file) - fallback if theme doesn't define variables
 *
 * These variables ensure the plugin works even if the theme doesn't include
 * tools.io-ai-chatbot.css. When the theme file exists, it overrides these defaults.
 *
 * @package io_ai_wp_chatbot
 */

:root {

    /* ===========================
       Colors
       =========================== */
    --io-chatbot-color-primary: #2563eb;
    --io-chatbot-color-labels: #64748b;
    --io-chatbot-color-text: #1e293b;
    --io-chatbot-color-white: #fff;
    --io-chatbot-color-light: #f1f5f9;
    --io-chatbot-color-medium: #cbd5e1;
    --io-chatbot-color-muted: #9ca3af;
    --io-chatbot-color-error: #d63638;
    --io-chatbot-color-error-light: #fee;
    --io-chatbot-color-error-medium: #fcc;

    /* ===========================
       Chatbot widget
       =========================== */
    --io-chatbot-primary-color: var(--chatbot-primary-color, var(--io-chatbot-color-primary));
    --io-chatbot-background-color: var(--chatbot-background-color, var(--io-chatbot-color-white));
    --io-chatbot-text-color: var(--chatbot-text-color, var(--io-chatbot-color-text));
    --io-chatbot-sender-text-color: var(--chatbot-sender-text-color, var(--io-chatbot-color-labels));
    --io-chatbot-time-text-color: var(--chatbot-time-text-color, var(--io-chatbot-color-labels));
    --io-chatbot-char-count-color: var(--chatbot-char-count-color, var(--io-chatbot-color-muted));
    --io-chatbot-char-warning-color: var(--chatbot-char-warning-color, var(--io-chatbot-color-error));
    --io-chatbot-typing-dots-color: var(--chatbot-typing-dots-color, var(--io-chatbot-color-muted));

    /* Bot bubble */
    --io-chatbot-bot-bubble-bg-color: var(--chatbot-bot-bubble-bg-color, var(--io-chatbot-color-light));
    --io-chatbot-bot-bubble-text-color: var(--chatbot-bot-bubble-text-color, var(--io-chatbot-color-text));
    --io-chatbot-bot-bubble-code-bg-color: var(--chatbot-bot-bubble-code-bg-color, rgba(0, 0, 0, 0.05));
    --io-chatbot-bot-bubble-link-color: var(--chatbot-bot-bubble-link-color, var(--io-chatbot-color-primary));

    /* User bubble */
    --io-chatbot-user-bubble-bg-color: var(--chatbot-user-bubble-bg-color, var(--io-chatbot-color-primary));
    --io-chatbot-user-bubble-text-color: var(--chatbot-user-bubble-text-color, var(--io-chatbot-color-white));

    /* General input */
    --io-chatbot-input-bg-color: var(--chatbot-input-bg-color, var(--io-chatbot-color-white));
    --io-chatbot-input-placeholder-color: var(--chatbot-input-placeholder-color, var(--io-chatbot-color-muted));
    --io-chatbot-input-border-color: var(--chatbot-input-border-color, var(--io-chatbot-color-light));
    --io-chatbot-input-border-size: var(--chatbot-input-border-size, 1px);

    /* Scrollbar */
    --io-chatbot-scrollbar-track-color: var(--chatbot-scrollbar-track-color, var(--io-chatbot-color-light));
    --io-chatbot-scrollbar-thumb-color: var(--chatbot-scrollbar-thumb-color, var(--io-chatbot-color-medium));
    --io-chatbot-scrollbar-thumb-hover-color: var(--chatbot-scrollbar-thumb-hover-color, var(--io-chatbot-color-muted));

    /* Overlay Colors */
    --io-chatbot-overlay-color-dark: var(--chatbot-overlay-color-dark, rgba(0, 0, 0, 0.5));
    --io-chatbot-overlay-color-light: var(--chatbot-overlay-color-light, rgba(255, 255, 255, 0.2));

    /* ===========================
       Search
       =========================== */
    --io-search-ui-color: var(--search-ui-color, var(--io-chatbot-color-primary));
    --io-search-icon-size: var(--search-icon-size, 20px);
    --io-search-transition: var(--search-transition, all .3s ease-in-out);
    --io-search-input-bg: var(--search-input-bg-color, var(--io-chatbot-color-white));

    /* Font */
    --io-search-font-size-base: var(--search-font-size-base, 16px);
    --io-search-font-size-md: var(--search-font-size-md, 14px);
    --io-search-font-size-sm: var(--search-font-size-sm, 12px);
    --io-search-font-family: var(--search-font-family);

    /* Border */
    --io-search-border-radius: var(--search-border-radius, 12px);
    --io-search-border-color: var(--search-border-color, var(--io-chatbot-color-medium));
    --io-search-border-size: var(--search-border-size, 1px);

    /* Badge */
    --io-search-badge-bg: var(--search-badge-bg-color, var(--io-chatbot-color-light));
    --io-search-badge-text: var(--search-badge-text-color, var(--io-chatbot-color-labels));

    /* Error states */
    --io-search-error-bg: var(--search-error-bg-color, var(--io-chatbot-color-error-light));
    --io-search-error-border: var(--search-error-border-color, var(--io-chatbot-color-error-medium));
    --io-search-error-text: var(--search-error-text-color, var(--io-chatbot-color-error));

    /* Loading states */
    --io-search-loading-overlay-bg-color: var(--search-loading-overlay-bg-color, rgba(255, 255, 255, 0.95));

    /* Padding */
    --io-search-padding-x: var(--search-padding-x, 16px);
    --io-search-padding-y: var(--search-padding-y, 16px);

    /* ===========================
       Container
       =========================== */
    --io-search-container-width: var(--search-container-width, 100%);

    @media (min-width: 600px) {
        --io-search-container-width: var(--search-container-width, 600px);
    }

    @media (min-width: 768px) {
        --io-search-container-width: var(--search-container-width, 768px);
    }

    @media (min-width: 992px) {
        --io-search-container-width: var(--search-container-width, 992px);
    }

    @media (min-width: 1200px) {
        --io-search-container-width: var(--search-container-width, 1200px);
    }

    @media (min-width: 1400px) {
        --io-search-container-width: var(--search-container-width, 1400px);
    }
}