.textplus-chat-container {
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;  /*  Ширина на весь доступный контейнер */
    max-width: 100%; /*  Предотвращаем выход за пределы экрана */
    background-color: #262626;
    color: #fff;
    box-sizing: border-box; /*  Включаем padding и border в ширину/высоту элемента */
}

.textplus-chat-messages {
    height: 200px; /*  Фиксированная высота, но можно сделать адаптивной (см. ниже) */
    overflow-y: scroll;
    margin-bottom: 10px;
    border: 1px solid #444;
    padding: 5px;
    background-color: #333;
    box-sizing: border-box;
}

/*  Адаптивная высота области сообщений (альтернатива фиксированной) */
@media (max-height: 600px) { /*  Применяем при небольшой высоте экрана */
    .textplus-chat-messages {
        height: 150px; /*  Уменьшаем высоту */
    }
}
@media (max-height: 400px) {
    .textplus-chat-messages {
        height: 100px;
    }
}


.textplus-chat-user-message, .textplus-chat-bot-message {
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    display: inline-block;
    max-width: 80%;  /*  Сообщения не шире 80% контейнера */
    word-wrap: break-word; /*  Перенос длинных слов */
    box-sizing: border-box;
}

.textplus-chat-user-message {
    background-color: #444;
    margin-left: auto;  /*  Выравнивание по правому краю */
    color: #ff9000;
}

.textplus-chat-bot-message {
    background-color: #555;
    margin-right: auto; /*  Выравнивание по левому краю */
    color: #eee;
}


.textplus-chat-input-container {
    display: flex; /*  Используем flexbox для удобного расположения */
    gap: 5px;      /*  Небольшой зазор между полем ввода и кнопкой */
    align-items: center; /* Выравнивание по центру по вертикали */
}

.textplus-chat-input {
    flex-grow: 1;   /*  Поле ввода занимает всё доступное пространство */
    padding: 10px;
    border: 1px solid #444;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    min-width: 0; /*  Важно для flexbox, чтобы input не был шире контейнера */
}

.textplus-chat-send {
    padding: 10px;
    cursor: pointer;
    background-color: #ff9000;
    color: #262626;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    white-space: nowrap; /* Запрещаем перенос текста кнопки */
    box-sizing: border-box;
}

.textplus-chat-send:hover {
    opacity: 0.8;
}

/*  Адаптация размеров кнопки и поля ввода */
@media (max-width: 600px) {
    .textplus-chat-input, .textplus-chat-send {
        padding: 8px; /*  Уменьшаем отступы на маленьких экранах */
    }
    .textplus-chat-send{
        font-size: 0.9em;
    }
}

.textplus-chat-status {
    font-style: italic;
    color: #aaa;
    margin-top: 5px;
}