/* Самодостаточный цветной шрифт эмодзи (Noto Color Emoji, COLRv1, OFL).
   Не зависит от системных шрифтов — гарантирует цветную отрисовку без чёрных контуров
   (Chrome на Windows по умолчанию падает на монохромный Segoe UI Symbol). */
@font-face {
	font-family: 'Noto Color Emoji';
	src: url('/vendor/emoji/NotoColorEmoji.ttf') format('truetype');
	font-display: swap;
	unicode-range: U+1F000-1FAFF, U+2600-27BF, U+2B00-2BFF, U+2190-21FF, U+FE0F, U+200D;
}

/* ==================== ПАЛИТРА (design tokens) ====================
   Все цвета интерфейса живут здесь и только здесь. Роль, а не оттенок:
   один и тот же белый цвет — это фон карточки (--surface-app), фон пузыря
   чужого сообщения (--bubble-in) и текст на синей кнопке (--on-accent).
   Поэтому «цвет на цвет» в тёмной теме невозможно по построению.

   Правило файла: значение токена в :root — ровно то, что раньше стояло
   литералом, поэтому светлая тема не изменилась ни на пиксель (это
   проверяет tests/ChatCssTokensTest.php по эталону
   tests/fixtures/chat_css_light_palette.json). Близкие, но разные
   оттенки (#f0f2f5 и #f5f6f6) — разные токены: в тёмной теме они
   схлопываются, в светлой это разные поверхности.

   Тёмная тема — переопределение тех же имён в html[data-theme="dark"]
   в конце файла. Атрибут ставит inline-скрипт в chat-header.php до
   первой отрисовки, переключатель — в настройках (theme.js).
*/
:root {
	color-scheme: light;

	/* Поверхности */
	--surface-body: #efefef;
	--surface-app: #ffffff;
	--surface-chrome: #f0f2f5;
	--surface-chrome-hover: #e5e9ec;
	--surface-selected: #f0f2f5;
	--surface-screen: #f1f1f1;
	--surface-chat: #efeae2;
	--surface-canvas: #ededec;
	--surface-canvas-dot-a: #d3d3d3;
	--surface-canvas-dot-b: #e1e1e1;
	--surface-avatar: #dfe5e7;
	--surface-disabled: #c7c9d9;
	--surface-input-prefix: #f5f5f5;
	--surface-badge: #e8eaff;
	--surface-desc: #f7f7f7;
	--surface-picker: #f7f9fa;
	--surface-chip-preview: #f3f4f6;
	--surface-sync: #f4f6f8;
	--surface-hint: #f8fafc;
	--surface-chip-inverse: #ffffff;
	/* Слой, приподнятый над подложкой самого футера чата (--surface-chrome):
	   поле ввода, панель ответа/редактирования, превью вложения. В светлой теме
	   это тот же белый, что у карточек (--surface-app), но роль отдельная: в
	   тёмной теме слой над футером должен быть светлее футера, иначе проваливается
	   в него дырой. --surface-app для этого не годится — он темнее футера. */
	--surface-raised: #ffffff;
	/* Подложка QR-кода: всегда белая в обеих темах — контраст нужен сканеру,
	   а не интерфейсу. */
	--qr-surface: #ffffff;

	/* Наведение */
	--hover: #e9edef;
	--hover-row: #f0f2f5;
	--hover-row-2: #f5f6f6;
	--hover-row-3: #f8f9fb;
	--hover-soft: #f5f5f5;
	--hover-alt: #e2e5e9;

	/* Текст */
	--text-base: #222;
	--text-primary: #111b21;
	--text-secondary: #54656f;
	--text-tertiary: #667781;
	--text-faint: #8696a0;
	--text-label: #333;
	--text-status: #8a97a3;
	--text-timer: #64748b;
	--text-icon-faint: #777777;
	--text-disabled: #a7b0b6;
	--icon-faint: #c1c7cd;
	--icon-faint-2: #c2cbd2;
	--icon-faint-3: #c3cad1;
	--icon-faint-4: #d1d7db;
	--link: #1a73e8;

	/* Акцент (бренд #6366f1). Заливка и текст разделены: в тёмной теме
	   #6366f1 на тёмном фоне не проходит AA для мелкого текста. */
	--accent: #6366f1;
	--accent-hover: #4f46e5;
	--accent-hover-2: #4f52e0;
	--accent-disabled: #c3c8f4;
	--accent-text: #6366f1;
	--accent-text-hover: #4f46e5;
	--accent-text-strong: #4338ca;
	--accent-text-soft: #5b7fff;
	--accent-soft: #eef0ff;
	--accent-soft-hover: #e3e7fd;
	--accent-soft-hover-2: #e3e5fb;
	--accent-soft-select: #eef0fe;
	--accent-soft-card: #eef2ff;
	--accent-soft-line: #a5b4fc;
	--reaction-own-bg: #f1f2ff;
	/* Чипы реакций под пузырём. В светлой теме белые, в тёмной
	   лежат на тёмном пузыре и должны быть приподнятым слоем над ним. */
	--reaction-chip-bg: #ffffff;
	--reaction-chip-hover: #f0f2f5;
	--accent-alt: #5458ee;
	--accent-alt-hover: #4338ca;

	/* Опасные действия */
	--danger: #d9534f;
	--danger-2: #ef4444;
	--danger-hover: #dc2626;
	--danger-hover-strong: #c9302c;
	--danger-text: #d9534f;
	--danger-text-strong: #b91c1c;
	--danger-bg: #fdf0f0;
	--danger-bg-2: #fff5f5;
	--danger-bg-hover: #fdecea;

	/* Успех / предупреждение / офлайн */
	--success: #22c55e;
	--success-text: #22c55e;
	--success-text-2: #059669;
	/* Ниже — только для inline-стилей в chat-login.php (плашка «код отправлен») */
	--success-text-3: #16a34a;
	--success-bg: #ecfdf5;
	--success-bg-2: #f0fdf4;
	--success-border: #bbf7d0;
	--warn: #f97316;
	--warn-hover: #ea580c;
	--warn-disabled: #fb923c;
	--warn-text: #d97706;
	--warn-text-strong: #9a3412;
	--warn-text-strong-2: #a16207;
	--warn-bg: #fef3c7;
	--warn-bg-2: #fff7ed;
	--offline-banner-bg: #fff7e6;

	/* Цвета имён участников группового чата. Не используются в самом CSS —
	   подставляются в inline-стиль из format.js (getSenderColor), поэтому
	   проверка css_palette.php держит их в белом списке. */
	--sender-1: #e05252;
	--sender-2: #e07b39;
	--sender-3: #2f9e44;
	--sender-4: #0ca678;
	--sender-5: #1c7ed6;
	--sender-6: #6741d9;
	--sender-7: #d6336c;
	--sender-8: #a05a2c;

	/* Служебные состояния */
	--online: #4caf50;
	--saved-avatar: #4596e6;
	--switch-track: #c4ccd2;
	--toast-bg: #1f2937;
	--toast-bg-2: #333;
	--toast-text: #f9fafb;

	/* Границы */
	--border-subtle: #e9edef;
	--border-chrome: #f0f2f5;
	--border-strong: #bdbdbd;
	--border-row: #f5f6f6;
	--border-input: #e0e0e0;
	--border-field: #d0d5dd;
	--border-chip: #d0d5dd;
	--border-check: #cfd9de;
	--border-dropzone: #cfd9de;
	--border-hint: #e2e8f0;
	--border-accent: #bfc0ff;
	/* Только для inline-стилей в chat-login.php (плашка «ожидает подтверждения») */
	--border-accent-2: #c7d2fe;
	--border-accent-soft: rgba(99, 102, 241, 0.25);
	--border-danger: #f5c6cb;
	--border-warn: #fde68a;
	--border-warn-2: #fed7aa;
	--border-bubble-doc: rgba(0,0,0,0.08);
	/* Белое кольцо поверх фона (галочка «онлайн», рамка вокруг камеры) */
	--ring-inverse: #ffffff;
	/* Ховер карточки документа: в светлой теме это лёгкое затемнение,
	   в тёмной — осветление (тот же токен, обратное направление) */
	--doc-hover-filter: brightness(0.97);

	/* Пузыри сообщений */
	--bubble-in: #ffffff;
	--bubble-out: #d9fdd3;
	--bubble-in-hit: #eef0ff;
	--bubble-out-hit: #c7f5be;
	--bubble-reply-bg: rgba(0,0,0,0.07);
	--bubble-doc: rgba(255,255,255,0.6);
	--bubble-doc-mine: rgba(255,255,255,0.5);
	--bubble-menu-btn: rgba(255, 255, 255, 0.55);
	--bubble-menu-btn-hover: rgba(255, 255, 255, 0.9);

	/* Текст и значки поверх заливки */
	--on-accent: #ffffff;
	--on-scrim: #ffffff;

	/* Затемнение */
	--scrim: rgba(0, 0, 0, 0.4);
	--scrim-strong: rgba(17, 27, 33, 0.45);
	--scrim-badge: rgba(0,0,0,0.5);
	/* Чип времени поверх фото: тёмный scrim. Значение одинаково в обеих темах. */
	--photo-overlay-bg: rgba(0, 0, 0, 0.5);
	--canvas-divider: rgba(0,0,0,0.06);

	/* Тени */
	--shadow-bubble: rgba(0,0,0,0.2);
	--shadow-menu: rgba(0, 0, 0, 0.25);
	--shadow-menu-mid: rgba(0,0,0,0.18);
	--shadow-menu-soft: rgba(0, 0, 0, 0.15);
	--shadow-picker: rgba(0,0,0,0.12);
	--shadow-card: rgba(0,0,0,0.08);
	--shadow-fab: rgba(0, 0, 0, 0.22);
	--shadow-toast: rgba(17, 24, 39, 0.28);
	--shadow-accent: rgba(99, 102, 241, 0.35);
	--shadow-accent-sm: rgba(99, 102, 241, 0.4);
	--shadow-accent-lg: rgba(99, 102, 241, 0.45);
	--shadow-accent-0: rgba(99, 102, 241, 0);
	--shadow-focus-ring: rgba(99, 102, 241, 0.65);
	--shadow-online: rgba(76, 175, 80, 0.7);
	--shadow-jump: rgba(0,168,132,0.4);
}
body {
    font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-base);
    background-color: var(--surface-body);
    margin: 0
}
/* iOS не поддерживает COLRv1 (Noto Color Emoji) — на iOS убираем его из стека,
   чтобы эмодзи рисовали системные Apple Color Emoji (класс ставит chat-header.php). */
