/* ============================================================================
   SOMNIUM UI — Unified component layer (somnium-ui.css)
   ----------------------------------------------------------------------------
   Цель: единая, переиспользуемая база компонентов поверх токенов main.css.
   Сюда сведены ОДНА каноническая реализация каждого паттерна (кнопки, поля,
   карточки, таблицы, бейджи, модалки, тосты, вкладки, списки, состояния) —
   вместо дублей .wc-btn / .e2e-btn / .drive-status-badge / .cmds-badge и т.п.

   Порядок подключения в base.html:
       main.css  →  somnium-ui.css  →  page-specific (messenger/drive/...)
   somnium-ui НЕ ломает существующие классы: это аддитивный слой. Страничные
   стили можно мигрировать на него постепенно (см. МАPПИНГ внизу файла).

   Все значения берутся ТОЛЬКО из токенов. Нет случайных hex/px/радиусов.
   ============================================================================ */

/* ────────────────────────────────────────────────────────────────────────
   0. ДОПОЛНЯЮЩИЕ СЕМАНТИЧЕСКИЕ ТОКЕНЫ
   Закрывают «дыры», из-за которых в страничных CSS появлялись хардкоды.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* Единый «онлайн»-зелёный (был #22c55e / #34a853 / #2e9e5b / #27ae60) */
  --online:            var(--success-strong);   /* #38a169 */

  /* Поверхности тёмного UI (звонки/редактор) — раньше Google-Meet хардкоды
     #202124 / #3c4043 / #8ab4f8 / #ea4335 рассыпанные по messenger.css */
  --dark-bg:           #1f2421;
  --dark-surface:      #2c322e;
  --dark-surface-2:    #3a423d;
  --dark-text:         #e9ede7;
  --dark-text-soft:    #aab4ad;
  --dark-accent:       var(--call-blue);    /* #5b8dee */
  --dark-danger:       var(--danger-alt);   /* #e53e3e */

  /* Единый фокус-ринг по семантике (уже есть --ring-warm/-danger/-success) */
  --ring-info:         0 0 0 3px rgba(120,144,166,.22);

  /* Высоты интерактивных контролов — чтобы кнопки/поля/тулбары совпадали */
  --control-h:         40px;   /* стандарт: input, .btn (по умолч.) */
  --control-h-sm:      32px;   /* компактные ряды, тулбары */
  --control-h-lg:      52px;   /* hero CTA */
  --icon-btn:          34px;   /* единый размер иконочной кнопки (был 28/30/36) */
  --icon-btn-sm:       28px;

  /* Z-уровни — чтобы модалки/тосты/поповеры не конфликтовали вразнобой */
  --z-sticky:          100;
  --z-dropdown:        1000;
  --z-modal:           1200;
  --z-toast:           2000;
}

/* ────────────────────────────────────────────────────────────────────────
   1. КНОПКИ  (.sb-btn)  — каноника. Заменяет .wc-btn*, .e2e-btn*, .btn-call-*
   ──────────────────────────────────────────────────────────────────────── */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm);
  height: var(--control-h); padding: 0 var(--spacing-lg);
  font-family: var(--font-family-sans); font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold); letter-spacing: .01em; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-full);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: var(--transition); user-select: none;
}
.sb-btn:focus-visible { outline: none; box-shadow: var(--ring-warm); }
.sb-btn:disabled, .sb-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.sb-btn .bi, .sb-btn .fa, .sb-btn svg { font-size: 1.05em; }

