@font-face {
  font-family: "Open Sans Local";
src: url("/fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");

  font-style: normal;
  font-weight: 100 900; /* вариативный файл: все веса в диапазоне */
}


/* Общие настройки */
body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fff;
  color: #000;
  margin: 0;

  display: flex;
  flex-direction: column;
overflow-x: hidden;
overflow-y: auto;

}

/* Верхний островок */
/*
.top-island {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
*/



















/* История сообщений */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: var(--bottom-spacer, 120px);
  box-sizing: border-box;


  /*плавность затухания здесь */
  transition: opacity 0.4s ease; 
}


/* Гасим детей записи, кроме тех блоков, внутри которых есть кружок оценки или чек */
body.is-preview-active .chat-area .record > * {
  opacity: 0.2;
  transition: opacity 0.4s ease;
}

/* При этом сама область истории остается непрозрачной, чтобы не множить прозрачность */
body.is-preview-active .chat-area {
  pointer-events: none;
}




.messages {
  display: flex;
  flex-direction: column;
  gap: 0px; /* расстояние между записями */
  padding-top: 33px; /* Фиксированный зазор сверху для первой записи, чтобы история не тонула в градиенте сверху экрана */


  

  /* --- ограничение по ширине экрана области вопросов/ответов--- */
  width: 100%;
  max-width: 655px; /* ограничение по ширине*/
}


.msg {
  padding: 4.2px 15px; /* первая цифра вертикальное расстояние между блоками в истории */
  border-radius: 15px;
  max-width: 100%;
  word-wrap: break-word;
}

.msg.user {
  align-self: flex-start;
  background: none;

 position: relative; /* Чтобы кружок Other прилип к этому блоку */
overflow: visible;  /* Разрешаем кружку и тексту выходить влево */


 /* background: rgba(0, 30, 255, 0.2); /* Подсветка границ блока вопроса синим. //_____ */

  border: none;

 margin-top: 10px; /* Перенесенный зазор между сообщениями перенес перед вопросом из-за конфликтов с логами */

  font-weight: 500; /* жирность шрифта */
  font-family: "Manrope", "Inter", "SF Pro Display", sans-serif;
  letter-spacing: -0.04em;
  font-size: 12px;

  /*padding-left: 14.4px; /* отступ блока вопроса */
    padding-left: 84.0px; /* отступ блока вопроса */
 padding-bottom: 14px;              /* ТЕСТ: отступ вниз внутри блока вопроса */
   
}





.input-box {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  background-color: rgba(255, 255, 255, .8);
  border: 2px solid #000;
  border-radius: 25px;
  padding: 20px 20px 59px 20px;

  width: 83%; /* насколько плотно овал прилегает к краям на телефоне */
  max-width: 411px;  /* макс ширина области поля ввода и кнопок */
  box-sizing: border-box;



    opacity: 1;
  transition: opacity 0.4s ease-in-out;

}










.ai-buttons {
  display: flex;
  gap: 8px;
  margin-left: 10px;


  pointer-events: auto; /* Кнопки всегда ловят клики */

  position: absolute;
  bottom:12px;
  right: 12px;
}

.circle {
  width: 28px;
  height: 28px;
  border: 1px solid rgb(199, 197, 197);
  border-radius: 50%;
  background: transparent;

}




/* Поставь тут свой селектор контейнера ответа ИИ вместо .msg.ai */
.msg.ai {
  margin-top: 0px; /* Убираем зазор перед блоком ответа */
  
  
 /*  background: rgba(255, 0, 0, 0.2); /* Подсветка границ блока ответа красным. //_____ */
  
  
  position: relative;
  padding-left: 84px;         /* место под кружок слева */
  min-height: 0px;           /* чтобы кружок не резался на коротких строках */
 margin-bottom: 0.0px; /* было 4.6 */




}

/* Возвращаем отступ только для блока оценки, чтобы кружок не «прыгал» вверх */
.msg.ai:has(.ai-check-num) {
  margin-top: 21.7px;
}


/* Сам кружок процента — по умолчанию красный */
.msg.ai::before {
  content: "";
  position: absolute;
  left: 9.5px;                 /* от левого края контейнера */
  bottom: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid transparent;  
  box-sizing: border-box;
}



.msg.ai .ai-check-num {
  position: absolute;
  left: 16.5px;
  bottom: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
 /* pointer-events: none;*/

 cursor: pointer;     /* делает круг кликабельным */
  z-index: 0;         /* поднимает круг поверх фона и текста, чтобы ловил клик */

outline: 14px solid transparent;
outline-offset: -27px; /* расширенная зона для свайпа */

   user-select: none;           /* запрет выделения текста */
  -webkit-user-select: none;   /* запрет выделения для Safari */
  touch-action: none;          /* запрет системных жестов (скролл/зум) внутри круга */

}



.msg.ai .ai-check-num .score {
  font-family: "Open Sans Local", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -1.3px;
  font-size: 25px;
  line-height: 1;
  transform: translate(var(--num-dx, 0px), var(--num-dy, -10px));

  pointer-events: none; /* цифра перестаёт перехватывать клики, они идут в круг */
}



/* Временный крестик справа-сверху от оценки — без фона, сам крестик чёрный */
.msg.ai .ai-check-num .ai-cross {
  position: absolute;
  top: -3.4px; /* вертикаль */
  right: -4.3px; /* горизонт */
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 2;
}

/* Чёрный крестик внутри */
.msg.ai .ai-check-num .ai-cross::before,
.msg.ai .ai-check-num .ai-cross::after {
  content: "";
  position: absolute;
  width: 7.5px;  /* длина линий */
  height: 1.2px; /* толщина */
  border-radius: 1px;
  background: #000000; /* Чёрный крест */
  top: 50%;
  left: 50%;
  transform-origin: center;
}

.msg.ai .ai-check-num .ai-cross::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.msg.ai .ai-check-num .ai-cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}










.msg.ai .ai-check-num:hover .score {
  animation: bounce 0.45s ease-out 1 forwards;
}


.check-label {
  position: absolute;
  right: 0%;
  --num-dx: 9.9px;
  --num-dy: -18px;
  transform: translate(var(--num-dx), var(--num-dy));

  text-align: right;

}









@keyframes bounce {
  0% {
    transform: translate(var(--num-dx, 0px), var(--num-dy, -10px)) scale(1);
  }
  35% {
    transform: translate(var(--num-dx, 0px), calc(var(--num-dy, -10px) - 42px)) scale(1.12);
  }
  70% {
    transform: translate(var(--num-dx, 0px), calc(var(--num-dy, -10px) + 4px)) scale(0.96);
  }
  100% {
    transform: translate(var(--num-dx, 0px), var(--num-dy, -10px)) scale(1);
  }
}







.score {
  position: relative; /* важно! чтобы процентик цеплялся к цифре */
}

.score::after {
  content: "%";
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 5px;
  position: absolute;  /* <-- заменяем relative на absolute */
  top: 17.5px;           /* регулируй вертикаль (чем больше — ниже) */
  left: -3.5px;          /* регулируй горизонталь (относительно правого края цифры) */
  opacity: 0.9;



  
}


.ai-check-label::after {
 
  font-weight: 700;       /* жирное слово */
}

.ai-check-label {
  position: absolute;
  left: -4px;
  top: 52%;
  font-family: "Open Sans", sans-serif;
  font-size: 7.3px;
  opacity: .99;
  line-height: 1;
  font-weight: 100;
  color: inherit;
  text-align: left;


 white-space: nowrap;     /* ← НЕ переносить */
  overflow: visible;       /* ← НЕ обрезать */
  max-width: none;         /* ← разрешить выходить за круг */


}

/* Цветовая логика на основе класса, который ставит скрипт */
.msg.ai.green .ai-check-num,
.msg.ai.green .score,
.msg.ai.green .ai-check-label {
  color: #1E8E3E; /* зелёный */
}

.msg.ai.red .ai-check-num,
.msg.ai.red .score,
.msg.ai.red .ai-check-label {
  color: #E00000; /* красный */
}

/* зелёный кружок при ≥ 80 % */
.msg.ai.green::before {
 border-color: rgba(30, 142, 62, 0.1); /* зелёный с прозрачностью 40% */
}

