/* tg-bridge widget — scoped CSS, no framework dependency.
   Все правила обёрнуты в .tg-bridge чтобы не пересекаться со стилями сайта.
   Используем CSS reset через all:initial — но это ломает SVG, поэтому ограничиваемся явными reset'ами.

   CSS-переменные ниже — точки кастомизации. PHP-сторона (Tg_Bridge_Widget::enqueue)
   генерит inline <style> с переопределением из настроек админки. Можешь также
   переопределить любую переменную в theme/style.css если ставишь плагин на другой сайт. */

.tg-bridge {
	/* ===== Theming variables ===== */
	--tgb-primary:        #2563eb;  /* основной цвет (FAB, header, кнопка отправить, ссылки в out-bubble) */
	--tgb-primary-hover:  #1d4ed8;  /* primary при hover */
	--tgb-primary-text:   #ffffff;  /* текст на primary-фоне */
	--tgb-bg:             #ffffff;  /* фон панели */
	--tgb-body-bg:        #f9fafb;  /* фон списка сообщений */
	--tgb-text:           #111827;  /* основной текст */
	--tgb-text-muted:     #6b7280;  /* приглушённый текст (consent, оператор label) */
	--tgb-border:         #e5e7eb;  /* границы */

	/* Цвета bubble'ов */
	--tgb-bubble-in-bg:        var(--tgb-primary);     /* фон bubble посетителя (in-direction) */
	--tgb-bubble-in-text:      var(--tgb-primary-text);
	--tgb-bubble-out-bg:       #ffffff;                /* фон bubble оператора */
	--tgb-bubble-out-text:     #111827;
	--tgb-bubble-out-border:   var(--tgb-border);

	/* Радиус скруглений */
	--tgb-radius:         12px;     /* панель и крупные элементы */
	--tgb-radius-bubble:  12px;     /* bubbles */
	--tgb-radius-input:   6px;      /* textarea, send-кнопка */

	/* Позиция FAB */
	--tgb-fab-bottom:     1rem;
	--tgb-fab-side:       1rem;      /* отступ от стороны */
	--tgb-fab-size:       56px;

	/* Шрифт */
	--tgb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.tg-bridge,
.tg-bridge * {
	box-sizing: border-box;
	font-family: var(--tgb-font);
}

.tg-bridge {
	position: fixed;
	bottom: var(--tgb-fab-bottom);
	right: var(--tgb-fab-side);
	z-index: 2147483000;
	font-size: 14px;
	line-height: 1.4;
	color: var(--tgb-text);
}
/* Альтернативная позиция: слева (выставляется через body-class .tgb-side-left) */
.tg-bridge.tg-bridge--left {
	right: auto;
	left: var(--tgb-fab-side);
}
/* Когда панель открыта на desktop — отступаем от краёв экрана
   (комфортный margin, как у Intercom/Drift). На mobile см. @media ниже —
   там панель растягивается на full-screen без отступов. */
.tg-bridge.tg-bridge--open {
	bottom: 20px;
	right: 20px;
}
.tg-bridge--open.tg-bridge--left {
	left: 20px;
	right: auto;
}

/* Контейнер FAB+badge */
.tgb-fab-wrap {
	position: relative;
	display: inline-block;
}

/* Mini-меню выбора способа связи.
   - Скрыто по умолчанию (opacity:0, pointer-events:none).
   - Desktop: hover на .tgb-fab-wrap → меню видно.
   - Mobile (touch): tap на FAB добавляет класс .tgb-fab-wrap--menu-tap → меню видно.

   Меню СЛЕВА от кнопки (right: calc(100% + 12px)) — компактнее, не перекрывает контент
   страницы выше, привычнее для русскоязычных юзеров (text reads left-to-right). */
.tgb-fab-menu {
	position: absolute;
	right: calc(100% + 12px);
	bottom: 0;  /* выравниваем по нижнему краю FAB */
	background: var(--tgb-bg);
	border: 1px solid var(--tgb-border);
	border-radius: var(--tgb-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	min-width: 200px;
	z-index: 10;
	opacity: 0;
	transform: translateX(8px) scale(0.95);
	transform-origin: right center;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
}
/* Если FAB слева — меню справа от него */
.tg-bridge--left .tgb-fab-menu {
	right: auto;
	left: calc(100% + 12px);
	transform: translateX(-8px) scale(0.95);
	transform-origin: left center;
}
/* Невидимый «мост» между FAB и меню — закрывает 12px gap чтобы hover не терялся
   когда мышь идёт от FAB к пунктам меню. Активен только когда меню видно. */
.tgb-fab-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	right: 100%;
	height: var(--tgb-fab-size);
	width: 16px;  /* чуть больше реального gap 12px для надёжности */
	pointer-events: none;
	z-index: 9;
}
.tg-bridge--left .tgb-fab-wrap::after {
	right: auto;
	left: 100%;
}
/* Когда меню hovered/tapped — мост активен (ловит mouse) */
@media (hover: hover) and (pointer: fine) and (min-width: 481px) {
	.tgb-fab-wrap:hover::after {
		pointer-events: auto;
	}
}
.tgb-fab-wrap--menu-tap::after {
	pointer-events: auto;
}
.tg-bridge--left .tgb-fab-menu { transform-origin: bottom left; }
@media (hover: hover) and (pointer: fine) and (min-width: 481px) {
	.tgb-fab-wrap:hover .tgb-fab-menu {
		opacity: 1;
		transform: translateX(0) scale(1);
		pointer-events: auto;
	}
}
/* Tap-show на touch-устройствах: класс ставится JS при tap на FAB */
.tgb-fab-wrap--menu-tap .tgb-fab-menu {
	opacity: 1;
	transform: translateX(0) scale(1);
	pointer-events: auto;
}
.tg-bridge--left .tgb-fab-menu {
	right: auto;
	left: 0;
}
.tgb-fab-menu__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: transparent;
	border: 0;
	width: 100%;
	cursor: pointer;
	color: var(--tgb-text);
	text-decoration: none;
	font-size: 14px;
	font-family: inherit;
	text-align: left;
	transition: background-color 0.15s;
}
.tgb-fab-menu__item:hover {
	background: var(--tgb-body-bg);
}
.tgb-fab-menu__item svg {
	flex-shrink: 0;
	color: var(--tgb-primary);
}
.tgb-fab-menu__item + .tgb-fab-menu__item {
	border-top: 1px solid var(--tgb-border);
}
/* Badge с подсказкой. Default — скрыт.
   - На desktop: показывается при hover на FAB-wrap.
   - На mobile: JS добавляет класс .tgb-fab-badge--show через 5с после загрузки.
   Логика «один раз за сессию + не показывать если чат уже открывался» — в JS. */