html.platform-ios body,
html.platform-ios .chat-dialog-last-msg,
html.platform-ios .chat-msg-text,
html.platform-ios .chat-msg-reply-text,
html.platform-ios .chat-msg-reaction,
html.platform-ios .chat-msg-reaction-pick,
html.platform-ios .chat-emoji-item,
html.platform-ios .chat-reply-text,
html.platform-ios .chat-input {
	font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
/* ==================== СТРАНИЦЫ АВТОРИЗАЦИИ ==================== */
.chat-auth-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	background: var(--surface-chrome);
	padding: 20px;
}
.chat-auth-card {
	background: var(--surface-app);
	border-radius: 12px;
	box-shadow: 0 4px 24px var(--shadow-card);
	padding: 40px;
	width: 100%;
	max-width: 400px;
}
.chat-auth-foot {
	margin-top: 16px;
	width: 100%;
	max-width: 400px;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-tertiary);
}
.chat-auth-foot-line {
	margin: 0 0 6px;
}
.chat-auth-foot-line:last-child {
	margin-bottom: 0;
}
.chat-auth-header {
	text-align: center;
	margin-bottom: 10px;
}
.chat-auth-header i {
	font-size: 48px;
	color: var(--accent-text);
	margin-bottom: 10px;
}
.chat-auth-logo {
	height: 50px;
	border-radius: 12px;
	margin-bottom: 10px;
}
.chat-auth-header h1 {
	font-size: 24px;
	margin: 0 0 6px;
	font-weight: 700;
}
.chat-auth-header p {
	color: var(--text-tertiary);
	margin: 0;
	font-size: 14px;
}
.chat-auth-field {
	margin-bottom: 20px;
}
.chat-auth-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
	color: var(--text-label);
}
.chat-auth-optional {
	font-size: 12px;
	font-weight: 400;
	color: var(--text-tertiary);
}
/* Номер для звонка — главный элемент экрана: контрастная «кнопка вызова». */
.chat-auth-call-number {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 6px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.4px;
	color: var(--on-accent);
	text-decoration: none;
	border-radius: 999px;
	padding: 14px 22px;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	box-shadow: 0 6px 18px var(--shadow-accent);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .15s ease, box-shadow .2s ease;
	animation: chat-call-pulse 2s ease-out infinite;
}
.chat-auth-call-number i {
	font-size: 18px;
	opacity: 0.9;
}
.chat-auth-call-number:hover {
	background: linear-gradient(135deg, var(--accent-alt), var(--accent-alt-hover));
	transform: translateY(-1px) scale(1.02);
	box-shadow: 0 8px 24px var(--shadow-accent-lg);
}
.chat-auth-call-number:active {
	transform: scale(0.96);
	box-shadow: 0 4px 12px var(--shadow-accent-sm);
}
@keyframes chat-call-pulse {
	0% {
		box-shadow: 0 6px 18px var(--shadow-accent), 0 0 0 0 var(--shadow-accent-sm);
	}
	70% {
		box-shadow: 0 6px 18px var(--shadow-accent), 0 0 0 16px var(--shadow-accent-0);
	}
	100% {
		box-shadow: 0 6px 18px var(--shadow-accent), 0 0 0 0 var(--shadow-accent-0);
	}
}
/* Системная настройка «меньше анимации» — пульсацию отключаем */
@media (prefers-reduced-motion: reduce) {
	.chat-auth-call-number {
		animation: none;
	}
}
.chat-auth-wait {
	text-align: center;
	padding: 12px 0;
}
.chat-auth-tel-icon {
    color: var(--text-icon-faint);
    font-weight: bold;
    font-size: 22px;
}
.chat-phone-input {
	display: flex;
	border: 2px solid var(--border-input);
	border-radius: 8px;
	overflow: hidden;
}
.chat-phone-prefix {
	padding: 12px 8px 12px 16px;
	background: var(--surface-input-prefix);
	font-size: 16px;
	font-weight: 600;
	color: var(--text-label);
	border-right: 1px solid var(--border-input);
	flex-shrink: 0;
}
.chat-phone-number {
	flex: 1;
	border: none;
	padding: 12px;
	font-size: 16px;
	outline: none;
	min-width: 0;
}
.chat-auth-input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--border-input);
	border-radius: 8px;
	font-size: 16px;
	outline: none;
	transition: border-color 0.2s;
}
.chat-auth-input:focus {
	border-color: var(--accent);
}
.chat-profile-bio {
	resize: none;
	font-family: inherit;
	line-height: 1.5;
	white-space: pre-wrap;
}
.chat-username-input {
	display: flex;
	border: 1px solid var(--border-input);
	border-radius: 8px;
	overflow: hidden;
}
.chat-username-prefix {
	padding: 12px 8px 12px 16px;
	background: var(--surface-input-prefix);
	font-size: 16px;
	font-weight: 600;
	color: var(--text-tertiary);
	border-right: 1px solid var(--border-input);
	flex-shrink: 0;
}
.chat-username-input .chat-auth-input {
	min-width: 0;
}
.chat-default-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 8px;
	padding: 12px 16px;
	border: 1px solid var(--border-accent-2);
	border-radius: 8px;
	background: var(--accent-soft);
	color: var(--accent-text);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s;
}
.chat-default-btn:hover {
	background: var(--accent-soft-hover);
}
.chat-auth-btn {
	width: 100%;
	padding: 14px;
	background: var(--accent);
	color: var(--on-accent);
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}
.chat-auth-btn:hover {
	background: var(--accent-hover);
}
.chat-auth-btn:disabled {
	background: var(--surface-disabled);
	cursor: not-allowed;
}
.chat-auth-btn:disabled:hover {
	background: var(--surface-disabled);
}
a.chat-auth-btn {
	display: block;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	margin-bottom: 12px;
}
.chat-profile-logout {
	width: 100%;
	margin-top: 16px;
	padding: 12px;
	background: var(--surface-app);
	color: var(--danger-text);
	border: 1px solid var(--border-input);
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}
.chat-profile-logout:hover {
	background: var(--danger-bg);
}
.chat-profile-cancel {
	background: var(--surface-chrome);
	color: var(--text-secondary);
}
.chat-profile-cancel:hover {
	background: var(--surface-chrome-hover);
}
.chat-auth-hint {
	margin-top: 8px;
	font-size: 13px;
	color: var(--text-tertiary);
	text-align: center;
}
/* Строка статуса (поллинг) — тихая и мелкая, чтобы не спорила с номером.
   По умолчанию скрыта (hidden), появляется только на значимых событиях. */
.chat-auth-status {
	margin-top: 6px;
	font-size: 12px;
	color: var(--text-status);
	text-align: center;
}
.chat-auth-hint-time {
	/* Таймер ожидания приглушён: серый на светлом фоне вместо индиго-плашки,
	   чтобы второстепенная информация не конкурировала с номером для звонка. */
	display: inline-block;
	margin-top: 10px;
	padding: 6px 12px;
	background: var(--surface-hint);
	border: 1px solid var(--border-hint);
	color: var(--text-timer);
	border-radius: 8px;
	font-size: 13px;
}
.chat-auth-expired {
	text-align: center;
	padding: 20px 16px 8px;
	background: var(--warn-bg-2);
	border: 1px solid var(--border-warn-2);
	border-radius: 10px;
}
.chat-auth-expired-icon {
	font-size: 30px;
	line-height: 1;
	margin-bottom: 12px;
}
.chat-auth-expired-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--warn-text-strong);
}
.chat-auth-expired .chat-auth-btn {
	margin-top: 18px;
	background: var(--warn);
}
.chat-auth-expired .chat-auth-btn:hover {
	background: var(--warn-hover);
}
.chat-auth-expired .chat-auth-btn:disabled {
	background: var(--warn-disabled);
	cursor: default;
}
.chat-auth-resend-error {
	display: none;
	margin-top: 10px;
	font-size: 13px;
	color: var(--danger-text-strong);
	text-align: center;
}
/* Ссылка «Ввести другой номер» — служебная, поэтому приглушённый цвет текста. */
.chat-auth-link {
	color: var(--accent-text);
}
/* Первая подсказка блока: свой margin-top не нужен — примыкает к номеру. */
.chat-auth-hint-top {
	margin-top: 0;
}
/* Подсказка под QR-кодом. */
.chat-auth-hint-small {
	margin-top: 4px;
	font-size: 12px;
}
/* Нумерованные шаги телеграм-экрана: текст по ширине карточки, а не по центру. */
.chat-auth-hint-left {
	text-align: left;
}
/* Код подтверждения в режиме разработки: цифры разряжаются, чтобы не слипались. */
.chat-auth-code-badge {
	font-size: 24px;
	letter-spacing: 4px;
}
/* Иконка-часы на экране ожидания подтверждения. */
.chat-auth-wait-icon {
	font-size: 44px;
	margin-bottom: 12px;
}
/* Плашка с обратным отсчётом на экране ожидания подтверждения. */
.chat-auth-timer-chip {
	display: inline-block;
	margin-top: 4px;
	padding: 8px 14px;
	background: var(--accent-soft-card);
	border: 1px solid var(--border-accent-2);
	color: var(--accent-text-strong);
	border-radius: 8px;
	font-size: 15px;
}
/* Строка статуса заявки: акцентный цвет и жирный — её читают, а не «пролистывают». */
.chat-auth-status-line {
	color: var(--accent-text);
	font-weight: 600;
}
/* Плашка «Введите код» над полем ввода. */
.chat-auth-code-hint {
	margin-bottom: 12px;
	padding: 10px 12px;
	background: var(--success-bg-2);
	border: 1px solid var(--success-border);
	border-radius: 8px;
	color: var(--success-text-3);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}
/* Экран подтверждения QR-входа: устройство-проситель (жирная строка). */
.chat-auth-device-line {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--text-secondary);
	word-break: break-word;
}
/* Ошибка на карточке подтверждения QR-входа (например, «код уже отсканирован»). */
.chat-auth-error {
	margin-top: 8px;
	font-size: 13px;
	color: var(--danger-text-strong);
	text-align: center;
}
/* Пара кнопок «Подтвердить / Отклонить» на карточке QR-входа. */
.chat-auth-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}
.chat-auth-actions .chat-auth-btn {
	width: auto;
	flex: 1;
}
/* Кнопка-«призрак» (Отклонить): контур вместо заливки. */
.chat-auth-btn-ghost {
	background: var(--surface-app);
	color: var(--accent-text);
	border: 1px solid var(--border-input);
}
.chat-auth-btn-ghost:hover {
	background: var(--surface-chrome-hover);
}
/* Контейнер видеопотока встроенного сканера QR: цвета не задаём — кадр даёт камера. */
.chat-qr-scanner {
	margin-top: 12px;
	border-radius: 12px;
	overflow: hidden;
}
.chat-qr-scanner video {
	display: block;
	width: 100%;
	max-height: 55vh;
	object-fit: cover;
}
/* Кнопка входа по QR-коду на экране «Устройства»: вторичное действие,
   отделено от опасной кнопки завершения сессий мягкой акцентной заливкой. */
.chat-devices-qr-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 8px;
	padding: 12px 16px;
	border: 1px solid var(--border-accent-2);
	border-radius: 8px;
	background: var(--accent-soft);
	color: var(--accent-text);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s;
}
.chat-devices-qr-btn:hover {
	background: var(--accent-soft-hover);
}
.chat-devices-qr-btn + .chat-devices-hint {
	text-align: left;
}
/* Разделитель «— или —» между формой номера и входом по QR. */
.chat-auth-or {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 12px;
	font-size: 13px;
	color: var(--text-tertiary);
}
.chat-auth-or::before,
.chat-auth-or::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border-hint);
}
/* Блок с QR-кодом для звонка (только десктоп). */
.chat-auth-qr-block {
	margin-top: 10px;
	text-align: center;
}
/* Подложка QR-кода. Не тема, а требование сканера. */
.chat-auth-qr-code {
	display: inline-block;
	padding: 8px;
	background: var(--qr-surface);
	border-radius: 10px;
}
/* Просроченный/отклонённый QR-код размывается */
.chat-auth-qr-blur {
	filter: blur(6px);
}
/* Этапы экрана входа (ожидание / код / отказ / истёкло). */
.chat-auth-stage {
	display: none;
}
.chat-auth-stage-on {
	display: block;
}

/* ==================== SPA ЧАТ ==================== */
.chat-app {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	right: 0;
	height: 100vh;
	overflow: hidden;
	background: var(--surface-app);
	/* iOS (iPhone): безопасные отступы — сверху пространство под статус-бар,
	   снизу белая полоса под домашний индикатор/скруглённые углы, чтобы
	   кнопки таб-бара и кнопка отправки в диалоге не прятались за ними
	   (env() не равен нулю только при viewport-fit=cover; на Android/десктопе
	   inset = 0 и отступы отсутствуют). */
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Область-«контейнер» боковой колонки и основной области: единственный
   flex-ребёнок .chat-app, растущий по вертикали. Снизу .chat-app отдельно
   лежит нижний таб-бар (#chat-tabbar), и он виден на всех экранах. */
.chat-app-body {
	flex: 1;
	display: flex;
	flex-direction: row;
	min-height: 0;
	overflow: hidden;
}

/* top и height задаются из JS (syncAppHeight) через visualViewport:
   на iOS PWA layout-viewport скроллится при открытии клавиатуры, и inset:0
   не помогает — контейнер нужно «прибить» к visual viewport через offsetTop.
   100vh — фолбэк до запуска JS и для десктопа (visualViewport = layout). */

/* Страница SPA-чата не должна прокручиваться. Иначе при открытой клавиатуре
   (layout-viewport больше видимой области) body с height:100% получает лишнюю
   прокручиваемую область, и перетаскивание .chat-footer вверх «растягивает» его. */
body.chat-session {
	overflow: hidden;
	height: 100%;
	overscroll-behavior: none;
}

/* Sidebar */
.chat-sidebar {
	width: 380px;
	min-width: 380px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--border-subtle);
	background: var(--surface-app);
}
.chat-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--surface-chrome);
	min-height: 56px;
}
.chat-sidebar-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-text);
}
.chat-sidebar-title h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}
.chat-btn-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.chat-btn-icon:hover {
	background: var(--hover);
}
.chat-btn-icon.active {
	color: var(--accent-text);
	background: var(--accent-soft);
}
.chat-btn-icon.active:hover {
	background: var(--accent-soft-hover-2);
}
.chat-btn-icon:disabled {
	opacity: 0.5;
	cursor: default;
}
.chat-sidebar-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Dropdown-меню шапки (⋮: Новый диалог / Новая группа / Избранное) */
.chat-menu-wrap {
	position: relative;
}
.chat-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 200px;
	background: var(--surface-app);
	border-radius: 10px;
	box-shadow: 0 4px 20px var(--shadow-menu-soft);
	padding: 6px 0;
	display: none;
	z-index: 1001;
}
.chat-menu.open {
	display: block;
}
.chat-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 16px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 14px;
	color: var(--text-base);
	text-align: left;
}
.chat-menu-item:hover {
	background: var(--hover-row);
}
.chat-menu-item i {
	width: 18px;
	text-align: center;
	color: var(--text-tertiary);
}

/* Search */
.chat-sidebar-search {
	padding: 8px 12px;
	background: var(--surface-app);
}
.chat-search-box {
	display: flex;
	align-items: center;
	background: var(--surface-chrome);
	border-radius: 8px;
	padding: 0 12px;
	gap: 12px;
}
.chat-search-box i {
	color: var(--text-tertiary);
	font-size: 14px;
}
.chat-search-box input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 10px 0;
	font-size: 14px;
	outline: none;
}