/* красный кружок при < 80 % */
.msg.ai.red::before {
border-color: rgba(224, 0, 0, 0.1);   /* красный с прозрачностью 40% */
}



.meta {
  display: inline-block;
  /*окантовка автора/вреени/даты*/
  /*border: 1px solid #f0eeee;*/
  /*border-radius: 4px;*/
  /*padding: 1px 1.5px;*/

  font-size: 9px;
  font-family: "Open Sans", sans-serif;
  color: #444;
  margin-bottom: 6px;
}

.meta .author {
  font-weight: 600;
  margin-right: 6px;
}

.meta .time {
  font-weight: 400;
  color: #9f9f9f;
}

.msg p {
  margin-top: 0px;   /* ← уменьшает расстояние между .meta и текстом */
 margin-bottom: 1.2px !important; /* позиция кружка оценки/чека без пилюль */
}

/* пояснение второго ИИ — плавная анимация по высоте */
.msg.ai.comment {
  height: 0;                         /* изначально скрыт */
  overflow: hidden;                  /* всё за пределами не видно */
  transition: height 0.35s ease;     /* плавная анимация при изменении высоты */

  font-size: 15px;
  font-weight: 400;
  padding-left: 14px;
  font-family: "Gill Sans", sans-serif;
  letter-spacing: -0.3px;
  line-height: 1.05;

   line-height: 1.1;


    margin-top: 10px;     /* ↑ расстояние ОТ оценки (можно отрицательное) */
  margin-bottom: 10px;   /* ↓ расстояние ДО следующего блока */
}



/* 🔳 Верхняя зона приглушения — финальная версия */
.top-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;                 /* высота примерно на одну строку текста/иконку */
background: linear-gradient(to bottom, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 100%);
 /* мягкое приглушение без блюра */
  z-index: 900;
 
  pointer-events: none;         /* чтобы можно было кликать по иконке */



}




/* 🔘 Иконка входа — финальная версия */
.icon-in {
  height: 24px;           /* размер иконки */
  margin-left: 10.0px;      /* отступ от левого края */
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease;

position: fixed;
z-index: 901; /* выше .top-fade (у него 900) */
top: 16px;
left: 6px;


}

.icon-in:hover {
  opacity: 0.6;

  
}
/* 🔳 /Верхняя зона приглушения */




.horizontal-line {
  position: fixed;
  top: 41.5px;
  left: 19px;
  width: calc(100vw - 38px);
  height: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 5;
}

/* --- Меню: выезд --- */



/* активное состояние (когда меню открыто) */
body.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* боковое меню */
.side-menu {
  position: fixed;
  top: 0;
   







  /* выезд меню пиксели ДВА значения должны быть ОДИНАКОВЫ */
  left: -319.9px;
width: 319.9px; 
/* выезд меню пиксели КОНЕЦ */

  height: 100%;
  background: #000;
  color: #fff;
  z-index: 999;
  transition: left 0.4s ease;
  padding: 10px 22px;
  box-sizing: border-box;

display: flex;
flex-direction: column;

}

body.menu-open .side-menu {
  left: 0;
}

/* сдвиг основного интерфейса при открытом меню */

body.menu-open .chat-area,
body.menu-open .top-fade,
body.menu-open .horizontal-line {


  transform: translateX(319.9px); /* на сколько уезжаем вправо область истории (одинаковая цифра с выезом меню) */
  
  








  transition: transform 0.4s ease;
}



/* верхняя зона гаснет вместе с нижней ДО выезда меню */
.top-fade,
.horizontal-line,
.icon-in,
.logo-ai2ai {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}




/* Элементы, которые гаснут ПРИ ОТКРЫТИИ МЕНЮ ИЛИ ВЫХОДЕ */
body.ui-fade .icon-in,
body.ui-fade .top-fade,
body.ui-fade .horizontal-line,
body.ui-fade .logo-ai2ai,
body.ui-fade .input-box,
body.menu-open .input-box, /* Скрываем овал при открытом меню */
body.ui-fade .scroll-down-btn.visible,
body.ui-fade .temp-slider-container {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important; /* ГАРАНТИРУЕТ, что клики не пройдут */
}












/* чтобы фон не прокручивался, когда открыто меню */
body.menu-open {
  overflow: hidden;
}














/* 1 контейнер логирование */
.menu-login-zone {
margin-top: 17.7px; /* ↓ опускает весь блок логина ниже */

  color: #fff;
  font-family: "Inter", sans-serif;
}

.menu-login-title {
    margin-top: .1;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
  margin-bottom: 8px;
}

.menu-input input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 6px 0;
  margin-bottom: 18px;
  font-size: 13px;
  outline: none;
}

.menu-input input::placeholder {
  color: rgba(255,255,255,0.4);
}

.menu-next-btn {
  background: transparent;             /* убираем фон */
  border: 1px solid rgba(255,255,255,0.4);  /* тонкий контур */
  border-radius: 5px;                 /* делает овал */
  color: #fff;
  font-size: 9px;

  padding: 0px 3px;   /* ← этими цифрами регулируются отступы текста */
  /* 6px – вертикальный отступ (высота овала)
     16px – горизонтальный отступ (ширина овала) */

  opacity: 0.6;
  transition: all 0.2s ease;
  cursor: default;

  margin-top: 0px;
  display: block;
  margin-left: auto;
  width: fit-content;
}

.menu-next-btn.active {
  opacity: 1;
  border-color: rgba(255,255,255,0.8); /* подсветка при активном состоянии */
  cursor: pointer;
}


.menu-register-text {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 8px;
}
.menu-register-text span {



  
  opacity: 0.9;
  cursor: pointer;
  text-decoration: underline;
}




/* две кнопки внизу формы регистрации */
.menu-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 6px;
}

.menu-actions .menu-next-btn {
  margin-left: 0;
}








.menu-setting {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Изменено: прижимаем элементы влево */
  gap: 10px;                   /* Добавлено: отступ между переключателем и текстом */
  margin-bottom: 7.7px; /*вертикальное расстояние между переключателями*/
  opacity: 1;
}

/* временно включаем переключатели */
.menu-setting.disabled {
  opacity: 1;           /* делаем активными */
  pointer-events: auto; /* разрешаем клики */
}





/* переключатели */

.toggle {
  order: -1;  /* Добавлено: переносит переключатель в начало строки (левее текста) */
  width: 20.00px;
  height: 14.5px;
  border-radius: 8px;
 /*background: rgba(228, 224, 224, 0.118);*/

 /*border: 1px solid rgba(255, 255, 255, 0.2); */

  /* Цвет рамки (сейчас светло-серый). Регулируй тут: */
 
  position: relative;
  transition: all 0.25s ease;
  box-sizing: border-box;


}


