/* ==========================================================
   Textbook (Учебник) — table of contents + paragraph page
   ========================================================== */

.tb-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* Строка: крошки слева, круглая кнопка справа на одной линии */
.tb-breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin: 10px 0 16px;
  min-width: 0;
}
.tb-breadcrumb-row .breadcrumbs {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Заглушка под будущий диалог — белый круг */
.tb-para-chat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  color: rgba(55, 55, 55, 0.88);
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.tb-para-chat-btn:hover {
  background: #f4f4f5;
}
.tb-para-chat-btn:focus,
.tb-para-chat-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.tb-para-chat-btn svg {
  display: block;
  pointer-events: none;
}
html.invert-images .tb-para-chat-btn {
  background: rgba(32, 32, 32, 1);
  color: rgba(245, 245, 245, 0.9);
  box-shadow: none;
}
html.invert-images .tb-para-chat-btn:hover {
  background: rgba(42, 42, 42, 1);
}

.tb-para-chat-anchor {
  position: relative;
  flex-shrink: 0;
  align-self: center;
}

.tb-para-chat-popover {
  position: absolute;
  z-index: 130;
  top: calc(100% + 8px);
  right: 0;
  min-width: 300px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 0;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.tb-para-chat-popover__inner {
  padding: 10px 12px;
  max-height: min(280px, 50vh);
  overflow: auto;
}

.tb-para-chat-popover__status {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(55, 55, 55, 0.72);
  line-height: 1.4;
}

.tb-para-chat-popover__status--error {
  color: #b42318;
}

.tb-para-chat-popover__empty {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(55, 55, 55, 0.65);
  line-height: 1.45;
}

.tb-para-chat-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tb-para-chat-popover__list li {
  margin: 0;
  padding: 0;
}

.tb-para-chat-popover__list li.tb-para-chat-popover__row {
  display: block;
  min-width: 0;
}

.tb-para-chat-popover__list li + li {
  margin-top: 8px;
}

.tb-para-chat-popover__row-card {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
  padding: 3px 4px 3px 3px;
  box-sizing: border-box;
  border-radius: 10px;
  border: none;
  background: rgba(0, 0, 0, 0.03);
  transition: background 0.12s ease;
}

button.tb-para-chat-popover__row-card {
  height: 40px;
}

.tb-para-chat-popover__row-card:hover {
  background: rgba(0, 0, 0, 0.055);
}

.tb-para-chat-popover__row-card--current {
  background: rgba(59, 130, 246, 0.14);
}

.tb-para-chat-popover__row-card--current:hover {
  background: rgba(59, 130, 246, 0.19);
}

.tb-para-chat-popover__select-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.tb-para-chat-popover__select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 7px 8px 7px 9px;
  border-radius: 7px;
  border: none;
  box-sizing: border-box;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  color: rgba(18, 18, 18, 0.92);
  background: transparent;
  transition: background 0.12s ease;
}

.tb-para-chat-popover__select:hover {
  /* Prevent inner button from visually hiding row-card hover */
  background: transparent;
}

.tb-para-chat-popover__row-card--current .tb-para-chat-popover__select {
  font-weight: 600;
}

.tb-para-chat-popover__row-card--current .tb-para-chat-popover__select:hover {
  /* Keep hover highlight on the whole row-card */
  background: transparent;
}

.tb-para-chat-popover__select:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.55);
  outline-offset: 1px;
}

.tb-para-chat-popover__rename-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  box-sizing: border-box;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.35;
  text-align: left;
  color: rgba(18, 18, 18, 0.92);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12);
}

.tb-para-chat-popover__rename-input--current {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.5);
  font-weight: 600;
}

.tb-para-chat-popover__rename-input:focus {
  outline: 2px solid rgba(59, 130, 246, 0.55);
  outline-offset: 1px;
}

.tb-para-chat-popover__rename-input:disabled {
  opacity: 0.65;
  cursor: wait;
}

.tb-para-chat-popover__row-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding-right: 1px;
}

.tb-para-chat-popover__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(55, 55, 55, 0.78);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.tb-para-chat-popover__icon-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(18, 18, 18, 0.92);
}

.tb-para-chat-popover__icon-btn--danger:hover {
  background: rgba(180, 35, 24, 0.12);
  color: #b42318;
}

.tb-para-chat-popover__icon-btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.55);
  outline-offset: 1px;
}

.tb-para-chat-popover__icon-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.tb-para-chat-popover__actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.tb-para-chat-popover__new-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  color: rgba(18, 18, 18, 0.92);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.12s ease;
}

.tb-para-chat-popover__new-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.07);
}

.tb-para-chat-popover__new-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Кнопка "new chat" в попапе — визуально как строка диалога */
.tb-para-chat-popover__new-chat-btn {
  width: 100%;
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 10px;
  gap: 8px;
  cursor: pointer;
  justify-content: center;
  text-align: center;
  /* Match dialog select button typography */
  color: rgba(18, 18, 18, 0.92);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.35;
}

.tb-para-chat-popover__new-chat-btn .tb-para-chat-popover__new-chat-plus {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
}

.tb-para-chat-popover__new-chat-btn .tb-para-chat-popover__new-chat-label {
  display: inline-block;
}

.tb-para-chat-popover__new-chat-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

html.invert-images .tb-para-chat-popover__actions {
  border-top-color: rgba(0, 0, 0, 0.12);
}

html.invert-images .tb-para-chat-popover__new-btn {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(30, 30, 30, 0.95);
}

html.invert-images .tb-para-chat-popover__new-chat-btn {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(245, 245, 245, 0.95);
}

html.invert-images .tb-para-chat-popover__new-chat-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.09);
}

html.invert-images .tb-para-chat-popover {
  background: rgba(32, 32, 32, 1);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
}

html.invert-images .tb-para-chat-popover__empty,
html.invert-images .tb-para-chat-popover__status {
  color: rgba(235, 235, 235, 0.75);
}

html.invert-images .tb-para-chat-popover__select {
  color: rgba(245, 245, 245, 0.95);
}

html.invert-images .tb-para-chat-popover__select:hover {
  /* Prevent inner button from visually hiding row-card hover */
  background: transparent;
}

html.invert-images .tb-para-chat-popover__row-card {
  background: rgba(255, 255, 255, 0.04);
}

html.invert-images .tb-para-chat-popover__row-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

html.invert-images .tb-para-chat-popover__row-card--current {
  background: rgba(96, 165, 250, 0.2);
}

html.invert-images .tb-para-chat-popover__row-card--current:hover {
  background: rgba(96, 165, 250, 0.26);
}

html.invert-images .tb-para-chat-popover__row-card--current .tb-para-chat-popover__select:hover {
  /* Keep hover highlight on the whole row-card */
  background: transparent;
}

