/* Общие стили контейнера приложения */
.app-container {
    display: flex;
    height: 100vh; /* Полная высота окна просмотра */
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* Светлый фон для всего приложения */
}

/* Стили для HistoryPanel */
.history-panel {
    width: 280px; /* Ширина боковой панели */
    background-color: #202123; /* Темный фон, как в ChatGPT */
    color: #ececec; /* Светлый текст */
    padding: 10px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Тень для выделения */
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Прокрутка, если история длинная */
    flex-shrink: 0; /* Не позволяет панели сжиматься */
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #3e3e40; /* Разделитель */
    margin-bottom: 15px;
}

.history-panel h2 {
    font-size: 1.1em;
    color: #f0f0f0;
    margin: 0;
}

.new-chat-button {
    background-color: #3e3e40;
    color: #ececec;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.new-chat-button:hover {
    background-color: #555558;
}

.chat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chat-list-item {
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #2d2e30; /* Фон элемента списка */
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex; /* Используем flexbox для внутреннего содержимого */
    align-items: center;
    min-height: 36px; /* Минимальная высота элемента */
}

.chat-list-item:hover {
    background-color: #3e3e40; /* Фон при наведении */
    color: #ffffff;
}

.chat-list-item.selected {
    background-color: #4a4a50; /* Фон для выбранного элемента (если будет реализовано) */
}

.chat-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.chat-item-text {
    flex-grow: 1; /* Позволяет тексту занимать все доступное пространство */
    min-width: 0; /* Важно для работы truncate */
}

.chat-item-text .truncate {
    white-space: nowrap; /* Запрещает перенос строки */
    overflow: hidden; /* Скрывает содержимое, которое не помещается */
    text-overflow: ellipsis; /* Добавляет многоточие для скрытого текста */
    display: block; /* Важно для truncate */
}

.chat-item-actions {
    margin-left: 10px;
    flex-shrink: 0; /* Не позволяет кнопкам сжиматься */
}

.chat-item-options-button {
    background: none;
    border: none;
    color: #777777; /* Цвет иконки */
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
    transition: color 0.2s ease, background-color 0.2s ease;
    display: flex; /* Для центрирования SVG */
    align-items: center;
    justify-content: center;
}

.chat-item-options-button:hover {
    color: #ffffff;
    background-color: #555558;
}

/* Стили для GraphPanel */
.graph-panel {
    flex-grow: 1;
    border-right: 1px solid #ccc;
}

/* Стили для ChatPanel */
.chat-panel {
    width: 300px; /* Фиксированная ширина для ChatPanel */
    flex-shrink: 0; /* Не позволяет панели сжиматься */
    display: flex;
    flex-direction: column;
    background-color: #343541; /* Темный фон для панели чата */
    color: #e0e0e0;
    padding: 20px;
}

.chat-history {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px; /* Для отступа от скроллбара */
    padding-bottom: 10px; /* Сохраняем ваш padding-bottom */
}

.message {
    margin-bottom: 15px; /* Увеличиваем отступ */
    padding: 10px 15px; /* Увеличиваем padding */
    border-radius: 8px; /* Скругляем углы */
    max-width: 70%; /* Ограничение ширины сообщения */
    word-break: break-word; /* Добавлено: Перенос слов, если строка слишком длинная */
}

.message img {
    max-width: 100%; /* Максимальная ширина изображения - 100% от родительского элемента */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    display: block; /* Убирает отступы снизу у inline элементов */
    margin-bottom: 5px; /* Небольшой отступ снизу каждого изображения */
}

.message.user {
    background-color: #444654; /* Измененный фон */
    align-self: flex-end; /* Сообщения пользователя справа */
    margin-left: auto; /* Сдвигает сообщение вправо */
    text-align: left; /* Изменено: текст выравнивается по левому краю внутри блока */
}

.message.assistant {
    background-color: #4e4f5a; /* Измененный фон */
    align-self: flex-start; /* Сообщения ассистента слева */
    margin-right: auto; /* Сдвигает сообщение влево */
    text-align: left; /* Сохраняем ваше выравнивание */
}

.chat-input-form {
    display: flex;
    margin-top: 20px; /* Добавляем отступ сверху */
    gap: 10px; /* Промежуток между элементами формы */
}

/* Стили для CommandInput */
.command-input {
    position: relative;
    flex-grow: 1; /* Позволяет input занимать доступное пространство */
}

.command-input input {
    width: 100%;
    padding: 10px 15px; /* Увеличенный padding */
    border: 1px solid #555; /* Темная рамка */
    border-radius: 5px;
    background-color: #444654; /* Темный фон */
    color: #e0e0e0; /* Светлый текст */
    font-size: 1em;
    outline: none; /* Убираем стандартный outline */
}

.command-input input::placeholder {
    color: #999; /* Цвет placeholder */
}

.chat-input-form button {
    background-color: #1a73e8; /* Синяя кнопка */
    color: white;
    border: none;
    padding: 10px 15px; /* Увеличенный padding */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.chat-input-form button:hover {
    background-color: #0d47a1; /* Темнее при наведении */
}

.react-flow-root {
    width: 100%;
    height: 100%;
}

.command-input .suggestions {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 100%; /* Меню будет расположено выше элемента, к которому оно прикреплено */
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #ccc;
    border-bottom: none; /* Убираем нижнюю границу, так как теперь верхняя часть будет примыкать к полю ввода */
    border-radius: 5px 5px 0 0; /* Верхние углы будут скруглены, нижние - прямые */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Тень сверху */
    z-index: 1;
}

.command-input .suggestions li {
    padding: 5px;
    cursor: pointer;
}

.command-input .suggestions li:hover {
    background-color: #f0f0f0;
}


/* Стили для контекстного меню */
.context-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: 5px 0;
}

.context-menu button {
    display: block;
    width: 100%;
    padding: 8px 15px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.context-menu button:hover {
    background-color: #f0f0f0;
}