/* Надпись OFF слева от выключенного переключателя */
.toggle::before {
  content: "off";
  position: absolute;
  
  /* --- ПОЛОЖЕНИЕ: регулируй тут --- */
  left: 7px;        /* отступ влево от рамки */
  top: 2.9px;         /* выравнивание по вертикали */
  
  /* --- ШРИФТ И ЦВЕТ: регулируй тут --- */
  font-family: "Inter", sans-serif;
  font-size: 7px;     /* размер букв */
  font-weight: 400;   /* жирность */
    letter-spacing: 0.5px; /* РАССТОЯНИЕ МЕЖДУ БУКВАМИ — регулируй здесь (в пикселях) */
  color: rgba(255, 255, 255, 0.9); /* цвет и прозрачность */
  
  opacity: .6;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Скрываем надпись, когда включено */
.toggle.on::before {
  opacity: 0;
}



.toggle::after {
  content: "";
  position: absolute;
  width: 6.7px;
  height: 6.7px;
  top: 5.7px; /* высотра кружка переключателя*/
  left: -3.9px; /* Положение ВЫКЛ */
  border-radius: 50%;
  /* Цвет кружка перключателя. Сейчас белый: */
  background: #ffffff; 

    opacity: .33;  /* переключатель когда выключен */
  transition: all 0.25s ease;

}

.toggle.on::after {
  left: 10px; /* Положение ВКЛ */
  opacity: .33; /* полная яркость, когда включен */
  background: #0dff00; 
}






.menu-toast {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.menu-toast.show {
  opacity: 1;
}





/* логотип ChatGPT внутри правого кружка */
.circle-chatgpt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
overflow: visible; /* было hidden — из-за этого обрезались */
}




/* логотип Claude внутри левого кружка */
.circle-claude {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
overflow: visible; /* было hidden — из-за этого обрезались */
}



/* кнопки ИИ поверх кружков */
.ai-button {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Удаляем iOS Safari tap-highlight (серую заливку при тапе) только для кружков */
.ai-button, .ai-button img {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}


.ai-button:active {
  transform: scale(0.95);
}


/* Увеличение зоны клика (хитбокс) для пальца */
.ai-button::after {
  content: "";
  position: absolute;
  top: -13px;
  left: -13px;
  right: -13px;
  bottom: -13px;
}



.ai-button img {
  width: 27px;
  height: 27px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.ai-button:hover img {
  opacity: 1;
}










/* --- Анимация появления логотипов ИИ --- */
.ai-buttons .chatgpt-logo,
.ai-buttons .claude-logo {
  opacity: 0;
  transform: scale(0.8);

   
}


/* Когда поле пустое — логотипы скрыты полностью */
.ai-buttons:not(.show-logos) img {
  opacity: 0;
  transform: scale(0);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Когда пользователь вводит текст — логотипы проявляются */
.ai-buttons.show-logos img {
  opacity: 1;
  transform: scale(1);
  transition: transform 0.25s ease, opacity 0.25s ease;
}





.ai-buttons:not(.show-logos) .ai-button {
  pointer-events: auto;
  cursor: pointer;
}





/* Исключение: если на кнопке режим STOP — показываем её даже при кружках */
.ai-buttons:not(.show-logos) .ai-button.is-stop img {
  opacity: 1;
  transform: scale(1);
}

/* И даём по ней клик */
.ai-buttons:not(.show-logos) .ai-button.is-stop {
  pointer-events: auto;
  cursor: pointer;
}






















/* кружки по умолчанию видны */
.ai-buttons .circle {
transition-delay: 30.35s;

  border: 2px solid rgb(230, 230, 230);
   transition: border-color 0s linear 1s, opacity 0s linear 1s; /* появление через 1с, без анимации */

}

/* когда пользователь ввёл текст */
.ai-buttons.show-logos .circle {
  border-color: transparent;


  transition-delay: 0.07s;

  
}

.ai-buttons.show-logos .chatgpt-logo {
  opacity: 1;
  transform: scale(1);
  /*transition-delay: 0.25s; /* логотип появляется чуть позже */
  animation: bounce 0.33s ease-out 0.5; /* стандартная скорость */


}
.ai-buttons.show-logos .circle-chatgpt.ai-button {
  pointer-events: auto;
  cursor: pointer;
}










.ai-buttons.show-logos .claude-logo {
  opacity: 1;
  transform: scale(1);
  /* transition-delay: 0.25s; /* логотип появляется чуть позже */
  animation: bounce 0.2s ease-out 0.45; /* на 40% дольше */


}

.input-box textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;
  background: transparent;
  padding: 0; /* не даём лишних отступов */
  box-sizing: border-box;



/* ОГРАНИЧЕНИЕ 10 СТРОК: 16px (шрифт) * 1.4 (строка) * 10 строк = 224px */
  max-height: 224px; 
  overflow-y: auto;  /* Включаем вертикальный скролл при достижении лимита */
}







/* 🔽 Кнопка прокрутки вниз — ФИКС ДЛЯ СТАРЫХ IPAD */
/* Контейнер-стек для кнопок навигации (всегда над полем ввода) */
.nav-buttons-stack {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 12px;
  display: flex;
flex-direction: column-reverse; /* Стрелка вниз — в основание стека, New — на верхний ярус */
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 1100;
}

/* Общий стиль: кнопки всегда занимают место, меняется только прозрачность */
.nav-stack-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;         /* Всегда Flex, чтобы кнопка не исчезала из разметки */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}

.nav-stack-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Кнопка скролла вниз: строго фиксированный нижний ярус */
.scroll-down-btn {
  border: 1px solid #e0dddd;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  font-size: 15px;
  font-weight: 300;
  line-height: 0;
  padding: 0;
}











/* 🔹 Menu item styling */
.side-menu li {
  font-family: "Inter", "SF Pro Display", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
  border-radius: 6px;
  margin-top: 6px;
  transition: background 0.25s ease, transform 0.15s ease;
}

.side-menu li:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
  cursor: pointer;
}

.side-menu li:active {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(3px);
}

/* Стили для состояния Stop */
.ai-button img.stop-active {
  width: 16px;
  height: 16px;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}


.progress-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 🔹 Строка состояния (левый верхний угол) */
#status-line {
  position: fixed;
  top: var(--status-top, 3px);       /* ← регулируй высоту от верхнего края */
  left: var(--status-left, 22.5px);    /* ← регулируй горизонтальное положение */

  font-family: "Open Sans Local", "Inter", "SF Pro Display", sans-serif;
  font-weight: var(--status-weight, 600);
  font-size: var(--status-size, 8px);   /* ← регулируй размер шрифта */
  letter-spacing: var(--status-spacing, -0.02em);
  color: var(--status-color, #000);     /* ← цвет текста */
  opacity: var(--status-opacity, 0.75); /* ← прозрачность */

  background: var(--status-bg, transparent); /* ← можешь задать цвет подложки */
  padding: var(--status-padding, 0);
  border-radius: var(--status-radius, 0);

  z-index: 2000;
  pointer-events: none; /* не мешает кликам */
  user-select: none;
}



/* === Подсказки под полями логина/пароля === */
.input-hint {
  font-size: 7px;
  line-height: 1.15;
  color: rgba(255, 80, 80, 0.9);
  margin-top: -15px;
  margin-bottom: 8px;
  min-height: 12px;
  font-family: "Inter", sans-serif;
}





/* подпрыгивание активной кнопки Next */
@keyframes menu-bounce-once {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-4px); }
  70%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
.menu-next-btn.bounce-once {
  animation: menu-bounce-once 0.4s ease;
}

/* тряска по клику на неактивную */
@keyframes menu-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
.menu-next-btn.shake {
  animation: menu-shake 0.4s ease;
}
/* === SVG-глаз для поля пароля (привязан к самому полю) === */
.menu-input {
  position: relative; /* чтобы внутри можно было позиционировать глаз */
}

.menu-input .eye-container {
  position: absolute;
  right: 5px;
  bottom: -6px;           /* глазик под линией поля, у правого конца */
  width: 20px;
  height: 18px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  pointer-events: auto;
}



.menu-input .eye-container:hover {
  opacity: 1;
}

.menu-input .eye-icon {
  width: 100%;
  height: 100%;
  display: block;
  /* Убираем color и любые фильтры — цвета заданы прямо в SVG */
}



.menu-bottom-container {
  position: relative;  /* убрать absolute */
  flex: 0 0 auto;      /* высота по содержимому, прижат к низу через поведение меню */
  width: 100%;
  padding-top: 20px;/*отступ переключателей верх*/
  padding-bottom: 20px; /*отступ переключателей от нижнего края*/
  box-sizing: border-box;
 margin-left: -7px;  /*отступ переключателей от левого края*/
}

/* Общие настройки шрифта для всех элементов нижнего (3го) контейнера */
.menu-settings-zone {
  font-family: "Inter", sans-serif;
  font-size: 11.0px;
  color: #fff;
  opacity: 1.0; /* настройки прозрачность всего */
  letter-spacing: 0.4px;
  font-weight: 200;
}




/* === логин: имя пользователя в меню === */
.menu-user-name {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 6px 0;
  margin-bottom: 12px;
  font-size: 13px;
  font-family: "Inter", sans-serif;
}

.menu-loggedin-zone {
 padding-right: 9px; /* === зона логин отступ справа === */
  color: #fff;
  font-family: "Inter", sans-serif;
}




/* === Контейнеры верхний/нижний в боковом меню === */

























/* === CHAT TREE === */








