User: <div id="popup2" class="overlay">
	<div class="popupdel">
		<a class="close" href="#">&times;</a>
		<div class="subtitle">Чат будет удален!</div>
		<div class="edit-button-cont">
			<button type="text" class="delete-button">Удалить</button>
			<a href="#">
				<button type="text" class="cancel-button">Отменить</button>
			</a>
		</div>
	</div>
</div>

при ширине экрана от 767 дл 1023 кнопка Отменить расположена чуть ниже кнопки Удалить

body {
    font-family: Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;
    line-height: 1.5;
    font-weight: 400;
    color-scheme: light dark;
    color: #ffffffde;
    background-color: #242424;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%
}

* {
    box-sizing: border-box
}

*::-webkit-scrollbar {
    width: 1px;
	height: 9px;
}

/* Стили для "ползунка" полосы прокрутки */
::-webkit-scrollbar-thumb {
    background-color: #555; /* Цвет ползунка */
    border-radius: 6px; /* Закругление углов ползунка */
}

.dropdown-select::-webkit-scrollbar-track {
    background: #444444; /* Цвет фона полосы прокрутки */
}

/* Скрываем полосу прокрутки */
.input textarea[data-v-152c7950]::-webkit-scrollbar {
    display: none; /* Для браузеров на основе WebKit (Chrome, Safari) */
}

.input textarea[data-v-152c7950] {
    scrollbar-width: none; /* Для Firefox */
}

p {
    margin: 0;
    padding: 0
}

textarea {
    color: #fff
}

a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit
}

a:hover {
    color: #535bf2
}

body {
    margin: 0;
    display: flex
}

/*.tabsButtons[data-v-f807152d] {
    display: flex;
    align-items: center;
    height: 40px
}

.tabsButtons.open[data-v-f807152d] {
    justify-content: space-between
}
.tabsButtons .button[data-v-f807152d] {
    border-radius: .5rem;
    display: flex;
    padding-left: .5rem;
    padding-right: .5rem;
    height: 2.5rem;
    justify-content: center;
    align-items: center
}


.tabsButtons .button[data-v-f807152d]:hover {
    cursor: pointer;
    background: #2f2f2f
}

.tabsButtons .button .icon[data-v-f807152d] {
    flex-shrink: 0;
    height: 24px;
    width: 24px
}

.tabsButtons .selector[data-v-f807152d] {
    display: flex;
    position: relative
}

.tabsButtons .selector .name[data-v-f807152d] {
    margin-left: 10px;
    display: flex;
    font-weight: 700;
    align-items: center;
    cursor: pointer
}

.tabsButtons .selector .list[data-v-f807152d] {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 300px;
    z-index: 1;
    overflow-y: auto;
    max-height: 300px;
    border-radius: 5px
}

.tabsButtons .selector .list .item[data-v-f807152d] {
    padding: 5px
}

.tabsButtons .selector .list .item[data-v-f807152d]:hover {
    cursor: pointer;
    background: #2f2f2f
}*/
/*
.chat[data-v-7f9493dd] {
    background: #212121;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden
}

.chat .messages[data-v-7f9493dd] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
    display: flex;
    flex-direction: column
}

.chat .messages .container[data-v-7f9493dd] {
    display: flex;
    flex-direction: column;
    width: 100%
}

.chat .messages .container.user .message[data-v-7f9493dd] {
    color: #fff;
    margin-left: auto;
    background: #2f2f2f
}

.chat .messages .container.assistant .message[data-v-7f9493dd] {
    margin-right: auto
}

.chat .messages .container .message[data-v-7f9493dd] {
    max-width: 70%;
    padding: .625rem 1.25rem;
    margin: 10px;
    border-radius: 1.5rem
}

.chat .messages .container .menu[data-v-7f9493dd] {
    padding-left: .625rem;
    margin-top: -20px;
    margin-left: 10px;
    display: flex;
    align-items: center
}

.chat .messages .container .menu .button[data-v-7f9493dd] {
    width: 30px;
    height: 30px;
    border-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.chat .messages .container .menu .button[data-v-7f9493dd]:hover {
    cursor: pointer;
    background: #2f2f2f
}

.chat .messages .container .menu .button .icon[data-v-7f9493dd] {
    flex-shrink: 0;
    height: 18px;
    width: 18px
}

.chat .messages .container .menu .model[data-v-7f9493dd] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    padding-left: 11px;
    padding-bottom: 5px;
    color: gray
}

.info[data-v-7f9493dd] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: gray
}*/



.tabsMenu[data-v-927731f4] {
    display: flex;
    flex-direction: column;
    background: #171717;
    width: 250px;
    min-width: 250px;
	position: relative;
}

.tabsMenu .tabs[data-v-927731f4] {
    overflow-y: auto;
    overflow-x: hidden;
    
	flex: 1; /* Позволяет табам занимать оставшееся пространство */
	max-height: 430px; /* Установите максимальную высоту контейнера */
	scrollbar-width: none; /* Для Firefox (скрыть полосу прокрутки) */
	
    border-bottom: 2px solid #555555; /* Нижняя граница */
}

