Deploy SalGram (Docker)

.dockerignore

@@ -0,0 +1,27 @@
+# Сборки и десктоп-артефакты
+SalGram.exe
+dist/
+build/
+*.spec
+build_exe.py
+desktop.py
+android/
+
+# Кеш и служебное
+__pycache__/
+*.pyc
+.claude/
+.git/
+.gitignore
+
+# Локальные данные и секреты — на сервере создаются заново в /data.
+# НЕ попадают в образ: иначе чужой ключ/база/секреты утекут в публичный Space.
+salgram.db
+secret.key
+vapid.json
+photos/
+files/
+gifs/
+avatars/
+audio/
+wallpapers/

Dockerfile

@@ -0,0 +1,27 @@
+# SalGram — Docker-образ для Hugging Face Spaces (sdk: docker).
+FROM python:3.13-slim
+
+# Пользователь с uid 1000 — так требует Hugging Face Spaces; /data — точка
+# монтирования постоянного хранилища (если оно подключено в настройках Space).
+RUN useradd -m -u 1000 user && mkdir -p /data && chown user /data
+
+USER user
+ENV PATH="/home/user/.local/bin:$PATH" \
+    SALGRAM_DATA_DIR=/data \
+    PYTHONUNBUFFERED=1 \
+    PORT=7860
+
+WORKDIR /home/user/app
+
+# Сначала зависимости — кешируется отдельно от кода.
+COPY --chown=user requirements-web.txt ./
+RUN pip install --no-cache-dir -r requirements-web.txt
+
+COPY --chown=user . .
+
+EXPOSE 7860
+
+# Один воркер обязателен: WebSocket-соединения хранятся в памяти процесса
+# (см. run_production в app.py). Каждое WS-соединение занимает поток.
+CMD ["gunicorn", "--workers", "1", "--threads", "100", "--timeout", "120", \
+     "--bind", "0.0.0.0:7860", "app:app"]

README.md

@@ -1,10 +1,58 @@
 ---
-title: Salgram
-emoji: 🔥
-colorFrom: pink
-colorTo: gray
+title: SalGram
+emoji: 💬
+colorFrom: blue
+colorTo: indigo
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# SalGram
+
+Мессенджер на Flask + flask-sock (WebSocket) + SQLite. Аккаунты, профили,
+личная и групповая переписка, каналы, голосовые, GIF, push-уведомления,
+модерация.
+
+## Запуск на Hugging Face Spaces
+
+Space типа **Docker**. Контейнер слушает порт `7860` (gunicorn, 1 воркер,
+многопоточный — этого требует хранение WebSocket-соединений в памяти процесса).
+
+### Хранение данных
+
+Все данные (база `salgram.db`, ключ шифрования, загруженные файлы) пишутся в
+каталог из переменной `SALGRAM_DATA_DIR` (по умолчанию `/data`). На бесплатном
+Space `/data` эфемерно — при пересборке/перезапуске/«засыпании» данные пропадают.
+
+### Резервное копирование в приватный репозиторий (бесплатная персистентность)
+
+Чтобы данные переживали перезапуски без платного Persistent storage, приложение
+само раз в 20 минут выгружает консистентную копию БД (вместе с ключом шифрования
+и медиа) в **приватный** dataset-репозиторий, а при старте контейнера
+восстанавливает оттуда (см. `hf_backup.py`). Код остаётся в публичном Space,
+а данные лежат только в приватном репо — их видишь и качаешь только ты.
+
+Включается переменными окружения (задаются в **Settings → Variables and secrets**
+у Space):
+
+| Переменная | Тип | Назначение |
+|---|---|---|
+| `HF_BACKUP_REPO` | variable | id приватного репо, напр. `username/salgram-data` |
+| `HF_TOKEN` | **secret** | токен с правом записи в этот репо |
+| `HF_BACKUP_INTERVAL` | variable (необяз.) | период в секундах, по умолчанию `1200` (20 мин) |
+
+Без этих переменных бэкап выключен (no-op) — локальная разработка и Amvera не
+затронуты. Скачать актуальную БД можно из приватного репо (файл `salgram.db`).
+
+Ключ шифрования `secret.key` и VAPID-ключи генерируются автоматически при
+первом запуске, если их нет (и далее переносятся бэкапом).
+
+## Локальный запуск
+
+```bash
+pip install -r requirements.txt   # десктоп-версия (с pywebview/pystray)
+python app.py                     # http://localhost:8000
+```
+
+Для веб/сервера достаточно `requirements-web.txt`.

assetlinks.json

@@ -0,0 +1,12 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "app.salgram.twa",
+      "sha256_cert_fingerprints": [
+        "REPLACE_WITH_APK_SIGNING_KEY_SHA256_FINGERPRINT"
+      ]
+    }
+  }
+]

hf_backup.py

@@ -0,0 +1,176 @@
+"""Резервное копирование данных SalGram в приватный репозиторий Hugging Face.
+
+Зачем: на бесплатном HF Space диск эфемерный — при пересборке/перезапуске/
+«засыпании» Space всё в контейнере пропадает. Этот модуль раз в
+HF_BACKUP_INTERVAL секунд снимает консистентную копию БД и выгружает её
+(вместе с ключом шифрования и медиафайлами) в ПРИВАТНЫЙ dataset-репозиторий,
+а при старте контейнера восстанавливает оттуда. Так код остаётся в публичном
+Space, а данные лежат только в приватном репо — их видишь и качаешь только ты.
+
+Включается только если заданы переменные окружения:
+    HF_BACKUP_REPO      — id приватного репо, напр. "username/salgram-data"
+    HF_TOKEN            — токен с правом записи в этот репо
+    HF_BACKUP_INTERVAL  — (необяз.) период в секундах, по умолчанию 1200 (20 мин)
+
+Без них модуль ничего не делает — локальная разработка и Amvera не затронуты.
+"""
+import json
+import os
+import shutil
+import sqlite3
+import tempfile
+import threading
+import time
+import traceback
+
+REPO_ENV = "HF_BACKUP_REPO"
+TOKEN_ENV = "HF_TOKEN"
+INTERVAL_ENV = "HF_BACKUP_INTERVAL"
+DEFAULT_INTERVAL = 1200  # 20 минут
+
+REPO_TYPE = "dataset"
+DB_NAME = "salgram.db"
+EXTRA_FILES = ("secret.key", "vapid.json")  # без них восстановленную БД не расшифровать
+MEDIA_DIRS = ("avatars", "photos", "files", "wallpapers", "gifs", "audio")
+_INDEX = ".hf_uploaded.json"  # локальный список уже выгруженных файлов (чтобы не слать повторно)
+
+
+def _config():
+    """(repo, token, interval) если бэкап настроен, иначе None."""
+    repo = os.environ.get(REPO_ENV)
+    token = os.environ.get(TOKEN_ENV)
+    if not repo or not token:
+        return None
+    try:
+        interval = int(os.environ.get(INTERVAL_ENV, DEFAULT_INTERVAL))
+    except ValueError:
+        interval = DEFAULT_INTERVAL
+    return repo, token, max(60, interval)
+
+
+def _log(msg):
+    print(f"[hf_backup] {msg}", flush=True)
+
+
+def _snapshot_db(data_dir, dst_path):
+    """Консистентная копия БД через online-backup API SQLite (безопасно при WAL)."""
+    src = sqlite3.connect(os.path.join(data_dir, DB_NAME), timeout=30)
+    try:
+        dst = sqlite3.connect(dst_path)
+        try:
+            with dst:
+                src.backup(dst)
+        finally:
+            dst.close()
+    finally:
+        src.close()
+
+
+def restore_on_boot(data_dir):
+    """Если локальной БД нет — скачать последнюю копию из приватного репо.
+
+    Вызывать ДО _load_key() и init_db(): восстановленные ключ и БД нужны им.
+    """
+    cfg = _config()
+    if not cfg:
+        return
+    repo, token, _ = cfg
+    if os.path.exists(os.path.join(data_dir, DB_NAME)):
+        _log("локальная БД уже на месте — восстановление пропущено")
+        return
+    try:
+        from huggingface_hub import snapshot_download
+        snap = snapshot_download(repo_id=repo, repo_type=REPO_TYPE, token=token)
+    except Exception as e:  # репо ещё нет / пустой / нет сети — стартуем с чистой БД
+        _log(f"копий пока нет или репо недоступен ({e!r}) — старт с чистой БД")
+        return
+    count = 0
+    for root, _dirs, files in os.walk(snap):
+        for name in files:
+            if name.startswith("."):
+                continue  # служебные .gitattributes / .cache
+            rel = os.path.relpath(os.path.join(root, name), snap)
+            target = os.path.join(data_dir, rel)
+            os.makedirs(os.path.dirname(target) or ".", exist_ok=True)
+            # snapshot_download кладёт симлинки на кеш — копируем именно содержимое.
+            shutil.copyfile(os.path.realpath(os.path.join(root, name)), target)
+            count += 1
+    _log(f"восстановлено файлов из бэкапа: {count}")
+
+
+def _remote_files(repo, token):
+    """Список файлов, уже лежащих в репо (для первичного заполнения индекса)."""
+    try:
+        from huggingface_hub import HfApi
+        return set(HfApi(token=token).list_repo_files(repo, repo_type=REPO_TYPE))
+    except Exception:
+        return set()
+
+
+def backup_now(data_dir):
+    """Один цикл бэкапа: снимок БД + новые медиа/ключи -> приватный репо."""
+    cfg = _config()
+    if not cfg:
+        return
+    repo, token, _ = cfg
+    from huggingface_hub import CommitOperationAdd, HfApi
+    api = HfApi(token=token)
+    api.create_repo(repo, repo_type=REPO_TYPE, private=True, exist_ok=True)
+
+    index_path = os.path.join(data_dir, _INDEX)
+    if os.path.exists(index_path):
+        with open(index_path) as f:
+            uploaded = set(json.load(f))
+    else:  # первый бэкап в этом контейнере — берём, что уже есть в репо
+        uploaded = _remote_files(repo, token)
+
+    with tempfile.TemporaryDirectory() as tmp:
+        snap = os.path.join(tmp, DB_NAME)
+        _snapshot_db(data_dir, snap)
+        ops = [CommitOperationAdd(DB_NAME, snap)]  # БД меняется всегда — шлём каждый раз
+        added = []
+
+        for name in EXTRA_FILES:
+            path = os.path.join(data_dir, name)
+            if os.path.exists(path) and name not in uploaded:
+                ops.append(CommitOperationAdd(name, path))
+                added.append(name)
+
+        for d in MEDIA_DIRS:
+            ddir = os.path.join(data_dir, d)
+            if not os.path.isdir(ddir):
+                continue
+            for name in sorted(os.listdir(ddir)):
+                rel = f"{d}/{name}"
+                path = os.path.join(ddir, name)
+                if os.path.isfile(path) and rel not in uploaded:
+                    ops.append(CommitOperationAdd(rel, path))
+                    added.append(rel)
+
+        api.create_commit(repo_id=repo, repo_type=REPO_TYPE, operations=ops,
+                          commit_message="SalGram backup")
+
+    uploaded.update(added)
+    with open(index_path, "w") as f:
+        json.dump(sorted(uploaded), f)
+    return len(added)
+
+
+def start(data_dir):
+    """Запустить фоновый поток периодического бэкапа (no-op, если не настроено)."""
+    cfg = _config()
+    if not cfg:
+        return
+    _, _, interval = cfg
+
+    def loop():
+        while True:
+            time.sleep(interval)
+            try:
+                n = backup_now(data_dir)
+                _log(f"бэкап выполнен (+{n} новых файлов)")
+            except Exception:
+                _log("ошибка бэкапа:\n" + traceback.format_exc())
+
+    threading.Thread(target=loop, name="hf-backup", daemon=True).start()
+    _log(f"периодический бэкап включён: каждые {interval} с -> {os.environ[REPO_ENV]}")