/* Общие шрифты для дерева чатов */
.chat-tree,
.chat-tree-label {
  font-family: "Inter", sans-serif;
  font-size: 15px; /* размер шрифта чатов-папок */
line-height: 1.35;

  color: #fff;

  letter-spacing: 0.3px;
  font-weight: 200;

   white-space: nowrap;     /* Запрещает перенос на новую строку */
   
}


/* 🔳 Средний контейнер между верхом и нижним: единственный вариант */
.menu-middle-container {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  
  margin-top: 7px; /* отступ сверху папок-чатов

  min-height: 0;        /* критично: разрешает контейнеру сжиматься */
  overflow-y: auto;      /* если дерево большое — скроллится ТОЛЬКО середина */

    /* Убирает скролл в Firefox */
 scrollbar-width: none;
}

/* Убирает скролл в Chrome, Safari, Opera */
.menu-middle-container::-webkit-scrollbar {
  display: none;
}

/* Сам столбец чатов/папок */
.chat-tree {
  width: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  box-sizing: border-box;

    margin-left: -5px;
}

/* Одна строка (и папка, и чат, и +) */
.chat-tree-row {
  display: flex;
  align-items: center;
  padding: 2.7px 0;/* расстояние между строками папки чаты первая цифра по высоте */
  cursor: pointer;
}



/* Слот слева под иконку / плюс / пустоту */
.chat-tree-icon-slot {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Иконка папки */
.chat-tree-icon {
  width: 14.5px;           /* увеличили для PNG */
  height: 11.5px;
  opacity: 0.9;
  filter: invert(1);     /* делает иконки белыми */
  display: block;
}


/* Плюсик в сервисных строках */
.chat-tree-plus {
  font-weight: 600;
}





/* === CHAT TREE: базовые стили для подписей чатов === */
/* Делает текст чуть приглушённым и задаёт плавность перехода цвета при активации */
.chat-tree-row.chat-tree-chat .chat-tree-label {

  transition: color 0.2s ease, text-shadow 0.3s ease;
}

/* === CHAT TREE: активный чат === */
/* При клике по чату он получает .active, и текст становится чисто белым со слабым свечением */
.chat-tree-row.chat-tree-chat.active .chat-tree-label {
  color: #fff;

  text-shadow: 0 0 2.1px #fff, 0 0 10px rgba(255, 255, 255, 0.5); /* неон */
}

/* разделитель перед корневыми чатами */
.chat-tree-separator {
  height: 0;
  margin-top: 11.99px;      /* расстояние от последней папки */
  margin-bottom: 11.99px;    /* расстояние до первого корневого чата */
}







/* === Поле ввода при создании нового чата или папки === */
.chat-tree-input {
  width: 80%;
  background: transparent;
  border: none;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  outline: none;
}

.chat-tree-input::placeholder {
  color: rgba(255, 255, 255, 0.7); /* чуть ярче placeholder */
}

/* === Поле ввода при ПЕРЕИМЕНОВАНИИ чата или папки === */
.chat-tree-rename-input {
  width: 80%;
  background: transparent;
  border: none;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  outline: none;

  padding: 0;
  margin: 0;
  text-indent: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}












/* === STATIC MODEL LABELS (LEFT & RIGHT) === */
.ai-model-label {
  position: absolute;
  bottom: 50px;
  font-size: 7.3px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  text-align: center;   /* ← центрируем ТЕКСТ внутри блока */
  min-width: 40px;
}

/* теперь ВСЁ позиционирование — только тут */

/* ЛЕВАЯ надпись — строго по центру ЛЕВОГО кружка */
#ai-label-left {
left: calc(100% - 28px - 28px - 8px + 1.7px);   /* позиция левого кружка */
  transform: translateX(-50%);
}

/* ПРАВАЯ надпись — строго по центру ПРАВОГО кружка */
#ai-label-right {
 left: calc(100% - 12px - 28px/2 - 0.7px);
  transform: translateX(-50%);
}

/* === END STATIC MODEL LABELS === */








/* === приклепление файлов ATTACHMENTS AREA (placeholder only) === */

.input-box {
  display: block;

}

/* ЗОНА ФАЙЛОВ — обычный поток, не сдвигает textarea вправо */
.attachments {
  position: relative;        /* ← НЕ absolute, не ломает layout */
  width: 100%;               /* ← файлы занимают всю ширину */
  display: flex;             /* ← раскладка по строкам */
  flex-wrap: wrap;           /* ← перенос на следующую строку */
  gap: 8px;                  /* ← расстояние между файлами */
  margin-top: 0px;          /* ← расстояние сверху (от верхней границы овала) */
  margin-bottom: 12px;       /* ← расстояние снизу (до textarea) */
  pointer-events: auto;
   gap: 4px;      /* ← горизонтальное и вертикальное расстояние между плашками */
}

.attachments:empty {
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}



/* ОДНА ПЛАШКА ФАЙЛА */
.file-pill {
  display: inline-flex;
align-items: flex-start;


  border: 1px solid rgba(0,0,0,0.45); /* ← рамка */
  border-radius: 4px;                 /* ← скругление */
  background: transparent;

  padding: 0px 2px;   /* ← внутренние отступы: сверху/снизу = 4, слева/справа = 8 */
  font-size: 9px;

  max-width: 150px;   /* ← разрешённая ширина плашки (обрезание текста) */

  overflow: hidden;
  text-overflow: ellipsis;

  font-family: "Open Sans Local", sans-serif;




  
}

/* КРЕСТИК УДАЛЕНИЯ */
.file-pill .remove {
  margin-left: 6px;   /* ← отступ слева от текста файла */
  font-weight: bold;
  cursor: pointer;
  opacity: 0.8;
}











/* Левый блок иконок под полем ввода (скрепка + микрофон +..) */
.icon-row-left {
  position: absolute;      /* прибиваем к углу овала */
  left: 20px;              /* отступ от левого края овала */
  bottom: 17px;            /* отступ от нижнего края овала */
  display: flex;           /* иконки идут в ряд */
  gap: 8px;               /* расстояние между иконками */
  pointer-events: auto;    /* кликабельность */
}

/* сами иконки */
.icon-btn {
  width: 17px;
  height: 17px;
  border: none;
  background-color: transparent;   /* ← убирает серый фон */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
}


/* микрофон */
.mic-btn {
background-image: url("/images/icons/mic.png");

}

/* скрепка */
.attach-btn {
background-image: url("/images/icons/clip.svg");

}






/* --- запись звука интерфейс --- */
#voice-recorder-ui {
  flex: 1;
  display: flex;
  flex-direction: column;
  user-select: none;
  margin-top: -13px; /* Убирает отступ сверху, подтягивая блок к верхнему краю */
}
.recorder-top-row {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 7px;/* --- расстояние вертикаль индикатор уровня и счетчик времени --- */
}
.meter-container {
  position: relative;
  width: 73.1%; /* % длины индикатора уровня записи от поля ввода*/
  height: 25px;/* % вертикальное расстояние от децибелов до микрофона и скрепки*/
}
#volume-meter {
  width: 100%;
  height: 12px; /* Увеличили холст, чтобы было куда "торчать" */
  display: block;
}
.db-scale {
  position: relative; /* База для точного позиционирования меток */
  width: 100%;
  height: 10px;
  margin-top: 0px;/* индикатор уровня и децибеллы расстояние вертикаль */
  font-family: "Inter", sans-serif;
  font-size: 7px;
  color: rgba(0,0,0,0.6);
}
.db-scale span { position: absolute; white-space: nowrap; }

/* РЕГУЛИРУЕМАЯ ПОЛОЖЕНИЯ МЕТОК (крути проценты left) */
.lbl-db { left: 0%; font-weight: 600; }    /* dB теперь прямо под началом полоски */
.lbl-50 { left: 8%; }                      /* -50 прижали ближе к dB */
.lbl-20 { left: 25%; }                     /* Положение можно крутить тут */
.lbl-6  { left: 65%; }                     
.lbl-3  { left: 85%; }                     
.lbl-0  { left: 100%; transform: translateX(-50%); } /* Ноль строго под концом полоски */