.tabsMenu .tabs .tab[data-v-927731f4] {
    padding: 7px;
    border-radius: 5px;
    margin: 3px;
    display: flex;
    align-items: center;
    
    flex-wrap: nowrap;
	overflow: hidden;  /* Скрытие переполненной части */
	height: 44px;
}

.tabsMenu .tabs .tab .name[data-v-927731f4] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
	max-width: calc(100% - 30px); /* Установите максимальную ширину для текста, учитывая размеры кнопок */
	/*display: block;*/
	align-items: center;
}

/* Контейнер для кнопок */
.tabsMenu .tabs .tab .edit-delete {
    display: none; /* Flex контейнер для кнопок */
    align-items: center; /* Центрирование кнопок по вертикали */
}

/* Показываем кнопки при наведении на таб */
.tabsMenu .tabs .tab:hover .edit-delete {
	display: flex;
}

.tabsMenu .tabs .tab .remove[data-v-927731f4] {
    color: #c43c3a;
    opacity: 1;
	padding-left: 10px;
	cursor: pointer
}

.tabsMenu .tabs .tab .edit[data-v-927731f4] {
    color: #c43c3a;
    opacity: 1;
	padding-left: 10px;
	cursor: pointer
}

/*.tabsMenu .tabs .tab .remove[data-v-927731f4]:hover {
    color: #cd4442;
    cursor: pointer
}

.tabsMenu .tabs .tab .edit[data-v-927731f4]:hover {
    color: #cd4442;
    cursor: pointer
}*/

.tabsMenu .tabs .tab.active[data-v-927731f4] {
    background: #2f2f2f
}

/*.tabsMenu .tabs .tab:hover .remove[data-v-927731f4] {
    opacity: 1
}

.tabsMenu .tabs .tab:hover .edit[data-v-927731f4] {
    opacity: 1
}*/

.tabsMenu .tabs .tab[data-v-927731f4]:hover:not(.active) {
    background: #212121;
    cursor: pointer
}

.chat_gpt[data-v-5d826495] {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
    overflow: hidden
}

.chat_gpt .container[data-v-5d826495] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
	min-width: 250px;
}

/*======================== МОИ СТИЛИ ================================*/
/*
.chat .messages .container .menu .answerbutton[data-v-7f9493dd] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    padding-left: 3px;
    color: gray;
}

.chat .messages .container .menu .answerbutton[data-v-7f9493dd]:hover {
    color: white;
	cursor: pointer;
}


.chat .messages .container.user .quesbutton[data-v-7f9493dd] {
    color: #fff;
    margin-left: auto;
	font-size: .875rem;
	color: gray;
}

.chat .messages .container.user .quesbutton[data-v-7f9493dd]:hover {
    color: white;
	cursor: pointer;
}


.chat .messages .container.user .quesmenu[data-v-7f9493dd] {
    margin-left: auto;
}

.chat .messages .container .quesmenu[data-v-7f9493dd] {
    max-width: 70%;
	margin-top: 0px; 
	margin-right: 10px;
	margin-bottom: 10px;
}

.tabsButtonspanel[data-v-f807152d] {
	border-radius: 15px;
	width: 90%;
    position: absolute;
    bottom: 100px;
	/*background: #2f2f2f;*/
/*}

.tabsButtonspanel .button[data-v-f807152d] {
    display: flex;
    padding-left: .5rem;
    padding-right: .5rem;
    height: 2.5rem;
    justify-content: center;
    align-items: center
}

.messbuettons[data-v-152c7950] {
    display: flex;
    background: #2f2f2f;
    margin: 10px;
    border-radius: 15px
}

.messbuttons[data-v-7f9493dd] {
    background: #212121;
    display: flex;
	margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: -10px;
}

.mainchatPanel{
    /*display: flex;
    flex-direction: column;
	position: relative;*/
/*    background: #171717;
    width: 260px;
    min-width: 260px;
    height: 100%;
	display: flex;
}

.mainchatarea {
	display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
}*/


/*======================== МОИ СТИЛИ КОНЕЦ ================================*/


/*Список моделей*/
/*
.dropdowncontainer {
  text-align: center;
}

.dropdowncontainer > .dropdown {
  margin: 0 20px;
  vertical-align: top;
  width: 170px;
}

.dropdown {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 28px;
  width: 150px;
  background: #f2f2f2;
  border: 1px solid;
  border-color: white #f7f7f7 whitesmoke;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.dropdown:before, .dropdown:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px dashed;
  border-color: #888888 transparent;
  pointer-events: none;
}

.dropdown:before {
  border-bottom-style: solid;
  border-top: none;
}

.dropdown:after {
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}

.dropdown-select {
  position: relative;
  width: 130%;
  margin: 0;
  padding: 6px 8px 7px 10px;
  height: 28px;
  line-height: 14px;
  font-size: 14px;
  font-weight: bold;
  color: #62717a;
  text-shadow: 0 1px white;
  background: #f2f2f2; /* Fallback for IE 8 */