/* Варианты */
.sb-btn--primary { background: var(--ink); color: var(--cream); }
.sb-btn--primary:hover:not(:disabled) { background: var(--warm); transform: translateY(-2px); box-shadow: var(--shadow-warm-soft); }
.sb-btn--warm    { background: var(--warm); color: #fff; box-shadow: var(--shadow-warm-soft); }
.sb-btn--warm:hover:not(:disabled) { background: var(--warm-dark); transform: translateY(-2px); box-shadow: var(--shadow-warm-strong); }
.sb-btn--outline { background: transparent; border-color: var(--border-s); color: var(--ink-mid); }
.sb-btn--outline:hover:not(:disabled) { border-color: var(--warm-soft); color: var(--warm); background: var(--warm-bg); }
.sb-btn--ghost   { background: transparent; color: var(--ink-mid); }
.sb-btn--ghost:hover:not(:disabled) { background: var(--sand); color: var(--ink); }
.sb-btn--success { background: var(--success); color: #fff; }
.sb-btn--success:hover:not(:disabled) { background: var(--success-dark); transform: translateY(-2px); }
.sb-btn--danger  { background: var(--danger); color: #fff; }
.sb-btn--danger:hover:not(:disabled) { background: var(--danger-strong); transform: translateY(-2px); }
.sb-btn--danger-soft { background: transparent; border-color: rgba(192,57,43,.4); color: var(--danger-dark); }
.sb-btn--danger-soft:hover:not(:disabled) { background: var(--danger-bg); }

/* Размеры */
.sb-btn--sm { height: var(--control-h-sm); padding: 0 var(--spacing-md); font-size: var(--font-size-sm); }
.sb-btn--lg { height: var(--control-h-lg); padding: 0 var(--spacing-xl); font-size: var(--font-size-md); }
.sb-btn--block { width: 100%; }

/* Loading-состояние: текст гаснет, появляется спиннер */
.sb-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.sb-btn.is-loading::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; opacity: .9;
  animation: spin .6s linear infinite; color: var(--cream);
}
.sb-btn--outline.is-loading::after, .sb-btn--ghost.is-loading::after { color: var(--warm); }

/* Иконочная кнопка — единый размер вместо 28/30/36 вразнобой */
.sb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-btn); height: var(--icon-btn); flex-shrink: 0;
  border: none; border-radius: var(--radius-sm); background: transparent;
  color: var(--ink-soft); cursor: pointer; font-size: var(--font-size-md);
  transition: var(--transition-fast);
}
.sb-icon-btn:hover { background: var(--warm-bg); color: var(--warm); }
.sb-icon-btn:focus-visible { outline: none; box-shadow: var(--ring-warm); }
.sb-icon-btn--sm { width: var(--icon-btn-sm); height: var(--icon-btn-sm); font-size: var(--font-size-sm); }
.sb-icon-btn--danger:hover { background: var(--danger-bg); color: var(--danger-dark); }

/* ────────────────────────────────────────────────────────────────────────
   2. ПОЛЯ ВВОДА  (.sb-field)  — input / textarea / select + состояния
   ──────────────────────────────────────────────────────────────────────── */
.sb-field-group { margin-bottom: var(--spacing-lg); }
.sb-label {
  display: block; margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--ink);
}
.sb-field {
  width: 100%; height: var(--control-h); padding: 0 var(--spacing-md);
  font-family: var(--font-family-sans); font-size: var(--font-size-base);
  color: var(--ink); background: var(--white);
  border: 1px solid var(--border-s); border-radius: var(--radius-sm);
  transition: var(--transition);
}
textarea.sb-field { height: auto; min-height: 96px; padding: var(--spacing-sm) var(--spacing-md); resize: vertical; line-height: 1.6; }
.sb-field::placeholder { color: var(--ink-faint); }
.sb-field:hover:not(:disabled) { border-color: var(--ink-faint); }
.sb-field:focus { outline: none; border-color: var(--warm); box-shadow: var(--ring-warm); }
.sb-field:disabled { background: var(--sand); color: var(--ink-soft); cursor: not-allowed; }
.sb-field.is-error   { border-color: var(--danger); box-shadow: var(--ring-danger); }
.sb-field.is-success { border-color: var(--success); box-shadow: var(--ring-success); }

select.sb-field {
  appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d7972' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.sb-field-hint  { margin-top: 6px; font-size: var(--font-size-xs); color: var(--ink-soft); }
.sb-field-error { margin-top: 6px; font-size: var(--font-size-xs); color: var(--danger-dark); display: flex; align-items: center; gap: 5px; }

/* Поле с иконкой (поиск) */
.sb-field-icon { position: relative; }
.sb-field-icon > .bi, .sb-field-icon > .fa { position: absolute; left: var(--spacing-md); top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: var(--font-size-md); pointer-events: none; }
.sb-field-icon .sb-field { padding-left: 40px; }

/* Переключатель (toggle) — заменяет .toggle-slider */
.sb-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.sb-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sb-toggle .sb-toggle-track { position: absolute; inset: 0; background: var(--ink-faint); border-radius: var(--radius-full); transition: var(--transition); }
.sb-toggle .sb-toggle-track::before { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: var(--white); border-radius: 50%; transition: var(--transition); box-shadow: var(--shadow-sm); }
.sb-toggle input:checked + .sb-toggle-track { background: var(--warm); }
.sb-toggle input:checked + .sb-toggle-track::before { transform: translateX(18px); }
.sb-toggle input:focus-visible + .sb-toggle-track { box-shadow: var(--ring-warm); }

/* ────────────────────────────────────────────────────────────────────────
   3. ПОВЕРХНОСТИ: КАРТОЧКА / ПАНЕЛЬ  — заменяет .wc-surface, .card дубли
   ──────────────────────────────────────────────────────────────────────── */
.sb-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  transition: var(--transition);
}
.sb-card--pad { padding: var(--spacing-lg); }
.sb-card--hover:hover { border-color: var(--warm-soft); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.sb-card-header { padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md); border-bottom: 1px solid var(--border); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.sb-card-body   { padding: var(--spacing-lg); }
.sb-card-footer { padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--border); background: var(--sand); border-radius: 0 0 var(--radius) var(--radius); }