/* Over вынесен вправо за пределы нуля */
.over { 
  left: 103%;
  color: #000000; 
  font-weight: 600; 
  opacity: 1.; 
  /* Плавное затухание (тление), когда JS убирает opacity */
  transition: opacity 0.6s ease, text-shadow 0.6s ease; 
}












.input-row {
  width: 100%;
  display: flex;
  flex: 1 1 auto;
}
























/* FILE ATTACHMENTS BELOW MESSAGES */
.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;

  /* ←←← РЕГУЛИРУЕШЬ ВЕРТИКАЛЬНЫЙ ОТСУП ТУТ */
  margin-top: -7px; /* ← если хочешь меньше — ставь 2 или 0; больше — 6 */

  /* ←←← ЭТО ГЛАВНОЕ ВЫРАВНИВАНИЕ ПО ГОРИЗОНТАЛИ */
 margin-left: 84.0px; /* отступ прикрепленных файлов слева
 /*margin-left: 14.4px;*/

  margin-bottom: 0;
}

.message-attachments .file-pill {
  border: 1px solid rgba(0,0,0,0.45);
  border-radius: 4px;
  padding: 0px 2px;
  font-size: 9px;
  max-width: 150px;

  /* ← включаем перенос строки */
  white-space: normal;  
  word-break: break-word;

  overflow: visible;
  text-overflow: unset;

  font-family: "Open Sans Local", sans-serif;
}


/* убираем синее и подчёркивание */
.message-attachments .file-pill .file-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}






/* иконки справа от даты/времени в истории */
.meta-icons {
  display: inline-flex;
  align-items: center;
  margin-left: 5px; /* расстояние справа от прямоугольника */
position: relative;      /* ← важно */
  top: 3px;                /* ← регулируешь вертикаль */
  gap: 0px; /* расстояние между иконками в истории */


}







/* Убираем жёлтый autofill на iOS/Mac Safari */
.menu-input input:-webkit-autofill,
.menu-input input:-webkit-autofill:hover,
.menu-input input:-webkit-autofill:focus,
.menu-input input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #000 inset !important; /* фон = твой чёрный */
    -webkit-text-fill-color: #fff !important;                /* текст белый */
    caret-color: #fff !important;
    transition: background-color 9999s ease-out 0s !important; /* отключает авто-стиль Safari */
}
























/* === MOVE MODE (перенос чата в папку) === */

.chat-tree.move-mode .chat-tree-row {
  opacity: 0.25 !important; /* <--- ДОБАВЛЕНО !important, чтобы перебить скрипт скролла */
  transition: opacity 0.4s ease; /* Добавляем плавность, чтобы было красиво */
}

/* Папки должны быть яркими и кликабельными */
.chat-tree.move-mode .chat-tree-row.chat-tree-folder {
  opacity: 1 !important;
  cursor: pointer;
}

/* “Корневая папка” также яркая и кликабельная */
.chat-tree.move-mode .chat-tree-row.chat-tree-root-dummy {
  opacity: 1 !important;
  cursor: pointer;
}

/* Разделитель между папками и корневой */
.chat-tree-root-separator {
  height: 8px;
}

/* Стиль строки “корневая папка” */
.chat-tree-root-dummy {
  display: flex;
  align-items: center;

}

.chat-tree-root-dummy .chat-tree-label {
  margin-left: 0px;
}









/* 
===========================================
  КОНТЕЙНЕР ДЛЯ ПРЯМОУГОЛЬНИКОВ СО ССЫЛКАМИ
===========================================
*/

.link-pills {
  display: flex;              /* расположение в строку */
  flex-wrap: wrap;            /* перенос на следующую строку при нехватке ширины */

  /* ВНЕШНИЕ ОТСТУПЫ — регулировка расстояния ОТ текста */
  margin-top: 0px;           /* отступ сверху (расстояние между текстом и прямоугольниками) */
  margin-bottom: 0px;         /* отступ снизу — при желании можешь увеличить */

  /* ВНУТРЕННИЕ ОТСТУПЫ вокруг всей группы — обычно 0 */
  padding: 0;

  /* РАССТОЯНИЕ МЕЖДУ ОТДЕЛЬНЫМИ ПРЯМОУГОЛЬНИКАМИ */
  gap: 0px;                   /* расстояние справа-слева и сверху-снизу между «пилюлями» */
row-gap: -30px; column-gap: -30px;
}


/* 
===========================================
   СТИЛЬ ОДНОЙ ССЫЛКИ в истории
===========================================
*/
/* Контейнер для прямоугольников */
.link-pills {
  
  padding-top: 20px;        /* отступ перед блоком пилюль */
  
    display: flex;            /* располагать в строку */
  flex-wrap: wrap;          /* перенос на следующую строку */
  margin-top: -7.1px;          /* расстояние от текста сверху */
  margin-bottom: 2px;       /* расстояние от текста снизу */
  row-gap: 2.5px;             /* расстояние между строками прямоугольников (вертикаль) */
  column-gap: 2.5px;          /* расстояние между прямоугольниками в строке (горизонталь) */

 /*background: rgba(0, 255, 0, 0.3); /* ВРЕМЕННО: Зелёный фон для теста //___ */
}

/* Один прямоугольник-ссылка */
.link-pills .pill {
  background: #000;         /* фон прямоугольника */
  color: #fff;              /* цвет текста */
  text-decoration: none;    /* без подчёркивания */
padding: 0.0px 2.7px 1.9px 2.7px;   /* отступы текст/края прямоугольника */
  border-radius: 4px;       /* скругление углов */
  font-size: 10.7px;          /* было 11.7 размер текста */
  font-weight: 450;         /* жирность */
  line-height: 1.25;        /* плотность строки */
  display: inline-block;    /* компактный прямоугольник */
  cursor: pointer;          /* курсор-рука */
  /*max-width: 110px;         /* МАКСИМАЛЬНАЯ ширина чипсы (регулируешь отсюда!) */
  word-break: break-all;    /* переносить длинные URL внутри прямоугольника */


}

/* Наведение */
.link-pills .pill:hover { 
  background: #222;         /* лёгкое затемнение при наведении */ 
  transition: background 0.15s; 
  
}










/* отображение языка веб */ 
.web-lang-hint {
  position: absolute;
left: 109.2px; /* отсуп по ИКС */ 

  bottom: -2px;
  font-size: 9px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
    font-weight: 200;

  

  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.web-lang-hint:hover {
  color: #ffffff;
  text-shadow: 0 0 4px rgba(255,255,255,0.65);
}




.menu-setting { position: relative; }










/* ===== СЕТКА ВЫБОРА ЯЗЫКОВ (НОРМАЛЬНАЯ, РОВНАЯ, УПРАВЛЯЕМАЯ) ===== */  /* просто заголовок блока для тебя */

/* Контейнер сетки — именно ID, потому что в HTML стоит id="lang-grid" */  /* комментарий, что это стили для контейнера */
#lang-grid {                                  /* выбираем элемент с id="lang-grid" (сам контейнер всех кирпичей) */
  position: fixed;                            /* размещаем контейнер поверх интерфейса (раз вышел из меню) */
  bottom: 0;                                   /* прижимаем контейнер к нижнему краю окна (как было к меню) */
  left: 0;                                     /* прижимаем контейнер к левому краю — совпадает с выездом меню */
  width: 283px;                                /* ограничиваем контейнер шириной меню, чтобы плитки не уходили вправо */
  padding: 19px;                                /* даём внутренний отступ вокруг кирпичей со всех сторон */

  display: flex;                               /* включаем флекс-раскладку для детей (кирпичей) */
  flex-wrap: wrap;                             /* разрешаем перенос кирпичей на следующие строки */
  gap: 2px;                                    /* задаём расстояние между кирпичами по вертикали и горизонтали */

  background: rgba(0,0,0,0);                   /* полностью прозрачный фон контейнера (0 — прозрачность) */
  z-index: 5000;                               /* поднимаем контейнер поверх других элементов по оси Z */
}                                              /* конец правил для #lang-grid */
 /* конец правил для #lang-grid */



/* конец правил для #lang-grid */

