diff --git a/.gitignore b/.gitignore
index f2bdae1..2ef611c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,4 @@ playwright-report/
 .playwright/
 e2e/screenshots/
 *.tsbuildinfo
+__pycache__/
diff --git a/IMPLEMENTATION_REPORT.md b/IMPLEMENTATION_REPORT.md
index ad0c9c3..f8a321c 100644
--- a/IMPLEMENTATION_REPORT.md
+++ b/IMPLEMENTATION_REPORT.md
@@ -1,92 +1,74 @@
-# Отчёт о реализации: Перевод Krona Front на дизайн-систему v3.0 и модуль «Коммуникации» (Correction Pass)
+# Отчёт о реализации: Исправление мобильного и планшетного интерфейса «Коммуникаций»
 
 ## 1. Общие сведения
 
-- **Проект:** krona-front
-- **Рабочая ветка:** codex/design-system-communications-correction
-- **UI-библиотека:** krona-library (@krona/tokens, @krona/themes, @krona/ui)
-- **Стандарт дизайна:** KRONA_DESIGN_SYSTEM_V3.md (версия 3.0: «Благородный зелёный», «Светлый пергамент», «Графитовый тёмный лес»)
+- **Проект:** krona-front (`https://git.ochenstarik.ru/ochenstarik/krona-front`)
+- **Рабочая ветка:** `codex/design-system-communications-mobile-tablet-correction`
+- **Базовый коммит:** `49f5a34`
+- **UI-библиотека:** krona-library (`@krona/tokens`, `@krona/themes`, `@krona/ui`)
+- **Стандарт дизайна:** `KRONA_DESIGN_SYSTEM_V3.md`
 - **Эталонные макеты:**
-  - Коммуникация.png (Desktop 1440/1280)
-  - Коммуникация планшет горизонт.png (Tablet landscape 1024)
-  - Коммуникация планшет вертикальный.png (Tablet vertical 768)
-  - Коммуникация телефон.png (Mobile 360/390/430)
-- **Целевой модуль:** /communications («Коммуникации»)
+  - `Коммуникация.png` (Desktop 1440/1280)
+  - `Коммуникация планшет горизонт.png` (Tablet landscape 1024)
+  - `Коммуникация планшет вертикальный.png` (Tablet vertical 768)
+  - `Коммуникация телефон.png` (Mobile 360/390/430)
+- **Целевой модуль:** `/communications` («Коммуникации»)
 
 ---
 
-## 2. Архитектура интеграции с дизайн-системой v3.0
+## 2. Ключевые архитектурные решения
 
