.chat-container {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 20px;
    width: 200px; /* Узкая ширина для свернутого чата */
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    z-index: 1000; /* Обеспечивает отображение поверх других элементов */
    overflow: hidden; /* Предотвращает появление полос прокрутки */
    transition: width 0.3s ease; /* Анимация изменения ширины */
    font-size: 12pt;
    color:black;
}

.chat-container a {
    color: #f91e1d; /* Замените "blue" на желаемый цвет */
    text-decoration: none; /* Убирает подчеркивание у ссылок */
}

.chat-container a:hover {
    color: #f91e1d; /* Замените "darkblue" на желаемый цвет при наведении */
}

.chat-container.open {
    width: 450px; /* Широкая ширина для развернутого чата */
    max-width: 90%;
}

.chat-header {
    background-color: #f91e1d;
    color: white;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    text-align: center; /* Центрирует текст заголовка */
    position: relative;
}

.chat-close {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.chat-body {
    display: none;
    background-color: #fff;
    padding: 10px 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    max-height: 550px; /* Ограничивает высоту тела чата */
    overflow-y: auto; /* Добавляет вертикальную прокрутку при необходимости */
}

.chat-messages {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.chat-message {
    margin: 10px;
    padding: 10px;
    max-width: 90%;
    word-wrap: break-word; /* Обеспечивает перенос длинных слов */
    position: relative;
}

.chat-message.user {
    background-color: #ebfcde;
    border-radius: 10px 10px 0px 10px ;
    align-self: flex-end;
    margin-left: auto;
}

.chat-message.bot {
    background-color: #f8f8f8;
    border-radius: 0px 10px 10px 10px ;
    align-self: flex-start;
    margin-right: auto;
}

.chat-message:before {
    content: '';
    position: absolute;
    top: 10px;
    width: 0;
    height: 0;
}

.chat-input-container {
    display: flex;
    align-items: center;
}

.chat-input {
    flex-grow: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Обеспечивает правильное выравнивание полей ввода */
    background-color: #ffffff;
    color: black;
}

.chat-send {
    background-color: #f91e1d;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 40px; /* Устанавливаем фиксированную ширину */
    height: 40px; /* Устанавливаем фиксированную высоту */
    display: flex;
    align-items: center;
    justify-content: center;
}

#typing-indicator {
    font-style: italic;
    color: gray;
}