html.invert-images .tb-para-chat-popover__rename-input {
  color: rgba(245, 245, 245, 0.95);
  background: rgba(32, 32, 32, 1);
  border-color: rgba(96, 165, 250, 0.55);
}

html.invert-images .tb-para-chat-popover__rename-input--current {
  background: rgba(96, 165, 250, 0.18);
}

html.invert-images .tb-para-chat-popover__icon-btn {
  color: rgba(235, 235, 235, 0.85);
}

html.invert-images .tb-para-chat-popover__icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 245, 0.95);
}

html.invert-images .tb-para-chat-popover__icon-btn--danger:hover {
  background: rgba(248, 113, 113, 0.18);
  color: #b42318;
}

/* Модальное подтверждение удаления диалога (меню параграфа) */
.tb-para-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.tb-para-modal[hidden] {
  display: none !important;
}

.tb-para-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 20, 0.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.tb-para-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
}

.tb-para-modal__title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(18, 18, 18, 0.95);
}

.tb-para-modal__text {
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(55, 55, 55, 0.88);
}

.tb-para-modal__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.tb-para-modal__btn {
  margin: 0;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tb-para-modal__btn--secondary {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(18, 18, 18, 0.9);
}

.tb-para-modal__btn--secondary:hover {
  background: rgba(0, 0, 0, 0.09);
}

.tb-para-modal__btn--danger {
  background: #b42318;
  border-color: #942018;
  color: #fff;
}

.tb-para-modal__btn--danger:hover {
  background: #9b1e14;
}

.tb-para-modal__btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.65);
  outline-offset: 2px;
}

html.invert-images .tb-para-modal__backdrop {
  background: rgba(0, 0, 0, 0.62);
}

html.invert-images .tb-para-modal__panel {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

html.invert-images .tb-para-modal__title {
  color: rgba(22, 22, 22, 0.96);
}

html.invert-images .tb-para-modal__text {
  color: rgba(45, 45, 45, 0.88);
}

html.invert-images .tb-para-modal__btn--secondary {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(30, 30, 30, 0.95);
}

/*
 * Узкая ширина + body.has-snav: показывается фиксированный topbar с mnav__toggle слева.
 * Кнопка параграфа — в правом верхнем углу шапки (симметрично бургеру), не в строке крошек.
 * Брейкпоинт как у base.css: max-width 750px для мобильного topbar у has-snav.
 */
@media (max-width: 750px) {
  body.has-snav .tb-para-chat-btn {
    position: fixed;
    top: 8px;
    right: 14px;
    z-index: 121;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    background: #fff;
    border: none;
    box-shadow: none;
    color: rgba(55, 55, 55, 0.88);
  }
  body.has-snav .tb-para-chat-btn:hover {
    background: #f4f4f5;
  }
  html.invert-images body.has-snav .tb-para-chat-btn {
    background: rgba(32, 32, 32, 1);
    color: rgba(245, 245, 245, 0.9);
    box-shadow: none;
  }
  html.invert-images body.has-snav .tb-para-chat-btn:hover {
    background: rgba(42, 42, 42, 1);
  }

  body.has-snav .tb-para-chat-popover {
    position: fixed;
    top: 52px;
    right: 14px;
    z-index: 130;
  }
}

.tb-page__title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 16px;
}

/* Keep breadcrumb separator attached to the following item */
.tb-breadcrumbs__list .breadcrumbs__item + .breadcrumbs__item::before {
  content: "›";
  color: rgba(18, 18, 18, .35);
  font-weight: 800;
  font-size: 14px;
  margin: 0 8px 0 0;
}

/* ----------------------------------------------------------
   Table of Contents
   ---------------------------------------------------------- */
