/* components/cabinet-workspace.css — каркас полноэкранных рабочих экранов
 * кабинета: «Аудитория» (чат) и «Лекции» (читалка курсов).
 *
 * Здесь только то, что у них общее: сетка «шапка / сайдбар / рабочая
 * область», сам сайдбар со списком и подписью пользователя, шапка рабочей
 * области, прокрутка, спиннер, аватары и выезжающий сайдбар на мобильных.
 * Всё, что специфично для экрана, — в его pages/*.css.
 *
 * Префикс aud- исторический (первым появился экран «Аудитории») и означает
 * «рабочий экран кабинета», а не конкретно чат.
 *
 * Оформление то же, что у «Профиля сотрудника» (.cabinet-settings в
 * pages/cabinet-app.css): фирменный оранжевый --settings-accent, радиус 8px
 * на границе --line, разделители --ink 8%.
 */

body.reclaim-cabinet-audience-page,
body.reclaim-cabinet-lectures-page {
	overflow: hidden;
}

body.reclaim-cabinet-audience-page .wp-site-blocks,
body.reclaim-cabinet-lectures-page .wp-site-blocks {
	justify-content: flex-start;
	height: 100dvh;
	overflow: hidden;
}

body.reclaim-cabinet-audience-page.reclaim-screen-shell .wp-site-blocks,
body.reclaim-cabinet-lectures-page.reclaim-screen-shell .wp-site-blocks {
	align-items: stretch;
	width: 100%;
	max-width: none;
}

