/* === Стили остаются без изменений === */
        html, body {
            height: 100%;
            background-color: #f8f9fa; /* Slightly lighter background */
            overflow-x: hidden;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container-fluid { padding-right: 0; padding-left: 0; }
        @media (min-width: 768px) {
             .container-fluid.main-chat-wrapper {
                 padding-right: var(--bs-gutter-x, 0.75rem);
                 padding-left: var(--bs-gutter-x, 0.75rem);
             }
        }

        .chat-container {
            height: 90vh;
            max-height: 850px;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow */
            display: flex;
            flex-direction: column;
            border-radius: 0;
        }
         @media (min-width: 768px) {
            .chat-container { border-radius: 0.75rem; } /* Slightly larger radius */
             .chat-header { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
         }

        .chat-header {
             /* === New Gradient from Image === */
             background: linear-gradient(to right, #d9534f, #f0ad4e, #fde74c); /* Reddish -> Orange -> Yellow */
             color: white;
             padding: 0.75rem 1rem; /* Adjust padding */
             display: flex;
             align-items: center;
             justify-content: space-between; /* Space for logo and title */
        }
        

        #header-logo {
            height: 35px; /* Adjust logo size */
            width: auto;
        }

         .chat-header h1 {
             margin-bottom: 0;
             font-size: 1.1rem; /* Adjust title size */
             text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Subtle text shadow */
         }


        .chat-messages {
            flex-grow: 1;
            overflow-y: auto;
            padding: 1rem;
            display: flex;
            flex-direction: column-reverse; /* New messages appear at the bottom */
        }
        .chat-messages::-webkit-scrollbar { width: 6px; }
        .chat-messages::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
        .chat-messages::-webkit-scrollbar-thumb { background: #aaa; border-radius: 10px; }
        .chat-messages::-webkit-scrollbar-thumb:hover { background: #888; }

        .message-bubble {
            max-width: 80%;
            padding: 0.65rem 1rem;
            border-radius: 1.25rem;
            margin-bottom: 0.75rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            word-wrap: break-word;
            line-height: 1.45; /* Improve readability */
            font-size: 1rem; /* Example: Slightly smaller than default (1rem) */

        }
        /* Allow basic HTML elements from Markdown */
        .message-bubble p { margin-bottom: 0.5rem; }
        .message-bubble p:last-child { margin-bottom: 0; }
        .message-bubble ul, .message-bubble ol { padding-left: 1.5rem; margin-bottom: 0.5rem; }
        .message-bubble li { margin-bottom: 0.25rem; }
        .message-bubble strong { font-weight: bold; }
        .message-bubble em { font-style: italic; }
        .message-bubble a { color: inherit; text-decoration: underline; }
        .user-message .message-bubble a { color: white; } /* Link color in user bubble */


        .bot-message .message-bubble {
            /* Calm Light Green Gradient */
            background: linear-gradient(135deg, #fff6b9 0%, #fffcdd 100%);
            color: #000000; /* Dark green text for contrast */
            margin-right: auto;
        }

        .user-message .message-bubble {
            background: linear-gradient(135deg, #a9dcff 0%, #cce7ff 100%);
            color: #055160;
            margin-left: auto;
        }

        .input-bubble { margin-left: auto; max-width: 80%; margin-bottom: 0.75rem; }
        .input-bubble .input-group { box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-radius: 1.25rem; overflow: hidden; }
        .input-bubble .form-control { border-top-left-radius: 1.25rem; border-bottom-left-radius: 1.25rem; border-right: 0; }
        .input-bubble .btn { border-top-right-radius: 1.25rem; border-bottom-right-radius: 1.25rem; }

        .choice-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-left: auto; max-width: 80%; margin-bottom: 0.75rem; }
        .choice-pills .btn-pill {
            border-radius: 50rem;
            background: linear-gradient(135deg, #e0f2fe 0%, #cce7ff 100%);
            color: #055160;
            padding: 0.4rem 0.9rem; /* Slightly larger pills */
            font-size: 1em;
            transition: all 0.2s ease-in-out;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .choice-pills .btn-pill:hover {
             background: linear-gradient(135deg, #cce7ff 0%, #b6d4fe 100%);
             border-color: #a1c3f0;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             transform: translateY(-1px);
        }
        /* Back button styling */
        .btn-back {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
            color: #495057 !important;
            border-color: #dee2e6 !important;
        }
         .btn-back:hover {
             background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
             border-color: #adb5bd !important;
         }

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50% {
        left: 150%;
    }
    100% {
         left: 150%;
    }
}

/* === Стили для выделенной кнопки CTA (Call to Action) === */

/* Базовый стиль для кнопки с градиентом и тенью */
.btn-cta-glow {
    background: linear-gradient(45deg, #ff6b6b, #ffa500); /* Яркий оранжево-красный градиент */
    color: #055160; /* Текст того же цвета, что и у других кнопок */
    border: none; /* Убираем стандартную границу */
    position: relative; /* Необходимо для псевдоэлемента шиммера */
    overflow: hidden; /* Удерживает шиммер внутри кнопки */
    box-shadow: 0 4px 15px rgba(255, 120, 0, 0.4); /* Мягкое оранжевое свечение */
    transition: all 0.3s ease; /* Плавные переходы для hover-эффектов */
    font-weight: bold; /* Делаем текст жирнее */
    /* Убедимся, что стиль перекрывает стандартный .btn-pill */
    background-image: linear-gradient(45deg, #ff6b6b, #ffa500);
    background-size: 100%;
}

/* Эффект при наведении */
.btn-cta-glow:hover {
    transform: translateY(-2px); /* Легкий подъем кнопки */
    box-shadow: 0 6px 20px rgba(255, 120, 0, 0.6); /* Усиленное свечение */
    background-image: linear-gradient(45deg, #ff5252, #ff8c00); /* Немного темнее при наведении */
}

/* Псевдоэлемент для эффекта шиммера/перелива */
.btn-cta-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Начинается за левым краем */
    width: 100%;
    height: 100%;
    /* Белый полупрозрачный градиент для блика */
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 50%, /* Самая яркая часть блика */
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* Наклон блика */
    /* Анимация движения блика */
    animation: shimmer 3s infinite linear; /* Имя, длительность, повторение, скорость */
    opacity: 0.6; /* Легкая прозрачность блика */
}

/* Анимация шиммера */
@keyframes shimmer {
    0% {
        left: -100%; /* Начальное положение */
    }
    50% {
        left: 150%; /* Конечное положение (уходит за правый край) */
    }
    100% {
         left: 150%; /* Держится за правым краем до начала следующего цикла */
    }
}

/* Дополнительные переопределения для .choice-pills, если нужно */
.choice-pills .btn-cta-glow {
    padding: 0.6rem 1.2rem; /* Можно настроить отступы */
}