/* Контейнер для чата */
        .ds-chat-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 20px 130px 20px; /* Отступы */
            box-sizing: border-box;
            min-height: 100vh; /* Минимальная высота контейнера */
        }


        /* Основной блок чата */
        .ds-chat {
            width: 750px; /* Ширина чата */
            display: flex;
            flex-direction: column;
            position: relative;
            margin-bottom: 20px; /* Отступ снизу */
        }

        /* Контейнер для ввода текста */
        .ds-input-container {
            width: 750px; /* Ширина */
            border-radius: 24px; /* Закругленные углы */
            background-color: #2d2d2d !important; /* Темный фон */
            padding: 15px; /* Внутренние отступы */
            box-sizing: border-box; /* Учет отступов в ширине */
            display: flex;
            flex-direction: column;
            align-items: stretch; /* Растягивание по ширине */
            position: fixed; /* Фиксированное позиционирование */
            bottom: 38%; /* Отступ снизу */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Тень */
            z-index: 9999; /* Высокий z-index */
        }



        /* Начальное состояние контейнера ввода */
        .ds-input-container.initial-state {
            position: fixed; /* Фиксированное позиционирование */
            bottom: 38%; /* Отступ снизу */
            transition: transform 0.1s ease-in-out; /* Плавное перемещение */
        }

        /* Приветственный текст */
        .ds-welcome-text {
            position: fixed; /* Фиксированное позиционирование */
            bottom: 52%; /* Отступ снизу */
            transition: transform 0.1s ease-in-out; /* Плавное перемещение */
            text-align: center; /* Выравнивание по центру */
            color: #fff; /* Цвет текста */
            max-width: 750px; /* Максимальная ширина */
            padding: 20px; /* Внутренние отступы */
            opacity: 1; /* Полная видимость */
        }



        /* Заголовок приветственного текста */
        .ds-welcome-text h1 {
            margin-bottom: 15px; /* Отступ снизу */
            color: #ffffff; /* Цвет текста */
        }

        /* Параграф приветственного текста */
        .ds-welcome-text p {
            line-height: 1.6; /* Межстрочный интервал */
            color: #cccccc; /* Цвет текста */
        }

        /* Обертка для ввода текста */
        .ds-input-wrapper {
            display: flex;
            flex-direction: column;
        }

        /* Поле ввода текста */
        .ds-chat-input {
            height: 62px; /* Высота */
            width: 100% !important; /* Ширина */
            padding: 10px !important; /* Внутренние отступы */
            font-size: 14px !important; /* Размер шрифта */
            border: 1px solid #2d2d2d !important; /* Граница */
            border-radius: 10px !important; /* Закругленные углы */
            background-color: #2d2d2d !important; /* Темный фон */
            color: #ffffff !important; /* Цвет текста */
            outline: none !important; /* Убираем обводку */
            font-family: 'Arial', sans-serif !important; /* Шрифт */
            resize: none !important; /* Запрет изменения размера */
            overflow-y: auto !important; /* Прокрутка по вертикали */
            min-height: 50px !important; /* Минимальная высота */
            max-height: 200px !important; /* Максимальная высота */
            line-height: 1.5 !important; /* Межстрочный интервал */
            transition: border-color 0.1s ease; /* Плавное изменение цвета границы */
        }

        /* Стили для фокуса на поле ввода */
        .ds-chat-input:focus {
            color: #ffffff !important; /* Цвет текста */
        }

        /* Плейсхолдер для поля ввода */
        .ds-chat-input::placeholder {
            color: #888 !important; /* Цвет текста */
        }

        /* Стили для скроллбара в поле ввода */
        .ds-chat-input::-webkit-scrollbar {
            width: 6px; /* Ширина скроллбара */
        }

        .ds-chat-input::-webkit-scrollbar-thumb {
            background: #555; /* Цвет ползунка */
            border-radius: 3px; /* Закругленные углы */
        }

        .ds-chat-input::-webkit-scrollbar-track {
            background: #3d3d3d; /* Цвет трека */
        }

        /* Правые кнопки */
        .ds-right-buttons {
            justify-content: flex-end;
            display: flex;
            gap: 10px; /* Расстояние между кнопками */
        }

        /* Стили для кнопок */
        .ds-chat-button {
            padding: 8px; /* Внутренние отступы */
            border: none; /* Убираем границу */
            border-radius: 50%; /* Круглая форма */
            cursor: pointer; /* Курсор-указатель */
            color: #ffffff; /* Цвет текста */
            font-size: 14px; /* Размер шрифта */
            transition: all 0.3s ease; /* Плавные переходы */
            display: flex;
            align-items: center; /* Выравнивание по центру */
            justify-content: center; /* Выравнивание по центру */
            width: 36px; /* Ширина */
            height: 36px; /* Высота */
        }

        /* Стили для кнопки отправки */
        .ds-button-container {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .ds-left-buttons {
            display: flex;
            gap: 10px;
        }

        .ds-right-buttons {
            display: flex;
            gap: 10px;
        }

        .ds-chat-button.clear {
            background-color: #666;
            cursor: not-allowed; /* Курсор "недоступно" */
    pointer-events: none;
        }

        .ds-chat-button.clear:hover {
            background-color: #666;
        }

        .ds-chat-button.refresh {
            background-color: #666;
            cursor: not-allowed; /* Курсор "недоступно" */
    pointer-events: none;
        }

        .ds-chat-button.refresh:hover {
            background-color: #666;
        }

        .ds-chat-button.send {
            background-color: #fff;
        }

        .ds-chat-button.send svg {
            fill: #000;
        }

        .ds-chat-button.voice {
            background-color: #666;
            cursor: not-allowed; /* Курсор "недоступно" */
            pointer-events: none; /* Отключаем любые события мыши */
        }

.ds-chat-button:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* Отключаем эффект наведения для неактивных кнопок */
.ds-chat-button.clear:disabled:hover,
.ds-chat-button.refresh:disabled:hover {
    background-color: #555; /* Оставляем цвет как у неактивной кнопки */
    cursor: not-allowed; /* Оставляем курсор "недоступно" */
}
/* конец наведения */
        .send-icon,
        .square-icon {
            display: none;
        }

        .ds-chat-button.send:not(:disabled) .send-icon {
            display: block;
        }

        .ds-chat-button.send:disabled .square-icon {
            display: block;
            fill: #fff;
        }

        .hidden {
            display: none;
        }

        .retry-icon svg {
            fill: #fff;
        }

        /* Показ иконки отправки для активной кнопки */
        .ds-chat-button.send:not(:disabled) .send-icon {
            display: block; /* Отображение */
        }

        /* Показ иконки квадрата для неактивной кнопки */
        .ds-chat-button.send:disabled .square-icon {
            display: block; /* Отображение */
            fill: #fff; /* Цвет иконки */
        }

        /* Скрытие элементов */
        .hidden {
            display: none; /* Скрытие */
        }
        
     /* Всплывающее кастомное уведомление*/   
.custom-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Высокий z-index, чтобы было поверх всего */
}

