/* Стилизация JamAPlayer */
.jama-player {
  position: relative;
  max-width: auto;
  aspect-ratio: 16 / 9; /* Замените на соотношение сторон вашего видео */
  overflow: hidden;
  border-radius: 10px;
  user-select: none; /* Стандартный CSS3 */
  -webkit-user-select: none; /* Chrome и Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Видео будет вписываться в доступное пространство */
}

.controls-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px; /* Увеличим padding для удобства */
  height: 70px; /* Высота контейнера контролов */
  background: linear-gradient(
    to top,
    #121212 0%,
    rgba(50, 58, 75, 0) 100%
  ); /* Плавный переход от темного к прозрачному */
}

.controls-container.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 7px; /* Поднимем контролы немного выше */
  left: 8px;
  right: 17px; /* Увеличим отступ справа */
  transition: opacity 0.5s ease, visibility 0.5s; /* Добавляем плавность переходов */
}

/* Левая группа элементов управления (play/pause, volume, time) */
.left-controls {
  display: flex;
  align-items: center;
  gap: 7px; /* Увеличим расстояние между элементами управления */
}

.right-controls {
  display: flex;
  align-items: center;
  gap: 7px; /* Увеличим расстояние между элементами управления */
}

/* Кнопка полноэкранного режима/выхода из полноэкранного режима */
#fullscreen,
#exitFullscreen {
  margin-left: auto; /* Автоматический отступ слева, чтобы выровнять элемент справа */
}

.icon {
  display: none; /* Иконки изначально скрыты */
}

.timeline-container {
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: 45px; /* Поднимем таймлайн немного выше */
}

#timeline {
  width: 100%;
  cursor: pointer;
  background: #d0d0d6; /* Изначальный фон полностью тёмно-синий */
  -webkit-appearance: none; /* Сброс стандартного вида для WebKit */
  appearance: none;
  height: 5px; /* Изначальная высота полосы таймлайна */
  border-radius: 5px;
  position: relative; /* Для правильного позиционирования ползунка */
  transition: height 0.3s ease; /* Плавное изменение высоты */
}

/* Увеличиваем высоту таймлайна при наведении */
.timeline-container:hover #timeline {
  height: 10px; /* Увеличенная высота полосы таймлайна */
}

#timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; /* Ширина ползунка */
  height: 12px; /* Высота ползунка */
  background: #ff0042; /* Цвет ползунка */
  cursor: pointer;
  border-radius: 50%;
  margin-top: -2px; /* Поднять ползунок вверх, чтобы центрировать относительно полосы */
}

#timeline::-moz-range-thumb {
  display: none;
}

#timeline::-ms-thumb {
  display: none;
}

/* Стили для контейнера громкости */
.volume-container {
  display: flex;
  position: relative;
}

/* Стили для скрытия и показа трека громкости */
#volumeControl {
  position: absolute;
  left: 100%;
  top: 50%; /* Позиционировать относительно верха контейнера */
  transform: translateY(-50%) translateX(0%);
  right: 10px; /* Позиционировать справа от кнопки громкости */
  -webkit-appearance: none; /* Сброс стандартного вида для WebKit */
  appearance: none;
  width: 0; /* Начальная ширина */
  height: 5px; /* Высота полосы */
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  background: #d0d0d6;
  transition: width 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s, background 0.5s ease;
}

#volumeControl.active {
  width: 150px; /* Увеличим ширину */
}

/* Показать трек громкости при наведении */
.volume-container:hover #volumeControl {
  width: 150px; /* Растянуть ползунок до полной ширины */
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* Убрать задержку при наведении */
}

/* Стилизация ползунка громкости */
#volumeControl::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px; /* Ширина ползунка */
  height: 15px; /* Высота ползунка */
  background: #ff0042; /* Цвет ползунка */
  cursor: pointer;
  border-radius: 50%;
  margin-top: -1px; /* Поднять ползунок вверх, чтобы центрировать */
}

#volumeIconFull,
#volumeIconMedium,
#volumeIconMute,
#volumeIconLite {
  overflow: visible;
  margin-right: 5px; /* Немного увеличим отступ */
}

/* Стили для индикатора времени */
#timeDisplay {
  transition: margin-left 0.3s ease;
  margin-left: 0;
  color: white;
  font-size: 16px; /* Увеличим размер шрифта */
}

.volume-container:hover + #timeDisplay {
  margin-left: 150px; /* Задайте отступ, равный ширине #volumeControl */
}


#playPause svg,
#volumeButton svg,
#fullscreen svg,
#exitFullscreen svg,
#settingsButton svg,
#pipButton svg {
  width: 32px; /* Размеры иконок */
  height: 32px;
}

/* Отображение подсказки при наведении на таймлайн */
.timeline-container:hover #timeTooltip {
  visibility: visible; /* Сделать подсказку видимой */
  opacity: 1; /* Сделать подсказку непрозрачной */
}

/* Стилизация кнопки настроек */
#settingsButton {
  cursor: pointer;
  scale: 1.13;
    height: 33px;
}

#settingsButton svg {
  display: inline-block;
  transform-origin: center;
}

#settingsMenu {
  visibility: hidden;
  opacity: 0;
}

/* Стили для меню настроек */
.settings-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 60px;
  right: -5px;
  background-color: rgba(18, 18, 18, 0.9); /* Чуть менее прозрачный */
  border: none; /* Убрать границу для более современного вида */
  border-radius: 10px; /* Более круглые углы */
  padding: 8px 0px; /* Больше внутреннего отступа */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); /* Более мягкая тень */
  transition: opacity 0.5s, visibility 0.5s; /* Плавнее анимация */
  color: #fff;
  backdrop-filter: blur(5px); /* Размытие фона */
  -webkit-backdrop-filter: blur(5px); /* Для поддержки в Webkit-браузерах */
  z-index: 1000;
}

.settings-menu.visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.settings-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.settings-menu li {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0px 20px;
}

.settings-menu li:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Реакция на наведение */
}

.settings-menu .menu-icon {
  margin-right: 12px; /* Больше пространства у иконки */
}

.screenshot-menu {
  display: none; /* Скрыто по умолчанию */
  position: fixed; /* 'fixed' для полноэкранного режима */
  left: 20px; /* Небольшой отступ от края */
  top: 15px; /* Небольшой отступ от края */
  background-color: rgba(18, 18, 18, 0.8); /* Полупрозрачный фон */
  border: 1px solid #323a4b; /* Граница вокруг меню */
  border-radius: 5px; /* Скругление углов */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Тень от меню */
  backdrop-filter: blur(5px);
  z-index: 1000; /* Высокое значение, чтобы быть поверх всех */
}

#textPreview {
  position: fixed;
  font-size: 24px;
  color: white;
  opacity: 1;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#previewContainer,
.time-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}


#previewContainer {
  display: block; /* Будет переключаться классами */
  position: relative;
  z-index: 10;
  width: 200px;
  height: 112px;
  background: #000;
  border: 1px solid #fff;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
  aspect-ratio: 16 / 9;
}

#previewContainer.show {
  opacity: 1;
  visibility: visible;
}

#previewCanvas {
  width: 200px; /* Увеличим размер */
  height: 112px; /* Увеличим размер */
}

#previewPlayer {
  display: none; /* Скрываем элемент видео, чтобы он не был виден на странице */
}

.time-tooltip {
  position: relative;
  font-size: 16px; /* Увеличим размер шрифта */
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  display: block; /* Изначально скрыт */
}

/* Стили для полноэкранного режима */
:fullscreen .time-tooltip {
  height: 10px;
  font-size: 16px; /* Увеличим размер шрифта */
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  display: block; /* Изначально скрыт */
}

.timeline-wrapper {
  width: 150%; /* Устанавливаем ширину контейнера больше, чем ширина плеера */
  max-width: 1500px; /* Максимальная ширина контейнера */
  margin: 0 auto; /* Центрирование контейнера */
  overflow: hidden; /* Скрываем часть таймлайна, выходящую за границы контейнера */
}

.button {
  cursor: pointer;
}

.arrowRight,
.arrowLeft,
.arrowRightClose,
.arrowLeftClose {
  transition: transform 0.3s ease; /* Анимация применяется к свойству transform */
}

/* Стили при наведении на fullscreen */
#fullscreen:hover .arrowRight {
  transform: translate(0px, -0px); /* Сдвигаем правую стрелку вправо и вверх */
}

#fullscreen:hover .arrowLeft {
  transform: translate(-0px, 0px); /* Сдвигаем левую стрелку влево и вниз */
}

/* Стили при наведении на exitFullscreen */
#exitFullscreen:hover .arrowRightClose {
  transform: translate(-0px, 0px); /* Сдвигаем правую стрелку влево и вниз */
}

#exitFullscreen:hover .arrowLeftClose {
  transform: translate(0px, -0px); /* Сдвигаем левую стрелку вправо и вверх */
}

@keyframes moveArrowsOpen {
  to {
    transform: translate(
      0px,
      -0px
    ); /* Задаем конечное положение анимации для открытия */
  }
}

@keyframes moveArrowsClose {
  to {
    transform: translate(
      -0px,
      0px
    ); /* Задаем конечное положение анимации для закрытия */
  }
}

.moveRightOpen,
.moveLeftOpen {
  animation: moveArrowsOpen 0.3s forwards; /* Применяем анимацию к классу для открытия */
}

.moveRightClose,
.moveLeftClose {
  animation: moveArrowsClose 0.3s forwards; /* Применяем анимацию к классу для закрытия */
}

.arrowpipRight {
  --scale-factor: 0.9; /* Устанавливаем переменную для масштабирования */
  transform: scale(var(--scale-factor));
  transition: transform 0.3s ease-in-out;
  transform-origin: center;
}

#pipButton:hover .arrowpipRight {
  --translate-values: 3px, -3px; /* Устанавливаем переменную для перемещения */
  transform: translate(var(--translate-values)) scale(var(--scale-factor));
}

.arrowpipLeft {
  --scale-factor: 0.9; /* Устанавливаем переменную для масштабирования */
  transform: scale(var(--scale-factor));
  transition: transform 0.3s ease-in-out;
  transform-origin: center;
}

#pipButton:hover .arrowpipLeft {
  --translate-values: 3px, -3px; /* Устанавливаем переменную для перемещения */
  transform: translate(var(--translate-values)) scale(var(--scale-factor));
}

/* Стили для меню создания отрывков */
.clip-menu {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 76px;
  left: 20px;
  background-color: rgba(18, 18, 18, 0.8); /* Полупрозрачный фон */
  border: 1px solid #323a4b;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s, visibility 0.3s;
  color: #fff; /* Белый текст */
  z-index: 1000;
}

.clip-menu label {
  color: #fff; /* Белый текст */
}

.clip-menu .time-inputs {
  display: flex;
  align-items: center;
}

.clip-menu input[type="text"] {
  background-color: #333;
  border: 1px solid #555;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  width: 40px; /* Увеличим ширину */
  text-align: center;
  margin: 0 5px; /* Увеличим отступ */
}

.clip-menu button {
  background-color: #444;
  border: 1px solid #666;
  color: #fff;
  padding: 7px 15px; /* Увеличим padding */
  border-radius: 3px;
  cursor: pointer;
  margin-top: 10px;
}

.clip-menu button:hover {
  background-color: #555;
}

/* Стили для маркеров на таймлайне */
.marker {
  position: absolute;
  top: -10px;
  width: 0;
  height: 0;
  cursor: pointer;
}

/* Стили для подсветки отрезка между маркерами */
.timeline-container {
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: 45px;
}

/* Стили для прогресс-бара */
.progress-bar-container {
  width: 100%;
  background-color: #ddd;
  height: 10px;
  border-radius: 5px;
  margin-top: 10px;
  display: none; /* Скрыто по умолчанию */
}

.progress-bar {
  width: 0;
  height: 100%;
  background-color: #ff0042;
  border-radius: 5px;
}

.context-menu {
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
  box-shadow: 0px 0px 10px #aaaaaa;
  padding: 10px;
  z-index: 1000;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu ul li {
  padding: 8px 12px;
  cursor: pointer;
}

.context-menu ul li:hover {
  background-color: #f0f0f0;
}


/* Стили для меню скорости */
#speedSettingMenu {
  display: none;
  position: absolute;
  color: white;
  border-radius: 10px;
  right: -5px;
  bottom: 60px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background-color: rgba(18, 18, 18, 0.9);
  width: 200px;
  padding: 8px 0px;
  backdrop-filter: blur(5px); /* Размытие фона */
  -webkit-backdrop-filter: blur(5px);
  z-index: 1001; /* Обеспечить отображение над основным меню */
}

#speedSettingMenu.visible {
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

#speedSettingMenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#speedSettingMenu ul li {
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 10px 20px;
}

#speedSettingMenu ul li:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Реакция на наведение */
}

#speedSettingMenu .divider {
  border-bottom: 1px solid #fff;
}

.backToMain {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s; /* Плавный переход для подсветки */
  padding: 10px 0px 10px 20px;
}

.backToMain:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Легкий полупрозрачный фон при наведении */
  color: #fff; /* Цвет текста при наведении */
}

#backToMain svg {
  vertical-align: middle;
  margin-right: 5px;
}

#currentSpeedDisplay {
  margin-left: 100px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 2px;
  color: grey;
}

.textmenu {
  font-size: 18px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif; /* Современный шрифт */
}

.textmenuspeed {
  margin-left: 5px; /* Расстояние между иконкой и текстом */
  color: white; /* Цвет текста */
}

#settingsMenu, #speedSettingMenu {
  position: absolute;
  opacity: 1;
  transform-origin: center center;
  display: none;
}

#settingsMenu {
  display: block; /* Изначально отображаем только основное меню */
}

.text-settings {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  color: #fff;
  max-width: 300px; /* Установим максимальную ширину для компактности */
}

.text-settings .input-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 5px;
}

.text-settings .input-group label {
  font-weight: bold;
  margin-bottom: 2px;
  font-size: 12px;
}

.text-settings .input-group input,
.text-settings .input-group select,
.text-settings .input-group button {
  padding: 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: none;
  color: #fff;
}

.text-settings .input-group input[type="color"] {
  padding: 0;
  height: 25px;
}

.text-settings .input-group input[type="range"] {
  width: 100%;
}

.text-settings .input-group input[type="number"] {
  width: 50px; /* Уменьшаем ширину для удобства */
}

.text-settings .input-group button {
  background-color: #007bff;
  color: white;
  cursor: pointer;
  padding: 5px;
  margin-top: 5px;
  font-size: 12px;
}

.text-settings .input-group button:hover {
  background-color: #0056b3;
}

.expand-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin: 10px auto;
  text-align: center;
}

.expand-button:hover {
  background-color: #0056b3;
}

.expand-icon {
  width: 24px;
  height: 24px;
}

.separator {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
}

/* Стили для каждого блока настройки */
#screenshotTextGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textColorGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textSizeGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textOpacityGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textShadowColorGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textShadowBlurGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textShadowOffsetXGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textShadowOffsetYGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textOutlineColorGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textOutlineWidthGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textPosXGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textPosYGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#textFontGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#resetTextSettingsGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.screenshot-settings {
  padding: 10px 10px 0px 10px;
}