/* Один элемент — кирпич языка */             /* комментарий для блока стилей одного кирпича */
.lang-tile {                                  /* выбираем все элементы с классом "lang-tile" (один язык) */
  padding: 2px 2px;                          /* внутренние отступы: сверху/снизу 6px, слева/справа 10px, влияет на размер кирпича */
  border: 1px solid rgba(255,255,255,0.25);   /* тонкая полупрозрачная светлая рамка вокруг кирпича */
  border-radius: 3px;                         /* скругляем углы кирпича на 8px */

  font-size: 15px;                            /* размер текста кода языка внутри кирпича */
  font-weight: 400;
  color: #fff;                                /* цвет текста — белый */
  opacity: 0.7;                               /* лёгкая прозрачность всего кирпича (90% непрозрачности) */

  cursor: pointer;                            /* при наведении курсор меняется на "руку", понятно, что на элемент можно нажать */
  user-select: none;                          /* отключаем выделение текста при тапах/кликах */
  background: rgba(255,255,255,0.05);         /* очень лёгкий светлый фон, чтобы кирпич был заметен на фоне */
}                                             /* конец правил для .lang-tile */

/* Активный выбранный язык */                 /* комментарий: состояние выбранного языка */
.lang-tile.active {                           /* выбираем кирпичи, у которых есть класс "active" (текущий язык) */
  
  background: rgba(208, 208, 208, 0.7);         /* усиливаем фон — более яркий подсвет активного кирпича */
  opacity: 1;     
    color: #000000;                              /* убираем прозрачность, делаем кирпич полностью непрозрачным */
}                                             /* конец правил для .lang-tile.active */

/* === LANG MODE (режим выбора языка для веб-поиска) === */

/* ГЛОБАЛЬНО: когда body получает класс .lang-mode,
   мы приглушаем ВСЁ содержимое бокового меню
   (все прямые дети .side-menu) и отключаем у них клики */
body.lang-mode .side-menu > * {
  opacity: 0.25;          /* меню почти гаснет, но видно, что оно "подложка" */
  pointer-events: none;   /* ничего внутри меню не кликается */
}



/* ИСКЛЮЧЕНИЕ 2: сама сетка языков — полностью активная,
   её НЕ глушим и оставляем кликабельной */
body.lang-mode #lang-grid {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Затемнение всех плиток, кроме активной */
.lang-tile.dimmed {                           /* состояние, когда плитка должна быть затемнена */
  opacity: 0.3;                                /* затемняем на ~70% */
  transition: opacity 0.1s linear;             /* быстрая реакция при включении */
}

/* Полное исчезновение плиток */
.lang-tile.hidden {                            /* класс, который полностью скрывает плитку */
  display: none !important;                    /* резкое исчезновение — как ты просил */
}











/* ==========================================================
   КРЕСТИК СКРЫТИЯ ПОЛЯ ВВОДА
   Он привязан к правому верхнему углу овала .input-box
   ========================================================== */

.input-hide-cross {
  position: absolute;
  /* Смещаем координаты, чтобы центр большой зоны (40px) совпал с углом овала */
  top: -18px;
  right: -18px;

  width: 30px;             /* Физическая зона клика теперь 40px */
  height: 30px;

/* Убирает системную подсветку (темный квадрат) при клике на мобильных устройствах */
  -webkit-tap-highlight-color: transparent;

  cursor: pointer;

  opacity: 1.;
  transition: opacity 0.2s ease;
  
  background: transparent; /* Гарантируем, что зона ловит клики */
  z-index: 10;             /* Поднимаем выше, чтобы ничего не перекрывало */
}

.input-hide-cross::before,
.input-hide-cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 5.9px;             /* длина линий — регулируй */
  height: 1px;           /* толщина линий — регулируй */

  background: #000;        /* цвет линий */
  border-radius: 2px;

  transform-origin: center;
}

.input-hide-cross::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.input-hide-cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.input-hide-cross:hover {
  opacity: .3;              /* ярче при наведении */
}

















/* КНОПКА РАЗВЕРНУТЬ */
.input-expand-full {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  z-index: 11;
}

/* Общая точка привязки для обоих крестиков */
.input-expand-full::before,
.input-expand-full::after {
  content: "";
  position: absolute;
  top: 10px;    /* Положение всей конструкции по вертикали */
  right: 10px;   /* Положение всей конструкции по горизонтали */
}

/* 1. ЖИРНЫЙ КРЕСТИК (Короткий) */
/* .input-expand-full::before {
/*  width: 11.7px;   
/*  height: 11.7px;  
/*  z-index: 2;
/*  background: 
    /* ЛИНИЯ 1 (Горизонтальная жирная): Цвет | X  Y  / Длина Толщина */
/*    linear-gradient(#000, #000) no-repeat 3px 1.7px / 70% 1.7px,
    /* ЛИНИЯ 2 (Вертикальная жирная):   Цвет | X  Y  / Толщина Длина */