/* Dialog list */
.chat-dialogs-list {
	flex: 1;
	overflow-y: auto;
}
.chat-loading-dialogs {
	padding: 40px;
	text-align: center;
	color: var(--text-tertiary);
}
.chat-dialog-item {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	cursor: pointer;
	transition: background 0.15s;
	gap: 12px;
	border-bottom: 1px solid var(--border-row);
}
.chat-dialog-item:hover {
	background: var(--hover-row-2);
}
.chat-dialog-item.active {
	background: var(--surface-selected);
}
.chat-dialog-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--surface-avatar);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--text-secondary);
	flex-shrink: 0;
}
/* Аватар чата «Избранное» — закладка, как в Telegram: голубая накидка на белом.
   Заполняет круглый контейнер (48px в списке диалогов, 40px в шапке). */
.chat-dialog-avatar .fa-bookmark,
#chat-companion-avatar .fa-bookmark {
	width: 100%;
	height: 100%;
	color: var(--on-accent);
	background: var(--saved-avatar);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chat-dialog-avatar-wrap {
	position: relative;
	flex-shrink: 0;
	line-height: 0;
}
.chat-dialog-online {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--online);
	border: 2px solid var(--ring-inverse);
	box-shadow: 0 0 4px var(--shadow-online);
}
.chat-dialog-info {
	flex: 1;
	overflow: hidden;
}
.chat-dialog-name {
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-dialog-last-msg {
	font-size: 13px;
	color: var(--text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 2px;
	font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
}
/* Галочка статуса последнего отправленного сообщения в списке диалогов:
   меньше, чем в пузыре, и стоит перед текстом (в пузыре — после) */
.chat-dialog-last-msg .chat-msg-status {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin-left: 0;
	margin-right: 3px;
	flex-shrink: 0;
}
.chat-dialog-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex-shrink: 0;
}
.chat-dialog-meta-top {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}
.chat-dialog-time {
	font-size: 11px;
	color: var(--text-tertiary);
}
.chat-dialog-pin {
	font-size: 14px;
	color: var(--text-tertiary);
	transform: rotate(-30deg);
}
.chat-dialog-item.pinned {
	background: var(--hover-row-2);
}
.chat-dialog-item.pinned:hover {
	background: var(--hover-row);
}
.chat-dialog-unread {
	background: var(--accent);
	color: var(--on-accent);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 10px;
	min-width: 18px;
	text-align: center;
}

/* Dialog item context menu (block/unblock) */
.chat-dialog-menu-wrap {
	position: relative;
	flex-shrink: 0;
}
.chat-dialog-menu-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--text-faint);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: background 0.15s, opacity 0.15s;
}
.chat-dialog-item:hover .chat-dialog-menu-btn {
	opacity: 1;
}
.chat-dialog-menu-btn:hover {
	background: var(--hover);
	color: var(--text-secondary);
}
@media (hover: none) {
	.chat-dialog-menu-btn {
		opacity: 0.7;
	}
}
.chat-dialog-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 40;
	min-width: 180px;
	max-width: calc(100vw - 16px);
	box-sizing: border-box;
	background: var(--surface-app);
	border-radius: 8px;
	box-shadow: 0 4px 16px var(--shadow-menu);
	padding: 4px 0;
	display: none;
}
.chat-dialog-menu.open {
	display: block;
}
.chat-dialog-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 14px;
	border: none;
	background: transparent;
	font-size: 14px;
	font-family: inherit;
	color: var(--text-primary);
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-dialog-menu-item:hover {
	background: var(--hover-row);
}
.chat-dialog-menu-item i {
	width: 16px;
	text-align: center;
	color: var(--text-secondary);
}
.chat-dialog-menu-item-danger {
	color: var(--danger-text);
}
.chat-dialog-menu-item-danger i {
	color: var(--danger-text);
}
.chat-dialog-menu-item-danger:hover {
	background: var(--danger-bg);
}
.chat-dialog-menu-item:disabled,
.chat-dialog-menu-item:disabled:hover {
	color: var(--text-disabled);
	background: transparent;
	cursor: not-allowed;
}
.chat-dialog-menu-item:disabled i {
	color: var(--text-disabled);
}

/* Main area */
.chat-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-chat);
	position: relative;
	min-height: 0;
}
.chat-empty-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
}
.chat-empty-state i {
	font-size: 64px;
	color: var(--icon-faint-4);
	margin-bottom: 16px;
}
.chat-empty-state h3 {
	margin: 0 0 8px;
	font-weight: 500;
}
.chat-empty-state p {
	margin: 0;
	font-size: 14px;
}

/* Chat window */
.chat-window {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* Chat window header */
.chat-window-header {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	background: var(--surface-chrome);
	gap: 12px;
	min-height: 56px;
	border-bottom: 1px solid var(--border-strong);
}
.chat-back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: 18px;
	cursor: pointer;
}
.chat-window-user {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	cursor: pointer;
	border-radius: 8px;
}
.chat-window-user:hover .chat-companion-status {
	color: var(--text-secondary);
}
/* Поиск по сообщениям открытого диалога: лупа в шапке открывает панель
   поиска — она заменяет имя/статус собеседника (как в Telegram). */
.chat-search-toggle-btn {
	flex-shrink: 0;
}
.chat-window-header.search-active .chat-window-user,
.chat-window-header.search-active .chat-search-toggle-btn {
	display: none;
}
.chat-window-search {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
}
/* Поле поиска: иконка-лупа + инпут + ✕ (очистить/закрыть). Отдельной
   кнопки закрытия в шапке нет — так поле получает максимум ширины. */
.chat-dialog-search-box {
	flex: 1;
	min-width: 0;
	background: var(--surface-app);
	gap: 8px;
	padding: 0 4px 0 12px;
}
.chat-dialog-search-box input {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-dialog-search-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--text-tertiary);
	font-size: 15px;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}
.chat-dialog-search-clear:hover {
	background: var(--hover-row);
	color: var(--text-primary);
}
/* Группа «‹ n/N ›»: появляется только после выполненного поиска,
   пока пользователь вводит фразу — ширина остаётся у поля. */
.chat-dialog-search-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	min-width: 0;
}
.chat-dialog-search-count {
	font-size: 12px;
	color: var(--text-secondary);
	font-weight: 600;
	white-space: nowrap;
	text-align: center;
	margin-right: 2px;
}
.chat-search-nav-btn {
	width: 32px;
	height: 32px;
	font-size: 14px;
	flex-shrink: 0;
}
.chat-search-nav-btn:disabled {
	opacity: 0.4;
	cursor: default;
}
.chat-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--surface-avatar);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--text-secondary);
	flex-shrink: 0;
}
.chat-companion-name {
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}
.chat-companion-name:hover {
	color: var(--accent-text-hover);
}
.chat-companion-status {
	font-size: 12px;
	color: var(--text-tertiary);
}

/* Messages area */
/* ВАЖНО: сам скроллер — обычный block (НЕ display:flex). Связка «overflow-y:auto
   + display:flex на одном элементе» ломает перерисовку слоя ленты в iOS PWA:
   при открытии клавиатуры (resize visualViewport -> syncAppHeight меняет высоту
   .chat-app) сообщения исчезают, остаётся чистое пространство, пока не поскроллишь.
   Прижатие короткой ленты к низу делает ::before-распорка в .chat-messages-container. */
.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px 40px;
	min-height: 0;
	background-color: var(--surface-canvas);
	background-image:
		radial-gradient(var(--surface-canvas-dot-a) 1px, transparent 1px),
		radial-gradient(var(--surface-canvas-dot-b) 1px, transparent 1px);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
}
.chat-messages-container {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 730px;
}
/* Заглушка «Нет сообщений» в пустом диалоге. */
.chat-messages-empty {
	text-align: center;
	color: var(--text-tertiary);
	padding: 40px;
}
/* Распорка вместо margin-top:auto на контейнере: при короткой ленте
   поглощает свободное место сверху и прижимает сообщения к низу; при
   переполнении схлопывается в 0 и не режет верхний контент. */
.chat-messages-container::before {
	content: '';
	display: block;
	margin-top: auto;
}
.chat-message {
	display: flex;
	max-width: 65%;
	min-width: 0;
	animation: msgAppear 0.2s ease;
}
@keyframes msgAppear {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
/* Сообщение, вставленное без анимации: фоновая догрузка, «тихая» правка, скролл вверх. */
.chat-message.chat-message-no-anim {
	animation: none;
}
.chat-message.mine {
	align-self: flex-end;
}
.chat-message.theirs {
	align-self: flex-start;
}
.chat-msg-bubble {
	padding: 8px 10px;
	border-radius: 8px;
	position: relative;
	word-wrap: break-word;
	line-height: 1.4;
	font-size: 14px;
	box-shadow: 0 1px 2px var(--shadow-bubble);
	min-width: 0;
	max-width: 100%;
}
.chat-message.mine .chat-msg-bubble {
	background: var(--bubble-out);
	border-bottom-right-radius: 2px;
}
.chat-message.theirs .chat-msg-bubble {
	background: var(--bubble-in);
	border-bottom-left-radius: 2px;
}
.chat-msg-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}
.chat-msg-body .chat-msg-bubble {
	align-self: flex-start;
	max-width: 100%;
}
.chat-message.mine .chat-msg-body .chat-msg-bubble {
	align-self: flex-end;
}
.chat-msg-text {
	white-space: pre-wrap;
	font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
}
.chat-msg-text a,
.chat-msg-reply-text a {
	color: var(--link);
	text-decoration: underline;
	word-break: break-all;
}
.chat-msg-text a:active,
.chat-msg-reply-text a:active {
	opacity: 0.7;
}
.chat-emoji {
	font-size: 1.4em;
	line-height: 1;
}
.chat-msg-emoji-only {
	background: transparent !important;
	box-shadow: none !important;
	padding: 4px 0 !important;
}
.chat-msg-emoji-only .chat-msg-text {
	font-size: 2.4em;
	line-height: 1.2;
}
.chat-msg-emoji-only .chat-msg-time {
	margin-top: 0;
}
.chat-msg-time {
	font-size: 11px;
	color: var(--text-tertiary);
	text-align: right;
	margin-top: 4px;
}
/* Галочка прочтения: обводка и толщина заданы здесь, а не инлайном в
   format.js — presentation-атрибуты SVG не понимают var(), а правило
   CSS живёт в обеих темах и переключается без перерисовки ленты. */
.chat-msg-status {
	vertical-align: middle;
	margin-left: 4px;
	stroke: var(--text-faint);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Прочитано — зелёная двойная галочка (у непрочитанного одна) */
.chat-msg-status-read {
	stroke: var(--online);
}
/* Неотправленное сообщение (нет сети/ошибка): красная «!» вместо галочки,
   сам пузырь приглушён — в меню такого сообщения доступен «Повторить». */
.chat-msg-failed {
	opacity: 0.6;
}
.chat-msg-status-failed {
	stroke: var(--danger);
}
.chat-msg-edited {
	font-size: 10px;
	font-style: italic;
	color: var(--text-faint);
	margin-right: 4px;
}

/* Reply block inside a message bubble */
.chat-msg-reply {
	display: flex;
	gap: 8px;
	background: var(--bubble-reply-bg);
	border-radius: 6px;
	padding: 6px 8px;
	margin-bottom: 6px;
	cursor: pointer;
	min-width: 0;
}
.chat-msg-reply-line {
	width: 3px;
	border-radius: 2px;
	background: var(--accent);
	flex-shrink: 0;
}
.chat-message.theirs .chat-msg-reply-line {
	background: var(--accent-soft-line);
}
.chat-msg-reply-body {
	flex: 1;
	min-width: 0;
}
.chat-msg-reply-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--accent-text);
	margin-bottom: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-message.theirs .chat-msg-reply-name {
	color: var(--accent-text-soft);
}
.chat-msg-reply-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.chat-msg-reply-text {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--text-secondary);
	white-space: normal;
	overflow: hidden;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
}
.chat-msg-reply-deleted {
	font-style: italic;
	color: var(--text-faint);
}
.chat-msg-reply-thumb {
	width: 36px;
	height: 36px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--hover);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-faint);
	flex-shrink: 0;
}
.chat-msg-reply-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Message action button (dots) + dropdown menu with "Ответить".
   Кнопка прижата к верхнему краю пузыря */
.chat-msg-actions {
	position: relative;
	display: flex;
	align-self: flex-start;
	margin: 0 6px;
}
.chat-message.mine .chat-msg-actions {
	order: 1;
}
.chat-message.mine .chat-msg-body {
	order: 2;
}
.chat-message.theirs .chat-msg-actions {
	order: 2;
}
.chat-message.theirs .chat-msg-body {
	order: 1;
}
/* В группах над чужим пузырём есть строка имени автора — опускаем кнопку,
   чтобы её верх совпадал с верхним краем пузыря, а не строки имени. */
