/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-black: #161616;
  --color-white: #fff;
  --color-grey: #4d4d4d;
  --color-red: #ff4848;
  --color-text: #e4e4e4;
  --color-white: #fff;
  --color-dark-white: #eee;
  --color-black: #161616;
  --color-very-light-grey: #d1d1d1;
  --color-light-grey: #868686;
  --color-dark-grey: #3b3b3b;
  --color-light-red: #e43d3d;
  --color-light-pink: #fb6c80;
  --color-green: #0ad60a;
  --color-gold: #fcaf17;
  --color-blue: #2a7cf7;
}

::-webkit-scrollbar {
  width: 1px; /* Узкая вертикальная полоса прокрутки */
}

::-webkit-scrollbar-track {
  background-color: var(--color-dark-grey);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-red); /* Цвет бегунка (самой полосы прокрутки) */
}

h1 {
  text-transform: uppercase;
  font-size: 25px;
}

h2 {
  text-transform: uppercase;
  font-size: 22px;
}

h3 {
  text-transform: uppercase;
  font-size: 19px;
}

h4 {
  text-transform: uppercase;
  font-size: 16px;
}

ul {
  padding: 0 0 0 20px;
}

blockquote {
  width: 80%;
  padding: 10px;
  background-color: #313131;
  border-left: 10px solid #1f1f1f;
  border-radius: 0 10px 10px 0;
  font-style: italic;
}

a.link_red {
  text-decoration: none;
  color: var(--color-red);
  transition: .3s;
}

a.link_red:hover {
  text-decoration: underline;
}

a.link_grey {
  text-decoration: none;
  color: var(--color-light-grey);
  transition: .3s;
}

.link_grey:hover {
  text-decoration: underline;
}

.button {
  padding: 10px;
  border-radius: 6px;
  background-color: transparent;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

.input {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--color-dark-grey);
  background-color: var(--color-black);
  color: var(--color-dark-white);
  outline: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-black);
  /* font-family: "Roboto", sans-serif;
  font-optical-sizing: auto; */
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  color: var(--color-text);
  font-weight: 400;
  font-weight: 300;
  position: relative;
  user-select: none;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-grey);
  background-color: var(--color-black);
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.logo {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-white);
  /* line-height: 15px; */
}

.logo__span {
  color: var(--color-red);
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}

.main_for-app {
  justify-content: center;
  align-items: center;
  padding: 5px;
  background-color: #181818;
  /* background-image: url(../images/backgroung-monochrome.jpg); */
  background-image: url(../images/geometric-background.webp);
  background-position: center;
  background-repeat: repeat;
  overflow: hidden;
}

/* Общее для страниц с APP --------------------------------------------------------------------- */
.app-menu-button {
  padding: 0 5px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-white);
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.app-read-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100vw;
  max-height: calc(100vh - 65px);
  padding: 20px;
  position: fixed; /* Лучше fixed, чем absolute */
  top: 33px;
  left: 0;
  z-index: 1;
  transform: translateX(100vw);
  transition: transform 0.3s;
  background-color: var(--color-black);
  overflow: hidden;
}

.app-read-block_active {
  transform: translateX(0); /* Сдвигает меню на экран */
}

.read-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 800px;
  height: 50%;
  padding: 20px;
  background-color: var(--color-black);
  overflow-y: scroll;
}

.read-block-menu__list {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
}

.read-block-menu__link {
  text-decoration: none;
  color: var(--color-dark-white);
  text-transform: uppercase;
  font-size: 12px;
  transition: .3s;
}

.read-block-menu__link:hover {
  color: var(--color-red);
}

/* APP - ОБЩЕЕ ДЛЯ ВСЕХ --------------------------------------------------------------------------------- */

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  border: 1px solid var(--color-dark-grey);
  border-radius: 8px;
  box-shadow: 0 0 5px #000;
  overflow: hidden;
  background-color: var(--color-black);
  position: relative;
}

.activity {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
}

.activity__title {
  text-transform: uppercase;
  color: var(--color-red);
  font-size: 21px;
  font-weight: 900;
}

.activity__title_description {
  text-transform: uppercase;
  font-size: 15px;
  color: var(--color-very-light-grey);
  text-align: center;
}

.vertical-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.horizontal-box {
  display: flex;
  flex-direction: row;
  gap: 5px;
  width: 100%;
}