/* Плоская панель (без тени) — для вложенных поверхностей */
.sb-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }

/* Eyebrow / section label — единый стиль (был .wc-eyebrow + .section-label) */
.sb-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-family-mono); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); letter-spacing: .14em; text-transform: uppercase;
  color: var(--warm); margin-bottom: var(--spacing-md);
}
.sb-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--warm); border-radius: 1px; }

/* ────────────────────────────────────────────────────────────────────────
   4. БЕЙДЖИ / СТАТУС-ПИЛЮЛИ  (.sb-badge)
   ОДНА система вместо .wc-pill / .drive-status-badge / .cmds-badge / .e2e-status-badge
   ──────────────────────────────────────────────────────────────────────── */
.sb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  line-height: 1.5; white-space: nowrap; border: 1px solid transparent;
}
.sb-badge .bi, .sb-badge .fa { font-size: .9em; }
.sb-badge--neutral { background: var(--sand); color: var(--ink-mid); border-color: var(--border); }
.sb-badge--primary { background: var(--warm-pale);  color: var(--warm-dark); }
.sb-badge--info    { background: var(--info-bg);     color: var(--info-text); }
.sb-badge--success { background: var(--success-bg);  color: var(--success-text); }
.sb-badge--warning { background: var(--warning-bg);  color: var(--warning-text); }
.sb-badge--danger  { background: var(--danger-bg);   color: var(--danger-text); }
.sb-badge--progress{ background: var(--warm-bg);     color: var(--warm-dark); }

/* «Сильный» вариант: монопрописные ярлыки (как .badge в main.css) */
.sb-badge--strong { font-family: var(--font-family-mono); text-transform: uppercase; letter-spacing: .12em; font-weight: var(--font-weight-bold); padding: 5px 12px; }

/* Точка-индикатор (online/offline/away) */
.sb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--cream); }
.sb-dot--online { background: var(--online); }
.sb-dot--away   { background: var(--warning); }
.sb-dot--offline{ background: var(--ink-faint); }

/* ────────────────────────────────────────────────────────────────────────
   5. ТАБЛИЦЫ  (.sb-table)  — заменяет .drive-table / .wc-table / .table reskin
   ──────────────────────────────────────────────────────────────────────── */
.sb-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); color: var(--ink); }
.sb-table th {
  text-align: left; padding: 10px 12px; font-family: var(--font-family-mono);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
  border-bottom: 1px solid var(--border-s); white-space: nowrap; background: transparent;
}
.sb-table td { padding: 11px 12px; color: var(--ink-mid); border-bottom: 1px solid var(--border); vertical-align: middle; }
.sb-table tbody tr { transition: background var(--transition-fast); }
.sb-table tbody tr:hover { background: var(--warm-bg); }
.sb-table tbody tr:hover td { color: var(--ink); }
.sb-table--compact th { padding: 7px 10px; }
.sb-table--compact td { padding: 7px 10px; }
.sb-table .sb-td--num { font-variant-numeric: tabular-nums; text-align: right; }
.sb-table .sb-td--actions { text-align: right; white-space: nowrap; }

/* ────────────────────────────────────────────────────────────────────────
   6. ВКЛАДКИ  (.sb-tabs)  — единое подчёркивание-акцент (был .nav-tabs reskin)
   ──────────────────────────────────────────────────────────────────────── */
.sb-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-s); }
.sb-tab {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 10px 16px; margin-bottom: -1px;
  font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--ink-soft); border-bottom: 2px solid transparent; transition: var(--transition-fast);
}
.sb-tab:hover { color: var(--ink); border-bottom-color: var(--warm-pale); }
.sb-tab.active { color: var(--warm); border-bottom-color: var(--warm); }

