/* ============================================================================
   aichat.css — глобальные стили страницы /aiGUI
   ============================================================================
   Здесь живут только те правила, которые нельзя оформить в scoped CSS
   компонента (AiChatComponent.razor.css), потому что Syncfusion рендерит
   соответствующий DOM в ПОРТАЛЕ за пределами компонента:
     • выпадающий popup SfDropDownList — переезжает в document.body;
     • контейнер тостов SfToast — также рендерится глобально.

   Чтобы scoped-атрибуты [b-xxx] не требовались, селекторы тут глобальные.
   Чтобы случайно не задеть другие dropdown'ы на сайте, привязываемся к
   уникальному классу .aichat-model-dropdown (передаётся через CssClass на
   SfDropDownList в разметке).
   ============================================================================ */


/* ===== ВЫПАДАЮЩИЙ СПИСОК МОДЕЛЕЙ ===========================================
   Syncfusion прокидывает CssClass="aichat-model-dropdown" одновременно на корневой
   элемент и на обёртку popup'а (.e-popup). Все правила ниже сужены префиксом
   .e-popup.aichat-model-dropdown — это страхует от затрагивания других дропдаунов
   на сайте и одновременно повышает специфичность относительно дефолтных
   стилей темы bootstrap5.
   =========================================================================== */

/* Базовый «вид элемента» в открытом списке.
   Лёгкий разделитель снизу делает список читаемее, чем сплошной фон. */
.e-popup.aichat-model-dropdown .e-dropdownbase .e-list-item {
    background: #ffffff;
    color: #1d1f23;
    padding: 10px 14px;
    /* Тема bootstrap5 задаёт .e-list-item собственный text-indent — из-за него текст
       названий «уезжал» вправо, будто слева есть иконка. Обнуляем, чтобы имя модели
       начиналось строго от padding-left строки. */
    text-indent: 0;
    border-bottom: 1px solid #f1f3f5;
    line-height: 1.35;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Последний элемент — без нижней линии (иначе двойная линия с краем popup'а). */
.e-popup.aichat-model-dropdown .e-dropdownbase .e-list-item:last-child {
    border-bottom: none;
}

/* Hover/keyboard-focus: мягкая фиолетовая заливка (тон страничного акцента),
   тёмный текст сохраняем — это даёт хороший контраст. */
.e-popup.aichat-model-dropdown .e-dropdownbase .e-list-item.e-hover,
.e-popup.aichat-model-dropdown .e-dropdownbase .e-list-item.e-item-focus {
    background: #f3f1ff;
    color: #1d1f23;
}

/* Текущая выбранная модель в списке: акцентный фон + цвет. */
.e-popup.aichat-model-dropdown .e-dropdownbase .e-list-item.e-active,
.e-popup.aichat-model-dropdown .e-dropdownbase .e-list-item.e-active.e-hover {
    background: rgba(108, 92, 231, 0.14);
    color: #4b3fc8;
    font-weight: 600;
}

/* ---------- ВНУТРЕННИЙ LAYOUT ITEM TEMPLATE'а ------------------------------
   Структура внутри каждой .e-list-item:
     .model-item                              flex-контейнер
       .model-item-text                       блок имени + описания
         .model-item-name                     жирный заголовок
         .model-item-desc                     серое описание под заголовком
       .model-locked-badge                    бейдж «Скоро» (для locked-моделей)
   --------------------------------------------------------------------------- */

.e-popup.aichat-model-dropdown .model-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
}

.e-popup.aichat-model-dropdown .model-item-text {
    flex: 1 1 auto;
    min-width: 0; /* нужен, чтобы длинное описание умело переноситься в flex-родителе */
}

.e-popup.aichat-model-dropdown .model-item-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: inherit; /* перенимаем цвет от .e-list-item — корректно меняется на hover/active */
    margin: 0;
}

