/* Переключатель источников видеоразбора (несколько авторов без таймкодов) */
.video-view__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
  padding: 0 0.25rem;
}

.video-view__source-btn {
  padding: 0.25rem 0.65rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border-color, #374151);
  background: transparent;
  color: var(--text-color, #e5e7eb);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.video-view__source-btn:hover {
  background: var(--border-color, #374151);
}

.video-view__source-btn.is-active {
  border-color: var(--primary-color, #2563eb);
  background: rgba(37, 99, 235, 0.15);
}

[data-theme="light"] .video-view__source-btn {
  color: #1f2937;
  border-color: #d1d5db;
}

[data-theme="light"] .video-view__source-btn.is-active {
  background: rgba(37, 99, 235, 0.1);
}

.python-sandbox__action--video-source .libreoffice-hf-action-btn__text {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Видео сразу под шапкой, блок 16:9 без лишней чёрной зоны снизу */
body #video-view.task-view--video:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
}

body #video-view.task-view--video:not([hidden]) .video-view__header {
  flex: 0 0 auto;
}

body #video-view.task-view--video:not([hidden]) .video-view__player,
body.libreoffice-page-hf-task-list
  .hf-sheet-dual-trainer__panel--calc
  #video-view.task-view--video:not([hidden])
  .video-view__player,
body.neuroege-python-task9-page
  .hf-sheet-python-panel
  #video-view.task-view--video:not([hidden])
  .video-view__player,
body.neuroege-python-task26-page
  .hf-sheet-python-panel
  #video-view.task-view--video:not([hidden])
  .video-view__player,
body.libreoffice-page-hf-task-list
  .task-solve__left
  > #video-view.task-view--video:not([hidden])
  .video-view__player {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  background: #000;
  container-type: normal;
}

body #video-view.task-view--video:not([hidden]) .video-view__iframe,
body.libreoffice-page-hf-task-list
  .hf-sheet-dual-trainer__panel--calc
  #video-view.task-view--video:not([hidden])
  .video-view__iframe,
body.neuroege-python-task9-page
  .hf-sheet-python-panel
  #video-view.task-view--video:not([hidden])
  .video-view__iframe,
body.neuroege-python-task26-page
  .hf-sheet-python-panel
  #video-view.task-view--video:not([hidden])
  .video-view__iframe,
body.libreoffice-page-hf-task-list
  .task-solve__left
  > #video-view.task-view--video:not([hidden])
  .video-view__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  vertical-align: top;
}

.video-modal.is-open .video-modal__player {
  width: min(100%, calc((100vh - 4rem) * 16 / 9));
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: calc(100vh - 4rem);
  overflow: hidden;
  background: #000;
}

.video-modal.is-open .video-modal__iframe,
.video-modal__player > .video-view__iframe.video-modal__iframe--reparented {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* Фоновое воспроизведение при «← Редактор» — не display:none на предке iframe */
.video-iframe-preserve-host {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 640px;
  height: 360px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.video-iframe-preserve-host .video-view__iframe--preserved {
  display: block;
  width: 640px;
  height: 360px;
  border: none;
}

/* Светлая тема: карточка и шапка (не полупрозрачная на тёмном фоне) */
[data-theme="light"] body #video-view.task-view--video:not([hidden]) {
  background: #e8e8ed;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] body #video-view.task-view--video:not([hidden]) .video-view__header {
  background: #f0f1f3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] body #video-view.task-view--video:not([hidden]) .video-view__title {
  color: #1d1d1f;
}

[data-theme="light"] body #video-view.task-view--video:not([hidden]) .video-view__btn {
  color: #374151;
  border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] body #video-view.task-view--video:not([hidden]) .video-view__btn:hover {
  color: #111827;
  border-color: var(--green, #05b87d);
}

/* Chromeless: без .video-view__header, закрытие — × на плеере (task N, Writer, HF python) */
body #video-view.task-video-view--chromeless:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
}

body #video-view.task-video-view--chromeless:not([hidden]) .video-view__sources-host {
  flex: 0 0 auto;
}

body #video-view.task-video-view--chromeless:not([hidden]) .video-view__sources-host:not([hidden]) {
  padding: 0.35rem 0.5rem 0;
}

body .task-solve__left > #video-view.task-video-view--chromeless:not([hidden]),
body .variant-exam-body .variant-exam__trainer-inner > #video-view.task-video-view--chromeless:not([hidden]),
body .hf-sheet-python-panel > #video-view.task-video-view--chromeless:not([hidden]),
body.libreoffice-page-task1 .task1-diagram-slot > #video-view.task-video-view--chromeless:not([hidden]),
body.libreoffice-page-task1 .task1-diagram-slot > #video-view.task1-diagram-video:not([hidden]) {
  flex: 1 1 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  min-height: 0;
}

body #video-view.task-video-view--chromeless .video-view__iframe {
  position: relative;
  z-index: 0;
}

body #video-view.task-video-view--chromeless .task-video-view__overlay {
  z-index: 5;
}

body #video-view.task-video-view--chromeless:not([hidden]) .video-view__player {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  background: #000;
}

body .python-sandbox--split-shell .python-sandbox__split-root > #video-view.task-video-view--chromeless:not([hidden]) .video-view__player {
  aspect-ratio: unset;
  height: 100%;
}

body .python-sandbox--split-shell .python-sandbox__split-root > #video-view.task-video-view--chromeless .video-view__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

body .task-video-view__overlay {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: flex;
  gap: 0.35rem;
  pointer-events: none;
}

body .task-video-view__overlay .video-view__btn--overlay {
  pointer-events: auto;
  padding: 0.35rem 0.55rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body .task-video-view__overlay .video-view__btn--close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] body .task-video-view__overlay .video-view__btn--overlay {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

[data-theme="dark"] body .task-video-view__overlay .video-view__btn--overlay:hover {
  border-color: var(--green, #05b87d);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

[data-theme="light"] body .task-video-view__overlay .video-view__btn--overlay {
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.94);
  color: #1d1d1f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] body .task-video-view__overlay .video-view__btn--overlay:hover {
  border-color: var(--green, #05b87d);
  background: #fff;
  color: #111827;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] body #video-view.task-video-view--chromeless:not([hidden]) .video-view__sources-host .video-view__source-btn {
  color: #374151;
  border-color: #d1d5db;
}

[data-theme="light"] body #video-view.task-video-view--chromeless:not([hidden]) .video-view__sources-host .video-view__source-btn:hover {
  background: #e5e7eb;
}

[data-theme="light"] body #video-view.task-video-view--chromeless:not([hidden]) .video-view__sources-host .video-view__source-btn.is-active {
  border-color: var(--primary-color, #2563eb);
  background: rgba(37, 99, 235, 0.1);
  color: #1e3a8a;
}

body .python-sandbox__action--video.is-active {
  border-color: var(--green, #05b87d);
  box-shadow: 0 0 0 1px var(--green, #05b87d);
}

/* Модальное окно на весь экран (variant / страницы с video_panel.css) */
.video-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.video-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-modal {
  position: fixed;
  inset: 2rem;
  z-index: 1101;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.video-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.video-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--white, #fff);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
  pointer-events: auto;
}

.video-modal__close:hover {
  background: rgba(0, 0, 0, 0.7);
}

.video-modal__player {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.video-modal__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}