/* =========================================
   ОСНОВНАЯ ДИЗАЙН-СИСТЕМА (СВЕТЛАЯ ТЕМА)
   ========================================= */
:root {
    --bg-body: #f0f4f9;          /* Фон всей страницы */
    --bg-card: #ffffff;          /* Фон карточек и шапки */
    
    /* Тексты */
    --text-primary: #455a64;     /* Основной текст и заголовки (серо-голубой) */
    --text-secondary: #65676b;   /* Второстепенный текст (серый) */
    --border-color: #e4e6eb;     /* Цвет рамок и разделителей */
    
    /* Кнопки */
    --btn-bg: #607d8b;           /* Цвет заливки кнопок (голубо-серый) */
    --btn-text: #ffffff;         /* Цвет текста на кнопках (белый) */
    
    /* Акценты */
    --accent-color: #007aff;     /* Цвет иконок/ссылок */
    --badge-bg: rgba(0, 122, 255, 0.1); /* Фон для плашек */
}

/* =========================================
   ТЕМНАЯ ТЕМА (НОЧНОЙ РЕЖИМ)
   ========================================= */
[data-theme="dark"] {
    --bg-body: #131314;
    --bg-card: #1e1f20;
    
    --text-primary: #e3e3e3;
    --text-secondary: #c4c7c5;
    --border-color: #444746;
    
    --btn-bg: #e3e3e3;           /* В темной теме кнопки светлые */
    --btn-text: #131314;         /* Текст на кнопках темный */
    
    --accent-color: #66b2ff;
    --badge-bg: rgba(102, 178, 255, 0.15);
}

/* Плавная прокрутка для всей страницы */
html { 
    scroll-behavior: smooth; 
}

/* Базовые настройки шрифта и фона */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

/* =========================================
   СТИЛИ КНОПОК
   ========================================= */

/* Основная кнопка (с заливкой) */
.btn {
    text-align: center;
    display: inline-block;
    padding: 14px 24px;
    border-radius: 24px;
    background: var(--btn-bg);
    color: var(--btn-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: opacity 0.2s, background-color 0.3s, color 0.3s;
    border: none;
    cursor: pointer;
}

.btn:hover { 
    opacity: 0.8; 
    color: var(--btn-text); 
}

/* Контурная кнопка (без заливки) */
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-outline:hover {
    background: var(--bg-body);
    color: var(--text-primary);
}

/* Кнопка переключения темы (Луна/Солнце) */
.theme-toggle {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.theme-toggle:hover { 
    background-color: rgba(128,128,128,0.1); 
}

/* =========================================
   АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
   ========================================= */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        line-height: 1.5;
    }

    .btn {
        padding: 12px 18px;
        font-size: 14px;
    }

    .btn-outline {
        padding: 10px 16px;
    }
}

/* =========================================
   АНИМАЦИЯ В КНОПКАХ (В СТИЛЕ ЧАТА)
   ========================================= */
.btn-loading-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px; /* Чтобы кнопка не прыгала по высоте */
}

.btn-dot {
    width: 6px;
    height: 6px;
    background: var(--btn-text) !important; /* Цвет точек равен цвету текста кнопки */
    border-radius: 50%;
    display: inline-block;
    animation: bounce-btn 1.4s infinite;
}
.btn-dot:nth-child(1) { animation-delay: 0s; }
.btn-dot:nth-child(2) { animation-delay: 0.2s; }
.btn-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce-btn {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); } /* Прыжок как в чате */
}