.tgb-fab-badge {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: var(--tgb-primary);
	color: var(--tgb-primary-text);
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	pointer-events: none;
	opacity: 0;
	transform: translateY(8px) scale(0.9);
	transform-origin: bottom right;
	transition: opacity 200ms ease, transform 200ms ease;
}
/* JS-driven show — badge показывается ВСЕМ автоматически как стимул открыть чат.
   v0.2.27: hover больше не управляет badge — он управляет menu (см. ниже). */
.tgb-fab-badge--show {
	opacity: 1 !important;
	transform: translateY(0) scale(1) !important;
}
/* На левой стороне badge выровнен от left:0 */
.tg-bridge--left .tgb-fab-badge {
	right: auto;
	left: 0;
	transform-origin: bottom left;
}
.tgb-fab-badge::after {
	/* Маленькая стрелочка вниз указывающая на FAB */
	content: '';
	position: absolute;
	bottom: -4px;
	right: 16px;
	width: 8px;
	height: 8px;
	background: inherit;
	transform: rotate(45deg);
}
.tg-bridge--left .tgb-fab-badge::after {
	right: auto;
	left: 16px;
}

/* ---------- FAB (свёрнутый виджет) ---------- */
.tgb-fab {
	position: relative;  /* для ::before ping-ring */
	width: var(--tgb-fab-size);
	height: var(--tgb-fab-size);
	border-radius: 50%;
	background: var(--tgb-primary);
	color: var(--tgb-primary-text);
	border: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.15s;
	/* Привлечение внимания: wiggle раз в 5 сек */
	animation: tgb-fab-wiggle 5s ease-in-out infinite;
}
/* Ping-ring как у #vp-tg-support — отдельное полупрозрачное кольцо
   позади FAB, расходящееся бесконечно. Лучше видно на любом фоне чем box-shadow. */
.tgb-fab::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--tgb-primary);
	opacity: 0.2;
	z-index: -1;
	animation: tgb-fab-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
	pointer-events: none;
}
@keyframes tgb-fab-ping {
	0%   { transform: scale(1);   opacity: 0.3; }
	75%, 100% { transform: scale(1.7); opacity: 0; }
}
.tgb-fab:hover {
	background: var(--tgb-primary-hover);
	transform: scale(1.05);
	animation-play-state: paused;
}
/* Если primary — это градиент (одинаковые --tgb-primary и --tgb-primary-hover),
   подсвечиваем filter'ом вместо background-смены, иначе hover не виден. */