.chat-message.has-sender .chat-msg-actions {
	margin-top: 17px; /* высота .chat-msg-sender: 12.5px × line-height 1.2 + 2px margin-bottom */
}
.chat-msg-menu-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: var(--bubble-menu-btn);
	color: var(--text-secondary);
	font-size: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px var(--shadow-bubble);
	opacity: 0;
	transition: opacity 0.15s, background 0.15s;
}
.chat-message:hover .chat-msg-menu-btn,
.chat-msg-actions:focus-within .chat-msg-menu-btn {
	opacity: 1;
}
.chat-msg-menu-btn:hover {
	background: var(--bubble-menu-btn-hover);
	color: var(--text-primary);
}
@media (hover: none) {
	.chat-msg-menu-btn {
		opacity: 0.7;
	}
}
.chat-msg-menu {
	position: absolute;
	top: calc(100% + 4px);
	z-index: 30;
	min-width: 170px;
	max-width: calc(100vw - 16px);
	box-sizing: border-box;
	background: var(--surface-app);
	border-radius: 8px;
	box-shadow: 0 4px 16px var(--shadow-menu);
	padding: 0 0 4px;
	display: none;
}
.chat-msg-menu.upward {
	top: auto;
	bottom: calc(100% + 4px);
}
.chat-message.mine .chat-msg-menu {
	left: 0;
}
.chat-message.theirs .chat-msg-menu {
	right: 0;
}
.chat-msg-menu.open {
	display: block;
}
.chat-msg-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 14px;
	border: none;
	background: transparent;
	font-size: 14px;
	font-family: inherit;
	color: var(--text-primary);
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-msg-menu-item:hover {
	background: var(--hover-row);
}
.chat-msg-menu-item i {
	width: 16px;
	text-align: center;
	color: var(--text-secondary);
}
.chat-msg-menu-item-danger {
	color: var(--danger-text);
}
.chat-msg-menu-item-danger i {
	color: var(--danger-text);
}
.chat-msg-menu-item-danger:hover {
	background: var(--danger-bg);
}

/* Reactions: пикер быстрых реакций в шапке меню и чипы под пузырём */
.chat-msg-reaction-picker {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	overflow: visible;
	position: relative;
	gap: 0;
	padding: 4px 6px;
	background: var(--surface-picker);
	border-bottom: 1px solid var(--border-subtle);
	border-radius: 8px 8px 0 0;
}
.chat-msg-reaction-pick {
	border: none;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s, transform 0.1s;
}
.chat-msg-reaction-pick:hover {
	background: var(--hover-row);
	transform: scale(1.2);
}
.chat-msg-reaction-pick.active {
	background: var(--surface-badge);
}
.chat-msg-reaction-pick-remove {
	align-self: center;
	margin-left: 4px;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: var(--hover-row);
	color: var(--text-secondary);
	font-size: 11px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chat-msg-reaction-pick-remove:hover {
	background: var(--hover-alt);
	color: var(--danger-text);
}

/* Кнопка-стрелка «Другие реакции» — раскрывает полный список эмодзи */
.chat-msg-reaction-more {
	border: none;
	background: transparent;
	width: 26px;
	height: 26px;
	margin-left: 2px;
	border-radius: 50%;
	color: var(--text-secondary);
	font-size: 11px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s, transform 0.15s;
}
.chat-msg-reaction-more:hover {
	background: var(--hover-row);
}
.chat-msg-reaction-more.open {
	transform: rotate(180deg);
}

/* Полный список эмодзи для реакций — панель под плашкой быстрых */
.chat-msg-reaction-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	right: 2px;
	z-index: 5;
	width: max-content;
	max-width: calc(100vw - 32px);
	max-height: 210px;
	overflow-y: auto;
	background: var(--surface-raised);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	box-shadow: 0 4px 16px var(--shadow-menu);
	padding: 6px;
	grid-template-columns: repeat(6, 1fr);
	gap: 2px;
}
.chat-msg-reaction-dropdown.open {
	display: grid;
}
.chat-msg-reaction-dropdown-item {
	width: 32px;
	height: 32px;
	font-size: 22px;
	font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
}

/* Чипы реакций под пузырём */
.chat-msg-reactions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
	align-self: flex-end;
	max-width: 100%;
}
.chat-message.theirs .chat-msg-reactions {
	align-self: flex-start;
}
.chat-msg-reaction {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border: none;
	border-radius: 12px;
	background: var(--reaction-chip-bg);
	color: var(--text-secondary);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 2px var(--shadow-menu-soft);
	transition: background 0.15s, transform 0.1s;
	font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
	max-width: 100%;
	height: 24px;
}
.chat-msg-reaction:hover {
	background: var(--reaction-chip-hover);
	transform: translateY(-1px);
}
.chat-msg-reaction.mine {
	background: var(--reaction-own-bg);
	color: var(--accent-text-hover);
}
.chat-msg-reaction-count {
	font-size: 12px;
	font-weight: 600;
}
.chat-msg-reaction .chat-emoji {
	font-size: 1.2em;
}

/* Панель «Реакции»: кто отреагировал на сообщение (тап по чипу в группе).
   Заголовок + список реакторов (реакции здесь только читаются: сменить эмодзи
   — пикер в меню сообщения). На мобильных это bottom-sheet с подложкой,
   на десктопе — popover у чипа (координаты считает reactions.js).
   Цвета — только токены темы. */
.chat-reactions-backdrop {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--scrim);
}
.chat-reactions-sheet,
.chat-reactions-popup {
	position: fixed;
	z-index: 61;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface-raised);
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	box-shadow: 0 4px 16px var(--shadow-menu);
}
.chat-reactions-sheet {
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 70vh;
	border-radius: 12px 12px 0 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.chat-reactions-popup {
	width: 264px;
	max-width: calc(100vw - 16px);
}
/* Заголовок «Реакции» — служебная подпись */
.chat-reactions-title {
	padding: 8px 12px 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-secondary);
}
.chat-reactions-list {
	flex: 1;
	min-height: 0;
	max-height: 40vh;
	overflow-y: auto;
}
.chat-reactions-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
}
.chat-reactions-row.mine {
	background: var(--hover-row);
}
/* Тот же .chat-avatar, только размером со строку списка */
.chat-reactions-avatar {
	width: 28px;
	height: 28px;
	font-size: 12px;
}
.chat-reactions-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	color: var(--text-base);
}
.chat-reactions-row.mine .chat-reactions-name {
	font-weight: 600;
	color: var(--accent-text-hover);
}
.chat-reactions-emoji {
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1;
	font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
}
.chat-reactions-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
}

/* Flash highlight when jumping to a replied message */
.chat-message-highlight .chat-msg-bubble {
	animation: msgHighlightFlash 2s ease;
}
@keyframes msgHighlightFlash {
	0%, 100% { box-shadow: 0 1px 2px var(--shadow-bubble); }
	30% { box-shadow: 0 0 0 3px var(--shadow-jump); }
}
/* Текущее совпадение поиска: персистентная рамка + тонировка — видно,
   в каком именно сообщении найдена фраза (в отличие от короткого flash
   при переходе по цитате). Снимается переходом к другому совпадению,
   очисткой или закрытием поиска (класс ставит public/js/chat/search.js). */
.chat-message-search-hit > .chat-msg-body .chat-msg-bubble {
	box-shadow: 0 0 0 3px var(--shadow-focus-ring), 0 1px 2px var(--shadow-bubble);
	background-color: var(--bubble-in-hit);
}
.chat-message-search-hit.mine > .chat-msg-body .chat-msg-bubble {
	background-color: var(--bubble-out-hit);
}
/* У фото-сообщения рамка вокруг картинки (пузырь прозрачный) */
.chat-message-search-hit > .chat-msg-body .chat-message-image {
	border-radius: 6px;
	box-shadow: 0 0 0 3px var(--shadow-focus-ring);
}
.chat-message-image {
	max-width: min(280px, 100%);
	max-height: 280px;
	border-radius: 6px;
	cursor: pointer;
	margin-bottom: 4px;
	display: block;
	/* Кадрирование по точному размеру, который message-view.js подставляет
	   в атрибуте style (width/height в пикселях): без него фото растягивалось
	   бы внутри зарезервированного бокса. */
	object-fit: cover;
}

/* Фото без текста — без пузыря: прозрачный пузырь с картинкой во всю
   ширину, время и галочки статуса лежат чипом поверх фото (низ, справа).
   Фон и тень пузыря снимаем, как у .chat-msg-emoji-only: такое сообщение —
   это не карточка, а просто картинка. Прозрачный фон картинки (PNG)
   сохраняется — под ним нет подложки. */
.chat-msg-bubble.chat-msg-photo-bubble {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}
/* Текст и время не рисуются отдельной строкой под картинкой: они (и
   галочки статуса) живут внутри чипа .chat-msg-media-meta на фото. */
.chat-msg-photo-bubble .chat-msg-text,
.chat-msg-photo-bubble .chat-msg-time {
	display: none;
}
/* Обёртка «фото + мета-чип»: скругляет углы картинки и держит чип на себе */
.chat-msg-media {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
}
/* Чип времени и галочек статуса поверх фото. Фон — тёмный scrim, единый
   для обеих тем (фото одно и то же, тема на нём не сказывается), чтобы
   белое время и цветные галочки читались на любом снимке. Цвет текста —
   --on-scrim (как у значка «×» на превью вложения). */
.chat-msg-media-meta {
	position: absolute;
	right: 4px;
	bottom: 4px;
	padding: 2px 6px;
	border-radius: 10px;
	background: var(--photo-overlay-bg);
	color: var(--on-scrim);
	font-size: 11px;
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: 4px;
}
/* «изменено» в чипе — тем же белым, что и время (базовый серый .chat-msg-edited
   на тёмном чипе читается хуже) */
.chat-msg-media-meta .chat-msg-edited {
	color: inherit;
}
/* В photo-only картинка без отступа снизу: чип должен лежать у самого угла
   фото, а не над полоской пустоты */
.chat-msg-photo-bubble .chat-message-image {
	margin-bottom: 0;
}

/* Карточка файла-документа в пузыре сообщения: иконка по типу, имя, размер,
   скачивание (сервер отдаёт Content-Disposition: attachment). */
.chat-message-doc {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bubble-doc);
	border: 1px solid var(--border-bubble-doc);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 4px;
	max-width: 280px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.chat-message.mine .chat-message-doc {
	background: var(--bubble-doc-mine);
}
.chat-message-doc:hover {
	filter: var(--doc-hover-filter);
}
.chat-message-doc-icon {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chat-message-doc-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.chat-message-doc-name {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 190px;
}
.chat-message-doc-meta {
	font-size: 12px;
	color: var(--text-tertiary);
}
.chat-message-doc-dl {
	color: var(--text-faint);
	font-size: 14px;
	flex-shrink: 0;
	margin-left: auto;
}
/* Карточка контакта в пузыре: иконка адресной книги, имя и телефон.
   Аватар не рисуем — у получателя может не быть доступа к chat-get-avatar. */
.chat-message-contact {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bubble-doc);
	border: 1px solid var(--border-bubble-doc);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 4px;
	max-width: 280px;
	cursor: pointer;
}
.chat-message.mine .chat-message-contact {
	background: var(--bubble-doc-mine);
}
.chat-message-contact:hover {
	filter: var(--doc-hover-filter);
}
.chat-message-contact-icon {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chat-message-contact-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.chat-message-contact-name {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 190px;
}
.chat-message-contact-phone {
	font-size: 12px;
	color: var(--text-tertiary);
}
/* Быстрое действие: иконка «Написать» справа в карточке контакта —
   открывает/создаёт диалог, минуя профиль (карточка целиком ведёт в профиль). */
.chat-message-contact-chat {
	margin-left: auto;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	color: var(--accent-text);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: filter 0.2s;
}
.chat-message-contact-chat:hover {
	filter: var(--doc-hover-filter);
}
.chat-date-divider {
	text-align: center;
	margin: 12px 0;
	position: relative;
}
.chat-date-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--canvas-divider);
}
.chat-date-divider span {
	background: var(--surface-canvas);
	padding: 0 12px;
	color: var(--text-tertiary);
	font-size: 12px;
	position: relative;
}
.chat-messages-loader {
	text-align: center;
	padding: 12px;
	color: var(--text-tertiary);
	font-size: 13px;
}

/* Плавающая кнопка «к последнему сообщению»: видна, только когда лента
   прокручена от низа; позиционируется от верхней границы футера (bottom: 100%),
   поэтому всегда находится ровно над полем ввода, даже при открытой плашке
   цитирования/редактирования */
.chat-scroll-bottom-btn {
	position: absolute;
	bottom: calc(100% + 10px);
	right: 24px;
	z-index: 15;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--surface-app);
	color: var(--accent-text);
	box-shadow: 0 2px 8px var(--shadow-fab);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.chat-scroll-bottom-btn.visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.chat-scroll-bottom-btn:hover {
	background: var(--hover-row);
}
.chat-scroll-bottom-btn:active {
	transform: scale(0.92);
}