/*    linear-gradient(#000, #000) no-repeat 8.7px 1.0px / 1.7px 70%;
 /*     opacity: 0.1;
  
/* }

/* 2. ТОНКИЙ КРЕСТИК (Длинный) */
.input-expand-full::after {
  width: 9px;  
  height: 9px; 
  z-index: 1;
  margin-top: -2px;
  margin-right: -2px;
  background: 
    /* ЛИНИЯ 3 (Горизонтальная тонкая): Цвет | X  Y  / Длина Толщина */
    linear-gradient(#000, #000) no-repeat -3px 3px / 100% 1.3px,
    /* ЛИНИЯ 4 (Вертикальная тонкая):   Цвет | X  Y  / Толщина Длина */
    linear-gradient(#000, #000) no-repeat 5px 3px / 1.3px 100%;
    
}

/* Эффект при наведении */
.input-expand-full:hover {
  opacity: 0.3;

}























/* === МГНОВЕННОЕ ИСЧЕЗНОВЕНИЕ КРУЖКА (рамки) === */
.ai-button.instant-hide {
  transition: none !important;             /* отключаем задержки */
  border-color: transparent !important;    /* гасим сам кружок */
  background: transparent !important;      /* защита от заливки */
}









/* дрожание папок и чатов в режиме гостя */
@keyframes shake-red {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.guest-shake {
  animation: shake-red 0.32s ease;
  background-color: rgba(255, 60, 60, 0.18); /* мягкое красное облачко */

  /* <<< самое главное — перекрасить текст и плюс >>> */
  color: #ff3c3c !important;
}

/* перекрашиваем плюсик тоже */
.guest-shake .chat-tree-plus {
  color: #ff3c3c !important;
}

/* перекрашиваем сам текст надписи */
.guest-shake .chat-tree-label {
  color: #ff3c3c !important;
}







/* === Гость: тумблеры при клике === */
.menu-setting.guest-shake span {
  color: #ff3c3c !important;
}

.menu-setting.guest-shake {
  background-color: transparent !important;
}







/* В режиме записи убираем иконку микрофона и подготавливаем место под стоп-квадрат */
.mic-btn.recording { 
  background-image: none !important; 
  display: flex;
  align-items: center;
  justify-content: center;
}




/* === КРАСНОЕ ДРОЖАНИЕ МИКРОФОНА === */
.mic-btn.shake {
  animation: shake-red 0.22s ease;  /* ← СКОРОСТЬ И ПЛАВНОСТЬ ДРОЖАНИЯ */

  /* ← ПЕРЕКРАШИВАЕМ ИКОНКУ В КРАСНЫЙ (#ff3c3c) */

filter:
  invert(1)
  sepia(1)
  saturate(3500%)
  brightness(0.11)



}


/* === КРАСНОЕ ДРОЖАНИЕ СКРЕПКИ === */
.attach-btn.shake {
  animation: shake-red 0.22s ease;

filter:
  invert(1)
  sepia(1)
  saturate(3500%)
  brightness(0.11)
}















/* === курсор для логов === */
.cursor {
  display: inline-block;
  width: 7px;
  height: 10px;
  margin-left: 3px;
  vertical-align: middle;
  background: black;
}

/* мигающий режим (когда НЕ печатаем) */
.cursor.blinking {
  animation: cursorBlink 0.7s steps(1) infinite;
}

/* немигающий режим (когда печатаем) */
.cursor.typing {
  animation: none;
  opacity: 1;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}





/* === ЛОГ-КОНТЕЙНЕР: фиксированная высота и скролл === */
.log-box_inside {


  max-height: 177px;   /* подбери: 120–180px оптимально */
  overflow-y: auto;    /* внутренний скролл */
  padding-right: 6px;  /* чтобы текст не прилипал */

  /* скрываем скроллбар везде */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */

    word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;



}

.log-box_inside::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari/iOS */
}












/* =======================
   BOOKMARK (FIXED RAIL + OLD ARROW STYLE)
   ======================= */

/* фиксированный прозрачный контейнер справа */
.chat-bookmark-rail {
  position: fixed;
  top: 0;
  right: 0;
  width: 20px;
  height: 100vh;
  background: transparent;
  pointer-events: none;
  z-index: 1; /* ниже всего UI */
}

/* контейнер маркера (как раньше, но внутри rail) */
.chat-bookmark {
  position: absolute;
  right: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* СТАРЫЙ треугольничек — ВНЕШНИЙ ВИД НЕ МЕНЯЛСЯ */
.chat-bookmark-arrow {
  position: absolute;
  top: var(--bm-arrow-top, -5.9px);
  right: var(--bm-arrow-right, 12.9px); /* горизонтальное положение маркера закладки */

  width: 0;
  height: 0;

  border-top: var(--bm-arrow-size, 4.3px) solid transparent;
  border-bottom: var(--bm-arrow-size, 4.3px) solid transparent;
  border-right: var(--bm-arrow-size, 10px) solid #000;
}

















/* === потрясти текст в поле ввода === */
/* === RED SHAKE FOR INPUT TEXTAREA === */
@keyframes textarea-shake-red {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-7px); }
  40%  { transform: translateX(5px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}
.input-box textarea.shake-red {
  animation: textarea-shake-red 0.25s ease;
  color: #ff3c3c !important;
}






/* === символ % в прогрессоре меньше цифры === */
.percent-sign {
  font-size: 0.65em;
  vertical-align: baseline;
  position: relative;
  top: 0.00em;
  opacity: 0.4;
}

.percent-num {
  font-size: 1em;
  vertical-align: baseline;
}













/* --- РЕГУЛЯТОР ТЕМПЕРАТУРЫ (VISUAL) --- */
.temp-slider-container {
  position: absolute;
  bottom: 80px; /* Высота над кнопкой */
  width: 60px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
  pointer-events: all;
  opacity: 0;
 
  transition: opacity 0.4s ease; 
}

.temp-slider-container.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Синхронное погашение датчика вместе с полем ввода и кнопкой меню */



/* Вертикальная шкала с наконечниками */
.temp-track {
  position: absolute;
  width: 1.7px;
  height: 150px;
  background: black;
  bottom: 30px;
}





/* Общие стили для наконечников (верхний и нижний) */
.temp-track::before,
.temp-track::after {
  content: "";
  position: absolute;
  width: 7px;      /* Ширина наконечника */
  height: 1.3px;    /* Толщина */
  background: black;
  left: -2.15px;    /* Центрирование: (12px - 1.7px) / 2 */
}

/* Позиция верхнего наконечника */
.temp-track::before {
  top: 0;
}

/* Позиция нижнего наконечника */
.temp-track::after {
  bottom: 0;
}

/* Ползунок (горизонтальная черта) */
.temp-thumb {
  position: absolute;
  width: 15px;
  height: 5px;
  background: black;
  left: -7px;
  cursor: ns-resize;

}

/* Числовое значение (справа от ползунка) */
.temp-value {
  position: absolute;
  left: 21px;
  top: -5px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: black;
}

/* Подпись "temperature" внизу */
.temp-label {
  position: absolute;
  bottom: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 9.0px;
  font-weight: 400;
  color: black;
  text-transform: lowercase;

}









/* === ЛЕТАЮЩАЯ СТРЕЛКА АКТИВНОГО ЧАТА === */
#active-chat-arrow {
  position: absolute;
  top: 0;
  
  /* --- НАСТРОЙКИ ПОЗИЦИИ (ПИКСЕЛИ) --- */
  left: 5.1px;   /* Отступ от левого края экрана. 0 = прижат к краю */

  /* --- НАСТРОЙКИ РАЗМЕРА --- */
  width: 0;
  height: 0;

 /* --- ВЕРТИКАЛЬНАЯ КОРРЕКЦИЯ --- */
  margin-top: 0.9px;  /* Меняй это число. Сейчас 1px вниз */

  /* Высота стрелки (верхняя + нижняя граница) */
  border-top: 3.7px solid transparent;    
  border-bottom: 3.7px solid transparent; 
  /* Длина и цвет стрелки */
  border-left: 17px solid #ffffff;           

  z-index: 2000;
  pointer-events: none;
  opacity: 0; /* Скрыта по умолчанию */

  /* --- НАСТРОЙКИ ПЛАВНОСТИ (ИНЕРЦИЯ) --- */
  /* cubic-bezier дает эффект "разгона" и торможения */
  transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.2s ease;
}









/* ============================================================
   НОВОЕ МЕНЮ ДЕЙСТВИЙ чатов/папок (MORE / ACTIONS)
   ============================================================ */

/* 1. Ссылка "More" ( Moor ) - привязана к тексту */
.chat-tree-more {
  font-size: 9px;           
  font-weight: 200;         
  color: rgba(255,255,255,0.6); 
  cursor: pointer;
  opacity: 0;               
  transition: opacity 0.2s ease;
  padding: 0px 5px;
  
  position: relative;       
  margin-left: 11px;        /* Х —  пикселей вправо от названия */
  top: 5px;                 /* Y — сдвиг вниз (как у языка) */
  flex-shrink: 0;           
}

.chat-tree-row.active .chat-tree-more {
  opacity: 1;
}

.chat-tree-more:hover {
  color: #fff;
}

/* 2. Контейнер меню (ТЕПЕРЬ ПОВЕРХ СПИСКА) */
.chat-tree-actions-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: absolute;        /* Всплывает над списком, не раздвигая его */
  z-index: 1000;             /* Чтобы было выше всех приглушенных букв */
  pointer-events: auto;
  
  /* --- РЕГУЛИРОВКА XY --- */
  /* Сдвигаем чуть ниже, чтобы меню не перекрывало само название текущего чата */
  transform: translate(22px, 10px); 
}

/* Сами пункты меню (Rename, Move, Delete) */
.chat-action-item {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
  width: fit-content;        /* Чтобы область клика была только по ширине слова */
}

.chat-action-item:hover {
  color: #ffffff; 
}

.chat-action-item.delete:hover {
  color: #ffffff;
}

/* 3. Режим приглушения окружения (Focus Mode) */
.chat-tree.focus-mode .chat-tree-row:not(.active) {
  opacity: 0.15 !important; 
  
}

/* пункты выбора действий вверх если нет места снизу */
.chat-tree-actions-menu.upwards {
  /* -100% — это вся высота меню. -5px — небольшой зазор над чатом */
  transform: translate(22px, calc(-100% - 37px)) !important; 
}











/* локальный прозрачный щит для отмены режима вызова действий в среднем контейнере чатов папок */
.menu-middle-container {
  position: relative; /* Чтобы оверлей позиционировался внутри него */
}

.chat-tree-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* Невидимый, но ловит клики */
  z-index: 999; /* Выше чатов, но ниже кнопок меню */
  pointer-events: auto;
}

.chat-tree-actions-menu {
  z-index: 1000 !important; /* Должен быть выше оверлея */
}

.chat-tree-actions-menu.upwards {
  transform: translate(4px, -55px); 
}

/* Поле ввода промпта внутри меню действий */
.chat-tree-prompt-input {
  background: transparent;
  border: none !important;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  outline: none;
  width: 190px;
  margin-left: 5px;
  padding: 0;



 

  
  /* Специфично для многострочного режима */
vertical-align: top;
  margin-top: 1px;        /* Опускаем текст чуть-чуть для центровки */
  margin-bottom: -15px;   /* Агрессивно подтягиваем инфо-строку вверх */
  line-height: 12px;      /* Фиксируем высоту строки ровно в размер шрифта */

  resize: none;           /* Убираем уголок изменения размера */
  overflow: hidden;       /* Прячем скроллбары */
  line-height: 1.0;
  display: inline-block;
}

