# Личные сообщения (messages-list) — дизайн v2

Экран ЛС — **списочная форма экрана «Связи»**: тип отношения читается через цвет
обода/ауры аватара и один правый статус. Тёмный космический фон + золотой header.

> Reference source: owner-approved chat visual reference; image asset is not yet stored in repository.

## Источник данных
- **Demo/lab:** мок `js/mock-data.js` → `directMessages` (семантические поля, цвет не хранится).
- **Прод:** те же поля придут из реальных relations (`relationFlagsForTarget` / `shineConfirmed` / `shine`).
- **Маршруты:**
  - `/messages-list` — защищённый (требует сессии).
  - `/messages-list/lab` — гость-демо (мок, без сети/WS, пригоден для скриншотов).

## Семантика → визуал
Решает **только** `js/pages/messages/dm-visual-resolver.js`. В данных цвет НЕ хранится.

Поля сообщения: `relationType` (contact|friend|family), `relationRole`, `isShining`,
`isConfirmed`, `hasActiveLink`, `unreadCount`, `preview`. (`toneOverride` — только для теста.)

### Цвета (значение)
| Цвет | Токен | Значение |
|------|-------|----------|
| violet | `--rel-contact` `#8C63FF` | обычный контакт (дефолт) |
| gold | `--rel-family` `#F0B82E` | семья / близкий круг / важная связь |
| celestial | `--rel-shining` `#68D8FF` | сияющий |
| emerald | `--rel-link` `#19E58A` | ТОЛЬКО активный статус «Связь» |

Обод аватара: `isShining → celestial; иначе family → gold; иначе → violet`.
**«Подтверждён» НЕ красит обод золотым** (золото = семья; подтверждение — правый статус).

### Приоритет правого статуса
`hasActiveLink → «Связь» (emerald)` > `isConfirmed → «Подтверждён» (gold shield)` > ничего.
На карточке максимум ОДИН главный статус.

### Unread
Отдельная **violet/cool сфера** (НЕ изумруд). Только при `>0`; `1–99`, далее `99+`.
Идёт после статуса, перед chevron.

## Матрица состояний (demo-мок покрывает все)
| # | relationType | shining | confirmed | link | unread | Обод | Правый статус | Бейдж |
|---|---|---|---|---|---|---|---|---|
| M01 | contact | – | ✓ | – | 0 | violet | 🛡 Подтверждён | – |
| M02 | contact | – | – | ✓ | 2 | violet | 🔗 Связь | 2 |
| M03 | contact | ✓ | – | ✓ | 5 | celestial | 🔗 Связь | 5 |
| M04 | contact | – | – | – | 0 | violet | — | – |
| M05 | family | – | ✓ | – | 0 | gold | 🛡 Подтверждён | – |
| M06 | family | – | ✓ | ✓ | 1 | gold | 🔗 Связь (приоритет link>confirmed) | 1 |

## Размеры
- Карточка: `min-height 92px`, `radius 26px`.
- Зазор списка: `8px` (flex-column).
- Аватар-обод `.dm-av`: `56px` (фото/инициалы — 50px внутри).
- Капсула «Связь»: высота `32px`, radius `16px`, изумрудный бордер, почти прозрачный fill.
- Header: grid `1fr auto 1fr` (бренд слева / title строго по центру / «+» справа), title `18px`.

## Сияющая сфера — связь с «Связями» (обязательно)
DM-сияние НЕ изобретает свой эффект, а **повторяет язык сияющего узла графа**:
- те же общие keyframes из `styles/network-graph.css`: `fg-shine-glow` (пульс box-shadow)
  + `fg-shine-halo` (дыхание ореола: scale/opacity);
- та же небесная палитра и тот же rim `rgba(150,240,255,0.62)`;
- тот же радиальный ореол (те же стопы градиента), `inset: -12px` — как у узла графа
  (узел 58px ↔ аватар 56px, scale ≈ 1, отдельный масштабный коэффициент не нужен);
- `filter: blur(3.4px)` ≡ `feGaussianBlur stdDeviation="3.4"` SVG-фильтра `#fg-shine-glow`
  графа. CSS-blur используется потому, что SVG-фильтр объявлен только на странице «Связи»;
- `prefers-reduced-motion` → анимации выключаются.

Разрешён только controlled scale factor; никаких отдельных hardcoded-параметров,
если они уже существуют в визуальном языке «Связей».

## Фон
Фон `.dm-screen` (`#05070A` + орбы `dm-orbs-drift`) — утверждённая база, **НЕ меняется**.
Все эффекты редизайна ограничены `.dm-*` (карточка, обод аватара, статус, бейдж, header, «+»).
Критерий: если скрыть карточки/аватары/header/nav/статусы — фон остаётся прежним.