/* ============================================================================= chat-theme.css — Оформление переписки AYA-Connect (ТЗ §1, §11, §12) Две темы (день/ночь), пузыри с вертикальным градиентом + тень, обои-паттерн. Vanilla JS PWA. Системный шрифт, Dynamic Type. ───────────────────────────────────────────────────────────────────────── КАРТА ИНТЕГРАЦИИ (для координатора) ───────────────────────────────────────────────────────────────────────── Этот файл НИЧЕГО не правит в существующих CSS. Он ПЕРЕОПРЕДЕЛЯЕТ правила из chat-layout.css за счёт порядка подключения и более высокой/равной специфичности. Все цвета вынесены в CSS-переменные (§11.3). ПОДКЛЮЧЕНИЕ (КРИТИЧНО): Этот файл ОБЯЗАН подключаться в ПОСЛЕ base.css И ПОСЛЕ chat-layout.css, иначе каскад не сработает: <-- сюда КАКИЕ СЕЛЕКТОРЫ ПЕРЕОПРЕДЕЛЯЕМ (имена взяты 1:1 из chat-layout.css): 1. .messages-list-mobile — было: радиальные градиенты + linear-gradient #eef2f6→#e8edf2 — стало: --chat-bg (градиент по §11.1) + обои-паттерн --chat-pattern. (chat-layout.css L228-244, день и ночь) 2. .message-mobile — было: max-width:78% (L252) — стало: max-width:82% (§11.2) 3. .message-content-mobile — было: padding/radius/font из токенов (L255-260) — стало: radius 16px, текст 17px / 1.4 / 400, системный шрифт, тень. 4. .message-mobile.own .message-content-mobile — было: светло-бирюзовый градиент #e3f4f0→#cfeae3, текст var(--text) (L261-265) — стало: --bubble-own (петроль 1f7d92→105c6c), текст белый, хвостик 4px. 5. .message-mobile.other .message-content-mobile — было: белый градиент #ffffff→#f3f6f9, текст var(--text) (L266-270) — стало: --bubble-other (бел.→#f3f6f7), текст --bubble-other-text, хвостик 4px. 6. body.dark-theme .message-mobile.own/.other .message-content-mobile — было: var(--bubble-out) / var(--bubble-in) (L271-274, L339) — стало: ночные значения переменных §11.1. ВОЗМОЖНЫЕ КОНФЛИКТЫ (на что смотреть координатору): A. РАЗМЕТКА. В DOM используется именно .message-mobile / .message-content-mobile (НЕ .msg/.msg-text — это вторая «telegram-style» ветка в конце chat-layout.css, она НЕ участвует в текущем рендере). Если когда-то переключитесь на .msg — нужно будет добавить аналогичные правила для .msg-text здесь. B. AYA-ГОЛОС. .message-mobile.other.aya-voice .message-content-mobile и .myaya-messages ... задают --brand-soft фон (chat-layout L276-279, L340-341). Их МЫ НЕ ТРОГАЕМ умышленно (особый кейс AYA). Они победят наш «other», т.к. имеют большую специфичность — это ожидаемо. C. ВРЕМЯ В ПУЗЫРЕ своего сообщения. Цвет времени берётся из chat-layout (.message-mobile.own .message-time-mobile = var(--text-secondary)). Время рендерится ПОД пузырём (отдельный элемент), поэтому на белом тексте внутри петрольного пузыря оно не страдает. Если решите класть время ВНУТРЬ пузыря — задайте ему светлый цвет. D. .message-mobile.selected (мультивыбор) — подсветка фоном; не конфликтует. E. ОБОИ. Паттерн ниже — ВРЕМЕННЫЙ inline-SVG плейсхолдер (точки тон-в-тон, §12 «заглушки»). Заменить на финальный паттерн доменов от Глеба (§12.2/12.3): достаточно переопределить --chat-pattern-image (см. ниже) URL'ом на спрайт. ============================================================================= */ /* ───────────────────────── 1. ПЕРЕМЕННЫЕ ТЕМ (§11.1) ───────────────────────── */ :root{ /* Фон чата — перламутр-градиент (день) */ --chat-bg: linear-gradient(180deg, #f4f6f7 0%, #e9eef0 50%, #dfe6e9 100%); /* Паттерн обоев — нейтрально-серый, тон-в-тон (день) */ --chat-pattern: #cfd4d6; /* Свой пузырь — петроль, вертикальный градиент (сверху светлее) */ --bubble-own: linear-gradient(180deg, #1f7d92 0%, #105c6c 100%); --bubble-own-text: #ffffff; /* Чужой пузырь — белый → светло-серый */ --bubble-other: linear-gradient(180deg, #ffffff 0%, #f3f6f7 100%); --bubble-other-text: #000000; /* Системный шрифт переписки (§1.3) */ --chat-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; /* База типографики пузыря (uvelicheno po prosbe Gleba) */ --chat-text-size: 18px; --chat-text-lh: 1.4; --chat-text-weight: 400; /* Геометрия пузыря (§1.4 / §11.2) */ --bubble-radius: 16px; /* скругление */ --bubble-tail: 4px; /* хвостик */ --bubble-max: 82%; /* макс. ширина */ /* Тень пузыря — лёгкий объём «как iMessage» */ --bubble-shadow-own: 0 1px 2px rgba(0,56,65,.18), 0 4px 14px rgba(0,56,65,.12), inset 0 1px 0 rgba(255,255,255,.18); --bubble-shadow-other: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.55); } body.dark-theme{ /* Фон чата — петроль-градиент (ночь) */ --chat-bg: linear-gradient(180deg, #0c1d22 0%, #11272d 100%); /* Паттерн обоев (ночь) */ --chat-pattern: #3d6671; /* Свой пузырь (ночь) */ --bubble-own: linear-gradient(180deg, #1f7185 0%, #155a6c 100%); --bubble-own-text: #ffffff; /* Чужой пузырь (ночь) */ --bubble-other: linear-gradient(180deg, #243338 0%, #1a2629 100%); --bubble-other-text: #e8edee; /* Тени в ночи — мягче, без светлого inset-блика */ --bubble-shadow-own: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.30); --bubble-shadow-other: 0 1px 2px rgba(0,0,0,.30), 0 6px 16px rgba(0,0,0,.28); } /* ──────────────────── 2. ФОН ЛЕНТЫ + ОБОИ-ПАТТЕРН (§11.1, §12) ───────────────── Слои сверху вниз: паттерн (--chat-pattern-image) → градиент фона (--chat-bg). Паттерн — ВРЕМЕННЫЙ плейсхолдер: мелкие точки тон-в-тон через inline-SVG. currentColor SVG не поддерживает в data-uri фоне, поэтому цвет «вшит» в две готовые маски (день/ночь). Замена на иконки доменов от Глеба — через переопре- деление background-image у .messages-list-mobile (см. КАРТА ИНТЕГРАЦИИ, п. E). */ .messages-list-mobile{ background: /* временный паттерн: точки тон-в-тон с --chat-pattern (день #cfd4d6) */ url("data:image/svg+xml;utf8,"), var(--chat-bg); background-repeat: repeat, no-repeat; background-size: 32px 32px, cover; background-attachment: scroll, scroll; } body.dark-theme .messages-list-mobile{ background: /* временный паттерн (ночь #3d6671) */ url("data:image/svg+xml;utf8,"), var(--chat-bg); background-repeat: repeat, no-repeat; background-size: 32px 32px, cover; } /* ─────────────────────────── 3. ПУЗЫРИ (§11.2) ─────────────────────────────── */ .message-mobile{ max-width: var(--bubble-max); /* 82% (было 78%) */ } .message-content-mobile{ border-radius: var(--bubble-radius); /* 16px со всех углов; хвостик ниже */ font-family: var(--chat-font); /* системный шрифт */ font-size: var(--chat-text-size); /* 17px база (Dynamic Type через системный масштаб) */ line-height: var(--chat-text-lh); /* 1.4 */ font-weight: var(--chat-text-weight); /* 400 */ word-wrap: break-word; word-break: break-word; } /* Свой пузырь — петроль, вертикальный градиент, белый текст, хвостик справа-снизу */ .message-mobile.own .message-content-mobile{ background: var(--bubble-own); color: var(--bubble-own-text); border: none; border-bottom-right-radius: var(--bubble-tail); /* хвостик 4px */ box-shadow: var(--bubble-shadow-own); } /* Чужой пузырь — светлый градиент, тёмный текст, хвостик слева-снизу */ .message-mobile.other .message-content-mobile{ background: var(--bubble-other); color: var(--bubble-other-text); border: none; border-bottom-left-radius: var(--bubble-tail); /* хвостик 4px */ box-shadow: var(--bubble-shadow-other); } /* ───────────────────────── НОЧНАЯ ТЕМА — пузыри ────────────────────────────── */ body.dark-theme .message-mobile.own .message-content-mobile{ background: var(--bubble-own); color: var(--bubble-own-text); box-shadow: var(--bubble-shadow-own); } body.dark-theme .message-mobile.other .message-content-mobile{ background: var(--bubble-other); color: var(--bubble-other-text); border: none; box-shadow: var(--bubble-shadow-other); }