/* Общие стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.3;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.3;
}

/* Контейнеры */
.login-container,
.register-container,
.verification-container,
.forgot-password-container,
.reset-password-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.dashboard-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Заголовки */
h2, h3 {
    margin-bottom: 20px;
    color: #2c3e50;
}

h1 {
    font-size: 4rem;
    color: #ffffff;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
    margin-top: 20px;
}

/* Формы */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="email"],
input[type="password"],
input[type="text"],
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* Кнопки */
.btn {
    display: inline-block;
    padding: 12px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #2980b9;
}

.btn-primary {
    background-color: #3498db;
    width: 100%;
}

.btn-primary:hover {
    background-color: #2980b9;
}

.btn-secondary {
    background-color: #95a5a6;
    width: 100%;
}

.btn-secondary:hover {
    background-color: #7f8c8d;
}

/* Алерты */
.alert {
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.alert-error {
    background-color: #e74c3c;
    color: white;
}

.alert-success {
    background-color: #2ecc71;
    color: white;
}

/* Ссылки */
a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Заголовок панели управления */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #2c3e50;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Основной контент */
.main-content {
    display: flex;
    flex: 1;
}

/* Боковая панель */
.sidebar {
    width: 20%;
    background-color: #ecf0f1;
    padding: 20px;
    border-right: 1px solid #ddd;
    overflow-y: auto;
        /* position: sticky; */
    height: 100%;
    padding-bottom: 0;
}
#resizer {
    /* position:absolute; */
    bottom:0; top:0; right:0;
    width: 3px;          /* толщина «ручки» */
    cursor:w-resize;      /* курсор‑стрелка вверх/вниз */
    background:#9b9b9b;   /* можно убрать – просто видимая зона */
}  


.folder-section,
.new-chat-section {
    margin-bottom: 0px;
    display: flex;
}
#new-folder-btn, #new-chat-btn{
    /* margin-top: 5px; */
    flex: 50%;
    border-radius: 10px ;
    margin: 0px;
    padding: 10px 0;
}
#new-folder-btn{
    margin-right: 5px;
    background-color: rgb(255, 205, 39);
    color: black;
}
#new-folder-btn:hover{
    background-color: rgb(204, 160, 16);
}
#new-chat-btn{
    margin-left: 5px;
}

/* Список папок */
#folders-list {
    list-style-type: none;
    padding-left: 0;
}

#folders-list li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

#folders-list a {
    color: #2c3e50;
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

#folders-list a:hover,
#folders-list a.active {
    color: #3498db;
    font-weight: bold;
}

/* Список чатов */
.chats-list {
    max-height: 300px;
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.chat-item {
    padding: 10px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    border-left: 3px solid #3498db;
}

.chat-item:hover {
    background-color: #f0f8ff;
    transform: translateX(5px);
}

.chat-name, .folder-name {
    flex: auto;
    font-weight: bold;

}

.chat-date {
    display: block;
    font-size: 0.8rem;
    color: #7f8c8d;
}
:root {
  --container-width: 80%; /* Задаем ширину в одном месте */
}
/* Область чата */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

.chat-header {
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
}

.chatName{
    position: relative;
}
.chat-container {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    overflow-y: auto;
    display: none;
    overflow-x: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    height: 100%;
}

.chat-messages {
    border-bottom: 1px solid #eee;

}

.message {
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 8px;
    max-width: 100%;
    position: relative;
}

.message.user {
    background-color: #e3f2fd;
    /* margin-left: 20px; */
    text-align: left;
}

.message.assistant, .message.tool1 {
    background-color: #f5f5f5;
    padding-left:20px;
    padding-right:20px;
}

/* Стиль для размышлений модели */
.message.assistant-thinking {
    font-style: italic;
    font-size: 0.9rem; /* чуть меньше обычного текста */
    background-color: #dfdfdf; /* более светлый фон, чтобы отличать */
    color: #555;
    padding: 10px;
    border-radius: 10px;
}
.think {
    font-style: italic;
    font-size: 0.9rem; /* чуть меньше обычного текста */
    background-color: #dfdfdf; /* более светлый фон, чтобы отличать */
    color: #555;
    padding: 10px;
    border-radius: 10px;
}
.message-content {
    word-wrap: break-word;
}

.message-meta {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-top: 5px;
}

/* Форма ввода сообщения */
.chat-input-area {
    display: flex;
    gap: 3px 10px;
    padding: 3px 0;
    position: relative;
}
#chat-input-area{
    padding: 10px;
    background-color: white;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    position: fixed;
    bottom: 0;
    margin-right: 20px;
    right: 0;
}

.message-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    max-height: 200px;
    resize: none; /* Убирает возможность растягивать блок вручную мышкой */
    overflow: hidden; /* Скрывает полосу прокрутки */
    word-wrap: break-word; /* Переносит длинные слова на новую строку */
    box-sizing: border-box;
}