.tgb-fab:hover { filter: brightness(0.92); }
.tgb-fab:active { transform: scale(0.95); }
.tgb-fab svg { width: 24px; height: 24px; }

/* (Legacy) Pulse через box-shadow — заменено на .tgb-fab::before ping-ring выше */
/* Wiggle — лёгкое покачивание раз в 5 сек чтобы кнопка дёргалась и привлекала внимание.
   Не агрессивно как bounce: только roation ±10°, без translate. */
@keyframes tgb-fab-wiggle {
	0%, 80%, 100% { transform: rotate(0deg); }
	82% { transform: rotate(-10deg); }
	85% { transform: rotate(8deg); }
	88% { transform: rotate(-6deg); }
	91% { transform: rotate(4deg); }
	94% { transform: rotate(-2deg); }
	97% { transform: rotate(0deg); }
}
/* Legacy keyframes (unused with current animation set, kept for backward compat) */
@keyframes _tgb_unused_legacy {
	0%, 70%, 100% {
		transform: scale(1);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 var(--tgb-primary-pulse, rgba(245, 158, 11, 0.4));
	}
	75% {
		transform: scale(1.08);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 10px var(--tgb-primary-pulse, rgba(245, 158, 11, 0));
	}
	85% {
		transform: scale(0.98);
	}
	95% {
		transform: scale(1.02);
	}
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.tgb-fab,
	.tgb-fab::before,
	.tgb-fab-badge { animation: none; }
}