body.reclaim-cabinet-audience-page .reclaim-cabinet-main,
body.reclaim-cabinet-audience-page .reclaim-cabinet-main > .wp-block-group__inner-container,
body.reclaim-cabinet-lectures-page .reclaim-cabinet-main,
body.reclaim-cabinet-lectures-page .reclaim-cabinet-main > .wp-block-group__inner-container {
	flex: 1 1 auto;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.reclaim-audience {
	--settings-accent: var( --primary-bg );
	--settings-accent-strong: color-mix( in srgb, var( --primary-bg ) 78%, #1b1430 );
	--aud-sidebar: 17.5rem;
	--aud-col: 52rem;
	--aud-pad: clamp( 0.9rem, 2.4vw, 1.75rem );
	--aud-rule: 1px solid color-mix( in srgb, var( --ink ) 8%, transparent );
	display: grid;
	grid-template-rows: auto minmax( 0, 1fr );
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-height: 100%;
	min-height: 0;
	overflow: hidden;
}

.reclaim-audience .aud-hidden {
	display: none !important;
}

/* —— Шапка сессии —— */
.reclaim-audience > .reclaim-cabinet-session-header {
	width: 100%;
	padding: 0;
	border-bottom: var( --aud-rule );
	background: color-mix( in srgb, var( --surface ) 72%, transparent );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
}

.reclaim-audience .reclaim-cabinet-session-header__inner {
	max-width: none;
	padding: 0.6rem var( --aud-pad );
}

.reclaim-audience .reclaim-cabinet-session-header__start {
	flex-direction: row;
	align-items: center;
	gap: 0.85rem;
}

.reclaim-audience .reclaim-screen-shell-theme-toggle.theme-toggle,
.reclaim-audience .reclaim-cabinet-session-header__actions .aud-thread__menu {
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.15rem;
	min-height: 2.15rem;
	margin: 0;
	padding: 0.35rem 0.75rem;
	border: 1px solid var( --line );
	border-radius: 8px;
	background: var( --surface );
	box-shadow: none;
	color: var( --ink );
	font-size: 0.82rem;
	font-weight: 650;
	line-height: 1;
}

.reclaim-audience .reclaim-screen-shell-theme-toggle.theme-toggle {
	display: inline-flex;
}

.reclaim-audience .reclaim-cabinet-session-header__actions .aud-thread__menu {
	display: none;
}

/* —— Каркас —— */
.reclaim-audience__shell {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

.reclaim-audience__body {
	display: grid;
	grid-template-columns: var( --aud-sidebar ) minmax( 0, 1fr );
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.reclaim-audience__body:has( .aud-exam-dock.is-open ) {
	grid-template-columns: var( --aud-sidebar ) minmax( 18rem, 0.95fr ) minmax( 0, 1.1fr );
}

.aud-exam-dock {
	display: none;
	min-width: 0;
	min-height: 0;
}

.aud-exam-dock.is-open {
	display: flex !important;
	flex-direction: column;
	border-right: var( --aud-rule );
	background: var( --surface );
}

.reclaim-audience .aud-spinner {
	display: flex;
	justify-content: center;
	padding: 3rem 0;
}

.reclaim-audience .aud-spinner::after {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid color-mix( in srgb, var( --ink ) 14%, transparent );
	border-top-color: color-mix( in srgb, var( --ink ) 55%, transparent );
	border-radius: 50%;
	animation: aud-spin 0.85s linear infinite;
}

@keyframes aud-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* —— Аватары (круглые, как фото в настройках профиля) —— */
.aud-avatar {
	display: grid;
	flex: 0 0 auto;
	width: 2.1rem;
	height: 2.1rem;
	place-items: center;
	border-radius: 50%;
	background: color-mix( in srgb, var( --ink ) 6%, var( --surface ) );
	background-position: center;
	background-size: cover;
	color: var( --muted );
	font-family: var( --font-display );
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
}

.aud-avatar.has-photo {
	color: transparent;
}

.aud-avatar[data-tone="0"],
.aud-avatar[data-tone="3"] {
	background-color: color-mix( in srgb, var( --settings-accent ) 16%, var( --surface ) );
	color: var( --settings-accent-strong );
}

.aud-avatar[data-tone="1"] {
	background-color: color-mix( in srgb, var( --accent-rose ) 14%, var( --surface ) );
	color: var( --accent-rose );
}

.aud-avatar[data-tone="2"] {
	background-color: color-mix( in srgb, var( --orange ) 26%, var( --surface ) );
	color: #c45a18;
}

/* —— Сайдбар —— */
.aud-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	padding: 0 1rem 1.1rem;
	border-right: var( --aud-rule );
	background: color-mix( in srgb, var( --surface ) 55%, transparent );
}

.aud-sidebar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	margin: 0 -1rem;
	padding: 0.8rem 1rem;
	border-bottom: var( --aud-rule );
}

.aud-sidebar__title {
	margin: 0;
	overflow: hidden;
	font-family: var( --font-display );
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aud-sidebar__close {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	color: var( --muted );
	cursor: pointer;
	font-size: 1.35rem;
	line-height: 1;
}

.aud-chat-list {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.15rem;
	min-height: 0;
	overflow-y: auto;
	margin-inline: -0.25rem;
	padding-inline: 0.25rem;
}

.aud-chat-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.45rem 0.6rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background: none;
	color: var( --ink );
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: background-color 130ms ease, border-color 130ms ease;
}

.aud-chat-item:hover,
.aud-chat-item:focus-visible {
	background: color-mix( in srgb, var( --ink ) 5%, transparent );
	outline: none;
}

/* Открытая тема — ссылка на собственный адрес темы (см. audience/curriculum.js). */
a.aud-chat-item {
	color: inherit;
	text-decoration: none;
}

/* Тема закрыта последовательным прохождением (сервер не отдаёт её текст). */
.aud-chat-item.is-locked {
	opacity: 0.55;
	cursor: not-allowed;
}

.aud-chat-item.is-locked:hover {
	background: none;
}

.aud-chat-item.is-active {
	border-color: color-mix( in srgb, var( --settings-accent ) 40%, transparent );
	background: color-mix( in srgb, var( --settings-accent ) 10%, var( --surface ) );
}

.aud-chat-item__name {
	min-width: 0;
	overflow: visible;
	font-size: 0.86rem;
	font-weight: 650;
	line-height: 1.35;
	overflow-wrap: anywhere;
	white-space: normal;
}

.aud-chat-item__date {
	flex: 0 0 auto;
	color: var( --muted );
	font-size: 0.72rem;
}

.aud-lecture-list {
	margin-inline: 0;
	padding-inline: 0;
}

.aud-lecture-rail {
	--mark: 1.55rem;
	--pad-top: 0.4rem;
	--pad-bot: 0.55rem;
	--rail-inset: 0.1rem;
	--rail-gap: 0.12rem;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.aud-lecture-rail > li {
	position: relative;
}

.aud-lecture-rail > li:not( :last-child )::before {
	content: "";
	position: absolute;
	left: calc( var( --rail-inset ) + var( --mark ) / 2 );
	top: calc( var( --pad-top ) + var( --mark ) + var( --rail-gap ) );
	bottom: calc( -1 * var( --pad-top ) + var( --rail-gap ) );
	z-index: 1;
	width: 3px;
	height: auto;
	border-radius: 999px;
	background: linear-gradient( 180deg, #e07070 0%, #c44848 55%, #a63a3a 100% );
	box-shadow: 0 0 10px color-mix( in srgb, #c44848 42%, transparent );
	transform: translateX( -50% );
	pointer-events: none;
}

.aud-lecture-rail > li.is-open:not( :last-child )::before {
	background: linear-gradient( 180deg, #5ee08a 0%, #3dcf6a 50%, #2bb85a 100% );
	box-shadow: 0 0 10px color-mix( in srgb, #3dcf6a 48%, transparent );
}

.aud-lecture-rail > li.is-open:has( + .is-locked )::before {
	background: linear-gradient(
		180deg,
		#5ee08a 0%,
		#3dcf6a 28%,
		#d4b04a 58%,
		#c44848 82%,
		#a63a3a 100%
	);
	box-shadow: 0 0 10px color-mix( in srgb, #d4b04a 40%, transparent );
}

.aud-lecture-rail > li.is-pending:not( :last-child )::before {
	background: linear-gradient( 180deg, #ffa066 0%, #ff7a33 50%, #e8641f 100% );
	box-shadow: 0 0 10px color-mix( in srgb, #ff7a33 45%, transparent );
}

.aud-lecture-rail > li.is-pending:has( + .is-locked )::before {
	background: linear-gradient(
		180deg,
		#ffa066 0%,
		#ff7a33 35%,
		#e0704a 65%,
		#c44848 85%,
		#a63a3a 100%
	);
	box-shadow: 0 0 10px color-mix( in srgb, #ff7a33 40%, transparent );
}

.aud-lecture-rail .aud-chat-item {
	position: relative;
	z-index: auto;
	display: grid;
	grid-template-columns: var( --mark ) minmax( 0, 1fr );
	align-items: start;
	justify-content: stretch;
	gap: 0.65rem;
	padding: var( --pad-top ) var( --rail-inset ) var( --pad-bot );
	border: 0;
	border-radius: 8px;
	opacity: 1;
}

.aud-lecture-rail .aud-chat-item.is-locked {
	opacity: 1;
	cursor: not-allowed;
}

.aud-lecture-rail .aud-chat-item.is-locked:hover {
	background: none;
}

.aud-lecture-rail a.aud-chat-item:hover,
.aud-lecture-rail a.aud-chat-item:focus-visible {
	background: color-mix( in srgb, var( --primary-bg ) 8%, transparent );
}

.aud-lecture-mark {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var( --mark );
	height: var( --mark );
	overflow: hidden;
	border: 1.5px solid #3dcf6a;
	border-radius: 999px;
	background: var( --surface );
	box-shadow: 0 0 0 3px var( --surface );
	color: #2ea85a;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
}

.aud-lecture-rail .is-locked .aud-lecture-mark {
	border-color: #c44848;
	color: #c44848;
}

.aud-lecture-rail .is-pending .aud-lecture-mark {
	border-color: #ff7a33;
	color: #d4600f;
}

.aud-lecture-rail .is-passed .aud-lecture-mark {
	border-color: #3dcf6a;
	background: color-mix( in srgb, #3dcf6a 14%, var( --surface ) );
	color: #1a7f37;
}

.aud-lecture-rail .aud-chat-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.16rem;
	min-width: 0;
	padding-top: 0.12rem;
}

.aud-lecture-rail .aud-chat-item__name {
	font-size: 0.84rem;
	font-weight: 550;
}

.aud-lecture-rail .is-locked .aud-chat-item__name {
	color: var( --muted );
}

.aud-lecture-rail .aud-chat-item__date {
	white-space: normal;
	line-height: 1.3;
}

.aud-sidebar__empty {
	margin: 0;
	color: var( --muted );
	font-size: 0.78rem;
	line-height: 1.35;
}

.aud-sidebar__foot {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	box-sizing: border-box;
	min-width: 0;
	min-height: 4.2rem;
	margin: auto -1rem 0;
	padding: 0.8rem 1rem;
	border-top: var( --aud-rule );
}

.aud-sidebar__avatar {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 0.8rem;
}

.aud-sidebar__me {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	min-width: 0;
}

.aud-sidebar__me-name {
	overflow: hidden;
	font-size: 0.86rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aud-sidebar__me-role {
	color: var( --muted );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* —— Рабочая область —— */
.aud-thread {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.aud-thread__head {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.8rem 1rem;
	border-bottom: var( --aud-rule );
}

.aud-thread__menu {
	display: none;
	padding: 0.3rem 0.5rem;
	border: 1px solid var( --line );
	border-radius: 8px;
	background: var( --surface );
	color: var( --ink );
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
}

.aud-thread__title {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
	overflow: visible;
	font-family: var( --font-display );
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
	white-space: normal;
}

.reclaim-audience .aud-alert {
	margin: 0.85rem var( --aud-pad ) 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid rgba( 176, 0, 32, 0.35 );
	border-radius: 8px;
	background: rgba( 176, 0, 32, 0.08 );
	color: #b00020;
	font-size: 0.86rem;
	line-height: 1.4;
	white-space: pre-wrap;
}

.aud-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
	padding: 1.35rem 1rem 0.5rem;
	scroll-behavior: smooth;
}

.aud-scroll.is-loading {
	opacity: 0.55;
}

/* —— Заголовок пустого состояния —— */
.aud-welcome__title {
	margin: 0;
	font-family: var( --font-display );
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.2;
}

.aud-welcome__lede {
	margin: 0.35rem 0 0;
	color: var( --muted );
	font-size: 0.9rem;
	line-height: 1.4;
}

/* —— Кнопка-акцент (было только в «Аудитории», теперь используется и в
   «Лекциях» для триггеров теста/итогового экзамена — общее место). —— */
.aud-new-chat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 2.15rem;
	margin: 0;
	padding: 0.35rem 0.95rem;
	border: 1px solid color-mix( in srgb, var( --settings-accent ) 40%, transparent );
	border-radius: 8px;
	background: var( --settings-accent );
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 0.86rem;
	font-weight: 650;
	line-height: 1.2;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.aud-new-chat:hover,
.aud-new-chat:focus-visible {
	border-color: var( --settings-accent-strong );
	background: var( --settings-accent-strong );
	color: #fff;
	outline: none;
}

.aud-new-chat:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Итоговый экзамен — не основное действие сайдбара (в отличие от "Пройти
   тему заново"/"Пройти мини-тест"), поэтому контурный вариант той же
   кнопки, не залитый. */
.aud-final-exam-btn {
	border-color: color-mix( in srgb, var( --settings-accent ) 45%, transparent );
	background: none;
	color: var( --settings-accent-strong );
}

.aud-final-exam-btn:hover,
.aud-final-exam-btn:focus-visible {
	background: color-mix( in srgb, var( --settings-accent ) 10%, transparent );
	color: var( --settings-accent-strong );
}

.aud-scrim {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: none;
	background: color-mix( in srgb, var( --ink ) 38%, transparent );
}

/* Выбор курса: полное название с переносом (нативный select обрезает). */
.cb-wrap-select {
	position: relative;
	width: 100%;
}

.cb-wrap-select__native,
.cb-wrap-select .aud-picker__select,
.cb-wrap-select .lec-course-picker__select {
	position: absolute !important;
	inset: 0 auto auto 0;
	z-index: -1;
	width: 0 !important;
	min-width: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.cb-wrap-select__trigger {
	margin-left: -4px !important;
	margin-top: 7px !important;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0.5rem 0.7rem;
	border: 1px solid var( --line );
	border-radius: 8px;
	background: var( --surface );
	color: var( --ink );
	cursor: pointer;
	font: inherit;
	font-size: 0.92rem;
	line-height: 1.4;
	text-align: left;
}

.cb-wrap-select__trigger:hover,
.cb-wrap-select__trigger:focus-visible {
	border-color: var( --settings-accent );
	outline: none;
}

.cb-wrap-select__trigger:focus-visible {
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --settings-accent ) 22%, transparent );
}

.cb-wrap-select__trigger:disabled {
	opacity: 0.55;
	cursor: default;
}

.cb-wrap-select__value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-wrap: break-word;
	white-space: normal;
	line-height: 1.4;
}

.cb-wrap-select__chevron {
	flex: 0 0 auto;
	width: 0.45rem;
	height: 0.45rem;
	margin-top: 0.4rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
}

.cb-wrap-select.is-open .cb-wrap-select__chevron {
	transform: rotate( -135deg );
}

.cb-wrap-select__menu {
	display: none;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.35rem;
	padding: 0.3rem;
	border: 1px solid var( --line );
	border-radius: 8px;
	background: var( --surface );
	box-shadow: 0 8px 22px color-mix( in srgb, var( --ink ) 12%, transparent );
}

.cb-wrap-select.is-open .cb-wrap-select__menu {
	display: flex;
}

.aud-sidebar:has( .cb-wrap-select.is-open ) .aud-tabs,
.aud-sidebar:has( .cb-wrap-select.is-open ) #aud-tab-sessions,
.aud-sidebar:has( .cb-wrap-select.is-open ) #aud-lecture-list-wrap,
.aud-sidebar:has( .cb-wrap-select.is-open ) .aud-new-chat {
	display: none;
}

.cb-wrap-select__option {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.45rem 0.55rem;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var( --ink );
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.35;
	text-align: left;
	overflow-wrap: anywhere;
	white-space: normal;
}

.cb-wrap-select__option:hover,
.cb-wrap-select__option:focus-visible {
	background: color-mix( in srgb, var( --ink ) 6%, transparent );
	outline: none;
}

.cb-wrap-select__option.is-active {
	background: color-mix( in srgb, var( --settings-accent ) 12%, transparent );
	font-weight: 650;
}

/* —— Мобильные: сайдбар уезжает за край —— */
@media ( max-width: 60rem ) {
	.reclaim-audience {
		--aud-sidebar: min( 19rem, 82vw );
	}

	.reclaim-audience__body {
		grid-template-columns: minmax( 0, 1fr );
	}

	.reclaim-audience__body:has( .aud-exam-dock.is-open ) {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-rows: minmax( 0, 1fr ) auto;
	}

	.aud-exam-dock.is-open {
		border-right: 0;
		border-bottom: var( --aud-rule );
	}

	.aud-thread.is-exam-locked {
		flex: 0 0 auto;
	}

	.aud-thread.is-exam-locked .aud-thread__head {
		padding-block: 0.4rem;
		gap: 0.5rem;
	}

	.aud-thread.is-exam-locked .aud-thread__title {
		font-size: 0.88rem;
		font-weight: 700;
	}

	.aud-thread.is-exam-locked .aud-scroll,
	.aud-thread.is-exam-locked .aud-alert,
	.aud-thread.is-exam-locked .aud-composer,
	.aud-thread.is-exam-locked .aud-jump,
	.aud-thread.is-exam-locked .aud-thread__back {
		display: none;
	}

	.aud-sidebar {
		position: absolute;
		inset: 0 auto 0 0;
		z-index: 4;
		width: var( --aud-sidebar );
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		transform: translateX( -102% );
		background: var( --surface );
		box-shadow: var( --shadow );
		transition: transform 190ms ease;
	}

	.aud-sidebar .aud-chat-list,
	.aud-sidebar #aud-lecture-list-wrap .aud-chat-list,
	.aud-sidebar #aud-session-list-wrap .aud-chat-list {
		flex: 0 1 auto;
		overflow: visible;
	}

	.aud-sidebar.is-open {
		transform: translateX( 0 );
	}

	.aud-sidebar__close,
	.aud-thread__menu {
		display: block;
	}

	.reclaim-audience .reclaim-cabinet-session-header__actions .aud-thread__menu {
		display: inline-flex;
	}

	.aud-scrim:not( .aud-hidden ) {
		display: block;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.aud-scroll {
		scroll-behavior: auto;
	}

	.aud-sidebar,
	.aud-spinner::after {
		animation: none;
		transition: none;
	}
}

/* —— Общая панель и кнопка аудио-озвучки лекции (TTS) —— */
.lec-article__meta-bar,
.aud-lecture__meta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid color-mix( in srgb, var( --settings-accent, #3b82f6 ) 15%, transparent );
}

.lec-article__eyebrow,
.aud-lecture__eyebrow {
	margin: 0;
	color: var( --muted, #64748b );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lec-audio-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.32rem 0.85rem;
	border: 1px solid var( --line, #e2e8f0 );
	border-radius: 9999px;
	background: var( --surface, #ffffff );
	color: var( --ink, #0f172a );
	font: inherit;
	font-size: 0.8rem;
	font-weight: 650;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, background-color 140ms ease;
	user-select: none;
}

.lec-audio-btn:hover:not( :disabled ),
.lec-audio-btn:focus-visible:not( :disabled ) {
	border-color: var( --settings-accent, #3b82f6 );
	color: var( --settings-accent-strong, #1d4ed8 );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --settings-accent, #3b82f6 ) 20%, transparent );
	outline: none;
}

.lec-audio-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}

.lec-audio-btn__svg {
	width: 100%;
	height: 100%;
}

.lec-audio-btn__time {
	color: var( --muted, #64748b );
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 550;
}

.lec-audio-btn.is-loading {
	opacity: 0.75;
	cursor: wait;
}

.lec-audio-btn.is-loading .lec-audio-btn__icon {
	animation: lec-audio-pulse 1s ease-in-out infinite alternate;
}

.lec-audio-btn.is-playing {
	border-color: var( --settings-accent, #3b82f6 );
	background: color-mix( in srgb, var( --settings-accent, #3b82f6 ) 10%, var( --surface, #ffffff ) );
	color: var( --settings-accent-strong, #1d4ed8 );
}

.lec-audio-btn.is-playing .lec-audio-btn__wave--1 {
	animation: lec-wave-fade 1.2s ease-in-out infinite;
}

.lec-audio-btn.is-playing .lec-audio-btn__wave--2 {
	animation: lec-wave-fade 1.2s ease-in-out 0.3s infinite;
}

.lec-audio-btn.is-paused {
	border-color: var( --line, #e2e8f0 );
}

@keyframes lec-audio-pulse {
	from { transform: scale( 0.92 ); opacity: 0.7; }
	to { transform: scale( 1.08 ); opacity: 1; }
}

@keyframes lec-wave-fade {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

/* —— Караоке-подсветка читаемых слов —— */
.lec-word {
	border-radius: 0.35em;
	padding: 0.06em 0.14em;
	margin: -0.06em -0.14em;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.has-audio .lec-word,
.aud-has-audio .lec-word {
	cursor: pointer;
}

.has-audio .lec-word:hover,
.aud-has-audio .lec-word:hover {
	background-color: color-mix( in srgb, #9b7ef0 14%, transparent );
}

.lec-word.is-active-word {
	background:
		linear-gradient(
			135deg,
			color-mix( in srgb, #c4b0ff 55%, transparent ),
			color-mix( in srgb, #9b7ef0 42%, transparent )
		) !important;
	color: color-mix( in srgb, #4315ab 78%, var( --ink ) ) !important;
	font-weight: 650;
	box-shadow:
		0 0 0 1.5px color-mix( in srgb, #9b7ef0 45%, transparent ),
		0 0 14px color-mix( in srgb, #b69cff 38%, transparent ),
		0 2px 6px color-mix( in srgb, #5742b9 12%, transparent );
	animation: lec-word-lilac 520ms ease-out;
}

@keyframes lec-word-lilac {
	0% {
		transform: scale( 1 );
		box-shadow:
			0 0 0 0 color-mix( in srgb, #9b7ef0 0%, transparent ),
			0 0 0 color-mix( in srgb, #b69cff 0%, transparent );
	}
	40% {
		transform: scale( 1.035 );
		box-shadow:
			0 0 0 2px color-mix( in srgb, #9b7ef0 50%, transparent ),
			0 0 18px color-mix( in srgb, #b69cff 48%, transparent );
	}
	100% {
		transform: scale( 1 );
		box-shadow:
			0 0 0 1.5px color-mix( in srgb, #9b7ef0 45%, transparent ),
			0 0 14px color-mix( in srgb, #b69cff 38%, transparent ),
			0 2px 6px color-mix( in srgb, #5742b9 12%, transparent );
	}
}

:root[data-theme="dark"] .lec-word.is-active-word {
	background:
		linear-gradient(
			135deg,
			color-mix( in srgb, #9b7ef0 48%, transparent ),
			color-mix( in srgb, #7c5cde 36%, transparent )
		) !important;
	color: #efe8ff !important;
	box-shadow:
		0 0 0 1.5px color-mix( in srgb, #b69cff 40%, transparent ),
		0 0 16px color-mix( in srgb, #9b7ef0 42%, transparent );
}