/*  background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
/*  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

.dropdown-select:focus {
  z-index: 3;
  width: 100%;
  color: #394349;
  outline: 2px solid #49aff2;
  outline: 2px solid -webkit-focus-ring-color;
  outline-offset: -2px;
}

.dropdown-select > option {
  margin: 3px;
  padding: 6px 8px;
  text-shadow: none;
  background: #f2f2f2;
  border-radius: 3px;
  cursor: pointer;
}

/* Fix for IE 8 putting the arrows behind the select element. */

/*.lt-ie9 .dropdown {
  z-index: 1;
}

.lt-ie9 .dropdown-select {
  z-index: -1;
}

.lt-ie9 .dropdown-select:focus {
  z-index: 3;
}

/* Dirty fix for Firefox adding padding where it shouldn't. */
/*
@-moz-document url-prefix() {
  .dropdown-select {
    padding-left: 6px;
  }
}

.dropdown-dark {
  background: #444;
  border-color: #111111 #0a0a0a black;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.dropdown-dark:before {
  border-bottom-color: #aaa;
}

.dropdown-dark:after {
  border-top-color: #aaa;
}

.dropdown-dark .dropdown-select {
  color: #aaa;
  text-shadow: 0 1px black;
  background: #444;  /* Fallback for IE 8 */
/*}

.dropdown-dark .dropdown-select:focus {
  color: #ccc;
}

.dropdown-dark .dropdown-select > option {
  background: #444;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
}
*/
=======
body {
    font-family: Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;
    line-height: 1.5;
    font-weight: 400;
    color-scheme: light dark;
    color: #ffffffde;
    background-color: #242424;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%
}

* {
    box-sizing: border-box
}

*::-webkit-scrollbar {
    width: 8px
}

p {
    margin: 0;
    padding: 0
}

textarea {
    color: #fff
}

a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit
}

a:hover {
    color: #535bf2
}

body {
    margin: 0;
    display: flex
}

.tabsButtons[data-v-f807152d] {
    display: flex;
	justify-content: flex-end;
    align-items: center;
    height: 25px;
	margin-top: 11px;
	margin-bottom: 6px;
}

/*.tabsButtons.open[data-v-f807152d] {
    justify-content: space-between;
	margin-left: auto;
}*/

.tabsButtons .button[data-v-f807152d] {
    border-radius: .5rem;
    display: flex;
    padding-left: .5rem;
    padding-right: .5rem;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
	margin-right: 3px;
}

.tabsButtons .button[data-v-f807152d]:hover {
    cursor: pointer;
    background: #2f2f2f
}

/*.tabsButtons .button .icon[data-v-f807152d] {
    flex-shrink: 0;
    height: 24px;
    width: 24px
}

.tabsButtons .selector[data-v-f807152d] {
    display: flex;
    position: relative
}

.tabsButtons .selector .name[data-v-f807152d] {
    margin-left: 10px;
    display: flex;
    font-weight: 700;
    align-items: center;
    cursor: pointer
}

.tabsButtons .selector .list[data-v-f807152d] {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 300px;
    z-index: 1;
    overflow-y: auto;
    max-height: 300px;
    border-radius: 5px
}

.tabsButtons .selector .list .item[data-v-f807152d] {
    padding: 5px
}

.tabsButtons .selector .list .item[data-v-f807152d]:hover {
    cursor: pointer;
    background: #2f2f2f
}*/

.chat[data-v-7f9493dd] {
    background: #212121;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden
}

.chat .messages[data-v-7f9493dd] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
    display: flex;
    flex-direction: column;
	padding: 5px;
	border-top: 2px solid #555555; /* Верхняя граница */
}

.chat .messages .container[data-v-7f9493dd] {
    display: flex;
    flex-direction: column;
    width: 100%
}

.chat .messages .container.user .message[data-v-7f9493dd] {
    color: #fff;
    margin-left: auto;
    background: #2f2f2f
}

.chat .messages .container.assistant .message[data-v-7f9493dd] {
    margin-right: auto;
	max-width: 80%;
}

.chat .messages .container .message[data-v-7f9493dd] {
    max-width: 70%;
    padding: .625rem 1.25rem;
    margin: 10px;
    border-radius: 1.5rem
}

.chat .messages .container .menu[data-v-7f9493dd] {
    padding-left: .625rem;
    margin-top: -20px;
    margin-left: 10px;
    display: flex;
    align-items: center
}

.chat .messages .container .menu .button[data-v-7f9493dd] {
    width: 30px;
    height: 30px;
    border-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.chat .messages .container .menu .button[data-v-7f9493dd]:hover {
    cursor: pointer;
    background: #2f2f2f
}

.chat .messages .container .menu .button .icon[data-v-7f9493dd] {
    flex-shrink: 0;
    height: 18px;
    width: 18px
}

.chat .messages .container .menu .model[data-v-7f9493dd] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    padding-left: 11px;
    padding-bottom: 5px;
    color: gray
}

