/* BotHelp — мобильный инлайн-CTA (вставляется в текст статьи)
   Замена десктопного сайдбара на мобильных. Без картинок.
   Бренд-акцент: #F0645A, лиловый: #8B7DF5.

   Показ: только когда сайдбар скрыт (мобильные/планшеты).
   На десктопе (>=1024px) инлайн скрыт — там работает сайдбар. */

.bh-inline {
	--bh-accent: #F0645A;
	--bh-accent-dark: #e0554b;
	--bh-title: #2A2C33;
	--bh-text: #7A7C85;
	--bh-border: #EEE7EA;
	--bh-purple: #8B7DF5;
	--bh-purple-bg: #EDEAFB;
	--bh-coral-bg: #FCEAE6;
	--bh-yellow: #D99A1C;
	--bh-yellow-bg: #FBF0D8;

	box-sizing: border-box;
	display: none; /* базово скрыт; показ — по правилам ниже */
	width: 100%;
	margin: 28px 0;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.bh-inline *, .bh-inline *::before, .bh-inline *::after { box-sizing: border-box; }

/* Мобильные/планшеты (<1024px): показываем инлайн, прошедший правила (класс --mobile). */
@media (max-width: 1023px) {
	.bh-inline--mobile { display: block; }
}

/* Десктоп (≥1024px): инлайн показывается только как фолбэк, когда сайдбар-баннер
   не влез по высоте — JS вешает .is-shown. Иначе работает сайдбар. */
@media (min-width: 1024px) {
	.bh-inline.is-shown { display: block; }
}

.bh-inline__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bh-title);
	letter-spacing: -0.01em;
}
.bh-inline__text {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--bh-text);
}
.bh-inline__btn {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: #fff;
	background: var(--bh-accent);
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 6px 16px rgba(240, 100, 90, 0.26);
	transition: background-color .18s ease;
	text-decoration: none !important;
}
.bh-inline__btn:hover { background: var(--bh-accent-dark); color: #fff; }

/* ============ ИНЛАЙН A — мягкая плашка (регистрация) ============
   Заменяет на мобильных сайдбар Вариант 1. */
.bh-inline--promo {
	background: linear-gradient(120deg, #FDEEE9 0%, #F4ECFB 100%);
	border-radius: 16px;
	padding: 16px;
}
.bh-inline--promo .bh-inline__row {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 14px;
}
.bh-inline--promo .bh-inline__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	color: var(--bh-purple);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bh-inline--promo .bh-inline__icon svg { width: 26px; height: 26px; }

/* ============ ИНЛАЙН B — шаблоны ============
   Заменяет на мобильных сайдбар Вариант 3 (раздел «Мессенджеры»). */
.bh-inline--templates {
	background: #fff;
	border: 1px solid var(--bh-border);
	border-radius: 16px;
	overflow: hidden;
}
.bh-inline--templates::before {
	content: "";
	display: block;
	height: 5px;
	background: linear-gradient(90deg, var(--bh-accent), var(--bh-purple));
}
.bh-inline--templates .bh-inline__pad { padding: 16px; }
.bh-inline__tpls {
	list-style: none;
	margin: 14px 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bh-inline__tpl {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border: 1px solid var(--bh-border);
	border-radius: 12px;
	color: var(--bh-title);
	font-size: 14px;
	font-weight: 500;
	transition: border-color .18s ease, box-shadow .18s ease;
	text-decoration: none !important;
}
.bh-inline__tpl:hover { border-color: #DDD8F2; box-shadow: 0 5px 14px rgba(42,44,51,0.07); }
.bh-inline__ticon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bh-inline__ticon svg { width: 18px; height: 18px; }
.bh-inline__ticon--purple { background: var(--bh-purple-bg); color: var(--bh-purple); }
.bh-inline__ticon--coral  { background: var(--bh-coral-bg);  color: var(--bh-accent); }
.bh-inline__ticon--yellow { background: var(--bh-yellow-bg); color: var(--bh-yellow); }
.bh-inline__tpl-label { flex: 1 1 auto; line-height: 1.25; }
.bh-inline__chevron { flex: 0 0 auto; color: #C2C3CB; width: 16px; height: 16px; }