/* Footer / Input */
.chat-footer {
	background: var(--surface-chrome);
	padding: 8px 16px;
	flex-shrink: 0;
	position: relative;
}
/* Emoji picker (overlay above the input, does not expand the footer) */
.chat-emoji-picker {
	display: none;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	width: max-content;
	max-width: 100%;
	max-height: 260px;
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--surface-app);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	box-shadow: 0 -2px 12px var(--shadow-picker);
	margin-bottom: 8px;
	padding: 8px;
}
.chat-emoji-picker.open {
	display: block;
}
.chat-emoji-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
}
.chat-emoji-item {
	background: transparent;
	border: none;
	border-radius: 6px;
	font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
	font-size: 30px;
	line-height: 1.2;
	padding: 4px 0;
	cursor: pointer;
	text-align: center;
}
.chat-emoji-item:hover {
	background: var(--hover-row);
}
.chat-upload-warnings {
	margin-bottom: 4px;
}
.chat-upload-warnings .alert {
	padding: 6px 10px;
	margin: 0 0 4px;
	font-size: 13px;
}
/* Reply bar above the input */
.chat-reply-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--surface-raised);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	padding: 8px 10px;
	margin: 0 auto 8px;
	max-width: 730px;
}
.chat-reply-line {
	width: 3px;
	align-self: stretch;
	border-radius: 2px;
	background: var(--accent);
	flex-shrink: 0;
}
.chat-reply-info {
	flex: 1;
	min-width: 0;
}
.chat-reply-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--accent-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-reply-text {
	font-size: 13px;
	color: var(--text-secondary);
	white-space: normal;
	overflow: hidden;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
}
.chat-reply-cancel {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--text-faint);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chat-reply-cancel:hover {
	background: var(--hover);
	color: var(--text-secondary);
}
.chat-edit-line {
	background: var(--accent);
}
#chat-edit-bar .chat-reply-name {
	color: var(--accent-text);
}
.chat-file-preview {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: var(--surface-raised);
	border-radius: 8px;
	margin-bottom: 8px;
	position: relative;
	max-width: 240px;
}
.chat-file-preview.visible {
	display: inline-flex;
}
.chat-file-preview img {
	display: block;
	max-width: 200px;
	max-height: 120px;
	border-radius: 6px;
	min-width: 0;
}
.chat-preview-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: none;
	background: var(--scrim-badge);
	color: var(--on-scrim);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Превью выбранного файла-документа перед отправкой: карточка с иконкой,
   именем и размером (для фото превью показывает <img>). */
.chat-preview-doc {
	display: flex;
	align-items: center;
	gap: 10px;
}
.chat-preview-doc-icon {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chat-preview-doc-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.chat-preview-doc-name {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
}
.chat-preview-doc-size {
	font-size: 12px;
	color: var(--text-tertiary);
}

/* Контейнер кнопки скрепки с выпадающим меню «Фото / Файл». */
.chat-attach-wrap {
	position: relative;
	flex-shrink: 0;
}
.chat-attach-menu {
	position: absolute;
	bottom: 48px;
	left: 0;
	min-width: 150px;
	background: var(--surface-app);
	border-radius: 10px;
	box-shadow: 0 4px 16px var(--shadow-menu-mid);
	padding: 4px;
	z-index: 50;
	display: none;
}
.chat-attach-menu.open {
	display: block;
	animation: chatAttachIn 0.12s ease-out;
}
@keyframes chatAttachIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}
.chat-attach-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: none;
	background: transparent;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	color: var(--text-primary);
	cursor: pointer;
	text-align: left;
}
.chat-attach-item i {
	width: 20px;
	text-align: center;
	color: var(--text-secondary);
}
.chat-attach-item:hover {
	background: var(--hover-row);
}
.chat-input-wrapper {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	width: 100%;
	max-width: 730px;
	margin-left: auto;
	margin-right: auto;
}
.chat-btn-attach {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chat-btn-attach:hover {
	background: var(--hover);
}
.chat-btn-emoji {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: transparent;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}
.chat-btn-emoji:hover {
	background: var(--hover);
}
.chat-input-container {
	flex: 1;
	min-width: 0;
	background: var(--surface-raised);
	border-radius: 8px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	min-height: 40px;
}
.chat-input {
	width: 100%;
	min-width: 0;
	border: none;
	outline: none;
	/* Свой фон textarea задаёт браузер (системный цвет поля). В тёмной теме он
	   не совпадал с поверхностью контейнера: внутри чёрного поля ввода рисовалось
	   второе, чуть другое поле. Поле ввода — это .chat-input-container, а сам
	   textarea должен быть на нём прозрачным (как input в .chat-search-box). */
	background: transparent;
	font-size: 15px;
	line-height: 1.4;
	resize: none;
	padding: 8px 0;
	max-height: 100px;
	min-height: 20px;
	overflow-y: auto;
	scrollbar-width: none;
	font-family: sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
}
.chat-input::-webkit-scrollbar {
	display: none;
}
.chat-btn-send {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s;
}
.chat-btn-send:hover {
	background: var(--accent-hover);
}
.chat-btn-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Block bar: replaces the input when the companion is blocked */
.chat-block-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	max-width: 730px;
	margin: 0 auto;
	padding: 10px 12px;
	background: var(--surface-app);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	box-sizing: border-box;
}
.chat-block-text {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	color: var(--text-secondary);
	text-align: center;
}
.chat-block-btn {
	flex-shrink: 0;
	padding: 8px 16px;
	border: none;
	border-radius: 8px;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s;
}
.chat-block-btn:hover {
	background: var(--accent-hover);
}
.chat-footer.blocked .chat-input-wrapper,
.chat-footer.blocked .chat-reply-bar,
.chat-footer.blocked .chat-edit-bar,
.chat-footer.blocked .chat-file-preview,
.chat-footer.blocked .chat-emoji-picker,
.chat-footer.blocked .chat-upload-warnings {
	display: none !important;
}

/* Read-only чаты (группа заявок поддержки, бот «Безопасность»): сюда пишет
   только бот, поэтому прячем поле ввода и все элементы композера. */
.chat-footer.support-readonly .chat-input-wrapper,
.chat-footer.support-readonly .chat-reply-bar,
.chat-footer.support-readonly .chat-edit-bar,
.chat-footer.support-readonly .chat-file-preview,
.chat-footer.support-readonly .chat-emoji-picker,
.chat-footer.support-readonly .chat-upload-warnings {
	display: none !important;
}
.chat-support-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 730px;
	margin: 0 auto;
	padding: 10px 12px;
	background: var(--surface-app);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	box-sizing: border-box;
}
.chat-support-bar-text {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	color: var(--text-tertiary);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-support-bar-text .fa-robot {
	margin-right: 6px;
	color: var(--accent-text);
}

/* Block/unblock button on the user info screen */
.chat-user-profile-block-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	padding: 12px 16px;
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	background: var(--surface-app);
	color: var(--text-secondary);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.chat-user-profile-block-btn:hover {
	background: var(--hover-row);
}
.chat-user-profile-block-btn.danger {
	color: var(--danger-text);
	border-color: var(--border-danger);
	background: var(--danger-bg-2);
}
.chat-user-profile-block-btn.danger:hover {
	background: var(--danger-bg-hover);
}

/* Devices screen («Устройства» в профиле) */
.chat-devices-hint {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-tertiary);
}
.chat-devices-info {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 24px 0;
	padding: 12px;
	border-radius: 10px;
	background: var(--surface-sync);
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-secondary);
}
.chat-devices-list {
	display: flex;
	flex-direction: column;
}
.chat-device-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border-chrome);
}
.chat-device-item:last-child {
	border-bottom: none;
}
.chat-device-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--surface-chrome);
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.chat-device-item.current .chat-device-icon {
	background: var(--accent-soft-card);
	color: var(--accent-text);
}
.chat-device-info {
	flex: 1;
	min-width: 0;
}
.chat-device-name {
	font-size: 15px;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.chat-device-badge {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 10px;
	background: var(--accent-soft-card);
	color: var(--accent-text);
	white-space: nowrap;
}
.chat-device-meta {
	font-size: 12.5px;
	color: var(--text-tertiary);
	margin-top: 2px;
	overflow-wrap: anywhere;
}
.chat-device-revoke {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--danger-text);
	cursor: pointer;
	font-size: 15px;
	transition: background 0.2s;
}
.chat-device-revoke:hover {
	background: var(--danger-bg-hover);
}
.chat-devices-empty {
	padding: 20px 0;
	text-align: center;
	font-size: 14px;
	color: var(--text-tertiary);
}
.chat-devices-loading {
	padding: 24px 0;
	text-align: center;
	color: var(--text-faint);
}
#chat-devices-screen .chat-user-profile-block-btn {
	margin-top: 20px;
}

/* Contacts screen («Контакты» в настройках) */
.chat-contacts-sync {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 4px;
	padding: 12px;
	border-radius: 10px;
	background: var(--surface-sync);
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-secondary);
}
.chat-contacts-sync i {
	flex-shrink: 0;
	margin-top: 2px;
	font-size: 13px;
	color: var(--text-faint);
}
.chat-contacts-list {
	display: flex;
	flex-direction: column;
}
.chat-contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 0;
	border: none;
	border-bottom: 1px solid var(--border-chrome);
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.chat-contact-item:hover {
	background: var(--hover-row-3);
}
.chat-contact-item:last-child {
	border-bottom: none;
}
.chat-contact-info {
	flex: 1;
	min-width: 0;
}
.chat-contact-name {
	font-size: 15px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chat-contact-meta {
	font-size: 12.5px;
	color: var(--text-tertiary);
	margin-top: 2px;
	overflow-wrap: anywhere;
}
.chat-contact-status {
	font-size: 12px;
	color: var(--text-faint);
	margin-top: 2px;
}
.chat-contact-chevron {
	flex-shrink: 0;
	color: var(--icon-faint);
	font-size: 12px;
}
#chat-contacts-delete-wrap {
	margin-top: 20px;
}

/* New dialog modal */
.chat-new-dialog-body {
	padding: 16px;
}
.chat-new-dialog-body .chat-search-results {
	flex: none;
	max-height: 50vh;
	overflow-y: auto;
	margin-top: 8px;
}
.chat-new-dialog-body .chat-phone-input {
	margin-top: 16px;
}
.chat-search-find-btn {
	margin-top: 12px;
}
.chat-search-find-btn:disabled {
	background: var(--surface-disabled);
	cursor: not-allowed;
}
.chat-search-find-btn:disabled:hover {
	background: var(--surface-disabled);
}
.chat-search-result-item {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	cursor: pointer;
	gap: 12px;
	transition: background 0.15s;
	border-bottom: 1px solid var(--border-row);
}
.chat-search-result-item:hover {
	background: var(--hover-row);
}
.chat-search-result-item.selected {
	background: var(--accent-soft-select);
}
.chat-search-result-item.selected:hover {
	background: var(--accent-soft-hover);
}
.chat-search-result-item .chat-dialog-info p {
	font-size: 13px;
	color: var(--text-tertiary);
	margin: 2px 0 0;
}

/* Forward message («Переслать») */
/* Плашка «Переслано» внутри пузыря пересланного сообщения (без имени источника) */
.chat-msg-forward {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--accent-text);
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-msg-forward i {
	flex-shrink: 0;
	font-size: 11px;
}
.chat-message.theirs .chat-msg-forward {
	color: var(--accent-text-soft);
}
/* Модалка выбора чатов для пересылки */
.chat-forward-preview {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--surface-chrome);
	border-radius: 8px;
	border: 1px solid var(--border-accent);
	font-size: 13px;
	color: var(--text-secondary);
	overflow: hidden;
	margin-bottom: 8px;
}
.chat-forward-preview i {
	flex-shrink: 0;
	color: var(--accent-text);
}
.chat-forward-preview span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.chat-forward-item .chat-forward-check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--border-check);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: transparent;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chat-forward-item.selected {
	background: var(--accent-soft-select);
}
.chat-forward-item.selected:hover {
	background: var(--accent-soft-hover);
}
.chat-forward-item.selected .chat-forward-check {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}
.chat-forward-item.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.chat-forward-item.disabled .chat-forward-check {
	border-color: var(--border-subtle);
}
.chat-forward-actions {
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
}
.chat-forward-count {
	font-size: 13px;
	color: var(--text-tertiary);
}