.info[data-v-7f9493dd] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: gray
}
/*
.input[data-v-152c7950] {
    display: flex;
    background: #2f2f2f;
    margin: 10px;
    border-radius: 15px
}

.input textarea[data-v-152c7950] {
    width: 100%;
    margin: 10px;
    /*overflow-y: hidden;*/
/*    outline: none;
    border: inherit;
    resize: none;
    max-height: 25dvh;
    background: transparent;
    font-size: 1rem;
    padding: .5rem .75rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0
}

.tabsMenu[data-v-927731f4] {
    display: flex;
    flex-direction: column;
    background: #171717;
    width: 250px;
    min-width: 250px;
    height: 100%;
	position: relative;
}

.tabsMenu .tabs[data-v-927731f4] {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%
}*/
/*
.tabsMenu .tabs .tab[data-v-927731f4] {
    padding: 10px;
    border-radius: 5px;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap
}

.tabsMenu .tabs .tab .name[data-v-927731f4] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%
}

.tabsMenu .tabs .tab .remove[data-v-927731f4] {
    color: #c43c3a;
    opacity: 0
}

.tabsMenu .tabs .tab .remove[data-v-927731f4]:hover {
    color: #cd4442;
    cursor: pointer
}

.tabsMenu .tabs .tab.active[data-v-927731f4] {
    background: #2f2f2f
}

.tabsMenu .tabs .tab:hover .remove[data-v-927731f4] {
    opacity: 1
}

.tabsMenu .tabs .tab[data-v-927731f4]:hover:not(.active) {
    background: #212121;
    cursor: pointer
}

.chat_gpt[data-v-5d826495] {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
    overflow: hidden
}

.chat_gpt .container[data-v-5d826495] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
	min-width: 650px;
}*/

/*======================== МОИ СТИЛИ ================================*/

.chat .messages .container .menu .answerbutton[data-v-7f9493dd] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    padding-left: 3px;
    color: gray;
}

.chat .messages .container .menu .answerbutton[data-v-7f9493dd]:hover {
    color: white;
	cursor: pointer;
}


.chat .messages .container.user .quesbutton[data-v-7f9493dd] {
    color: #fff;
    margin-left: auto;
	font-size: .875rem;
	color: gray;
}

.chat .messages .container.user .quesbutton[data-v-7f9493dd]:hover {
    color: white;
	cursor: pointer;
}


.chat .messages .container.user .quesmenu[data-v-7f9493dd] {
    margin-left: auto;
}

.chat .messages .container .quesmenu[data-v-7f9493dd] {
    max-width: 70%;
	margin-top: 0px; 
	margin-right: 10px;
	margin-bottom: 10px;
}

.tabsButtonspanel-container {
    display: flex; /* Используем Flexbox для центрирования */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    width: 100%; /* Занимаем всю ширину родительского контейнера */
    margin: 0px 0; /* Отступы сверху и снизу */
	position: absolute;
    bottom: 80px;
}

.tabsButtonspanel[data-v-f807152d] {
	display: flex; /* Используем Flexbox для кнопок внутри */
    gap: 10px; /* Отступы между кнопками */
}

.tabsButtonspanel .button[data-v-f807152d] {
    display: flex;
    height: 2.5rem;
    /*justify-content: center;*/
    align-items: center
}

.tabsButtonspanel .button a {
    color: white; /* Цвет текста ссылок */
    text-decoration: none; /* Убираем подчеркивание */
}

.tabsButtonspanel .button a:hover {
    color: gray; /* Цвет текста при наведении */
    cursor: pointer; /* Курсор в виде руки при наведении */
}

.line-container {
    display: flex; /* Используем Flexbox для центрирования */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    width: 100%; /* Занимаем всю ширину родительского контейнера */
    margin: 10px 0; /* Отступы сверху и снизу */
	position: absolute;
    bottom: 35px;
}

.line {
    width: 70%; /* Длина черты */
    height: 2px; /* Толщина черты */
    background-color: #fff; /* Цвет черты */
}

.copyright-container {
    display: flex; /* Используем Flexbox для центрирования */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    width: 100%; /* Занимаем всю ширину родительского контейнера */
    margin: 10px 0; /* Отступы сверху и снизу */
	position: absolute;
    bottom: 5px;
}

.copyright {
    /* Дополнительные стили для копирайта, если нужно */
    color: #fff; /* Цвет текста */
}

.messbuettons[data-v-152c7950] {
    display: flex;
    background: #2f2f2f;
    margin: 10px;
    border-radius: 15px
}

.messbuttons[data-v-7f9493dd] {
    background: #212121;
    display: flex;
	padding-top: 10px;
    margin-bottom: 5px;
    margin-left: -10px;
	border-top: 2px solid #555555;
}

.mainchatPanel{
    /*display: flex;
    flex-direction: column;
	position: relative;*/
    background: #171717;
    width: 260px;
    min-width: 260px;
    height: 100%;
	display: flex;
}