requirements-web.txt

@@ -0,0 +1,9 @@
+# Зависимости для веб-деплоя (Docker / Hugging Face Spaces).
+# Десктопные pywebview и pystray сюда намеренно не входят.
+flask
+flask-sock
+pillow
+cryptography
+gunicorn
+pywebpush
+huggingface_hub

requirements.txt

@@ -0,0 +1,8 @@
+flask
+flask-sock
+pillow
+cryptography
+gunicorn
+pywebpush
+pywebview
+pystray

static/index.html

@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>SalGram</title>
+  <link rel="stylesheet" href="style.css">
+  <!-- PWA: установка на телефон/десктоп + уведомления -->
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#17212b">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-title" content="SalGram">
+  <link rel="apple-touch-icon" href="icon-192.png">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/png" href="icon-192.png">
+</head>
+<body>
+
+  <!-- ===== Экран авторизации ===== -->
+  <main id="auth" class="screen" hidden>
+    <section class="card">
+      <h1 class="logo">SalGram</h1>
+      <p class="tagline">Безопасный мессенджер</p>
+
+      <!-- Форма регистрации (по умолчанию) -->
+      <form id="register-form" class="form">
+        <input name="display_name" placeholder="Отображаемый ник" maxlength="50" required>
+        <input name="username" placeholder="Юзернейм" maxlength="32"
+               autocomplete="username" required>
+        <input name="password" type="password" placeholder="Пароль (мин. 8 символов)"
+               minlength="8" autocomplete="new-password" required>
+        <label class="tos-row">
+          <input type="checkbox" name="tos" required>
+          <span>Я принимаю <button type="button" class="link" id="tos-open">условия использования</button></span>
+        </label>
+        <p class="error" hidden></p>
+        <button class="primary">Создать аккаунт</button>
+        <button type="button" class="link switch" data-target="login-form">Уже есть аккаунт</button>
+      </form>
+
+      <!-- Форма входа -->
+      <form id="login-form" class="form" hidden>
+        <input name="username" placeholder="Юзернейм" maxlength="32"
+               autocomplete="username" required>
+        <input name="password" type="password" placeholder="Пароль"
+               autocomplete="current-password" required>
+        <p class="error" hidden></p>
+        <button class="primary">Войти</button>
+        <button type="button" class="link switch" data-target="register-form">Нет аккаунта</button>
+      </form>
+    </section>
+  </main>
+
+  <!-- ===== Основной экран мессенджера ===== -->
+  <main id="app" class="app-layout" hidden>
+
+    <!-- Левая панель -->
+    <aside class="sidebar">
+      <header class="sidebar-head">SalGram
+        <button class="icon-btn" id="group-create" title="Создать группу или канал">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
+        </button>
+      </header>
+
+      <!-- Поиск: пользователи или сообщения, частичное/точное совпадение.
+           У заблокированного аккаунта вместо поиска — красная надпись. -->
+      <div class="search-box">
+        <p id="banned-banner" class="banned-banner" hidden>Ваш аккаунт заблокирован!</p>
+        <input id="search-input" placeholder="Поиск" autocomplete="off">
+        <div class="search-opts" id="search-opts" hidden>
+          <select id="search-type">
+            <option value="users">Пользователи</option>
+            <option value="groups">Группы</option>
+            <option value="messages">Сообщения</option>
+          </select>
+          <select id="search-mode">
+            <option value="partial">Частичное</option>
+            <option value="exact">Точное</option>
+          </select>
+        </div>
+      </div>
+
+      <div id="chat-list" class="chat-list"></div>
+      <div id="search-results" class="chat-list" hidden></div>
+
+      <nav class="toolbar">
+        <button id="nav-settings" title="Настройки">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.08a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.08a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.08a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        </button>
+        <button id="nav-profile" title="Профиль">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+        </button>
+        <button id="nav-logout" title="Выйти">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+        </button>
+      </nav>
+    </aside>
+
+    <!-- Правая область -->
+    <section class="main">
+
+      <!-- Заглушка -->
+      <div id="view-empty" class="view view-center">
+        <p class="stub">Выберите чат</p>
+      </div>
+
+      <!-- Чат -->
+      <div id="view-chat" class="view view-chat" hidden>
+        <header class="chat-head" id="chat-head" title="Открыть профиль">
+          <button class="icon-btn mobile-back" id="chat-back" title="Назад">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+          </button>
+          <div class="ava" id="chat-ava"></div>
+          <div class="chat-head-info">
+            <span id="chat-name"></span>
+            <span id="chat-status" class="muted small"></span>
+          </div>
+          <button class="icon-btn chat-del" id="chat-delete" title="Удалить переписку">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+          </button>
+        </header>
+        <!-- Обои чата: фото или видео фоном под сообщениями -->
+        <div id="chat-bg" class="chat-bg"></div>
+        <!-- Закреплённое сообщение (последнее из закреплённых) -->
+        <div id="pinned-bar" class="pinned-bar" hidden>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/></svg>
+          <div class="pinned-info">
+            <small>Закреплённое сообщение</small>
+            <span id="pinned-text"></span>
+          </div>
+          <button class="icon-btn" id="pinned-unpin" title="Открепить">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+        <div id="messages" class="messages"></div>
+        <p class="error chat-error" id="chat-error" hidden></p>
+        <p class="chat-blocked" id="chat-blocked" hidden></p>
+        <!-- Панель ответа: цитата сообщения, на которое отвечаем (над полем ввода) -->
+        <div id="reply-bar" class="reply-bar" hidden>
+          <svg class="reply-bar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
+          <div class="reply-bar-info">
+            <small id="reply-bar-name"></small>
+            <span id="reply-bar-text"></span>
+          </div>
+          <button type="button" class="icon-btn" id="reply-cancel" title="Отменить ответ">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+        <!-- Панель правки: показывается, когда сообщение редактируется в поле ввода -->
+        <div id="edit-bar" class="reply-bar" hidden>
+          <svg class="reply-bar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
+          <div class="reply-bar-info">
+            <small>Редактирование</small>
+            <span>Enter — сохранить, Esc — отменить</span>
+          </div>
+          <button type="button" class="icon-btn" id="edit-cancel" title="Отменить редактирование">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+        <form id="msg-form" class="msg-form">
+          <button type="button" class="icon-btn big" id="attach-btn" title="Прикрепить фото или файл (до 25 МБ)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          </button>
+          <button type="button" class="icon-btn big gif-btn" id="gif-btn" title="Отправить GIF">GIF</button>
+          <div id="msg-input" class="msg-input" contenteditable="true" role="textbox"
+               aria-multiline="true" data-placeholder="Сообщение"></div>
+          <input type="color" id="fmt-color" hidden>
+          <button type="button" class="icon-btn big" id="mic-btn" title="Записать голосовое сообщение">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+          </button>
+          <button class="icon-btn big" title="Отправить">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+          </button>
+          <input type="file" id="photo-input" hidden>
+        </form>
+        <!-- Панель записи голосового: показывается во время записи вместо ввода -->
+        <div id="rec-bar" class="rec-bar" hidden>
+          <button type="button" class="icon-btn big rec-cancel" id="rec-cancel" title="Отменить">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+          </button>
+          <span class="rec-dot"></span>
+          <span class="rec-time" id="rec-time">0:00</span>
+          <span class="rec-hint">Идёт запись…</span>
+          <button type="button" class="icon-btn big rec-send" id="rec-send" title="Отправить голосовое">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+          </button>
+        </div>
+        <!-- Панель чата с ботом @addgif: вместо ввода — добавление GIF в библиотеку -->
+        <div id="addgif-bar" class="addgif-bar" hidden>
+          <button type="button" class="primary" id="addgif-add">Добавить GIF в библиотеку</button>
+        </div>
+        <!-- Панель канала для подписчика: открыть обсуждение (слева) и отписаться (справа) -->
+        <div id="channel-bar" class="channel-bar" hidden>
+          <button type="button" class="primary" id="channel-open-chat">Открыть чат</button>
+          <button type="button" class="primary danger-btn" id="channel-unsub">Отписаться</button>
+        </div>
+      </div>
+
+      <!-- Профиль другого пользователя -->
+      <div id="view-user" class="view" hidden>
+        <div class="panel profile">
+          <button class="panel-back mobile-back" data-back>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+            Назад
+          </button>
+          <div class="avatar readonly">
+            <img id="user-ava" alt="Аватарка" hidden>
+            <svg id="user-ava-stub" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+          </div>
+          <div class="profile-row">
+            <h2 id="user-name"></h2>
+            <span id="user-status" class="muted small"></span>
+          </div>
+          <div class="profile-actions">
+            <button class="primary small-btn" id="user-add-contact">Добавить в контакты</button>
+            <button class="primary small-btn danger-btn" id="user-block">Заблокировать</button>
+          </div>
+          <span id="user-username" class="muted"></span>
+          <button class="primary write-btn" id="user-write">Написать</button>
+          <p id="user-desc" class="desc"></p>
+          <section class="contacts" id="user-contacts-sec" hidden>
+            <div class="profile-row"><h3>Контакты</h3></div>
+            <ul id="user-contact-list"></ul>
+          </section>
+          <div class="profile-actions bottom">
+            <button class="link" id="user-report">Пожаловаться</button>
+            <button class="link danger-link" id="user-delete" hidden>Удалить аккаунт</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Профиль группы -->
+      <div id="view-group" class="view" hidden>
+        <div class="panel profile">
+          <button class="panel-back mobile-back" data-back>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+            Назад
+          </button>
+          <div class="ava big" id="group-ava"></div>
+          <input type="file" id="group-avatar-input" accept="image/*" hidden>
+          <div class="profile-row"><h2 id="group-title"></h2></div>
+          <span id="group-meta" class="muted"></span>
+          <button class="primary write-btn" id="group-open">Открыть чат</button>
+          <button class="primary write-btn" id="group-join">Вступить</button>
+          <!-- Пригласительная ссылка (видна участникам) -->
+          <div class="invite-row" id="group-invite-row" hidden>
+            <span id="group-invite" class="invite-link"></span>
+            <button class="link" id="group-invite-copy">Копировать</button>
+          </div>
+          <!-- Управление комментариями канала (открыть / привязать / отвязать группу) -->
+          <div id="group-channel-extra" class="group-channel-extra"></div>
+          <!-- Настройки модерации (для владельца/админов группы) -->
+          <div id="group-mod-row" class="group-mod-row"></div>
+          <section class="contacts" id="group-members-sec" hidden>
+            <div class="profile-row">
+              <h3 id="group-members-title">Участники</h3>
+              <button class="icon-btn" id="group-add-member" title="Добавить участника" hidden>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              </button>
+            </div>
+            <ul id="group-member-list"></ul>
+          </section>
+          <div class="profile-actions bottom">
+            <button class="link danger-link" id="group-leave" hidden>Выйти из группы</button>
+            <button class="link danger-link" id="group-delete" hidden>Удалить группу</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Настройки -->
+      <div id="view-settings" class="view" hidden>
+        <div class="panel">
+          <!-- Корень настроек -->
+          <div id="page-root" class="settings-page">
+            <button class="panel-back mobile-back" data-back>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+              Назад
+            </button>
+            <h2>Настройки</h2>
+            <button class="settings-item" data-page="page-account">Аккаунт
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            </button>
+            <button class="settings-item" data-page="page-privacy">Приватность
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            </button>
+            <button class="settings-item" data-page="page-chats">Чаты
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            </button>
+            <button class="settings-item" id="root-appearance" data-page="page-appearance">Оформление
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            </button>
+            <!-- Только в ПК-приложении: кэш, оформление, уведомления и автозапуск в одном месте -->
+            <button class="settings-item" id="root-app" data-page="page-app" hidden>Приложение
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            </button>
+            <button class="settings-item" data-page="page-misc">Прочее
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            </button>
+          </div>
+
+          <!-- Аккаунт -->
+          <div id="page-account" class="settings-page" hidden>
+            <button class="settings-back" data-page="page-root">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+              Назад
+            </button>
+            <h2>Аккаунт</h2>
+            <button class="settings-item" id="opt-nick">Изменить ник</button>
+            <button class="settings-item" id="opt-username">Изменить юзернейм</button>
+            <button class="settings-item" id="opt-password">Изменить пароль</button>
+            <button class="settings-item danger" id="opt-delete">Удалить аккаунт</button>
+          </div>
+
+          <!-- Приватность -->
+          <div id="page-privacy" class="settings-page" hidden>
+            <button class="settings-back" data-page="page-root">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+              Назад
+            </button>
+            <h2>Приватность</h2>
+            <label class="settings-row">Кому видна аватарка
+              <select id="privacy-avatar">
+                <option value="everyone">Всем</option>
+                <option value="contacts">Только контактам</option>
+                <option value="nobody">Никому</option>
+              </select>
+            </label>
+            <label class="settings-row">Кому виден список контактов
+              <select id="privacy-contacts">
+                <option value="everyone">Всем</option>
+                <option value="contacts">Только контактам</option>
+                <option value="nobody">Никому</option>
+              </select>
+            </label>
+            <label class="settings-row">Кто может добавлять меня в группы
+              <select id="privacy-group-invite">
+                <option value="everyone">Все</option>
+                <option value="contacts">Только мои контакты</option>
+                <option value="nobody">Никто</option>
+              </select>
+            </label>
+          </div>
+
+          <!-- Чаты: медленный режим -->
+          <div id="page-chats" class="settings-page" hidden>
+            <button class="settings-back" data-page="page-root">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+              Назад
+            </button>
+            <h2>Чаты</h2>
+            <label class="settings-row">Медленный режим: интервал (сек)
+              <input type="number" id="slow-seconds" min="0" max="3600" class="num">
+            </label>
+            <label class="settings-row">Действует на
+              <select id="slow-scope">
+                <option value="nobody">Ни на кого</option>
+                <option value="noncontacts">Всех, кроме контактов</option>
+                <option value="everyone">Всех</option>
+              </select>
+            </label>
+            <p class="hint">Ограничивает, как часто вам могут отправлять сообщения.</p>
+            <div class="settings-row" id="row-cache">Кэш сообщений
+              <span class="cache-row">
+                <span id="cache-size" class="muted">пусто</span>
+                <button type="button" class="link" id="cache-clear">Очистить</button>
+              </span>
+            </div>
+            <p class="hint" id="hint-cache">Переписки сохраняются на этом устройстве, чтобы чаты открывались
+              мгновенно. Удалённые сообщения удаляются и из кэша. Кэш очищается при выходе
+              из аккаунта.</p>
+          </div>
+
+          <!-- Оформление: тема и обои -->
+          <div id="page-appearance" class="settings-page" hidden>
+            <button class="settings-back" data-page="page-root">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+              Назад
+            </button>
+            <h2>Оформление</h2>
+            <label class="settings-row" id="row-theme">Цветовая тема
+              <select id="theme-select">
+                <option value="dark">Тёмная</option>
+                <option value="light">Светлая</option>
+                <option value="oled">Чёрная (OLED)</option>
+                <option value="blue">Синяя</option>
+              </select>
+            </label>
+            <div class="settings-row" id="row-wallpaper">Обои чата
+              <span class="cache-row">
+                <button type="button" class="link" id="wallpaper-upload">Загрузить</button>
+                <button type="button" class="link" id="wallpaper-remove" hidden>Удалить</button>
+              </span>
+            </div>
+            <p class="hint" id="hint-wallpaper">Обои — фото или видео (до 25 МБ), показываются фоном в переписке.
+              Тема сохраняется на этом устройстве.</p>
+            <input type="file" id="wallpaper-input" accept="image/*,video/*" hidden>
+          </div>
+
+          <!-- Приложение: только для ПК-версии. Сюда переносятся оформление,
+               кэш и уведомления; автозапуск существует только здесь. -->
+          <div id="page-app" class="settings-page" hidden>
+            <button class="settings-back" data-page="page-root">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+              Назад
+            </button>
+            <h2>Приложение</h2>
+            <!-- Блоки «Оформление», «Кэш» и «Уведомления» переносятся сюда из своих
+                 разделов скриптом applyDesktopUI(). Здесь — только автозапуск. -->
+            <h3 class="settings-sub" id="sub-autostart">Автозапуск</h3>
+            <label class="settings-row" id="row-autostart">Запускать при старте системы
+              <input type="checkbox" id="autostart-toggle">
+            </label>
+            <p class="hint" id="hint-autostart">При включении SalGram будет автоматически
+              запускаться при входе в Windows. По умолчанию выключено.</p>
+          </div>
+
+          <!-- Прочее: часовой пояс -->
+          <div id="page-misc" class="settings-page" hidden>
+            <button class="settings-back" data-page="page-root">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+              Назад
+            </button>
+            <h2>Прочее</h2>
+            <label class="settings-row" id="row-notify">Уведомления о сообщениях
+              <input type="checkbox" id="notify-toggle">
+            </label>
+            <p class="hint" id="notify-hint">Показывать системные уведомления о новых сообщениях
+              (в том числе когда приложение свёрнуто). Настройка для этого устройства.</p>
+            <label class="settings-row">Часовой пояс
+              <select id="tz-offset"></select>
+            </label>
+            <p class="hint">Определяется автоматически и сохраняется на этом устройстве (в cookie).
+              Время сообщений и статусов «был(а) в сети» показывается в этом поясе.</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Собственный профиль -->
+      <div id="view-profile" class="view" hidden>
+        <div class="panel profile">
+          <button class="panel-back mobile-back" data-back>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+            Назад
+          </button>
+          <label class="avatar" title="Изменить аватарку">
+            <img id="avatar-img" alt="Аватарка" hidden>
+            <svg id="avatar-stub" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+            <input type="file" id="avatar-input" accept="image/*,video/*" hidden>
+          </label>
+
+          <div class="profile-row">
+            <h2 id="profile-name"></h2>
+            <button class="icon-btn" id="edit-nick" title="Изменить ник">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
+            </button>
+          </div>
+          <div class="profile-row">
+            <span id="profile-username" class="muted"></span>
+            <button class="icon-btn" id="edit-username" title="Изменить юзернейм">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
+            </button>
+          </div>
+          <div class="profile-row">
+            <p id="profile-desc" class="desc"></p>
+            <button class="icon-btn" id="edit-desc" title="Изменить описание">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
+            </button>
+          </div>
+
+          <section class="contacts">
+            <div class="profile-row">
+              <button class="contacts-toggle" id="contacts-toggle" aria-expanded="false">
+                <svg class="contacts-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+                <h3>Контакты</h3>
+              </button>
+              <button class="icon-btn" id="contact-add" title="Добавить контакт">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              </button>
+            </div>
+            <ul id="contact-list" hidden></ul>
+          </section>
+        </div>
+      </div>
+
+    </section>
+  </main>
+
+  <!-- ===== Модальное окно с условиями использования ===== -->
+  <div id="tos-modal" class="modal" hidden>
+    <div class="modal-card">
+      <h2>Условия использования сервиса SalGram</h2>
+      <ol>
+        <li><b>Изменение условий.</b> Администрация Сервиса вправе в одностороннем
+          порядке изменять настоящее Соглашение в любой момент без предварительного
+          уведомления. Продолжение использования Сервиса после внесения изменений
+          означает согласие Пользователя с новой редакцией Соглашения.</li>
+        <li><b>Предоставление сервиса.</b> Сервис предоставляется на условиях
+          «как есть» (as is). Администрация не гарантирует бесперебойную,
+          своевременную и безошибочную работу Сервиса: он может быть недоступен
+          или работать нестабильно.</li>
+        <li><b>Ограничение ответственности.</b> Разработчик не несёт ответственности
+          за действия Пользователей, а также за любую информацию и контент,
+          передаваемые или размещаемые внутри Сервиса.</li>
+        <li><b>Конфиденциальность переписок.</b> Все переписки Пользователей
+          хранятся исключительно в зашифрованном виде.</li>
+        <li><b>Персональные данные.</b> Персональные данные Пользователя
+          используются исключительно для аутентификации (входа в аккаунт)
+          и не применяются в каких-либо иных целях.</li>
+      </ol>
+      <button type="button" class="primary" id="tos-close">Закрыть</button>
+    </div>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>