.e-popup.aichat-model-dropdown .model-item-desc {
    font-size: 0.78rem;
    color: #6c757d;
    margin-top: 2px;
    white-space: normal; /* длинное описание переносится, а не обрезается */
}

/* Состояние «заблокирована» — лёгкая «приглушённость» внутри строки,
   но фон строки всё ещё белый, чтобы текст оставался контрастным. */
.e-popup.aichat-model-dropdown .model-item.model-locked .model-item-name {
    color: #6c757d;
}

.e-popup.aichat-model-dropdown .model-item.model-locked .model-item-desc {
    color: #a9adb2;
}

/* Бейдж «Скоро» справа от названия. Делаем заметным, но не «кричащим». */
.e-popup.aichat-model-dropdown .model-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c5ce7;
    background: rgba(108, 92, 231, 0.10);
    border: 1px solid rgba(108, 92, 231, 0.25);
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.e-popup.aichat-model-dropdown .model-locked-badge i {
    font-size: 0.65rem;
}


/* ===== СВЁРНУТЫЙ ВИД ДРОПДАУНА (ValueTemplate) =============================
   ValueTemplate рендерится прямо внутри инпута SfDropDownList — это часть
   компонента в render tree, scoped CSS бы туда дошёл. Но чтобы все стили
   связанные с моделью лежали в одном файле, дублируем здесь же глобальной
   версией. Селектор .aichat-model-dropdown сужает область до нужного дропдауна.
   =========================================================================== */

/* Контейнер ValueTemplate, который Syncfusion создаёт ВНУТРИ инпута: .e-input-value.
   По умолчанию его контент прижат к верхнему-левому краю (без вертикального
   центрирования), из-за чего иконка и имя модели «уезжали» вверх. Делаем обёртку
   flex-контейнером во всю высоту инпута и центрируем по вертикали — тогда
   иконка + текст стоят ровно по центру свёрнутого дропдауна. */
.aichat-model-dropdown.e-input-group .e-input-value,
.aichat-model-dropdown .e-input-value {
    display: inline-flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding-top: 0;
    /* Левый отступ, чтобы иконка выбранной модели не липла к рамке инпута и
       визуально совпадала по левому краю с элементами открытого списка (у них padding-left 14px). */
    padding-left: 14px;
}

.aichat-model-dropdown .model-value {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #2d3436;
    font-weight: 500;
    line-height: 1; /* убираем лишнюю высоту строки, чтобы иконка и текст были на одной базовой линии */
}

.aichat-model-dropdown .model-value i {
    font-size: 0.9rem;
    color: #6c5ce7;
    line-height: 1;
}


/* ===== ТОСТЫ AI-ЧАТА =======================================================
   SfToast рендерится в портале по id="aichat_toast". Цвета приходят из темы
   bootstrap5 (e-toast-success / e-toast-warning / e-toast-danger / e-toast-info),
   но дефолтные иконки темы маленькие и невыразительные — мы вставляем
   FontAwesome иконку прямо в Title (см. ShowToastAsync). Здесь — только
   мягкая «доводка»: тень, скругление, расстояние от края.
   =========================================================================== */

#aichat_toast .e-toast {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    min-width: 320px;
    max-width: 420px;
}

/* Заголовок: чуть крупнее и плотнее, чем дефолт темы, чтобы Title с иконкой
   FontAwesome (вставляется в ShowToastAsync) выглядел сбалансированно. */
#aichat_toast .e-toast .e-toast-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

#aichat_toast .e-toast .e-toast-title i {
    font-size: 0.95rem;
    margin-right: 0.25rem;
}

#aichat_toast .e-toast .e-toast-content {
    font-size: 0.82rem;
    line-height: 1.4;
    color: #495057;
    margin-top: 2px;
}

/* Отступ от верхнего края страницы, чтобы тост не «прилипал» к шапке. */
#aichat_toast.e-toast-container.e-toast-top-right {
    top: 20px;
    right: 20px;
}