/* Mobile */
@media (max-width: 768px) {
	.chat-sidebar {
		width: 100%;
		min-width: 0;
	}
	.chat-sidebar.hidden {
		display: none;
	}
	.chat-main {
		display: none;
	}
	.chat-main.active {
		display: flex;
	}
	.chat-back-btn {
		display: flex;
	}
	.chat-messages {
		padding: 12px 16px;
	}
	.chat-msg-bubble {
		font-size: 16px;
		padding: 6px 6px;
	}
	.chat-message {
		max-width: 85%;
	}
	/* Стандартный мобильный размер шрифта для удобного чтения в PWA
	   (на мобильных масштабирование отключено: user-scalable=no) */
	.chat-msg-time {
		font-size: 12px;
	}
	.chat-msg-edited {
		font-size: 11px;
	}
	.chat-msg-reply-name {
		font-size: 13px;
	}
	.chat-msg-reply-text {
		font-size: 14px;
	}
	.chat-msg-menu-item {
		font-size: 15px;
	}
	.chat-date-divider span {
		font-size: 13px;
	}
	.chat-messages-loader {
		font-size: 14px;
	}
	.chat-scroll-bottom-btn {
		right: 12px;
		bottom: calc(100% + 8px);
		width: 40px;
		height: 40px;
	}
	.chat-dialog-name {
		font-size: 16px;
	}
	.chat-dialog-last-msg {
		font-size: 14px;
	}
	.chat-dialog-time {
		font-size: 12px;
	}
	.chat-dialog-unread {
		font-size: 12px;
	}
	.chat-search-box input {
		font-size: 15px;
	}
	/* Панель поиска в шапке: на узких экранах экономим каждый пиксель */
	.chat-dialog-search-box {
		padding: 0 2px 0 10px;
		gap: 6px;
	}
	.chat-dialog-search-clear {
		width: 26px;
		height: 26px;
		font-size: 14px;
	}
	.chat-search-nav-btn {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}
	.chat-dialog-search-count {
		font-size: 11px;
		margin-right: 0;
	}
	.chat-companion-name {
		font-size: 17px;
	}
	.chat-companion-status {
		font-size: 13px;
	}
	.chat-input {
		font-size: 16px;
	}
	.chat-reply-name {
		font-size: 14px;
	}
	.chat-reply-text {
		font-size: 14px;
	}
	.chat-sidebar-title h2 {
		font-size: 19px;
	}
	.chat-empty-state h3 {
		font-size: 18px;
	}
	.chat-empty-state p {
		font-size: 15px;
	}
	.chat-footer {
		padding: 4px 6px;
	}
	.chat-input-container {
		padding: 0 6px;
	}
	.chat-auth-card {
		padding: 16px;
	}
}

/* User info modal */
.chat-user-modal {
	position: fixed;
	inset: 0;
	background: var(--scrim);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 16px;
}
.chat-user-modal-card {
	background: var(--surface-app);
	border-radius: 12px;
	width: 100%;
	max-width: 420px;
	overflow: hidden;
	box-shadow: 0 8px 32px var(--shadow-bubble);
}
.chat-user-modal-top {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--surface-chrome);
	font-size: 16px;
	font-weight: 500;
}
.chat-modal-close {
	margin-left: auto;
}
.chat-user-profile-name {
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 4px;
	word-break: break-word;
}
.chat-user-profile-status {
	text-align: center;
	font-size: 13px;
	color: var(--text-tertiary);
	margin-bottom: 16px;
}
.chat-user-modal-rows {
	padding: 8px 0;
}
.chat-user-modal-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
}
.chat-user-modal-row + .chat-user-modal-row {
	border-top: 1px solid var(--border-row);
}
.chat-user-modal-row-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-tertiary);
	font-size: 14px;
}
.chat-user-modal-row-value {
	font-size: 14px;
	font-weight: 500;
	text-align: right;
	word-break: break-word;
}
.chat-user-modal-bio {
	text-align: left;
	white-space: pre-wrap;
	max-width: 70%;
}

/* Avatars */
.chat-avatar-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Нижний таб-бар (Чаты / Настройки / Профиль) — по аналогии с нижним меню
   мобильного приложения. Лежит внизу .chat-app (рядом с .chat-app-body) и
   потому виден на всех экранах: список диалогов, открытый диалог, настройки
   и профиль. Активный таб — setActiveTab(). Панель растянута во всю ширину,
   кнопки собраны в .chat-tabbar-inner (на десктопе он оставлен у ширины
   боковой колонки). */
.chat-sidebar-footer {
	display: flex;
	justify-content: flex-start;
	background: var(--surface-chrome);
	border-top: 1px solid var(--border-subtle);
	flex-shrink: 0;
	width: 100%;
}
.chat-tabbar-inner {
	display: flex;
	align-items: stretch;
	width: 100%;
}
.chat-tabbar-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 8px 4px;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.chat-tabbar-btn:hover {
	background: var(--hover);
}
.chat-tabbar-btn.active {
	color: var(--accent-text);
}
.chat-tabbar-btn i {
	font-size: 19px;
}
.chat-tabbar-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--surface-avatar);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	overflow: hidden;
}
.chat-tabbar-avatar .chat-avatar-img {
	width: 100%;
	height: 100%;
}

/* На десктопе кнопки таб-бара оставлены у ширины боковой колонки, сама панель растянута на всю ширину,
   чтобы не было пустой полосы под основным окном. На экранах ≤768px кнопки
   занимают всю ширину нижнего края. */
@media (min-width: 769px) {
	.chat-tabbar-inner {
		width: 380px;
	}
}

/* В открытом диалоге (мобильные экраны ≤768px) таб-бар скрываем — как
   в WhatsApp и в мобильном приложении: диалог занимает весь экран. Окно 
   диалога включается инлайн-стилем display:flex
   из dialogs.js/settings.js/profile.js, поэтому состояние ловим через :has()
   (современные браузеры); на десктопе таб-бар остаётся видимым всегда  */
@media (max-width: 768px) {
	.chat-app:has(#chat-window[style*="display: flex"]) .chat-sidebar-footer {
		display: none;
	}
}

/* Settings screen (таб «Настройки»): компактный список строк в карточке */
.chat-settings-card {
	background: var(--surface-app);
	border-radius: 10px;
	border: 1px solid var(--border-subtle);
	overflow: hidden;
}
.chat-settings-row {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 16px;
	background: var(--surface-app);
	border: none;
	border-bottom: 1px solid var(--border-chrome);
	text-align: left;
	cursor: pointer;
	color: var(--text-primary);
	font-size: 15px;
}
/* Строка-ссылка (внешняя страница в новой вкладке) */
.chat-settings-row[href] {
	text-decoration: none;
}
.chat-settings-row:last-child {
	border-bottom: none;
}
.chat-settings-row > i:first-child {
	width: 20px;
	color: var(--text-secondary);
	font-size: 17px;
	text-align: center;
}
.chat-settings-row-label {
	flex: 1;
}
.chat-settings-row-chevron {
	color: var(--icon-faint-3);
	font-size: 14px;
}
.chat-settings-row-value {
	color: var(--text-tertiary);
	font-size: 14px;
}
.chat-settings-hint {
	display: flex;
	gap: 10px;
	margin-top: 18px;
	text-align: left;
	font-size: 13px;
    color: var(--text-tertiary);
}
/* Переключатель «Уведомления» (дубль колокольчика в шапке) */
.chat-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
	flex-shrink: 0;
}
.chat-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.chat-switch-slider {
	position: absolute;
	inset: 0;
	background: var(--switch-track);
	border-radius: 24px;
	transition: background 0.2s;
	cursor: pointer;
}
.chat-switch-slider:before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	background: var(--surface-chip-inverse);
	border-radius: 50%;
	transition: transform 0.2s;
}
.chat-switch input:checked + .chat-switch-slider {
	background: var(--accent);
}
.chat-switch input:checked + .chat-switch-slider:before {
	transform: translateX(16px);
}

/* Выбор темы оформления: «Системная / Светлая / Тёмная». Режим 'system' в
   разметке — обычная опция; хранилище о нём не знает (нет ключа).
   Текст рядом с контролом переносится на узких экранах: три подписи
   в строку с иконкой не влезают. */
.chat-settings-row-theme {
	flex-wrap: wrap;
	row-gap: 10px;
	cursor: default;
}
.chat-theme-modes {
	display: flex;
	gap: 4px;
	margin-left: auto;
	padding: 3px;
	border-radius: 9px;
	background: var(--surface-chrome);
	flex-shrink: 0;
}
.chat-theme-mode {
	position: relative;
	cursor: pointer;
}
.chat-theme-mode input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.chat-theme-mode span {
	display: block;
	padding: 6px 10px;
	border-radius: 7px;
	font-size: 13px;
	white-space: nowrap;
	color: var(--text-secondary);
}
.chat-theme-mode input:checked + span {
	background: var(--accent);
	color: var(--on-accent);
}
/* Фокус с клавиатуры: радиокнопка скрыта, поэтому подсвечиваем подпись. */
.chat-theme-mode input:focus-visible + span {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
/* Узкий экран: три подписи делим поровну на всю ширину строки. */
@media (max-width: 480px) {
	.chat-theme-modes {
		width: 100%;
		margin-left: 0;
	}
	.chat-theme-mode {
		flex: 1;
		text-align: center;
	}
}

/* Profile modal */
.chat-profile-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 24px 16px 28px;
	background: var(--surface-app);
}
.chat-profile-screen {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface-screen);
}
.chat-screen-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--surface-chrome);
	border-bottom: 1px solid var(--border-strong);
	min-height: 56px;
}
.chat-screen-title {
	font-size: 16px;
	font-weight: 500;
}
.chat-profile-avatar-wrap {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto 12px;
}
.chat-profile-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--surface-avatar);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 44px;
	color: var(--text-secondary);
	overflow: hidden;
	cursor: pointer;
}
/* Иконка-заглушка, когда у группы нет фото (profile.js): крупнее обычных
   инициалов и акцентного цвета — иначе не отличить от аватара человека. */
.chat-profile-avatar-icon {
	font-size: 2em;
	color: var(--accent-text);
}
.chat-profile-avatar-edit {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid var(--ring-inverse);
	background: var(--accent);
	color: var(--on-accent);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.chat-profile-avatar-edit:hover {
	background: var(--accent-hover);
}
/* Отступы элементов экрана профиля и экрана группы. */
.chat-profile-edit-btn {
	margin-top: 16px;
}
.chat-profile-form-btn,
.chat-profile-alert,
.chat-group-info-alert {
	margin-top: 12px;
}
.chat-profile-avatar-remove {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid var(--ring-inverse);
	background: var(--danger-2);
	color: var(--on-accent);
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.chat-profile-avatar-remove:hover {
	background: var(--danger-hover);
}
.chat-profile-phone {
	text-align: center;
	color: var(--text-tertiary);
	font-size: 14px;
	margin-bottom: 16px;
}

/* Custom confirm modal (message deletion) */
.chat-confirm-modal {
	position: fixed;
	inset: 0;
	background: var(--scrim-strong);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1100;
	padding: 16px;
}
.chat-confirm-modal-card {
	background: var(--surface-app);
	border-radius: 16px;
	width: 100%;
	max-width: 360px;
	box-shadow: 0 12px 40px var(--shadow-menu);
	overflow: hidden;
	animation: chat-confirm-pop 0.18s ease-out;
}
@keyframes chat-confirm-pop {
	from { transform: scale(0.92); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
.chat-confirm-icon {
	width: 56px;
	height: 56px;
	margin: 26px auto 0;
	border-radius: 50%;
	background: var(--danger-bg);
	color: var(--danger-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.chat-confirm-title {
	margin-top: 14px;
	padding: 0 24px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	color: var(--text-primary);
}
.chat-confirm-text {
	margin-top: 8px;
	padding: 0 24px;
	text-align: center;
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-secondary);
}
.chat-confirm-actions {
	display: flex;
	gap: 10px;
	padding: 22px 24px 26px;
}
.chat-confirm-btn {
	flex: 1;
	padding: 11px 16px;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s;
}
.chat-confirm-btn-cancel {
	background: var(--surface-chrome);
	color: var(--text-secondary);
}
.chat-confirm-btn-cancel:hover {
	background: var(--surface-chrome-hover);
}
.chat-confirm-btn-danger {
	background: var(--danger);
	color: var(--on-accent);
}
.chat-confirm-btn-danger:hover {
	background: var(--danger-hover-strong);
}

/* ==================== Режим офлайн ==================== */
/* Баннер «Нет подключения к интернету»: фиксируется к верху приложения
   (относительно .chat-app, position:fixed), а класс app-offline на контейнере
   сдвигает контент вниз на высоту баннера — шапка и список не перекрываются. */
.chat-offline-banner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 10px 16px;
	background: var(--offline-banner-bg);
	color: var(--warn-text-strong-2);
	border-bottom: 1px solid var(--border-warn);
	font-size: 14px;
	font-weight: 500;
}
.chat-offline-banner .fa-wifi {
	color: var(--warn-text);
	font-size: 15px;
}
.chat-app.app-offline {
	padding-top: calc(env(safe-area-inset-top, 0px) + 42px);
}
/* Плашка в списке диалогов, если приложение открыто без сети (диалоги ещё
   ни разу не загрузились) — вместо бесконечного спиннера «Загрузка...». */
.chat-offline-placeholder {
	max-width: 300px;
	margin: 64px auto 0;
	text-align: center;
	color: var(--text-tertiary);
}
.chat-offline-placeholder .fa-wifi {
	display: block;
	font-size: 46px;
	color: var(--icon-faint-2);
	margin-bottom: 16px;
}
.chat-offline-placeholder-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 6px;
}
.chat-offline-placeholder-hint {
	font-size: 13px;
	line-height: 1.5;
}

/* Белый экран запуска (boot-gate): приложение скрыто под полноэкранным белым
   экраном, пока связь не подтверждена отдельным опросом. «Проверка
   соединения...» — navigator.onLine говорит об интернете, «Нет подключения
   к интернету» — опрос не прошёл (см. boot-гейт в js/chat/offline.js). */
.chat-boot-offline {
	position: fixed;
	inset: 0;
	z-index: 4000;
	background: var(--surface-app);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
}
.chat-boot-offline-icon {
	display: block;
	font-size: 48px;
	color: var(--icon-faint-2);
	margin-bottom: 16px;
}
/* Второй экран гейта («Нет подключения») по умолчанию скрыт — он включается
   инлайн-скриптом в chat.php и js/chat/offline.js, когда связи нет.
   «Проверка соединения» видим сразу, скрывать его не нужно. */
.chat-boot-noconn {
	display: none;
}
.chat-boot-checking .chat-boot-offline-icon {
	color: var(--text-tertiary);
}
.chat-boot-offline-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 6px;
}
.chat-boot-offline-hint {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-tertiary);
}

/* Оверлей «Чат открыт в другой вкладке»: мессенджер поддерживает только одну
   активную вкладку на сессию. Когда та же сессия открывается в другой вкладке,
   эта вкладка показывает полноэкранный оверлей (выше всех модалок, z-index 3000)
   и останавливает поллинг. При закрытии активной вкладки оставшаяся вкладка
   возобновляет работу автоматически (см. управление вкладкой в js/chat/tabs.js). */
.chat-tab-overlay {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: var(--surface-chrome);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.chat-tab-overlay-card {
	background: var(--surface-app);
	border-radius: 16px;
	box-shadow: 0 12px 40px var(--shadow-picker);
	max-width: 380px;
	width: 100%;
	padding: 40px 28px;
	text-align: center;
	animation: chat-confirm-pop 0.18s ease-out;
}
.chat-tab-overlay-icon {
	font-size: 44px;
	color: var(--accent-text);
	margin-bottom: 14px;
}
.chat-tab-overlay-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 10px;
}
.chat-tab-overlay-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-secondary);
}