static/manifest.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "SalGram",
+  "short_name": "SalGram",
+  "description": "Безопасный мессенджер",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary",
+  "background_color": "#161618",
+  "theme_color": "#17212b",
+  "lang": "ru",
+  "dir": "ltr",
+  "categories": ["social", "communication"],
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

static/style.css

@@ -0,0 +1,1133 @@
+/* SalGram — минималистичная тёмно-серая тема. */
+
+:root {
+  --bg: #161618;            /* фон страницы */
+  --card: #1f1f23;          /* фон карточек и панелей */
+  --field: #29292e;         /* поля ввода */
+  --border: #3a3a41;
+  --text: #e8e8ea;
+  --muted: #8b8b93;
+  --accent: #44444c;        /* брендовый тёмно-серый */
+  --accent-hover: #55555e;
+  --error: #e07070;
+  --danger: #b05050;
+  --link: #8db6de;          /* @юзернеймы, подписи закрепов, авторы в группах */
+  --field-focus: #2e2e34;   /* фон поля ввода в фокусе */
+  --time-mine: #c5c5cc;     /* время в своих сообщениях */
+  --wallpaper-dim: rgba(0, 0, 0, .35); /* затемнение обоев для читаемости */
+  --radius: 12px;
+}
+
+/* ===== Цветовые темы (data-theme на <html>, выбор в «Оформлении») ===== */
+
+:root[data-theme="light"] {
+  --bg: #f1f1f4;
+  --card: #ffffff;
+  --field: #e9e9ee;
+  --border: #d7d7de;
+  --text: #1d1d21;
+  --muted: #73737e;
+  --accent: #d3d3dc;
+  --accent-hover: #c0c0cc;
+  --error: #c4453f;
+  --danger: #b05050;
+  --link: #3a6ea8;
+  --field-focus: #ffffff;
+  --time-mine: #5b5b66;
+  --wallpaper-dim: rgba(255, 255, 255, .25);
+}
+
+:root[data-theme="oled"] {
+  --bg: #000000;
+  --card: #0e0e10;
+  --field: #1b1b1e;
+  --border: #2c2c30;
+  --accent: #2e2e36;
+  --accent-hover: #3d3d47;
+  --field-focus: #232327;
+}
+
+:root[data-theme="blue"] {
+  --bg: #0e1621;
+  --card: #17212b;
+  --field: #242f3d;
+  --border: #31404e;
+  --muted: #7f91a4;
+  --accent: #2b5278;
+  --accent-hover: #36648f;
+  --link: #6ab2f2;
+  --field-focus: #2b3847;
+  --time-mine: #9fb9d4;
+}
+
+* { box-sizing: border-box; margin: 0; }
+
+/* Атрибут hidden должен побеждать любые display-правила (.modal, .form и т.д.) */
+[hidden] { display: none !important; }
+
+body {
+  font-family: "Segoe UI", system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.muted { color: var(--muted); }
+.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 16px; list-style: none; }
+.stub { color: var(--muted); font-size: 20px; }
+
+/* ===== Экран авторизации ===== */
+
+.screen {
+  min-height: 100vh;
+  min-height: 100dvh; /* мобильные браузеры: высота без учёта панелей UI */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.card {
+  width: 100%;
+  max-width: 380px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 36px 32px;
+  text-align: center;
+  animation: fade-up .5s ease both;
+}
+
+.logo { font-size: 28px; letter-spacing: 1px; }
+.tagline { color: var(--muted); font-size: 14px; margin: 6px 0 24px; }
+
+.form { display: flex; flex-direction: column; gap: 12px; }
+
+.tos-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--muted);
+  text-align: left;
+}
+.tos-row input { accent-color: var(--accent-hover); }
+
+/* ===== Поля ввода ===== */
+
+input:not([type=checkbox]), textarea, select {
+  background: var(--field);
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  font: inherit;
+  font-size: 15px;
+  color: var(--text);
+  transition: border-color .2s, background .2s;
+}
+input::placeholder, textarea::placeholder { color: var(--muted); }
+input:focus, textarea:focus, select:focus {
+  outline: none;
+  border-color: var(--accent-hover);
+  background: var(--field-focus);
+}
+textarea { resize: vertical; min-height: 90px; }
+
+/* ===== Кнопки ===== */
+
+button { font: inherit; cursor: pointer; }
+
+.primary {
+  background: var(--accent);
+  color: var(--text);
+  border: none;
+  border-radius: var(--radius);
+  padding: 12px;
+  font-size: 15px;
+  transition: background .2s, transform .1s;
+}
+.primary:hover { background: var(--accent-hover); }
+.primary:active { transform: scale(.98); }
+
+.link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--muted);
+  font-size: 14px;
+  text-decoration: underline;
+  transition: color .2s;
+}
+.link:hover { color: var(--text); }
+
+.icon-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  color: var(--muted);
+  display: inline-flex;
+  border-radius: 8px;
+  transition: color .2s, background .2s;
+}
+.icon-btn:hover { color: var(--text); background: var(--field); }
+.icon-btn svg { width: 16px; height: 16px; }
+
+.error { color: var(--error); font-size: 13px; animation: shake .3s ease; }
+
+/* ===== Макет мессенджера ===== */
+
+.app-layout { display: flex; height: 100vh; height: 100dvh; }
+
+.sidebar {
+  width: 300px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--card);
+  border-right: 1px solid var(--border);
+}
+.sidebar-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 16px 10px;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+.sidebar-head .icon-btn svg { width: 20px; height: 20px; }
+.chat-list { flex: 1; overflow-y: auto; }
+
+/* --- Поиск --- */
+.search-box {
+  padding: 0 12px 10px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.search-box input { padding: 9px 12px; font-size: 14px; width: 100%; }
+.search-opts { display: flex; gap: 8px; }
+.search-opts select { flex: 1; padding: 7px 8px; font-size: 13px; }
+
+/* --- Строки списка чатов и поисковой выдачи --- */
+.chat-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  color: var(--text);
+  text-align: left;
+  transition: background .15s;
+}
+.chat-row:hover, .chat-row.active { background: var(--field); }
+.chat-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.chat-row-info span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.chat-row-info small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.chat-row time { color: var(--muted); font-size: 11px; flex-shrink: 0; }
+
+/* Кружок-аватарка: первая буква имени либо картинка поверх */
+.ava {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+}
+.ava img, .ava video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+
+/* Нижняя панель: настройки / профиль / выход */
+.toolbar {
+  display: flex;
+  border-top: 1px solid var(--border);
+  background: var(--card);
+}
+.toolbar button {
+  flex: 1;
+  padding: 14px 0;
+  background: none;
+  border: none;
+  color: var(--muted);
+  display: flex;
+  justify-content: center;
+  transition: color .2s, background .2s;
+}
+.toolbar button:hover, .toolbar button.active { color: var(--text); background: var(--field); }
+.toolbar svg { width: 22px; height: 22px; }
+
+.main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
+.view { flex: 1; padding: 32px; animation: fade-up .3s ease both; }
+.view-center { display: flex; align-items: center; justify-content: center; }
+.panel { max-width: 460px; margin: 0 auto; width: 100%; }
+
+/* ===== Чат ===== */
+
+/* overflow: hidden + min-height: 0 не дают чату растягиваться по контенту:
+   скроллится только .messages, поэтому поле ввода всегда закреплено снизу,
+   а обои (.chat-bg) остаются размером с видимую область, а не со всю переписку. */
+.view-chat {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* Обои чата: фото (фоном) или видео, с затемнением для читаемости */
+.chat-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background-size: cover;
+  background-position: center;
+}
+.chat-bg video { width: 100%; height: 100%; object-fit: cover; }
+.chat-bg.has-wp::after { content: ""; position: absolute; inset: 0; background: var(--wallpaper-dim); }
+.view-chat > :not(.chat-bg) { position: relative; z-index: 1; }
+
+.chat-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--card);
+  cursor: pointer;
+}
+.chat-head-info { display: flex; flex-direction: column; gap: 1px; }
+.chat-head-info span:first-child { font-size: 15px; font-weight: 600; }
+.small { font-size: 12px; }
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.msg {
+  max-width: 65%;
+  align-self: flex-start;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  border-bottom-left-radius: 4px;
+  padding: 8px 12px 6px;
+  animation: fade-up .2s ease both;
+  position: relative;
+}
+/* Аватарка автора в группе — слева от пузыря, выровнена по нижнему краю */
+.msg.has-ava { margin-left: 42px; }
+.msg-ava {
+  position: absolute;
+  left: -42px;
+  bottom: 0;
+  width: 32px;
+  height: 32px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.msg.mine {
+  align-self: flex-end;
+  background: var(--accent);
+  border-color: transparent;
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: 4px;
+}
+.msg p { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
+.msg img { max-width: 320px; max-height: 320px; border-radius: 8px; display: block; cursor: pointer; }
+.msg time { display: block; text-align: right; font-size: 10px; color: var(--muted); margin-top: 3px; }
+.msg.mine time { color: var(--time-mine); }
+
+/* Автор сообщения в группе (кликабельно — открывает профиль) */
+.msg-author {
+  display: block;
+  color: var(--link);
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 2px;
+  cursor: pointer;
+}
+.msg-author:hover { text-decoration: underline; }
+
+.msg-form {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--card);
+  transition: background .2s;
+}
+.msg-form.drag { background: var(--field); }
+.msg-form input[type=text], #msg-input { flex: 1; padding: 10px 14px; font-size: 14px; }
+.icon-btn.big { padding: 8px; }
+.icon-btn.big svg { width: 20px; height: 20px; }
+
+/* Поле ввода сообщения (contenteditable: поддерживает форматирование) */
+.msg-input {
+  position: relative;
+  background: var(--field);
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  color: var(--text);
+  line-height: 1.4;
+  max-height: 140px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  outline: none;
+  cursor: text;
+  transition: border-color .2s, background .2s;
+}
+.msg-input:focus { border-color: var(--accent-hover); background: var(--field-focus); }
+.msg-input.is-empty::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  color: var(--muted);
+  pointer-events: none;
+}
+
+/* Стили форматирования текста (в сообщениях и в поле ввода) */
+.f-b { font-weight: 700; }
+.f-i { font-style: italic; }
+.f-u { text-decoration: underline; }
+.f-s { text-decoration: line-through; }
+.f-u.f-s, .f-s .f-u, .f-u .f-s { text-decoration: underline line-through; }
+.f-code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
+  background: rgba(127,127,127,.18); border-radius: 4px; padding: 0 3px; }
+.f-quote { display: inline-block; border-left: 3px solid var(--accent-hover);
+  padding-left: 8px; margin: 1px 0; }
+/* Абсолютные размеры — чтобы вложенные/перекрывающие пометки не складывались,
+   а «Обычный» сбрасывал размер обратно к базовому (14px). */
+.f-size[data-size=huge]   { font-size: 26px; }
+.f-size[data-size=big]    { font-size: 19px; }
+.f-size[data-size=normal] { font-size: 14px; }
+.f-size[data-size=small]  { font-size: 11px; }
+.f-size[data-size=tiny]   { font-size: 9px; }
+
+/* Разделитель/заголовок в контекстном меню форматирования */
+.msg-menu-sep {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--muted);
+  padding: 6px 12px 2px;
+  border-top: 1px solid var(--border);
+  margin-top: 2px;
+}
+
+/* Панель ответа над полем ввода */
+.reply-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--card);
+}
+.reply-bar-icon { width: 18px; height: 18px; color: var(--accent-hover); flex-shrink: 0; }
+.reply-bar-info { flex: 1; min-width: 0; border-left: 2px solid var(--accent-hover); padding-left: 8px; }
+.reply-bar-info small { display: block; color: var(--link); font-weight: 600; font-size: 12px; }
+.reply-bar-info span { display: block; color: var(--muted); font-size: 13px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* Галочки доставки/прочтения у своих сообщений */
+.ticks { display: inline-block; margin-left: 4px; vertical-align: baseline; }
+.ticks::after { content: "✓"; }
+.ticks.read::after { content: "✓✓"; letter-spacing: -3px; padding-right: 3px; }
+
+/* Кнопка-сворачивание списка контактов */
+.contacts-toggle {
+  display: flex; align-items: center; gap: 4px;
+  background: none; border: none; cursor: pointer; color: var(--text); padding: 0;
+}
+.contacts-toggle h3 { margin: 0; }
+.contacts-chevron { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
+.contacts-toggle.open .contacts-chevron { transform: rotate(90deg); }
+
+.chat-blocked {
+  padding: 16px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 14px;
+  border-top: 1px solid var(--border);
+  background: var(--card);
+}
+.chat-error { padding: 6px 16px; text-align: center; }
+
+/* ===== Профиль другого пользователя ===== */
+
+.avatar.readonly { cursor: default; }
+.avatar.readonly:hover { border-color: var(--border); transform: none; }
+.profile-actions { display: flex; gap: 10px; margin: 6px 0 2px; }
+.small-btn { padding: 8px 14px; font-size: 13px; }
+.danger-btn { color: var(--error); }
+.write-btn { margin: 10px 0 6px; padding: 10px 32px; }
+
+.hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
+.num { width: 90px; text-align: center; }
+.profile-actions.bottom { margin-top: 24px; }
+.danger-link { color: var(--error); }
+
+/* Галочка администратора */
+.badge { width: 15px; height: 15px; color: #6da8dc; margin-left: 5px; vertical-align: -2px; }
+
+/* Кликабельные @юзернеймы */
+.mention { color: var(--link); cursor: pointer; }
+.mention:hover { text-decoration: underline; }
+
+/* Кликабельные ссылки в сообщениях */
+.msg-link {
+  color: var(--link);
+  text-decoration: underline;
+  word-break: break-all; /* длинные URL не растягивают пузырь */
+}
+.msg-link:hover { text-decoration: none; }
+
+/* Красная надпись вместо поиска у заблокированного аккаунта */
+.banned-banner {
+  color: var(--error);
+  font-weight: 600;
+  font-size: 14px;
+  text-align: center;
+  padding: 9px 0;
+}
+
+/* Кнопка удаления переписки в шапке чата */
+.chat-head .chat-del { margin-left: auto; }
+.chat-head .chat-del:hover { color: var(--error); }
+
+/* Реакции под сообщением */
+.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
+.reaction-chip {
+  background: var(--field);
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 2px 8px;
+  font-size: 13px;
+  color: var(--text);
+  transition: border-color .15s, background .15s;
+}
+.reaction-chip:hover { border-color: var(--accent-hover); }
+.reaction-chip.mine { border-color: var(--accent-hover); background: var(--bg); }
+
+/* Контекстное меню (ПКМ): реакции / закрепить / изменить / удалить */
+.msg-menu {
+  position: fixed;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
+  animation: fade-in .15s ease both;
+}
+.msg-menu-reactions { display: flex; gap: 2px; align-items: center; }
+.msg-menu-reactions button, .msg-menu-grid button {
+  background: none;
+  border: 1px solid transparent;
+  font-size: 17px;
+  padding: 4px 6px;
+  border-radius: 8px;
+  transition: background .15s, border-color .15s;
+}
+.msg-menu-reactions button:hover, .msg-menu-grid button:hover { background: var(--field); }
+.msg-menu-reactions button.pinned, .msg-menu-grid button.pinned {
+  border-color: var(--accent-hover); /* закреплённый эмодзи подсвечен */
+}
+.msg-menu-reactions .more {
+  color: var(--muted);
+  font-size: 14px;
+  padding: 4px 8px;
+}
+.msg-menu-reactions .more:hover { color: var(--text); }
+
+/* Полная палитра реакций (раскрывается кнопкой «⌄») */
+.msg-menu-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 2px;
+  max-width: 296px;
+  max-height: 190px;
+  overflow-y: auto;
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+  padding-top: 6px;
+}
+.msg-menu-item {
+  background: none;
+  border: none;
+  color: var(--text);
+  font-size: 14px;
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 8px;
+  transition: background .15s;
+}
+.msg-menu-item:hover { background: var(--field); }
+.msg-menu-item.danger { color: var(--error); }
+
+/* Плавающая панель форматирования над выделенным текстом в поле ввода */
+.fmt-bar {
+  position: fixed;
+  z-index: 35;
+  display: flex;
+  gap: 2px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
+  animation: fade-in .12s ease both;
+}
+.fmt-bar-btn {
+  background: none;
+  border: none;
+  color: var(--text);
+  font-size: 15px;
+  line-height: 1;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 8px;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: background .15s;
+}
+.fmt-bar-btn:hover { background: var(--field); }
+.fmt-bar-btn svg { display: block; }
+.fmt-bar-clear { border-left: 1px solid var(--border); border-radius: 0 7px 7px 0; margin-left: 2px; }
+.fmt-bar-btn small { font-size: 10px; vertical-align: super; }
+.fmt-bar-btn s { text-decoration: line-through; }
+.fmt-bar-swatch {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  vertical-align: middle;
+  background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red);
+}
+
+/* Просмотр фото внутри мессенджера (лайтбокс) */
+.photo-modal { cursor: zoom-out; z-index: 40; }
+.photo-modal img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }
+
+/* Панель закреплённого сообщения */
+.pinned-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  background: var(--card);
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+}
+.pinned-bar > svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
+.pinned-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.pinned-info small { color: var(--link); font-size: 11px; }
+.pinned-info span {
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Подсветка сообщения при переходе из закреплённой панели */
+.msg.flash { box-shadow: 0 0 0 2px var(--accent-hover); transition: box-shadow .4s; }
+
+/* Видео в сообщении */
+.msg video { max-width: 320px; max-height: 320px; border-radius: 8px; display: block; }
+
+/* Карточка файла в сообщении */
+.file-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 4px;
+  color: var(--text);
+  text-decoration: none;
+  border-radius: 8px;
+  transition: background .15s;
+}
+.file-row:hover { background: rgba(255, 255, 255, .05); }
+.file-row svg { width: 26px; height: 26px; color: var(--muted); flex-shrink: 0; }
+.file-info { display: flex; flex-direction: column; min-width: 0; }
+.file-info span {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 240px;
+}
+.file-info small { color: var(--muted); font-size: 11px; }
+.file-preview-btn { font-size: 13px; margin: 2px 4px; align-self: flex-start; }
+.file-preview {
+  margin-top: 4px;
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, .18);
+  border-radius: 8px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.4;
+  max-height: 90px;
+  overflow: hidden;
+}
+
+/* Аудио-сообщения и голосовые */
+.audio-msg { display: flex; flex-direction: column; gap: 6px; min-width: 220px; max-width: 320px; }
+.audio-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--text);
+}
+.audio-head svg { width: 20px; height: 20px; color: var(--accent-hover); flex-shrink: 0; }
+.audio-head span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+.audio-head small { color: var(--muted); font-size: 12px; flex-shrink: 0; }
+.audio-msg audio { width: 100%; height: 36px; }
+.audio-msg.voice audio { filter: saturate(0); }
+
+/* Панель записи голосового сообщения */
+.rec-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+}
+.rec-bar .rec-time { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text); }
+.rec-bar .rec-hint { color: var(--muted); font-size: 13px; flex: 1; }
+.rec-bar .rec-cancel:hover { color: #e25; }
+.rec-dot {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #e25;
+  animation: rec-pulse 1s infinite;
+  flex-shrink: 0;
+}
+@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
+
+/* Окно предпросмотра файла (PDF) */
+.preview-modal { z-index: 40; }
+.preview-card {
+  width: min(900px, 94vw);
+  height: 88vh;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: fade-up .3s ease both;
+}
+.preview-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  font-size: 14px;
+}
+.preview-head span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.preview-card iframe { flex: 1; border: none; background: #fff; }
+
+/* Кнопки Забанить/Отклонить в сообщении-жалобе */
+.report-actions { display: flex; gap: 8px; margin-top: 8px; }
+
+/* Всплывающее уведомление */
+.toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 18px;
+  font-size: 14px;
+  z-index: 20;
+  animation: fade-up .25s ease both;
+  max-width: 90vw;
+}
+
+/* ===== Настройки ===== */
+
+.settings-page { display: flex; flex-direction: column; gap: 10px; }
+.settings-page.appear { animation: slide-in .3s ease both; }
+.settings-page h2 { font-size: 20px; margin-bottom: 8px; }
+/* Подзаголовки секций внутри раздела «Приложение» (ПК-версия) */
+.settings-sub { font-size: 13px; font-weight: 600; color: var(--muted);
+  text-transform: uppercase; letter-spacing: .4px; margin: 6px 0 -2px; }
+
+.settings-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  color: var(--text);
+  font-size: 15px;
+  text-align: left;
+  transition: background .2s, border-color .2s;
+}
+.settings-item:hover { background: var(--field); border-color: var(--accent-hover); }
+.settings-item svg { width: 18px; height: 18px; color: var(--muted); }
+.settings-item.danger { color: var(--error); border-color: var(--danger); }
+.settings-item.danger:hover { background: rgba(176, 80, 80, .12); }
+
+.settings-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 14px;
+  padding: 0;
+  align-self: flex-start;
+  transition: color .2s;
+}
+.settings-back:hover { color: var(--text); }
+.settings-back svg { width: 16px; height: 16px; }
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px 16px;
+  font-size: 14px;
+}
+.settings-row select { padding: 8px 10px; font-size: 14px; }
+
+/* Кэш сообщений: вес + кнопка очистки в одной строке */
+.cache-row { display: flex; align-items: center; gap: 14px; }
+
+/* ===== Профиль группы ===== */
+
+.ava.big { width: 120px; height: 120px; font-size: 44px; margin-bottom: 12px; }
+/* Владелец группы меняет аватарку кликом по кружку */
+.ava.editable { cursor: pointer; transition: box-shadow .2s; }
+.ava.editable:hover { box-shadow: 0 0 0 2px var(--accent-hover); }
+.invite-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-width: 100%;
+  margin-top: 4px;
+}
+.invite-link {
+  font-size: 13px;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ===== Профиль ===== */
+
+.profile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+
+.avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: var(--field);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  cursor: pointer;
+  margin-bottom: 12px;
+  transition: border-color .2s, transform .2s;
+}
+.avatar:hover { border-color: var(--accent-hover); transform: scale(1.03); }
+.avatar img, .avatar video.avatar-media { width: 100%; height: 100%; object-fit: cover; }
+.avatar svg { width: 36px; height: 36px; color: var(--muted); }
+
+.profile-row { display: flex; align-items: center; gap: 8px; max-width: 100%; }
+.profile-row h2 { font-size: 22px; }
+.profile-row h3 { font-size: 16px; }
+.desc {
+  font-size: 14px;
+  max-width: 360px;
+  text-align: center;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.contacts { width: 100%; margin-top: 28px; }
+.contacts .profile-row { justify-content: center; margin-bottom: 10px; }
+.contacts ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.contacts li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 14px;
+  font-size: 14px;
+}
+.contacts li small { color: var(--muted); flex: 1; }
+
+/* ===== Модальные окна ===== */
+
+.modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, .6);
+  backdrop-filter: blur(3px);
+  animation: fade-in .25s ease both;
+  z-index: 10;
+}
+
+.modal-card {
+  width: 100%;
+  max-width: 560px;
+  max-height: 80vh;
+  overflow-y: auto;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px;
+  animation: fade-up .3s ease both;
+}
+.modal-card h2 { font-size: 18px; margin-bottom: 16px; }
+.modal-card ol { padding-left: 20px; display: grid; gap: 10px; }
+.modal-card li { font-size: 14px; line-height: 1.55; color: var(--muted); }
+.modal-card li b { color: var(--text); }
+.modal-card .primary { width: 100%; margin-top: 20px; }
+
+/* Диалоги с полями (генерируются в JS) */
+.dialog { max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
+.dialog h2 { margin-bottom: 4px; }
+.dialog-buttons { display: flex; justify-content: flex-end; gap: 16px; align-items: center; }
+.dialog .primary, .modal-card.dialog .primary { width: auto; margin-top: 0; padding: 10px 20px; }
+
+/* Пикер пользователей (добавление в группу): список контактов в диалоге */
+.member-picker { list-style: none; padding: 0; margin: 0; display: flex;
+  flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; }
+.member-picker li {
+  display: flex; align-items: center; gap: 8px;
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 10px 14px; font-size: 14px; color: var(--text);
+}
+.member-picker li small { color: var(--muted); flex: 1; }
+.member-picker li.empty { color: var(--muted); justify-content: center; cursor: default; }
+
+/* ===== GIF ===== */
+
+.gif-btn { font-size: 12px; font-weight: 700; letter-spacing: .5px; }
+.msg-gif { max-width: 320px; max-height: 320px; border-radius: 8px; display: block; cursor: pointer; }
+
+/* Панель чата с ботом @addgif (вместо поля ввода) */
+.addgif-bar { padding: 12px 16px; border-top: 1px solid var(--border); }
+.addgif-bar .primary { width: 100%; }
+
+/* Пикер GIF: поиск + сетка превью */
+.gif-picker { max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
+.gif-picker input { width: 100%; }
+.gif-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px; max-height: 55vh; overflow-y: auto; min-height: 80px;
+}
+.gif-grid img {
+  width: 100%; height: 120px; object-fit: cover; border-radius: 8px;
+  cursor: pointer; background: var(--bg); transition: transform .15s;
+}
+.gif-grid img:hover { transform: scale(1.04); }
+.gif-grid .empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 24px 0; }
+
+/* Кнопка выбора файла в диалоге добавления GIF */
+.gif-file-label {
+  display: block; text-align: center; padding: 12px; cursor: pointer;
+  background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius);
+  font-size: 14px; color: var(--text); word-break: break-all;
+}
+.gif-file-label:hover { border-color: var(--accent-hover); }
+
+/* ===== Каналы: комментарии ===== */
+
+.group-channel-extra { display: flex; flex-direction: column; align-items: center;
+  gap: 8px; width: 100%; margin-top: 4px; }
+.comments-link { display: inline-block; margin-top: 4px; font-size: 13px; padding: 0; }
+
+/* Панель подписчика канала: «Открыть чат» (слева) + «Отписаться» (справа) */
+.channel-bar { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); }
+.channel-bar .primary { flex: 1; }
+
+/* Метка дубля поста канала в группе-обсуждении */
+.channel-post-tag { display: block; font-size: 12px; color: var(--accent);
+  font-weight: 600; margin-bottom: 4px; }
+/* Цитата сообщения, на которое отвечает комментарий/ответ */
+.reply-quote { font-size: 12px; color: var(--muted); border-left: 2px solid var(--accent);
+  padding: 2px 0 2px 8px; margin-bottom: 4px; max-width: 320px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.reply-quote.clickable { cursor: pointer; }
+.reply-quote.clickable:hover { border-left-color: var(--accent-hover); }
+.reply-quote small { display: block; color: var(--link); font-weight: 600;
+  overflow: hidden; text-overflow: ellipsis; }
+.reply-quote span { display: block; overflow: hidden; text-overflow: ellipsis; }
+.msg.mine .reply-quote { border-left-color: rgba(255,255,255,.5); }
+.msg.mine .reply-quote small { color: #fff; }
+
+/* ===== Окно комментариев (тред) ===== */
+
+.thread-modal {
+  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
+  background: var(--bg);
+}
+@media (min-width: 720px) {
+  .thread-modal { inset: 0 0 0 auto; width: 420px; box-shadow: -2px 0 16px rgba(0,0,0,.4);
+    border-left: 1px solid var(--border); }
+}
+.thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
+  background: var(--card); border-bottom: 1px solid var(--border); flex-shrink: 0; }
+.thread-title { font-weight: 600; flex: 1; }
+.thread-root { padding: 12px 16px; border-bottom: 1px solid var(--border);
+  background: var(--card); flex-shrink: 0; max-height: 35vh; overflow-y: auto; }
+.thread-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px;
+  display: flex; flex-direction: column; gap: 10px; }
+.comment { background: var(--card); border-radius: 10px; padding: 8px 10px;
+  max-width: 92%; align-self: flex-start; word-wrap: break-word; }
+.comment.mine { align-self: flex-end; background: var(--accent); color: #fff; }
+.comment.root { background: transparent; padding: 0; max-width: 100%; }
+.comment p { margin: 0; white-space: pre-wrap; word-break: break-word; }
+.comment time { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
+.comment.mine time { color: rgba(255,255,255,.8); }
+.comment img { max-width: 240px; border-radius: 8px; display: block; cursor: pointer; }
+.comment-reply { font-size: 12px; padding: 0; margin-top: 2px; }
+.thread-reply { display: flex; align-items: center; gap: 8px; padding: 6px 16px;
+  background: var(--card); border-top: 1px solid var(--border); font-size: 13px; }
+.thread-reply span { flex: 1; color: var(--muted); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+.thread-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
+  border-top: 1px solid var(--border); background: var(--card); }
+.thread-input { flex: 1; padding: 10px 12px; border-radius: 20px;
+  border: 1px solid var(--border); background: var(--bg); color: var(--text); }
+
+/* ===== Модерация ===== */
+
+.group-mod-row { display: flex; justify-content: center; width: 100%; margin-top: 8px; }
+.member-actions { width: 28px; height: 28px; font-size: 18px; line-height: 1;
+  flex-shrink: 0; color: var(--muted); }
+.member-actions:hover { color: var(--text); }
+
+/* ===== Звонки ===== */
+
+/* Историческая запись о звонке в чате (звонки больше не поддерживаются) */
+.call-msg { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+.call-msg span { font-size: 14px; }
+
+/* ===== Анимации ===== */
+
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(14px); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes slide-in {
+  from { opacity: 0; transform: translateX(24px); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes shake {
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}
+
+/* Анимация для переключения форм авторизации */
+.form.appear { animation: fade-up .35s ease both; }
+
+/* ===== Мобильная версия ===== */
+
+/* Кнопки «Назад» существуют только на узких экранах */
+.mobile-back { display: none; }
+
+/* Стиль как у .settings-back: стрелка + подпись в начале панели */
+.panel-back {
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 14px;
+  padding: 0;
+  align-self: flex-start;
+  margin-bottom: 4px;
+  transition: color .2s;
+}
+.panel-back:hover { color: var(--text); }
+.panel-back svg { width: 16px; height: 16px; }
+
+@media (max-width: 700px) {
+  /* Одна панель на экран: список чатов либо открытый вид.
+     Класс show-main на #app ставится в openView(). */
+  .sidebar { width: 100%; border-right: none; }
+  .main { display: none; }
+  .app-layout.show-main .sidebar { display: none; }
+  .app-layout.show-main .main { display: flex; }
+
+  .mobile-back { display: inline-flex; }
+  .chat-head .mobile-back { margin-left: -6px; }
+  .chat-head .mobile-back svg { width: 20px; height: 20px; }
+
+  .view { padding: 20px 16px; }
+  .view-chat { padding: 0; } /* у чата отступов нет (правило выше перебило бы базовое) */
+  .panel { max-width: none; }
+
+  /* Пузыри и вложения занимают почти всю ширину */
+  .msg { max-width: 85%; }
+  .msg img, .msg video { max-width: 100%; }
+  .file-info span { max-width: 170px; }
+  .desc { max-width: 100%; }
+
+  /* Долгое нажатие открывает меню — отключаем выделение текста и
+     системную «лупу» iOS на сообщениях и строках чатов */
+  .msg, .chat-row, .pinned-bar {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Палитра реакций не шире экрана */
+  .msg-menu-grid { max-width: calc(100vw - 32px); }
+
+  /* iOS зумит страницу при фокусе полей со шрифтом < 16px */
+  input:not([type=checkbox]), textarea, select { font-size: 16px; }
+}

static/sw.js

@@ -0,0 +1,76 @@
+/* SalGram service worker: оболочка PWA + Web Push уведомления.
+   Версию кэша поднимать при изменении статики, чтобы клиенты обновились. */
+const CACHE = "salgram-v3";
+const SHELL = ["/", "/index.html", "/app.js", "/style.css",
+  "/manifest.webmanifest", "/icon-192.png", "/icon-512.png"];
+
+self.addEventListener("install", e => {
+  self.skipWaiting();
+  e.waitUntil(caches.open(CACHE).then(c => c.addAll(SHELL).catch(() => {})));
+});
+
+self.addEventListener("activate", e => {
+  e.waitUntil((async () => {
+    const keys = await caches.keys();
+    await Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)));
+    await self.clients.claim();
+  })());
+});
+
+/* Оболочка кэшируется по стратегии «сеть в приоритете» (network-first): пока есть
+   связь, всегда отдаём свежий код и обновляем кэш — так правки в app.js/style.css
+   доходят до клиента сразу, без ручного поднятия версии. Без сети — отдаём из кэша.
+   API, медиа и WebSocket всегда идут напрямую в сеть. */
+self.addEventListener("fetch", e => {
+  const req = e.request;
+  const url = new URL(req.url);
+  if (req.method !== "GET" || url.origin !== location.origin) return;
+  if (url.pathname.startsWith("/api/") || url.pathname === "/ws") return;
+  if (req.mode === "navigate") {
+    e.respondWith(networkFirst(req, "/index.html"));
+    return;
+  }
+  if (SHELL.includes(url.pathname))
+    e.respondWith(networkFirst(req, url.pathname));
+});
+
+/* Берём из сети, по пути кладём свежую копию в кэш; офлайн — отдаём из кэша. */
+async function networkFirst(req, cacheKey) {
+  try {
+    const res = await fetch(req);
+    if (res && res.ok) {
+      const copy = res.clone();
+      caches.open(CACHE).then(c => c.put(cacheKey, copy)).catch(() => {});
+    }
+    return res;
+  } catch {
+    return (await caches.match(cacheKey)) || (await caches.match(req)) || Response.error();
+  }
+}
+
+/* Web Push: уведомление о новом сообщении, когда приложение закрыто. */
+self.addEventListener("push", e => {
+  let d = {};
+  try { d = e.data ? e.data.json() : {}; } catch { /* ignore */ }
+  e.waitUntil(self.registration.showNotification(d.title || "SalGram", {
+    body: d.body || "Новое сообщение",
+    icon: "/icon-192.png",
+    badge: "/icon-192.png",
+    tag: d.peer ? "dm-" + d.peer : d.group ? "grp-" + d.group : "salgram",
+    renotify: true,
+    data: d,
+  }));
+});
+
+/* Клик по уведомлению: фокус на открытое окно или открытие приложения. */
+self.addEventListener("notificationclick", e => {
+  e.notification.close();
+  const data = e.notification.data || {};
+  e.waitUntil((async () => {
+    const all = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+    for (const c of all) {
+      if ("focus" in c) { await c.focus(); c.postMessage({ type: "notification-click", data }); return; }
+    }
+    if (self.clients.openWindow) await self.clients.openWindow("/");
+  })());
+});