/**
 * 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_conversational
 */

: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);

    /* 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));

    /* Submit button */
    --io-search-submit-bg: var(--search-submit-bg-color, var(--io-search-ui-color));
    --io-search-submit-color: var(--search-submit-color, #fff);
    --io-search-submit-border-color: var(--search-submit-border-color, transparent);
    --io-search-submit-border-radius: var(--search-submit-border-radius, var(--io-search-border-radius));
    --io-search-submit-padding-x: var(--search-submit-padding-x, 1.25rem);
    --io-search-submit-padding-y: var(--search-submit-padding-y, 0.625rem);
    --io-search-submit-font-size: var(--search-submit-font-size, var(--io-search-font-size-base));
    --io-search-submit-font-weight: var(--search-submit-font-weight, 500);
    --io-search-submit-bg-hover: var(--search-submit-bg-color-hover, color-mix(in srgb, var(--io-search-submit-bg) 85%, #000));
    --io-search-submit-color-hover: var(--search-submit-color-hover, var(--io-search-submit-color));
    --io-search-submit-bg-active: var(--search-submit-bg-color-active, color-mix(in srgb, var(--io-search-submit-bg) 75%, #000));
    --io-search-submit-color-active: var(--search-submit-color-active, var(--io-search-submit-color));

    /* Chatbot dialog buttons — shared */
    --io-chatbot-btn-padding-x: var(--chatbot-btn-padding-x, var(--io-search-submit-padding-x));
    --io-chatbot-btn-padding-y: var(--chatbot-btn-padding-y, var(--io-search-submit-padding-y));
    --io-chatbot-btn-font-size: var(--chatbot-btn-font-size, var(--io-search-submit-font-size));

    /* Chatbot dialog buttons — primary (confirm) */
    --io-chatbot-btn-primary-bg: var(--chatbot-btn-primary-bg-color, var(--io-chatbot-primary-color));
    --io-chatbot-btn-primary-color: var(--chatbot-btn-primary-color, var(--io-chatbot-color-white));
    --io-chatbot-btn-primary-bg-hover: var(--chatbot-btn-primary-bg-hover-color, color-mix(in srgb, var(--io-chatbot-btn-primary-bg) 85%, #000));
    --io-chatbot-btn-primary-color-hover: var(--chatbot-btn-primary-color-hover, var(--io-chatbot-btn-primary-color));
    --io-chatbot-btn-primary-bg-active: var(--chatbot-btn-primary-bg-active-color, color-mix(in srgb, var(--io-chatbot-btn-primary-bg) 75%, #000));
    --io-chatbot-btn-primary-color-active: var(--chatbot-btn-primary-color-active, var(--io-chatbot-btn-primary-color));

    /* Chatbot dialog buttons — outline (cancel) */
    --io-chatbot-btn-outline-border-width: var(--chatbot-btn-outline-border-width, 1px);
    --io-chatbot-btn-outline-border-style: var(--chatbot-btn-outline-border-style, solid);
    --io-chatbot-btn-outline-bg: var(--chatbot-btn-outline-bg-color, transparent);
    --io-chatbot-btn-outline-color: var(--chatbot-btn-outline-color, var(--io-chatbot-primary-color));
    --io-chatbot-btn-outline-border: var(--chatbot-btn-outline-border-color, var(--io-chatbot-primary-color));
    --io-chatbot-btn-outline-bg-hover: var(--chatbot-btn-outline-bg-hover-color, color-mix(in srgb, var(--io-chatbot-btn-outline-color) 10%, transparent));
    --io-chatbot-btn-outline-color-hover: var(--chatbot-btn-outline-color-hover, var(--io-chatbot-btn-outline-color));
    --io-chatbot-btn-outline-border-hover: var(--chatbot-btn-outline-border-hover-color, var(--io-chatbot-btn-outline-border));
    --io-chatbot-btn-outline-bg-active: var(--chatbot-btn-outline-bg-active-color, color-mix(in srgb, var(--io-chatbot-btn-outline-color) 15%, transparent));
    --io-chatbot-btn-outline-color-active: var(--chatbot-btn-outline-color-active, var(--io-chatbot-btn-outline-color));

    /* 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);
    }
}