.search-animation-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* БЛОК ДЛЯ ВЫВОДА СООБЩЕНИЙ ------------------------------------------ */
.app-message {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* height: 100%; */
  background-color: var(--color-black);
  border-bottom: 8px solid var(--color-dark-grey);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, -100%);
  z-index: 1;
  transition: .3s;
}

.app-message_active {
  transform: translate(0, 0);
}

/* BLACK SCREEN ------------------------------------------------------ */
.black-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(100%, 0);
  z-index: 2;
  transition: .3s;
}

.black-screen_active {
  transform: translate(0, 0);
}

.black-screen__close-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--color-dark-grey);
}

.black-screen__close-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark-white);
  text-transform: uppercase;
}

.black-screen__close-button {
  padding: 3px;
  border: 2px solid var(--color-red);
  border-radius: 50%;
  background-color: transparent;
  font-size: 10px;
  cursor: pointer;
  transition: .3s;
}

.black-screen__close-button:hover {
  opacity: .9;
}

.black-screen__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 10px 20px;
  position: relative;
}

.black-screen__main_modify-for-menu {
  justify-content: flex-start;
  padding: 0;
}

.black-screen__scroll-block {
  scroll-margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 90%;
  padding: 10px 20px;
  overflow-y: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid var(--color-dark-grey);
  scroll-behavior: smooth;
}

.black-screen__title {
  padding: 10px 0;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--color-light-red);
}

.text-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text-box__p {
  width: 100%;
  color: var(--color-very-light-grey);
  line-height: 18px;
}

.text-box__p_center {
  text-align: center;
}

.text-width_80 {
  width: 80%;
}

.text_mini {
  font-size: 12px;
}

.text_uppercase {
  text-transform: uppercase;
}

.text-color_white {
  color: var(--color-white);
}

.text-color_red {
  color: var(--color-red);
}

.text-color_grey {
  color: var(--color-light-grey);
}

.text-color_very-light-grey {
  color: var(--color-very-light-grey);
}

.text-color_gold {
  color: var(--color-gold);
}

.text_center {
  text-align: center;
}

.report-list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  /* width: 60%; */
  margin: auto;
  background-color: #161616;
}

.report-list__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 13px;
  text-transform: uppercase;
  border-radius: 5px;
  border: 1px solid var(--color-light-grey);
  color: var(--color-very-light-grey);
  cursor: pointer;
  transition: .3s;
}

.report-list__item:hover {
  border: 1px solid var(--color-light-red);
  color: var(--color-light-red);
}

.report-list__item-icon {
  font-size: 16px;
}

.report-list__item-description {
  flex: 1;
  /* text-align: center; */
}

.rating-partner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rating-partner__title {
  font-size: 15px;
  color: var(--color-very-light-grey);
}

.rating-partner__button-block {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.rating-partner__button {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--color-light-grey);
  background-color: transparent;
  font-size: 16px;
  cursor: pointer;
  transition: .3s;
}

.rating-partner__button:hover {
  border: 1px solid var(--color-light-red);
}

.ul-list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ul-list__item {
  padding: 0 0 0 10px;
}

.button_start {
  border: 1px solid var(--color-light-grey);
  color: var(--color-light-grey);
}

.button_search {
  border: 1px solid var(--color-green);
  color: var(--color-green);
}

.button_stop-search {
  border: 1px solid var(--color-red);
  color: var(--color-red);
}

.button_stop-dialog {
  /* width: 100%; */
  border: 1px solid var(--color-red);
  color: var(--color-red);
}

.button_stop-dialog_100 { /* для текстового чата */
  width: 100%;
}

.button_report {
  border: 1px solid var(--color-light-grey);
  color: var(--color-light-grey);
}

/* TEXT CHATROULETTE ---------------------------------------- */
.message-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  height: 100%;
  position: relative;
}

.waiting-block {
  display: none;
}

.waiting-block_active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  z-index: 1;
}

.waiting-block__text {
  color: var(--color-red);
  font-size: 13px;
}

.chat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--color-dark-grey);
  background-color: #1e1e1e;
  overflow-y: auto;
}

.message {
  align-self: flex-end;
  max-width: 80%;
  padding: 5px 10px 5px 10px;
  border-radius: 6px 6px 0 6px;
  background-color: var(--color-dark-grey);
  overflow-wrap: break-word;
}

.message_partner {
  align-self: flex-start;
  border-radius: 6px 6px 6px 0;
  background-color: var(--color-red);
}

.chat-input {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--color-dark-grey);
  background-color: var(--color-dark-grey);
  background-color: #1e1e1e;
  color: var(--color-dark-white);
  outline: none;
}