.custom-alert.hidden {
    display: none; /* Скрываем popup по умолчанию */
}

.custom-alert-content {
    background: #2d2d2d; /* Темный фон */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 300px; /* Максимальная ширина */
}

.custom-alert-content p {
    color: #fff; /* Белый текст */
    margin-bottom: 20px;
}

.custom-alert-content button {
    background: #ff4444; /* Красный фон */
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.custom-alert-content button:hover {
    background: #cc0000; /* Темнее при наведении */
}

/* Стили для планшетов (ширина экрана от 768px до 1024px) */
@media (max-height: 850px) {
.ds-welcome-text {
    bottom: 54%; /* Отступ снизу */
  }
}

/* Стили для планшетов (ширина экрана от 768px до 1024px) */
@media (max-height: 750px) {
.ds-welcome-text {
     bottom: 56%; /* Отступ снизу */
  }
}

/* Стили для телефонов (ширина экрана до 768px) */
@media (max-height: 650px) {
.ds-welcome-text {
    bottom: 58%; /* Отступ снизу */
  }
}

/* Стили для телефонов (ширина экрана до 768px) */
@media (max-height: 550px) {
.ds-welcome-text {
    bottom: 60%; /* Отступ снизу */
  }
}

/* Стили для телефонов (ширина экрана до 768px) */
@media (max-height: 450px) {
.ds-welcome-text {
    bottom: 63%; /* Отступ снизу */
  }
}