.mainchatarea {
	display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
}

.bottommainchatPanel{
    background: #171717;
    height: 90px;
	display: none;
	justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
}

.bottommainchatPanel img {
    max-width: 100%; /* Ограничиваем ширину изображения 100% от родителя */
    max-height: 100%; /* Ограничиваем высоту изображения 100% от родителя */
    object-fit: contain; /* Сохраняем пропорции изображения */
}

pre {
    position: relative;
    padding-top: 22px; /* Добавляем пространство для меток */
}

.code-header {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 0px;
    gap: 10px; /* Фиксированный отступ между элементами */
}

.language-label, .copy-btn {
    background-color: #283133;
    padding: 2px 5px;
    font-size: 12px;
    color: #aaa;
    border-radius: 3px;
}

.copy-btn {
		cursor: pointer;
}

#post p {
    overflow-wrap: break-word; /* или word-wrap: break-word; для поддержки устаревших браузеров */
    /* Дополнительно можно использовать следующие свойства для лучшего контроля за текстом */
   /* word-break: break-all;  В крайнем случае, разбивает слово вообще в любом месте */
   /*  white-space: normal;   /* Убедитесь, что строки могут переноситься по пробелам */
  }
  
.input[data-v-152c7950] {
    display: flex;
    background: #2f2f2f;
    margin: 10px;
    border-radius: 15px;
	
	align-items: center; /* Центрируем элементы по вертикали */
	padding: 5px;
}

.input textarea[data-v-152c7950] {
    width: 95%;
    margin: 10px;
    overflow-y: scroll;
    outline: none;
    border: inherit;
    resize: none;
    max-height: 25dvh;
    background: transparent;
    font-size: 1rem;
    padding: .5rem .75rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
	
    line-height: 1.2em; /* Высота строки для более точного расчета */
    max-height: calc(1.2em * 10); /* Максимальная высота - 10 строк   */
}

.input .textarea-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.input .send-button {
  margin-left: -15px; /* уменьшаем отступ между textarea и кнопкой */
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 35px; /* ширина кнопки */
  height: 35px; /* высота кнопки */
}

.input .send-button img {
  width: 100%; /* ширина картинки */
  height: 100%; /* высота картинки */
}

.del-message {
  margin-top: 2px; /* уменьшаем отступ между textarea и кнопкой */
  margin-left: 20px; /* уменьшаем отступ между textarea и кнопкой */
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 25px; /* ширина кнопки */
  height: 25px; /* высота кнопки */
  
  /*pointer-events: none;  Делаем кнопку некликабельной */
  /*opacity: 0.2;  Устанавливаем прозрачность кнопки */
}

.del-message img {
  width: 25px; /* ширина картинки */
  height: 25px; /* высота картинки */
}

.button-container{
  display: flex; /* Устанавливаем flex-контейнер */
  width: 25px; /* ширина кнопки */
  height: 25px; /* высота кнопки */
  margin-left: auto; /* Отодвигает кнопку к правому краю */
  margin-right: 120px; /* Добавляет отступ от правого края */
  
}

.loading-message-container{
  display: none;
  position: relative;
  width: 100%; /* Полная ширина для адаптивности */
  height: 28px; /* Установите высоту по вашему усмотрению */
  align-items: center;
  justify-content: center;
}

.loading-message {
    width: 100%; /* Ширина изображения будет занимать всю доступную ширину */
    height: 7px; /* Автоматическая высота для сохранения пропорций */
    background-size: contain; /* Чтобы изображение полностью помещалось */
    background-repeat: no-repeat; /* Изображение не должно повторяться */
	background-image: url('../writeloader.svg');
}

.loading-image{
  height: 7px; /* высота кнопки */
}

.adblock-message {
            display: none; /* Скрытие сообщения по умолчанию */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid #d9534f;
            padding: 20px;
            z-index: 1000;
}

.logocontainer {
	display: flex;
}

.logo[data-v-f807152d] {
	text-align: center; /* Выровнять текст по центру */
    width: 100%; /* Занять всю ширину родителя */
    padding: 5px 0; /* Добавить отступы сверху и снизу (по желанию) */
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 40pt; /* Задать размер шрифта 14pt */
    color: #C4C4C4; /* Цвет текста */
	border-bottom: 2px solid #555555;
    text-shadow:
        1px 1px 0 #444,   /* Направление тени вниз и вправо с серым цветом */
        2px 2px 0 #666,   /* Направление тени чуть больше для эффекта объемности */
        3px 3px 5px rgba(0, 0, 0, 0.7), /* Основная тень */
        -1px -1px 5px rgba(255, 255, 255, 0.2); /* Светлая тень для контраста */
}

.toppanel{
  display: none;
  justify-content: space-between;
  align-items: center;
  background: #171717;
  height: 47px;
}