/* Сегментированный контрол (toggle-группа, был .drive-view-toggle) */
.sb-segment { display: inline-flex; gap: 2px; background: var(--sand); border-radius: var(--radius-sm); padding: 3px; }
.sb-segment > button {
  appearance: none; border: none; background: transparent; cursor: pointer;
  height: 28px; min-width: 28px; padding: 0 12px; border-radius: var(--radius-xs);
  color: var(--ink-soft); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: var(--transition-fast);
}
.sb-segment > button:hover { color: var(--ink); }
.sb-segment > button.active { background: var(--cream); color: var(--warm); box-shadow: var(--shadow-sm); }

/* Тулбар-контейнер */
.sb-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.sb-toolbar-spacer { flex: 1; }

/* ────────────────────────────────────────────────────────────────────────
   7. СПИСКИ / РЯДЫ  (.sb-row)  — заменяет .settings-row, .drive-file-card, .drive-folder-item
   ──────────────────────────────────────────────────────────────────────── */
.sb-row {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: 10px 12px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--transition-fast); position: relative;
}
.sb-row:hover { background: var(--warm-bg); }
.sb-row__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-xs); background: var(--warm-pale); color: var(--warm); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-md); }
.sb-row__body { flex: 1; min-width: 0; }
.sb-row__title { font-size: var(--font-size-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-row__meta  { font-size: var(--font-size-xs); color: var(--ink-soft); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.sb-row__actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition-fast); }
.sb-row:hover .sb-row__actions { opacity: 1; }

/* Ряд настроек (иконка + текст + контрол справа) */
.sb-setting { display: flex; align-items: center; gap: var(--spacing-md); padding: 14px 4px; border-bottom: 1px solid var(--border); }
.sb-setting__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--sand); color: var(--ink-mid); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-md); }
.sb-setting__icon--danger { background: var(--danger-bg); color: var(--danger-dark); }
.sb-setting__body { flex: 1; min-width: 0; }
.sb-setting__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--ink); }
.sb-setting__sub { font-size: var(--font-size-xs); color: var(--ink-soft); margin-top: 2px; }

/* ────────────────────────────────────────────────────────────────────────
   8. МОДАЛЬНЫЕ ОКНА  (.sb-modal)  — заменяет .drive-modal / .e2e-modal
   ──────────────────────────────────────────────────────────────────────── */
.sb-modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--backdrop);
  display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.sb-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.sb-modal {
  background: var(--cream); border-radius: var(--radius); width: min(480px, 100%);
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl); overflow: hidden;
  transform: translateY(8px) scale(.98); transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.sb-modal-backdrop.is-open .sb-modal { transform: none; }
.sb-modal--wide { width: min(640px, 100%); }
.sb-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border); }
.sb-modal-title  { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--ink); margin: 0; }
.sb-modal-body   { flex: 1; overflow-y: auto; padding: var(--spacing-lg); }
.sb-modal-footer { display: flex; justify-content: flex-end; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--border); background: var(--sand); }

/* ────────────────────────────────────────────────────────────────────────
   9. ТОСТЫ / АЛЕРТЫ  (.sb-toast / .sb-alert)  — единый стиль уведомлений
   ──────────────────────────────────────────────────────────────────────── */
.sb-toast {
  display: flex; align-items: flex-start; gap: var(--spacing-sm);
  background: var(--white); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: var(--spacing-md);
  border-left: 4px solid var(--warm); min-width: 280px; max-width: 360px;
  animation: fadeInDown .3s cubic-bezier(.2,.8,.2,1);
}
.sb-toast__ico   { flex-shrink: 0; font-size: var(--font-size-lg); color: var(--warm); line-height: 1.3; }
.sb-toast__body  { flex: 1; min-width: 0; }
.sb-toast__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--ink); }
.sb-toast__text  { font-size: var(--font-size-sm); color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }
.sb-toast--success { border-left-color: var(--success); } .sb-toast--success .sb-toast__ico { color: var(--success); }
.sb-toast--danger  { border-left-color: var(--danger); }  .sb-toast--danger  .sb-toast__ico { color: var(--danger); }
.sb-toast--warning { border-left-color: var(--warning); } .sb-toast--warning .sb-toast__ico { color: var(--warning); }

.sb-alert { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-sm); border-left: 4px solid; font-size: var(--font-size-sm); }
.sb-alert--success { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.sb-alert--danger  { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger-text); }
.sb-alert--warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-text); }
.sb-alert--info    { background: var(--info-bg);    border-color: var(--info);    color: var(--info-text); }

/* ────────────────────────────────────────────────────────────────────────
   10. СОСТОЯНИЯ: ПУСТО / ЗАГРУЗКА / ОШИБКА  (.sb-empty / .sb-skeleton / .sb-spinner)
   ──────────────────────────────────────────────────────────────────────── */