.chat-tree-prompt-input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}







/* анимация кнопки more у температуры */
@keyframes moreBounce {
  0% { transform: translateY(0); color: rgba(0,0,0,0.5); font-weight: 200; }
  35% { transform: translateY(-30px) scale(1.1); color: #000; font-weight: 700; }
  70% { transform: translateY(7px) scale(0.95); color: #000; font-weight: 200; }
  100% { transform: translateY(0) scale(1); color: rgba(0,0,0,0.5); font-weight: 200; }
}
.more-anim {
  animation: moreBounce 0.45s ease-out forwards;
}








/* --- переключатери в расширенных настройках ai --- */
/* --- FIXED ADVANCED TOGGLES (One under another) --- */
/* --- НЕЗАВИСИМЫЕ ПЕРЕКЛЮЧАТЕЛИ В РАСШИРЕННЫХ НАСТРОЙКАХ (Черные) --- */
.advanced-fixed-controls {
  position: fixed;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: auto;
  align-items: flex-end; 
}

.adv-fixed-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  cursor: pointer;
  width: 100%;
}

.adv-fixed-label {
  font-family: 'Inter', sans-serif;
  font-size: 11.0px;
  font-weight: 400;
  color: #000;
  text-transform: lowercase;
  text-align: right;
  white-space: nowrap;
}

/* ОСНОВА ПЕРЕКЛЮЧАТЕЛЯ (Рамка) */
.adv-toggle {
  width: 20.00px;
  height: 14.5px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 1.0); /* Черная рамка */
  background: transparent;
  position: relative;
  transition: all 0.25s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* КРУЖОК (ВНУТРИ) */
.adv-toggle::after {
  content: "";
  position: absolute;
  width: 6.7px;
  height: 6.7px;
  top: 2.9px; /* Центрирование по вертикали для рамки 1px */
  left: 2.9px; /* Положение ВЫКЛ */
  border-radius: 50%;
  background: #000000a5; /* Черный полупрозрачный (ВЫКЛ) */
  transition: all 0.25s ease;
}

/* СОСТОЯНИЕ ВКЛ (Смещение и цвет) */
.adv-toggle.on::after {
  left: 9.5px; /* Положение ВКЛ */
  background: #000000; /* Чисто черный (ВКЛ) */
}















/* --- Инфо-блок модели в расширенных настройках --- */
.adv-model-info {
  width: 100%;
  margin-bottom: 12px;
  text-align: right;
  font-family: 'Inter', sans-serif;
  pointer-events: none;


}

.adv-info-name {
  font-size: 13px;
  font-weight: 500;
  color: #000;
  letter-spacing: 0.1px;
  margin-bottom: 4px;
}

.adv-info-meta {
  font-size: 9px;
  line-height: 1.3;
  font-weight: 400;
  color: rgba(0, 0, 0, 1.0);
  text-transform: lowercase;

  white-space: nowrap;
}












/* ============================================================
   ПОЛНОЭКРАННЫЙ РЕЖИМ РЕДАКТИРОВАНИЯ (КЛАСС НА BODY)
   ============================================================ */

/* Скрываем всё лишнее */
body.full-screen-mode .icon-in,
body.full-screen-mode .top-fade,
body.full-screen-mode .chat-area,
body.full-screen-mode .scroll-down-btn,
body.full-screen-mode .input-hide-cross,
body.full-screen-mode .input-expand-full,


body.full-screen-mode .icon-row-left,
body.full-screen-mode .attachments,
body.full-screen-mode .ai-model-label,
body.full-screen-mode .ai-buttons {

  display: none !important;

  
}

body.full-screen-mode .input-box {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important; /* Динамическая высота: сжимается при появлении клавиатуры */
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 55px 15px 15px 15px !important; /* Отступы, чтобы текст не лез на крестик и края */

  z-index: 4000 !important;
  transform: none !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Текст на весь экран — заставляем поле заполнить всё пространство и разрешаем скролл */
body.full-screen-mode .input-box textarea {
  flex: 1 !important;
  height: 100% !important;
  max-height: 100% !important;
  font-size: 18px !important;
  overflow-y: auto !important;
}

/* Кнопка выхода (Крестик справа вверху) */
.input-full-exit {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 4001;
  opacity: 1.;
}

body.full-screen-mode .input-full-exit {
  display: block;
}

.input-full-exit::before, .input-full-exit::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2px; /* крестик закрытия полноэкранного режима */
  background: #000;
}
.input-full-exit::before { transform: translate(-50%, -50%) rotate(45deg); }
.input-full-exit::after { transform: translate(-50%, -50%) rotate(-45deg); }







/* Анимация мигания времени при обработке голоса */
.processing-blink {
  animation: processingFade 1.7s steps(1) infinite;
  color: #000;
  font-weight: 600;
}

@keyframes processingFade {
  0% { opacity: 1; }
  50% { opacity: 0; } /* На середине цикла текст резко исчезает */
}





















/* Универсальный таймер (правый верхний угол) */
#timer-line {
  position: fixed;
  top: var(--status-top, 3px);
  left: var(--status-left, 22.5px); /* Перенос в левый угол по аналогии с setStatus */
  font-family: "Open Sans Local", "Inter", "SF Pro Display", sans-serif;
  font-weight: 600;
  font-size: 8px;
  letter-spacing: -0.02em;
  color: var(--status-color, #000);

  z-index: 2000;
  pointer-events: none;
  user-select: none;
}
/* Чистое мигание только для таймера (без смены шрифта и прозрачности) */
#timer-line.timer-done {
  animation: timerFade 1.7s steps(1) infinite;
}
@keyframes timerFade { 0% { opacity: 0.75; } 50% { opacity: 0; } }


/* Кнопка отмены внутри таймера (полное наследование стиля счетчика) */
.timer-cancel-btn {
  margin-left: 2.3px; /* Отступ слева, так как кнопка теперь будет после цифр */
    font-size: 8px;
  cursor: pointer;
  pointer-events: auto;
   font-weight: 600;
}








/* [FIX] Изоляция кнопки альтернативы внутри вопроса */
.msg.user .msg.ai.manual-check {
  position: absolute; /* Выключаем кнопку из потока текста */
  left: 0;
  top: 0;
  bottom: 0;
  width: 84px;        /* Ограничиваем зону кнопки "коридором" слева */
  padding: 0 !important; /* Убираем ебаный отступ 84px, который всё ломал */
  margin: 0 !important;
  background: none !important;
  pointer-events: none; /* Чтобы контейнер не мешал кликать по тексту */
}

/* Сам кружок внутри вопроса — привязка к верхней части (к мета-данным) */
.msg.user .ai-check-num {
  position: absolute;
  left: 14px;
  top: -.77px;          /* Фиксируем сверху, чтобы не зависеть от количества строк */
  pointer-events: auto;
}

/* Тонкий шрифт для Alternative */
.is-other-btn .check-label {
  font-family: "Gill Sans", sans-serif !important;
  font-weight: 100 !important;
  font-size: 13px !important;
  letter-spacing: -0.17px !important;
  opacity: 1;
  white-space: nowrap;
}







/* Новая кнопка New */
.new-msg-btn {
  background: #000;      /* Полностью черный непрозрачный фон */
  color: #fff;           /* Белый текст */
   /* padding-bottom: 2.2px;   /* Компенсация смещения шрифта вверх для iPhone */
  font-family: 'Inter', sans-serif;
  font-size: 8px;        /* Маленькие английские буквы */
  font-weight: 400;
  text-transform: lowercase;
 box-shadow: 0 0 0 .7px rgba(255, 255, 255, 1); /* Белая окантовка толщиной 1px */


     /* Белый неон: */
    text-shadow: 0 0 .9px rgba(255,255,255,1), 0 0 .9px rgba(255,255,255,1);
}

/* Специальная компенсация по высоте ТОЛЬКО для iOS (iPhone/iPad) */
@supports (-webkit-touch-callout: none) {
  .new-msg-btn {
    padding-bottom: 2.2px; 
  }
}