/* Toast «Текст скопирован» */
/* Поле для копирования текста, когда navigator.clipboard недоступен
   (HTTP без secure context, старый WebView): одноразовое, уходит сразу после
   copy. Уводится за экран, а не display:none — из скрытого поля не выделить текст. */
.chat-copy-helper {
	position: fixed;
	left: -9999px;
}
.chat-copy-toast {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--toast-bg-2);
	color: var(--on-scrim);
	padding: 8px 18px;
	border-radius: 8px;
	font-size: 13px;
	z-index: 5000;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
}
.chat-copy-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Баннер фатальной ошибки JS (showFatal в chat.php): появляется, когда граф
   ES-модулей не загрузился, — то есть когда интерфейс не работает. Стили
   были инлайном через cssText; здесь им место, как и всему статичному. */
.chat-fatal-error {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	background: var(--danger-hover);
	color: var(--on-accent);
	padding: 10px 14px;
	font: 13px/1.45 -apple-system, sans-serif;
	white-space: pre-wrap;
	word-break: break-word;
	cursor: pointer;
}

/* ==================== Toast-уведомления ==================== */
.chat-toast {
	position: fixed;
	bottom: 84px;
	left: 50%;
	transform: translateX(-50%) translateY(16px);
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: min(420px, calc(100vw - 32px));
	background: var(--toast-bg);
	color: var(--toast-text);
	padding: 12px 16px;
	border-radius: 12px;
	box-shadow: 0 8px 24px var(--shadow-toast);
	font-size: 14px;
	line-height: 1.4;
	z-index: 6000;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
}
.chat-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.chat-toast-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	margin-top: 1px;
}
.chat-toast-info .chat-toast-icon {
	background: var(--success-bg);
	color: var(--success-text-2);
}
.chat-toast-warning .chat-toast-icon {
	background: var(--warn-bg);
	color: var(--warn-text);
}
.chat-toast-body {
	word-break: break-word;
	overflow-wrap: anywhere;
}
@media (min-width: 480px) {
	.chat-toast {
		bottom: 96px;
		font-size: 15px;
	}
}

/* ==================== Group chat styles ==================== */

/* Group creation modal */
.chat-group-name-field {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-subtle);
}
.chat-group-name-field input {
	width: 100%;
	border: 1px solid var(--border-field);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
	outline: none;
}
.chat-group-name-field input:focus {
	border-color: var(--accent);
}
.chat-group-create-hint {
	padding: 0 14px;
}
.chat-group-selected-members {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 14px;
	min-height: 0;
}
.chat-group-selected-members:empty {
	display: none;
}
.chat-group-member-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--surface-badge);
	color: var(--accent-text-strong);
	border-radius: 16px;
	padding: 4px 10px;
	font-size: 13px;
}
.chat-group-member-remove {
	background: none;
	border: none;
	color: var(--accent-text);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	margin-left: 2px;
}
.chat-group-member-remove:hover {
	color: var(--danger-hover);
}
.chat-group-create-actions {
	padding: 10px 14px;
}

/* Group creation modal: two pages (Telegram-style) */
.chat-group-create-actions-end {
	text-align: right;
}
.chat-group-create-next,
.chat-group-create-done {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px var(--shadow-accent);
	transition: background 0.15s, opacity 0.15s, transform 0.1s;
}
.chat-group-create-next:hover:not(:disabled),
.chat-group-create-done:hover {
	background: var(--accent-hover-2);
}
.chat-group-create-next:disabled {
	background: var(--accent-disabled);
	box-shadow: none;
	cursor: not-allowed;
}
.chat-group-create-next:active:not(:disabled),
.chat-group-create-done:active {
	transform: scale(0.94);
}
/* Контакты на странице 1 */
.chat-group-contact .chat-group-contact-check {
	flex-shrink: 0;
	margin-left: auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--border-check);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: transparent;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chat-group-contact.selected {
	background: var(--accent-soft-select);
}
.chat-group-contact.selected:hover {
	background: var(--accent-soft-hover);
}
.chat-group-contact.selected .chat-group-contact-check {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}
.chat-group-contact.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.chat-group-contact.disabled .chat-group-contact-check {
	border-color: var(--border-subtle);
}
.chat-group-contact-sub {
	font-size: 13px;
	color: var(--text-tertiary);
	margin: 2px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Аватар группы на странице 2 */
.chat-group-avatar-picker {
	position: relative;
	width: 88px;
	margin: 14px auto 2px;
	cursor: pointer;
}
.chat-group-avatar-preview {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--surface-chrome);
	border: 1px dashed var(--border-dropzone);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--accent-text);
	font-size: 2em;
}
.chat-group-avatar-preview .chat-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.chat-group-avatar-cam {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--ring-inverse);
}
/* Список участников на странице 2 (выше, чем в инфо-экране группы) */
.chat-group-create-members .chat-group-info-members-list {
	max-height: 200px;
}

/* Group member chip in sidebar search */
.chat-group-member-chip-preview {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--surface-chip-preview);
	border: 1px solid var(--border-chip);
	border-radius: 8px;
	padding: 6px 10px;
	margin: 2px 0;
}
.chat-group-member-chip-preview .chat-group-member-remove {
	margin-left: auto;
}

/* Message sender name in group chats */
.chat-msg-sender {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--accent-text);
	line-height: 1.2; /* фиксированная высота строки: от неё зависит отступ кнопки меню (.has-sender) */
	margin-bottom: 2px;
	padding-left: 2px;
}
.chat-message.mine .chat-msg-sender {
	color: var(--accent-text);
}

/* Group info screen */
.chat-group-info-members-section {
	margin-top: 12px;
}
.chat-group-info-members-header {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-tertiary);
	padding: 0 16px;
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.chat-group-info-members-list {
	max-height: 300px;
	overflow-y: auto;
}
.chat-group-member-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	cursor: default;
}
.chat-group-member-item:hover {
	background: var(--hover-soft);
}
.chat-group-member-info {
	flex: 1;
	min-width: 0;
}
.chat-group-member-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
}
.chat-group-member-username {
	font-size: 12px;
	color: var(--text-tertiary);
}
.chat-group-member-role {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	color: var(--accent-text);
	background: var(--surface-badge);
	border-radius: 4px;
	padding: 1px 6px;
	margin-left: 4px;
	vertical-align: middle;
}
.chat-group-info-actions {
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Group info: строка названия (просмотр) + pencil для admin */
.chat-group-name-view {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 12px;
	min-height: 32px;
}
.chat-group-name-text {
	margin-bottom: 0;
}
.chat-group-name-edit-btn {
	background: none;
	border: none;
	color: var(--text-tertiary);
	cursor: pointer;
	font-size: 14px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s;
}
.chat-group-name-edit-btn:hover {
	color: var(--accent-text);
	background: var(--accent-soft);
}

/* Group info: форма переименования */
.chat-group-name-edit {
	padding: 4px 4px 0;
}
.chat-group-name-edit .chat-auth-field {
	text-align: left;
}
.chat-group-name-edit .chat-auth-field input {
	width: 100%;
	box-sizing: border-box;
}
.chat-btn-group-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}
.chat-btn-group-actions .chat-auth-btn {
	flex: 1;
	width: auto;
	min-width: 0;
	margin-top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* Group info: описание группы (просмотр + «Добавить описание» для admin) */
.chat-group-desc-view {
	margin: 10px 12px;
	max-width: 90%;
	text-align: center;
}
.chat-group-desc-text {
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-secondary);
	background: var(--surface-desc);
	border-radius: 10px;
	padding: 10px 14px;
	white-space: pre-wrap;
	word-break: break-word;
	margin-bottom: 6px;
}
.chat-group-desc-add-btn,
.chat-group-desc-edit-btn {
	background: none;
	border: none;
	color: var(--accent-text);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 6px;
	transition: background 0.15s, color 0.15s;
}
.chat-group-desc-add-btn:hover,
.chat-group-desc-edit-btn:hover {
	color: var(--accent-text-hover);
	background: var(--accent-soft);
}

/* Group info: форма редактирования описания */
.chat-group-desc-edit {
	padding: 4px 4px 0;
}
.chat-group-desc-edit .chat-auth-field {
	text-align: left;
}
.chat-group-desc-edit textarea {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	min-height: 72px;
}

/* Group info: меню действий участника («три точки» в строке списка).
   Заменило прежнюю кнопку × — пункты: профиль, права админа, удаление. */
.chat-group-member-menu-wrap {
	position: relative;
	flex-shrink: 0;
}
.chat-group-member-menu-btn {
	background: none;
	border: none;
	color: var(--text-tertiary);
	cursor: pointer;
	font-size: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.chat-group-member-item:hover .chat-group-member-menu-btn,
.chat-group-member-menu-wrap:hover .chat-group-member-menu-btn {
	opacity: 1;
}
.chat-group-member-menu-btn:hover {
	color: var(--text-secondary);
	background: var(--hover);
}
@media (hover: none) {
	.chat-group-member-menu-btn {
		opacity: 0.7;
	}
}
.chat-group-member-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 40;
	min-width: 200px;
	max-width: calc(100vw - 16px);
	box-sizing: border-box;
	background: var(--surface-app);
	border-radius: 8px;
	box-shadow: 0 4px 16px var(--shadow-menu);
	padding: 4px 0;
	display: none;
}
.chat-group-member-menu.open {
	display: block;
}
.chat-group-member-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 14px;
	border: none;
	background: transparent;
	font-size: 14px;
	font-family: inherit;
	color: var(--text-primary);
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-group-member-menu-item:hover {
	background: var(--hover-row);
}
.chat-group-member-menu-item i {
	width: 16px;
	text-align: center;
	color: var(--text-secondary);
}
.chat-group-member-menu-item-danger {
	color: var(--danger-text);
}
.chat-group-member-menu-item-danger i {
	color: var(--danger-text);
}
.chat-group-member-menu-item-danger:hover {
	background: var(--danger-bg);
}

/* Group avatar in dialogs */
.chat-dialog-avatar .fa-users {
	font-size: 1.4em;
	color: var(--accent-text);
}

/* Group avatar in window header */
.chat-window-group-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-badge);
	flex-shrink: 0;
}

/* Кнопки подтверждения/отклонения заявки на вход для модераторов */
.chat-login-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border-accent-soft);
}

.chat-login-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s;
}

.chat-login-btn:hover { opacity: 0.85; }
.chat-login-btn:active { opacity: 0.7; }

.chat-login-approve {
	background: var(--success);
	color: var(--on-accent);
}

.chat-login-reject {
	background: var(--danger-2);
	color: var(--on-accent);
}

.chat-login-status {
	font-size: 12px;
	font-weight: 600;
	color: var(--success-text);
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border-accent-soft);
}

/* ==================== Профиль: «Медиа / Файлы / Ссылки» ====================
   Блок вложений диалога на экранах «Данные пользователя» и «Информация о
   группе». Табы, сетка миниатюр, список файлов и список ссылок; наполняет
   profile.js через chat-get-dialog-media. */