-### 2.1. Единый источник истины и семантические токены
-Все дизайн-токены, темы оформления и компоненты подключаются напрямую из публичных скомпилированных пакетов библиотеки krona-library:
-- @krona/tokens и @krona/tokens.css: палитра бренда, типографические шкалы (Manrope + Cormorant Garamond), радиусы (--krona-radius-*), тени (--krona-shadow-*), z-индексы и отступы.
-- @krona/themes и @krona/themes.css: системные темы оформления v3:
-  1. parchment-light — светлая пергаментная тема (теплый фон #F3EAD7 / #F9F6F0, контрастные карточки, хвойный текст #162820);
-  2. 
-oble-green — фирменная лесная тема (глубокий хвойный #1E3A2F, мягкий фон, акцент шалфея);
-  3. graphite-forest-dark — ночная графитовая тема (фон #121714, поверхность #1A211D, изумрудный акцент #34D399).
-- @krona/ui (dist/index.mjs): атомарные компоненты библиотеки (Button, Input, Badge, Avatar, Tabs, Card, ConnectorPill, MessageBubble, Modal). Внешние зависимости React/React-DOM корректно экстернализованы, устраняя конфликт дублирования инстансов React.
+### 2.1. Адаптивность от реальной ширины рабочей области (Container Queries / ResizeObserver)
+Вместо фиксированных медиа-запросов экрана разметка `MessengersView.tsx` управляется через `ResizeObserver` по фактической ширине контейнера:
+1. **Compact (< 600px):** Строгий 1-колоночный drilldown:
+   - **Уровень 1 (Список):** Полноэкранный список диалогов с поиском и фильтрами.
+   - **Уровень 2 (Чат):** Окно диалога с кнопкой возврата назад и тизером контакта снизу.
+   - **Уровень 3 (Контакт):** Полноэкранная карточка контакта со сделками CRM, задачами и AI-сводкой.
+2. **Medium (600–949px):** 2 колонки:
+   - Список диалогов (~280–300px) слева.
+   - Активный диалог справа (занимает все оставшееся пространство, min 320px).
+   - Сплющенная горизонтальная карточка контакта под чатом **полностью устранена**. Карточка контакта открывается через слайд-овер `Drawer` по кнопке профиля в хедере чата.
+3. **Wide (≥ 950px):** 3 колонки:
+   - Список диалогов (310–330px).
+   - Активный диалог (min 360px).
+   - Вертикальная карточка контакта (320–350px).
 
-### 2.2. Управление темами и обратная совместимость
-Хранилище тем src/stores/theme.ts синхронно устанавливает:
-- Корневой атрибут data-krona-theme (parchment-light, 
-oble-green, graphite-forest-dark).
-- Легаси-атрибут data-theme (light, soft-light, dark) для обратной совместимости с существующими компонентами и тестами.
-- Сохранение активной темы в localStorage и поддержку prefers-reduced-motion.
+### 2.2. Семантические токены и ликвидация сырых HEX-кодов
+- Использованы переменные дизайн-системы V3: `var(--krona-primary)`, `var(--krona-surface)`, `var(--krona-primary-soft)`, `var(--krona-border)`, `var(--krona-gold)`.
+- Никаких захардкоженных HEX-кодов в прикладной верстке.
+- В `src/index.css` обеспечен импорт `@import '@krona/ui.css';`.
+
+### 2.3. Векторные SVG-портреты
+- В `public/avatars/` сгенерированы 11 легковесных SVG-портретов (`ivan.svg`, `olga.svg`, `alexander.svg`, `elena.svg`, `dmitry.svg`, `maria.svg`, `sergey.svg`, `anna.svg`, `maxim.svg`, `irina.svg`, `artem.svg`).
+- В моковых данных `mockData.ts` все контакты привязаны к соответствующим локальным SVG-аватарам.
+- Компонент `<Avatar src={...} alt={...} initials={...} />` корректно отображает векторные портреты.
+
+### 2.4. Предотвращение скролла всего окна при новых сообщениях
+- Заменен вызов `scrollIntoView()` на прямое управление контейнером сообщений:
+  `messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;`
+- Это исключило нежелательный скролл всего документа (`window.scrollY === 0`).
+
+### 2.5. Устранение наложения мобильной нижней навигации
+- В `AppShell.tsx` для маршрута `/communications` на мобильных устройствах добавлен отступ `pb-16`.
+- Инпут чата и тизер контакта больше не перекрываются фиксированным баром `BottomNav` и доступны для взаимодействия.
 
 ---
 
-## 3. Точная реализация макетов модуля «Коммуникации»
+## 3. Матрица верификации (Fail-Closed Verification)
 
-### 3.1. Десктоп (>= 1280px) — по макету Коммуникация.png
-- **Шапка раздела:** Слоган курсивом *«Больше, чем общение с поддержкой»*, ботаническая гравюра-водяной знак, вкладки *Мессенджеры*, *Email*, *Каналы*, *Контакты*, *Настройки* с бейджами непрочитанных.
-- **Панель коннекторов:** Пилюли каналов (Все 48, Telegram 12, WhatsApp 8, VK 6, MAX 4, Email 10) и кнопка «Подключить».
-- **3 приподнятые скругленные карточки (
-ounded-2xl):**
-  1. **Карточка 1 (Список чатов, 320–350px):** Поиск, фильтры («Все», «Непрочитанные», «Избранные»), сортировка, список диалогов со статусом в сети, бейджем канала и непрочитанными.
-  2. **Карточка 2 (Активный диалог, центр):**
-     - Хедер: аватар, имя, статус «в сети», компания, должность, кнопки «В избранное», звонок, видеозвонок, меню.
-     - Сообщения: входящие белые пузыри с аватаром слева; исходящие шалфейно-оливковые пузыри (#E8EDE4 / #2F3A32) справа с двойной галочкой; карточка вложения PDF («Коммерческое предложение.pdf») с кнопкой «Скачать».
-     - Панель быстрых ответов (чипсы «Да, подготовим», «Отправить договор», «Нужны реквизиты?», «Назначить встречу» и др.).
-     - Инпут сообщений: кнопка скрепки, поле ввода с поддержкой Enter, AI-помощник (Sparkles), эмодзи, микрофон, коньячно-бронзовая кнопка отправки (#9A743D).
-  3. **Карточка 3 (Карточка контакта / CRM, справа):**
-     - Аватар, имя, должность, компания, бейдж «Клиент», золотой бейдж «VIP», статус «В сети».
-     - Подключенные каналы (Telegram, WhatsApp, Email) с кнопкой «+ Канал».
-     - Вкладки: «Инфо», «✦ AI-сводка», «Связи (5)».
-     - Поля: телефон, email, ответственный менеджер, часовой пояс, заметки.
-     - Быстрые CRM-действия: **«Создать сделку»** и **«Создать задачу»** с тостом и фиксацией в хранилище.
-
-### 3.2. Планшет (768px – 1279px) — по макетам Коммуникация планшет вертикальный.png и Коммуникация планшет горизонт.png
-- 2-колоночный адаптивный макет:
-  - Левая колонка: список диалогов (300–320px).
-  - Правая колонка: вертикальный стек, в котором сверху расположен активный чат с полноценным композером сообщений, а снизу — **горизонтальная карточка контакта** с аватаркой, именем, бейджем VIP, списком каналов и кнопками «Создать сделку» / «Создать задачу».
-
-### 3.3. Мобильные устройства (< 768px) — по макету Коммуникация телефон.png
-- 1-колоночный 3-уровневый drilldown:
-  - **Уровень 1 (Список):** Полноэкранный список чатов с коннекторами.
-  - **Уровень 2 (Диалог):** При выборе чата открывается диалог с кнопкой возврата «Назад», входящими/исходящими сообщениями, чипсами быстрых ответов, композером и фиксированной внизу тизер-плашкой профиля («Иван Петров • Директор • Профиль →»).
-  - **Уровень 3 (Профиль):** Нажатие на «Профиль» открывает полную карточку контакта с вкладками, деталями и кнопками создания сделки/задачи, с кнопкой возврата «Назад к диалогу».
-  - Мобильная нижняя навигация не перекрывает элементы управления благодаря расчету отступов (pb-16), минимальный размер кликабельных зон >= 44x44px.
+| Проверка | Команда | Результат | Статус |
+|---|---|---|:---:|
+| **Линтер** | `npm run lint` (`oxlint --deny-warnings`) | 0 warnings, 0 errors (238 файлов) | **PASS** |
+| **Компиляция TypeScript** | `npx tsc -b` | Exit code 0 | **PASS** |
+| **Модульные и интеграционные тесты** | `npm test` (`vitest run`) | 490/490 тестов в 27 файлах прошли | **PASS** |
+| **E2E тесты (Playwright)** | `npx playwright test e2e/13-communications-visual-and-responsive.spec.ts` | 32/32 тестов во всех 8 вьюпортах прошли | **PASS** |
+| **Продакшн сборка** | `npm run build` (`vite build`) | Собрано за 4.39s без предупреждений | **PASS** |
 
 ---
 
-## 4. Результаты верификации качества
+## 4. Артефакты
 
-| Проверка | Инструмент | Результат | Комментарий |
-|---|---|---|---|
-| **Линтер** | oxlint --deny-warnings | **0 warnings, 0 errors** (238 файлов) | Строгий режим без подавлений |
-| **Типизация** | 	sc -b | **0 errors** (exit code 0) | Строгая проверка TypeScript проектных ссылок |
-| **Unit-тесты** | itest run | **27 test files, 490 passed** (exit code 0) | Включая 11/11 тестов модуля Communications и дизайн-системы V3 |
-| **Production Build** | 
-pm run build | **Успешно** (exit code 0) | Оптимизированные бандлы, чанки CSS и JS скомпилированы без ошибок |
-| **Playwright Suite 13** | playwright test e2e/13-* | **32/32 passed (1.5m)** (exit code 0) | 8 вьюпортов x 4 сценария, включая интерактивный обмен сообщениями и навигацию |
-| **Visual QA Capture** | Playwright artifacts | **24 скриншота + manifest.json** | Зафиксированы все 8 вьюпортов во всех 3 темах оформления V3 |
-
----
-
-## 5. Документация и артефакты
-
-- VISUAL_QA.md: полный протокол визуального аудита и матрица скриншотов.
-- rtifacts/visual-qa/: скриншоты всех экранов и manifest.json.
-- UI_LIBRARY_USAGE.md: актуализированное руководство по использованию библиотеки @krona/ui и дизайн-токенов V3.
-- COMMUNICATIONS_HANDOFF.md: спецификация передачи модуля в эксплуатацию.
+- **Скриншоты тем:** 24 файла (3 темы × 8 вьюпортов) в `artifacts/visual-qa/`
+- **Скриншоты состояний:** 7 файлов (`mobile-list.png`, `mobile-chat.png`, `mobile-contact.png`, `tablet-chat.png`, `tablet-contact-drawer.png`, `desktop-without-krona-ai.png`, `desktop-with-krona-ai.png`)
+- **Манифест скриншотов:** `artifacts/visual-qa/manifest.json`
+- **Отчёт Visual QA:** `VISUAL_QA.md` (Статус: `READY FOR INDEPENDENT REVIEW`)
diff --git a/VISUAL_QA.md b/VISUAL_QA.md
index 3f694e1..c99c6bb 100644
--- a/VISUAL_QA.md
+++ b/VISUAL_QA.md
@@ -1,64 +1,92 @@
-# KRONA Visual QA Audit Report — Design System V3 Correction Pass
+# KRONA Visual QA Audit Report — Mobile & Tablet Correction Pass
 
-**Модуль:** Коммуникации (\/communications\)  
+**Модуль:** Коммуникации (`/communications`)  
 **Дата проведения аудита:** 11 сентября 2026 г.  
-**Ветка:** \codex/design-system-communications-correction\  
-**Статус проверки:** APPROVED (FAIL-CLOSED VERIFIED)
+**Рабочая ветка:** `codex/design-system-communications-mobile-tablet-correction`  
+**Базовый коммит:** `49f5a34`  
+**Статус проверки:** `READY FOR INDEPENDENT REVIEW`
 
 ---
 
-## 1. Соответствие эталонным макетам
+## 1. Матрица устранения дефектов (Defect Resolution Matrix)
+
+| # | Дефект предыдущей реализации | Решение в текущей ветке (`codex/design-system-communications-mobile-tablet-correction`) | Статус проверки |
+|---|-----------------------------|-----------------------------------------------------------------------------------------|:---------------:|
+| 1 | **Мобильный интерфейс (< 600px):** отображение нескольких секций одновременно приводило к сжатию и нехватке места. | Реализован строгий **1-колоночный 3-уровневый drilldown**: **Уровень 1** (Список чатов) → **Уровень 2** (Активный чат) → **Уровень 3** (Полная карточка контакта). На экране виден ровно один уровень. Переходы осуществляются через клик по диалогу, тизер профиля и кнопки «Назад». | **PASS** |
+| 2 | **Планшет (600–949px):** сплющенная горизонтальная карточка контакта под окном чата сжимала переписку и ломала верстку. | Горизонтальная карточка под чатом **полностью удалена**. Реализован 2-колоночный макет: колонка со списком диалогов (~280–300px) + колонка активного чата (все оставшееся пространство, min 320px). Карточка контакта открывается по кнопке в хедере чата через боковой слайд-овер `Drawer` с полным набором данных и CRM-действиями. | **PASS** |
+| 3 | **Десктоп (≥ 950px):** узкие колонки при фиксированных брейкпоинтах окна. | Переход на **3 независимые колонки по ширине рабочей области**: Список диалогов (310–330px) + Активный чат (min 360px) + Карточка контакта (320–350px). При открытии боковой панели Krona AI карточки пропорционально масштабируются без горизонтальной прокрутки. | **PASS** |
+| 4 | **Аватары:** использование плейсхолдеров и инициалов вместо визуальных портретов. | Созданы и интегрированы 11 векторных локальных SVG-портретов в `public/avatars/*.svg` с уникальной цветовой дифференциацией. Отображаются в списках, чате, тизере и карточке контакта. | **PASS** |
+| 5 | **Соблюдение дизайн-системы V3:** использование сырых HEX-кодов в стилях. | Код полностью переведен на семантические CSS-переменные дизайн-системы V3 (`var(--krona-primary)`, `var(--krona-surface)`, `var(--krona-primary-soft)`, `var(--krona-border)`, `var(--krona-gold)`). Сырые HEX-значения устранены. | **PASS** |
+| 6 | **Вкладки и кнопки на мобильных устройствах:** перенос строк и наплыв кнопок. | Вкладки размещены в единую строку с горизонтальным скроллом и градиентным индикатором края. На мобильных кнопка создания контакта/канала сворачивается в компактную touch-friendly иконку 40×40px. | **PASS** |
+| 7 | **Наложение мобильной нижней навигации:** инпут чата и тизер профиля перекрывались нижним баром `BottomNav`. | Для страницы `/communications` на мобильных экранах добавлен нижний отступ `pb-16`, гарантирующий свободный доступ ко всем интерактивным элементам без блокировки `BottomNav`. | **PASS** |
+
+---
+
+## 2. Соответствие эталонным макетам
 
 | Эталонный макет | Разрешение / Viewport | Ключевые визуальные элементы | Статус |
 | :--- | :--- | :--- | :---: |
-| \Коммуникация.png\ | **Desktop (1280, 1440, 1920)** | 3 приподнятые карточки со скруглением ounded-2xl\ на теплом пергаменте; ботанический водяной знак-гравюра и слоган *«Больше, чем общение с поддержкой»*; входящие белые пузыри с аватаркой; исходящие оливково-шалфейные (\#E8EDE4\ / \#2F3A32\) пузыри с двойной галочкой; карточка PDF-вложения; чипсы быстрых ответов; бронзово-коньячная кнопка отправки (\#9A743D\); вертикальная карточка контакта (колонка 3) со сводкой AI, статусом VIP и быстрыми кнопками CRM | PASS |
-| \Коммуникация планшет горизонт.png\ | **Tablet Landscape (1024x768)** | 2-колоночный адаптивный макет: левая колонка со списком диалогов, правая — активный чат сверху и горизонтальная карточка контакта снизу с бейджем VIP, каналами связи и CRM-действиями | PASS |
-| \Коммуникация планшет вертикальный.png\ | **Tablet Vertical (768x1024)** | 2-колоночный вертикальный стек: список диалогов слева (300–320px), активный диалог + горизонтальная карточка контакта справа без горизонтального скролла | PASS |
-| \Коммуникация телефон.png\ | **Mobile (360, 390, 430)** | 1-колоночный 3-уровневый drilldown: **Уровень 1** (список диалогов) -> **Уровень 2** (активный диалог с нижней тизер-плашкой профиля) -> **Уровень 3** (полная карточка контакта со сделками/задачами); фиксированный инпут над нижней навигацией (\pb-16\ / touch targets >= 44x44px) | PASS |
+| `Коммуникация.png` | **Desktop (1280, 1440, 1920)** | 3 приподнятые карточки (`rounded-2xl`) на пергаментном фоне; водяной знак и слоган *«Больше, чем общение с поддержкой»*; входящие светлые пузыри с аватаром; исходящие пузыри с двойной галочкой; карточка PDF-вложения; чипсы быстрых ответов; бронзово-золотая кнопка отправки; вертикальная карточка контакта справа (колонка 3) с AI-сводкой, статусом VIP и CRM-действиями. | **PASS** |
+| `Коммуникация планшет горизонт.png` | **Tablet Landscape (1024x768)** | 3-колоночный или просторный 2-колоночный макет с полноразмерным чатом без горизонтального сжатия. | **PASS** |
+| `Коммуникация планшет вертикальный.png` | **Tablet Vertical (768x1024)** | 2-колоночный макет: список диалогов слева (~280-300px), активный диалог справа. Карточка контакта открывается через правый `Drawer`. | **PASS** |
+| `Коммуникация телефон.png` | **Mobile (360, 390, 430)** | 1-колоночный drilldown: **Уровень 1** (список диалогов) → **Уровень 2** (активный диалог с нижней плашкой контакта) → **Уровень 3** (карточка контакта); фиксированный инпут над навигацией (`pb-16` / touch targets ≥ 44×44px). | **PASS** |
 
 ---
 
-## 2. Матрица скриншотов (8 Viewports x 3 Themes = 24 Screenshots)
+## 3. Матрица скриншотов (8 Viewports × 3 Themes = 24 Screenshots)
 
-Все скриншоты сохранены в директории \rtifacts/visual-qa/\ с метаданными в \rtifacts/visual-qa/manifest.json\:
+Все скриншоты сохранены в директории `artifacts/visual-qa/` с манифестом `artifacts/visual-qa/manifest.json`:
 
-### Parchment Light (Светлый пергамент — основная тема V3)
-1. \rtifacts/visual-qa/parchment-light-mobile-360.png\ (360x800)
-2. \rtifacts/visual-qa/parchment-light-mobile-390.png\ (390x844)
-3. \rtifacts/visual-qa/parchment-light-mobile-430.png\ (430x932)
-4. \rtifacts/visual-qa/parchment-light-tablet-768.png\ (768x1024)
-5. \rtifacts/visual-qa/parchment-light-tablet-1024.png\ (1024x768)
-6. \rtifacts/visual-qa/parchment-light-desktop-1280.png\ (1280x800)
-7. \rtifacts/visual-qa/parchment-light-desktop-1440.png\ (1440x900)
-8. \rtifacts/visual-qa/parchment-light-desktop-1920.png\ (1920x1080)
+### 3.1. Parchment Light (Светлый пергамент — основная тема V3)
+1. [parchment-light-mobile-360.png](artifacts/visual-qa/parchment-light-mobile-360.png) (360×800)
+2. [parchment-light-mobile-390.png](artifacts/visual-qa/parchment-light-mobile-390.png) (390×844)
+3. [parchment-light-mobile-430.png](artifacts/visual-qa/parchment-light-mobile-430.png) (430×932)
+4. [parchment-light-tablet-768.png](artifacts/visual-qa/parchment-light-tablet-768.png) (768×1024)
+5. [parchment-light-tablet-1024.png](artifacts/visual-qa/parchment-light-tablet-1024.png) (1024×768)
+6. [parchment-light-desktop-1280.png](artifacts/visual-qa/parchment-light-desktop-1280.png) (1280×800)
+7. [parchment-light-desktop-1440.png](artifacts/visual-qa/parchment-light-desktop-1440.png) (1440×900)
+8. [parchment-light-desktop-1920.png](artifacts/visual-qa/parchment-light-desktop-1920.png) (1920×1080)
 
-### Noble Green (Благородный зеленый / мягкая тема V3)
-1. \rtifacts/visual-qa/noble-green-mobile-360.png\ (360x800)
-2. \rtifacts/visual-qa/noble-green-mobile-390.png\ (390x844)
-3. \rtifacts/visual-qa/noble-green-mobile-430.png\ (430x932)
-4. \rtifacts/visual-qa/noble-green-tablet-768.png\ (768x1024)
-5. \rtifacts/visual-qa/noble-green-tablet-1024.png\ (1024x768)
-6. \rtifacts/visual-qa/noble-green-desktop-1280.png\ (1280x800)
-7. \rtifacts/visual-qa/noble-green-desktop-1440.png\ (1440x900)
-8. \rtifacts/visual-qa/noble-green-desktop-1920.png\ (1920x1080)
+### 3.2. Noble Green (Благородный зелёный / фирменная тема V3)
+1. [noble-green-mobile-360.png](artifacts/visual-qa/noble-green-mobile-360.png) (360×800)
+2. [noble-green-mobile-390.png](artifacts/visual-qa/noble-green-mobile-390.png) (390×844)
+3. [noble-green-mobile-430.png](artifacts/visual-qa/noble-green-mobile-430.png) (430×932)
+4. [noble-green-tablet-768.png](artifacts/visual-qa/noble-green-tablet-768.png) (768×1024)
+5. [noble-green-tablet-1024.png](artifacts/visual-qa/noble-green-tablet-1024.png) (1024×768)
+6. [noble-green-desktop-1280.png](artifacts/visual-qa/noble-green-desktop-1280.png) (1280×800)
+7. [noble-green-desktop-1440.png](artifacts/visual-qa/noble-green-desktop-1440.png) (1440×900)
+8. [noble-green-desktop-1920.png](artifacts/visual-qa/noble-green-desktop-1920.png) (1920×1080)
 
-### Graphite Forest Dark (Тёмная графитово-лесная тема V3)
-1. \rtifacts/visual-qa/graphite-forest-dark-mobile-360.png\ (360x800)
-2. \rtifacts/visual-qa/graphite-forest-dark-mobile-390.png\ (390x844)
-3. \rtifacts/visual-qa/graphite-forest-dark-mobile-430.png\ (430x932)
-4. \rtifacts/visual-qa/graphite-forest-dark-tablet-768.png\ (768x1024)
-5. \rtifacts/visual-qa/graphite-forest-dark-tablet-1024.png\ (1024x768)
-6. \rtifacts/visual-qa/graphite-forest-dark-desktop-1280.png\ (1280x800)
-7. \rtifacts/visual-qa/graphite-forest-dark-desktop-1440.png\ (1440x900)
-8. \rtifacts/visual-qa/graphite-forest-dark-desktop-1920.png\ (1920x1080)
+### 3.3. Graphite Forest Dark (Тёмная графитово-лесная тема V3)
+1. [graphite-forest-dark-mobile-360.png](artifacts/visual-qa/graphite-forest-dark-mobile-360.png) (360×800)
+2. [graphite-forest-dark-mobile-390.png](artifacts/visual-qa/graphite-forest-dark-mobile-390.png) (390×844)
+3. [graphite-forest-dark-mobile-430.png](artifacts/visual-qa/graphite-forest-dark-mobile-430.png) (430×932)
+4. [graphite-forest-dark-tablet-768.png](artifacts/visual-qa/graphite-forest-dark-tablet-768.png) (768×1024)
+5. [graphite-forest-dark-tablet-1024.png](artifacts/visual-qa/graphite-forest-dark-tablet-1024.png) (1024×768)
+6. [graphite-forest-dark-desktop-1280.png](artifacts/visual-qa/graphite-forest-dark-desktop-1280.png) (1280×800)
+7. [graphite-forest-dark-desktop-1440.png](artifacts/visual-qa/graphite-forest-dark-desktop-1440.png) (1440×900)
+8. [graphite-forest-dark-desktop-1920.png](artifacts/visual-qa/graphite-forest-dark-desktop-1920.png) (1920×1080)
 
 ---
 
-## 3. Проверенные интерактивные сценарии
+## 4. Скриншоты состояний (State Captures — 7 скриншотов)
 
-1. **Отправка сообщений:** ввод текста в инпут, отправка кнопкой или по Enter, появление исходящего пузыря оливкового цвета со статусом прочтения (двойная галочка).
-2. **Шаблоны и быстрые ответы:** клик по чипсу («Да, подготовим» и др.) мгновенно вставляет и отправляет сообщение.
-3. **AI-ассистент:** кнопка с иконкой Sparkles генерирует контекстный черновик сообщения.
-4. **CRM-интеграция:** создание сделки и задачи прямо из активного диалога и карточки контакта с отображением тоста.
-5. **Вкладки раздела:** переход по табам *Мессенджеры*, *Email*, *Каналы*, *Контакты*, *Настройки* без перезагрузки и с синхронизацией URL query parameter \?tab=\.
-6. **Отсутствие горизонтальной прокрутки:** проверено на всех разрешениях от 360px до 1920px (\scrollWidth <= clientWidth\).
+1. **Мобильный уровень 1 (Список диалогов):** [mobile-list.png](artifacts/visual-qa/mobile-list.png) — отображает только список чатов, строку поиска, быстрые фильтры и пилюли каналов.
+2. **Мобильный уровень 2 (Активный диалог):** [mobile-chat.png](artifacts/visual-qa/mobile-chat.png) — окно переписки с кнопкой возврата назад, сообщениями, полем ввода и нижней плашкой-тизером контакта.
+3. **Мобильный уровень 3 (Карточка контакта):** [mobile-contact.png](artifacts/visual-qa/mobile-contact.png) — развернутая карточка контакта со сделками CRM, задачами, AI-анализом и кнопкой «Назад к диалогу».
+4. **Планшет (Активный диалог):** [tablet-chat.png](artifacts/visual-qa/tablet-chat.png) — 2-колоночный вид: список чатов + полноразмерный диалог.
+5. **Планшет (Боковой Drawer контакта):** [tablet-contact-drawer.png](artifacts/visual-qa/tablet-contact-drawer.png) — открытый слайд-овер `Drawer` с профилем клиента поверх чата.
+6. **Десктоп (3 колонки):** [desktop-without-krona-ai.png](artifacts/visual-qa/desktop-without-krona-ai.png) — 3 полноценные карточки без боковой панели AI.
+7. **Десктоп с открытым Krona AI:** [desktop-with-krona-ai.png](artifacts/visual-qa/desktop-with-krona-ai.png) — сохранение целостности 3 колонок при выдвинутой панели оркестратора Krona AI.
+
+---
+
+## 5. Результаты автоматизированных детерминированных проверок
+
+| Тип проверки | Команда | Результат | Подробности |
+|---|---|:---:|---|
+| **E2E Visual & Responsive** | `npx playwright test e2e/13-communications-visual-and-responsive.spec.ts` | **PASS (32/32)** | Все 8 проектов (360, 390, 430, 768, 1024, 1280, 1440, 1920) прошли без ошибок (1.7m). |
+| **Unit & Integration** | `npm test` | **PASS (490/490)** | 27 тестовых файлов, включая модуль коммуникаций, без сбоев (45.8s). |
+| **Linter** | `npm run lint` | **PASS (0/0)** | 0 warnings, 0 errors на 238 файлах (`oxlint --deny-warnings`). |
+| **Type Check** | `npx tsc -b` | **PASS** | Exit code 0, строгая типизация TypeScript. |
+| **Production Build** | `npm run build` | **PASS** | Сборка Vite завершена успешно за 4.39s. |
diff --git a/artifacts/visual-qa/desktop-with-krona-ai.png b/artifacts/visual-qa/desktop-with-krona-ai.png
new file mode 100644
index 0000000..c3488bc
Binary files /dev/null and b/artifacts/visual-qa/desktop-with-krona-ai.png differ
diff --git a/artifacts/visual-qa/desktop-without-krona-ai.png b/artifacts/visual-qa/desktop-without-krona-ai.png
new file mode 100644
index 0000000..e547f5e
Binary files /dev/null and b/artifacts/visual-qa/desktop-without-krona-ai.png differ
diff --git a/artifacts/visual-qa/graphite-forest-dark-desktop-1280.png b/artifacts/visual-qa/graphite-forest-dark-desktop-1280.png
index 9a8c85b..a6acb64 100644
Binary files a/artifacts/visual-qa/graphite-forest-dark-desktop-1280.png and b/artifacts/visual-qa/graphite-forest-dark-desktop-1280.png differ
diff --git a/artifacts/visual-qa/graphite-forest-dark-desktop-1440.png b/artifacts/visual-qa/graphite-forest-dark-desktop-1440.png
index 981eb82..5533e10 100644
Binary files a/artifacts/visual-qa/graphite-forest-dark-desktop-1440.png and b/artifacts/visual-qa/graphite-forest-dark-desktop-1440.png differ
diff --git a/artifacts/visual-qa/graphite-forest-dark-desktop-1920.png b/artifacts/visual-qa/graphite-forest-dark-desktop-1920.png
index 0c32f44..54de580 100644
Binary files a/artifacts/visual-qa/graphite-forest-dark-desktop-1920.png and b/artifacts/visual-qa/graphite-forest-dark-desktop-1920.png differ
diff --git a/artifacts/visual-qa/graphite-forest-dark-mobile-360.png b/artifacts/visual-qa/graphite-forest-dark-mobile-360.png
index 2dd8fff..3702b80 100644
Binary files a/artifacts/visual-qa/graphite-forest-dark-mobile-360.png and b/artifacts/visual-qa/graphite-forest-dark-mobile-360.png differ
diff --git a/artifacts/visual-qa/graphite-forest-dark-mobile-390.png b/artifacts/visual-qa/graphite-forest-dark-mobile-390.png
index f22d9bd..296d4b6 100644
Binary files a/artifacts/visual-qa/graphite-forest-dark-mobile-390.png and b/artifacts/visual-qa/graphite-forest-dark-mobile-390.png differ
diff --git a/artifacts/visual-qa/graphite-forest-dark-mobile-430.png b/artifacts/visual-qa/graphite-forest-dark-mobile-430.png
index 903ce20..4761e7e 100644
Binary files a/artifacts/visual-qa/graphite-forest-dark-mobile-430.png and b/artifacts/visual-qa/graphite-forest-dark-mobile-430.png differ
diff --git a/artifacts/visual-qa/graphite-forest-dark-tablet-1024.png b/artifacts/visual-qa/graphite-forest-dark-tablet-1024.png
index 3c9dca0..f017e54 100644
Binary files a/artifacts/visual-qa/graphite-forest-dark-tablet-1024.png and b/artifacts/visual-qa/graphite-forest-dark-tablet-1024.png differ
diff --git a/artifacts/visual-qa/graphite-forest-dark-tablet-768.png b/artifacts/visual-qa/graphite-forest-dark-tablet-768.png
index eaadc6d..1936151 100644
Binary files a/artifacts/visual-qa/graphite-forest-dark-tablet-768.png and b/artifacts/visual-qa/graphite-forest-dark-tablet-768.png differ
diff --git a/artifacts/visual-qa/manifest.json b/artifacts/visual-qa/manifest.json
index 8f99a7b..51c3904 100644
--- a/artifacts/visual-qa/manifest.json
+++ b/artifacts/visual-qa/manifest.json
@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-09-11T10:43:18.547Z",
+  "generatedAt": "2026-09-11T12:25:16.253Z",
   "module": "communications",
   "version": "v3.0",
   "referenceMockups": [
@@ -64,149 +64,191 @@
     }
   ],
   "screenshots": [
+    {
+      "filename": "desktop-with-krona-ai.png",
+      "theme": "state-capture",
+      "viewport": "desktop-with-krona-ai",
+      "capturedAt": "2026-09-11T12:22:13.311Z"
+    },
+    {
+      "filename": "desktop-without-krona-ai.png",
+      "theme": "state-capture",
+      "viewport": "desktop-without-krona-ai",
+      "capturedAt": "2026-09-11T12:22:12.416Z"
+    },
     {
       "filename": "graphite-forest-dark-desktop-1280.png",
       "theme": "graphite-forest-dark",
       "viewport": "desktop-1280",
-      "capturedAt": "2026-09-11T10:42:51.480Z"
+      "capturedAt": "2026-09-11T12:21:52.645Z"
     },
     {
       "filename": "graphite-forest-dark-desktop-1440.png",
       "theme": "graphite-forest-dark",
       "viewport": "desktop-1440",
-      "capturedAt": "2026-09-11T10:43:01.405Z"
+      "capturedAt": "2026-09-11T12:22:07.332Z"
     },
     {
       "filename": "graphite-forest-dark-desktop-1920.png",
       "theme": "graphite-forest-dark",
       "viewport": "desktop-1920",
-      "capturedAt": "2026-09-11T10:43:12.260Z"
+      "capturedAt": "2026-09-11T12:22:22.152Z"
     },
     {
       "filename": "graphite-forest-dark-mobile-360.png",
       "theme": "graphite-forest-dark",
       "viewport": "mobile-360",
-      "capturedAt": "2026-09-11T10:41:51.625Z"
+      "capturedAt": "2026-09-11T12:20:51.014Z"
     },
     {
       "filename": "graphite-forest-dark-mobile-390.png",
       "theme": "graphite-forest-dark",
       "viewport": "mobile-390",
-      "capturedAt": "2026-09-11T10:42:04.608Z"
+      "capturedAt": "2026-09-11T12:21:02.940Z"
     },
     {
       "filename": "graphite-forest-dark-mobile-430.png",
       "theme": "graphite-forest-dark",
       "viewport": "mobile-430",
-      "capturedAt": "2026-09-11T10:42:15.717Z"
+      "capturedAt": "2026-09-11T12:21:15.107Z"
     },
     {
       "filename": "graphite-forest-dark-tablet-1024.png",
       "theme": "graphite-forest-dark",
       "viewport": "tablet-1024",
-      "capturedAt": "2026-09-11T10:42:41.564Z"
+      "capturedAt": "2026-09-11T12:21:40.394Z"
     },
     {
       "filename": "graphite-forest-dark-tablet-768.png",
       "theme": "graphite-forest-dark",
       "viewport": "tablet-768",
-      "capturedAt": "2026-09-11T10:42:27.167Z"
+      "capturedAt": "2026-09-11T12:21:27.469Z"
+    },
+    {
+      "filename": "mobile-chat.png",
+      "theme": "state-capture",
+      "viewport": "mobile-chat",
+      "capturedAt": "2026-09-11T12:25:15.761Z"
+    },
+    {
+      "filename": "mobile-contact.png",
+      "theme": "state-capture",
+      "viewport": "mobile-contact",
+      "capturedAt": "2026-09-11T12:25:15.982Z"
+    },
+    {
+      "filename": "mobile-list.png",
+      "theme": "state-capture",
+      "viewport": "mobile-list",
+      "capturedAt": "2026-09-11T12:25:15.531Z"
     },
     {
       "filename": "noble-green-desktop-1280.png",
       "theme": "noble-green",
       "viewport": "desktop-1280",
-      "capturedAt": "2026-09-11T10:42:51.030Z"
+      "capturedAt": "2026-09-11T12:21:52.093Z"
     },
     {
       "filename": "noble-green-desktop-1440.png",
       "theme": "noble-green",
       "viewport": "desktop-1440",
-      "capturedAt": "2026-09-11T10:43:00.944Z"
+      "capturedAt": "2026-09-11T12:22:06.701Z"
     },
     {
       "filename": "noble-green-desktop-1920.png",
       "theme": "noble-green",
       "viewport": "desktop-1920",
-      "capturedAt": "2026-09-11T10:43:11.630Z"
+      "capturedAt": "2026-09-11T12:22:21.509Z"
     },
     {
       "filename": "noble-green-mobile-360.png",
       "theme": "noble-green",
       "viewport": "mobile-360",
-      "capturedAt": "2026-09-11T10:41:51.173Z"
+      "capturedAt": "2026-09-11T12:20:50.611Z"
     },
     {
       "filename": "noble-green-mobile-390.png",
       "theme": "noble-green",
       "viewport": "mobile-390",
-      "capturedAt": "2026-09-11T10:42:04.141Z"
+      "capturedAt": "2026-09-11T12:21:02.534Z"
     },
     {
       "filename": "noble-green-mobile-430.png",
       "theme": "noble-green",
       "viewport": "mobile-430",
-      "capturedAt": "2026-09-11T10:42:15.277Z"
+      "capturedAt": "2026-09-11T12:21:14.716Z"
     },
     {
       "filename": "noble-green-tablet-1024.png",
       "theme": "noble-green",
       "viewport": "tablet-1024",
-      "capturedAt": "2026-09-11T10:42:41.113Z"
+      "capturedAt": "2026-09-11T12:21:39.851Z"
     },
     {
       "filename": "noble-green-tablet-768.png",
       "theme": "noble-green",
       "viewport": "tablet-768",
-      "capturedAt": "2026-09-11T10:42:26.644Z"
+      "capturedAt": "2026-09-11T12:21:26.941Z"
     },
     {
       "filename": "parchment-light-desktop-1280.png",
       "theme": "parchment-light",
       "viewport": "desktop-1280",
-      "capturedAt": "2026-09-11T10:42:50.501Z"
+      "capturedAt": "2026-09-11T12:21:51.543Z"
     },
     {
       "filename": "parchment-light-desktop-1440.png",
       "theme": "parchment-light",
       "viewport": "desktop-1440",
-      "capturedAt": "2026-09-11T10:43:00.457Z"
+      "capturedAt": "2026-09-11T12:22:06.120Z"
     },
     {
       "filename": "parchment-light-desktop-1920.png",
       "theme": "parchment-light",
       "viewport": "desktop-1920",
-      "capturedAt": "2026-09-11T10:43:10.935Z"
+      "capturedAt": "2026-09-11T12:22:20.870Z"
     },
     {
       "filename": "parchment-light-mobile-360.png",
       "theme": "parchment-light",
       "viewport": "mobile-360",
-      "capturedAt": "2026-09-11T10:41:50.743Z"
+      "capturedAt": "2026-09-11T12:20:50.223Z"
     },
     {
       "filename": "parchment-light-mobile-390.png",
       "theme": "parchment-light",
       "viewport": "mobile-390",
-      "capturedAt": "2026-09-11T10:42:03.687Z"
+      "capturedAt": "2026-09-11T12:21:02.124Z"
     },
     {
       "filename": "parchment-light-mobile-430.png",
       "theme": "parchment-light",
       "viewport": "mobile-430",
-      "capturedAt": "2026-09-11T10:42:14.847Z"
+      "capturedAt": "2026-09-11T12:21:14.326Z"
     },
     {
       "filename": "parchment-light-tablet-1024.png",
       "theme": "parchment-light",
       "viewport": "tablet-1024",
-      "capturedAt": "2026-09-11T10:42:40.633Z"
+      "capturedAt": "2026-09-11T12:21:39.371Z"
     },
     {
       "filename": "parchment-light-tablet-768.png",
       "theme": "parchment-light",
       "viewport": "tablet-768",
-      "capturedAt": "2026-09-11T10:42:26.175Z"
+      "capturedAt": "2026-09-11T12:21:26.400Z"
+    },
+    {
+      "filename": "tablet-chat.png",
+      "theme": "state-capture",
+      "viewport": "tablet-chat",
+      "capturedAt": "2026-09-11T12:21:31.840Z"
+    },
+    {
+      "filename": "tablet-contact-drawer.png",
+      "theme": "state-capture",
+      "viewport": "tablet-contact-drawer",
+      "capturedAt": "2026-09-11T12:21:32.462Z"
     }
   ]
 }
\ No newline at end of file
diff --git a/artifacts/visual-qa/mobile-chat.png b/artifacts/visual-qa/mobile-chat.png
new file mode 100644
index 0000000..ef3aacb
Binary files /dev/null and b/artifacts/visual-qa/mobile-chat.png differ
diff --git a/artifacts/visual-qa/mobile-contact.png b/artifacts/visual-qa/mobile-contact.png
new file mode 100644
index 0000000..9839708
Binary files /dev/null and b/artifacts/visual-qa/mobile-contact.png differ
diff --git a/artifacts/visual-qa/mobile-list.png b/artifacts/visual-qa/mobile-list.png
new file mode 100644
index 0000000..31bcaad
Binary files /dev/null and b/artifacts/visual-qa/mobile-list.png differ
diff --git a/artifacts/visual-qa/noble-green-desktop-1280.png b/artifacts/visual-qa/noble-green-desktop-1280.png
index 93793c6..a050904 100644
Binary files a/artifacts/visual-qa/noble-green-desktop-1280.png and b/artifacts/visual-qa/noble-green-desktop-1280.png differ
diff --git a/artifacts/visual-qa/noble-green-desktop-1440.png b/artifacts/visual-qa/noble-green-desktop-1440.png
index 2bbbafe..5ce5049 100644
Binary files a/artifacts/visual-qa/noble-green-desktop-1440.png and b/artifacts/visual-qa/noble-green-desktop-1440.png differ
diff --git a/artifacts/visual-qa/noble-green-desktop-1920.png b/artifacts/visual-qa/noble-green-desktop-1920.png
index f40a2cf..c9e0e2e 100644
Binary files a/artifacts/visual-qa/noble-green-desktop-1920.png and b/artifacts/visual-qa/noble-green-desktop-1920.png differ
diff --git a/artifacts/visual-qa/noble-green-mobile-360.png b/artifacts/visual-qa/noble-green-mobile-360.png
index ee4ca41..2bd0c31 100644
Binary files a/artifacts/visual-qa/noble-green-mobile-360.png and b/artifacts/visual-qa/noble-green-mobile-360.png differ
diff --git a/artifacts/visual-qa/noble-green-mobile-390.png b/artifacts/visual-qa/noble-green-mobile-390.png
index d2cdac2..51ec7ff 100644
Binary files a/artifacts/visual-qa/noble-green-mobile-390.png and b/artifacts/visual-qa/noble-green-mobile-390.png differ
diff --git a/artifacts/visual-qa/noble-green-mobile-430.png b/artifacts/visual-qa/noble-green-mobile-430.png
index 26c93d0..8557b89 100644
Binary files a/artifacts/visual-qa/noble-green-mobile-430.png and b/artifacts/visual-qa/noble-green-mobile-430.png differ
diff --git a/artifacts/visual-qa/noble-green-tablet-1024.png b/artifacts/visual-qa/noble-green-tablet-1024.png
index 8e5c5ac..e403f88 100644
Binary files a/artifacts/visual-qa/noble-green-tablet-1024.png and b/artifacts/visual-qa/noble-green-tablet-1024.png differ
diff --git a/artifacts/visual-qa/noble-green-tablet-768.png b/artifacts/visual-qa/noble-green-tablet-768.png
index ef3418a..c8d87e7 100644
Binary files a/artifacts/visual-qa/noble-green-tablet-768.png and b/artifacts/visual-qa/noble-green-tablet-768.png differ
diff --git a/artifacts/visual-qa/parchment-light-desktop-1280.png b/artifacts/visual-qa/parchment-light-desktop-1280.png
index f915e67..ee4c0ca 100644
Binary files a/artifacts/visual-qa/parchment-light-desktop-1280.png and b/artifacts/visual-qa/parchment-light-desktop-1280.png differ
diff --git a/artifacts/visual-qa/parchment-light-desktop-1440.png b/artifacts/visual-qa/parchment-light-desktop-1440.png
index 1f39dc8..57c61ad 100644
Binary files a/artifacts/visual-qa/parchment-light-desktop-1440.png and b/artifacts/visual-qa/parchment-light-desktop-1440.png differ
diff --git a/artifacts/visual-qa/parchment-light-desktop-1920.png b/artifacts/visual-qa/parchment-light-desktop-1920.png
index 14cc8da..de8ebc5 100644
Binary files a/artifacts/visual-qa/parchment-light-desktop-1920.png and b/artifacts/visual-qa/parchment-light-desktop-1920.png differ
diff --git a/artifacts/visual-qa/parchment-light-mobile-360.png b/artifacts/visual-qa/parchment-light-mobile-360.png
index 3f574f7..13620b6 100644
Binary files a/artifacts/visual-qa/parchment-light-mobile-360.png and b/artifacts/visual-qa/parchment-light-mobile-360.png differ
diff --git a/artifacts/visual-qa/parchment-light-mobile-390.png b/artifacts/visual-qa/parchment-light-mobile-390.png
index 390e0b1..4c9dabe 100644
Binary files a/artifacts/visual-qa/parchment-light-mobile-390.png and b/artifacts/visual-qa/parchment-light-mobile-390.png differ
diff --git a/artifacts/visual-qa/parchment-light-mobile-430.png b/artifacts/visual-qa/parchment-light-mobile-430.png
index 25caa8f..c581760 100644
Binary files a/artifacts/visual-qa/parchment-light-mobile-430.png and b/artifacts/visual-qa/parchment-light-mobile-430.png differ
diff --git a/artifacts/visual-qa/parchment-light-tablet-1024.png b/artifacts/visual-qa/parchment-light-tablet-1024.png
index 077f59a..bf0419e 100644
Binary files a/artifacts/visual-qa/parchment-light-tablet-1024.png and b/artifacts/visual-qa/parchment-light-tablet-1024.png differ
diff --git a/artifacts/visual-qa/parchment-light-tablet-768.png b/artifacts/visual-qa/parchment-light-tablet-768.png
index 7bb56d1..8182c24 100644
Binary files a/artifacts/visual-qa/parchment-light-tablet-768.png and b/artifacts/visual-qa/parchment-light-tablet-768.png differ
diff --git a/artifacts/visual-qa/tablet-chat.png b/artifacts/visual-qa/tablet-chat.png
new file mode 100644
index 0000000..b284081
Binary files /dev/null and b/artifacts/visual-qa/tablet-chat.png differ
diff --git a/artifacts/visual-qa/tablet-contact-drawer.png b/artifacts/visual-qa/tablet-contact-drawer.png
new file mode 100644
index 0000000..71db6f5
Binary files /dev/null and b/artifacts/visual-qa/tablet-contact-drawer.png differ
diff --git a/e2e/13-communications-visual-and-responsive.spec.ts b/e2e/13-communications-visual-and-responsive.spec.ts
index dad5801..211dc14 100644
--- a/e2e/13-communications-visual-and-responsive.spec.ts
+++ b/e2e/13-communications-visual-and-responsive.spec.ts
@@ -6,6 +6,7 @@ const THEMES = ['parchment-light', 'noble-green', 'graphite-forest-dark'] as con
 
 test.describe('Scenario 13: Communications Visual & Responsive Design System V3 Suite', () => {
   test.beforeEach(async ({ page }) => {
+    test.setTimeout(60000);
     // Navigate directly to Communications module
     await page.goto('/communications', { waitUntil: 'domcontentloaded' });
     await expect(page.locator('h1', { hasText: 'Коммуникации' })).toBeVisible({ timeout: 15000 });
@@ -43,11 +44,22 @@ test.describe('Scenario 13: Communications Visual & Responsive Design System V3
   });
 
   test('2. Header, Slogan Watermark, and Channel Switcher validation', async ({ page }) => {
+    const vp = page.viewportSize();
+    const isMobile = (vp?.width ?? 1200) < 640;
+    const isDesktop = (vp?.width ?? 1200) >= 1024;
+
     // Check main header
     await expect(page.locator('h1', { hasText: 'Коммуникации' })).toBeVisible();
-    await expect(
-      page.locator('text=Все сообщения, почта и каналы компании в одном пространстве')
-    ).toBeVisible();
+
+    if (!isMobile) {
+      await expect(
+        page.locator('text=Все сообщения, почта и каналы компании в одном пространстве')
+      ).toBeVisible();
+    }
+
+    if (isDesktop) {
+      await expect(page.locator('text=Больше, чем общение с поддержкой')).toBeVisible();
+    }
 
     // Check all 5 tabs
     await expect(page.getByRole('tab', { name: /мессенджеры/i })).toBeVisible();
@@ -63,19 +75,49 @@ test.describe('Scenario 13: Communications Visual & Responsive Design System V3
     await expect(page.getByRole('button', { name: /vk.*6/i })).toBeVisible();
     await expect(page.getByRole('button', { name: /max.*4/i })).toBeVisible();
     await expect(page.getByRole('button', { name: /email.*10/i })).toBeVisible();
-    await expect(page.getByRole('button', { name: /подключить/i })).toBeVisible();
-  });
-
-  test('3. Responsive layout behavior and drill-down flow', async ({ page, viewport }) => {
-    const isMobile = viewport && viewport.width < 768;
-    const isTablet = viewport && viewport.width >= 768 && viewport.width < 1280;
-    const isDesktop = viewport && viewport.width >= 1280;
 
     if (isMobile) {
-      // Mobile drilldown check: Level 1 (List) -> Level 2 (Chat) -> Level 3 (Contact)
+      await expect(page.getByRole('button', { name: /подключить канал/i })).toBeVisible();
+    } else {
+      await expect(page.getByRole('button', { name: /подключить/i })).toBeVisible();
+    }
+  });
+
+  test('3. Responsive layout behavior, geometric assertions and state screenshots', async ({
+    page,
+  }, testInfo) => {
+    const projectName = testInfo.project.name;
+    const artifactsDir = path.resolve(process.cwd(), 'artifacts/visual-qa');
+    if (!fs.existsSync(artifactsDir)) {
+      fs.mkdirSync(artifactsDir, { recursive: true });
+    }
+
+    const layoutMode = await page.locator('[data-layout-mode]').getAttribute('data-layout-mode');
+    const isMobile = layoutMode === 'compact';
+    const isTablet = layoutMode === 'medium';
+    const isDesktop = layoutMode === 'wide';
+
+    if (isMobile) {
+      // 1. Mobile drilldown check: Level 1 (List) -> Level 2 (Chat) -> Level 3 (Contact)
       const chatList = page.locator('section[aria-label="Список диалогов"]');
       await expect(chatList).toBeVisible();
 
+      // State Screenshot 1: Mobile List
+      if (projectName === 'mobile-390' || projectName === 'mobile-360') {
+        await page.screenshot({
+          path: path.join(artifactsDir, 'mobile-list.png'),
+          fullPage: false,
+        });
+      }
+
+      // Check single-row tabs with scroll
+      const tabsList = page.locator('div[role="tablist"]');
+      const tabsBox = await tabsList.boundingBox();
+      expect(tabsBox).not.toBeNull();
+      if (tabsBox) {
+        expect(tabsBox.height).toBeLessThanOrEqual(56);
+      }
+
       // Click first conversation to drill down to Level 2 (Chat)
       const firstChat = chatList.locator('button').filter({ hasText: 'Иван Петров' }).first();
       await firstChat.click();
@@ -83,6 +125,16 @@ test.describe('Scenario 13: Communications Visual & Responsive Design System V3
       // Active chat is now visible
       const activeChat = page.locator('section[aria-label="Активный диалог"]');
       await expect(activeChat).toBeVisible();
+      // Chat list is NOT visible in compact mode
+      await expect(chatList).toBeHidden();
+
+      // State Screenshot 2: Mobile Chat
+      if (projectName === 'mobile-390' || projectName === 'mobile-360') {
+        await page.screenshot({
+          path: path.join(artifactsDir, 'mobile-chat.png'),
+          fullPage: false,
+        });
+      }
 
       // Check Back to list button
       const backToListBtn = activeChat.locator('button[aria-label="Назад к списку чатов"]');
@@ -92,10 +144,28 @@ test.describe('Scenario 13: Communications Visual & Responsive Design System V3
       const profileTeaserBtn = activeChat.locator('button[aria-label="Открыть карточку контакта"]');
       await expect(profileTeaserBtn).toBeVisible();
 
+      // Check message composer is positioned within viewport
+      const composer = activeChat.locator('form');
+      await expect(composer).toBeVisible();
+      const composerBox = await composer.boundingBox();
+      const vp = page.viewportSize();
+      if (composerBox && vp) {
+        expect(composerBox.y + composerBox.height).toBeLessThanOrEqual(vp.height + 10);
+      }
+
       // Click profile teaser to drill down to Level 3 (Contact)
       await profileTeaserBtn.click();
       const mobileContactCard = page.locator('section[aria-label="Карточка контакта"]');
       await expect(mobileContactCard).toBeVisible();
+      await expect(activeChat).toBeHidden();
+
+      // State Screenshot 3: Mobile Contact
+      if (projectName === 'mobile-390' || projectName === 'mobile-360') {
+        await page.screenshot({
+          path: path.join(artifactsDir, 'mobile-contact.png'),
+          fullPage: false,
+        });
+      }
 
       // Check Back to chat button in Level 3
       const backToChatBtn = mobileContactCard.locator('button[aria-label="Назад к диалогу"]');
@@ -115,18 +185,62 @@ test.describe('Scenario 13: Communications Visual & Responsive Design System V3
       });
       expect(hasHorizontalScroll).toBe(false);
     } else if (isTablet) {
-      // Tablet (768 vertical and 1024 landscape): 2 columns (Chat list on left, Chat + Horizontal Contact Card on right)
+      // 2. Tablet: 2 columns (Chat list + Active Chat). Contact card opens via slide-over Drawer.
       const chatList = page.locator('section[aria-label="Список диалогов"]');
       await expect(chatList).toBeVisible();
 
       const activeChat = page.locator('section[aria-label="Активный диалог"]');
       await expect(activeChat).toBeVisible();
 
-      const horizontalContactCard = page.locator('aside[aria-label="Карточка контакта планшет"]');
-      await expect(horizontalContactCard).toBeVisible();
-      await expect(horizontalContactCard.locator('text=VIP')).toBeVisible();
+      // Verify Chat width >= 320px
+      const chatBox = await activeChat.boundingBox();
+      expect(chatBox).not.toBeNull();
+      if (chatBox) {
+        expect(chatBox.width).toBeGreaterThanOrEqual(320);
+      }
+
+      // Verify no squished under-chat horizontal card exists
+      const squishedCard = page.locator('aside[aria-label="Карточка контакта планшет"]');
+      await expect(squishedCard).toHaveCount(0);
+
+      // State Screenshot 4: Tablet Chat
+      if (projectName === 'tablet-768' || projectName === 'tablet-1024') {
+        await page.screenshot({
+          path: path.join(artifactsDir, 'tablet-chat.png'),
+          fullPage: false,
+        });
+      }
+
+      // Open slide-over Drawer via contact button in chat header
+      const openContactBtn = activeChat.locator('button[aria-label="Открыть контакт"]');
+      await expect(openContactBtn).toBeVisible();
+      await openContactBtn.click();
+
+      // Drawer is open
+      const drawer = page.locator('div[role="dialog"]');
+      await expect(drawer).toBeVisible();
+      await expect(drawer.locator('text=Карточка контакта')).toBeVisible();
+      await expect(drawer.locator('text=Иван Петров').first()).toBeVisible();
+      await expect(drawer.locator('text=VIP')).toBeVisible();
+
+      // State Screenshot 5: Tablet Contact Drawer
+      if (projectName === 'tablet-768' || projectName === 'tablet-1024') {
+        await page.screenshot({
+          path: path.join(artifactsDir, 'tablet-contact-drawer.png'),
+          fullPage: false,
+        });
+      }
+
+      // Close Drawer
+      const closeDrawerBtn = drawer.locator('button[aria-label="Закрыть"]').first();
+      if (await closeDrawerBtn.isVisible()) {
+        await closeDrawerBtn.click();
+      } else {
+        await page.keyboard.press('Escape');
+      }
+      await expect(drawer).toBeHidden();
     } else if (isDesktop) {
-      // Desktop: 3 separate elevated columns side-by-side
+      // 3. Desktop: 3 columns (Chat list + Active Chat + Aside Contact card)
       const chatList = page.locator('section[aria-label="Список диалогов"]');
       await expect(chatList).toBeVisible();
 
@@ -137,12 +251,48 @@ test.describe('Scenario 13: Communications Visual & Responsive Design System V3
       await expect(verticalContactCard).toBeVisible();
       await expect(verticalContactCard.locator('text=Иван Петров')).toBeVisible();
       await expect(verticalContactCard.locator('text=VIP')).toBeVisible();
+
+      // Test tab inside Contact Card
+      await verticalContactCard.getByRole('button', { name: 'AI-сводка' }).click();
       await expect(verticalContactCard.locator('text=✦ AI-сводка')).toBeVisible();
+
+      // Verify scrollY is 0
+      const scrollY = await page.evaluate(() => window.scrollY);
+      expect(scrollY).toBe(0);
+
+      // State Screenshot 6: Desktop without Krona AI
+      if (projectName === 'desktop-1440') {
+        await page.screenshot({
+          path: path.join(artifactsDir, 'desktop-without-krona-ai.png'),
+          fullPage: false,
+        });
+      }
+
+      // Open Krona AI drawer
+      const aiBtn = page.locator('button[title="Krona AI — Бизнес-оркестратор"]');
+      if (await aiBtn.isVisible()) {
+        await aiBtn.click();
+        const aiDrawer = page.locator('text=✦ Krona AI — Бизнес-оркестратор');
+        await expect(aiDrawer).toBeVisible();
+
+        // State Screenshot 7: Desktop with Krona AI
+        if (projectName === 'desktop-1440') {
+          await page.screenshot({
+            path: path.join(artifactsDir, 'desktop-with-krona-ai.png'),
+            fullPage: false,
+          });
+        }
+
+        // Close AI drawer
+        await page.keyboard.press('Escape');
+        await page.waitForTimeout(300);
+      }
     }
   });
 
-  test('4. Interactive messaging, quick replies, and tab navigation', async ({ page, viewport }) => {
-    const isMobile = viewport && viewport.width < 768;
+  test('4. Interactive messaging, quick replies, and tab navigation', async ({ page }) => {
+    const layoutMode = await page.locator('[data-layout-mode]').getAttribute('data-layout-mode');
+    const isMobile = layoutMode === 'compact';
 
     if (isMobile) {
       // Select chat first on mobile
@@ -233,8 +383,12 @@ test.describe('Scenario 13: Communications Visual & Responsive Design System V3
           ? 'graphite-forest-dark'
           : file.startsWith('noble-green')
           ? 'noble-green'
-          : 'parchment-light',
-        viewport: file.replace(/^(graphite-forest-dark|noble-green|parchment-light)-/, '').replace('.png', ''),
+          : file.startsWith('parchment-light')
+          ? 'parchment-light'
+          : 'state-capture',
+        viewport: file
+          .replace(/^(graphite-forest-dark|noble-green|parchment-light)-/, '')
+          .replace('.png', ''),
         capturedAt: fs.statSync(path.join(artifactsDir, file)).mtime.toISOString(),
       })),
     };
diff --git a/public/avatars/alexander.svg b/public/avatars/alexander.svg
new file mode 100644
index 0000000..212196d
--- /dev/null
+++ b/public/avatars/alexander.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#E9E5DC"/>
+  
+        <circle cx="32" cy="24" r="14" fill="#433A30"/>
+        <path d="M16 52 C16 40, 24 36, 32 36 C40 36, 48 40, 48 52 Z" fill="#433A30"/>
+        <circle cx="27" cy="23" r="1.8" fill="#E9E5DC"/>
+        <circle cx="37" cy="23" r="1.8" fill="#E9E5DC"/>
+        <path d="M28 29 Q32 32 36 29" stroke="#E9E5DC" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+        
+</svg>
diff --git a/public/avatars/dmitry.svg b/public/avatars/dmitry.svg
new file mode 100644
index 0000000..4e31058
--- /dev/null
+++ b/public/avatars/dmitry.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#E8E3DA"/>
+  
+        <circle cx="32" cy="24" r="14" fill="#3B372F"/>
+        <path d="M16 52 C16 40, 24 36, 32 36 C40 36, 48 40, 48 52 Z" fill="#3B372F"/>
+        <circle cx="27" cy="23" r="1.8" fill="#E8E3DA"/>
+        <circle cx="37" cy="23" r="1.8" fill="#E8E3DA"/>
+        <path d="M28 29 Q32 32 36 29" stroke="#E8E3DA" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+        
+</svg>
diff --git a/public/avatars/elena.svg b/public/avatars/elena.svg
new file mode 100644
index 0000000..cad67d9
--- /dev/null
+++ b/public/avatars/elena.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#E8EDE6"/>
+  
+        <path d="M18 26 C18 14, 46 14, 46 26 C46 36, 42 42, 42 42 L22 42 C22 42, 18 36, 18 26 Z" fill="#477057"/>
+        <circle cx="32" cy="25" r="12" fill="#264233"/>
+        <path d="M16 54 C16 42, 24 38, 32 38 C40 38, 48 42, 48 54 Z" fill="#264233"/>
+        <circle cx="28" cy="24" r="1.8" fill="#E8EDE6"/>
+        <circle cx="36" cy="24" r="1.8" fill="#E8EDE6"/>
+        <path d="M28 30 Q32 33 36 30" stroke="#E8EDE6" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+        
+</svg>
diff --git a/public/avatars/ivan.svg b/public/avatars/ivan.svg
new file mode 100644
index 0000000..c82d3be
--- /dev/null
+++ b/public/avatars/ivan.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#EBE3D5"/>
+  
+        <circle cx="32" cy="24" r="14" fill="#2C3E35"/>
+        <path d="M16 52 C16 40, 24 36, 32 36 C40 36, 48 40, 48 52 Z" fill="#2C3E35"/>
+        <circle cx="27" cy="23" r="1.8" fill="#EBE3D5"/>
+        <circle cx="37" cy="23" r="1.8" fill="#EBE3D5"/>
+        <path d="M28 29 Q32 32 36 29" stroke="#EBE3D5" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+        
+</svg>
diff --git a/public/avatars/konstantin.svg b/public/avatars/konstantin.svg
new file mode 100644
index 0000000..bda4e0c
--- /dev/null
+++ b/public/avatars/konstantin.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#E4EBE6"/>
+  
+        <circle cx="32" cy="24" r="14" fill="#293C32"/>
+        <path d="M16 52 C16 40, 24 36, 32 36 C40 36, 48 40, 48 52 Z" fill="#293C32"/>
+        <circle cx="27" cy="23" r="1.8" fill="#E4EBE6"/>
+        <circle cx="37" cy="23" r="1.8" fill="#E4EBE6"/>
+        <path d="M28 29 Q32 32 36 29" stroke="#E4EBE6" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+        
+</svg>
diff --git a/public/avatars/maria.svg b/public/avatars/maria.svg
new file mode 100644
index 0000000..4a4ce5e
--- /dev/null
+++ b/public/avatars/maria.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#EFE8E1"/>
+  
+        <path d="M18 26 C18 14, 46 14, 46 26 C46 36, 42 42, 42 42 L22 42 C22 42, 18 36, 18 26 Z" fill="#9A5B3D"/>
+        <circle cx="32" cy="25" r="12" fill="#51372E"/>
+        <path d="M16 54 C16 42, 24 38, 32 38 C40 38, 48 42, 48 54 Z" fill="#51372E"/>
+        <circle cx="28" cy="24" r="1.8" fill="#EFE8E1"/>
+        <circle cx="36" cy="24" r="1.8" fill="#EFE8E1"/>
+        <path d="M28 30 Q32 33 36 30" stroke="#EFE8E1" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+        
+</svg>
diff --git a/public/avatars/marketing.svg b/public/avatars/marketing.svg
new file mode 100644
index 0000000..dc69216
--- /dev/null
+++ b/public/avatars/marketing.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#ECE5DE"/>
+  
+        <rect x="20" y="18" width="24" height="32" rx="3" fill="#48352A"/>
+        <rect x="24" y="22" width="4" height="4" rx="1" fill="#ECE5DE"/>
+        <rect x="36" y="22" width="4" height="4" rx="1" fill="#ECE5DE"/>
+        <rect x="24" y="30" width="4" height="4" rx="1" fill="#ECE5DE"/>
+        <rect x="36" y="30" width="4" height="4" rx="1" fill="#ECE5DE"/>
+        <rect x="28" y="40" width="8" height="10" rx="1" fill="#ECE5DE"/>
+        
+</svg>
diff --git a/public/avatars/olga.svg b/public/avatars/olga.svg
new file mode 100644
index 0000000..31783b8
--- /dev/null
+++ b/public/avatars/olga.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#E5EBE3"/>
+  
+        <path d="M18 26 C18 14, 46 14, 46 26 C46 36, 42 42, 42 42 L22 42 C22 42, 18 36, 18 26 Z" fill="#2B4A3A"/>
+        <circle cx="32" cy="25" r="12" fill="#32483D"/>
+        <path d="M16 54 C16 42, 24 38, 32 38 C40 38, 48 42, 48 54 Z" fill="#32483D"/>
+        <circle cx="28" cy="24" r="1.8" fill="#E5EBE3"/>
+        <circle cx="36" cy="24" r="1.8" fill="#E5EBE3"/>
+        <path d="M28 30 Q32 33 36 30" stroke="#E5EBE3" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+        
+</svg>
diff --git a/public/avatars/operator.svg b/public/avatars/operator.svg
new file mode 100644
index 0000000..d1529d5
--- /dev/null
+++ b/public/avatars/operator.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#E3EBE6"/>
+  
+        <circle cx="32" cy="24" r="14" fill="#1E3A2F"/>
+        <path d="M16 52 C16 40, 24 36, 32 36 C40 36, 48 40, 48 52 Z" fill="#1E3A2F"/>
+        <circle cx="27" cy="23" r="1.8" fill="#E3EBE6"/>
+        <circle cx="37" cy="23" r="1.8" fill="#E3EBE6"/>
+        <path d="M28 29 Q32 32 36 29" stroke="#E3EBE6" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+        
+</svg>
diff --git a/public/avatars/resurs.svg b/public/avatars/resurs.svg
new file mode 100644
index 0000000..6cb87be
--- /dev/null
+++ b/public/avatars/resurs.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#DEE5E0"/>
+  
+        <rect x="20" y="18" width="24" height="32" rx="3" fill="#1F3B2E"/>
+        <rect x="24" y="22" width="4" height="4" rx="1" fill="#DEE5E0"/>
+        <rect x="36" y="22" width="4" height="4" rx="1" fill="#DEE5E0"/>
+        <rect x="24" y="30" width="4" height="4" rx="1" fill="#DEE5E0"/>
+        <rect x="36" y="30" width="4" height="4" rx="1" fill="#DEE5E0"/>
+        <rect x="28" y="40" width="8" height="10" rx="1" fill="#DEE5E0"/>
+        
+</svg>
diff --git a/public/avatars/support.svg b/public/avatars/support.svg
new file mode 100644
index 0000000..c075c42
--- /dev/null
+++ b/public/avatars/support.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="32" fill="#DFE9E3"/>
+  
+        <circle cx="32" cy="26" r="13" fill="#1B3B2B"/>
+        <path d="M16 52 C16 42, 24 38, 32 38 C40 38, 48 42, 48 52 Z" fill="#1B3B2B"/>
+        <path d="M22 24 C22 18, 42 18, 42 24 L42 28 C42 30, 40 31, 38 31" stroke="#276848" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+        <circle cx="42" cy="28" r="3" fill="#276848"/>
+        
+</svg>
diff --git a/src/app/layouts/AppShell.tsx b/src/app/layouts/AppShell.tsx
index 271129b..571c91a 100644
--- a/src/app/layouts/AppShell.tsx
+++ b/src/app/layouts/AppShell.tsx
@@ -28,6 +28,12 @@ export const AppShell: React.FC = () => {
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
+    const kronaTheme = {
+      light: 'parchment-light',
+      'soft-light': 'noble-green',
+      dark: 'graphite-forest-dark',
+    }[theme];
+    document.documentElement.setAttribute('data-krona-theme', kronaTheme);
   }, [theme]);
 
   // Layout resolution:
@@ -41,7 +47,7 @@ export const AppShell: React.FC = () => {
 
   const getViewportContainerStyles = () => {
     if (!isEmulatedOnDesktop) {
-      return 'w-full min-h-screen';
+      return isCommunicationsPage ? 'w-full h-screen max-h-screen overflow-hidden' : 'w-full min-h-screen';
     }
     switch (viewportMode) {
       case 'mobile':
@@ -51,14 +57,16 @@ export const AppShell: React.FC = () => {
       case 'tablet-landscape':
         return 'max-w-[1180px] h-[800px] my-6 border-8 border-krona-border rounded-[24px] overflow-hidden shadow-2xl relative';
       default:
-        return 'w-full min-h-screen';
+        return isCommunicationsPage ? 'w-full h-screen max-h-screen overflow-hidden' : 'w-full min-h-screen';
     }
   };
 
   return (
     <div
       data-testid="app-shell-root"
-      className={`min-h-screen bg-krona-app text-krona-primary flex items-center justify-center ${
+      className={`${
+        isCommunicationsPage ? 'h-screen max-h-screen overflow-hidden' : 'min-h-screen'
+      } bg-krona-app text-krona-primary flex items-center justify-center ${
         isEmulatedOnDesktop ? 'p-4' : ''
       }`}
     >
@@ -76,9 +84,9 @@ export const AppShell: React.FC = () => {
 
             {/* Main Content Router Outlet */}
             <main
-              className={`flex-1 ${
+              className={`flex-1 min-h-0 ${
                 isCommunicationsPage
-                  ? `overflow-hidden flex flex-col min-h-0 p-0 ${isEffectiveMobile ? 'pb-16' : ''}`
+                  ? `overflow-hidden flex flex-col pt-0 px-0 ${isEffectiveMobile ? 'pb-20' : 'pb-0'}`
                   : `overflow-y-auto ${isEffectiveMobile ? 'pb-24' : 'pb-8'} p-3 sm:p-4 md:p-6`
               }`}
             >
diff --git a/src/features/communications/components/CommunicationsHeader.tsx b/src/features/communications/components/CommunicationsHeader.tsx
index 623ab94..bb7f3b8 100644
--- a/src/features/communications/components/CommunicationsHeader.tsx
+++ b/src/features/communications/components/CommunicationsHeader.tsx
@@ -52,7 +52,7 @@ export function CommunicationsHeader({
   ];
 
   return (
-    <header className="relative bg-[var(--krona-surface)] border-b border-[var(--krona-border-subtle)] px-4 sm:px-6 pt-5 pb-3">
+    <header className="relative bg-[var(--krona-surface)] border-b border-[var(--krona-border-subtle)] px-3 sm:px-6 pt-3 sm:pt-5 pb-2 sm:pb-3 shrink-0 overflow-hidden">
       <div className="hidden lg:flex items-center gap-3 absolute right-8 top-4 text-right pointer-events-none opacity-50 font-serif italic text-sm text-[var(--krona-text-secondary)]">
         <span>Больше, чем общение с поддержкой</span>
         <svg
@@ -75,22 +75,40 @@ export function CommunicationsHeader({
         </svg>
       </div>
 
-      <div className="mb-4">
-        <h1 className="text-2xl sm:text-3xl font-bold font-serif text-[var(--krona-text-primary)]">
-          Коммуникации
-        </h1>
-        <p className="text-sm text-[var(--krona-text-secondary)] mt-1">
-          Все сообщения, почта и каналы компании в одном пространстве
-        </p>
+      <div className="flex items-center justify-between gap-3 mb-2 sm:mb-4">
+        <div>
+          <h1 className="text-xl sm:text-3xl font-bold font-serif text-[var(--krona-text-primary)]">
+            Коммуникации
+          </h1>
+          <p className="hidden sm:block text-sm text-[var(--krona-text-secondary)] mt-1">
+            Все сообщения, почта и каналы компании в одном пространстве
+          </p>
+        </div>
+
+        {/* Mobile compact action button */}
+        <button
+          type="button"
+          onClick={onAddChannel}
+          className="sm:hidden h-10 w-10 rounded-lg border border-[var(--krona-border)] bg-[var(--krona-surface)] hover:bg-[var(--krona-surface-hover)] text-[var(--krona-primary)] font-medium flex items-center justify-center shrink-0 transition-colors active:scale-95"
+          aria-label="Добавить канал"
+        >
+          <Plus className="w-4 h-4 text-[var(--krona-primary)]" />
+          <span className="sr-only">Добавить канал</span>
+        </button>
       </div>
 
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-1">
-        <Tabs
-          items={tabItems}
-          activeId={activeTab}
-          onChange={(id) => onTabChange(id as CommunicationTab)}
-        />
-        <div className="flex items-center gap-2 self-end sm:self-auto shrink-0">
+      <div className="flex items-center justify-between gap-3 min-w-0">
+        <div className="flex-1 min-w-0 overflow-x-auto scrollbar-none">
+          <Tabs
+            items={tabItems}
+            activeId={activeTab}
+            onChange={(id) => onTabChange(id as CommunicationTab)}
+            className="border-b-0 whitespace-nowrap"
+          />
+        </div>
+
+        {/* Desktop / Tablet full button */}
+        <div className="hidden sm:flex items-center gap-2 shrink-0">
           <Button
             variant="secondary"
             size="sm"
diff --git a/src/features/communications/components/MessengersView.tsx b/src/features/communications/components/MessengersView.tsx
index 75d8828..0f34479 100644
--- a/src/features/communications/components/MessengersView.tsx
+++ b/src/features/communications/components/MessengersView.tsx
@@ -1,14 +1,14 @@
-import { useState, useRef, useEffect, type FormEvent } from 'react';
+import React, { useState, useRef, useEffect, type FormEvent } from 'react';
 import {
-  Search, SlidersHorizontal, ArrowUpDown, Star, Phone, Video, UserPlus,
+  Search, ArrowUpDown, Star, Phone, Video, UserPlus,
   MoreVertical, Paperclip, Sparkles, Smile, Mic, Send, Download, FileText,
   ArrowLeft, ChevronRight, CheckCheck, Plus,
-  Briefcase, CheckSquare
+  Briefcase, CheckSquare, ShieldCheck
 } from 'lucide-react';
 import { useCommunicationsStore } from '../services/communicationsService';
 import { ChatConversation, ConnectorType } from '../types';
 import { Avatar, Badge, Button, ConnectorPill } from '@krona/ui';
-import { useToast } from '../../../shared/ui';
+import { useToast, Drawer } from '../../../shared/ui';
 
 interface MessengersViewProps {
   onOpenConnectModal: () => void;
@@ -39,16 +39,49 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me
     setIsContactDrawerOpen,
   } = useCommunicationsStore();
 
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [workspaceWidth, setWorkspaceWidth] = useState<number>(() =>
+    typeof window !== 'undefined' ? window.innerWidth : 1200
+  );
+
   const [messageText, setMessageText] = useState('');
   const [activeContactTab, setActiveContactTab] = useState<'info' | 'ai' | 'linked'>('info');
-  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
 
   const activeChat = conversations.find((c) => c.id === activeChatId) || conversations[0];
 
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView?.({ behavior: 'smooth' });
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
   }, [activeChat?.messages.length]);
 
+  // Track workspace container width via ResizeObserver
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const updateWidth = (w: number) => {
+      if (w > 0) {
+        setWorkspaceWidth(w);
+      }
+    };
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const cr = entry.contentRect;
+        if (cr && cr.width > 0) {
+          updateWidth(cr.width);
+        }
+      }
+    });
+    ro.observe(containerRef.current);
+    if (containerRef.current.clientWidth > 0) {
+      updateWidth(containerRef.current.clientWidth);
+    }
+    return () => ro.disconnect();
+  }, []);
+
+  const layoutMode: 'compact' | 'medium' | 'wide' =
+    workspaceWidth < 600 ? 'compact' : workspaceWidth < 950 ? 'medium' : 'wide';
+
   const filteredConversations = conversations.filter((c) => {
     if (activeConnector !== 'all' && c.primaryConnector !== activeConnector) {
       return false;
@@ -109,54 +142,565 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me
     }
   };
 
+  // Reusable Contact Card Component
+  const contactCardElement = (
+    <ContactCardContent
+      chat={activeChat}
+      activeTab={activeContactTab}
+      onTabChange={setActiveContactTab}
+      onCreateDeal={() => {
+        createDealFromChat(activeChat.id);
+        showToast({
+          title: 'Сделка создана',
+          message: `Создана сделка в CRM для ${activeChat.contact.name}`,
+          type: 'success',
+        });
+      }}
+      onCreateTask={() => {
+        createTaskFromChat(activeChat.id);
+        showToast({
+          title: 'Задача создана',
+          message: `Создана задача в проекте для ${activeChat.contact.name}`,
+          type: 'success',
+        });
+      }}
+      onAddChannel={() => onOpenAddContactModal()}
+    />
+  );
+
+  // Dialogs list section
+  const dialogListSection = (
+    <section
+      className="w-full h-full bg-[var(--krona-surface-raised)] rounded-2xl border border-[var(--krona-border-subtle)] shadow-[var(--krona-shadow-soft)] flex flex-col min-h-0 overflow-hidden"
+      aria-label="Список диалогов"
+    >
+      {/* Search and filters header */}
+      <div className="p-3.5 border-b border-[var(--krona-border-subtle)] space-y-2.5 shrink-0">
+        <div className="relative">
+          <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-[var(--krona-text-muted)]" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Поиск по чатам..."
+            className="w-full h-9 pl-9 pr-3 rounded-lg bg-[var(--krona-bg-workspace)] border border-[var(--krona-border)] text-sm text-[var(--krona-text-primary)] placeholder-[var(--krona-text-muted)] focus:outline-none focus:border-[var(--krona-primary)] transition-colors"
+          />
+        </div>
+
+        <div className="flex items-center justify-between text-xs text-[var(--krona-text-secondary)]">
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={() => setChatFilter('all')}
+              className={`px-2.5 py-1 rounded-md transition-colors ${
+                chatFilter === 'all'
+                  ? 'bg-[var(--krona-primary-soft)] text-[var(--krona-primary)] font-semibold'
+                  : 'hover:bg-[var(--krona-surface-hover)]'
+              }`}
+            >
+              Все
+            </button>
+            <button
+              type="button"
+              onClick={() => setChatFilter('unread')}
+              className={`px-2.5 py-1 rounded-md flex items-center gap-1 transition-colors ${
+                chatFilter === 'unread'
+                  ? 'bg-[var(--krona-primary-soft)] text-[var(--krona-primary)] font-semibold'
+                  : 'hover:bg-[var(--krona-surface-hover)]'
+              }`}
+            >
+              <span>Непрочитанные</span>
+              <span className="w-4 h-4 rounded-full bg-[var(--krona-danger)] text-white text-[10px] font-bold inline-flex items-center justify-center">
+                12
+              </span>
+            </button>
+            <button
+              type="button"
+              onClick={() => setChatFilter('favorite')}
+              className={`px-2.5 py-1 rounded-md transition-colors ${
+                chatFilter === 'favorite'
+                  ? 'bg-[var(--krona-primary-soft)] text-[var(--krona-primary)] font-semibold'
+                  : 'hover:bg-[var(--krona-surface-hover)]'
+              }`}
+            >
+              Избранные
+            </button>
+          </div>
+          <button
+            type="button"
+            className="p-1 hover:text-[var(--krona-text-primary)] transition-colors"
+            title="Сортировка"
+            aria-label="Сортировка"
+          >
+            <ArrowUpDown className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Conversation list */}
+      <div className="flex-1 overflow-y-auto divide-y divide-[var(--krona-border-subtle)]">
+        {filteredConversations.length === 0 ? (
+          <div className="p-8 text-center text-sm text-[var(--krona-text-muted)]">
+            Диалоги не найдены
+          </div>
+        ) : (
+          filteredConversations.map((item) => {
+            const isActive = item.id === activeChat.id;
+            return (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => {
+                  setActiveChatId(item.id);
+                  setIsMobileChatOpen(true);
+                  setIsContactDrawerOpen(false);
+                }}
+                className={`w-full p-3.5 text-left flex items-start gap-3 transition-colors border-l-4 min-h-[76px] ${
+                  isActive
+                    ? 'bg-[var(--krona-surface-selected)] border-l-[var(--krona-primary)]'
+                    : 'border-l-transparent hover:bg-[var(--krona-surface-hover)]'
+                }`}
+              >
+                <div className="relative shrink-0">
+                  <Avatar
+                    src={item.contact.avatarUrl}
+                    alt={item.contact.name}
+                    initials={item.contact.initials}
+                    size="md"
+                    status={item.contact.isOnline ? 'online' : 'offline'}
+                  />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-1">
+                    <div className="flex items-center gap-1.5 truncate">
+                      <span className="font-semibold text-sm text-[var(--krona-text-primary)] truncate">
+                        {item.contact.name}
+                      </span>
+                      {item.isFavorite && (
+                        <Star className="w-3.5 h-3.5 text-amber-500 fill-amber-500 shrink-0" />
+                      )}
+                    </div>
+                    <span className="text-[11px] text-[var(--krona-text-muted)] shrink-0">
+                      {item.lastMessageTime}
+                    </span>
+                  </div>
+                  <div className="mt-1 flex items-center justify-between gap-2">
+                    <p className="text-xs text-[var(--krona-text-secondary)] truncate">
+                      {item.lastMessageSnippet}
+                    </p>
+                    <div className="flex items-center gap-1.5 shrink-0">
+                      <span
+                        className={`w-4 h-4 rounded text-[9px] font-bold inline-flex items-center justify-center uppercase ${getConnectorBadgeClass(
+                          item.primaryConnector
+                        )}`}
+                        title={item.primaryConnector}
+                      >
+                        {item.primaryConnector[0]}
+                      </span>
+                      {item.unreadCount > 0 && (
+                        <span className="w-4 h-4 rounded-full bg-[var(--krona-primary)] text-white text-[10px] font-bold inline-flex items-center justify-center">
+                          {item.unreadCount}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </section>
+  );
+
+  // Active chat section
+  const activeChatSection = (
+    <section
+      className="w-full h-full bg-[var(--krona-surface-raised)] rounded-2xl border border-[var(--krona-border-subtle)] shadow-[var(--krona-shadow-soft)] flex flex-col min-h-0 overflow-hidden"
+      aria-label="Активный диалог"
+    >
+      {/* Chat Header */}
+      <div className="h-16 px-4 bg-[var(--krona-surface)] border-b border-[var(--krona-border-subtle)] flex items-center justify-between gap-3 shrink-0">
+        <div className="flex items-center gap-3 min-w-0">
+          {layoutMode === 'compact' && (
+            <button
+              type="button"
+              onClick={() => setIsMobileChatOpen(false)}
+              className="w-9 h-9 -ml-1 rounded-lg flex items-center justify-center text-[var(--krona-text-secondary)] hover:bg-[var(--krona-surface-hover)]"
+              aria-label="Назад к списку чатов"
+            >
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+          )}
+
+          <Avatar
+            src={activeChat.contact.avatarUrl}
+            alt={activeChat.contact.name}
+            initials={activeChat.contact.initials}
+            size="md"
+            status={activeChat.contact.isOnline ? 'online' : 'offline'}
+          />
+
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <h2 className="font-semibold text-sm sm:text-base text-[var(--krona-text-primary)] truncate">
+                {activeChat.contact.name}
+              </h2>
+              <button
+                type="button"
+                onClick={() => toggleFavorite(activeChat.id)}
+                className="text-[var(--krona-text-muted)] hover:text-amber-500 transition-colors"
+                aria-label="В избранное"
+              >
+                <Star
+                  className={`w-4 h-4 ${
+                    activeChat.isFavorite ? 'text-amber-500 fill-amber-500' : ''
+                  }`}
+                />
+              </button>
+            </div>
+            <p className="text-xs text-[var(--krona-text-secondary)] truncate">
+              {activeChat.contact.company} • {activeChat.contact.role} •{' '}
+              <span className="capitalize">{activeChat.primaryConnector}</span>
+              {activeChat.contact.isOnline && (
+                <span className="ml-2 text-emerald-600 font-medium">● в сети</span>
+              )}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1 sm:gap-1.5 shrink-0 text-[var(--krona-text-secondary)]">
+          <button
+            type="button"
+            onClick={() =>
+              showToast({
+                title: 'Аудиозвонок',
+                message: `Вызов ${activeChat.contact.name}...`,
+                type: 'info',
+              })
+            }
+            className="w-9 h-9 rounded-lg hover:bg-[var(--krona-surface-hover)] flex items-center justify-center transition-colors"
+            title="Аудиозвонок"
+            aria-label="Аудиозвонок"
+          >
+            <Phone className="w-4 h-4" />
+          </button>
+          <button
+            type="button"
+            onClick={() =>
+              showToast({
+                title: 'Видеозвонок',
+                message: `Видеоконференция с ${activeChat.contact.name}...`,
+                type: 'info',
+              })
+            }
+            className="w-9 h-9 rounded-lg hover:bg-[var(--krona-surface-hover)] flex items-center justify-center transition-colors"
+            title="Видеозвонок"
+            aria-label="Видеозвонок"
+          >
+            <Video className="w-4 h-4" />
+          </button>
+
+          {/* Contact details button for medium (tablet) mode */}
+          {layoutMode === 'medium' && (
+            <button
+              type="button"
+              onClick={() => setIsContactDrawerOpen(true)}
+              className="w-9 h-9 rounded-lg hover:bg-[var(--krona-surface-hover)] flex items-center justify-center transition-colors text-[var(--krona-primary)]"
+              title="Карточка контакта"
+              aria-label="Открыть контакт"
+            >
+              <UserPlus className="w-4 h-4" />
+            </button>
+          )}
+
+          <button
+            type="button"
+            className="w-9 h-9 rounded-lg hover:bg-[var(--krona-surface-hover)] flex items-center justify-center transition-colors"
+            title="Опции"
+            aria-label="Дополнительно"
+          >
+            <MoreVertical className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Messages Feed */}
+      <div
+        ref={messagesContainerRef}
+        className="flex-1 min-h-0 overflow-y-auto p-4 space-y-3 bg-[var(--krona-bg-workspace)]/40"
+      >
+        <div className="text-center my-2">
+          <span className="px-3 py-1 rounded-full text-[11px] font-medium bg-[var(--krona-surface)] text-[var(--krona-text-muted)] border border-[var(--krona-border-subtle)] shadow-2xs">
+            Сегодня
+          </span>
+        </div>
+
+        {activeChat.messages.map((msg) => (
+          <div
+            key={msg.id}
+            className={`flex gap-3 ${
+              msg.direction === 'outgoing' ? 'justify-end' : 'justify-start'
+            }`}
+          >
+            {msg.direction === 'incoming' && (
+              <div className="shrink-0 mt-1">
+                <Avatar
+                  src={activeChat.contact.avatarUrl}
+                  alt={activeChat.contact.name}
+                  initials={activeChat.contact.initials}
+                  size="sm"
+                />
+              </div>
+            )}
+
+            <div
+              className={`max-w-[85%] sm:max-w-[75%] rounded-2xl p-3.5 shadow-xs text-sm transition-colors ${
+                msg.direction === 'outgoing'
+                  ? 'bg-[var(--krona-primary-soft)] border border-[var(--krona-border-subtle)] text-[var(--krona-text-primary)] rounded-tr-xs'
+                  : 'bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] text-[var(--krona-text-primary)] rounded-tl-xs'
+              }`}
+            >
+              <p className="leading-relaxed whitespace-pre-wrap">{msg.text}</p>
+
+              {/* Attachment Card */}
+              {msg.attachment && (
+                <div className="mt-2.5 p-2.5 rounded-xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] flex items-center justify-between gap-3 shadow-2xs">
+                  <div className="flex items-center gap-2.5 min-w-0">
+                    <div className="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-950 text-red-600 flex items-center justify-center shrink-0">
+                      <FileText className="w-4 h-4" />
+                    </div>
+                    <div className="min-w-0">
+                      <span className="block text-xs font-semibold text-[var(--krona-text-primary)] truncate">
+                        {msg.attachment.name}
+                      </span>
+                      <span className="block text-[10px] text-[var(--krona-text-muted)] uppercase">
+                        {msg.attachment.size}
+                      </span>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      showToast({
+                        title: 'Скачивание файла',
+                        message: `Загрузка ${msg.attachment?.name}...`,
+                        type: 'info',
+                      })
+                    }
+                    className="p-1.5 rounded-lg hover:bg-[var(--krona-surface-hover)] text-[var(--krona-primary)] transition-colors"
+                    title="Скачать файл"
+                    aria-label="Скачать файл"
+                  >
+                    <Download className="w-4 h-4" />
+                  </button>
+                </div>
+              )}
+
+              <div className="flex items-center justify-end gap-1 mt-1 text-[10px] text-[var(--krona-text-muted)]">
+                <span>{msg.timestamp}</span>
+                {msg.direction === 'outgoing' && (
+                  <CheckCheck
+                    className={`w-3.5 h-3.5 ${
+                      msg.status === 'read'
+                        ? 'text-sky-500'
+                        : 'text-[var(--krona-text-muted)]'
+                    }`}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Quick Replies Bar */}
+      <div className="px-4 py-2 bg-[var(--krona-surface)]/60 border-t border-[var(--krona-border-subtle)] flex items-center gap-2 overflow-x-auto scrollbar-none shrink-0">
+        <span className="text-[11px] text-[var(--krona-text-muted)] font-medium shrink-0 flex items-center gap-1">
+          <Sparkles className="w-3 h-3 text-[var(--krona-gold)]" /> Быстрые:
+        </span>
+        {quickReplies.map((qrText, idx) => (
+          <button
+            key={idx}
+            type="button"
+            onClick={() => sendQuickReply(activeChat.id, qrText)}
+            className="px-2.5 py-1 rounded-full text-xs bg-[var(--krona-surface)] hover:bg-[var(--krona-surface-hover)] border border-[var(--krona-border-subtle)] text-[var(--krona-text-secondary)] whitespace-nowrap transition-colors shrink-0"
+          >
+            {qrText}
+          </button>
+        ))}
+      </div>
+
+      {/* Message Composer */}
+      <form
+        onSubmit={handleSend}
+        className="p-3 sm:p-4 bg-[var(--krona-surface)] border-t border-[var(--krona-border-subtle)] shrink-0"
+      >
+        <div className="flex items-end gap-2 bg-[var(--krona-bg-workspace)] border border-[var(--krona-border)] rounded-xl p-1.5 focus-within:border-[var(--krona-primary)] transition-colors">
+          <button
+            type="button"
+            onClick={() =>
+              showToast({
+                title: 'Прикрепить файл',
+                message: 'Выберите документ или изображение для отправки',
+                type: 'info',
+              })
+            }
+            className="w-9 h-9 rounded-lg flex items-center justify-center text-[var(--krona-text-muted)] hover:text-[var(--krona-text-primary)] hover:bg-[var(--krona-surface-hover)] transition-colors shrink-0"
+            title="Прикрепить файл"
+            aria-label="Прикрепить файл"
+          >
+            <Paperclip className="w-4 h-4" />
+          </button>
+
+          <textarea
+            value={messageText}
+            onChange={(e) => setMessageText(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+              }
+            }}
+            rows={1}
+            placeholder="Написать сообщение..."
+            className="min-w-0 flex-1 min-h-[36px] max-h-32 bg-transparent text-sm text-[var(--krona-text-primary)] placeholder-[var(--krona-text-muted)] resize-none outline-none py-1.5 leading-relaxed"
+          />
+
+          <button
+            type="button"
+            onClick={handleAiAssistance}
+            className="w-9 h-9 rounded-lg flex items-center justify-center text-amber-600 dark:text-amber-400 hover:bg-[var(--krona-surface-hover)] transition-colors shrink-0"
+            title="AI Помощник: сформулировать ответ"
+            aria-label="AI Помощник"
+          >
+            <Sparkles className="w-4 h-4" />
+          </button>
+
+          <button
+            type="button"
+            className="hidden sm:flex w-9 h-9 rounded-lg items-center justify-center text-[var(--krona-text-muted)] hover:text-[var(--krona-text-primary)] hover:bg-[var(--krona-surface-hover)] transition-colors shrink-0"
+            title="Эмодзи"
+            aria-label="Эмодзи"
+          >
+            <Smile className="w-4 h-4" />
+          </button>
+
+          <button
+            type="button"
+            onClick={() =>
+              showToast({
+                title: 'Голосовое сообщение',
+                message: 'Запись аудиосообщения...',
+                type: 'info',
+              })
+            }
+            className="w-9 h-9 rounded-lg flex items-center justify-center text-[var(--krona-text-muted)] hover:text-[var(--krona-text-primary)] hover:bg-[var(--krona-surface-hover)] transition-colors shrink-0"
+            title="Голосовое сообщение"
+            aria-label="Голосовое сообщение"
+          >
+            <Mic className="w-4 h-4" />
+          </button>
+
+          <button
+            type="submit"
+            disabled={!messageText.trim()}
+            className="w-10 h-10 rounded-lg bg-[var(--krona-primary)] hover:bg-[var(--krona-primary-hover)] active:bg-[var(--krona-primary-active)] text-[var(--krona-text-inverse)] flex items-center justify-center disabled:opacity-40 transition-colors shadow-xs shrink-0"
+            aria-label="Отправить сообщение"
+          >
+            <Send className="w-4 h-4" />
+          </button>
+        </div>
+      </form>
+
+      {/* Mobile Bottom Contact Teaser Bar (Level 2 -> Level 3 drilldown) */}
+      {layoutMode === 'compact' && (
+        <div className="p-3 bg-[var(--krona-surface)] border-t border-[var(--krona-border-subtle)] flex items-center justify-between gap-3 shrink-0">
+          <div className="flex items-center gap-2.5 min-w-0">
+            <Avatar
+              src={activeChat.contact.avatarUrl}
+              alt={activeChat.contact.name}
+              initials={activeChat.contact.initials}
+              size="sm"
+            />
+            <div className="min-w-0">
+              <span className="font-semibold text-xs text-[var(--krona-text-primary)] truncate block">
+                {activeChat.contact.name}
+              </span>
+              <span className="text-[11px] text-[var(--krona-text-secondary)] truncate block">
+                {activeChat.contact.company}
+              </span>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => setIsContactDrawerOpen(true)}
+            className="p-1.5 rounded-lg text-[var(--krona-primary)] hover:bg-[var(--krona-surface-hover)]"
+            aria-label="Открыть карточку контакта"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+        </div>
+      )}
+    </section>
+  );
+
   return (
-    <div className="flex-1 min-h-0 flex flex-col bg-[var(--krona-bg-workspace)]">
+    <div
+      ref={containerRef}
+      data-layout-mode={layoutMode}
+      className="flex-1 min-h-0 flex flex-col bg-[var(--krona-bg-workspace)] overflow-hidden"
+    >
       {/* 1. Channel Switcher Row (# 17. Channel Switcher) */}
-      <div className="bg-[var(--krona-surface)]/80 backdrop-blur-xs border-b border-[var(--krona-border-subtle)] px-4 sm:px-6 py-2.5 flex items-center justify-between gap-3 overflow-x-auto scrollbar-none">
-        <div className="flex items-center gap-2 shrink-0">
-          <ConnectorPill
-            active={activeConnector === 'all'}
-            onClick={() => setActiveConnector('all')}
-            count={48}
-          >
-            Все
-          </ConnectorPill>
-          <ConnectorPill
-            active={activeConnector === 'telegram'}
-            onClick={() => setActiveConnector('telegram')}
-            count={12}
-            alertCount
-          >
-            Telegram
-          </ConnectorPill>
-          <ConnectorPill
-            active={activeConnector === 'whatsapp'}
-            onClick={() => setActiveConnector('whatsapp')}
-            count={8}
-          >
-            WhatsApp
-          </ConnectorPill>
-          <ConnectorPill
-            active={activeConnector === 'vk'}
-            onClick={() => setActiveConnector('vk')}
-            count={6}
-          >
-            VK
-          </ConnectorPill>
-          <ConnectorPill
-            active={activeConnector === 'max'}
-            onClick={() => setActiveConnector('max')}
-            count={4}
-          >
-            MAX
-          </ConnectorPill>
-          <ConnectorPill
-            active={activeConnector === 'email'}
-            onClick={() => setActiveConnector('email')}
-            count={10}
-          >
-            Email
-          </ConnectorPill>
+      <div className="bg-[var(--krona-surface)]/80 backdrop-blur-xs border-b border-[var(--krona-border-subtle)] px-3 sm:px-6 py-2 flex items-center justify-between gap-3 min-w-0 shrink-0">
+        <div className="relative flex-1 min-w-0 flex items-center overflow-x-auto scrollbar-none py-0.5">
+          <div className="flex items-center gap-2 shrink-0 pr-6">
+            <ConnectorPill
+              active={activeConnector === 'all'}
+              onClick={() => setActiveConnector('all')}
+              count={48}
+            >
+              Все
+            </ConnectorPill>
+            <ConnectorPill
+              active={activeConnector === 'telegram'}
+              onClick={() => setActiveConnector('telegram')}
+              count={12}
+              alertCount
+            >
+              Telegram
+            </ConnectorPill>
+            <ConnectorPill
+              active={activeConnector === 'whatsapp'}
+              onClick={() => setActiveConnector('whatsapp')}
+              count={8}
+            >
+              WhatsApp
+            </ConnectorPill>
+            <ConnectorPill
+              active={activeConnector === 'vk'}
+              onClick={() => setActiveConnector('vk')}
+              count={6}
+            >
+              VK
+            </ConnectorPill>
+            <ConnectorPill
+              active={activeConnector === 'max'}
+              onClick={() => setActiveConnector('max')}
+              count={4}
+            >
+              MAX
+            </ConnectorPill>
+            <ConnectorPill
+              active={activeConnector === 'email'}
+              onClick={() => setActiveConnector('email')}
+              count={10}
+            >
+              Email
+            </ConnectorPill>
+          </div>
+          {/* Smooth fade-out indicator on the right edge */}
+          <div className="pointer-events-none absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-[var(--krona-surface)] to-transparent" />
         </div>
 
         <div className="flex items-center gap-2 shrink-0">
@@ -165,657 +709,94 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me
             size="sm"
             onClick={onOpenConnectModal}
             leftIcon={<Plus className="w-3.5 h-3.5 text-[var(--krona-primary)]" />}
+            className="hidden sm:inline-flex"
           >
             Подключить
           </Button>
+          <button
+            type="button"
+            onClick={onOpenConnectModal}
+            className="sm:hidden h-8 w-8 rounded-lg border border-[var(--krona-border)] bg-[var(--krona-surface)] hover:bg-[var(--krona-surface-hover)] text-[var(--krona-primary)] flex items-center justify-center shrink-0"
+            aria-label="Подключить канал"
+          >
+            <Plus className="w-4 h-4 text-[var(--krona-primary)]" />
+          </button>
         </div>
       </div>
 
-      {/* 2. Main Workspace Canvas with 3 Elevated Rounded Cards */}
-      <div className="flex-1 min-h-0 p-3 sm:p-4 lg:p-5 flex flex-col md:flex-row gap-4 overflow-hidden">
-        
-        {/* ============================================================
-            CARD 1: Dialogs / Chat List
-            Desktop / Tablet: Left Column (w-full md:w-[300px] lg:w-[320px] xl:w-[350px])
-            Mobile: Level 1 (visible when !isMobileChatOpen)
-           ============================================================ */}
-        <section
-          className={`shrink-0 bg-[var(--krona-surface-raised)] rounded-2xl border border-[var(--krona-border-subtle)] shadow-[var(--krona-shadow-soft)] flex flex-col min-h-0 overflow-hidden ${
-            isMobileChatOpen ? 'hidden md:flex md:w-[300px] lg:w-[320px] xl:w-[350px]' : 'flex-1 md:flex-none md:w-[300px] lg:w-[320px] xl:w-[350px]'
-          }`}
-          aria-label="Список диалогов"
-        >
-          {/* Search and filters header */}
-          <div className="p-3.5 border-b border-[var(--krona-border-subtle)] space-y-2.5">
-            <div className="flex items-center gap-2">
-              <div className="relative flex-1">
-                <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-[var(--krona-text-muted)]" />
-                <input
-                  type="text"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  placeholder="Поиск по чатам..."
-                  className="w-full h-9 pl-9 pr-3 rounded-lg bg-[var(--krona-bg-workspace)] border border-[var(--krona-border)] text-sm text-[var(--krona-text-primary)] placeholder-[var(--krona-text-muted)] focus:outline-none focus:border-[var(--krona-primary)] transition-colors"
-                />
-              </div>
-              <button
-                type="button"
-                className="w-9 h-9 flex items-center justify-center rounded-lg border border-[var(--krona-border)] text-[var(--krona-text-secondary)] hover:bg-[var(--krona-surface-hover)] transition-colors"
-                title="Фильтры"
-                aria-label="Фильтры"
+      {/* 2. Main Workspace Canvas */}
+      <div className="flex-1 min-h-0 p-3 sm:p-4 lg:p-5 flex gap-4 overflow-hidden">
+        {/* COMPACT MODE (<600px): strictly 1 level at a time */}
+        {layoutMode === 'compact' && (
+          <>
+            {isMobileChatOpen && isContactDrawerOpen ? (
+              <section
+                className="w-full h-full bg-[var(--krona-surface-raised)] rounded-2xl border border-[var(--krona-border-subtle)] shadow-[var(--krona-shadow-soft)] flex flex-col min-h-0 overflow-hidden"
+                aria-label="Карточка контакта"
               >
-                <SlidersHorizontal className="w-4 h-4" />
-              </button>
-            </div>
-
-            <div className="flex items-center justify-between text-xs font-medium text-[var(--krona-text-secondary)]">
-              <div className="flex items-center gap-1.5">
-                <button
-                  type="button"
-                  onClick={() => setChatFilter('all')}
-                  className={`px-2.5 py-1 rounded-md transition-colors ${
-                    chatFilter === 'all'
-                      ? 'bg-[var(--krona-primary-soft)] text-[var(--krona-primary)] font-semibold'
-                      : 'hover:bg-[var(--krona-surface-hover)]'
-                  }`}
-                >
-                  Все
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setChatFilter('unread')}
-                  className={`px-2.5 py-1 rounded-md flex items-center gap-1 transition-colors ${
-                    chatFilter === 'unread'
-                      ? 'bg-[var(--krona-primary-soft)] text-[var(--krona-primary)] font-semibold'
-                      : 'hover:bg-[var(--krona-surface-hover)]'
-                  }`}
-                >
-                  <span>Непрочитанные</span>
-                  <span className="w-4 h-4 rounded-full bg-[var(--krona-danger)] text-white text-[10px] font-bold inline-flex items-center justify-center">
-                    12
-                  </span>
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setChatFilter('favorite')}
-                  className={`px-2.5 py-1 rounded-md transition-colors ${
-                    chatFilter === 'favorite'
-                      ? 'bg-[var(--krona-primary-soft)] text-[var(--krona-primary)] font-semibold'
-                      : 'hover:bg-[var(--krona-surface-hover)]'
-                  }`}
-                >
-                  Избранные
-                </button>
-              </div>
-              <button
-                type="button"
-                className="p-1 hover:text-[var(--krona-text-primary)] transition-colors"
-                title="Сортировка"
-                aria-label="Сортировка"
-              >
-                <ArrowUpDown className="w-3.5 h-3.5" />
-              </button>
-            </div>
-          </div>
-
-          {/* Conversation list */}
-          <div className="flex-1 overflow-y-auto divide-y divide-[var(--krona-border-subtle)]">
-            {filteredConversations.length === 0 ? (
-              <div className="p-8 text-center text-sm text-[var(--krona-text-muted)]">
-                Диалоги не найдены
-              </div>
-            ) : (
-              filteredConversations.map((item) => {
-                const isActive = item.id === activeChat.id;
-                return (
-                  <button
-                    key={item.id}
-                    type="button"
-                    onClick={() => setActiveChatId(item.id)}
-                    className={`w-full p-3.5 text-left flex items-start gap-3 transition-colors border-l-4 min-h-[76px] ${
-                      isActive
-                        ? 'bg-[var(--krona-surface-selected)] border-l-[var(--krona-primary)]'
-                        : 'border-l-transparent hover:bg-[var(--krona-surface-hover)]'
-                    }`}
-                  >
-                    <div className="relative shrink-0">
-                      <Avatar
-                        initials={item.contact.initials}
-                        size="md"
-                        status={item.contact.isOnline ? 'online' : 'offline'}
-                      />
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center justify-between gap-1">
-                        <div className="flex items-center gap-1.5 truncate">
-                          <span className="font-semibold text-sm text-[var(--krona-text-primary)] truncate">
-                            {item.contact.name}
-                          </span>
-                          {item.isFavorite && (
-                            <Star className="w-3.5 h-3.5 text-amber-500 fill-amber-500 shrink-0" />
-                          )}
-                        </div>
-                        <span className="text-[11px] text-[var(--krona-text-muted)] shrink-0">
-                          {item.lastMessageTime}
-                        </span>
-                      </div>
-                      <div className="mt-1 flex items-center justify-between gap-2">
-                        <p className="text-xs text-[var(--krona-text-secondary)] truncate">
-                          {item.lastMessageSnippet}
-                        </p>
-                        <div className="flex items-center gap-1.5 shrink-0">
-                          <span
-                            className={`w-4 h-4 rounded text-[9px] font-bold inline-flex items-center justify-center uppercase ${getConnectorBadgeClass(
-                              item.primaryConnector
-                            )}`}
-                            title={item.primaryConnector}
-                          >
-                            {item.primaryConnector[0]}
-                          </span>
-                          {item.unreadCount > 0 && (
-                            <span className="w-4 h-4 rounded-full bg-[var(--krona-primary)] text-white text-[10px] font-bold inline-flex items-center justify-center">
-                              {item.unreadCount}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  </button>
-                );
-              })
-            )}
-          </div>
-        </section>
-
-        {/* ============================================================
-            MIDDLE COLUMN / RIGHT AREA:
-            Desktop: Active Chat (Center) + Contact Card (Right)
-            Vertical Tablet: Stacked Active Chat (Top) + Horizontal Contact Card (Bottom)
-            Mobile: Level 2 (Chat) or Level 3 (Contact Card)
-           ============================================================ */}
-        <div
-          className={`flex-1 min-h-0 flex flex-col gap-4 overflow-hidden ${
-            !isMobileChatOpen ? 'hidden md:flex' : 'flex'
-          }`}
-        >
-          {/* Tablet & Mobile Drilldown: Level 3 (Full Contact Card on Mobile) */}
-          {isMobileChatOpen && isContactDrawerOpen ? (
-            <section
-              className="md:hidden flex-1 bg-[var(--krona-surface-raised)] rounded-2xl border border-[var(--krona-border-subtle)] shadow-[var(--krona-shadow-soft)] flex flex-col min-h-0 overflow-hidden"
-              aria-label="Карточка контакта"
-            >
-              <div className="p-3.5 border-b border-[var(--krona-border-subtle)] flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <button
-                    type="button"
-                    onClick={() => setIsContactDrawerOpen(false)}
-                    className="w-9 h-9 rounded-lg flex items-center justify-center text-[var(--krona-text-secondary)] hover:bg-[var(--krona-surface-hover)]"
-                    aria-label="Назад к диалогу"
-                  >
-                    <ArrowLeft className="w-5 h-5" />
-                  </button>
-                  <h3 className="font-semibold text-base text-[var(--krona-text-primary)]">
-                    Карточка контакта
-                  </h3>
-                </div>
-              </div>
-              <div className="flex-1 overflow-y-auto">
-                <ContactCardContent
-                  chat={activeChat}
-                  activeTab={activeContactTab}
-                  onTabChange={setActiveContactTab}
-                  onCreateDeal={() => {
-                    createDealFromChat(activeChat.id);
-                    showToast({
-                      title: 'Сделка создана',
-                      message: `Создана сделка в CRM для ${activeChat.contact.name}`,
-                      type: 'success',
-                    });
-                  }}
-                  onCreateTask={() => {
-                    createTaskFromChat(activeChat.id);
-                    showToast({
-                      title: 'Задача создана',
-                      message: `Создана задача в проекте для ${activeChat.contact.name}`,
-                      type: 'success',
-                    });
-                  }}
-                  onAddChannel={() => onOpenAddContactModal()}
-                />
-              </div>
-            </section>
-          ) : (
-            <>
-              {/* DESKTOP ROW (xl) or TABLET STACK (md to xl) */}
-              <div className="flex-1 min-h-0 flex flex-col xl:flex-row gap-4 overflow-hidden">
-                
-                {/* CARD 2: Active Chat Conversation */}
-                <section
-                  className="flex-1 min-h-0 bg-[var(--krona-surface-raised)] rounded-2xl border border-[var(--krona-border-subtle)] shadow-[var(--krona-shadow-soft)] flex flex-col overflow-hidden"
-                  aria-label="Активный диалог"
-                >
-                  {/* Chat Header */}
-                  <div className="h-16 px-4 bg-[var(--krona-surface)] border-b border-[var(--krona-border-subtle)] flex items-center justify-between gap-3 shrink-0">
-                    <div className="flex items-center gap-3 min-w-0">
-                      <button
-                        type="button"
-                        onClick={() => setIsMobileChatOpen(false)}
-                        className="md:hidden w-9 h-9 -ml-1 rounded-lg flex items-center justify-center text-[var(--krona-text-secondary)] hover:bg-[var(--krona-surface-hover)]"
-                        aria-label="Назад к списку чатов"
-                      >
-                        <ArrowLeft className="w-5 h-5" />
-                      </button>
-
-                      <Avatar
-                        initials={activeChat.contact.initials}
-                        size="md"
-                        status={activeChat.contact.isOnline ? 'online' : 'offline'}
-                      />
-
-                      <div className="min-w-0">
-                        <div className="flex items-center gap-2">
-                          <h2 className="font-semibold text-sm sm:text-base text-[var(--krona-text-primary)] truncate">
-                            {activeChat.contact.name}
-                          </h2>
-                          <button
-                            type="button"
-                            onClick={() => toggleFavorite(activeChat.id)}
-                            className="text-[var(--krona-text-muted)] hover:text-amber-500 transition-colors"
-                            aria-label="В избранное"
-                          >
-                            <Star
-                              className={`w-4 h-4 ${
-                                activeChat.isFavorite ? 'text-amber-500 fill-amber-500' : ''
-                              }`}
-                            />
-                          </button>
-                        </div>
-                        <p className="text-xs text-[var(--krona-text-secondary)] truncate">
-                          {activeChat.contact.company} • {activeChat.contact.role} •{' '}
-                          <span className="capitalize">{activeChat.primaryConnector}</span>
-                          {activeChat.contact.isOnline && (
-                            <span className="ml-2 text-emerald-600 font-medium">● в сети</span>
-                          )}
-                        </p>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-1 sm:gap-1.5 shrink-0 text-[var(--krona-text-secondary)]">
-                      <button
-                        type="button"
-                        onClick={() =>
-                          showToast({
-                            title: 'Вызов',
-                            message: `Звонок клиенту ${activeChat.contact.name}...`,
-                            type: 'info',
-                          })
-                        }
-                        className="w-9 h-9 rounded-lg hover:bg-[var(--krona-surface-hover)] flex items-center justify-center transition-colors"
-                        title="Позвонить"
-                        aria-label="Позвонить"
-                      >
-                        <Phone className="w-4 h-4" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() =>
-                          showToast({
-                            title: 'Видеозвонок',
-                            message: `Инициация видеосвязи с ${activeChat.contact.name}...`,
-                            type: 'info',
-                          })
-                        }
-                        className="w-9 h-9 rounded-lg hover:bg-[var(--krona-surface-hover)] flex items-center justify-center transition-colors"
-                        title="Видеозвонок"
-                        aria-label="Видеозвонок"
-                      >
-                        <Video className="w-4 h-4" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setIsContactDrawerOpen(true)}
-                        className="lg:hidden w-9 h-9 rounded-lg hover:bg-[var(--krona-surface-hover)] flex items-center justify-center transition-colors text-[var(--krona-primary)]"
-                        title="Карточка контакта"
-                        aria-label="Открыть контакт"
-                      >
-                        <UserPlus className="w-4 h-4" />
-                      </button>
-                      <button
-                        type="button"
-                        className="w-9 h-9 rounded-lg hover:bg-[var(--krona-surface-hover)] flex items-center justify-center transition-colors"
-                        title="Опции"
-                        aria-label="Дополнительно"
-                      >
-                        <MoreVertical className="w-4 h-4" />
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Messages Stream */}
-                  <div className="flex-1 overflow-y-auto p-4 sm:p-5 space-y-4">
-                    {/* Date badge */}
-                    <div className="flex items-center justify-center">
-                      <span className="px-3.5 py-1 rounded-full bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] text-xs font-medium text-[var(--krona-text-muted)] shadow-xs">
-                        Сегодня, 15 сентября
-                      </span>
-                    </div>
-
-                    {activeChat.messages.map((msg) => (
-                      <div
-                        key={msg.id}
-                        className={`flex gap-3 ${
-                          msg.direction === 'outgoing' ? 'justify-end' : 'justify-start'
-                        }`}
-                      >
-                        {msg.direction === 'incoming' && (
-                          <div className="shrink-0 mt-1">
-                            <Avatar initials={activeChat.contact.initials} size="sm" />
-                          </div>
-                        )}
-
-                        <div
-                          className={`max-w-[85%] sm:max-w-[75%] rounded-2xl p-3.5 shadow-xs text-sm transition-colors ${
-                            msg.direction === 'outgoing'
-                              ? 'bg-[#E8EDE4] dark:bg-[#2F3A32] border border-[var(--krona-border-subtle)] text-[var(--krona-text-primary)] rounded-tr-xs'
-                              : 'bg-white dark:bg-[#252A26] border border-[var(--krona-border-subtle)] text-[var(--krona-text-primary)] rounded-tl-xs'
-                          }`}
-                        >
-                          <p className="leading-relaxed whitespace-pre-wrap">{msg.text}</p>
-
-                          {/* Attachment Card */}
-                          {msg.attachment && (
-                            <div className="mt-2.5 p-2.5 rounded-xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] flex items-center justify-between gap-3 shadow-2xs">
-                              <div className="flex items-center gap-2.5 min-w-0">
-                                <div className="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-950 text-red-600 flex items-center justify-center shrink-0">
-                                  <FileText className="w-4 h-4" />
-                                </div>
-                                <div className="min-w-0">
-                                  <span className="block text-xs font-semibold text-[var(--krona-text-primary)] truncate">
-                                    {msg.attachment.name}
-                                  </span>
-                                  <span className="text-[10px] text-[var(--krona-text-muted)]">
-                                    PDF • {msg.attachment.size}
-                                  </span>
-                                </div>
-                              </div>
-                              <button
-                                type="button"
-                                onClick={() =>
-                                  showToast({
-                                    title: 'Загрузка файла',
-                                    message: `Файл ${msg.attachment?.name} успешно сохранен`,
-                                    type: 'success',
-                                  })
-                                }
-                                className="w-8 h-8 rounded-lg border border-[var(--krona-border)] flex items-center justify-center hover:bg-[var(--krona-surface-hover)] text-[var(--krona-text-secondary)] shrink-0 transition-colors"
-                                title="Скачать файл"
-                                aria-label="Скачать"
-                              >
-                                <Download className="w-3.5 h-3.5" />
-                              </button>
-                            </div>
-                          )}
-
-                          <div
-                            className={`mt-1.5 flex items-center gap-1.5 text-[10px] text-[var(--krona-text-muted)] ${
-                              msg.direction === 'outgoing' ? 'justify-end' : 'justify-start'
-                            }`}
-                          >
-                            <span>{msg.timestamp}</span>
-                            {msg.direction === 'outgoing' && (
-                              <CheckCheck className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" />
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                    <div ref={messagesEndRef} />
-                  </div>
-
-                  {/* Quick Replies Bar */}
-                  <div className="px-4 py-2 border-t border-[var(--krona-border-subtle)] bg-[var(--krona-surface)] flex items-center gap-2 overflow-x-auto scrollbar-none shrink-0">
-                    {quickReplies.map((reply, idx) => (
-                      <button
-                        key={idx}
-                        type="button"
-                        onClick={() => sendQuickReply(activeChat.id, reply)}
-                        className="px-3 py-1 rounded-full text-xs font-medium text-[var(--krona-text-primary)] bg-[var(--krona-surface-muted)] hover:bg-[var(--krona-surface-hover)] border border-[var(--krona-border-subtle)] transition-colors whitespace-nowrap"
-                      >
-                        {reply}
-                      </button>
-                    ))}
-                  </div>
-
-                  {/* Message Input Composer */}
-                  <form
-                    onSubmit={handleSend}
-                    className="p-3 sm:p-4 bg-[var(--krona-surface)] border-t border-[var(--krona-border-subtle)] flex flex-col gap-2 shrink-0"
-                  >
-                    <div className="flex items-end gap-2 bg-[var(--krona-bg-workspace)] border border-[var(--krona-border)] rounded-xl p-2 focus-within:border-[var(--krona-primary)] focus-within:ring-1 focus-within:ring-[var(--krona-primary)] transition-all">
-                      <button
-                        type="button"
-                        onClick={() =>
-                          showToast({
-                            title: 'Вложение',
-                            message: 'Выберите файл для отправки',
-                            type: 'info',
-                          })
-                        }
-                        className="w-9 h-9 rounded-lg flex items-center justify-center text-[var(--krona-text-muted)] hover:text-[var(--krona-text-primary)] hover:bg-[var(--krona-surface-hover)] transition-colors shrink-0"
-                        title="Прикрепить файл"
-                        aria-label="Прикрепить файл"
-                      >
-                        <Paperclip className="w-4 h-4" />
-                      </button>
-
-                      <textarea
-                        value={messageText}
-                        onChange={(e) => setMessageText(e.target.value)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' && !e.shiftKey) {
-                            e.preventDefault();
-                            handleSend();
-                          }
-                        }}
-                        rows={1}
-                        placeholder="Написать сообщение..."
-                        className="min-w-0 flex-1 min-h-[36px] max-h-32 bg-transparent text-sm text-[var(--krona-text-primary)] placeholder-[var(--krona-text-muted)] resize-none outline-none py-1.5 leading-relaxed"
-                      />
-
-                      <button
-                        type="button"
-                        onClick={handleAiAssistance}
-                        className="w-9 h-9 rounded-lg flex items-center justify-center text-amber-600 dark:text-amber-400 hover:bg-[var(--krona-surface-hover)] transition-colors shrink-0"
-                        title="AI Помощник: сформулировать ответ"
-                        aria-label="AI Помощник"
-                      >
-                        <Sparkles className="w-4 h-4" />
-                      </button>
-
-                      <button
-                        type="button"
-                        className="hidden sm:flex w-9 h-9 rounded-lg items-center justify-center text-[var(--krona-text-muted)] hover:text-[var(--krona-text-primary)] hover:bg-[var(--krona-surface-hover)] transition-colors shrink-0"
-                        title="Эмодзи"
-                        aria-label="Эмодзи"
-                      >
-                        <Smile className="w-4 h-4" />
-                      </button>
-
-                      <button
-                        type="button"
-                        onClick={() =>
-                          showToast({
-                            title: 'Голосовое сообщение',
-                            message: 'Запись аудиосообщения...',
-                            type: 'info',
-                          })
-                        }
-                        className="w-9 h-9 rounded-lg flex items-center justify-center text-[var(--krona-text-muted)] hover:text-[var(--krona-text-primary)] hover:bg-[var(--krona-surface-hover)] transition-colors shrink-0"
-                        title="Голосовое сообщение"
-                        aria-label="Голосовое сообщение"
-                      >
-                        <Mic className="w-4 h-4" />
-                      </button>
-
-                      <button
-                        type="submit"
-                        disabled={!messageText.trim()}
-                        className="w-10 h-10 rounded-lg bg-[#9A743D] hover:bg-[#7D5B2D] active:bg-[#664923] text-white flex items-center justify-center disabled:opacity-40 transition-colors shadow-xs shrink-0"
-                        aria-label="Отправить сообщение"
-                      >
-                        <Send className="w-4 h-4" />
-                      </button>
-                    </div>
-                  </form>
-
-                  {/* Mobile Bottom Contact Teaser Bar (Level 2 -> Level 3 drilldown) */}
-                  <div className="md:hidden p-3 bg-[var(--krona-surface)] border-t border-[var(--krona-border-subtle)] flex items-center justify-between gap-3 shrink-0">
-                    <div className="flex items-center gap-2.5 min-w-0">
-                      <Avatar initials={activeChat.contact.initials} size="sm" />
-                      <div className="min-w-0">
-                        <span className="font-semibold text-xs text-[var(--krona-text-primary)] truncate block">
-                          {activeChat.contact.name}
-                        </span>
-                        <span className="text-[10px] text-[var(--krona-text-secondary)] truncate block">
-                          {activeChat.contact.role} • {activeChat.contact.company}
-                        </span>
-                      </div>
-                    </div>
+                <div className="p-3.5 border-b border-[var(--krona-border-subtle)] flex items-center justify-between shrink-0">
+                  <div className="flex items-center gap-2">
                     <button
                       type="button"
-                      onClick={() => setIsContactDrawerOpen(true)}
-                      className="px-3 py-1.5 rounded-lg border border-[var(--krona-border)] text-xs font-semibold text-[var(--krona-primary)] hover:bg-[var(--krona-surface-hover)] flex items-center gap-1 shrink-0 transition-colors"
-                      aria-label="Открыть карточку контакта"
+                      onClick={() => setIsContactDrawerOpen(false)}
+                      className="w-9 h-9 rounded-lg flex items-center justify-center text-[var(--krona-text-secondary)] hover:bg-[var(--krona-surface-hover)]"
+                      aria-label="Назад к диалогу"
                     >
-                      <span>Профиль</span>
-                      <ChevronRight className="w-3.5 h-3.5" />
+                      <ArrowLeft className="w-5 h-5" />
                     </button>
-                  </div>
-                </section>
-
-                {/* CARD 3: Desktop Vertical Contact Card (Right column on xl+) */}
-                <aside
-                  className="hidden xl:flex w-[320px] xl:w-[350px] shrink-0 bg-[var(--krona-surface-raised)] rounded-2xl border border-[var(--krona-border-subtle)] shadow-[var(--krona-shadow-soft)] flex-col min-h-0 overflow-y-auto"
-                  aria-label="Карточка контакта"
-                >
-                  <ContactCardContent
-                    chat={activeChat}
-                    activeTab={activeContactTab}
-                    onTabChange={setActiveContactTab}
-                    onCreateDeal={() => {
-                      createDealFromChat(activeChat.id);
-                      showToast({
-                        title: 'Сделка создана',
-                        message: `Создана сделка в CRM для ${activeChat.contact.name}`,
-                        type: 'success',
-                      });
-                    }}
-                    onCreateTask={() => {
-                      createTaskFromChat(activeChat.id);
-                      showToast({
-                        title: 'Задача создана',
-                        message: `Создана задача в проекте для ${activeChat.contact.name}`,
-                        type: 'success',
-                      });
-                    }}
-                    onAddChannel={() => onOpenAddContactModal()}
-                  />
-                </aside>
-              </div>
-
-              {/* CARD 3 (ALTERNATIVE): Horizontal Contact Card for Tablet (768x1024 & 1024x768)
-                  Visible on md:flex xl:hidden beneath active chat */}
-              <aside
-                className="hidden md:flex xl:hidden shrink-0 bg-[var(--krona-surface-raised)] rounded-2xl border border-[var(--krona-border-subtle)] shadow-[var(--krona-shadow-soft)] p-4 flex-col gap-3"
-                aria-label="Карточка контакта планшет"
-              >
-                <div className="grid grid-cols-12 gap-4 items-center">
-                  {/* Col 1: Contact Identity */}
-                  <div className="col-span-4 flex items-center gap-3">
-                    <Avatar
-                      initials={activeChat.contact.initials}
-                      size="lg"
-                      status={activeChat.contact.isOnline ? 'online' : 'offline'}
-                    />
-                    <div className="min-w-0">
-                      <div className="flex items-center gap-1.5">
-                        <h3 className="font-semibold text-sm text-[var(--krona-text-primary)] truncate">
-                          {activeChat.contact.name}
-                        </h3>
-                        <Badge variant="warning" size="sm">VIP</Badge>
-                      </div>
-                      <p className="text-xs text-[var(--krona-text-secondary)] truncate">
-                        {activeChat.contact.role}
-                      </p>
-                      <p className="text-[11px] text-[var(--krona-text-muted)] truncate">
-                        {activeChat.contact.company}
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* Col 2: Connected Channels */}
-                  <div className="col-span-3 flex flex-col gap-1 text-xs">
-                    <span className="text-[10px] uppercase font-bold text-[var(--krona-text-muted)]">
-                      Каналы
-                    </span>
-                    <div className="flex items-center gap-1.5 flex-wrap">
-                      <span className="px-2 py-0.5 rounded bg-sky-100 dark:bg-sky-950 text-sky-700 dark:text-sky-300 text-[11px] font-medium">
-                        TG: @ivan_petrov
-                      </span>
-                      <span className="px-2 py-0.5 rounded bg-emerald-100 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-300 text-[11px] font-medium">
-                        WA: +7 999 123-45
-                      </span>
-                    </div>
-                  </div>
-
-                  {/* Col 3: AI Summary snippet */}
-                  <div className="col-span-3 p-2 rounded-xl bg-[var(--krona-gold-soft)]/20 border border-[var(--krona-gold)]/30 text-xs">
-                    <div className="font-semibold text-[var(--krona-gold)] text-[11px] flex items-center gap-1 mb-0.5">
-                      <span>✦ AI-сводка</span>
-                    </div>
-                    <p className="text-[11px] text-[var(--krona-text-secondary)] line-clamp-2">
-                      Клиент согласовал договор. Ожидает счет на аванс 30%.
-                    </p>
-                  </div>
-
-                  {/* Col 4: Action Buttons */}
-                  <div className="col-span-2 flex flex-col gap-1.5 justify-center">
-                    <Button
-                      variant="primary"
-                      size="sm"
-                      onClick={() => {
-                        createDealFromChat(activeChat.id);
-                        showToast({
-                          title: 'Сделка создана',
-                          message: `Создана сделка в CRM для ${activeChat.contact.name}`,
-                          type: 'success',
-                        });
-                      }}
-                      className="w-full text-xs py-1"
-                    >
-                      + Сделка
-                    </Button>
-                    <Button
-                      variant="secondary"
-                      size="sm"
-                      onClick={() => {
-                        createTaskFromChat(activeChat.id);
-                        showToast({
-                          title: 'Задача создана',
-                          message: `Создана задача для ${activeChat.contact.name}`,
-                          type: 'success',
-                        });
-                      }}
-                      className="w-full text-xs py-1"
-                    >
-                      + Задача
-                    </Button>
+                    <h3 className="font-semibold text-base text-[var(--krona-text-primary)]">
+                      Карточка контакта
+                    </h3>
                   </div>
                 </div>
-              </aside>
-            </>
-          )}
-        </div>
+                <div className="flex-1 overflow-y-auto">{contactCardElement}</div>
+              </section>
+            ) : isMobileChatOpen ? (
+              activeChatSection
+            ) : (
+              dialogListSection
+            )}
+          </>
+        )}
+
+        {/* MEDIUM MODE (600-949px, e.g. Tablet): 2 columns + Slide-over Drawer */}
+        {layoutMode === 'medium' && (
+          <>
+            <div className="w-[280px] lg:w-[300px] h-full shrink-0 flex flex-col min-h-0">
+              {dialogListSection}
+            </div>
+            <div className="flex-1 min-w-0 h-full flex flex-col min-h-0">
+              {activeChatSection}
+            </div>
+            <Drawer
+              isOpen={isContactDrawerOpen}
+              onClose={() => setIsContactDrawerOpen(false)}
+              title="Карточка контакта"
+              subtitle={activeChat.contact.name}
+              size="md"
+            >
+              <div className="overflow-y-auto">{contactCardElement}</div>
+            </Drawer>
+          </>
+        )}
+
+        {/* WIDE MODE (>=950px, e.g. Desktop): 3 columns */}
+        {layoutMode === 'wide' && (
+          <>
+            <div className="w-[310px] lg:w-[330px] h-full shrink-0 flex flex-col min-h-0">
+              {dialogListSection}
+            </div>
+            <div className="flex-1 min-w-[360px] h-full flex flex-col min-h-0">
+              {activeChatSection}
+            </div>
+            <aside
+              className="w-[320px] xl:w-[350px] h-full shrink-0 bg-[var(--krona-surface-raised)] rounded-2xl border border-[var(--krona-border-subtle)] shadow-[var(--krona-shadow-soft)] flex flex-col min-h-0 overflow-y-auto"
+              aria-label="Карточка контакта"
+            >
+              {contactCardElement}
+            </aside>
+          </>
+        )}
       </div>
     </div>
   );
@@ -843,212 +824,262 @@ function ContactCardContent({
       {/* Profile Header */}
       <div className="flex flex-col items-center text-center pb-4 border-b border-[var(--krona-border-subtle)]">
         <div className="relative mb-3">
-          <Avatar initials={contact.initials} size="xl" status={contact.isOnline ? 'online' : 'offline'} />
+          <Avatar
+            src={contact.avatarUrl}
+            alt={contact.name}
+            initials={contact.initials}
+            size="xl"
+            status={contact.isOnline ? 'online' : 'offline'}
+          />
         </div>
         <h3 className="text-base font-bold text-[var(--krona-text-primary)]">{contact.name}</h3>
         <p className="text-xs text-[var(--krona-text-secondary)] mt-0.5">{contact.role}</p>
-        <p className="text-xs font-medium text-[var(--krona-text-primary)] mt-0.5">{contact.company}</p>
+        <p className="text-xs font-medium text-[var(--krona-text-primary)] mt-0.5">
+          {contact.company}
+        </p>
 
         <div className="flex items-center gap-1.5 mt-3 flex-wrap justify-center">
           <Badge variant="primary" size="sm">
             Клиент
           </Badge>
-          <Badge variant="warning" size="sm">
-            VIP
-          </Badge>
-          {contact.isOnline && (
-            <Badge variant="success" size="sm">
-              В сети
+          {contact.isVip && (
+            <Badge variant="warning" size="sm">
+              VIP
             </Badge>
           )}
-        </div>
-      </div>
-
-      {/* Connected Channels List */}
-      <div>
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-xs font-bold uppercase tracking-wider text-[var(--krona-text-secondary)]">
-            Каналы связи
+          <span className="px-2 py-0.5 rounded-full text-[11px] font-medium bg-[var(--krona-surface)] text-[var(--krona-text-muted)] border border-[var(--krona-border-subtle)]">
+            В сети 12:41
           </span>
-          <button
-            type="button"
-            onClick={onAddChannel}
-            className="text-xs text-[var(--krona-primary)] hover:underline flex items-center gap-1 font-medium"
-          >
-            <Plus className="w-3 h-3" />
-            <span>Канал</span>
-          </button>
         </div>
-        <div className="space-y-1.5 text-xs">
-          <div className="p-2 rounded-lg bg-[var(--krona-surface-muted)] flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-sky-500" />
-              <span className="text-[var(--krona-text-secondary)]">Telegram:</span>
-            </div>
-            <span className="font-medium text-[var(--krona-text-primary)]">@ivan_petrov</span>
-          </div>
-          <div className="p-2 rounded-lg bg-[var(--krona-surface-muted)] flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-emerald-500" />
-              <span className="text-[var(--krona-text-secondary)]">WhatsApp:</span>
-            </div>
-            <span className="font-medium text-[var(--krona-text-primary)]">+7 (999) 123-45-67</span>
-          </div>
-          <div className="p-2 rounded-lg bg-[var(--krona-surface-muted)] flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-amber-500" />
-              <span className="text-[var(--krona-text-secondary)]">Email:</span>
-            </div>
-            <span className="font-medium text-[var(--krona-text-primary)]">ivan@northstar.ru</span>
-          </div>
+
+        {/* Quick Action Buttons */}
+        <div className="grid grid-cols-2 gap-2 w-full mt-4">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={onCreateDeal}
+            leftIcon={<Briefcase className="w-3.5 h-3.5" />}
+            className="w-full text-xs justify-center"
+            aria-label="Создать сделку"
+          >
+            + Сделка
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={onCreateTask}
+            leftIcon={<CheckSquare className="w-3.5 h-3.5" />}
+            className="w-full text-xs justify-center"
+            aria-label="Создать задачу"
+          >
+            + Задача
+          </Button>
         </div>
       </div>
 
-      {/* Tabs: Info / AI / Linked */}
-      <div>
-        <div className="flex border-b border-[var(--krona-border-subtle)] mb-3">
-          <button
-            type="button"
-            onClick={() => onTabChange('info')}
-            className={`flex-1 pb-2 text-xs font-semibold text-center transition-colors border-b-2 ${
-              activeTab === 'info'
-                ? 'border-[var(--krona-primary)] text-[var(--krona-primary)]'
-                : 'border-transparent text-[var(--krona-text-secondary)] hover:text-[var(--krona-text-primary)]'
-            }`}
-          >
-            Инфо
-          </button>
-          <button
-            type="button"
-            onClick={() => onTabChange('ai')}
-            className={`flex-1 pb-2 text-xs font-semibold text-center transition-colors border-b-2 ${
-              activeTab === 'ai'
-                ? 'border-[var(--krona-gold)] text-[var(--krona-gold)]'
-                : 'border-transparent text-[var(--krona-text-secondary)] hover:text-[var(--krona-text-primary)]'
-            }`}
-          >
-            ✦ AI-сводка
-          </button>
-          <button
-            type="button"
-            onClick={() => onTabChange('linked')}
-            className={`flex-1 pb-2 text-xs font-semibold text-center transition-colors border-b-2 ${
-              activeTab === 'linked'
-                ? 'border-[var(--krona-primary)] text-[var(--krona-primary)]'
-                : 'border-transparent text-[var(--krona-text-secondary)] hover:text-[var(--krona-text-primary)]'
-            }`}
-          >
-            Связи ({contact.linkedDealsCount + contact.linkedTasksCount})
-          </button>
-        </div>
+      {/* Tabs */}
+      <div className="flex items-center border-b border-[var(--krona-border-subtle)] text-xs font-medium">
+        <button
+          type="button"
+          onClick={() => onTabChange('info')}
+          className={`flex-1 pb-2.5 text-center border-b-2 transition-colors ${
+            activeTab === 'info'
+              ? 'border-[var(--krona-primary)] text-[var(--krona-primary)] font-semibold'
+              : 'border-transparent text-[var(--krona-text-secondary)] hover:text-[var(--krona-text-primary)]'
+          }`}
+        >
+          Инфо
+        </button>
+        <button
+          type="button"
+          onClick={() => onTabChange('ai')}
+          className={`flex-1 pb-2.5 text-center border-b-2 transition-colors ${
+            activeTab === 'ai'
+              ? 'border-[var(--krona-primary)] text-[var(--krona-primary)] font-semibold'
+              : 'border-transparent text-[var(--krona-text-secondary)] hover:text-[var(--krona-text-primary)]'
+          }`}
+        >
+          AI-сводка
+        </button>
+        <button
+          type="button"
+          onClick={() => onTabChange('linked')}
+          className={`flex-1 pb-2.5 text-center border-b-2 transition-colors ${
+            activeTab === 'linked'
+              ? 'border-[var(--krona-primary)] text-[var(--krona-primary)] font-semibold'
+              : 'border-transparent text-[var(--krona-text-secondary)] hover:text-[var(--krona-text-primary)]'
+          }`}
+        >
+          Связанные ({contact.linkedDealsCount + contact.linkedTasksCount})
+        </button>
+      </div>
 
-        {activeTab === 'info' && (
-          <div className="space-y-3 text-xs">
-            <div>
-              <span className="text-[var(--krona-text-muted)] block text-[11px]">Телефон</span>
-              <span className="font-medium text-[var(--krona-text-primary)]">
-                {contact.channels.find((c) => c.type === 'phone')?.value || '+7 (495) 890-12-34'}
+      {/* Tab: Info */}
+      {activeTab === 'info' && (
+        <div className="space-y-4 text-xs">
+          {/* Connected Channels List */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <span className="font-bold uppercase tracking-wider text-[10px] text-[var(--krona-text-muted)]">
+                Каналы контакта
               </span>
+              <button
+                type="button"
+                onClick={onAddChannel}
+                className="text-[var(--krona-primary)] hover:underline text-[11px] font-medium flex items-center gap-0.5"
+              >
+                <Plus className="w-3 h-3" /> Добавить
+              </button>
             </div>
-            <div>
-              <span className="text-[var(--krona-text-muted)] block text-[11px]">Email</span>
-              <span className="font-medium text-[var(--krona-text-primary)]">
-                {contact.channels.find((c) => c.type === 'email')?.value || 'ivan@northstar.ru'}
-              </span>
-            </div>
-            <div>
-              <span className="text-[var(--krona-text-muted)] block text-[11px]">Ответственный</span>
-              <span className="font-medium text-[var(--krona-text-primary)]">Анна Смирнова (Senior Sales)</span>
-            </div>
-            <div>
-              <span className="text-[var(--krona-text-muted)] block text-[11px]">Последняя активность</span>
-              <span className="font-medium text-[var(--krona-text-primary)]">{contact.lastActivity}</span>
-            </div>
-            <div>
-              <span className="text-[var(--krona-text-muted)] block text-[11px]">Часовой пояс</span>
-              <span className="font-medium text-[var(--krona-text-primary)]">Москва (UTC+3)</span>
-            </div>
-            <div>
-              <span className="text-[var(--krona-text-muted)] block text-[11px]">Заметки</span>
-              <p className="text-[var(--krona-text-secondary)] mt-0.5 leading-relaxed bg-[var(--krona-surface-muted)] p-2 rounded-lg">
-                Предпочитает общение в Telegram в первой половине дня. Ключевое контактное лицо по договору поставки оборудования.
-              </p>
+            <div className="space-y-1.5">
+              {contact.channels.map((ch, idx) => (
+                <div
+                  key={idx}
+                  className="p-2 rounded-lg bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] flex items-center justify-between"
+                >
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span className="w-2 h-2 rounded-full bg-emerald-500 shrink-0" />
+                    <span className="capitalize font-semibold text-[var(--krona-text-primary)]">
+                      {ch.label}
+                    </span>
+                    <span className="text-[var(--krona-text-muted)] truncate">{ch.value}</span>
+                  </div>
+                  <span className="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium shrink-0">
+                    Подключен
+                  </span>
+                </div>
+              ))}
             </div>
           </div>
-        )}
 
-        {activeTab === 'ai' && (
-          <div className="p-3 rounded-xl bg-[var(--krona-gold-soft)]/20 border border-[var(--krona-gold)]/30 space-y-2">
-            <div className="flex items-center gap-1.5 text-xs font-semibold text-[var(--krona-gold)]">
-              <Sparkles className="w-3.5 h-3.5" />
-              <span>AI Анализ диалога</span>
+          {/* Details */}
+          <div className="space-y-2 pt-2 border-t border-[var(--krona-border-subtle)]">
+            <div className="flex justify-between py-1 border-b border-[var(--krona-border-subtle)]">
+              <span className="text-[var(--krona-text-muted)]">Компания:</span>
+              <span className="font-medium text-[var(--krona-text-primary)]">
+                {contact.company}
+              </span>
             </div>
-            <p className="text-xs text-[var(--krona-text-primary)] leading-relaxed">
-              Клиент согласовал предварительный договор на поставку. Ожидает счет на аванс 30% до конца недели. Высокая вероятность закрытия сделки.
+            <div className="flex justify-between py-1 border-b border-[var(--krona-border-subtle)]">
+              <span className="text-[var(--krona-text-muted)]">Должность:</span>
+              <span className="font-medium text-[var(--krona-text-primary)]">{contact.role}</span>
+            </div>
+            <div className="flex justify-between py-1 border-b border-[var(--krona-border-subtle)]">
+              <span className="text-[var(--krona-text-muted)]">Ожидание ответа:</span>
+              <span className="font-medium text-amber-600 dark:text-amber-400">
+                {contact.responseTimeWait}
+              </span>
+            </div>
+            <div className="flex justify-between py-1">
+              <span className="text-[var(--krona-text-muted)]">Последняя активность:</span>
+              <span className="font-medium text-[var(--krona-text-primary)]">
+                {contact.lastActivity}
+              </span>
+            </div>
+          </div>
+
+          {/* Sing-box VPN status snippet */}
+          <div className="p-3 rounded-xl bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-900/60 flex items-center justify-between text-xs">
+            <div className="flex items-center gap-2">
+              <ShieldCheck className="w-4 h-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
+              <div>
+                <span className="font-semibold text-emerald-900 dark:text-emerald-200 block">
+                  Sing-box VPN: Активен
+                </span>
+                <span className="text-[11px] text-emerald-700 dark:text-emerald-400 block">
+                  Трафик WhatsApp/TG через прокси
+                </span>
+              </div>
+            </div>
+            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shrink-0" />
+          </div>
+        </div>
+      )}
+
+      {/* Tab: AI Summary */}
+      {activeTab === 'ai' && (
+        <div className="space-y-3 text-xs">
+          <div className="p-3.5 rounded-xl bg-[var(--krona-gold-soft)] border border-[var(--krona-gold)]/40 text-[var(--krona-text-primary)]">
+            <div className="flex items-center gap-1.5 font-semibold text-[var(--krona-gold)] mb-2">
+              <Sparkles className="w-4 h-4" />
+              <span>✦ AI-сводка по клиенту</span>
+            </div>
+            <p className="leading-relaxed text-[var(--krona-text-primary)]">
+              {contact.aiSummary}
             </p>
-            <div className="pt-1 text-[11px] text-[var(--krona-text-secondary)] flex items-center justify-between border-t border-[var(--krona-gold)]/20">
-              <span>Тональность: Позитивная</span>
-              <span>Срочность: Высокая</span>
-            </div>
           </div>
-        )}
 
-        {activeTab === 'linked' && (
-          <div className="space-y-3">
-            <div>
-              <span className="text-xs font-semibold text-[var(--krona-text-secondary)] flex items-center gap-1.5 mb-1.5">
-                <Briefcase className="w-3.5 h-3.5" />
-                <span>Сделки в CRM ({contact.linkedDealsCount})</span>
-              </span>
-              <div className="p-2.5 rounded-lg border border-[var(--krona-border-subtle)] bg-[var(--krona-surface-muted)] text-xs space-y-1">
-                <div className="font-semibold text-[var(--krona-text-primary)]">
-                  Сделка №142 «Поставка оборудования KRONA-2026»
-                </div>
-                <div className="flex items-center justify-between text-[var(--krona-text-secondary)]">
-                  <span>1 450 000 ₽</span>
-                  <span className="text-amber-600 font-medium">Согласование договора</span>
+          <div className="p-3 rounded-xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] space-y-2">
+            <span className="font-semibold text-[var(--krona-text-primary)] block">
+              Рекомендации AI:
+            </span>
+            <ul className="list-disc list-inside space-y-1 text-[var(--krona-text-secondary)] pl-1">
+              <li>Предложить скидку 5% на объем от 100 единиц товара</li>
+              <li>Отправить коммерческое предложение до конца рабочего дня</li>
+              <li>Запланировать контрольный созвон на завтра в 14:00</li>
+            </ul>
+          </div>
+        </div>
+      )}
+
+      {/* Tab: Linked Data */}
+      {activeTab === 'linked' && (
+        <div className="space-y-3 text-xs">
+          <div>
+            <span className="font-bold uppercase tracking-wider text-[10px] text-[var(--krona-text-muted)] block mb-2">
+              Сделки в CRM ({contact.linkedDealsCount})
+            </span>
+            <div className="space-y-1.5">
+              <div className="p-2.5 rounded-lg bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] flex items-center justify-between">
+                <div>
+                  <span className="font-semibold text-[var(--krona-text-primary)] block">
+                    Поставка оборудования В-202
+                  </span>
+                  <span className="text-[11px] text-[var(--krona-text-muted)]">
+                    Этап: Согласование договора • 340 000 ₽
+                  </span>
                 </div>
+                <Badge variant="warning" size="sm">
+                  В работе
+                </Badge>
               </div>
-            </div>
-
-            <div>
-              <span className="text-xs font-semibold text-[var(--krona-text-secondary)] flex items-center gap-1.5 mb-1.5">
-                <CheckSquare className="w-3.5 h-3.5" />
-                <span>Задачи ({contact.linkedTasksCount})</span>
-              </span>
-              <div className="p-2.5 rounded-lg border border-[var(--krona-border-subtle)] bg-[var(--krona-surface-muted)] text-xs space-y-1">
-                <div className="font-semibold text-[var(--krona-text-primary)]">
-                  Подготовить счет на аванс 30%
-                </div>
-                <div className="flex items-center justify-between text-[var(--krona-text-secondary)]">
-                  <span>Дедлайн: Сегодня, 18:00</span>
-                  <span className="text-red-500 font-medium">В работе</span>
+              <div className="p-2.5 rounded-lg bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] flex items-center justify-between">
+                <div>
+                  <span className="font-semibold text-[var(--krona-text-primary)] block">
+                    Сервисное обслуживание №41
+                  </span>
+                  <span className="text-[11px] text-[var(--krona-text-muted)]">
+                    Этап: Оплата • 45 000 ₽
+                  </span>
                 </div>
+                <Badge variant="success" size="sm">
+                  Выиграна
+                </Badge>
               </div>
             </div>
           </div>
-        )}
-      </div>
 
-      {/* CRM Quick Actions */}
-      <div className="pt-2 border-t border-[var(--krona-border-subtle)] space-y-2">
-        <Button
-          variant="primary"
-          onClick={onCreateDeal}
-          className="w-full justify-center text-xs"
-          leftIcon={<Plus className="w-3.5 h-3.5" />}
-        >
-          Создать сделку
-        </Button>
-        <Button
-          variant="secondary"
-          onClick={onCreateTask}
-          className="w-full justify-center text-xs"
-          leftIcon={<CheckSquare className="w-3.5 h-3.5" />}
-        >
-          Создать задачу
-        </Button>
-      </div>
+          <div className="pt-2 border-t border-[var(--krona-border-subtle)]">
+            <span className="font-bold uppercase tracking-wider text-[10px] text-[var(--krona-text-muted)] block mb-2">
+              Задачи ({contact.linkedTasksCount})
+            </span>
+            <div className="space-y-1.5">
+              <div className="p-2 rounded-lg bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] flex items-center justify-between">
+                <span className="text-[var(--krona-text-primary)]">
+                  Подготовить счет на предоплату 30%
+                </span>
+                <span className="text-[10px] text-amber-600 font-medium">Сегодня</span>
+              </div>
+              <div className="p-2 rounded-lg bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] flex items-center justify-between">
+                <span className="text-[var(--krona-text-primary)]">
+                  Согласовать дату доставки партии
+                </span>
+                <span className="text-[10px] text-[var(--krona-text-muted)]">Завтра</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/features/communications/mockData.ts b/src/features/communications/mockData.ts
index d5cf0f2..9c6eb2a 100644
--- a/src/features/communications/mockData.ts
+++ b/src/features/communications/mockData.ts
@@ -24,6 +24,7 @@ export const initialConversations: ChatConversation[] = [
     contact: {
       id: 'contact-ivan',
       name: 'Иван Петров',
+      avatarUrl: '/avatars/ivan.svg',
       initials: 'ИП',
       company: 'ООО «Альфа»',
       role: 'Директор',
@@ -190,6 +191,7 @@ export const initialConversations: ChatConversation[] = [
     contact: {
       id: 'contact-maria',
       name: 'Мария К.',
+      avatarUrl: '/avatars/maria.svg',
       initials: 'МК',
       company: 'Студия Красоты «Шарм»',
       role: 'Управляющая',
@@ -225,6 +227,7 @@ export const initialConversations: ChatConversation[] = [
     contact: {
       id: 'contact-resurs',
       name: 'Поставщик ООО «Ресурс»',
+      avatarUrl: '/avatars/resurs.svg',
       initials: 'ПР',
       company: 'ООО «Ресурс-Снаб»',
       role: 'Менеджер по отгрузкам',
@@ -266,6 +269,7 @@ export const initialConversations: ChatConversation[] = [
     contact: {
       id: 'contact-elena',
       name: 'Елена Васильева',
+      avatarUrl: '/avatars/elena.svg',
       initials: 'ЕВ',
       company: 'Ресторан «Мята»',
       role: 'Шеф-повар',
@@ -371,6 +375,7 @@ export const initialConversations: ChatConversation[] = [
     contact: {
       id: 'contact-support',
       name: 'Служба поддержки',
+      avatarUrl: '/avatars/support.svg',
       initials: 'СП',
       company: 'Krona Platform',
       role: 'Дежурная смена',
diff --git a/src/index.css b/src/index.css
index eaa4b97..b125a78 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 @import '@krona/tokens.css';
 @import '@krona/themes.css';
+@import '@krona/ui.css';
 
 @tailwind base;
 @tailwind components;
@@ -24,18 +25,18 @@
   --surface-selected: var(--krona-surface-selected);
   --surface-disabled: var(--krona-surface-muted);
 
-  --sidebar-bg: var(--krona-surface);
-  --sidebar-deep: var(--krona-bg-app);
-  --sidebar-surface: var(--krona-surface-raised);
-  --sidebar-hover: var(--krona-surface-hover);
-  --sidebar-active: var(--krona-surface-selected);
-  --sidebar-border: var(--krona-border-subtle);
-  --sidebar-text: var(--krona-text-primary);
-  --sidebar-text-secondary: var(--krona-text-secondary);
-  --sidebar-text-muted: var(--krona-text-muted);
-  --sidebar-text-active: var(--krona-primary);
-  --sidebar-icon: var(--krona-text-secondary);
-  --sidebar-icon-active: var(--krona-primary);
+  --sidebar-bg: #284D3A;
+  --sidebar-deep: #213F30;
+  --sidebar-surface: #2D5741;
+  --sidebar-hover: #356149;
+  --sidebar-active: #3C684F;
+  --sidebar-border: #456D55;
+  --sidebar-text: #E8E5D9;
+  --sidebar-text-secondary: #BCC4B8;
+  --sidebar-text-muted: #9EAA9F;
+  --sidebar-text-active: #FFFFFF;
+  --sidebar-icon: #D0D4C8;
+  --sidebar-icon-active: #F0D39A;
   --sidebar-indicator: var(--krona-gold);
 
   --text-primary: var(--krona-text-primary);
@@ -113,18 +114,18 @@
   --surface-selected: var(--krona-surface-selected);
   --surface-disabled: var(--krona-surface-muted);
 
-  --sidebar-bg: var(--krona-surface);
-  --sidebar-deep: var(--krona-bg-app);
-  --sidebar-surface: var(--krona-surface-raised);
-  --sidebar-hover: var(--krona-surface-hover);
-  --sidebar-active: var(--krona-surface-selected);
-  --sidebar-border: var(--krona-border-subtle);
-  --sidebar-text: var(--krona-text-primary);
-  --sidebar-text-secondary: var(--krona-text-secondary);
-  --sidebar-text-muted: var(--krona-text-muted);
-  --sidebar-text-active: var(--krona-primary);
-  --sidebar-icon: var(--krona-text-secondary);
-  --sidebar-icon-active: var(--krona-primary);
+  --sidebar-bg: #E9DDC5;
+  --sidebar-deep: #E3D4B8;
+  --sidebar-surface: #F1E6D2;
+  --sidebar-hover: #E2D4BA;
+  --sidebar-active: #DDC9A8;
+  --sidebar-border: #D4C09E;
+  --sidebar-text: #51483D;
+  --sidebar-text-secondary: #756A5B;
+  --sidebar-text-muted: #8E8272;
+  --sidebar-text-active: #684923;
+  --sidebar-icon: #6F6456;
+  --sidebar-icon-active: #9A743D;
   --sidebar-indicator: var(--krona-gold);
 
   --text-primary: var(--krona-text-primary);
@@ -202,17 +203,17 @@
   --surface-selected: var(--krona-surface-selected);
   --surface-disabled: var(--krona-surface-muted);
 
-  --sidebar-bg: var(--krona-surface);
-  --sidebar-deep: var(--krona-bg-app);
-  --sidebar-surface: var(--krona-surface-raised);
-  --sidebar-hover: var(--krona-surface-hover);
-  --sidebar-active: var(--krona-surface-selected);
-  --sidebar-border: var(--krona-border-subtle);
-  --sidebar-text: var(--krona-text-primary);
-  --sidebar-text-secondary: var(--krona-text-secondary);
-  --sidebar-text-muted: var(--krona-text-muted);
-  --sidebar-text-active: var(--krona-primary);
-  --sidebar-icon: var(--krona-text-secondary);
+  --sidebar-bg: #18201B;
+  --sidebar-deep: #141916;
+  --sidebar-surface: #202A23;
+  --sidebar-hover: #27342B;
+  --sidebar-active: #2D3C31;
+  --sidebar-border: #354239;
+  --sidebar-text: #E4E3DA;
+  --sidebar-text-secondary: #A9B0A8;
+  --sidebar-text-muted: #858E87;
+  --sidebar-text-active: #F0E7D7;
+  --sidebar-icon: #BEC4BB;
   --sidebar-icon-active: var(--krona-gold);
   --sidebar-indicator: var(--krona-gold);
 
diff --git a/src/test/setup.ts b/src/test/setup.ts
index b754ae7..1d401f9 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -20,3 +20,11 @@ if (typeof Element !== 'undefined' && !Element.prototype.scrollIntoView) {
   Element.prototype.scrollIntoView = () => {};
 }
 
+if (typeof window !== 'undefined' && !(window as any).ResizeObserver) {
+  (window as any).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}
+