/*стили для авто рулетки у отдела мессенджера при не авторизации*/
:root {
    --item-height: 15vw;      /* Высота одного элемента */
    --items-count: 20;         /* Количество УНИКАЛЬНЫХ элементов (без учета дубликатов) */
  }
  
  .roulette-viewport {
    width:40vw;
    height: auto; /* Показываем одновременно 3 элемента */
    overflow: hidden;                     /* Скрываем всё, что выходит за рамки */
    border: none;
    border-radius: 0vw;
    background:none;
  }
  
  .roulette-tape {
    display: flex;
    flex-direction: column;
    will-change: transform;
  }
  
  .item {
    height: auto;
    width: 35vw;
    padding-bottom: 1.5vw;
    box-sizing: border-box;
    display: inline-block;
    align-items: center;
    justify-content: center;
    color: black;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
    font-family: sans-serif;
    font-weight: bold;
    margin: 2.5vw;
    border-radius: 2.5vw;
  }
  .item:hover {
    cursor: pointer;
  }
  /* 
    АНИМАЦИЯ: Сдвигаем ленту строго на общую высоту уникальных элементов.
    Формула: 4 элемента * 80px = 320px. 
  */
  @keyframes scrollUp-auto {
    0% {
      transform: translateY(0);
    }
    100% {
      /* Сдвиг вверх на высоту всех уникальных элементов */
      transform: translateY(calc(-1 * var(--item-height) * var(--items-count))); 
    }
  }
  
  /* Опционально: остановка анимации при наведении мыши */

/*классы для элементов внутри контейнера*/
.container_channels_data {
  position: relative;
  display: flex;
  background-color: none;
  width: 90%;
  margin-left: 5%;
  margin-top: 5%;
  height: 5vw;
  border-radius: 20vw;
}

.channel_avatar_roolete { 
  position: relative;
  height: 5vw;
  width: 5vw;
  border-radius: 20vw;
}

.container_names_data { 
  position: relative;
  display:grid;
  background-color: none;
  width: 80%;
  margin-left: 1vw;
  height: 5vw;
}

.channel_name_roolete {
  display: flex;
  position: relative;
  font-weight: normal;
  color: black;
  font-size: 1.25vw;
  margin-top: 1vw;
}

.channel_gal_roolete {
  width: 1.25vw;
  height: 1.25vw;
  margin-left: 0.25vw;
  margin-top: 0vw;
}

.line_roolete {
  display: flex;
  background-color:gainsboro;
  width: 90%;
  height: 0.1vw;
  border-radius: 20vw;
  margin-left: 5%;
  margin-top: 1.5vw;
}

.container_post_data {
  background-color: none;
  display: flex;
  justify-content: center;
  width: 90%;
  height: auto;
  border-radius: 0vw;
  margin-left: 5%;
  margin-top: 1.5vw;
  max-width: 90%;

}

.channel_post_text_roolete {
  overflow-y: scroll;
  scrollbar-width: none;
  font-size: 1.25vw;
  font-weight: normal;
  max-width: 100%;
  max-height: 13.5vw;
  object-fit: contain; /* Картинка полностью впишется без искажений */
}

.channel_post_url_roolete {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 20vw;
  max-height: 20vw;
  object-fit: contain; /* Картинка полностью впишется без искажений */
}

.post_data_img {
  border-radius: 1vw;
  width: 100%;
  height: 100%;
  max-width: 20vw;
  max-height: 20vw;
}

.post_image_class {
  margin-left: 6vw;
}


/*ЛЕНТА*/
/*классы для элементов внутри контейнера*/
.item_lent {
  height: auto;
  width: 35vw;
  padding-bottom: 0vw;
  box-sizing: border-box;
  display: inline-block;
  align-items: center;
  justify-content: center;
  color: black;
  /* box-shadow: 0px 0px 10px rgba(0,0,0,0.25); */
  font-family: sans-serif;
  font-weight: bold;
  margin-left: 4vw;
  border-radius: 2.5vw;
  background-color: none;
}
.item_lent:hover {
  cursor: pointer;
}
.container_channels_data_lent {
  position: relative;
  display: flex;
  background-color: none;
  width: 90%;
  margin-left: 5%;
  margin-top: 5%;
  height: 5vw;
  border-radius: 20vw;
}

.channel_avatar_roolete_lent { 
  position: relative;
  height: 3.5vw;
  width: 3.5vw;
  border-radius: 20vw;
}

.container_names_data_lent { 
  position: relative;
  display:grid;
  background-color: none;
  width: auto;
  margin-left: 1vw;
  height: 3vw;
}

.channel_name_roolete_lent {
  display: flex;
  position: relative;
  font-weight: normal;
  color: black;
  font-size: 1.25vw;
  margin-top: 0.1vw;
}

.channel_choices_buttons_container {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 6vw;
  font-weight: normal;
  margin-top: 1vw;
  border-radius: 20vw;
  height: 3vw;
  background-color: none;
}

