<!--
  Copyright (c) 2024-2025 Тарабанов Александр Викторович
  All rights reserved.
  
  This software is proprietary and confidential.
  Unauthorized copying, modification, or distribution is prohibited.
  
  For licensing inquiries: info@hb3-accelerator.com
  Website: https://hb3-accelerator.com
  GitHub: https://github.com/HB3-ACCELERATOR
-->

# Структура стилей проекта

## Обзор

Проект использует структурированный подход к организации стилей CSS для улучшения поддерживаемости, предотвращения конфликтов и обеспечения согласованности пользовательского интерфейса.

## Файлы стилей

- **variables.css** - CSS-переменные (цвета, размеры, отступы)
- **base.css** - Базовые стили для всего приложения и сброс стилей
- **layout.css** - Стили для основной структуры макета приложения
- **global.css** - Общие утилитарные классы, доступные во всем приложении
- **home.css.bak** - Устаревший файл, переименован в .bak. Стили перенесены в scoped стили компонентов

## Приоритеты использования стилей

1. **Компонентные scoped стили** - для стилей, специфичных для компонента
2. **global.css** - для общих классов, используемых в нескольких компонентах
3. **variables.css** - для общих переменных CSS во всем проекте

## Рекомендации по использованию

### Для новых компонентов:

1. Используйте scoped стили внутри файла компонента:
   ```vue
   <style scoped>
   .component-name {
     /* стили компонента */
   }
   </style>
   ```

2. Используйте глобальные классы для общих элементов:
   ```html
   <button class="btn btn-primary">Сохранить</button>
   ```

3. Используйте CSS-переменные вместо жестко закодированных значений:
   ```css
   .element {
     color: var(--color-primary);
     padding: var(--spacing-md);
   }
   ```

### Для существующих компонентов:

1. При обновлении компонента постепенно переносите стили из home.css в scoped стили компонента
2. Не удаляйте стили из home.css до полного тестирования всех зависящих компонентов

## Глобальные CSS-классы

### Контейнеры
- `.page-container` - Основной контейнер страницы
- `.card` - Контейнер для блока информации

### Кнопки
- `.btn` - Базовый класс для всех кнопок
- `.btn-primary` - Основная (зеленая) кнопка
- `.btn-secondary` - Дополнительная (синяя) кнопка
- `.btn-accent` - Акцентная (фиолетовая) кнопка
- `.btn-danger` - Кнопка опасного действия (красная)

### Формы
- `.form-control` - Элемент формы (input, select, textarea)
- `.form-group` - Группа элементов формы
- `.form-label` - Метка для элемента формы

### Утилиты
- `.text-center` - Выравнивание текста по центру
- `.d-flex` - Включение flex-контейнера
- `.mt-*`, `.mb-*` - Отступы сверху/снизу

## Процесс миграции

Постепенно мы переходим от использования большого глобального файла home.css к модульным scoped стилям в компонентах и более структурированным общим стилям.

1. Новые компоненты должны использовать только scoped стили и global.css
2. При обновлении существующих компонентов переносите стили из home.css
3. После полного перехода home.css будет удален 

## Выполненная миграция (обновлено)

Миграция стилей завершена для следующих компонентов:

1. **ChatInterface.vue** - перенесены стили интерфейса чата, включая адаптивные стили для мобильных устройств
2. **Message.vue** - перенесены стили для сообщений с разными типами вложений

Файл **home.css** переименован в **home.css.bak** и больше не используется в проекте. Ссылка на него удалена из **HomeView.vue**.

Для запуска проекта с проверкой стилей можно использовать команду:
```
yarn dev:styles
``` 