/* ---------- Panel (открытый виджет) ---------- */
.tgb-panel {
	width: 360px;
	max-width: calc(100vw - 2rem);
	height: 540px;
	max-height: calc(100vh - 2rem);
	background: var(--tgb-bg);
	border-radius: var(--tgb-radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	border: 1px solid var(--tgb-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ---------- Header ---------- */
.tgb-header {
	background: var(--tgb-primary);
	color: var(--tgb-primary-text);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.tgb-header__title {
	font-weight: 500;
	font-size: 15px;
}
.tgb-header__close {
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	border: 0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	padding: 0 4px;
	transition: color 0.15s;
}
.tgb-header__close:hover { color: #fff; }

/* ---------- Body (история сообщений) ---------- */
.tgb-body {
	flex: 1;
	overflow-y: auto;
	overflow-anchor: none; /* контролируем scroll сами, не дать браузеру auto-anchor */
	padding: 12px 16px;
	background: var(--tgb-body-bg);
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
}

/* Кнопка «↓ N новых» когда пользователь прокрутил вверх */
.tgb-new-msg-btn {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--tgb-primary);
	color: var(--tgb-primary-text);
	border: 0;
	padding: 6px 14px;
	border-radius: 16px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 5;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms;
}
.tgb-new-msg-btn--visible {
	opacity: 1;
	pointer-events: auto;
}
.tgb-body::-webkit-scrollbar { width: 6px; }
.tgb-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.tgb-body::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ---------- Bubbles ---------- */
.tg-bridge__bubble {
	max-width: 80%;
	padding: 8px 12px;
	border-radius: var(--tgb-radius-bubble);
	font-size: 14px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.tg-bridge__bubble--in {
	align-self: flex-end;
	background: var(--tgb-bubble-in-bg);
	color: var(--tgb-bubble-in-text);
	border-bottom-right-radius: 4px;
}
.tg-bridge__bubble--out {
	align-self: flex-start;
	background: var(--tgb-bubble-out-bg);
	color: var(--tgb-bubble-out-text);
	border: 1px solid var(--tgb-bubble-out-border);
	border-bottom-left-radius: 4px;
}
.tg-bridge__bubble--system {
	align-self: center;
	background: transparent;
	color: #6b7280;
	font-style: italic;
	font-size: 12px;
	padding: 4px 8px;
}
.tg-bridge__bubble--pending { opacity: 0.6; }
.tg-bridge__bubble--failed {
	background: #fee2e2 !important;
	color: #991b1b !important;
	border: 1px solid #fca5a5;
}
.tg-bridge__bubble--failed::after {
	content: " ⚠ не отправлено";
	font-size: 11px;
	opacity: 0.8;
}
.tgb-bubble__operator {
	font-size: 11px;
	color: #6b7280;
	margin-bottom: 2px;
}
.tgb-bubble__text a {
	color: inherit;
	text-decoration: underline;
}
/* Форматирование из Telegram entities (см. Tg_Bridge_Entities::to_html) */
.tgb-bubble__text code {
	background: rgba(0, 0, 0, 0.15);
	padding: 1px 4px;
	border-radius: 3px;
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 0.92em;
}
.tg-bridge__bubble--out .tgb-bubble__text code {
	background: rgba(0, 0, 0, 0.06);
}
.tgb-bubble__text pre {
	background: rgba(0, 0, 0, 0.15);
	padding: 8px 10px;
	border-radius: 6px;
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 0.92em;
	white-space: pre-wrap;
	overflow-x: auto;
	margin: 4px 0;
}
.tg-bridge__bubble--out .tgb-bubble__text pre {
	background: rgba(0, 0, 0, 0.06);
}
.tgb-bubble__text b { font-weight: 600; }
.tgb-bubble__text s { text-decoration: line-through; }
.tgb-bubble__text u { text-decoration: underline; }
.tgb-bubble__footer {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	justify-content: flex-end;
}
.tgb-bubble__time {
	font-size: 10px;
	opacity: 0.6;
}
.tgb-bubble__check {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.55); /* доставлено, оператор offline — приглушённая */
	transition: color 0.2s;
}
.tgb-bubble__check--online {
	color: #ffffff; /* доставлено + оператор онлайн — яркая белая */
}
.tgb-bubble__check--pending {
	color: rgba(255, 255, 255, 0.5);
	font-size: 10px;
}
.tgb-bubble__check--failed {
	color: #fca5a5;
}
.tgb-bubble__check svg {
	width: 14px;
	height: 14px;
	display: block;
}
/* Галочка ✓ — более широкая (12 / 8 viewBox) */
.tgb-bubble__check:not(.tgb-bubble__check--pending):not(.tgb-bubble__check--failed) svg {
	width: 14px;
	height: 10px;
}
.tgb-bubble__image-wrap {
	position: relative;
	min-width: 120px;
	min-height: 120px;
	display: block;
}
.tgb-bubble__image-skeleton {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}
.tgb-bubble__image-wrap--loaded .tgb-bubble__image-skeleton { opacity: 0; pointer-events: none; }
.tgb-bubble__image-spinner {
	width: 24px;
	height: 24px;
	border: 2.5px solid rgba(255, 255, 255, 0.4);
	border-top-color: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	animation: tgb-spin 0.8s linear infinite;
}
.tg-bridge__bubble--out .tgb-bubble__image-spinner {
	border-color: rgba(0, 0, 0, 0.15);
	border-top-color: rgba(0, 0, 0, 0.5);
}
.tgb-bubble__image-err {
	font-size: 11px;
	color: #b91c1c;
	padding: 8px;
	text-align: center;
}
@keyframes tgb-spin {
	to { transform: rotate(360deg); }
}
.tgb-bubble__image {
	max-width: 100%;
	border-radius: 8px;
	display: block;
	opacity: 0;
	transition: opacity 0.2s;
}
.tgb-bubble__image-wrap--loaded .tgb-bubble__image { opacity: 1; }
.tgb-bubble__file {
	display: inline-block;
	text-decoration: underline;
	color: inherit;
}

/* ---------- Consent disclaimer — просто текст, без чекбокса ---------- */
.tgb-consent {
	padding: 6px 12px 10px;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280;
	flex-shrink: 0;
	background: #fff;
	text-align: center;
}
.tgb-consent__link {
	color: #4b5563;
	text-decoration: underline;
}

/* ---------- Composer (поле ввода) ---------- */
.tgb-composer {
	border-top: 1px solid #e5e7eb;
	padding: 8px 12px;
	display: flex;
	gap: 8px;
	align-items: flex-end;
	background: #fff;
	flex-shrink: 0;
}

/* ---------- Attachment preview (выбран файл, ещё не отправлен) ---------- */
.tgb-attachment-preview {
	padding: 8px 12px;
	background: #eff6ff;
	border-top: 1px solid #dbeafe;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	flex-shrink: 0;
}
.tgb-attachment-preview__thumb {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background: #2563eb;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	flex-shrink: 0;
	overflow: hidden;
}
.tgb-attachment-preview__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tgb-attachment-preview__info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.tgb-attachment-preview__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #111827;
}
.tgb-attachment-preview__status {
	color: #6b7280;
	font-size: 11px;
}
.tgb-attachment-preview__cancel {
	background: transparent;
	border: 0;
	color: #6b7280;
	cursor: pointer;
	font-size: 18px;
	padding: 0 4px;
}
.tgb-attachment-preview__progress {
	height: 3px;
	background: #2563eb;
	border-radius: 2px;
	transition: width 0.2s;
}
.tgb-composer__textarea {
	flex: 1;
	border: 1px solid var(--tgb-border);
	border-radius: var(--tgb-radius-input);
	padding: 8px 12px;
	font-size: 14px;
	font-family: inherit;
	resize: none;
	outline: none;
	min-height: 38px;
	max-height: 100px;
	transition: border-color 0.15s;
	background: var(--tgb-bg);
	color: inherit;
}
.tgb-composer__textarea:focus { border-color: var(--tgb-primary); }
.tgb-composer__textarea:disabled { background: #f3f4f6; cursor: not-allowed; }

.tgb-composer__btn {
	border: 0;
	cursor: pointer;
	padding: 8px;
	background: transparent;
	color: #6b7280;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: color 0.15s, background-color 0.15s;
}
.tgb-composer__btn:hover:not(:disabled) { color: #111827; background: #f3f4f6; }
.tgb-composer__btn:disabled { cursor: not-allowed; opacity: 0.5; }
.tgb-composer__btn svg { width: 20px; height: 20px; }

.tgb-composer__send {
	background: var(--tgb-primary);
	color: var(--tgb-primary-text);
	border: 0;
	border-radius: var(--tgb-radius-input);
	padding: 0;
	width: 38px;
	height: 38px;
	min-height: 38px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 0.15s;
}
.tgb-composer__send svg {
	width: 20px;
	height: 20px;
	display: block;
	color: currentColor;
	transform: translateX(-1px);  /* визуальный optical-center самолётика */
}
.tgb-composer__send:hover:not(:disabled) {
	background: var(--tgb-primary-hover);
	filter: brightness(0.92);
}
.tgb-composer__send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Closed state ---------- */
.tgb-closed {
	padding: 16px;
	text-align: center;
	color: #6b7280;
	font-size: 13px;
	border-top: 1px solid #e5e7eb;
}

/* ---------- Typing indicator (для фазы 2) ---------- */
.tgb-typing {
	align-self: flex-start;
	display: flex;
	gap: 4px;
	padding: 8px 12px;
}
.tgb-typing span {
	width: 6px;
	height: 6px;
	background: #9ca3af;
	border-radius: 50%;
	animation: tgb-typing-dot 1.4s infinite ease-in-out both;
}
.tgb-typing span:nth-child(2) { animation-delay: 0.16s; }
.tgb-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes tgb-typing-dot {
	0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
	40% { transform: scale(1); opacity: 1; }
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 480px) {
	/* Когда панель открыта (.tg-bridge--open задаётся из JS) — растягиваем
	   корень на весь экран чтобы panel заняла 100dvh.
	   В FAB-режиме оставляем дефолтную позицию из настроек (--tgb-fab-bottom/side)
	   чтобы кнопка была в углу, а не в top-left. */
	.tg-bridge--open { bottom: 0; right: 0; left: 0; top: 0; }
	.tgb-panel {
		width: 100vw;
		max-width: 100vw;
		border-radius: 0;
		/* Multi-fallback для viewport height:
		   1. 100vh — старые браузеры
		   2. 100dvh — учитывает скрывающийся URL-bar
		   3. var(--tgb-panel-height) — JS обновляет из visualViewport API,
		      учитывает виртуальную клавиатуру (Android Firefox/Chrome, iOS Safari)
		      когда она наслаивается сверху без сжатия layout-viewport. */
		height: 100vh;
		height: 100dvh;
		height: var(--tgb-panel-height, 100dvh);
		max-height: 100vh;
		max-height: 100dvh;
		max-height: var(--tgb-panel-height, 100dvh);
	}
	/* На mobile textarea font-size 16px чтобы iOS Safari и Android не зумили страницу
	   при focus (если < 16px → автозум, дальше виджет уходит за экран). */
	.tgb-composer__textarea {
		font-size: 16px;
	}
	/* FAB также прикреплён к bottom — поднимем над safe-area iPhone X+ */
	.tgb-fab {
		margin-bottom: env(safe-area-inset-bottom, 0);
		margin-right: env(safe-area-inset-right, 0);
	}
	/* Когда панель открыта на mobile — блокируем scroll body и фиксируем
	   позицию, чтобы фон не скроллился под открытой клавиатурой. */
	html.tgb-mobile-open,
	html.tgb-mobile-open body {
		overflow: hidden !important;
		position: fixed !important;
		width: 100%;
	}
}