/*РЕАКЦИЯ КНОПКА*/
.channel_reactions_button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3vw;
  margin-left: 1vw;
  font-weight: normal;
  margin-top: 0vw;
  border-radius: 20vw;
  height: 3vw; /* Удален дубликат height: 1vw выше */
  color: black;
  /* Эффект жидкого стекла */
  /* background: rgba(255, 255, 255, 0.1); Полупрозрачный белый фон */  
  /* Плавность при наведении */
  transition: all 0.3s ease;
  cursor: pointer;
  background-color: none;
}

/* Эффект при наведении (кнопка «оживает» и бликует сильнее) */
.channel_reactions_button:hover {
  transform: translateY(-1px); /* Легкий подъем кнопки */
}

.image_reaction_button { 
  width: 2.25vw;
  height: 2.05vw;
}

.image_comment_button {
  margin-top: 1.1vw;
  margin-left: -0.35vw;
  width: 2.5vw;
  height: 3vw;
}

/*ПЕРЕЙТИ В КАНАЛА КНОПКА*/
.channel_button {
  font-size: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  margin-left: 1vw;
  font-weight: normal;
  margin-top: 0vw;
  border-radius: 20vw;
  height: 3vw; /* Удален дубликат height: 1vw выше */
  color: white;
  font-weight: normal;
  /* Эффект жидкого стекла */
  background: black; /* Полупрозрачный белый фон */
  backdrop-filter: blur(12px); /* Размытие заднего плана */
  -webkit-backdrop-filter: blur(12px); /* Поддержка Safari */
  /* Внутренние тени для объема (блики сверху, глубина снизу) */
  box-shadow: 
    inset 0 4px 12px rgba(255, 255, 255, 0),  /* Верхний внутренний блик */
    inset 0 -4px 12px rgba(125, 125, 125, 0.1),       /* Нижнее внутреннее затемнение */
    0 8px 32px rgba(0, 0, 0, 0);             /* Внешняя мягкая тень кнопки */

  /* Тонкая стеклянная граница */
  border: 1px solid black;
  
  /* Плавность при наведении */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Эффект при наведении (кнопка «оживает» и бликует сильнее) */
.channel_button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: black;
  /* box-shadow: 
    inset 0 4px 20px rgba(255, 255, 255, 0.6),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2),
    0 12px 40px rgba(0, 0, 0, 0);
    color: #1777d7; */
  transform: translateY(-1px); /* Легкий подъем кнопки */
}


.channel_gal_roolete_lent {
  width: 1.25vw;
  height: 1.25vw;
  margin-left: 0.25vw;
  margin-top: 0vw;
}

.line_roolete_lent {
  display: flex;
  background-color:gainsboro;
  width: 100%;
  height: 0.05vw;
  border-radius: 20vw;
  margin-left: 2vw;
  margin-top: 1.5vw;
}

.container_post_data_lent {
  background-color: none;
  display: flex;
  width: 90%;
  height: auto;
  border-radius: 0vw;
  margin-left: 6.5vw;
  margin-top: -1.5vw;
  max-width: 90%;

}

.channel_post_text_roolete_lent {
  overflow-y: scroll;
  scrollbar-width: none;
  font-size: 1.25vw;
  color: black;
  font-weight: normal;
  max-width: 100%;
  max-height: 13.5vw;
  object-fit: contain; /* Картинка полностью впишется без искажений */
}

.channel_post_url_roolete_lent {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 25vw;
  max-height: 25vw;
  margin-left: 0vw !important;
  object-fit: contain; /* Картинка полностью впишется без искажений */
}

.post_data_img_lent {
  border-radius: 1vw;
  width: 100%;
  height: 100%;
  max-width: 25vw;
  max-height: 25vw;
}

.post_image_class_lent {
  margin-left: 6vw;
}

