/* BotHelp — десктопные CTA-сайдбары для базы знаний
   Бренд-акцент: #F0645A. Только ПК. Карточка тянется по ширине колонки. */

.bh-sb {
	--bh-accent: #F0645A;
	--bh-accent-dark: #e0554b;
	--bh-title: #2A2C33;
	--bh-text: #7A7C85;
	--bh-card: #FFFFFF;
	--bh-border: #ECECEF;
	--bh-purple: #8B7DF5;
	--bh-purple-bg: #EDEAFB;
	--bh-coral-bg: #FCE4E1;
	--bh-yellow: #F2B441;
	--bh-yellow-bg: #FBF0D8;

	box-sizing: border-box;
	width: 100%;
	max-width: 340px;
	background: var(--bh-card);
	border: 1px solid var(--bh-border);
	border-radius: 18px;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(42, 44, 51, 0.06);
}

.bh-sb *,
.bh-sb *::before,
.bh-sb *::after { box-sizing: border-box; }

.bh-sb__title {
	margin: 0;
	color: var(--bh-title);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bh-sb__text {
	margin: 6px 0 0;
	color: var(--bh-text);
	font-size: 13.5px;
	line-height: 1.45;
}

/* Кнопка */
.bh-sb__btn {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	font-size: 14.5px;
	border-radius: 11px;
	padding: 12px 16px;
	background: var(--bh-accent);
	color: #fff;
	box-shadow: 0 6px 16px rgba(240, 100, 90, 0.26);
	transition: background-color .18s ease, transform .18s ease;
}
.bh-sb__btn:hover { background: var(--bh-accent-dark); transform: translateY(-1px); color: #fff; }

/* ============ ВАРИАНТ 1 — Utility Card ============ */
.bh-sb--utility .bh-sb__media {
	position: relative;
	padding: 14px 18px 0;
}
.bh-sb--utility .bh-sb__blob {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 120px;
	background: radial-gradient(60% 70% at 50% 45%, #FCE9E6 0%, #F4ECFB 55%, rgba(255,255,255,0) 78%);
	border-radius: 50%;
	z-index: 0;
}
.bh-sb--utility .bh-sb__robot {
	position: relative;
	z-index: 1;
	display: block;
	width: 150px;
	height: auto;
	margin: 0 auto;
}
.bh-sb--utility .bh-sb__body { padding: 2px 18px 18px; }
.bh-sb--utility .bh-sb__title { font-size: 21px; line-height: 1.18; }

.bh-sb__features {
	list-style: none;
	margin: 14px 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bh-sb__feature {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 13.5px;
	color: var(--bh-title);
	font-weight: 500;
	line-height: 1.3;
}
.bh-sb__ficon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bh-sb__ficon svg { width: 18px; height: 18px; }
.bh-sb__ficon--purple { background: var(--bh-purple-bg); color: var(--bh-purple); }
.bh-sb__ficon--coral  { background: var(--bh-coral-bg);  color: var(--bh-accent); }
.bh-sb__ficon--yellow { background: var(--bh-yellow-bg); color: var(--bh-yellow); }

/* ============ ВАРИАНТ 3 — Templates Card ============ */
/* Единый мягкий переход: градиент на всей карточке плавно уходит в белый,
   без жёсткой границы между шапкой и телом. */
.bh-sb--templates {
	background: linear-gradient(180deg, #FDEEE8 0%, #F7ECF6 16%, #FBF4F4 32%, #FFFFFF 48%);
}
.bh-sb--templates .bh-sb__media {
	position: relative;
	background: transparent;
	padding: 14px 14px 0;
	text-align: center;
}
.bh-sb--templates .bh-sb__robot {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	margin: 0 auto;
}
.bh-sb--templates .bh-sb__body { padding: 10px 18px 18px; background: transparent; }
.bh-sb--templates .bh-sb__title { font-size: 20px; line-height: 1.18; }

.bh-sb__tpls {
	list-style: none;
	margin: 14px 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bh-sb__tpl {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border: 1px solid var(--bh-border);
	border-radius: 12px;
	text-decoration: none;
	color: var(--bh-title);
	font-size: 13.5px;
	font-weight: 500;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bh-sb__tpl:hover {
	border-color: #DDD8F2;
	box-shadow: 0 5px 14px rgba(42, 44, 51, 0.07);
	transform: translateY(-1px);
}
.bh-sb__ticon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bh-sb__ticon svg { width: 17px; height: 17px; }
.bh-sb__ticon--purple { background: var(--bh-purple-bg); color: var(--bh-purple); }
.bh-sb__ticon--coral  { background: var(--bh-coral-bg);  color: var(--bh-accent); }
.bh-sb__ticon--yellow { background: var(--bh-yellow-bg); color: var(--bh-yellow); }
.bh-sb__tpl-label { flex: 1 1 auto; line-height: 1.25; }
.bh-sb__chevron { flex: 0 0 auto; color: #C2C3CB; width: 15px; height: 15px; }

/* ============ Sticky-обёртка (на боевом сайте) ============
   Сайдбар прижат к низу видимой области правой колонки.
   На мобильных/планшетах блок скрыт. */
.bh-sb-sticky {
	position: sticky;
	bottom: 24px;
	z-index: 5;
	margin-top: 28px; /* отступ от содержания, чтобы не липло */
}
@media (max-width: 1023px) {
	.bh-sb-sticky, .bh-sb { display: none; }
}

/* ===== Экономия места (управляется JS по реальным размерам колонки) =====
   Содержание важнее баннера: сначала прячем картинку, потом весь баннер. */
.bh-sb.is-noimg .bh-sb__media { display: none; }
.bh-sb.is-noimg.bh-sb--utility .bh-sb__body { padding-top: 18px; }
.bh-sb.is-noimg.bh-sb--templates .bh-sb__body { padding-top: 18px; }
.bh-sb-sticky.is-hidden { display: none; }

/* Правая колонка узкая (тема: 20rem − паддинги ≈ 252px) — баннер не дотягивает
   до max-width:340px. Расширяем колонку на десктопе, чтобы блок раскрылся.
   Селектор с .content-wrapper перебивает тему вне зависимости от порядка стилей. */
@media (min-width: 1024px) {
	.content-wrapper .rightbar {
		min-width: 380px;
		max-width: 380px;
		padding-right: 16px;
	}
}

/* ============ TOC: сворачивание до 3 пунктов (десктоп) ============ */
.bh-toc-hidden { display: none !important; }

.bh-toc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 4px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #F0645A;
}
.bh-toc-toggle:hover { color: #e0554b; }
.bh-toc-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform .18s ease;
}
.bh-toc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 1023px) {
	.bh-toc-toggle { display: none; }
	/* На мобильных оглавление как сейчас — ничего не прячем. */
	.bh-toc-hidden { display: block !important; }
}