.send-button, .imageInputBtn, .ToolButton, #searchToolLabel, .FileInputBtn, #stopGenerateBtn {
    width: 32px;
    height: 32px;
    padding: 25px 25px;
    cursor: pointer;
    background-image: url(../assets/sendBtn.png);
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 0;
    border: solid 2px;
    border-color: #D1D1D1;
    border-radius: 25px;
}
.FileInputBtn{
    background-image: url(../assets/addFileBtn.png);
    border-radius: 0;
    border: none;
    width: 32px;
    height: 32px;
    padding: 7px 10px;
    margin-left: 5px;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 0;
    background-color: #f5f5f5;
    opacity: 0.8;
    transition: opacity 0.3s;
    position: absolute;
    right: 78px;
    top: 22px;

}
.imageInputBtn{
    background-image: url(../assets/addImage1.png);
    border: none;
    border-radius: 0;
    margin-top: 12px;
    /* opacity: 0.3; */
        transition: opacity 0.3s;
}
.imageInputLabel{
    margin-top: 23px;
    margin-left: 4px;
}
.imageInputBtn:hover, .ToolButton:hover{
    opacity: 0.7;
}
.markdown-button{
    width: 32px;
    height: 32px;
    padding: 7px 10px;
    margin-left: 5px;
    cursor: pointer;
    background-image: url(../assets/markdownBtn3.png);
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 0;
    background-color: #f5f5f5;
    opacity: 0.8;
    transition: opacity 0.3s;
    position: absolute;
    right: 40px;
}
.markdown-button:hover, .FileInputBtn:hover{
    opacity: 1;
}
#TotalTokenDiv{
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/* Модель выбора */


/* Адаптивность */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding: 15px;
    }
    
    .dashboard-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        position: static;
    }
    #chat-input-area{
        position: static;
        padding: 20px;
        margin-right: 0 ;
    }
    #TotalTokenDiv{
        bottom: -20px;
    }
    #tree-view{
        height: auto;
    }
    
}
.message-content pre {
  background: #c8c8c8;          /* тёмный фон, как в LM Studio */
  color: #0c0c0c;
  padding: 10px;
  overflow-x: auto;
  border-radius: 4px;
  margin: 0.5em 0;
  line-height: 1;
}
.code-block-wrapper { position: relative; margin-bottom: 1rem; }

.textEnd{
    margin-left: 148px;
}

/* Добавляем стили для дерева папок и чатов */
.tree-section{

}

#FolderModal{
    
}

#modal-tree-view {
    max-height: 60%;
    list-style: none;
    padding-left: 0;
    overflow: scroll;
    padding: 14px;
    scrollbar-width: none;
    padding: 20px;
    position: absolute;
    top: 300px;
    background-color: #e0e0e0;
    z-index: 4;
    border-radius: 20px;
}

#tree-view {
    list-style: none;
    padding-left: 0;
    overflow: scroll;
    padding: 14px;
    scrollbar-width: none;
}
#tree-view ul, #modal-tree-view ul {
    list-style: none;
    padding-left: 20px;
    margin-top: 5px;
}
#tree-view li .folder-name, #modal-tree-view .folder-name, #modal-tree-view li .chat-name
#tree-view li .chat-name {
    display: block;
    flex-direction: row;
    padding: 0px 0;
    cursor: pointer;
}
#tree-view li .folder-name:hover, #modal-tree-view li .folder-name:hover, #modal-tree-view li .chat-name:hover
#tree-view li .chat-name:hover {
    color: #3498db;
    font-weight: bold;
}
.chosenChat {
    color: #3498db;
    font-weight: bold;
}
#tree-view li .folder-name.active, #modal-tree-view li .folder-name.active, .folderBox.active{
    color: #2980b9;
    font-weight: bold;
        background-color: #cfcfcf;

}
.copy-btn,
.save-btn {
    position:absolute; top:6px; right:6px;
 border:none; cursor:pointer;
    font-size:20px; padding:2px 4px;
    border-radius:3px; opacity:0.7;
}
.copy-btn { right:6px; }
.save-btn { right:46px; }   /* чуть левее копии */
.copy-btn:hover,
.save-btn:hover { opacity:1; }

.rubbish-btn{
    display: inline-block;
    text-align: right;
    flex: 50%;
    cursor: pointer;
    font-size: 10px;
}.rename-btn{
    display: inline-block;
    text-align: left;
    flex: 50%;
    cursor: pointer;
    font-size: 10px;

}
.chatTreeBtns, .folderTreeBtns{
    display: inline-block;
    width: 58px;
    text-align: right;
}