.sb-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); gap: var(--spacing-sm);
  color: var(--ink-soft);
}
.sb-empty__ico { width: 64px; height: 64px; border-radius: 50%; background: var(--sand); color: var(--ink-faint); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: var(--spacing-sm); }
.sb-empty__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--ink); }
.sb-empty__text  { font-size: var(--font-size-sm); color: var(--ink-soft); max-width: 320px; line-height: 1.6; }
.sb-empty--error .sb-empty__ico { background: var(--danger-bg); color: var(--danger); }

.sb-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--warm-pale); border-top-color: var(--warm); animation: spin .6s linear infinite; }
.sb-spinner--lg { width: 38px; height: 38px; border-width: 3px; }

.sb-skeleton { background: linear-gradient(90deg, var(--sand) 25%, var(--sand-deep) 37%, var(--sand) 63%); background-size: 400% 100%; border-radius: var(--radius-xs); animation: sb-shimmer 1.4s ease infinite; }
.sb-skeleton--text { height: 12px; margin: 6px 0; }
.sb-skeleton--title { height: 20px; width: 50%; }
.sb-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
@keyframes sb-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ────────────────────────────────────────────────────────────────────────
   11. АВАТАР  (.sb-avatar)  — единые размеры (был разнобой 24/28/32/100)
   ──────────────────────────────────────────────────────────────────────── */
.sb-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--avatar-grad); color: #fff; font-weight: var(--font-weight-bold); text-transform: uppercase; overflow: hidden; flex-shrink: 0; }
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.sb-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.sb-avatar--md { width: 40px; height: 40px; font-size: 15px; }
.sb-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.sb-avatar--xl { width: 96px; height: 96px; font-size: 34px; }

/* ────────────────────────────────────────────────────────────────────────
   12. ТЁМНЫЙ UI (звонки/редактор) — токенизировано вместо Meet-хардкодов
   ──────────────────────────────────────────────────────────────────────── */
.sb-dark { background: var(--dark-bg); color: var(--dark-text); }
.sb-dark .sb-dark-surface { background: var(--dark-surface); }
.sb-dark .sb-dark-muted { color: var(--dark-text-soft); }
.sb-call-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--dark-surface-2); color: var(--dark-text); font-size: var(--font-size-md); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-fast); }
.sb-call-btn:hover { background: var(--dark-accent); transform: scale(1.06); }
.sb-call-btn--active { background: var(--dark-accent); color: var(--dark-bg); }
.sb-call-btn--danger, .sb-call-btn--leave { background: var(--dark-danger); color: #fff; }
.sb-call-btn--leave { width: 56px; border-radius: 28px; }

/* ============================================================================
   МАPПИНГ СТАРЫХ КЛАССОВ/ХАРДКОДОВ → КАНОНИКА (для пошаговой миграции)
   ----------------------------------------------------------------------------
   КНОПКИ:    .wc-btn-primary, .e2e-btn-primary       → .sb-btn.sb-btn--warm
              .wc-btn, .e2e-btn-secondary             → .sb-btn.sb-btn--outline
              .btn-call-decline                       → .sb-call-btn--danger
   БЕЙДЖИ:    .wc-pill / .drive-status-badge /
              .cmds-badge / .e2e-status-badge         → .sb-badge.sb-badge--{variant}
   ТАБЛИЦЫ:   .drive-table / .wc-table                → .sb-table
   ИКОНКНОПКИ:.drive-toolbar-btn(30) /.wc-icon-btn /
              .drive-file-btn(28) /.drive-view-btn(28)→ .sb-icon-btn (34) / --sm (28)
   МОДАЛКИ:   .drive-modal / .e2e-modal-content       → .sb-modal
   ТОСТЫ:     .drive-toast / .message-notification     → .sb-toast
   ТОГГЛ:     .toggle-slider                          → .sb-toggle
   ЦВЕТА:     online #22c55e/#34a853/#2e9e5b/#27ae60  → var(--online)
              старый тёплый #c15f3c / #e07555 / #d94f35 → var(--warm) / --warm-dark
              Meet #202124/#3c4043/#8ab4f8/#ea4335     → var(--dark-*) / --dark-accent
              e2e-градиент #667eea→#764ba2             → var(--ink)→var(--warm) (тёплый)
   РАДИУСЫ:   9px/20px пилюль, 6/8/10px карточек        → var(--radius-xs/-sm/-full)
   ============================================================================ */