.chat-profile-media {
	margin-top: 12px;
	padding: 12px 0 4px;
	border-top: 1px solid var(--border-subtle);
}
.chat-profile-media-tabs {
	display: flex;
	gap: 6px;
	padding: 0 16px;
	margin-bottom: 10px;
}
.chat-profile-media-tab {
	flex: 1;
	padding: 6px 10px;
	border: none;
	border-radius: 16px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	background: var(--surface-chrome);
	color: var(--text-secondary);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.chat-profile-media-tab:hover {
	background: var(--hover-row);
}
.chat-profile-media-tab.active {
	background: var(--accent-soft);
	color: var(--accent-text);
}
.chat-profile-media-content {
	padding: 0 16px;
}
.chat-profile-media-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}
.chat-profile-media-item {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 6px;
	background: var(--surface-chrome);
	cursor: zoom-in;
}
.chat-profile-media-item:hover {
	filter: var(--doc-hover-filter);
}
.chat-profile-media-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.chat-profile-media-empty {
	padding: 14px 0;
	font-size: 13px;
	color: var(--text-tertiary);
	text-align: center;
}
.chat-profile-files,
.chat-profile-links {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.chat-profile-file,
.chat-profile-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	background: var(--surface-app);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.chat-profile-file:hover,
.chat-profile-link:hover {
	background: var(--hover-row);
}
.chat-profile-file-icon,
.chat-profile-link-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: var(--accent-soft);
	color: var(--accent-text);
	font-size: 17px;
	flex-shrink: 0;
}
.chat-profile-file-info,
.chat-profile-link-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.chat-profile-file-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-profile-file-meta {
	font-size: 12px;
	color: var(--text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-profile-file-dl {
	margin-left: auto;
	color: var(--text-faint);
	font-size: 14px;
	flex-shrink: 0;
}
.chat-profile-link-url {
	font-size: 13px;
	font-weight: 500;
	color: var(--link);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chat-profile-link-date {
	font-size: 12px;
	color: var(--text-tertiary);
}

/* ==================== Лайтбокс просмотра фото (замена PhotoSwipe) ====================
   Полноэкранный просмотрщик фото сообщений и аватарок. Открывается поверх всего
   (z-index выше модалок), тёмная подложка, картинка по центру. Жесты: тап по
   подложке/крестик/Esc — закрыть, двойной тап/колесо — зум, свайп — листать,
   свайп вниз при zoom==1 — закрыть. Элементы создаются в js/chat/lightbox.js. */
.chat-lightbox {
	position: fixed;
	inset: 0;
	z-index: 4000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	opacity: 0;
	transition: opacity 0.2s ease;
	touch-action: none;
	overscroll-behavior: none;
}
.chat-lightbox.visible { opacity: 1; }

.chat-lightbox-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	cursor: zoom-in;
}
.chat-lightbox-stage:active { cursor: grabbing; }

.chat-lightbox-slide {
	position: absolute;
	inset: 0;
	display: none;
}
.chat-lightbox-slide.active { display: block; }

.chat-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	transform-origin: 0 0; /* точка (x,y) картинки → (tx + x*zoom, ty + y*zoom) */
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	background: #000;
}
.chat-lightbox-img.chat-lightbox-err {
	opacity: 0.35;
}

.chat-lightbox-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--on-accent);
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}
.chat-lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }

.chat-lightbox-counter {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	color: rgba(255, 255, 255, 0.85);
	font: 13px -apple-system, sans-serif;
	pointer-events: none;
}

.chat-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--on-accent);
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, opacity 0.15s;
}
.chat-lightbox-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.25); }
.chat-lightbox-nav:disabled { opacity: 0.35; cursor: default; }
.chat-lightbox-prev { left: 12px; }
.chat-lightbox-next { right: 12px; }

/* На узких экранах навигация по слайдам — только свайпы, кнопки не мешают */
@media (max-width: 768px) {
	.chat-lightbox-nav { display: none !important; }
}

/* ==================== ТЁМНАЯ ТЕМА ====================
   Переопределяет те же 133 имени, поэтому «цвет на цвет» невозможен:
   любая пара «поверхность + текст» разъехаться не может, если оба
   цвета взяты из токенов.

   Правила выбора тёмных значений:
   - Инвертировать нельзя (#fff → #000 убивает тени и границы), поэтому
     поверхности идут по шкале от #0b141a (фон) до #2a3942 (hover/актив).
   - Тени не инвертируются, а усиливаются: на тёмном фоне они не видны.
   - Полупрозрачные «поверх белого» (--bubble-doc) становятся
     полупрозрачными «поверх тёмного», иначе в пузыре проступят полосы.
   - --toast-* переключается на светлый: тёмная плашка поверх тёмного фона
     сливается, это единственное место, где фон инвертируется осознанно.
   Атрибут ставит inline-скрипт в chat-header.php (до первой отрисовки),
   переключатель — public/js/chat/theme.js.
*/
html[data-theme="dark"] {
	color-scheme: dark;

	/* Поверхности */
	--surface-body: #0b141a;
	--surface-app: #111b21;
	--surface-chrome: #202c33;
	--surface-chrome-hover: #2a3942;
	--surface-selected: #202c33;
	--surface-screen: #0b141a;
	--surface-chat: #0b141a;
	--surface-canvas: #111b21;
	--surface-canvas-dot-a: #1f2c33;
	--surface-canvas-dot-b: #18242b;
	--surface-avatar: #2a3942;
	--surface-disabled: #2f3b45;
	--surface-input-prefix: #1f2c33;
	--surface-badge: #1e2a45;
	--surface-desc: #18242b;
	--surface-picker: #18242b;
	--surface-chip-preview: #1f2c33;
	--surface-sync: #18242b;
	--surface-hint: #16212a;
	--surface-chip-inverse: #e9edef;
	/* Слой над футером чата: в тёмной теме светлее --surface-chrome (#202c33),
	   как белое поле на #f0f2f5 в светлой. Направление «слой приподнят над
	   подложкой» обязано сохраняться: с --surface-app (#111b21) поле ввода,
	   панель ответа и превью вложения уезжали в чёрное и тонули в фоне. */
	--surface-raised: #26343d;
	--qr-surface: #ffffff;

	/* Наведение */
	--hover: #1b262d;
	--hover-row: #1a262e;
	--hover-row-2: #1f2c33;
	--hover-row-3: #26343d;
	--hover-soft: #1a262e;
	--hover-alt: #2a3942;

	/* Текст */
	--text-base: #e9edef;
	--text-primary: #f2f5f6;
	--text-secondary: #c3ccd2;
	--text-tertiary: #a0acb5;
	--text-faint: #8696a0;
	--text-label: #dbe1e5;
	--text-status: #93a1ab;
	--text-timer: #98a6b0;
	--text-icon-faint: #7d8b95;
	--text-disabled: #64737e;
	--icon-faint: #66757f;
	--icon-faint-2: #6e7d87;
	--icon-faint-3: #6f7d87;
	--icon-faint-4: #5c6b75;
	--link: #7aa7f0;

	/* Акцент: заливка та же, текст и подложки светлеют — на тёмном фоне
	   #6366f1 не проходит AA для мелкого текста. */
	--accent: #6366f1;
	--accent-hover: #7375f6;
	--accent-hover-2: #6f72f5;
	--accent-disabled: #3f4468;
	--accent-text: #818cf8;
	--accent-text-hover: #9ba3fb;
	--accent-text-strong: #b0b5fc;
	--accent-text-soft: #93a7ff;
	--accent-soft: #1e2140;
	--accent-soft-hover: #262a4d;
	--accent-soft-hover-2: #24284a;
	--accent-soft-select: #1c1f3b;
	--accent-soft-card: #1a1e38;
	--accent-soft-line: #4338ca;
	--reaction-own-bg: #232a4a;
	/* Чип реакции — тот же приподнятый слой, что и в светлой теме, только тёмный:
	   чужие чипы больше не остаются белыми (--surface-chip-inverse живёт для
	   «инверсных» чипов вроде бегунка переключателя). Ховер светлеет, а не
	   темнеет: на тёмном фоне ховер вниз не читается. */
	--reaction-chip-bg: #2a3942;
	--reaction-chip-hover: #33444f;
	--accent-alt: #6366f1;
	--accent-alt-hover: #7c85f7;

	/* Опасные действия */
	--danger: #e05252;
	--danger-2: #f26d6d;
	--danger-hover: #d94141;
	--danger-hover-strong: #c03434;
	--danger-text: #f87171;
	--danger-text-strong: #fca5a5;
	--danger-bg: #35191c;
	--danger-bg-2: #2b1618;
	--danger-bg-hover: #431f22;

	/* Успех / предупреждение / офлайн */
	--success: #34d399;
	--success-text: #34d399;
	--success-text-2: #2dd4bf;
	--success-text-3: #4ade80;
	--success-bg: #0f2f26;
	--success-bg-2: #0b2a1f;
	--success-border: #1f5136;
	--warn: #fb923c;
	--warn-hover: #f59e0b;
	--warn-disabled: #7c4a1d;
	--warn-text: #fbbf24;
	--warn-text-strong: #fcd34d;
	--warn-text-strong-2: #fbbf24;
	--warn-bg: #33280f;
	--warn-bg-2: #2b2213;
	--offline-banner-bg: #33280f;

	/* Цвета имён участников группового чата: светлеют, потому что
	   лежат на тёмном пузыре чужого сообщения. */
	--sender-1: #ff8a8a;
	--sender-2: #ffa066;
	--sender-3: #69db7c;
	--sender-4: #38d9a9;
	--sender-5: #74c0fc;
	--sender-6: #b197fc;
	--sender-7: #f783ac;
	--sender-8: #d0a06a;

	/* Служебные состояния */
	--online: #4caf50;
	--saved-avatar: #4596e6;
	--switch-track: #3a4a55;
	--toast-bg: #e9edef;
	--toast-bg-2: #dbe1e5;
	--toast-text: #111b21;

	/* Границы */
	--border-subtle: #1c262d;
	--border-chrome: #1f2c33;
	--border-strong: #3d4d58;
	--border-row: #1a252c;
	--border-input: #2a3942;
	--border-field: #2a3942;
	--border-chip: #33444f;
	--border-check: #31424c;
	--border-dropzone: #31424c;
	--border-hint: #26343d;
	--border-accent: #4338ca;
	--border-accent-2: #3730a3;
	--border-accent-soft: rgba(99, 102, 241, 0.45);
	--border-danger: #5c2a2f;
	--border-warn: #6b5218;
	--border-warn-2: #6b4519;
	/* Карточка документа лежит поверх пузыря, поэтому и здесь это осветляющая
	   полупрозрачная подложка (как белая в светлой теме), а чёрная —
	   в тёмной вкладке она просто тонула бы в собственном пузыре.
	   Граница тоже светлая: чёрный волосок на тёмном фоне не виден. */
	--border-bubble-doc: rgba(255,255,255,0.1);
	--ring-inverse: #111b21;
	--doc-hover-filter: brightness(1.15);

	/* Пузыри сообщений */
	--bubble-in: #202c33;
	--bubble-out: #005c4b;
	--bubble-in-hit: #26343d;
	--bubble-out-hit: #046b58;
	--bubble-reply-bg: rgba(255, 255, 255, 0.06);
	--bubble-doc: rgba(255, 255, 255, 0.07);
	--bubble-doc-mine: rgba(255, 255, 255, 0.05);
	/* Кнопка «⋯» на пузыре в светлой теме — белый приподнятый слой, поэтому
	   и здесь направление сохраняется: белые полупрозрачные слои разной
	   плотности. Чёрный слой на тёмном пузыре читался бы как дыра. */
	--bubble-menu-btn: rgba(255, 255, 255, 0.1);
	--bubble-menu-btn-hover: rgba(255, 255, 255, 0.2);

	/* Текст и значки поверх заливки */
	--on-accent: #ffffff;
	--on-scrim: #ffffff;

	/* Затемнение */
	--scrim: rgba(0, 0, 0, 0.6);
	--scrim-strong: rgba(0, 0, 0, 0.7);
	--scrim-badge: rgba(0, 0, 0, 0.6);
	/* Чип времени поверх фото: тот же scrim, что и в светлой теме — картинка
	   не меняется от темы, значит и подложка под временем не должна. */
	--photo-overlay-bg: rgba(0, 0, 0, 0.5);
	--canvas-divider: rgba(255, 255, 255, 0.06);

	/* Тени */
	--shadow-bubble: rgba(0, 0, 0, 0.35);
	--shadow-menu: rgba(0, 0, 0, 0.55);
	--shadow-menu-mid: rgba(0, 0, 0, 0.45);
	--shadow-menu-soft: rgba(0, 0, 0, 0.4);
	--shadow-picker: rgba(0, 0, 0, 0.45);
	--shadow-card: rgba(0, 0, 0, 0.35);
	--shadow-fab: rgba(0, 0, 0, 0.5);
	--shadow-toast: rgba(0, 0, 0, 0.6);
	--shadow-accent: rgba(99, 102, 241, 0.45);
	--shadow-accent-sm: rgba(99, 102, 241, 0.5);
	--shadow-accent-lg: rgba(99, 102, 241, 0.55);
	--shadow-accent-0: rgba(99, 102, 241, 0);
	--shadow-focus-ring: rgba(99, 102, 241, 0.75);
	--shadow-online: rgba(76, 175, 80, 0.8);
	--shadow-jump: rgba(0, 200, 160, 0.45);
}