/* chat.css */

    /* Стили для контейнера чата */
    .chat-container {
        height: 400px; /* Фиксированная высота для появления прокрутки */
        overflow-y: auto; /* Включаем вертикальную прокрутку */
        border: 1px solid #dee2e6; /* Легкая рамка */
        border-radius: 8px; /* Скругленные углы */
        padding: 15px; /* Внутренний отступ для всего поля чата */
        display: flex; /* Используем flexbox для расположения сообщений */
        flex-direction: column; /* Располагаем сообщения вертикально */
        gap: 10px; /* Пространство между сообщениями */
        background-color: #f8f9fa; /* Светлый фон для области чата */
    }

    /* Базовые стили для всех сообщений */
    .message {
        max-width: 75%; /* Сообщения занимают до 75% ширины контейнера */
        padding: 12px 18px; /* Увеличенный внутренний отступ для "пузыря" сообщения */
        border-radius: 18px; /* Немного более сильное скругление углов для эффекта "пузыря" */
        word-wrap: break-word; /* Перенос длинных слов */
        line-height: 1.4; /* Увеличиваем межстрочный интервал для лучшей читаемости */
        box-shadow: 0 1px 2px rgba(0,0,0,.08); /* Чуть более заметная тень для объема */
        position: relative; /* Для позиционирования времени внутри сообщения */
    }

    /* Стили для сообщений клиента (ваших) - Пастельно-голубой */
    .client-message {
        background-color: #cce5ff; /* Мягкий, светло-голубой цвет */
        color: #004085; /* Более темный синий для текста, хороший контраст */
        align-self: flex-end; /* Выравнивает сообщение по правому краю контейнера */
        margin-left: auto; /* Отталкивает сообщение влево, если max-width не заполнен */
    }

    /* Стили для сообщений директора (другого пользователя) - Белый */
    .director-message {
        background-color: #ffffff; /* Чисто белый фон */
        color: #212529; /* Темный текст */
        border: 1px solid #e9ecef; /* Легкая граница, чтобы белый "пузырь" был виден на светлом фоне чата */
        align-self: flex-start; /* Выравнивает сообщение по левому краю контейнера */
        margin-right: auto; /* Отталкивает сообщение вправо */
    }

    /* Имя отправителя внутри сообщения */
    .message strong {
        display: block; /* Имя на отдельной строке */
        margin-bottom: 5px; /* Отступ под именем */
        font-size: 0.9em; /* Чуть меньше размер шрифта */
        color: rgba(0,0,0,0.7); /* Чуть менее приглушенный цвет */
    }

    /* Время отправки сообщения */
    .message-time {
        font-size: 0.75em; /* Очень маленький шрифт для времени */
        color: rgba(0,0,0,0.5); /* Сильно приглушенный цвет */
        margin-top: 5px; /* Отступ сверху */
        text-align: right; /* Выравнивание времени по правому краю сообщения */
        display: block; /* Время на отдельной строке */
    }

    /* Стили для поля ввода сообщения */
    #message-input {
        resize: none; /* Запрещаем изменение размера textarea пользователем */
        border-top-right-radius: 0; /* Убираем скругление сверху справа */
        border-bottom-right-radius: 0; /* Убираем скругление снизу справа */
    }

    /* Стили для кнопки отправки */
    #send-button {
        border-top-left-radius: 0; /* Убираем скругление сверху слева */
        border-bottom-left-radius: 0; /* Убираем скругление снизу слева */
    }

    /* Корректировки для группы ввода */
    .input-group {
        margin-top: 15px; 
    }