.mobilelogo {
	flex-grow: 1;
	text-align: right;
	margin-right: 20px;
    width: 100%; /* Занять всю ширину родителя */
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 20pt; /* Задать размер шрифта 14pt */
    color: #C4C4C4; /* Цвет текста */
    text-shadow:
        1px 1px 0 #444,   /* Направление тени вниз и вправо с серым цветом */
        2px 2px 0 #666,   /* Направление тени чуть больше для эффекта объемности */
        3px 3px 5px rgba(0, 0, 0, 0.7), /* Основная тень */
        -1px -1px 5px rgba(255, 255, 255, 0.2); /* Светлая тень для контраста */
}

.showbutton{
  display: none;
  margin-left: 8px;
}

/*======================== МОИ СТИЛИ КОНЕЦ ================================*/


/*Список моделей*/

.dropdowncontainer {
  text-align: center;
}

.dropdowncontainer > .dropdown {
  margin: 0 20px;
  vertical-align: top;
  width: 170px;
}

.dropdown {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 28px;
  width: 150px;
  background: #f2f2f2;
  border: 1px solid;
  border-color: white #f7f7f7 whitesmoke;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.dropdown:before, .dropdown:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px dashed;
  border-color: #888888 transparent;
  pointer-events: none;
}

.dropdown:before {
  border-bottom-style: solid;
  border-top: none;
}

.dropdown:after {
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}

.dropdown-select {
  position: relative;
  width: 130%;
  margin: 0;
  padding: 6px 8px 7px 10px;
  height: 28px;
  line-height: 14px;
  font-size: 14px;
  font-weight: bold;
  color: #62717a;
  text-shadow: 0 1px white;
  background: #f2f2f2; /* Fallback for IE 8 */
  background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

.dropdown-select:focus {
  z-index: 3;
  width: 100%;
  color: #394349;
  outline: 2px solid #49aff2;
  outline: 2px solid -webkit-focus-ring-color;
  outline-offset: -2px;
}

.dropdown-select > option {
  margin: 3px;
  padding: 6px 8px;
  text-shadow: none;
  background: #f2f2f2;
  border-radius: 3px;
  cursor: pointer;
}

/* Fix for IE 8 putting the arrows behind the select element. */

.lt-ie9 .dropdown {
  z-index: 1;
}

.lt-ie9 .dropdown-select {
  z-index: -1;
}

.lt-ie9 .dropdown-select:focus {
  z-index: 3;
}

/* Dirty fix for Firefox adding padding where it shouldn't. */

@-moz-document url-prefix() {
  .dropdown-select {
    padding-left: 6px;
  }
}

.dropdown-dark {
  background: #444;
  border-color: #111111 #0a0a0a black;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.dropdown-dark:before {
  border-bottom-color: #aaa;
}

.dropdown-dark:after {
  border-top-color: #aaa;
}

.dropdown-dark .dropdown-select {
  color: #aaa;
  text-shadow: 0 1px black;
  background: #444;  /* Fallback for IE 8 */
}

.dropdown-dark .dropdown-select:focus {
  color: #ccc;
}

.dropdown-dark .dropdown-select > option {
  background: #444;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
}

>>>>>>> 0311d49c76f256dce473550148562ed5a0fe04e2
/*Список моделей. Конец*/


/* Стили для модального окна */
.modal {
    position: fixed; /* Фиксированная позиция */
    top: 0; /* Привязка к верхней части окна */
    left: 0; /* Привязка к левой части окна */
    width: 100%; /* Полная ширина экрана */
    height: 100%; /* Полная высота экрана */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
    display: none; /* Скрыто по умолчанию */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    z-index: 1000; /* Убедитесь, что модальное окно выше других элементов */
}

.modal-content {
    background-color: white; /* Фон модального окна */
    border-radius: 5px; /* Скругленные углы */
    padding: 20px; /* Отступы внутри модального окна */
    text-align: center; /* Центрировать текст */
    max-width: 400px; /* Максимальная ширина модального окна */
    width: 80%; /* Занимает 80% ширины экрана */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Лёгкая тень */
}

.modal-input {
    width: 100%; /* Занимает всю ширину модального окна */
    padding: 10px; /* Отступы внутри поля ввода */
    margin: 10px 0; /* Отступы сверху и снизу */
}

.modal-button {
    padding: 10px 15px; /* Отступы внутри кнопки */
    margin: 5px; /* Отступы между кнопками */
    cursor: pointer; /* Указатель для кнопок */
}

.modal-button.confirm {
    background-color: #4CAF50; /* Цвет для кнопки подтверждения */
    color: white; /* Цвет текста */
    border: none; /* Убираем границу */
    border-radius: 3px; /* Скругление углов */
}

.modal-button.cancel {
    background-color: #f44336; /* Цвет для кнопки отмены */
    color: white; /* Цвет текста */
    border: none; /* Убираем границу */
    border-radius: 3px; /* Скругление углов */
}



.math-block {
    width: 100%; /* или укажите фиксированную ширину */
    max-width: 1000px; /* ограничение ширины */
	max-height: 600px; /* ограничение высоты */
    overflow: auto; /* добавляем прокрутку */
    background-color: #212121; /* фоновый цвет для лучшей читаемости */
}

/* Форма переименования таба */

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
	transition: opacity 200ms;
  visibility: hidden;
	opacity: 0;
	&.light {
    background: rgba(255,255,255,0.5);
  }
  .cancel {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
  }
  &:target {
    visibility: visible;
    opacity: 1;
  }
}

