/* Общие стили */
* {
    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: 20px;
    background-color: #2c3e50;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

/* Боковая панель */
.sidebar {
    width: 250px;
    background-color: #ecf0f1;
    padding: 20px;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}
#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;
}
#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;
}

/* Область чата */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

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

.chat-container {
    flex: 1;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    overflow-y: auto;
    display: none;
}

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

}

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

.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: 10px 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 {
    width: 50px;
    height: 50px;
    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;
}
.imageInputBtn{
    background-image: url(../assets/addFileBtn.png);
    border: none;
    border-radius: 0;
    width: 34px;
    height: 34px;
    padding: 17px 17px;
    margin-top: 12px;
    opacity: 0.3;
        transition: opacity 0.3s;
}
.imageInputBtn:hover{
    opacity: 0.6;
}
.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;

}
.markdown-button:hover{
    opacity: 1;
}

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


/* Адаптивность */
@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;
    }
}
.message-content pre {
  background: #444343;          /* тёмный фон, как в LM Studio */
  color: #b3b392;
  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-view {
    list-style: none;
    padding-left: 0;
}
#tree-view ul {
    list-style: none;
    padding-left: 20px;
    margin-top: 5px;
}
#tree-view li .folder-name,
#tree-view li .chat-name {
    display: block;
    flex-direction: row;
    padding: 0px 0;
    cursor: pointer;
}
#tree-view li .folder-name:hover,
#tree-view li .chat-name:hover {
    color: #3498db;
    font-weight: bold;
}
#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;
}.rename-btn{
    display: inline-block;
    text-align: left;
    flex: 50%;
    cursor: pointer;
}
.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 select{
    width: 250px;
    margin-top:2px;
}
.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%; /* Опционально: растягиваем контейнер на всю высоту модалки */
    
    
}

/* Добавляем собственную стрелку */
/* details summary::after {
  content: '▼';
  font-size: 0.8rem;
  transition: transform 0.3s ease;
} */