.chats-li, .folderBox{
    display: flex;
    margin: 0px -20px;
    padding: 0px 5px;
}
.model-params {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.model-params label {
    font-size:13px; color:#fff;
    display:flex; flex-direction:column;
}
.model-params input, .model-params select {
    width:100px; margin-top:2px; padding:2px 4px;
    height: 32px;
}
.model-params .model-selector{
    width: 250px;
    margin-top:2px;
}
.model-params .server-selector{
    width:150px;
    margin-top:2px;
    height: 32px;
}
.models-label{
    color: white;
}

.copy-btn-message{
    align-self: last baseline;
    position:relative; bottom:-34px; right:0;
    border:none; cursor:pointer;
    font-size:12px; padding:2px 4px;
    border-radius:3px; opacity:0.7;
}
.copy-btn-message:hover{ opacity:1; }

nav{
    text-align: center;
}

details::details-content {
  opacity: 0;
  transition:
    opacity 300ms,
    content-visibility 300ms allow-discrete;
}

details[open]::details-content {
  opacity: 1;
}

details summary::-webkit-details-marker {
  display: none;
}
summary{
    cursor: pointer;
 
}
#rename-chat-field, #rename-folder-field{
    width: 100%;
}
.user-image, .assistant-image{
    width: auto;
    height: 150px;
    cursor: zoom-in;
}
.hidden{
    display: none;
}
#image-preview{
    max-width: 150px;
    max-height: 150px;
    margin: 10px 0;
    cursor: zoom-in;
}

.overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    x: 0;
    y: 0;
    z-index: 3;
    cursor: pointer;

}

#imageModal{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2;
}


#openImageId{
    z-index: 4;
    max-width: 80%;
    max-height: 80%;
    cursor: zoom-out;
}
.modal-content {
    display: flex; /* Включаем Flexbox */
    justify-content: center; /* Центрируем картинку по горизонтали */
    align-items: center; /* Центрируем картинку по вертикали */
    height: 100%; /* Опционально: растягиваем контейнер на всю высоту модалки */
    
    
}

#selectMenu {
            position: absolute;
            background: #fff;
            border: 1px solid #ccc;
            padding: 4px;
            z-index: 1000;
        }
.modal .modal-content{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    background-color: #f5f5f5;
    padding: 20px;
    width: 50%;
    height: auto;
    display: block;

}
.deleteMessageBtn, .redactMessageBtn{
    border: none;
    background: none;
    position: absolute;
    right: 22px;
    bottom: 5px;
}
.deleteMessageBtn{
    right: 3px;
}
.RedactArea{
    width: 100%;
}
.ToolButton{

    background-image: url(../assets/folder-tree6.jpg);
    border: none;
    border-radius: 0;
    margin-top: 12px;
    transition: opacity 0.3s;
}
#searchToolLabel{
    background-image: url(../assets/SearchToolIcon.png);
    border: none;
    border-radius: 0;
    margin-top: 12px;
    transition: opacity 0.3s;
}

.close-btn{
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    position: absolute;
    right: 6px;
    top: -4px;
}
#btnPick, #btnPickFiles, #btnUpload, #btnSave{
    background-color: rgb(255, 217, 94);
    border-radius: 10px;
    border-color: rgb(255, 238, 0);
    padding: 5px;
    border-width: 4px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    margin-bottom: 5px;
    width: 200px;
}


#btnPick:hover {
  background-color: rgb(255, 205, 39); /* Цвет становится темнее */
  transform: translateY(-2px); /* Кнопка слегка приподнимается вверх */
}
#btnPickFiles:hover {
  background-color: rgb(55, 142, 255); /* Цвет становится темнее */
  transform: translateY(-2px); /* Кнопка слегка приподнимается вверх */
}
#btnUpload:hover {
  background-color: rgb(253, 32, 32); /* Цвет становится темнее */
  transform: translateY(-2px); /* Кнопка слегка приподнимается вверх */
}
#btnSave:hover {
  background-color: rgb(29, 255, 59); /* Цвет становится темнее */
  transform: translateY(-2px); /* Кнопка слегка приподнимается вверх */
}

/* Стили при клике (Active) — полезное дополнение */
#btnPickFiles:active, #btnPick:active, #btnUpload:active, #btnSave:active {
  transform: translateY(0); /* Кнопка возвращается на место при нажатии */
}
#btnPickFiles{
    background-color: rgb(119, 178, 255);
    border-color: rgb(32, 110, 255);
    color: white;
    margin-bottom: 0;

}
#btnUpload{
    background-color: rgb(255, 75, 75);
    border-color: rgb(202, 0, 0);
    color: white;
}
#btnSave{
    background-color: rgb(93, 255, 115);
    border-color: rgb(0, 194, 74);
    margin-bottom: 0;
}
.fileBtnContainer{
    display: flex;
    border: solid rgb(202, 202, 202) 3px;
    margin-bottom: 20px;
    padding: 5px;
    border-radius: 15px;

}

.disabled{
    color: #95a5a6;
}


#stopGenerateBtn{
    background-image: url(../assets/stopBtn.png);

}