.popup, .popupdel {
	display: flex;                         /* Включаем Flexbox */
    flex-direction: column;               /* Вертикальное расположение элементов */
    align-items: center;                  /* Центрируем элементы по горизонтали */
    justify-content: center;               /* Центрируем элементы по вертикали (если высота позволяет) */
	margin: 75px auto;
	padding: 20px;
	background: #fff;
	width: 300px;
	box-shadow: 0 0 50px rgba(0,0,0,0.5);
	position: relative;
	background-color: #343434;
	border-radius: 10px;
  .light & {
    border-color: #aaa;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0px;
    right: 10px;
    opacity: 0.8;
    transition: all 200ms;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    &:hover {
      opacity: 1;
    }
  }
  .content {
    max-height: 400px;
    overflow: auto;
	margin-top: 20px;
	width: 100%
  }
  
}

.newchatname{
	color: #FFFFFF;
	width: 100%;
	background-color: #585858;
	border-radius: 12px;
	border: 0;
	box-sizing: border-box;
	font-size: 16px;
	height: 100%;
	outline: 0;
	padding: 10px 15px 10px;
	resize: none;
}

.edit-button-cont{
	padding-top: 10px;
	display: flex;
}

.edit-button, .delete-button, .cancel-button {
    display: inline-block;
    position: relative;
    height: 28px;
    width: 150px; /* Ширина кнопки по аналогии с выпадающим списком */
    background: #424242; /* Основной цвет фона */
    background-image: linear-gradient(to bottom, #424242, #2A2A2A); /* Градиент от #424242 к #2A2A2A */
    
    border-radius: 3px; /* Скругление углов */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); /* Тень */
    font-size: 14px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    color: #D3D3D3; /* Цвет текста (белый) */
    text-shadow: 0 1px rgba(0, 0, 0, 0.5); /* Тень текста для лучшей читаемости */
    cursor: pointer; /* Указатель курсора, чтобы показать, что это кнопка */
}

.delete-button, .cancel-button {
	width: 100px;
}

.delete-button {
	margin-right: 20px; /* Задайте необходимое расстояние между кнопками */
	color: #E57474;
}

.subtitle {
  color: #eee;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 5px;
}

/* END Форма переименования таба */