.tb-toc {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tb-toc__chapter {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: 18px 22px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.tb-toc__chapter-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.tb-toc__chapter-num {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--c-purple);
  white-space: nowrap;
}

.tb-toc__chapter-title {
  font-weight: 700;
  font-size: 1.15rem;
}

.tb-toc__actions {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.tb-toc__chapter:hover .tb-toc__chapter-head > .tb-toc__actions,
.tb-toc__paragraph:hover > .tb-toc__actions {
  opacity: 1;
}

/* paragraphs inside a chapter */
.tb-toc__paragraphs {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.tb-toc__paragraph {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  transition: background 0.12s;
}
.tb-toc__paragraph:hover {
  background: rgba(0,0,0,.04);
}

.tb-toc__paragraph-link {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.tb-toc__paragraph-link:hover .tb-toc__paragraph-title {
  text-decoration: underline;
}

.tb-toc__paragraph-num {
  color: var(--c-muted);
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.tb-toc__paragraph-title {
  font-size: 1rem;
  font-weight: 500;
}

/* add forms */
.tb-toc__add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.tb-toc__add-chapter {
  margin-top: 18px;
}

/* ----------------------------------------------------------
   Paragraph detail — block list
   ---------------------------------------------------------- */
.tb-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Блоки каталога (тест-шаблон и т.п.) в стиле video-item — отступ как у .tb-block */
.tb-items > li.video-item {
  margin-bottom: 12px;
}

/* Задачи из каталога (.task-item) в том же списке */
.tb-items > li.task-item {
  margin-bottom: 12px;
}

.tb-block {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: 16px 22px 22px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* Heading block should match the same radius as catalog card headers */
.tb-block--heading{
  padding-top: 15px;
  padding-bottom: 16px;
  border-radius: 25px;
  overflow: hidden; /* keep inner backgrounds clipped to rounded corners */
}

/* Comments should match the same rounded container look */
.tb-block--comment{
  border-radius: 25px;
  overflow: hidden;
  padding-top: 16px;
}

.tb-block--comment .card-actions{
  padding: 0;
  margin-left: -9px;
  margin-top: -7px;
}

.tb-block--comment .card-top{
  position: absolute;
  top: 16px;
  left: 22px;
  margin: 0;
  padding: 0;
  width: auto;
  z-index: 1;
}
.tb-block--comment .task-actions--flags{
  position: absolute;
  top: 0;
  right: 0;
}

/* Video blocks should visually match catalog `.video-item` cards */
.tb-block--video.video-item{
  background: #fff;
  border-radius: 25px;
  padding: 0 14px 0 0;
  box-shadow: var(--shadow-sm);
}

.tb-block__actions {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.tb-block:hover > .tb-block__actions {
  opacity: 1;
}

/* heading */
.tb-heading__text {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.35;
}

/* KaTeX в заголовках: без налезания на строку и с читаемым размером */
.tb-block--heading .tb-heading__text .katex {
  font-size: 0.98em;
  vertical-align: -0.12em;
}

.tb-block--heading .tb-heading__text .katex-display {
  margin: 0;
  display: inline-block;
  text-align: inherit;
}

/* comment */
.tb-comment__text {
  line-height: 1.55;
  font-size: 1rem;
  overflow-x: auto;
  /* горизонтальный скролл при переполнении сохраняем, полосу не показываем */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tb-comment__text::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

.tb-comment__text p {
  margin: 0 0 0.8em 0;
  text-indent: 1.25em;
}
.tb-block--comment .tb-comment__text p:first-child {
  text-indent: 34px;
}

.tb-comment__text p:last-child {
  margin-bottom: 0;
}

.tb-comment__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.tb-comment__img-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
}

.tb-comment__img-wrap img,
.tb-comment__img-edit img {
  max-width: 280px;
  max-height: 220px;
  border-radius: var(--r-sm);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* When there is only one comment image, make it fill the block as much as possible */
.tb-comment__gallery > .tb-comment__img-wrap:only-child{
  width: 100%;
}
.tb-comment__gallery > .tb-comment__img-wrap:only-child img{
  width: 100%;
  max-width: 100%;
  max-height: none;
}

.tb-comment__gallery--edit {
  gap: 12px;
}

.tb-comment__img-edit {
  position: relative;
  display: inline-block;
}

.tb-comment__img-del {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
}

/* video */
.tb-video__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tb-video__icon {
  color: var(--c-purple);
  font-size: 1.1rem;
}

.tb-video__title {
  font-weight: 700;
  font-size: 1.05rem;
}

.tb-video__actions-row {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* task */
.tb-task__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.tb-task__label {
  font-weight: 700;
  color: var(--c-purple);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tb-task__title {
  font-weight: 600;
}

.tb-task__statement {
  line-height: 1.55;
}

.tb-task__graphs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* sortable ghost */
.tb-block.sortable-ghost {
  opacity: 0.4;
}

.tb-toc__chapter.sortable-ghost,
.tb-toc__paragraph.sortable-ghost {
  opacity: 0.4;
}

/* drag handle cursor */
.tb-block,
.tb-toc__chapter,
.tb-toc__paragraph {
  cursor: default;
}

/* ----------------------------------------------------------
   Jupyter-style inline editing
   ---------------------------------------------------------- */

/* Editing state highlight */
.tb-block--editing {
  outline: 2px solid var(--c-purple, #7c3aed);
  outline-offset: -2px;
  z-index: 1;
}

/* Inline input for heading */
.tb-inline-input {
  width: 100%;
  font-size: 1.35rem;
  font-weight: 800;
  border: none;
  border-bottom: 2px solid var(--c-purple, #7c3aed);
  background: transparent;
  outline: none;
  padding: 4px 0;
  font-family: inherit;
  color: inherit;
}

/* Inline textarea for comment */
.tb-inline-textarea {
  width: 100%;
  min-height: 100px;
  font-size: 1rem;
  line-height: 1.55;
  border: 1px solid #d4d4d4;
  border-radius: var(--r-sm, 6px);
  padding: 10px 12px;
  font-family: inherit;
  color: inherit;
  resize: vertical;
  background: var(--c-surface, #fff);
}
.tb-inline-textarea:focus {
  border-color: var(--c-purple, #7c3aed);
  outline: none;
}

/* Inline form (video, hw template, test template) */
.tb-inline-form {
  padding: 12px 0;
}
.tb-inline-form .field {
  margin-bottom: 10px;
}
.tb-inline-form .label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--c-muted, #888);
}
.tb-inline-form .input,
.tb-inline-form .textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Edit hint */
.tb-edit-hint {
  font-size: 0.8rem;
  color: var(--c-muted, #999);
  margin-top: 8px;
  text-align: right;
}

/* ----------------------------------------------------------
   Inserter toolbar (between blocks)
   ---------------------------------------------------------- */
.tb-inserter {
  position: relative;
  height: 24px;
  margin: -6px 0 6px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  list-style: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.tb-inserter__line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: transparent;
  border-radius: 1px;
  transition: background 0.15s;
}

.tb-inserter:hover .tb-inserter__line {
  background: var(--c-purple, #7c3aed);
}

.tb-inserter__buttons {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.tb-inserter:hover .tb-inserter__buttons {
  opacity: 1;
  pointer-events: auto;
}

.tb-inserter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid var(--c-purple, #7c3aed);
  background: var(--c-surface, #fff);
  color: var(--c-purple, #7c3aed);
  font-weight: 700;
  font-size: 0.72rem;
  white-space: nowrap;
  cursor: pointer;
  padding: 0 8px;
  transition: background 0.12s, color 0.12s;
}

.tb-inserter__btn:hover {
  background: var(--c-purple, #7c3aed);
  color: #fff;
}

/* responsive */
@media (max-width: 600px) {
  .tb-page { padding: 14px 10px 40px; }
  .tb-toc__chapter { padding: 14px 14px 10px; }
  .tb-block { padding: 16px 14px 16px; }
  .tb-block--comment .tb-comment__text p:first-child { text-indent: 42px; }
  .tb-comment__img-wrap img,
  .tb-comment__img-edit img { max-width: 100%; }
}

/* ----------------------------------------------------------
   TTS micro-player — стекло: только тинт + backdrop (живой фон страницы).
   Сетку/градиент с демо-карточки не клеим: они статичны и не «стекло».
   ---------------------------------------------------------- */
.tts-player {
  --tts-border: rgba(0, 0, 0, 0.1);
  --tts-ink: rgba(0, 0, 0, 0.9);
  --tts-ink-muted: rgba(0, 0, 0, 0.45);
  /* Светлая тема: иконки кнопок — тёмно-серые, не чистый чёрный */
  --tts-btn-ink: rgba(55, 55, 55, 0.92);
  /* Подпись времени */
  --tts-time-ink: rgba(10, 10, 10, 0.72);
  --tts-glass-tint: rgba(255, 255, 255, 0.34);
  container-type: inline-size;
  container-name: tts-player;
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: block;
  height: 59px;
  width: 805px; /* JS aligns to .tb-page center responsively; follow +38 → 843px max */
  padding: 0 20px; /* px-5 */
  border-radius: 28px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
  color: var(--tts-ink);
  transition:
    box-shadow 0.2s,
    width 0.52s cubic-bezier(0.22, 0.9, 0.27, 1),
    height 0.52s cubic-bezier(0.22, 0.9, 0.27, 1);
  overflow: visible;
}

/* Чат (AI / homework): плеер в колонке над композером, не отдельная плашка у низа viewport */
.page-is-chat .tts-player-chat-dock {
  width: 100%;
  max-width: var(--thread-content-max-width, 1040px);
  margin: 0 auto 0.45rem;
  box-sizing: border-box;
}

.page-is-chat .tts-player.tts-player--in-chat-dock {
  position: relative;
  left: auto !important;
  bottom: auto;
  top: auto;
  right: auto;
  transform: none !important;
  width: 100% !important;
  max-width: none;
  z-index: 6;
  margin: 0;
}

/* Ночная тема сайта (переключатель → html.invert-images), не ОС-профиль */
html.invert-images .tts-player {
  --tts-border: rgba(255, 255, 255, 0.1);
  --tts-ink: rgba(255, 255, 255, 0.9);
  --tts-ink-muted: rgba(255, 255, 255, 0.45);
  --tts-btn-ink: rgba(255, 255, 255, 0.72);
  --tts-time-ink: rgba(255, 255, 255, 0.72);
  --tts-glass-tint: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
}

.tts-player__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid var(--tts-border);
  box-shadow: none;
  background-color: var(--tts-glass-tint);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

/* Стекло бара: под контентом (Chromium иначе может «съесть» соседний слой с backdrop-filter:url). */
.tts-player > .tts-player__glass {
  z-index: -1;
}

/* Thin specular rim (variable around edge), not a solid white ring */
.tts-player__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(
    from 218deg at 30% 14%,
    rgba(255, 255, 255, 0.55) 0deg,
    rgba(255, 255, 255, 0.12) 55deg,
    rgba(255, 255, 255, 0.04) 130deg,
    rgba(255, 255, 255, 0.08) 210deg,
    rgba(255, 255, 255, 0.35) 300deg,
    rgba(255, 255, 255, 0.5) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.85;
}

.tts-player__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

html.invert-images .tts-player__glass {
  box-shadow: none;
}

html.invert-images .tts-player__glass::after {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* Chromium: рефракция по живому фону страницы (без статичной текстуры на стекле).
   Два SVG-фильтра: карта смещения под размер бара и отдельно под высокую панель громкости. */
html.tts-liquid-glass--full .tts-player > .tts-player__glass {
  background-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: url(#tts-liquid-glass-filter) blur(5px) saturate(1.25);
  -webkit-backdrop-filter: url(#tts-liquid-glass-filter) blur(5px) saturate(1.25);
}

html.tts-liquid-glass--full .tts-player__volume-panel .tts-player__glass {
  background-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: url(#tts-liquid-glass-filter-volume) blur(5px) saturate(1.25);
  -webkit-backdrop-filter: url(#tts-liquid-glass-filter-volume) blur(5px) saturate(1.25);
}

html.invert-images.tts-liquid-glass--full .tts-player > .tts-player__glass,
html.invert-images.tts-liquid-glass--full .tts-player__volume-panel .tts-player__glass {
  background-color: rgba(255, 255, 255, 0.05);
}

html.tts-liquid-glass--full .tts-player__glass::before {
  opacity: 0.75;
}

html.tts-liquid-glass--full .tts-player__glass::after {
  opacity: 0.55;
}

/* Follow-режим: под плеером тёмный контент (blur/brightness у списка) — стекло светлее, тот же blur/дифракция */
html:has(#items-list.tts-reading-follow) .tts-player {
  --tts-glass-tint: rgba(255, 255, 255, 0.52);
}

html.tts-liquid-glass--full:has(#items-list.tts-reading-follow) .tts-player > .tts-player__glass,
html.tts-liquid-glass--full:has(#items-list.tts-reading-follow) .tts-player__volume-panel .tts-player__glass {
  background-color: rgba(255, 255, 255, 0.26);
}

html.tts-liquid-glass--full:has(#items-list.tts-reading-follow) .tts-player__glass::before {
  opacity: 0.88;
}

html.tts-liquid-glass--full:has(#items-list.tts-reading-follow) .tts-player__glass::after {
  opacity: 0.62;
}

html.invert-images:has(#items-list.tts-reading-follow) .tts-player {
  --tts-glass-tint: rgba(255, 255, 255, 0.16);
}

html.invert-images.tts-liquid-glass--full:has(#items-list.tts-reading-follow) .tts-player > .tts-player__glass,
html.invert-images.tts-liquid-glass--full:has(#items-list.tts-reading-follow) .tts-player__volume-panel .tts-player__glass {
  background-color: rgba(255, 255, 255, 0.1);
}

.tts-player__content {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px; /* gap-3 */
  height: 100%;
  min-width: 0;
}

/* Prev / Play / Next — плотнее, чем общий gap у .tts-player__content */
.tts-player__transport {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.tts-player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--tts-btn-ink);
  transition: background 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.tts-player__btn:hover {
  background: rgba(0, 0, 0, 0.07);
}
html.invert-images .tts-player__btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.tts-player__btn svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}
.tts-player__icon--skip {
  display: block;
  flex-shrink: 0;
}

.tts-player__icon--hand {
  display: block;
  flex-shrink: 0;
}

/* Счётчик блоков слева от руки; в слоте рука без сдвига, крестик при записи выезжает вправо */
.tts-player__hand-wrap {
  --tts-hand-slot: 34px;
  --tts-hand-gap: 6px;
  position: relative;
  width: var(--tts-hand-slot);
  height: var(--tts-hand-slot);
  flex-shrink: 0;
  transition: width 0.32s cubic-bezier(0.22, 0.9, 0.27, 1);
}
.tts-player__hand-wrap--expanded {
  width: calc(var(--tts-hand-slot) * 2 + var(--tts-hand-gap));
}
@media (max-width: 600px) {
  .tts-player__hand-wrap {
    --tts-hand-slot: 32px;
  }
}
.tts-player__hand-wrap .tts-player__hand {
  position: absolute;
  left: 0;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  z-index: 2;
}
.tts-player__hand-wrap .tts-player__hand-dismiss {
  position: absolute;
  top: 50%;
  left: 0;
  margin: 0;
  z-index: 1;
  transform: translateY(-50%) scale(0.88);
  opacity: 0;
  pointer-events: none;
  transition:
    left 0.32s cubic-bezier(0.22, 0.9, 0.27, 1),
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.22, 0.9, 0.27, 1);
}
.tts-player__hand-wrap--expanded .tts-player__hand-dismiss {
  left: calc(var(--tts-hand-slot) + var(--tts-hand-gap));
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .tts-player__hand-wrap .tts-player__hand-dismiss {
    transition: none;
  }
  .tts-player__hand-wrap {
    transition: none;
  }
}

/* Кнопка «рука»: кольцо загрузки вокруг круга (только пока ждём сервер, до старта TTS) */
.tts-player__hand {
  position: relative;
  overflow: visible;
  /* Системное кольцо фокуса (часто оранжевое) не должно «залипать» после озвучки */
  outline: none;
}
.tts-player__hand:focus-visible {
  outline: 2px solid var(--c-purple, #7c3aed);
  outline-offset: 2px;
}
html.invert-images .tts-player__hand:focus-visible {
  outline-color: #a78bfa;
}
.tts-player__icon--dismiss {
  display: block;
  flex-shrink: 0;
}

/* --idle остаётся для логики в JS; визуально крестик скрыт, пока нет .tts-player__hand-wrap--expanded */
.tts-player__btn.tts-player__hand-dismiss--live {
  cursor: pointer;
  background: linear-gradient(155deg, #7c3aed 0%, #6d28d9 48%, #5b21b6 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(30, 27, 75, 0.5);
}
.tts-player__btn.tts-player__hand-dismiss--live:hover {
  background: linear-gradient(155deg, #864ef0 0%, #7232eb 45%, #6028c9 100%);
}
html.invert-images .tts-player__btn.tts-player__hand-dismiss--live {
  background: linear-gradient(155deg, #7c3aed 0%, #6d28d9 45%, #4c1d95 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
html.invert-images .tts-player__btn.tts-player__hand-dismiss--live:hover {
  background: linear-gradient(155deg, #8b5cf6 0%, #7c3aed 48%, #5b21b6 100%);
}
.tts-player__hand-load-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  flex-shrink: 0;
  pointer-events: none;
  display: none;
  z-index: 0;
  transform-origin: 50% 50%;
  animation: tts-hand-load-ring-spin 1.05s linear infinite;
}
.tts-player__hand--loading .tts-player__hand-load-ring {
  display: block;
}
.tts-player__hand-load-ring__track,
.tts-player__hand-load-ring__arc {
  fill: none;
  stroke: currentColor;
}
.tts-player__hand-load-ring__track {
  stroke-width: 2.25px;
}
.tts-player__hand-load-ring__arc {
  stroke-width: 2.5px;
  animation: tts-hand-load-ring-dash 1.4s ease-in-out infinite;
}
.tts-player__hand .tts-player__icon--hand,
.tts-player__hand .tts-player__icon--reply-wait,
.tts-player__hand .tts-player__icon--record-check {
  position: relative;
  z-index: 1;
}
@keyframes tts-hand-load-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes tts-hand-load-ring-dash {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -100;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tts-player__hand-load-ring {
    animation-duration: 2.4s;
  }
  .tts-player__hand-load-ring__arc {
    animation: none;
  }
}

/* Заливка ярче обводки: градиент + мягкий блик сверху и тёмный край снизу (не светлая «рамка») */
/* Рука поднята, ждём старт записи */
.tts-player__hand.tts-player__hand--active:not(.tts-player__hand--capturing):not(.tts-player__hand--awaiting) {
  background: linear-gradient(155deg, #9333ea 0%, #7c3aed 52%, #6d28d9 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(30, 27, 75, 0.45);
}
/* Запись вопроса — фиолетовый + статичная галочка «готово» */
.tts-player__hand.tts-player__hand--capturing {
  background: linear-gradient(155deg, #7c3aed 0%, #6d28d9 48%, #5b21b6 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(30, 27, 75, 0.5);
}
/* Ждём STT: квадрат + кольцо загрузки, одна кнопка по центру */
.tts-player__hand.tts-player__hand--awaiting.tts-player__hand--loading:not(.tts-player__hand--assistant-tts) {
  background: linear-gradient(155deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(30, 27, 75, 0.45);
}
/* Озвучка ответа — оранжевый */
.tts-player__hand.tts-player__hand--assistant-tts {
  background: linear-gradient(155deg, #fb923c 0%, #f97316 42%, #ea580c 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(124, 45, 18, 0.42);
}
.tts-player__icon--reply-wait {
  display: none;
  flex-shrink: 0;
}
.tts-player__hand.tts-player__hand--awaiting .tts-player__icon--hand {
  display: none;
}
.tts-player__hand.tts-player__hand--awaiting.tts-player__hand--loading:not(.tts-player__hand--assistant-tts) .tts-player__icon--reply-wait {
  display: block !important;
}
.tts-player__hand.tts-player__hand--active .tts-player__icon--reply-wait {
  display: none !important;
}
/* Рука только пока ждём микрофон; при записи — галочка вместо руки */
.tts-player__hand.tts-player__hand--active:not(.tts-player__hand--capturing) .tts-player__icon--hand {
  display: block;
}
.tts-player__icon--record-check {
  display: none;
  flex-shrink: 0;
}
/* Эквалайзер на кнопке только при озвучке ответа; при записи — скрыт */
.tts-hand-meter {
  display: none;
  flex-shrink: 0;
}
.tts-player__hand--capturing .tts-hand-meter {
  display: none !important;
}
.tts-player__hand--capturing .tts-player__icon--record-check {
  display: block;
}
.tts-player__hand--assistant-tts .tts-hand-meter {
  display: none !important;
}
.tts-player__hand--assistant-tts .tts-player__icon--reply-wait {
  display: block !important;
}
.tts-player__hand.tts-player__hand--capturing .tts-player__icon--hand {
  display: none !important;
}
.tts-player__hand--assistant-tts .tts-player__icon--record-check {
  display: none !important;
}
/* Отказ от ожидания озвучки (квадрат): fetch идёт, кнопка «рука» неактивна до ответа сервера */
.tts-player__hand-wrap .tts-player__hand.tts-player__hand--stt-parked:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.11) 100%) !important;
  color: rgba(0, 0, 0, 0.34) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-50%) scale(0.94);
}
.tts-player__hand--stt-parked .tts-player__hand-load-ring,
.tts-player__hand--stt-parked .tts-player__icon--reply-wait {
  display: none !important;
}
.tts-player__hand--stt-parked .tts-player__icon--hand {
  display: block !important;
  opacity: 0.48;
}
html.invert-images .tts-player__hand.tts-player__hand--active:not(.tts-player__hand--capturing):not(.tts-player__hand--awaiting) {
  background: linear-gradient(155deg, #8b5cf6 0%, #7c3aed 55%, #5b21b6 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
html.invert-images .tts-player__hand.tts-player__hand--capturing {
  background: linear-gradient(155deg, #7c3aed 0%, #6d28d9 45%, #4c1d95 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
html.invert-images
  .tts-player__hand.tts-player__hand--awaiting.tts-player__hand--loading:not(.tts-player__hand--assistant-tts) {
  background: linear-gradient(155deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
html.invert-images .tts-player__hand.tts-player__hand--assistant-tts {
  background: linear-gradient(155deg, #fdba74 0%, #f97316 40%, #c2410c 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38);
}
html.invert-images .tts-player__hand-wrap .tts-player__hand.tts-player__hand--stt-parked:disabled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.22) 100%) !important;
  color: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
html.invert-images .tts-player__hand--stt-parked .tts-player__icon--hand {
  opacity: 0.42;
}

.tts-player__icon--pause { display: none; }
.tts-player--active .tts-player__icon--play { display: none; }
.tts-player--active .tts-player__icon--pause { display: block; }
.tts-player--active.tts-player--paused .tts-player__icon--play { display: block; }
.tts-player--active.tts-player--paused .tts-player__icon--pause { display: none; }

/* Play урока заблокирован на время записи вопроса / ожидания ответа / озвучки ассистента */
.tts-player__btn.tts-player__play:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  background: rgba(0, 0, 0, 0.07);
  color: rgba(10, 10, 10, 0.38);
  box-shadow: none;
}
.tts-player__btn.tts-player__play:disabled:hover {
  background: rgba(0, 0, 0, 0.07);
}
html.invert-images .tts-player__btn.tts-player__play:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
}
html.invert-images .tts-player__btn.tts-player__play:disabled:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Счётчик «5 / 11» — при необходимости вернуть разметку + updatePlayerUI в tts-engine.js
.tts-player__info {
  font-size: 0.85rem;
  color: #0a0a0a;
  white-space: nowrap;
  min-width: 50px;
  text-align: center;
}
*/

.tts-player__progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: 8px;
}

/* Слот слева от «руки» (раньше .tts-player__info, рядом с полосой — .tts-player__progress-wrap) */
.tts-player__time {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--tts-time-ink);
  white-space: nowrap;
  min-width: 78px;
  text-align: center;
}

.tts-player__progress {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
  height: 10px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.tts-player__progress-lesson {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
/* «Главы» по заголовкам: только фиксированные разрезы 3px, без смены цвета между сегментами */
.tts-player__lesson-segments {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  pointer-events: none;
  border-radius: inherit;
}
.tts-player__lesson-segment {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}
.tts-player__lesson-gap {
  flex: 0 0 3px;
  width: 3px;
  min-width: 3px;
  max-width: 3px;
  flex-shrink: 0;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 1px;
}
html.invert-images .tts-player__lesson-gap {
  background: rgba(0, 0, 0, 0.45);
}
/* Режим записи голоса: полоса как в ChatGPT — точки слева, волна справа, движется за счёт новых сэмплов */
.tts-player__progress-voice {
  display: none;
  flex: 1;
  min-width: 0;
  align-items: center;
  padding: 0 8px 0 6px;
  box-sizing: border-box;
}
.tts-player--voice-recording .tts-player__progress-voice,
.tts-player--assistant-voice-wave .tts-player__progress-voice {
  display: flex;
}
.tts-player--voice-recording .tts-player__progress-lesson,
.tts-player--assistant-voice-wave .tts-player__progress-lesson {
  display: none;
}
.tts-player--voice-recording .tts-player__progress,
.tts-player--assistant-voice-wave .tts-player__progress {
  height: 26px;
  border-radius: 13px;
  cursor: default;
  pointer-events: none;
  touch-action: auto;
  background: rgba(255, 255, 255, 0.92);
}
html.invert-images .tts-player--voice-recording .tts-player__progress,
html.invert-images .tts-player--assistant-voice-wave .tts-player__progress {
  background: rgba(30, 30, 34, 0.75);
}
.tts-player--voice-recording.tts-player--scrubbing .tts-player__progress,
.tts-player--assistant-voice-wave.tts-player--scrubbing .tts-player__progress {
  cursor: default;
}
/* Ожидание ответа по голосовому вопросу (STT): «волна» из тех же точек, бегущий пульс */
.tts-player__progress-loading {
  display: none;
  flex: 1;
  min-width: 0;
  align-items: center;
  padding: 0 8px 0 6px;
  box-sizing: border-box;
}
.tts-player--stt-loading .tts-player__progress-loading {
  display: flex;
}
.tts-player--stt-loading .tts-player__progress-lesson {
  display: none !important;
}
.tts-player--stt-loading .tts-player__progress-voice {
  display: none !important;
}
.tts-player--stt-loading .tts-player__progress {
  height: 26px;
  border-radius: 13px;
  cursor: wait;
  pointer-events: none;
  touch-action: auto;
  background: rgba(255, 255, 255, 0.92);
}
.tts-loading-wave {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
/* 48×2px — см. LOADING_WAVE_NUM_BARS в tts-engine.js */
.tts-loading-wave__bars {
  --ttl-bar: 2px;
  display: grid;
  grid-template-columns: repeat(48, var(--ttl-bar));
  grid-template-rows: 1fr;
  align-items: end;
  justify-content: start;
  width: 100%;
  min-width: 0;
  min-height: 14px;
  column-gap: max(0px, calc((100% - 96px) / 47));
}
.tts-loading-wave__bar {
  display: block;
  width: 100%;
  min-width: 0;
  height: 14px;
  border-radius: 999px;
  background: var(--c-purple, #7c3aed);
  transform-origin: center bottom;
  align-self: end;
  animation: tts-loading-wave-pulse 1.05s ease-in-out infinite;
  animation-delay: var(--tts-load-delay, 0s);
}
@keyframes tts-loading-wave-pulse {
  0%,
  100% {
    transform: scaleY(0.22);
    opacity: 0.28;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tts-loading-wave__bar {
    animation: none;
    opacity: 0.55;
    transform: scaleY(0.42);
  }
}
html.invert-images .tts-player--stt-loading .tts-player__progress {
  background: rgba(30, 30, 34, 0.75);
}
html.invert-images .tts-loading-wave__bar {
  background: #a78bfa;
}
.tts-voice-wave {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.tts-voice-wave__viewport {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 6px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 6px), transparent);
}
.tts-voice-wave__bars {
  /* 88×2px = 176px — синхронно с VOICE_WAVE_NUM_BARS в tts-engine.js */
  --tts-vw-bar: 2px;
  display: grid;
  grid-template-columns: repeat(88, var(--tts-vw-bar));
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: start;
  /* Один и тот же зазор между каждой парой соседних столбиков (87 промежутков) */
  column-gap: max(0px, calc((100% - 176px) / 87));
  height: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  will-change: transform;
  animation: tts-voice-wave-drift 9s ease-in-out infinite;
}
@keyframes tts-voice-wave-drift {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
}
/* Озвучка ответа: лёгкое смещение в противоположную сторону от записи (ощущение движения слева направо) */
@keyframes tts-voice-wave-drift-ltr {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-2px);
  }
}
.tts-player--assistant-voice-wave .tts-voice-wave__bars {
  animation-name: tts-voice-wave-drift-ltr;
}
@media (prefers-reduced-motion: reduce) {
  .tts-voice-wave__bars {
    animation: none;
  }
}
.tts-voice-wave__bar {
  display: block;
  width: 100%;
  min-width: 0;
  justify-self: center;
  /* Вертикальная «капсула» вместо острого прямоугольника */
  border-radius: 999px;
  background: var(--tts-ink);
  height: 3px;
  min-height: 2px;
  opacity: 0.88;
}
.tts-player--voice-recording .tts-voice-wave__bar {
  background: var(--c-purple, #7c3aed);
  opacity: 0.9;
}
.tts-player--assistant-voice-wave .tts-voice-wave__bar {
  background: #ea580c;
  opacity: 0.92;
}
html.invert-images .tts-voice-wave__bar {
  opacity: 0.9;
}
html.invert-images .tts-player--voice-recording .tts-voice-wave__bar {
  background: #a78bfa;
  opacity: 0.92;
}
html.invert-images .tts-player--assistant-voice-wave .tts-voice-wave__bar {
  background: #fb923c;
  opacity: 0.94;
}
.tts-player--scrubbing .tts-player__progress {
  cursor: grabbing;
}
.tts-player--progress-locked .tts-player__progress {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
}
.tts-player--voice-recording.tts-player--progress-locked .tts-player__progress,
.tts-player--assistant-voice-wave.tts-player--progress-locked .tts-player__progress {
  opacity: 1;
  pointer-events: none;
}
html.invert-images .tts-player__progress {
  background: rgba(255, 255, 255, 0.12);
}
.tts-player__bar {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0;
  background: var(--c-purple, #7c3aed);
  border-radius: 5px;
  transition: width .3s ease;
}
.tts-player--progress-live .tts-player__bar {
  transition: none;
}

.tts-player__speed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  max-width: 22%;
}
/* Цикл скорости — тот же круг 34×34, что у prev/next/hand/volume (.tts-player__btn) */
.tts-player__btn.tts-player__speed-cycle {
  color: var(--tts-btn-ink);
  font-size: 0.62rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
}
.tts-player__btn.tts-player__speed-cycle:active {
  transform: scale(0.96);
}

/* Громкость и скорость: всегда кнопка «шестерёнка», громкость + скорость в круглой панели над плеером */
.tts-player__settings-cluster {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.tts-player__settings-gear-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tts-player__settings-toggle {
  display: inline-flex !important;
}

.tts-player__settings-drawer {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  padding: 5px 20px;
  border-radius: 50px;
  box-sizing: border-box;
  z-index: 6;
  overflow: visible;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--tts-border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

html.invert-images .tts-player__settings-drawer {
  background: rgba(30, 30, 34, 0.92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.tts-player__settings-cluster--open .tts-player__settings-drawer {
  display: flex;
}

.tts-player__settings-drawer .tts-player__volume {
  margin-left: 0;
  align-self: center;
}

.tts-player__settings-drawer .tts-player__speed {
  max-width: none;
  justify-content: center;
  width: 32px;
}

.tts-player__settings-drawer .tts-player__btn.tts-player__speed-cycle {
  width: 32px;
  max-width: none;
  margin: 0 auto;
}

.tts-player__icon--settings {
  display: block;
  flex-shrink: 0;
}

/* Громкость: кнопка + панель с ползунком вверх (слева от скорости) */
.tts-player__volume {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  margin-left: 6px;
}

.tts-player__volume-toggle .tts-player__icon--vol-high,
.tts-player__volume-toggle .tts-player__icon--vol-off {
  display: block;
  pointer-events: none;
}

/* Как у #tts-player: тот же liquid-glass слой (.tts-player__glass) + контент поверх */
.tts-player__volume-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 0;
  border-radius: 50px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 5;
}

.tts-player__volume-panel-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tts-player__volume--open .tts-player__volume-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tts-player__volume-range-wrap {
  width: 36px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tts-player__volume-range {
  width: 88px;
  height: 6px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transform: rotate(-90deg);
  transform-origin: center center;
  accent-color: var(--c-purple, #7c3aed);
}

/* ----------------------------------------------------------
   TTS player — mobile/top nav breakpoint (sync with base.css)
   Two-tier layout: progress on top, controls below
   ---------------------------------------------------------- */
@media (max-width: 750px) {
  /*
   * Одна и та же высота в простое и при записи/волне/STT: полоса сверху до 26px + ряд кнопок + отступы
   * не помещались в 84px — раньше включали min-height только для голоса и бар «прыгал» вверх.
   */
  body.has-snav .tts-player {
    height: 104px;
    border-radius: 34px;
    padding: 10px 16px;
    padding-top: 20px;
  }

  body.has-snav .tts-player__content {
    height: auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-rows: auto auto;
  }

  body.has-snav .tts-player__progress-wrap {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-left: 0;
    width: 100%;
    min-height: 26px;
    align-self: center;
    align-items: center;
  }

  body.has-snav .tts-player--compact .tts-player__progress-wrap {
    margin-right: 0;
  }

  /* Two-tier mobile: add side breathing room for the bar */
  body.has-snav .tts-player__progress {
    margin-left: 10px;
    margin-right: 10px;
  }

  /* Two-tier mobile: progress lesson should be edge-to-edge */
  body.has-snav .tts-player__progress-lesson {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.has-snav .tts-player__content > :not(.tts-player__progress-wrap) {
    grid-row: 2;
    min-width: 0;
  }

  body.has-snav .tts-player__settings-cluster {
    grid-column: 4 / span 2;
    margin-left: 0;
    justify-self: end;
  }

  body.has-snav .tts-player__volume,
  body.has-snav .tts-player__speed {
    justify-self: end;
  }

  body.has-snav .tts-player__speed {
    max-width: none;
  }

  /* Keep content visible above the taller fixed player (104px + зазор) */
  body.has-snav .tb-page {
    padding-bottom: 140px;
  }

  /*
   * Чипы задач в три ряда (над шкалой): класс tts-player--chips-stacked задаёт JS (ширина ≤471px + чипы).
   * Не через @container к самому #tts-player — контур иначе остаётся 104px и обрезает низ.
   */
  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked {
    height: auto !important;
  }

  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked .tts-player__content {
    grid-template-rows: auto auto auto;
  }

  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked .tts-player__settings-cluster {
    display: contents;
  }

  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked #tts-player-context-chip {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: center;
    margin-right: 0;
    margin-left: 0;
    max-width: 100%;
    width: min(100%, max-content);
  }

  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked .tts-player__progress-wrap {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked .tts-player__transport,
  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked .tts-player__time,
  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked .tts-player__hand-wrap,
  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked .tts-player__settings-gear-wrap {
    grid-row: 3;
  }

  body.has-snav .tts-player.tts-player--with-lesson.tts-player--chips-stacked .tts-player__settings-gear-wrap {
    grid-column: 4 / span 2;
    justify-self: end;
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  .tts-player {
    bottom: 10px;
    width: calc(100vw - 20px);
    padding: 0 16px;
    height: 48px;
    border-radius: 26px;
  }
  .tts-player__content {
    gap: 8px;
  }
  .tts-player__transport {
    gap: 2px;
  }
  .tts-player__btn { width: 32px; height: 32px; }
  .tts-player__speed {
    max-width: 28%;
  }
  .tts-player__volume {
    margin-left: 4px;
  }
  .tts-player__btn.tts-player__speed-cycle {
    font-size: 0.56rem;
    letter-spacing: -0.04em;
  }
  /* .tts-player__info { min-width: 42px; font-size: 0.78rem; } */
  .tts-player__progress-wrap {
    margin-left: 4px;
    gap: 4px;
  }
  .tts-player__time {
    font-size: 0.78rem;
    min-width: 72px;
  }
  .tts-player__volume-range-wrap {
    height: 88px;
  }
  .tts-player__volume-range {
    width: 80px;
  }

  /* Two-tier height overrides (sync with mobile/top nav @750px) */
  body.has-snav .tts-player {
    padding: 10px 14px;
    padding-top: 20px;
    height: 104px;
    border-radius: 32px;
  }
}

@media (max-width: 480px) {
  body.has-snav.tts-with-lesson:has(#tts-player-context-chip:not([hidden])) .tb-page {
    padding-bottom: 182px;
  }
}

/* Keep content visible above the fixed bottom player */
.tb-page {
  padding-top: 20px;
  padding-bottom: 90px;
}

/*
 * «Музыкальный» центр экрана только пока включён режим follow TTS (#items-list.tts-reading-follow).
 * Без озвучки / после сброса — список и страница как раньше, без лишних полей.
 */
html:has(#items-list.tts-reading-follow) {
  scroll-padding-top: min(42dvh, 26rem);
  scroll-padding-bottom: min(50dvh, 32rem);
}

#items-list.tb-items {
  transition: padding-top 0.4s ease, padding-bottom 0.4s ease;
}

#items-list.tts-reading-follow.tb-items {
  padding-top: min(45dvh, 28rem);
  padding-bottom: min(52dvh, 34rem);
}

/* Над списком: только крошки (не вся строка — иначе filter цеплял бы fixed-кнопку на моб.) */
.tb-page:has(#items-list.tts-reading-follow) > nav.breadcrumbs,
.tb-page:has(#items-list.tts-reading-follow) > .tb-breadcrumb-row > nav.breadcrumbs,
.tb-page:has(#items-list.tts-reading-follow) > .chip {
  transform-origin: top center;
  backface-visibility: hidden;
  transform: scale(0.91);
  filter: blur(2.4px) brightness(0.86);
  transition:
    transform 0.52s cubic-bezier(0.22, 0.9, 0.27, 1),
    filter 0.45s ease;
}

html.invert-images .tb-page:has(#items-list.tts-reading-follow) > nav.breadcrumbs,
html.invert-images .tb-page:has(#items-list.tts-reading-follow) > .tb-breadcrumb-row > nav.breadcrumbs,
html.invert-images .tb-page:has(#items-list.tts-reading-follow) > .chip {
  filter: blur(2.4px) brightness(0.78);
}

/* ----------------------------------------------------------
   TTS karaoke highlighting
   ---------------------------------------------------------- */
.tts-word,
.tts-formula-el {
  transition: background .12s ease, color .12s ease;
  border-radius: 3px;
}

/* Inline $...$: gradient wipe synced to spoken words (see --tts-progress in tts-engine.js) */
.tts-formula-el.tts-active {
  --tts-progress: 0%;
  background: linear-gradient(
    to right,
    rgba(255, 213, 0, 0.45) var(--tts-progress),
    transparent var(--tts-progress)
  ) !important;
  transition: background 0.06s linear, color .12s ease;
}

.tts-formula-el.tts-read {
  background: rgba(255, 213, 0, 0.12) !important;
}

/* Display $$...$$ with per-atom mode: container stays transparent */
.katex-display > .katex.tts-formula--display-atoms.tts-active,
.katex-display > .katex.tts-formula--display-atoms.tts-read {
  background: transparent !important;
}

.katex-display .tts-formula-atom-active {
  background: rgba(255, 213, 0, 0.45);
  border-radius: 2px;
}

.katex-display .tts-formula-atom-read {
  background: rgba(255, 213, 0, 0.12);
  border-radius: 2px;
}

.tts-active {
  background: rgba(255, 213, 0, 0.45);
}

/* Слова: «ползущая» подсветка по доле внутри слова (--tts-progress из tts-engine.js) */
.tts-word.tts-active {
  --tts-progress: 0%;
  background: linear-gradient(
    to right,
    rgba(255, 213, 0, 0.45) var(--tts-progress),
    transparent var(--tts-progress)
  );
  transition: background 0.06s linear, color .12s ease;
}

.tts-read {
  background: rgba(255, 213, 0, 0.12);
}

/*
 * TTS follow: один коэффициент для всех неактивных пунктов списка (comment, heading, task-item,
 * video-item, шаблоны — у всех разные классы, раньше матчилось только li.tb-block → «рваные» размеры).
 */
#items-list > li:not(.muted) {
  transform-origin: center center;
  backface-visibility: hidden;
  transition:
    transform 0.52s cubic-bezier(0.22, 0.9, 0.27, 1),
    filter 0.45s ease,
    box-shadow 0.45s ease;
}

/* Неактивные: сильнее «вымывание» + лёгкое затемнение */
#items-list.tts-reading-follow > li:not(.tts-current-block--follow):not(.muted) {
  transform: scale(0.91);
  z-index: 0;
  filter: blur(2.4px) brightness(0.86);
}

html.invert-images #items-list.tts-reading-follow > li:not(.tts-current-block--follow):not(.muted) {
  filter: blur(2.4px) brightness(0.78);
}

/* Текущий блок — без размытия, выраженная тень «над» остальными */
#items-list.tts-reading-follow > li.tts-current-block--follow {
  transform: scale(1.035);
  z-index: 2;
  position: relative;
  filter: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.09),
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.14),
    0 24px 52px rgba(0, 0, 0, 0.16),
    0 40px 72px rgba(0, 0, 0, 0.12);
}

html.invert-images #items-list.tts-reading-follow > li.tts-current-block--follow {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 32px 64px rgba(0, 0, 0, 0.5),
    0 48px 88px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  #items-list > li:not(.muted) {
    transition: none;
  }
  #items-list.tts-reading-follow > li:not(.tts-current-block--follow):not(.muted),
  #items-list.tts-reading-follow > li.tts-current-block--follow {
    transform: none;
    filter: none;
  }
  .tb-page:has(#items-list.tts-reading-follow) > nav.breadcrumbs,
  .tb-page:has(#items-list.tts-reading-follow) > .tb-breadcrumb-row > nav.breadcrumbs,
  .tb-page:has(#items-list.tts-reading-follow) > .chip {
    transform: none;
    filter: none;
    transition: none;
  }
}