/*стили для авто рулетки у отдела мессенджера при не авторизации*/
: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: 5% !important;
    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: 95%;
      height: 7.7vw !important; /*Настраивается в зависимости от разера аватарки*/
      margin: 2.5% !important;
      margin-top: 2.5% !important;
      margin-bottom: 3.75% !important;
      /* height: auto !important; */
      border-radius: 20vw;
 
  }
  
  .channel_avatar_roolete_lent { 
      position: relative;
      height: 7.7vw !important;
      width: 7.7vw !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: bold;
      color: black;
      font-size: 3vw !important;
      margin-top: 0.2vw !important;
  }
  
  .channel_choices_buttons_container {
      display: flex;
      align-items: center;
      width: 95%;
      margin-left: 2.5%;
      font-weight: normal;
      border-radius: 20vw;
      height: auto !important;
      margin-top: 0 !important;
      background-color: none;
  }
  
  /*РЕАКЦИЯ КНОПКА*/
  .channel_reactions_button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: auto !important;
      margin-left: 2.5vw;
      font-weight: normal;
      border-radius: 0vw;
      height: 7.875vw !important;
      color: black;
      transition: 0.3s ease;
      cursor: pointer;
  }

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

  .image_reaction_button { 
      width: 5.77vw !important;
      height: 5vw !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 {
    width: 5.77vw !important;
    height: 5vw !important;
    transition: 1s;
    margin-top: 0 !important;
    margin-left: 0 !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;
      /* border: solid 2px black; */
      display: flex;
      width: 100% !important;
      height: auto !important;
      border-radius: 0vw;
      margin-left: 0vw;
      margin-top: -1vw;
      max-width: 100%;
      background-color: none;
  }
  
  .channel_post_text_roolete_lent {
      /* border: solid 2px black; */
      display: flex !important;
      overflow-y: hidden !important;
      overflow: hidden !important;
      scrollbar-width: none;
      font-size: 4vw !important;
      color: black;
      font-weight: normal;
      max-width: 100%;
      
      max-height: 300vw !important;
      height: auto !important;

      object-fit: contain;
      padding-top: 0 !important;
      /* padding-bottom: 5% !important; */
      padding-left: 2.5% !important;
      padding-right: 5%!important;
      
      background-color: none !important;
  }
  .channel_post_text_roolete_lent_d { 
    font-weight: normal !important;
    font-size: 4vw !important;
    background-color: none;
  }
  .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;
      padding-bottom: 2.5% !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;
    border-radius: 3vw !important;
  }

  .comments_container {
    grid-template-rows: 1fr auto; 
    background-color:rgb(45, 45, 45);
    position: absolute;
    width: 100% !important;
    height: 0;
    max-height: 130vw !important;
    z-index: 100000;
    left: 0vw;
    margin-top: 0vw;
    bottom: 0vw;
    overflow: hidden;
    transition: height 0.3s ease; 
  }

  .comments_container_list {
    background-color:rgb(45, 45, 45);
    display: none;
    position: relative;
    width: 100% !important;
    height: 100%;
    overflow-y: scroll !important;
    overflow-x: none !important;
    scrollbar-width: none !important;
  }

  .comments_container_textarea {
    display: none; 
    background-color: rgb(45, 45, 45);
    position: relative;
    width: 100% !important;
    height: auto;
    padding-bottom: 3vw; /* Отступ контейнера снизу */
    border-top: 0.5vw solid rgb(54, 54, 54);
    box-sizing: border-box;
    align-items: flex-end;
  }

  .avatar_user_in_comments_container {
    width: 10vw;
    height: 10vw;
    border-radius: 20vw;
    margin-top: 3vw;
    margin-left: 3vw;
  }
  .textarea_new_comment {
    font-family: Arial, Helvetica, sans-serif;
    display: block; 
    box-sizing: border-box; 

    /* Делаем симметричные отступы внутри */
    padding: 2.5vw 4vw; 

    margin-top: 3vw;
    margin-left: 3vw;
    color: white;
    width: 80%;
    height: 10vw; /* Стартовая базовая высота */
    background-color: rgb(54, 54, 54);
    border: none;
    resize: none;
    outline: none;
    border-radius: 5vw; /* Уменьшили до 5vw, чтобы при росте поле сохраняло аккуратную форму */
    font-size: 2vw;
    line-height: 1.4; 
    overflow-y: hidden;
    transition: background-color 0.2s; 
    word-break: break-word;

  }
  
  .textarea_new_comment::placeholder {
    color: grey;
  }
  .send_comment_button {
    margin-left: 3vw;
    margin-top: 3vw;
    transition: 0.2s;
    width: 0vw;
    height: 10vw;
    overflow: hidden;
    background-color: #1777d7;
    border-radius: 20vw;
    z-index: 500000;
  }

  .container_comment {
    display: flex;
    margin-top: 5vw;
    width: 86.5%;
    margin-left: 5%;
    height: auto;
    background-color: rgb(54, 54, 54);
    border-radius: 5vw;
    padding: 2vw;
    padding-bottom: 2vw;
  }
  .container_comment_one {
    display: inline-block;
    width: 80%;
    margin-left: 0vw;
    height: auto;
    background-color: none;
  }
  .avatar_creator {
    width: 8vw;
    height: 8vw;
    border-radius: 20vw;
  }

  .user_link_creator {
    margin-top: 0.5vw;
    display: flex;
    font-size: 2.5vw !important;
    font-weight: bold !important;
    color: white;
    margin-left: 1.5vw !important;
  }

  .text_comment {
    display: flex;
    font-size: 3.5vw !important;
    margin-left: 1.5vw !important;
    color: white;
    margin-top: 0.75vw !important;
  }

  .close_container_button {
    position: absolute;
    top: 0vw;
    width: 100%;
    height: 12.5vw;
    background-color: rgba(45,45,45, 0.2);
    backdrop-filter: blur(5vw);
    z-index: 6000000000;
  }
  
}