/* Медиа-запросы для адаптивности (Смартфоны) 767*/
@media (max-width: 1023px) {
	.tabsMenu[data-v-927731f4] {
		display: none;  /*логикой скрытия и показа панели управляет js*/
		width: 100%;
	}
	.mainchatPanel{
		display: none;
	}
	.bottommainchatPanel{
		display: flex;
	}
	.toppanel{
		display: flex;
	}
	.logocontainer{
		display: none;
	}
	.chat_gpt[data-v-5d826495]{
		height: 87vh;
	}
	.input[data-v-152c7950]{
		margin: 5px;
		padding: 2px;
	}
	.messbuttons[data-v-7f9493dd]{
		padding-top: 4px;
		margin-bottom: 0px;
	}
	.tabsButtons[data-v-f807152d] {
		justify-content: space-between;
	}
	.showbutton{
	  display: flex;
	}
	.tabsMenu .tabs[data-v-927731f4] {
		max-height: 287px;
	}
	.chat .messages .container .message[data-v-7f9493dd]{
		max-width: 90%;
	}
	.tabsMenu .tabs .tab .edit[data-v-927731f4] {
		opacity: 1;
	}
	.tabsMenu .tabs .tab .remove[data-v-927731f4] {
		opacity: 1;
	}
	.dropdowncontainer > .dropdown {
	  margin-left:14px;
	}
	.button-container {
		margin-right: 115px;
	}
	.loading-message {
		height: 25px; 
		background-image: url('../writeloadermob.svg');
		margin-top: 1px;
	}
	.chat .messages .container.assistant .message[data-v-7f9493dd] {
		padding-left: 7px;
		max-width: 90%;
	}
	.chat .messages .container .menu[data-v-7f9493dd] {
		margin-left: -5px;
	}
	
	.tabsMenu .tabs .tab .edit-delete {
		display: flex;
	}
	.tabsMenu .tabs .tab .name[data-v-927731f4] {
		max-width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
    body {
        font-size: 21px; /* Увеличьте или уменьшите в зависимости от ваших предпочтений */
    }

    p {
        font-size: 1rem; /* Установите размер шрифта для параграфов, если он отличается */
    }

    a {
        font-size: 1.3rem; /* Установите размер шрифта для ссылок */
    }

    /* Добавьте другие элементы, для которых хотите изменить размер шрифта */
    .tabsMenu .tabs .tab .name[data-v-927731f4] {
        font-size: 1.3rem; /* Измените размер шрифта для названия табов */
    }

    .modal-button {
        font-size: 18px; /* Измените размер шрифта для кнопок в модальном окне, если это необходимо */
    }

    /* Другие селекторы по необходимости */
}







User: напиши эту часть заново

<div class="edit-button-cont">
			<button type="text" class="delete-button">Удалить</button>
			<a href="#">
				<button type="text" class="cancel-button">Отменить</button>
			</a>
		</div>

так чтобы кнопки всегда были на одной линии по горизонтали, в остальном расположение измениться не должно


Assistant:  гарантировать, что кнопки "Удалить" и "Отменить" всегда находятся на одной линии по горизонтали, вы можете использовать CSS Flexbox. Вот переработанная часть HTML:

```html
<div class="edit-button-cont" style="display: flex; justify-content: space-between; align-items: center;">
    <button type="button" class="delete-button">Удалить</button>
    <button type="button" class="cancel-button">Отменить</button>
</div>
```

В этом варианте я установил `display: flex;` для родительского контейнера `.edit-button-cont`, чтобы кнопки располагались в одну линию. Также я добавил `justify-content: space-between;` для равномерного распределения кнопок по горизонтали. 

Убедитесь, что если у вас есть существующий CSS для `.edit-button-cont`, вы можете удалить `display` из инлайнового стиля и добавить аналогичные правила в ваш основной CSS файл, чтобы избежать дублирования стилей. Например:

```css
.edit-button-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
```

Это позволит вам достичь аналогичного эффекта, сохраняя чистоту вашего CSS-кода.
User: выровнено, но теперь не работает кнопка Отменить
Assistant:  кнопка "Отменить" не работает после изменений, это может быть связано с тем, как была изменена структура HTML. Из оригинального кода следует, что кнопка "Отменить" была обернута в тег `<a>`, что может позволить кнопке действовать как ссылка.

Чтобы обеспечить корректную работу обеих кнопок, лучше всего оставить кнопку "Отменить" как `<button>` и убрать обертку `<a>`. Вот исправленный код:

```html
<div class="edit-button-cont" style="display: flex; justify-content: space-between; align-items: center;">
    <button type="button" class="delete-button">Удалить</button>
    <button type="button" class="cancel-button">Отменить</button>
</div>
```

Убедитесь, что у вас есть соответствующие обработчики событий для обеих кнопок. Например, если кнопка "Отменить" должна закрыть модальное окно, убедитесь, что у вас есть JavaScript, который реагирует на это действие.

Если вы хотите сохранить ссылку для навигации, вы можете использовать кнопку и добавить обработчик события для ссылки. Например:

```html
<div class="edit-button-cont" style="display: flex; justify-content: space-between; align-items: center;">
    <button type="button" class="delete-button">Удалить</button>
    <button type="button" class="cancel-button" onclick="closeModal()">Отменить</button>
</div>
```

Здесь `closeModal()` - это функция JavaScript, которую вы должны определить, чтобы закрыть модальное окно или выполнять другое нужное действие. 

Проверьте также, что ваш CSS не взаимодействует с кнопкой "Отменить" (например, не накладывает какие-либо другие стили или правила, которые могут скрыть ее или сделать некликабельной).
User: Определи closeModal(), она должна работать аналогично удаленной тобой ссылке
Assistant:  определить функцию `closeModal()`, которая будет имитировать поведение отмены, аналогичное ссылке, мы можем добавить следующий код JavaScript:

```javascript
function closeModal() {
    // Находим модальное окно с помощью его ID или класса
    const modal = document.getElementById('popup2'); // замените на ваш ID, если нужно
    
    // Если модальное окно существует, закрываем его
    if (modal) {
        modal.style.display = 'none'; // скрываем модальное окно
    }
}
```

Вот как может выглядеть полный код с использованием вышеуказанных изменений:

### HTML:
```html
<div id="popup2" class="overlay">
    <div class="popupdel">
        <a class="close" href="#" onclick="closeModal(); return false;">&times;</a>
        <div class="subtitle">Чат будет удален!</div>
        <div class="edit-button-cont" style="display: flex; justify-content: space-between; align-items: center;">
            <button type="button" class="delete-button">Удалить</button>
            <button type="button" class="cancel-button" onclick="closeModal()">Отменить</button>
        </div>
    </div>
</div>
```

### JavaScript:
```javascript
function closeModal() {
    const modal = document.getElementById('popup2'); // Замените на ваш ID, если нужно
    if (modal) {
        modal.style.display = 'none'; // Скрываем модальное окно
    }
}
```

### Заметки:
- Убедитесь, что у вас уже есть обработчик или функция для удаления чата (можно добавить в `onclick` кнопки "Удалить").
- Вы также можете дополнительно использовать CSS для анимации появления и скрытия модального окна, если это вам нужно.

Теперь, когда вы нажимаете на кнопку "Отменить", модальное окно будет скрыто.
User: эта функция удалит якорь #popup2 из адреса, как это делала ссылка?
Assistant: