/* ---------------------------------- */
/* ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ, ТЕМЫ, Z-INDEX */
/* ---------------------------------- */

/* -------------------------------- */
/* 1. БАЗОВЫЕ ПЕРЕМЕННЫЕ (по умолчанию - тёмная тема) */
/* -------------------------------- */
:root {
    /* Цветовая палитра */
    --primary: #4c9aff;
    --primary-dark: #2b6bcb;
    --primary-light: #7ab3ff;
    --primary-glow: rgba(76, 154, 255, 0.3);
    --text-on-primary: white;

    --success: #4caf50;
    --success-dark: #43a047;
    --success-light: #81c784;

    --danger: #f44336;
    --danger-dark: #d32f2f;
    --danger-light: #ff7961;

    --warning: #ff9800;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;

    --info: #2196f3;
    --info-dark: #1976d2;

    /* Фоны и поверхности (стеклянный эффект) */
    --bg-dark: #0a0f1c;
    --bg-surface: rgba(22, 28, 40, 0.85);
    --bg-elevated: rgba(32, 40, 55, 0.9);
    --bg-hover: rgba(255, 255, 255, 0.1);
    --border: rgba(255, 255, 255, 0.08);
    --overlay-bg: rgba(0, 0, 0, 0.8);

    /* Текст */
    --text: #f0f3f8;
    --text-secondary: #9aa6b5;
    --text-muted: #6c7a8e;

    /* Z-индексы (иерархия слоёв) */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 1000;
    --z-modal: 2000;
    --z-popover: 3000;
    --z-toast: 4000;
    --z-tooltip: 5000;
    --z-max: 10000;

    /* Адаптивность */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1280px;

    /* Размеры и радиусы */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* Тени */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.5);

    /* Отступы */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;

    /* Переходы */
    --transition-fast: 0.1s ease;
    --transition: 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    --transition-slow: 0.3s ease;

    /* Анимации */
    --animation-duration: 0.2s;
    --animation-duration-slow: 0.3s;

    /* ===== ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP ПЕРЕМЕННЫХ ДЛЯ ТЁМНОЙ ТЕМЫ ===== */
    --bs-body-bg: #0a0f1c;
    --bs-body-bg-rgb: 10, 15, 28;
    --bs-body-color: #f0f3f8;
    --bs-body-color-rgb: 240, 243, 248;
    --bs-secondary-color: #9aa6b5;
    --bs-secondary-color-rgb: 154, 166, 181;
    --bs-tertiary-color: #6c7a8e;
    --bs-tertiary-color-rgb: 108, 122, 142;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-border-color: rgba(255, 255, 255, 0.08);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
}

/* -------------------------------- */
/* 2. СВЕТЛАЯ ТЕМА (класс .light-theme) */
/* -------------------------------- */
body.light-theme {
    --primary: #2a6cbb;
    --primary-dark: #1e4f8a;
    --primary-light: #5a8fcb;
    --primary-glow: rgba(42, 108, 187, 0.2);
    --text-on-primary: white;

    --bg-dark: #f2f4f8;
    --bg-surface: rgba(255, 255, 255, 0.85);
    --bg-elevated: rgba(245, 247, 250, 0.9);
    --bg-hover: rgba(0, 0, 0, 0.05);
    --border: rgba(0, 0, 0, 0.08);
    --overlay-bg: rgba(0, 0, 0, 0.8);

    --text: #1e2a3a;
    --text-secondary: #5f6c7a;
    --text-muted: #8a98a9;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);

    /* ===== ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP ПЕРЕМЕННЫХ ДЛЯ СВЕТЛОЙ ТЕМЫ ===== */
    --bs-body-bg: #f2f4f8;
    --bs-body-bg-rgb: 242, 244, 248;
    --bs-body-color: #1e2a3a;
    --bs-body-color-rgb: 30, 42, 58;
    --bs-secondary-color: #5f6c7a;
    --bs-secondary-color-rgb: 95, 108, 122;
    --bs-tertiary-color: #8a98a9;
    --bs-tertiary-color-rgb: 138, 152, 169;
    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-border-color: rgba(0, 0, 0, 0.08);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.08);
}

/* -------------------------------- */
/* 3. АВТОМАТИЧЕСКАЯ ТЕМА (системные настройки) */
/* -------------------------------- */
@media (prefers-color-scheme: dark) {
    body:not(.light-theme):not(.dark-theme) {
        /* автоматически наследует :root (тёмная) */
    }
}
@media (prefers-color-scheme: light) {
    body:not(.light-theme):not(.dark-theme) {
        --primary: #2a6cbb;
        --primary-dark: #1e4f8a;
        --primary-light: #5a8fcb;
        --primary-glow: rgba(42, 108, 187, 0.2);
        --bg-dark: #f2f4f8;
        --bg-surface: rgba(255, 255, 255, 0.85);
        --bg-elevated: rgba(245, 247, 250, 0.9);
        --bg-hover: rgba(0, 0, 0, 0.05);
        --border: rgba(0, 0, 0, 0.08);
        --text: #1e2a3a;
        --text-secondary: #5f6c7a;
        --text-muted: #8a98a9;

        /* Bootstrap для автоматической светлой темы */
        --bs-body-bg: #f2f4f8;
        --bs-body-bg-rgb: 242, 244, 248;
        --bs-body-color: #1e2a3a;
        --bs-body-color-rgb: 30, 42, 58;
        --bs-secondary-color: #5f6c7a;
        --bs-secondary-color-rgb: 95, 108, 122;
        --bs-tertiary-color: #8a98a9;
        --bs-emphasis-color: #000000;
        --bs-border-color: rgba(0, 0, 0, 0.08);
    }
}

/* -------------------------------- */
/* 4. FALLBACK ДЛЯ БРАУЗЕРОВ БЕЗ BACKDROP-FILTER */
/* -------------------------------- */
@supports not (backdrop-filter: blur(5px)) {
    :root, body.light-theme, body:not(.light-theme):not(.dark-theme) {
        --bg-surface: #161c28;
        --bg-elevated: #202837;
    }
    body.light-theme {
        --bg-surface: #ffffff;
        --bg-elevated: #f5f7fa;
    }
}

/* -------------------------------- */
/* 5. УЛУЧШЕННАЯ ДОСТУПНОСТЬ (prefers-reduced-motion) */
/* -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------- */
/* 6. ГЛОБАЛЬНЫЙ СБРОС ДЛЯ КОРРЕКТНОЙ РАБОТЫ safe-area */
/* -------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    height: 100dvh;
    overflow: hidden;
    transition: background var(--transition), color var(--transition);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* -------------------------------- */
/* 7. ОБЩИЕ УТИЛИТЫ ДЛЯ РАБОТЫ С ПЕРЕМЕННЫМИ */
/* -------------------------------- */
.glass-effect {
    background: var(--bg-surface);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
}

.surface {
    background: var(--bg-elevated);
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.border-primary {
    border-color: var(--primary);
}

/* -------------------------------- */
/* 8. ЕДИНЫЕ АНИМАЦИИ (все глобальные ключевые кадры) */
/* -------------------------------- */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes voiceSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes typingDot {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.3;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 0 0 var(--primary), 0 0 0 0 var(--primary-glow);
    }
    20% {
        box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px var(--primary-glow);
    }
    40% {
        box-shadow: 0 0 0 4px var(--primary), 0 0 0 8px var(--primary-glow);
    }
    60% {
        box-shadow: 0 0 0 4px var(--primary), 0 0 0 8px var(--primary-glow);
    }
    80% {
        box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px var(--primary-glow);
    }
    100% {
        box-shadow: 0 0 0 0 var(--primary), 0 0 0 0 var(--primary-glow);
    }
}

@keyframes iconSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}












/* ---------------------------------- */
/* КАСТОМНЫЕ КНОПКИ (GLASSY)          */
/* ---------------------------------- */

/* Базовая кнопка */
.btn {
    --btn-glass-bg: rgba(255, 255, 255, 0.1);
    --btn-glass-border: rgba(255, 255, 255, 0.2);
    --btn-glass-hover-bg: rgba(255, 255, 255, 0.2);
    --btn-glass-active-bg: rgba(255, 255, 255, 0.25);
    --btn-glass-color: var(--text);

    background: var(--btn-glass-bg) !important;
    border: 1px solid var(--btn-glass-border) !important;
    color: var(--btn-glass-color) !important;
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl) !important; /* 24px — скруглённые */
    padding: 8px 20px !important;
    font-weight: 500;
    transition: all var(--transition) !important;
    box-shadow: none !important;
}

/* При наведении */
.btn:hover {
    background: var(--btn-glass-hover-bg) !important;
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* При клике */
.btn:active {
    transform: translateY(1px);
    background: var(--btn-glass-active-bg) !important;
}

/* Основная кнопка (primary) */
.btn-primary {
    --btn-glass-bg: var(--primary-glow);
    --btn-glass-border: var(--primary);
    --btn-glass-hover-bg: var(--primary);
    --btn-glass-active-bg: var(--primary-dark);
    --btn-glass-color: white;
}

/* Для светлой темы можно скорректировать прозрачность */
body.light-theme .btn {
    --btn-glass-bg: rgba(0, 0, 0, 0.04);
    --btn-glass-border: rgba(0, 0, 0, 0.1);
    --btn-glass-hover-bg: rgba(0, 0, 0, 0.08);
}
body.light-theme .btn-primary {
    --btn-glass-bg: var(--primary-glow);
    --btn-glass-border: var(--primary);
    --btn-glass-hover-bg: var(--primary);
    --btn-glass-color: white;
}














/* ========================================= */
/* КНОПКИ БЕЗ ФОНА, ПОДСВЕТКА ФОНА ПРИ НАВЕДЕНИИ */
/* ========================================= */

/* Базовая кнопка — убираем фон, границы, тени, текст белый */
.btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500;
    transition: background var(--transition-fast), box-shadow var(--transition-fast) !important;
}

/* При наведении — полупрозрачный фон и мягкое свечение */
.btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;  /* светлый полупрозрачный слой */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2) !important;
    transform: none !important;
}

/* Для разных типов кнопок можно задать свой цвет подсветки при наведении */
.btn-primary:hover {
    background: rgba(76, 154, 255, 0.15) !important;
    box-shadow: 0 0 8px rgba(76, 154, 255, 0.3) !important;
}

.btn-danger:hover {
    background: rgba(244, 67, 54, 0.15) !important;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.3) !important;
}

.btn-success:hover {
    background: rgba(76, 175, 80, 0.15) !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3) !important;
}

/* Активное состояние (нажатие) — чуть темнее */
.btn:active {
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}

/* Светлая тема — текст тёмный, фон при наведении — тёмный полупрозрачный */
body.light-theme .btn {
    color: #1e2a3a !important;
}
body.light-theme .btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1) !important;
}
body.light-theme .btn-primary:hover {
    background: rgba(42, 108, 187, 0.1) !important;
    box-shadow: 0 0 6px rgba(42, 108, 187, 0.2) !important;
}
body.light-theme .btn-danger:hover {
    background: rgba(244, 67, 54, 0.1) !important;
    box-shadow: 0 0 6px rgba(244, 67, 54, 0.2) !important;
}
body.light-theme .btn-success:hover {
    background: rgba(76, 175, 80, 0.1) !important;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.2) !important;
}