feat: Add custom button variants (pill, emoji, attachment, theme, etc.)

Добавлены недостающие варианты кнопок:
- button--pill (закругленные края)
- button--emoji (для emoji picker)
- button--attachment (вложения)
- button--send (отправка сообщения)
- button--theme (переключатель темы)
- button__text, button__spinner (элементы внутри кнопок)

Добавлена полная backward compatibility через @extend:
- btn-pill, btn-emoji, btn-attachment, btn-send, btn-theme
- btn-text, btn-spinner, btn-label
- Все стандартные цвета и размеры

Размер app.css: 148 KB → 151 KB (+3 KB)
btn-close оставлен как есть (стандартный Bootstrap для модалов)

backend/static/scss/core/_buttons-custom.scss

@@ -340,6 +340,11 @@
   border-radius: 50%;
 }
 
+// Pill (закругленные края)
+.button--pill {
+  border-radius: 50rem;
+}
+
 // Без padding (для текста)
 .button--link {
   padding: 0;
@@ -357,12 +362,71 @@
   &.button--primary {
     color: var(--button-primary);
   }
+}
+
+// Кнопка с emoji (для мессенджера)
+.button--emoji {
+  min-width: auto;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  font-size: 1.25rem;
+  transition: transform var(--button-transition);
   
-  &.button--danger {
-    color: var(--button-danger);
+  &:hover {
+    transform: scale(1.15);
+    background: rgba(0, 0, 0, 0.05);
   }
 }
 
+// Кнопка вложения
+.button--attachment {
+  min-width: auto;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  transition: color var(--button-transition);
+  
+  &:hover {
+    color: var(--button-primary);
+  }
+}
+
+// Кнопка отправки сообщения
+.button--send {
+  min-width: auto;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--button-border-radius);
+}
+
+// Переключатель темы
+.button--theme {
+  min-width: auto;
+  padding: 0.5rem;
+  background: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--button-border-radius);
+  transition: all var(--button-transition);
+  
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+}
+
+// Текстовый элемент внутри кнопки
+.button__text {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+// Spinner внутри кнопки
+.button__spinner {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.5rem;
+}
+
 // =============================================================================
 // 8. СОСТОЯНИЯ ЗАГРУЗКИ
 // =============================================================================
@@ -498,6 +562,115 @@
   @extend .button--secondary;
 }
 
+.btn-outline-danger {
+  @extend .button--outline;
+  @extend .button--danger;
+}
+
+.btn-outline-light {
+  @extend .button--outline;
+  @extend .button--light;
+}
+
+.btn-ghost {
+  @extend .button--ghost;
+}
+
+.btn-sm {
+  @extend .button--sm;
+}
+
+.btn-lg {
+  @extend .button--lg;
+}
+
+.btn-icon {
+  @extend .button--icon;
+}
+
+.btn-circle {
+  @extend .button--circle;
+}
+
+.btn-pill {
+  @extend .button--pill;
+}
+
+.btn-link {
+  @extend .button--link;
+}
+
+.btn-emoji {
+  @extend .button--emoji;
+}
+
+.btn-attachment {
+  @extend .button--attachment;
+}
+
+.btn-send {
+  @extend .button--send;
+}
+
+.btn-theme {
+  @extend .button--theme;
+}
+
+.btn-text {
+  @extend .button__text;
+}
+
+.btn-spinner {
+  @extend .button__spinner;
+}
+
+.btn-label {
+  // Deprecated: используйте .button__text
+  @extend .button__text;
+}
+
+.btn-group {
+  @extend .button-group;
+}
+
+.btn-secondary {
+  @extend .button--secondary;
+}
+
+.btn-success {
+  @extend .button--success;
+}
+
+.btn-danger {
+  @extend .button--danger;
+}
+
+.btn-warning {
+  @extend .button--warning;
+}
+
+.btn-info {
+  @extend .button--info;
+}
+
+.btn-light {
+  @extend .button--light;
+}
+
+.btn-dark {
+  @extend .button--dark;
+}
+
+.btn-outline-primary {
+  @extend .button--outline;
+  @extend .button--primary;
+}
+
+.btn-outline-secondary {
+  @extend .button--outline;
+  @extend .button--secondary;
+}
+
 .btn-outline-success {
   @extend .button--outline;
   @extend .button--success;