.button_send {
  border: 1px solid var(--color-green);
  color: var(--color-green);
}

/* VOICE CHATROULETTE ---------------------------------------- */

.dialog-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.dialog-data__logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
  padding: 10px;
  font-size: 88px;
  line-height: 88px;
  border-radius: 50%;
  border: 8px solid var(--color-dark-grey);
}

.dialog-data__detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  visibility: hidden;
}

.dialog-data__detail_active {
  visibility: visible;
}

.dialog-data__partner-data {
  color: var(--color-light-grey);
}

.dialog-data__partner-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-dark-white);
}

.dialog-data__timer {
  color: var(--color-light-grey);
}

.dialog-data__connect-info {
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  color: var(--color-light-red);
  text-align: center;
}

.dialog-button-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.microphone-instruction-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px;
  border-radius: 20px 5px 5px 20px;
  border: 1px solid var(--color-light-grey);
  background-color: var(--color-dark-grey);
  font-size: 15px;
  line-height: 15px;
}

.input-username {
  width: 94%;
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
}

/* WIFI CALL Start Activity -------------------------------------------- */
.wifi-call-instruction {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--color-very-light-grey);
}

.your-number-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: .3s;
}

.your-number-block:hover {
  background-color: #222;
}

.your-number-block__title {
  text-transform: uppercase;
  font-size: 13px;
}

.your-number-block__number {
  height: 22px;
  font-size: 22px;
  line-height: 22px;
  font-weight: 700;
  user-select: text; /* Разрешаем выделение текста */
}

.your-number-block__description {
  font-size: 12px;
  color: var(--color-light-red);
}

.wifi-call-number-input {
  width: 80%;
  text-align: center;
}

.wifi-call-button {
  width: 50%;
}

.button_get-initiator {
  width: 50%;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
}

/* WIFI CALL Start Activity -------------------------------------------- */
.wifi-call-send-button-block {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  width: 80%;
}

/* WIFI CALL Stop Dialog Activity -------------------------------------- */
.stop-dialog-button-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.button-start_width, .re-wifi-call-button {
  width: 60%;
}

.users-online {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-light-grey);
}

.users-online__span_bold {
  font-size: 12px;
  font-weight: 600;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-top: 1px solid var(--color-dark-grey);
  background-color: var(--color-black); /* Важно для видимости тени! */
  position: relative; /* Или sticky/fixed при необходимости */
  z-index: 1;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.6); /* Только верхняя тень */
}

.footer__logo {
  flex: 1;
  text-decoration: none;
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}

.footer__logo_left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  line-height: 14px;
}

.footer__logo_left-telegram-logo {
  display: block;
  width: 12px;
  height: 12px;
  background-image: url(../images/telegram-logo.png);
  background-position: center;
  background-size: cover;
}

.footer__logo_left-telegram-text {
  display: block;
  height: 12px;
}

.footer__logo_right {
  text-align: right;
}

@media screen and (max-width: 810px) {
  .read-block {
    width: 100%;
  }
}

@media screen and (max-width: 790px) {
  .main_for-app {
    background-image: none;
  }
}

@media screen and (max-width: 600px) {
  html, body {
    font-size: 16px;
  }

  .header {
    padding: 10px;
  }

  .app {
    width: 100%;
    border: none;
  }

  .activity__title {
    font-size: 24px;
  }

  .activity__title_description {
    font-size: 15px;
  }

  .dialog-data__partner-name {
    font-size: 22px;
  }

  .dialog-data__connect-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 14px;
  }

  .report-list__item {
    font-size: 14px;
  }

  .input-username {
    padding: 14px 10px;
    font-size: 14px;
  }

  .button {
    padding: 14px;
    border-radius: 6px;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
  }

  .users-online {
    font-size: 13px;
  }

  .users-online__span_bold {
    font-size: 13px;
  }

  .footer {
    padding: 10px;
  }

  .footer__logo {
    font-size: 13px;
  }

  .footer__logo_right {
    display: none;
  }
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-color: #ccc #0000;
  animation: l16 3s infinite linear;
}
.loader::before,
.loader::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
}
.loader::before {
  border-color: var(--color-light-red) #0000;
  animation: inherit; 
  animation-duration: 2s;
  animation-direction: reverse;
}
.loader::after {
  margin: 8px;
}
@keyframes l16 { 
  100%{transform: rotate(1turn)}
}