@media (max-width: 768px) {
  /*ЛЕНТА*/
  /*классы для элементов внутри контейнера*/
  .item_lent {
    height: auto;
    width: 100% !important; /* умножил на 2.625*/
    padding-bottom: 0vw;
    box-sizing: border-box;
    display: inline-block;
    align-items: center;
    justify-content: center;
    color: black;
    /* box-shadow: 0px 0px 10px rgba(0,0,0,0.25); */
    font-family: sans-serif;
    font-weight: bold;
    margin-left: 0vw !important;
    border-radius: 6.5625vw;
    background-color: none !important;
  }
  .item_lent:hover {
    cursor: pointer;
  }
  .container_channels_data_lent {
      position: relative;
      display: flex;
      background-color: none;
      width: 90%;
      margin-left: 5%;
      margin-top: 5%;
      height: 13.125vw !important;
      border-radius: 20vw;
  }

  .channel_avatar_roolete_lent { 
      position: relative;
      height: 9.1875vw !important;
      width: 9.1875vw !important;
      border-radius: 20vw;
  }

  .container_names_data_lent { 
      position: relative;
      display:grid;
      background-color: none;
      width: auto;
      margin-left: 2.625vw !important;
      height: 7.875vw !important;
  }

  .channel_name_roolete_lent {
      display: flex;
      position: relative;
      font-weight: normal;
      color: black;
      font-size: 3.28125vw !important;
      margin-top: 0.2625vw !important;
  }

  .channel_choices_buttons_container {
      display: flex;
      align-items: center;
      width: 90%;
      margin-left: 6vw;
      font-weight: normal;
      margin-top: 5vw;
      padding-bottom: 5vw;
      border-radius: 20vw;
      height: 7.875vw !important;
      background-color: none;
  }

  /*РЕАКЦИЯ КНОПКА*/
  .channel_reactions_button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: auto !important;
      margin-left: 5vw;
      font-weight: normal;
      margin-top: 1.5vw;
      border-radius: 0vw;
      height: 7.875vw !important;
      color: black;
      transition: 0.3s ease;
      cursor: pointer;
      background-color: none;
  }

  .channel_reactions_button:hover {
      transform: translateY(-1px);
  }

  .image_reaction_button { 
      width: 5.90625vw !important;
      height: 5.38125vw !important;
      transition: 1s;
  }
  
  .image_reaction_button:active {
    transform: translateY(-5vw);
    transition: 1s;
  }

  .sum_reaction_txt { 
    margin-left: 2vw !important;
    font-size: 4vw !important;

  }

  .image_comment_button {
      margin-top: 2vw !important;
      margin-left: -0.35vw;
      width: 6.5625vw !important;
      height: 7.875vw !important;
  }

  /*ПЕРЕЙТИ В КАНАЛА КНОПКА*/
  .channel_button {
      font-size: 4vw !important;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40vw !important;
      margin-left: 30vw;
      font-weight: normal;
      margin-top: 0vw;
      border-radius: 20vw;
      height: 10vw !important;
      color: white;
      font-weight: normal;
      background: black;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 
        inset 0 4px 12px rgba(255, 255, 255, 0),
        inset 0 -4px 12px rgba(125, 125, 125, 0.1),
        0 8px 32px rgba(0, 0, 0, 0);
      border: 1px solid black;
      transition: all 0.3s ease;
      cursor: pointer;
  }

  .channel_button:hover {
      background: rgba(255, 255, 255, 0.2);
      color: black;
      transform: translateY(-1px);
  }

  .channel_gal_roolete_lent {
      width: 3.28125vw !important;
      height: 3.28125vw !important;
      margin-left: 0.25vw;
      margin-top: 0vw;
  }

  .line_roolete_lent {
      display: flex;
      background-color:gainsboro;
      width: 100%;
      height: 0.13125vw !important;
      border-radius: 20vw;
      margin-left: 2vw;
      margin-top: 1.5vw;
  }
  
  .container_post_data_lent {
      background-color: none !important;
      display: flex;
      width: 100% !important;
      /* height: auto; */
      border-radius: 0vw;
      margin-left: 0vw;
      margin-top: -1vw;
      max-width: 100%;
      background-color: none;
  }
  
  .channel_post_text_roolete_lent {
      overflow-y: hidden !important;
      overflow: hidden !important;
      scrollbar-width: none;
      font-size: 4vw !important;
      color: black;
      font-weight: normal;
      max-width: 100%;
      object-fit: contain;
      padding-top: 2.5vw !important;
      padding-bottom: 2.5% !important;
      padding-left: 5% !important;
      padding-right: 5%!important;
      
      background-color: none !important;
  }
  .channel_post_text_roolete_lent_d { 
    font-weight: normal !important;
    font-size: 4vw !important;
  }
  .channel_post_text_roolete_lent_d_read {
    font-weight: normal !important;
    font-size: 4vw !important;
    color: #1777d7; 
    white-space: nowrap;
    display: inline;
    margin-left: 1vw !important;
   }

  .channel_post_url_roolete_lent {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      max-width: 100% !important;
      max-height: 100% !important;
      margin-left: 0vw !important;
      object-fit: contain;
  }

  .post_data_img_lent {
      border-radius: 0vw !important;
      width: 100%;
      height: 100%;
      max-width: 100% !important;
      max-height: 100% !important;
  }
  
  .post_image_class_lent {
      margin-left: 6vw;
  }

  /* контейнер нажатия реакции под постом: */
  .reactions_container_for_post { 
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center; 
    position: absolute;
    opacity: 1;
    width: 50vw !important;
    height: 50vw !important;
    border-radius: 5vw;
    background-color: rgb(45, 45, 45);
    border: 0.5vw solid rgb(54, 54, 54) !important;
  }

  .reaction_roolete_container {
    display: flex !important;
    width: 10vw !important;
    height: 10vw !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .reaction_roolete_img_for_cont {
    width: 100% !important;
    height: 100% !important;
  }
}