/* css/telegram_app.css */

/* --- Исправления для сайдбара --- */
/* Убедимся, что контент сайдбара может прокручиваться */

.message-bubble {
    background: #e7f1fe;
    color: black;
    border-radius: 8px;
    padding: 8px;
    font-size: var(--font-size-medium);
    /* Используем переменную */
    margin-left: auto;
    margin-right: 5px;
    border-top-right-radius: 4px;
    width: fit-content;
    max-width: 80%;
}

.sidebar {
    /* ... существующие стили ... */
    display: flex;
    /* Добавляем flexbox */
    flex-direction: column;
    /* Располагаем элементы вертикально */
    height: 100%;
    /* Занимаем всю высоту */
    /* ... существующие стили ... */
}

#app-bar {
    width: 100%;
    /* Занимает всю доступную ширину */
    margin-left: auto;
    /* Центрирование */
    margin-right: auto;
    padding-left: 5px;
    padding-right: 5px;
    /* Центрирование */
    box-sizing: border-box;
    /* Учитываем padding в общей ширине */
}

/* Обновляем стиль для контейнера контента сайдбара */
.sidebar-content {
    /* height: calc(100% - 160px); */
    /* Убираем фиксированную высоту */
    flex-grow: 1;
    /* Занимаем всё доступное пространство */
    overflow-y: auto;
    /* Разрешаем вертикальную прокрутку */
    padding: 0 12px 12px 12px;
    /* Добавляем padding снизу */
    /* padding: 0 12px; */
    /* Заменяем существующий padding */
    /* ... остальные существующие стили ... */
    box-sizing: border-box;
    /* Учитываем padding в высоте */
}

/* --- Стиль для чекбоксов вместо переключателей --- */
/* Скрываем оригинальный чекбокс */
.setting-item input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Стилизуем кастомный чекбокс */
.setting-item .switch {
    display: block;
    /* Или inline-block */
    position: relative;
    cursor: pointer;
    /* Размеры */
    width: 20px;
    height: 20px;
    /* Цвет фона */
    background-color: #e5e7eb;
    /* gray-200 */
    border-radius: 4px;
    /* Немного скругленные углы */
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    /* Предотвращаем сжатие */
}

/* Стилизуем "галочку" */
.setting-item .switch::after {
    content: "";
    position: absolute;
    display: none;
    /* Скрываем по умолчанию */
    /* Позиционирование по центру */
    left: 7px;
    top: 3px;
    /* Размеры галочки */
    width: 6px;
    height: 10px;
    /* Стиль галочки */
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Стиль при отмеченном состоянии */
.setting-item input[type="checkbox"]:checked+.switch {
    background-color: #3b82f6;
    /* blue-500 */
}

.setting-item input[type="checkbox"]:checked+.switch::after {
    display: block;
    /* Показываем галочку */
}

/* Стиль при наведении */
.setting-item .switch:hover {
    background-color: #d1d5db;
    /* gray-300 */
}

.setting-item input[type="checkbox"]:checked+.switch:hover {
    background-color: #2563eb;
    /* blue-600 */
}

/* --- Исправления для секции настроек (если они еще не применены) --- */
#settings-section {
    padding-top: 10px;
    height: auto;
    /* Убираем фиксированную высоту */
    box-sizing: border-box;
}

.settings-group {
    padding: 12px;
    /* Уменьшаем padding */
    margin-bottom: 15px;
    /* Уменьшаем отступ между группами */
    background-color: #f8fafc;
    border-radius: 8px;
    /* Уменьшаем радиус */
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.settings-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    /* Уменьшаем отступ снизу */
    font-size: var(--font-size-large);
    /* Используем переменную */
    text-align: left;
}

.setting-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 0;
    /* Уменьшаем отступ */
    width: 100%;
    box-sizing: border-box;
}

.setting-label {
    font-size: var(--font-size-medium);
    /* Используем переменную */
    color: #334155;
    font-weight: 500;
    margin-bottom: 4px;
    /* Уменьшаем отступ */
}

.setting-description {
    font-size: var(--font-size-small);
    /* Используем переменную */
    color: #64748b;
    margin-top: 3px;
    margin-bottom: 8px;
    /* Уменьшаем отступ */
    line-height: 1.4;
}

/* Стилизация select */
.language-select {
    width: 100%;
    padding: 8px 10px;
    /* Уменьшаем padding */
    border-radius: 6px;
    /* Уменьшаем радиус */
    border: 1px solid #cbd5e1;
    background-color: white;
    font-size: var(--font-size-medium);
    /* Используем переменную */
    box-sizing: border-box;
    appearance: none;
    /* Убираем стандартные стрелки */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
}

/* Стилизация ползунка токенов */
.token-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Уменьшаем расстояние */
    width: 100%;
    margin-top: 0;
    /* Убираем margin-top, так как отступ уже есть у .setting-description */
}

.token-range {
    flex-grow: 1;
    height: 5px;
    /* Уменьшаем высоту */
    border-radius: 2.5px;
    /* Половина высоты */
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
}

.token-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    /* Уменьшаем размер "палца" */
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.token-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.token-value {
    font-size: var(--font-size-medium);
    /* Используем переменную */
    font-weight: 600;
    color: #3b82f6;
    min-width: 55px;
    /* Уменьшаем минимальную ширину */
    text-align: center;
    padding: 4px 8px;
    /* Уменьшаем padding */
    background-color: #eff6ff;
    border-radius: 4px;
}

/* Стиль для футера настроек */
.settings-footer {
    margin-top: 5px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* Стиль для кнопки сохранения */
#save-ai-settings {
    background: #4c6ef5;
    color: white;
    border: none;
    padding: 10px 16px;
    /* Уменьшаем padding */
    border-radius: 6px;
    /* Уменьшаем радиус */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    /* Используем переменную */
    width: 100%;
    max-width: 250px;
    /* Уменьшаем максимальную ширину */
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Добавляем тень */
}

#save-ai-settings:hover {
    background: #3b5bd9;
    transform: translateY(-1px);
    /* Небольшой подъем */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#save-ai-settings:disabled {
    background: #a5b4fc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Стиль для спиннера внутри кнопки */
.spinner {
    width: 16px;
    /* Уменьшаем размер */
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s linear infinite;
    margin-left: 8px;
    /* Уменьшаем отступ */
    display: inline-block;
    flex-shrink: 0;
}

/* Стиль для сообщения статуса сохранения */
.save-status {
    margin-top: 12px;
    /* Уменьшаем отступ сверху */
    min-height: 20px;
    font-size: var(--font-size-medium);
    /* Используем переменную */
    font-weight: 500;
    text-align: center;
    padding: 6px 10px;
    /* Уменьшаем padding */
    border-radius: 4px;
    /* Уменьшаем радиус */
    display: none;
    /* Скрыто по умолчанию */
}

.save-status.success {
    color: #10b981;
    background-color: #d1fae5;
    border: 1px solid #a7f3d0;
    display: block;
    /* Показываем при успехе */
}

.save-status.error {
    color: #ef4444;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    display: block;
    /* Показываем при ошибке */
}

.save-status.loading {
    color: #3b82f6;
    background-color: #dbeafe;
    border: 1px solid #bfdbfe;
    display: block;
    /* Показываем при загрузке */
}

/* --- Адаптивность для секции настроек --- */
@media (max-width: 768px) {
    #settings-section {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 8px;
    }

    .settings-group {
        padding: 10px;
        margin-bottom: 12px;
    }

    .settings-title {
        font-size: var(--font-size-xlarge);
        /* Используем переменную */
        margin-bottom: 10px;
    }

    .setting-item {
        padding: 8px 0;
    }

    .setting-label {
        font-size: var(--font-size-small);
        /* Используем переменную */
    }

    .setting-description {
        font-size: 10px;
        /* Можно также использовать переменную, если она соответствует */
        margin-bottom: 6px;
    }

    .language-select {
        padding: 6px 8px;
        font-size: var(--font-size-small);
        /* Используем переменную */
    }

    .token-input-container {
        gap: 8px;
    }

    .token-range {
        height: 4px;
    }

    .token-range::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }

    .token-range::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }

    .token-value {
        font-size: var(--font-size-small);
        /* Используем переменную */
        min-width: 50px;
        padding: 3px 6px;
    }

    .settings-footer {
        margin-top: 5px;
    }

    #save-ai-settings {
        padding: 8px 12px;
        font-size: var(--font-size-medium);
        /* Используем переменную */
        max-width: 100%;
    }

    .spinner {
        width: 14px;
        height: 14px;
        margin-left: 6px;
    }

    .save-status {
        margin-top: 10px;
        font-size: var(--font-size-small);
        /* Используем переменную */
        padding: 5px 8px;
    }
}

@media (max-width: 480px) {
    #settings-section {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 6px;
    }

    .settings-group {
        padding: 8px;
        margin-bottom: 10px;
    }

    .settings-title {
        font-size: var(--font-size-medium);
        /* Используем переменную */
        margin-bottom: 8px;
    }

    .setting-item {
        padding: 6px 0;
    }

    .setting-label {
        font-size: var(--font-size-small);
        /* Используем переменную */
    }

    .setting-description {
        font-size: 9px;
        /* Можно также использовать переменную, если она соответствует */
        margin-bottom: 5px;
    }

    .language-select {
        padding: 5px 6px;
        font-size: var(--font-size-small);
        /* Используем переменную */
    }

    .token-value {
        font-size: var(--font-size-small);
        /* Используем переменную */
        min-width: 45px;
        padding: 2px 5px;
    }

    .settings-footer {
        margin-top: 5px;
    }

    #save-ai-settings {
        padding: 6px 10px;
        font-size: var(--font-size-small);
        /* Используем переменную */
    }

    .save-status {
        margin-top: 8px;
        font-size: 11px;
        /* Можно также использовать переменную, если она соответствует */
        padding: 4px 6px;
    }
}

/* --- Обновленные/Добавленные стили для секции настроек (конец) --- */
/* Убедимся, что анимация спиннера определена */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- Стиль для чекбоксов вместо переключателей (справа) --- */
/* Обновленный вариант */
/* Контейнер для всего элемента настройки, который включает лейбл/описание и чекбокс */
.setting-item {
    /* ... другие существующие стили ... */
    flex-direction: row;
    /* Располагаем элементы в строку */
    justify-content: space-between;
    /* Распределяем пространство между левой (текст) и правой (чекбокс) частями */
    align-items: center;
    /* Выравниваем по центру по вертикали */
}

/* Контейнер для лейбла и описания */
.setting-item>div:first-child {
    /* Занимает всё доступное пространство, кроме места под чекбокс */
    flex-grow: 1;
    /* Выравнивание текста по левому краю */
    text-align: left;
    /* Отступ справа, чтобы текст не прилипал к чекбоксу */
    margin-right: 15px;
}

/* Контейнер для чекбокса - обертка для стилизации */
.setting-item .switch-wrapper {
    /* Не растягиваем, используем внутренние размеры */
    flex-shrink: 0;
    /* Предотвращаем сжатие */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Можно добавить минимальную ширину, если нужно больше пространства вокруг чекбокса */
    /* min-width: 30px; */
}

/* Скрываем оригинальный чекбокс */
.setting-item input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
    /* Можно добавить z-index -1 для надежности */
    z-index: -1;
}

/* Стилизуем кастомный чекбокс */
.setting-item .switch {
    /* Теперь .switch это label */
    display: block;
    position: relative;
    cursor: pointer;
    /* Размеры */
    width: 20px;
    height: 20px;
    /* Цвет фона */
    background-color: #e5e7eb;
    /* gray-200 */
    border-radius: 4px;
    /* Немного скругленные углы */
    transition: background-color 0.2s ease;
    /* Центрируем внутри .switch-wrapper */
    margin: 0;
}

/* Стилизуем "галочку" */
.setting-item .switch::after {
    content: "";
    position: absolute;
    display: none;
    /* Скрываем по умолчанию */
    /* Позиционирование по центру */
    left: 7px;
    top: 3px;
    /* Размеры галочки */
    width: 6px;
    height: 10px;
    /* Стиль галочки */
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Стиль при отмеченном состоянии */
.setting-item input[type="checkbox"]:checked+.switch {
    background-color: #3b82f6;
    /* blue-500 */
}

.setting-item input[type="checkbox"]:checked+.switch::after {
    display: block;
    /* Показываем галочку */
}

/* Стиль при наведении */
.setting-item .switch:hover {
    background-color: #d1d5db;
    /* gray-300 */
}

.setting-item input[type="checkbox"]:checked+.switch:hover {
    background-color: #2563eb;
    /* blue-600 */
}

/* --- Адаптивность для чекбоксов справа --- */
@media (max-width: 768px) {
    .setting-item {
        /* На меньших экранах можно уменьшить отступ */
        /* padding-left: 10px; */
        /* padding-right: 10px; */
    }

    .setting-item>div:first-child {
        margin-right: 12px;
        /* Уменьшаем отступ справа */
    }

    .setting-item .switch {
        width: 18px;
        /* Уменьшаем размер */
        height: 18px;
    }

    .setting-item .switch::after {
        left: 6px;
        /* Корректируем позицию галочки */
        top: 2px;
        width: 5px;
        /* Уменьшаем размер галочки */
        height: 9px;
    }
}

@media (max-width: 480px) {
    .setting-item>div:first-child {
        margin-right: 10px;
        /* Еще больше уменьшаем отступ справа */
    }

    .setting-item .switch {
        width: 16px;
        /* Еще больше уменьшаем размер */
        height: 16px;
    }

    .setting-item .switch::after {
        left: 5px;
        /* Еще больше корректируем позицию галочки */
        top: 2px;
        width: 4px;
        /* Еще больше уменьшаем размер галочки */
        height: 8px;
    }
}

/* --- Стиль для элемента настройки с ползунком --- */
/* Гарантирует вертикальное расположение элементов внутри, игнорируя общие стили .setting-item */
.setting-item--slider {
    /* Принудительно устанавливаем вертикальное направление */
    flex-direction: column !important;
    /* !important для переопределения основного стиля .setting-item */
    /* Выравнивание по левому краю */
    align-items: flex-start !important;
    /* Пространство между элементами */
    justify-content: flex-start !important;
}

/* Убедимся, что контейнер ползунка занимает всю ширину */
.setting-item--slider .token-input-container {
    width: 100% !important;
    /* !important для надежности */
    /* Центрируем элементы внутри контейнера ползунка, если нужно */
    /* display: flex; */
    /* align-items: center; */
    /* gap: 12px; */
    /* Или используем margin/padding для отступа между ползунком и значением */
}

/* --- Стиль для центрирования области ввода на больших экранах --- */
/* По умолчанию оберточный div занимает 100% ширины своего родителя */
.input-area-wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* Убедимся, что внутренние элементы тоже соблюдают размеры */
    box-sizing: border-box;
}

/* Медиа-запрос для больших экранов (например, ширина 1200px и больше)
   Вы можете изменить значение 1200px на любое другое, считающееся "большим" экраном */
@media (min-width: 1200px) {
    .input-area-wrapper {
        /* Устанавливаем ширину 70% */
        width: 70%;
        /* margin: 0 auto; это сокращенная запись для центрирования по горизонтали */
        /* margin-left: auto; и margin-right: auto; уже заданы выше, поэтому повторно не нужны */
    }
}

/* --- Стили для основного содержимого и области ввода --- */
/* Убедимся, что основной фон страницы белый */
/* Если у тебя уже есть правило для body или #app-container / #root,
   возможно, нужно изменить его, а не добавлять новое */
/* Стилизация контейнера области ввода */
.input-area-container {
    /* ... другие существующие стили (например, border-t) ... */
    background-color: #f8fafc;
    /* Очень светлый серый (Tailwind slate-50 или gray-50) */
    /* Тонкая граница сверху, если нужно */
    /* Закругление углов */
    /* Значение 24px дает хороший овал; можно изменить (16px, 20px) */
    /* Имитация внутреннего отступа через padding */
    padding: 12px;
    /* Внешний отступ внутри контейнера */
    /* Центрирование и ограничение ширины (используя уже созданный .input-area-wrapper) */
    /* Эти стили применяются к .input-area-wrapper, который должен быть в HTML */
    /* Если .input-area-wrapper отсутствует, добавь его в HTML или примени эти стили напрямую к .input-area-container */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Стилизация внутренней части области ввода */
/* Это твой существующий .relative div внутри .input-area-container */
.input-area-container>.relative {
    /* Или используй ID, если он есть, например, #input-area-inner */
    /* Фон внутренней области (где textarea и кнопки) */
    background-color: #ffffff;
    /* Белый фон внутренней области */
    /* Закругление внутренней области */
    /* Меньше, чем у контейнера, чтобы осталось "поле" серого */
    /* Тень внутри для глубины (необязательно) */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* Очень легкая тень */
    /* Отступы внутри */
    padding-left: 0.75rem;
    /* 12px / 16px = 0.75rem */
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    /* Убедиться, что внутренние элементы соблюдают размеры */
    box-sizing: border-box;
}

/* --- Адаптация ширины на больших экранах --- */
/* Предполагается, что .input-area-wrapper существует в HTML */
@media (min-width: 1200px) {
    .input-area-wrapper {
        /* Или .input-area-container, если применяешь напрямую */
        width: 70%;
        /* Центрирование происходит за счет margin: 0 auto;
       или отдельно margin-left: auto; margin-right: auto;
       которые уже заданы выше */
    }
}

/* Стили для переключателей */
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #4f46e5;
    /* indigo-600 */
}

input:checked+.slider:before {
    transform: translateX(16px);
}

/* Стили для активных иконок */
.icon-active {
    color: #4f46e5;
    /* indigo-600 */
}

/* Стили для кнопок */
button:focus {
    outline: none;
}

button:active {
    transform: scale(0.95);
}

/* Стили для сайдбара */
.sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-section-btn.active {
    background-color: #eff6ff;
    color: #3b82f6;
}

.sidebar-section-content {
    display: none;
}

.sidebar-section-content.active {
    display: block;
}

.hidden {
    display: none;
}

/* Стили для модального окна */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--font-size-base);
    /* Используем переменную */
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.btn-secondary {
    background-color: #ef4444;
    color: white;
    border: none;
}

.btn-secondary:hover {
    background-color: #dc2626;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
}

.btn-outline:hover {
    background-color: #f9fafb;
}

/* Стили для примеров использования */
.life-sphere-card,
.subcategory-item,
.topic-item,
.prompt-item {
    transition: all 0.2s ease;
    cursor: pointer;
}

.life-sphere-card:hover,
.subcategory-item:hover,
.topic-item:hover,
.prompt-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.back-button {
    cursor: pointer;
    transition: color 0.2s ease;
}

.back-button:hover {
    color: #3b82f6;
}

.sidebar-section-content {
    height: 100%;
    overflow-y: auto;
}

.prompt-item {
    border-left: 3px solid transparent;
}

.prompt-item:hover {
    border-left-color: #3b82f6;
}

.life-sphere-card {
    background-color: #F8FAFC;
    border-radius: 12px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.life-sphere-card:hover {
    background-color: #F1F5F9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.life-sphere-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.life-sphere-title {
    font-weight: 600;
    color: #1E293B;
    font-size: var(--font-size-medium);
    /* Используем переменную */
}

.subcategory-item {
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.subcategory-item:hover {
    background-color: #F1F5F9;
}

.subcategory-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.subcategory-title {
    font-weight: 500;
    color: #334155;
    font-size: var(--font-size-medium);
    /* Используем переменную */
}

.topic-item {
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.topic-item:hover {
    background-color: #F1F5F9;
}

.topic-title {
    font-weight: 500;
    color: #475569;
    font-size: var(--font-size-medium);
    /* Используем переменную */
}

.prompt-item {
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    margin-bottom: 8px;
}

.prompt-item:hover {
    background-color: #F1F5F9;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.prompt-title {
    font-weight: 600;
    color: #1E293B;
    font-size: var(--font-size-medium);
    /* Используем переменную */
    margin-bottom: 4px;
}

.prompt-description {
    font-size: var(--font-size-small);
    /* Используем переменную */
    color: #64748B;
    line-height: 1.4;
}

.back-button {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: #3B82F6;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 12px;
    width: fit-content;
    font-size: var(--font-size-medium);
    /* Используем переменную */
}

.back-button:hover {
    background-color: #EFF6FF;
}

.examples-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.examples-title {
    font-size: var(--font-size-xlarge);
    /* Используем переменную */
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.hidden {
    display: none !important;
}

/* Существующие стили из вашего кода */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    visibility: visible;
}

:root {
    --font-size-base: 14px;
    --font-size-small: 12px;
    --font-size-medium: 13px;
    --font-size-large: 15px;
    --font-size-xlarge: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
    background-color: #F9FAFB;
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size-base);
    /* Используем переменную */
}

#app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

#chat-area {
    padding-left: 150px;
    padding-right: 150px;
    height: auto;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    overscroll-behavior: none;
}

#root,
#app-container {
    height: 100%;
    min-height: 100vh;
    background-color: #f0f2f5;
    padding-top: env(safe-area-inset-top, 0);
    position: relative;
    overflow: hidden;
}

.message {
    max-width: 100%;
    border-radius: 18px;
    padding: 12px 16px;
    margin-bottom: 12px;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
    display: flex;
    min-width: 0;
    justify-content: flex-start;
}

.message-text {
    /* Принудительный перенос длинных слов */
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;

    /* Ограничение ширины */
    max-width: 100%;

    /* Сохранение форматирования для кода */
    white-space: pre-wrap;
}

.message-text pre {
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Дополнительные стили для disabled состояния */
#send-button:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

#send-button:disabled svg {
    opacity: 0.5;
}

/* Для inline кода */
.message-text code {
    word-break: break-word;
}

#chat-messages>.message:first-child {
    margin-top: 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-message {
    background: #f4f8fe;
    color: black;
    border-radius: 8px;
    padding: 8px;
    font-size: var(--font-size-medium);
    margin-left: auto;
    margin-right: 5px;
    margin-bottom: -3px;
    border-top-right-radius: 4px;
    width: fit-content;
    max-width: 80%;

    /* Управление пробелами */
    white-space: pre-wrap;
    /* сохраняет переносы, но убирает лишние пробелы */
    word-wrap: break-word;
    /* перенос длинных слов */

    min-width: 0;
    overflow: hidden;
}

/* Убираем trailing margin у последнего элемента в сообщении */
.message-text.no-trailing-margin p:last-child,
.message-text.no-trailing-margin br:last-child {
    margin-bottom: 0 !important;
}


.agent-message {
    background-color: #f8f9fa;
    color: #1F2937;
    border-radius: 8px;
    border-top-left-radius: 4px;
    font-size: var(--font-size-medium);
    /* Используем переменную */
    padding: 12px;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .message {
        padding: 0 8px;
        justify-content: flex-start;
    }

    .user-message {
        max-width: 70%;
        margin-right: 5px;
        font-size: var(--font-size-medium);
        /* Используем переменную */
        padding: 10px 12px;
    }

    .agent-message {
        max-width: 100%;
        padding: 10px 12px;
        font-size: var(--font-size-medium);
        /* Используем переменную */
    }
}

@media (max-width: 480px) {
    .message {
        padding: 0 4px;
    }

    .user-message {
        max-width: 70%;
        margin-right: 5px;
        font-size: var(--font-size-medium);
        /* Используем переменную */
        padding: 8px 10px;
    }

    .agent-message {
        max-width: 100%;
        padding: 8px 10px;
        font-size: var(--font-size-medium);
        /* Используем переменную */
    }
}

@supports (-webkit-touch-callout: none) {
    .user-message {
        margin-right: 5px !important;
        font-size: var(--font-size-medium);
        /* Используем переменную */
    }
}

.message .formatted-content {
    width: 100%;
    box-sizing: border-box;
}

.input-textarea {
    resize: none;
    min-height: 44px;
    max-height: 300px;
    line-height: 1.5;
    overflow-y: auto;
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    padding: 12px 48px 12px 16px;
}

.formatted-content {
    line-height: 1.6;
    font-size: var(--font-size-medium);
    /* Используем переменную */
}

.math-formula {
    font-family: monospace;
    font-size: 0.8em;
    border-left: 3px solid #3B82F6;
    padding-left: 10px;
    margin: 5px 0;
    display: inline-block;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

.message iframe {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 8px;
    background: white;
    height: auto;
    aspect-ratio: 16/9;
}

.model-selector {
    background-color: #F3F4F6;
    border-radius: 12px;
    padding: 8px 12px;
    border: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    font-family: inherit;
    width: 100%;
    font-size: var(--font-size-base);
    /* Используем переменную */
}

.sidebar {
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    background-color: #ffffff;
    height: 100%;
    max-width: 350px;
    width: 85%;
    z-index: 50;
    box-shadow:
        0 0 25px rgba(0, 0, 0, 0.08),
        0 10px 20px -15px rgba(0, 0, 0, 0.1);
    border-radius: 0 16px 16px 0;
    overflow: hidden;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar>div:first-child {
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 0.3s ease 0.15s,
        transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.15s;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(to bottom, white 90%, #f9f9f9);
}

.sidebar.open>div:first-child {
    opacity: 1;
    transform: translateY(0);
}

.dialog-item {
    transform: translateX(-15px);
    opacity: 0;
    transition:
        transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.15),
        opacity 0.3s ease,
        background-color 0.2s;
    padding: 5px 5px;
    border-bottom: 1px solid #7c7c7c59;
}

.sidebar.open .dialog-item {
    transform: translateX(0);
    opacity: 1;
}

.sidebar.open .dialog-item:nth-child(1) {
    transition-delay: 0.04s;
}

.sidebar.open .dialog-item:nth-child(2) {
    transition-delay: 0.08s;
}

.sidebar.open .dialog-item:nth-child(3) {
    transition-delay: 0.12s;
}

.sidebar.open .dialog-item:nth-child(4) {
    transition-delay: 0.16s;
}

.sidebar.open .dialog-item:nth-child(5) {
    transition-delay: 0.20s;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
    backdrop-filter: blur(2px);
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

#app-container>.flex-1 {
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), filter 0.5s ease;
    transform-origin: right center;
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 100vmax #f0f2f5;
    clip-path: inset(0);
}

.sidebar.open~.flex-1 {
    transform: translateX(15px);
    filter: brightness(0.95);
}

.dialog-item:hover:not(.active) {
    background-color: #f3f4f6;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}

.dialog-title {
    font-weight: 600;
    color: #1f2937;
    flex-grow: 1;
    margin-right: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-medium);
    /* Используем переменную */
}

.dialog-item.active .dialog-title {
    color: #1e40af;
}

.delete-dialog-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s, background-color 0.2s;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    flex-shrink: 0;
}

.delete-dialog-btn:hover {
    background-color: #f3f4f6;
    color: #ef4444;
}

.dialog-subtitle {
    font-size: 0.8rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.dialog-item.active .dialog-subtitle {
    color: #1e40af;
}

.trash-icon {
    width: 16px;
    height: 16px;
}

.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3B82F6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

.formatted-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--font-size-medium);
    /* Используем переменную */
    line-height: 1.6;
    color: #2d3748;
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
}

.formatted-content h1,
.formatted-content h2 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: #1a202c;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.2em;
    font-size: var(--font-size-xlarge);
    /* Используем переменную */
}

.formatted-content h3,
.formatted-content h4 {
    margin-top: 1.2em;
    font-weight: 600;
    color: #2d3748;
    font-size: var(--font-size-large);
    /* Используем переменную */
}

.formatted-content p,
.formatted-content ul,
.formatted-content ol {
    margin-bottom: 1em;
}

.formatted-content ul,
.formatted-content ol {
    padding-left: 1.5rem;
}

.formatted-content li {
    margin: 0.3em 0;
}

.formatted-content blockquote {
    border-left: 4px solid #3182ce;
    background-color: #ebf4ff;
    padding: 0.5em 1em;
    margin: 1em 0;
    font-style: italic;
    color: #4a5568;
}

.formatted-content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background-color: #f1f3f5;
    color: #d73a49;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.85em;
    word-break: break-all;
}

.formatted-content pre {
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1em 0;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.formatted-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.85em;
    display: block;
}

.copy-code-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.copy-code-btn:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.formatted-content pre:hover .copy-code-btn {
    opacity: 1;
}

.copy-message-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.copy-message-btn:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.message:hover .copy-message-btn {
    opacity: 1;
}

.formatted-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 1em;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.formatted-content th,
.formatted-content td {
    border: 1px solid #dfe2e5;
    padding: 0.5rem;
    text-align: left;
    font-size: 1em;
    white-space: nowrap;
}

.formatted-content th {
    background-color: #f6f8fa;
    font-weight: 600;
}

.formatted-content a {
    color: #3182ce;
    text-decoration: underline;
}

.formatted-content a:hover {
    color: #2b6cb0;
}

.MathJax {
    margin: 0 0.2em;
    display: inline-block;
    overflow-wrap: break-word;
    word-break: break-word;
}

.MathJax_Display {
    overflow-x: auto;
    margin: 1em 0;
    -webkit-overflow-scrolling: touch;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#scroll-to-bottom-btn {
    position: fixed;
    right: 1rem;
    bottom: 10rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff54;
    color: rgba(0, 0, 0, 0.392);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    transform: translateY(10px);
    display: none;
}

#scroll-to-bottom-btn.visible {
    opacity: 1;
    visibility: visible;
    display: flex;
}

#scroll-to-bottom-btn:hover {
    background-color: #ffffff54;
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

.input-area-container {
    padding-top: 0px;
    padding-bottom: 5px;
}

@media (max-width: 480px) {
    #scroll-to-bottom-btn {
        right: 1.5rem;
        bottom: calc(12.5rem + env(safe-area-inset-bottom, 0px));
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #scroll-to-bottom-btn {
        right: 1.5rem;
        bottom: calc(14rem + env(safe-area-inset-bottom, 0px));
        width: 40px;
        height: 40px;
    }

    .formatted-content {
        padding: 0.75rem;
        font-size: var(--font-size-medium);
        /* Используем переменную */
        border-radius: 8px;
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }

    .copy-code-btn {
        width: 15px;
        height: 15px;
    }

    .formatted-content h1,
    .formatted-content h2 {
        font-size: 1.05rem;
    }

    .formatted-content pre {
        padding: 0.75rem;
    }

    .formatted-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.8em;
    }

    .sidebar {
        width: 80%;
        max-width: 350px;
    }

    #welcome-screen {
        padding: 1rem;
    }

    #welcome-screen h2 {
        font-size: 1.5rem;
    }

    #welcome-screen p {
        font-size: 0.9rem;
    }

    .input-textarea {
        min-height: 36px;
        /* Уменьшаем минимальную высоту */
        font-size: 0.9rem;
        /* Чуть меньше шрифт */
        line-height: 1.4;
        /* Плотнее строки */
        padding: 6px 40px 6px 12px;
        /* Меньше отступов */
    }

    .model-selector {
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    #chat-area {
        padding-left: 0;
        padding-right: 0;
        height: auto;
    }

    #app-bar {
        min-height: 40px;
        padding-top: max(env(safe-area-inset-top), 12px);
        padding-bottom: 8px;
    }

    #agent-indicator {
        min-height: 44px;
        height: auto;
    }

    .dialog-item {
        padding: 0.75rem 1rem;
    }

    .dialog-title {
        font-size: 0.95rem;
    }

    .dialog-subtitle {
        font-size: 0.8rem;
    }

    .input-area-container {
        padding-top: 0px;
    }
}

@media (max-width: 480px) {
    .formatted-content {
        padding: 0.5rem;
        font-size: var(--font-size-medium);
        /* Используем переменную */
        line-height: 1.55;
        border: none;
        background-color: transparent;
    }

    #chat-area {
        padding-left: 0;
        padding-right: 0;
        height: auto;
    }

    .formatted-content h1,
    .formatted-content h2 {
        font-size: 1.2rem;
    }

    .formatted-content pre {
        padding: 0.5rem;
        font-size: var(--font-size-medium);
        /* Используем переменную */
    }

    .formatted-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: var(--font-size-medium);
        /* Используем переменную */
    }

    .formatted-content th,
    .formatted-content td {
        padding: 0.4rem;
        font-size: var(--font-size-medium);
        /* Используем переменную */
    }

    .formatted-content code {
        font-size: var(--font-size-medium);
        /* Используем переменную */
        padding: 0.15em 0.3em;
    }

    .model-selector {
        font-size: 0.8rem;
    }

    .slider:before {
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
    }

    input:checked+.slider:before {
        transform: translateX(18px);
    }

    #welcome-screen h2 {
        font-size: 1.3rem;
    }

    #welcome-screen p {
        font-size: 0.85rem;
    }

    .math-formula {
        font-size: 0.85em;
        padding-left: 8px;
    }

    #app-bar {
        padding: max(env(safe-area-inset-top), 8px) 12px 6px;
    }
}

/* Новые стили для разделов сайдбара */
.sidebar-sections {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    padding-top: 12px;
}

.sidebar-section-btn {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748B;
    font-weight: 500;
    font-size: var(--font-size-large);
    /* Используем переменную */
}

.sidebar-section-btn:hover {
    background-color: #F1F5F9;
    color: #334155;
}

.sidebar-section-btn.active {
    background-color: #EFF6FF;
    color: #3B82F6;
}

.sidebar-section-icon {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-content {
    height: calc(100% - 160px);
    overflow-y: auto;
    padding: 0 12px;
}

.sidebar-section-content {
    display: none;
}

.sidebar-section-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.example-card {
    background-color: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #E2E8F0;
}

.example-card:hover {
    background-color: #F1F5F9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.example-title {
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 8px;
    font-size: var(--font-size-medium);
    /* Используем переменную */
}

.example-description {
    font-size: var(--font-size-small);
    /* Используем переменную */
    color: #64748B;
    line-height: 1.4;
}

.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--font-size-medium);
    /* Используем переменную */
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
}

.btn-outline:hover {
    background-color: #f9fafb;
}

.btn-primary {
    background: #4c6ef5;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    /* Используем переменную */
}

.btn-primary:hover {
    background: #3b5bd9;
}

.btn-primary:disabled {
    background: #a5b4fc;
    cursor: not-allowed;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s linear infinite;
    margin-left: 8px;
    display: inline-block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.save-status {
    margin-top: 8px;
    min-height: 20px;
    font-size: var(--font-size-base);
    /* Используем переменную */
}

.save-status.success {
    color: #10b981;
}

.save-status.error {
    color: #ef4444;
}

.examples-section {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0.75rem;
}

.view-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.examples-header {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.examples-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.examples-subtitle {
    font-size: 0.8rem;
    color: #64748b;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.topics-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.prompts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.item-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.item-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.item-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    color: #4f46e5;
}

.item-content {
    flex-grow: 1;
    min-width: 0;
}

.item-title {
    font-weight: 500;
    color: #1e293b;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-description {
    font-size: 0.8rem;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.back-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: #f1f5f9;
    color: #4f46e5;
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 0.5rem;
}

.back-button:hover {
    background-color: #e2e8f0;
}

.back-button svg {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.hidden {
    display: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .examples-section {
        padding: 0.5rem;
    }

    .items-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .item-card {
        padding: 0.75rem;
    }

    .item-icon {
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.5rem;
    }
}

/* Анимации для плавного перехода между экранами */
.view-container {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Медиазапрос для маленьких экранов */
@media (max-width: 768px) {

    /* Вы можете выбрать другую точку останова */
    #settings-section .setting-label,
    .settings-group .setting-label {
        /* Уменьшаем 1rem (16px) на 20% -> 0.8rem (12.8px) */
        font-size: 0.8rem;
    }

    #settings-section .setting-description,
    .settings-group .setting-description {
        /* Уменьшаем 0.9375rem (15px) на 20% -> 0.75rem (12px) */
        font-size: 0.75rem;
    }

    #settings-section .language-select,
    .settings-group .language-select {
        /* Уменьшаем 1rem (16px) на 20% -> 0.8rem (12.8px) */
        font-size: 0.8rem;
    }

    #settings-section .token-value,
    .settings-group .token-value {
        /* Уменьшаем 1rem (16px) на 20% -> 0.8rem (12.8px) */
        font-size: 0.8rem;
    }

    /* Добавьте другие элементы настроек, если нужно */
    #settings-section .settings-title,
    .settings-group .settings-title {
        /* Уменьшаем 1.25rem (20px) на 20% -> 1rem (16px) */
        font-size: 1rem;
    }
}

/* Если нужно еще больше увеличение на очень маленьких экранах */
@media (max-width: 480px) {

    #settings-section .setting-label,
    .settings-group .setting-label {
        /* Уменьшаем 1.0625rem (17px) на 20% -> 0.85rem (13.6px) */
        font-size: 0.85rem;
    }

    #settings-section .setting-description,
    .settings-group .setting-description {
        /* Уменьшаем 1rem (16px) на 20% -> 0.8rem (12.8px) */
        font-size: 0.8rem;
    }

    /* ... и т.д. ... */
}

.no-trailing-margin>*:last-child {
    margin-bottom: 0 !important;
}

.message-text>div:only-child {
    margin: 0;
}

/* Убираем отступы у вложенных div в сообщениях пользователя */
.user-message .message-text>div {
    margin: 0;
    padding: 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.agent-processing-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 9999px;
    box-sizing: border-box;
    flex: 0 0 auto;
    animation: spin 0.9s linear infinite;
    will-change: transform;
}

/* У сообщений агента с изображением — убираем «рамку» */
.agent-message.agent-message--has-image {
    background-color: transparent !important;
    padding: 0 !important;
    /* убираем «внутреннюю рамку» за счёт отступов */
    border-radius: 0 !important;
    /* опционально: если закругления не нужны */
}

/* Внутреннему контейнеру тоже обнуляем фон/границу/тень */
.agent-message.agent-message--has-image .formatted-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* чтобы не создавалось впечатление рамки */
}

/* Само изображение можно немного «отодвинуть» от соседнего контента */
.agent-message.agent-message--has-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* как вам нравится */
    margin-bottom: 12px;
    /* если под картинкой есть текст */
    margin-left: 10px;
    margin-top: 30px;
}

.agent-message.agent-message--has-image,
.agent-message.agent-message--has-image .formatted-content,
.agent-message.agent-message--has-image .message,
.agent-message.agent-message--has-image>div {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.download-icon {
    width: 20px;
    height: 20px;
}

/* Для iPhone: учитываем безопасную зону (например, "чёлку" или полосу навигации) */
.platform-ios .input-area-container {
    padding-bottom: max(env(safe-area-inset-bottom, 50px), 50px);
}

/* Для Android: делаем минимальный отступ, так как safe area обычно = 0 */
.platform-android .input-area-container {
    padding-bottom: 6px;
    margin-bottom: 30px;
}

/* Опционально: плавная анимация при появлении клавиатуры */
.input-area-container {
    transition: margin-bottom 0.3s ease, padding-bottom 0.3s ease;
}

/* Стили для активной кнопки (по умолчанию) */
#send-button.send-btn-enabled {
    /* Градиент и тени уже заданы в классах Tailwind */
    opacity: 1;
    cursor: pointer;
    /* Убедитесь, что курсор правильный */
    pointer-events: auto;
    /* Убедитесь, что кнопка кликабельна */
}

/* Стили для неактивной кнопки */
#send-button.send-btn-disabled,
#send-button:disabled {
    /* Дублируем для надежности, если JS использует атрибут */
    background: #9ca3af !important;
    /* bg-gray-400 */
    background-image: none !important;
    /* Отменяем градиент */
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    /* shadow-md */
    transform: none !important;
    /* Отменяем возможные hover/active эффекты */
    pointer-events: none;
    /* Блокируем клики */
}

/* Отменяем hover-эффекты для неактивной кнопки */
#send-button.send-btn-disabled:hover,
#send-button:disabled:hover {
    background: #9ca3af !important;
    /* bg-gray-400 */
    background-image: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    /* shadow-md */
    /* transform: scale(1) !important; */
    /* Если нужно, можно принудительно сбросить масштаб */
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.user-content-container {
    max-width: 500px;
    margin: 0 auto;
    /* Убираем text-align: center */
}

/* Только для контейнера с изображением */
.user-content-container .image-container-center {
    display: flex;
    justify-content: center;
}

/* Для обычного текста сохраняем нормальное выравнивание */
.user-content-container .text-content {
    text-align: left;
    /* или justify, как было раньше */
}

.user-text {
    white-space: normal;
    line-height: 1.5;
    margin: 0 0 10px 0;
}

.video-duration-overlay {
    display: none;
    /* Скрыто по умолчанию */
}

.video-duration-overlay.active {
    display: block;
    position: relative;
}

.video-duration-select {
    border: 1px solid #d1d5db;
    /* border-gray-300 */
    background-color: white;
    /* bg-white */
    color: inherit;
    /* text-gray-900 по умолчанию */
    font-size: 0.875rem;
    /* text-sm */
    padding: 0.375rem 0.75rem;
    /* px-3 py-1.5 */
    border-radius: 0.5rem;
    /* rounded-lg */
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* shadow-sm */
    transition: all 200ms ease;
}

.video-duration-select:focus {
    border-color: #3b82f6;
    /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    /* focus:ring-blue-500 */
}

/* Для темной темы (если используется) */
.dark .video-duration-select {
    background-color: #374151;
    /* bg-gray-700 */
    border-color: #4b5563;
    /* border-gray-600 */
    color: white;
}

.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* ← Более прозрачный фон */
    z-index: 10000;
    display: none;
    transition: opacity 0.3s ease;
    /* Убрал pointer-events: none, чтобы можно было кликать */
}

.tutorial-highlight {
    position: fixed;
    border: 3px solid #3b82f6;
    border-radius: 12px;
    /* ← Более округлые углы */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
    /* ← Дополнительная тень */
    animation: slow-pulse 3s infinite ease-in-out;
    z-index: 10001;
    /* Убрал pointer-events: none, чтобы клики проходили */
    transition: all 0.3s ease;
}

@keyframes slow-pulse {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    50% {
        opacity: 0.7;
        /* ← Лёгкое моргание */
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1), 0 12px 32px rgba(0, 0, 0, 0.3);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
    }
}

.tutorial-tooltip {
    position: absolute;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    /* ← Градиентный фон для красоты */
    border-radius: 16px;
    /* ← Более округлые углы */
    padding: 20px;
    /* ← Больше padding */
    max-width: 320px;
    /* ← Чуть шире */
    z-index: 10002;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 20px rgba(59, 130, 246, 0.1);
    /* ← Красивые тени */
    font-size: 14px;
    color: #1e293b;
    border: 1px solid rgba(59, 130, 246, 0.1);
    /* ← Лёгкая рамка */
    animation: fadeInUp 0.4s ease-out;
    /* ← Анимация появления */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tutorial-tooltip h3 {
    font-weight: 700;
    /* ← Жирнее */
    margin: 0 0 10px;
    color: #0f172a;
    /* ← Темнее */
    display: flex;
    align-items: center;
}

.tutorial-tooltip h3::before {
    content: '💡';
    /* ← Иконка для красоты */
    margin-right: 8px;
    font-size: 18px;
}

.tutorial-tooltip p {
    margin: 0 0 15px;
    color: #475569;
    line-height: 1.5;
    /* ← Лучшая читаемость */
}

.tutorial-skip {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    /* ← Градиентная кнопка */
    color: white;
    border: none;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.tutorial-skip:hover {
    transform: translateY(-1px);
    /* ← Лёгкий подъём */
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Добавь это в <head> или в css/telegram_app.css */
.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Спиннер для загрузки */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.loading-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Стили для аудиосообщений */
.agent-message--has-audio {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.audio-content-container {
    display: block !important;
    width: 100%;
}

/* Кастомизация нативного плеера */
audio::-webkit-media-controls-panel {
    background-color: #f3f4f6;
}

audio::-webkit-media-controls-play-button {
    background-color: #3b82f6;
    border-radius: 50%;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
    color: #374151;
}

/* Small switch for settings panels */
.switch-small {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.switch-small input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-small {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 20px;
}

.slider-small:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.switch-small input:checked+.slider-small {
    background-color: #3b82f6;
}

.switch-small input:checked+.slider-small:before {
    transform: translateX(16px);
}

.switch-small input:disabled+.slider-small {
    background-color: #e5e7eb;
    cursor: not-allowed;
}

@media (max-width: 768px) {

    #image-settings-panel,
    #video-settings-panel,
    #search-settings-panel {
        margin-bottom: 10px !important;
    }
}

/* Кнопка режима в верхнем слайдере */
.chat-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.75);
    color: #374151;
    /* text-gray-700 */
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
        box-shadow 0.15s ease, transform 0.08s ease;
}

.chat-mode-btn span {
    font-size: 13px;
}

/* Активная кнопка */
.chat-mode-btn--active {
    background: #2563eb;
    /* blue-600 */
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.chat-mode-btn--active span {
    color: #ffffff;
}

.chat-mode-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

/* Прячем скроллбар у горизонтального контейнера с кнопками */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE и Edge */
    scrollbar-width: none;
    /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Сетка для режимов */
.modes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 колонки в верхнем ряду */
    gap: 8px;
    /* Расстояние между кнопками */
}

/* Кнопка режима */
.mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    /* Серый фон по умолчанию */
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 56px;
}

/* Иконка в кнопке */
.mode-btn .mode-icon {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

/* Текст в кнопке */
.mode-btn .mode-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: #4b5563;
}

/* Активное состояние кнопки */
.mode-btn.active {
    background-color: #eff6ff;
    /* Светло-голубой фон */
    border-color: #3b82f6;
    /* Синяя обводка */
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.mode-btn.active .mode-text {
    color: #2563eb;
    /* Синий текст */
    font-weight: 600;
}

/* Последние две кнопки (Audio, Live) делаем, чтобы они занимали место по центру */
/* Трюк для грида: делаем их элементами, которые центрируются, если бы мы использовали flex */
/* Но в Grid проще так: */
.modes-grid>button:nth-child(4) {
    grid-column: 1 / span 1;
    width: 100%;
}

/* Альтернатива: лучше использовать Flexbox для контейнера, если хотим 3 сверху и 2 снизу по центру */
.modes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mode-btn {
    /* Ширина: (100% - отступы) / 3 */
    width: calc((100% - 16px) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    /* Белый или светло-серый */
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 0;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mode-btn:hover {
    background-color: #f9fafb;
}

.mode-btn.active {
    background-color: #ebf5ff;
    /* Синий фон активного */
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

/* Стили для круглых кнопок действий (камера, отправка) */
.action-circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    transition: background-color 0.2s;
}

.action-circle-btn:hover {
    background-color: #f3f4f6;
}

.send-circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #2563eb;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    transition: background-color 0.2s;
}

.send-circle-btn:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.send-circle-btn:hover:not(:disabled) {
    background-color: #1d4ed8;
}

/* --- Улучшенные стили для панели режимов --- */
#chat-modes-bar {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Контейнер режимов: компактный, центрированный и отзывчивый */
.modes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
    align-items: center;
}

/* Сам кнопки: уменьшенные, округлые, с градиентом и мягкой тенью */
.mode-btn {
    width: 84px;
    /* компактная ширина */
    max-width: 84px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    padding: 8px 6px;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Иконка побольше и ярче */
.mode-btn .mode-icon {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 4px;
    transform: translateZ(0);
}

/* Текст — компактный */
.mode-btn .mode-text {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    letter-spacing: -0.01em;
}

/* Hover эффект */
.mode-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f1f9ff 100%);
}

/* Активное состояние: насыщенный градиент + подсветка */
.mode-btn.active,
.mode-btn.mode-active {
    background: linear-gradient(180deg, #eef2ff 0%, #dbeafe 100%);
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
    transform: translateY(-2px);
}

.mode-btn.mode-active .mode-text {
    color: #2563eb;
}

/* Вариант маленьких кнопок на мобильных экранах */
@media (max-width: 480px) {
    .mode-btn {
        width: 70px;
        height: 58px;
        border-radius: 12px;
    }

    .mode-btn .mode-icon {
        font-size: 1.1rem;
    }

    .mode-btn .mode-text {
        font-size: 11px;
    }
}

/* Скрытие панели режимов (плавное) */
.chat-modes-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, height 0.25s ease;
}

#welcome-screen {
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    padding-bottom: 8px;
    /* небольшой зазор над панелью режимов */
}

/* Одна строка для model-selector + кнопки */
#input-controls-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    /* запрещаем перенос на следующую строку */
}

/* Селектор модели растягивается и подстраивается по ширине */
#model-selector-container {
    flex: 1 1 auto;
    min-width: 0;
    /* даём сжиматься без выталкивания кнопок */
}

/* Группа кнопок (инструкции, камера, отправка) фиксированной ширины */
#input-controls-row>.flex.items-center {
    flex-shrink: 0;
    /* не даём им сжиматься и переноситься */
}

/* Контейнер чата — колонка */
#chat-area {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* важно внутри flex-1 родителя */
}

/* Сообщения занимают всё доступное пространство между app-bar и панелью режимов */
#chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Панель режимов фиксированной высоты внизу #chat-area */
#chat-modes-bar {
    flex: 0 0 auto;
}

/* --- Обновленная структура чата (прижимает панель вниз) --- */
#chat-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    /* Важно, чтобы скроллился только #chat-messages */
}

#chat-messages {
    flex-grow: 1;
    /* Занимает всё свободное место */
    overflow-y: auto;
    min-height: 0;
    /* Для корректной работы скролла во flex */
}

#chat-modes-bar {
    flex-shrink: 0;
    /* Запрещаем сжиматься */
    width: 100%;
    z-index: 10;
}

/* --- Компактная сетка кнопок (всегда в одну строку) --- */
.modes-grid {
    display: flex;
    flex-wrap: nowrap;
    /* Ключевое: запрет переноса */
    justify-content: space-between;
    /* Равномерное распределение */
    gap: 6px;
    padding: 6px 8px;
    overflow-x: auto;
    /* Если экран супер-узкий, появится скролл, но верстка не сломается */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Скрыть скроллбар */
}

.modes-grid::-webkit-scrollbar {
    display: none;
}

/* --- Компактные кнопки --- */
.mode-btn {
    flex: 1;
    /* Кнопки делят пространство поровну */
    min-width: 50px;
    /* Минимальная ширина, чтобы не схлопнулись */
    height: 52px;
    /* Фиксированная компактная высота */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;

    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

/* Иконка */
.mode-btn .mode-icon {
    font-size: 18px;
    /* Чуть меньше иконка */
    line-height: 1;
    margin-bottom: 3px;
}

/* Текст */
.mode-btn .mode-text {
    font-size: 10px;
    /* Компактный шрифт */
    font-weight: 600;
    color: #64748b;
    letter-spacing: -0.01em;
    white-space: nowrap;
    /* Текст в одну строку */
}

/* Активное состояние */
.mode-btn.active {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.mode-btn.active .mode-text {
    color: #2563eb;
}

/* Контейнер описания на приветственном экране */
#welcome-screen p[data-i18n="welcome.description"] {
    /* Фиксируем минимальную высоту примерно под 2-3 строки текста, 
       чтобы блок не прыгал при смене контента */
    min-height: 48px;

    /* Параметры анимации */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Начальное состояние (видимое) */
    opacity: 1;
    transform: translateY(0);
}

/* Класс для состояния "скрыто" (перед сменой текста) */
.desc-hidden {
    opacity: 0 !important;
    transform: translateY(5px) !important;
    /* Небольшой сдвиг вниз */
}

/* === Панель режимов чата (premium‑стиль) === */

#chat-modes-bar {
    background: rgba(248, 250, 252, 0.98);
    /* очень светлый фон */
    backdrop-filter: blur(14px);
    padding: 6px 10px 4px;
}

/* Контейнер кнопок: в одну строку, с горизонтальным скроллом при нехватке места */
#chat-modes-bar .modes-grid {
    display: flex;
    flex-wrap: nowrap;
    /* не переносим кнопки */
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 2px 0 4px;
    overflow-x: auto;
    /* аккуратный скролл на узких экранах */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* скрыть скроллбар (Firefox) */
}

#chat-modes-bar .modes-grid::-webkit-scrollbar {
    display: none;
    /* скрыть скроллбар (WebKit) */
}

/* Базовый стиль кнопки‑пилюли */
#chat-modes-bar .mode-btn {
    flex: 1 1 0;
    min-width: 68px;
    /* минимальная ширина для читаемости */
    max-width: 110px;
    /* чтобы не раздувались на десктопе */
    height: 56px;
    /* комфортный hit‑area */

    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    color: #111827;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;

    /* Плавные переходы между состояниями, в т.ч. при смене .active */
    transition:
        background 180ms ease-out,
        border-color 180ms ease-out,
        box-shadow 180ms ease-out,
        transform 130ms ease-out,
        color 180ms ease-out;
}

/* Иконка внутри кнопки */
#chat-modes-bar .mode-btn .mode-icon {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 3px;
}

/* Текст под иконкой */
#chat-modes-bar .mode-btn .mode-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #4b5563;
    white-space: nowrap;
}

/* Hover‑эффект (только на устройствах с hover) */
@media (hover: hover) {
    #chat-modes-bar .mode-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
        background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    }
}

/* Состояние нажатия (pressed) */
#chat-modes-bar .mode-btn:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

/* Фокус клавиатурой (доступность) */
#chat-modes-bar .mode-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.9), 0 0 0 5px rgba(191, 219, 254, 0.9);
}

/* Активный режим (кнопка с классом .active) */
#chat-modes-bar .mode-btn.active {
    background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
    border-color: rgba(37, 99, 235, 0.8);
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.28);
    color: #1d4ed8;
}

#chat-modes-bar .mode-btn.active .mode-text {
    color: #1d4ed8;
}

/* Можно чуть усилить иконку в активном состоянии */
#chat-modes-bar .mode-btn.active .mode-icon {
    transform: translateY(-1px);
}

/* Текстовое описание под панелью режимов */
#chat-modes-bar #chat-mode-description {
    font-size: 11px;
    line-height: 1.5;
    color: #6b7280;
    min-height: 16px;
    /* чтобы область не прыгала при смене текста */
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 180ms ease-out,
        transform 180ms ease-out;
}

/* Если вы продолжаете использовать класс .hidden для скрытия */
#chat-modes-bar #chat-mode-description.hidden {
    opacity: 0;
    transform: translateY(4px);
}

/* Немного компактнее на очень узких экранах */
@media (max-width: 480px) {
    #chat-modes-bar {
        padding-left: 8px;
        padding-right: 8px;
    }

    #chat-modes-bar .mode-btn {
        min-width: 64px;
        height: 52px;
        border-radius: 12px;
    }

    #chat-modes-bar .mode-btn .mode-icon {
        font-size: 1.15rem;
    }

    #chat-modes-bar .mode-btn .mode-text {
        font-size: 10px;
    }
}

/* sidebar: аппаратное ускорение и плавный transition */
.sidebar {
    transform: translate3d(-100%, 0, 0);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
    /* уменьшить repaint/paint cost */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* открытое состояние */
.sidebar.open {
    transform: translate3d(0, 0, 0);
}

/* overlay: плавность появления и аппаратный рендер */
.overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 240ms;
    will-change: opacity;
    -webkit-tap-highlight-color: transparent;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* на мобильных отключаем тяжёлые эффекты (backdrop-filter/большие тени) */
@media (max-width: 768px) {
    .sidebar {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        /* отключаем blur, он создаёт jank на слабых устройствах */
        backdrop-filter: none !important;
    }

    .overlay {
        backdrop-filter: none !important;
    }
}

/* Начальное состояние: невидим и готов к анимации */
#welcome-screen {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

/* Класс для показа после позиционирования */
#welcome-screen.welcome-visible {
    opacity: 1;
    visibility: visible;
}

/* Убираем старые классы позиционирования */
#welcome-screen.welcome-positioning,
#welcome-screen.welcome-positioned {
    /* Эти классы больше не нужны */
}

/* Плавное появление с небольшим эффектом "всплытия" */
#welcome-screen {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

#welcome-screen.welcome-visible {
    opacity: 1;
    visibility: visible;
}


/* Оборачиваем кнопки в центрированный "ряд" с ограниченной шириной */
#chat-modes-bar .modes-grid {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    max-width: 700px;
    /* меньше — меньше промежуток */
    margin: 0 auto;
}

/* Чтобы кнопки не раздувались за пределы max-width */
#chat-modes-bar .mode-btn {
    flex: 0 1 100px;
    /* базовая ширина 100px, можно сжиматься, но не растёт бесконечно */
    max-width: 140px;
    min-width: 64px;
}

/* --- Стили для панелей настроек (Audio, Video, Image) --- */

/* Контейнер панели: разрешаем перенос строк, убираем фикс. высоту */
.settings-panel-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* Отступ между элементами */
    padding: 4px 2px;
    width: 100%;
    box-sizing: border-box;
    /* Анимация при появлении */
    animation: fadeInPanel 0.3s ease-out;
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Стиль отдельного элемента настройки ("чипса") */
.setting-pill {
    display: inline-flex;
    align-items: center;
    height: 32px;
    /* Фиксированная высота для аккуратности */
    padding: 0 10px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    /* gray-200 */
    border-radius: 10px;
    /* Скругленные углы */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    transition: all 0.2s ease;
    max-width: 100%;
    /* Чтобы не вылезал за экран на очень узких телефонах */
}

.setting-pill:hover {
    border-color: #cbd5e1;
    /* gray-300 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.setting-pill:focus-within {
    border-color: #3b82f6;
    /* blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Текст заголовка (Label) внутри чипса */
.setting-label-text {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    /* slate-500 */
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    user-select: none;
}

/* Поля ввода и селекты внутри чипса */
.setting-input-base {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    /* slate-700 */
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    min-width: 20px;
    cursor: pointer;
}

/* Текстовые поля должны немного растягиваться, но иметь предел */
input[type="text"].setting-input-base {
    min-width: 60px;
    max-width: 150px;
    cursor: text;
}

input[type="text"].setting-input-base::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* Кастомный стиль для Range Slider (ползунка) */
input[type="range"].custom-range {
    -webkit-appearance: none;
    width: 60px;
    /* Компактная ширина */
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    outline: none;
    margin: 0 4px;
    cursor: pointer;
}

/* Бегунок (Thumb) для Webkit */
input[type="range"].custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
}

input[type="range"].custom-range:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

/* Кнопка Play preview */
.preview-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #eff6ff;
    color: #3b82f6;
    margin-right: 6px;
    transition: background 0.2s;
}

.preview-play-btn:hover {
    background-color: #dbeafe;
}

/* Группировка элементов для JS (TTS/Music groups) */
.settings-group-container {
    display: contents;
    /* Игнорирует сам контейнер, элементы участвуют в общем flex layout */
}

.balance-slot {
    display: inline-grid;
    align-items: center;
    /* по вертикали */
    justify-items: start;
    /* как текст баланса (слева) */
}

.balance-slot>* {
    grid-area: 1 / 1;
    /* накладываем элементы */
}

/* по умолчанию показываем баланс, лоадер скрыт */
.balance-dots {
    display: none;
    gap: 3px;
    align-items: center;
    height: 14px;
}

/* режим загрузки: баланс прячем, лоадер показываем */
.balance-slot.is-loading #user-balance {
    visibility: hidden;
    /* место НЕ влияет на layout, но текста не видно */
}

.balance-slot.is-loading .balance-dots {
    display: inline-flex;
}

.balance-dots span {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.85);
    opacity: 0.35;
    animation: balanceDot 0.9s infinite ease-in-out;
}

.balance-dots span:nth-child(2) {
    animation-delay: 0.12s;
}

.balance-dots span:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes balanceDot {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.25;
    }

    50% {
        transform: translateY(-3px);
        opacity: 0.95;
    }
}

.balance-dots {
    justify-self: center;
    /* а лоадер строго по центру слота */
}

/* Секции сайдбара */
.sidebar-section-content {
    display: none !important;
}

.sidebar-section-content.active {
    display: flex !important;
    flex-direction: column;
}

/* Или если используете Tailwind */
#dialogs-section:not(.active),
#examples-section:not(.active),
#settings-section:not(.active) {
    display: none !important;
}

/* FIX: pill-style controls inside settings panels */
#image-settings-panel .select-pill,
#video-settings-panel .select-pill,
#search-settings-panel .select-pill {
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    /* gray-300 */
    border-radius: 0.5rem !important;
    /* rounded-lg */
    padding: 0.375rem 0.75rem !important;
    /* py-1.5 px-3 */
    height: 30px !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
    /* shadow-sm */
    cursor: pointer !important;
}


#image-settings-panel .select-pill select,
#video-settings-panel .select-pill select,
#search-settings-panel .select-pill select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background: transparent !important;
    border: 0 !important;
    outline: none !important;

    font-size: 12px !important;
    /* text-xs */
    font-weight: 600 !important;
    color: #374151 !important;
    /* gray-700 */
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* если внутри есть span-лейблы */
#image-settings-panel .select-pill span,
#video-settings-panel .select-pill span,
#search-settings-panel .select-pill span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    /* gray-500 */


}

/* =========================================================
   FIX #1: Mobile viewport + safe bottom so input is not hidden
   ========================================================= */

/* 1) Правильная высота приложения на мобилках (вместо проблемного 100vh) */
html,
body,
#root,
#app-container {
    height: var(--app-height, 100dvh) !important;
    min-height: var(--app-height, 100dvh) !important;
}

/* 2) Гарантируем, что нижняя область ввода не уедет под панель браузера */
.input-area-container {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;

    /* если где-то перекрывается — делаем "прилипание" к низу */
    position: sticky;
    bottom: 0;
    z-index: 50;

    background-color: #f8fafc;
}

/* 3) На всякий случай: чтобы внутри flex-контейнеров скролл работал корректно */
#chat-area {
    min-height: 0 !important;
}

#chat-messages {
    min-height: 0 !important;
}

#chat-modes-bar {
    background: #f8fafc !important;
    backdrop-filter: none !important;
}

/* Базовая кнопка — нейтральная, без тени/градиента */
#chat-modes-bar .mode-btn {
    background: #ffffff !important;
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
    /* gray-200 */
    transform: none !important;
}

/* Hover без тени и без "подпрыгивания" */
#chat-modes-bar .mode-btn:hover {
    background: #f9fafb !important;
    /* gray-50 */
    box-shadow: none !important;
    transform: none !important;
}

/* Active — тоже без синевы и без свечения */
#chat-modes-bar .mode-btn.active {
    background: #f3f4f6 !important;
    /* gray-100 */
    border-color: #d1d5db !important;
    /* gray-300 */
    box-shadow: none !important;
    transform: none !important;
}

#chat-modes-bar .mode-btn .mode-text {
    color: #4b5563 !important;
    /* gray-600 */
}

#chat-modes-bar .mode-btn.active .mode-text {
    color: #111827 !important;
    /* gray-900 */
}

.input-area-wrapper {
    width: 100% !important;
    max-width: 720px !important;
    /* <-- поменяй на 640/800/900 как нужно */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* На больших экранах больше НЕ используем 70% */
@media (min-width: 1200px) {
    .input-area-wrapper {
        width: 100% !important;
        max-width: 720px !important;
    }
}

/* =========================================================
   CONTENT WIDTHS: app-bar narrower, chat-messages wider
   ========================================================= */

:root {
    --appbar-max-width: 720px;
    /* ширина верхней панели */
    --chat-max-width: 860px;
    /* ширина ленты сообщений (чуть шире) */
    --content-gutter: 12px;
    /* боковые отступы на мобилках/десктопе */
}

/* ВАЖНО: у тебя есть #chat-area { padding-left/right: 150px; }
   Это ломает нормальное центрирование max-width контейнеров.
   Переопределяем на нейтральные отступы. */
#chat-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Верхняя панель */
#app-bar {
    width: 100% !important;
    max-width: var(--appbar-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding-left: var(--content-gutter) !important;
    padding-right: var(--content-gutter) !important;
}

/* Лента сообщений (делаем шире, чем app-bar) */
#chat-messages {
    width: 100% !important;
    max-width: var(--chat-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;

    /* чтобы сообщения не прилипали к краям */
    padding-left: var(--content-gutter) !important;
    padding-right: var(--content-gutter) !important;
}

/* (опционально) если хочешь, чтобы область ввода совпадала по ширине с app-bar */
.input-area-wrapper {
    max-width: var(--appbar-max-width) !important;
}

/* overlay должен быть выше input-area */
.overlay {
    z-index: 60;
}

/* sidebar должен быть выше overlay */
#sidebar {
    z-index: 70 !important;
}

/* input-area может остаться как есть (z-index: 50), overlay всё равно выше */

#x-search-container.hidden {
    display: none !important;
}

/* --- WEB AUTH SETTINGS: compact --- */
#web-auth-settings.settings-group {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}

#web-auth-settings .settings-title {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

#web-auth-settings .setting-item {
    padding: 6px 0;
    margin-bottom: 0;
    align-items: center;
    gap: 10px;
}

#web-auth-settings .setting-description {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
}

/* Кнопка Logout — компактнее и чуть “danger” */
#web-auth-settings #logout-btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 10px;
    white-space: nowrap;

    border-color: #fecaca;
    /* red-200 */
    color: #b91c1c;
    /* red-700 */
    background: #fff;
}

#web-auth-settings #logout-btn:hover {
    background: #fef2f2;
    /* red-50 */
    border-color: #fca5a5;
    /* red-300 */
}

/* =========================================
   INPUT AREA: compact + nicer look (override)
   Put this block at the very end of telegram_app.css
   ========================================= */

:root {
    --input-gutter-x: 10px;
    --input-gutter-y: 6px;
    --input-radius: 18px;
    --input-max-width: 720px;
}

/* Внешний контейнер снизу */
.input-area-container {
    /* компактнее */
    padding: var(--input-gutter-y) var(--input-gutter-x) calc(var(--input-gutter-y) + env(safe-area-inset-bottom, 0px)) !important;

    /* красивый “телеграмный” низ */
    background: rgba(248, 250, 252, 0.92) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    position: sticky;
    bottom: 0;
    z-index: 50;
}

/* Ограничение ширины как у app-bar */
.input-area-wrapper {
    width: 100% !important;
    max-width: var(--input-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* раньше у тебя было bg-gray-200 + border-gray-300 (выглядело тяжелее) */
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: var(--input-radius) !important;

    /* компактнее */
    padding: 8px !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;

    /* мягкая тень */
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.06),
        0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

/* Превьюшки: меньше вертикальных отступов */
#image-previews,
#file-previews {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Текстовое поле: компактнее и приятнее */
#message-input,
.input-textarea {
    min-height: 40px !important;
    line-height: 1.35 !important;
    font-size: 14px !important;

    /* у тебя местами padding очень большой — делаем плотнее */
    padding: 10px 12px !important;

    background: transparent !important;
}

/* Когда textarea в фокусе — лёгкая подсветка контейнера */
.input-area-wrapper:focus-within {
    border-color: rgba(37, 99, 235, 0.45) !important;
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.06),
        0 0 0 4px rgba(37, 99, 235, 0.10) !important;
}

/* Чуть компактнее на совсем маленьких экранах */
@media (max-width: 480px) {
    :root {
        --input-gutter-x: 8px;
        --input-gutter-y: 6px;
        --input-radius: 16px;
    }

    .input-area-wrapper {
        padding: 7px !important;
    }

    #message-input,
    .input-textarea {
        font-size: 13px !important;
        padding: 9px 10px !important;
    }
}

/* =========================================
   CHAT MODES BAR: centered on web + one-line slider + floating buttons
   - Order is in HTML
   - No group shadow / no white underlay
   - Fade + chevrons hint when overflow exists
   Put at the VERY END of telegram_app.css
   ========================================= */

:root {
    --mbar-bg: rgba(248, 250, 252, 0.86);
    --mbar-border: rgba(15, 23, 42, 0.10);

    --btn-w: 92px;
    /* одинаковая ширина */
    --btn-h: 62px;
    /* одинаковая высота */
    --btn-radius: 16px;
    --gap: 10px;

    --btn-bg: rgba(255, 255, 255, 0.92);
    --btn-border: rgba(15, 23, 42, 0.10);

    --text-muted: #64748b;
    /* slate-500 */
    --text-strong: #0f172a;
    /* slate-900 */
    --icon-muted: #475569;
    /* slate-600 */
}

/* Bar (no outer shadow) */
#chat-modes-bar {
    position: relative;
    background: var(--mbar-bg) !important;
    padding: 8px 10px !important;

    box-shadow: none !important;
    /* убрали общую серую тень */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Slider row (ONE LINE) */
#chat-modes-bar .modes-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    /* КЛЮЧ: центр на web, а при переполнении justify-content не мешает (станет start автоматически) */
    /* justify-content: center !important; */

    gap: var(--gap) !important;
    padding: 6px 4px !important;

    /* НЕТ белой подложки */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* убрали “общую” тень вокруг кнопок */

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

#chat-modes-bar .modes-grid::-webkit-scrollbar {
    display: none;
}

/* Floating button: одинаковые размеры */
#chat-modes-bar .mode-btn {
    flex: 0 0 var(--btn-w) !important;
    width: var(--btn-w) !important;
    height: var(--btn-h) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    padding: 8px 6px !important;
    margin: 0 !important;

    background: var(--btn-bg) !important;
    border: 1px solid var(--btn-border) !important;
    border-radius: var(--btn-radius) !important;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    transition: transform 140ms ease, box-shadow 160ms ease, border-color 160ms ease;
    scroll-snap-align: center;
}

@media (hover:hover) {
    #chat-modes-bar .mode-btn:hover {
        transform: translateY(-2px);
        box-shadow:
            0 18px 34px rgba(15, 23, 42, 0.12),
            0 4px 10px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(15, 23, 42, 0.16) !important;
    }
}

#chat-modes-bar .mode-btn:active {
    transform: translateY(0px) scale(0.985);
}

/* Icon */
#chat-modes-bar .mode-btn .mode-icon {
    width: 20px !important;
    height: 20px !important;
    color: var(--icon-muted) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#chat-modes-bar .mode-btn .mode-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Text under icon (centered) */
#chat-modes-bar .mode-btn .mode-text {
    width: 100%;
    text-align: center;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: var(--text-muted) !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active (Text default active already in HTML) */
#chat-modes-bar .mode-btn.active {
    border-color: rgba(15, 23, 42, 0.22) !important;
    box-shadow:
        0 10px 900px rgba(15, 23, 42, 0.14),
        0 4px 10px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

#chat-modes-bar .mode-btn.active .mode-icon {
    color: var(--text-strong) !important;
}

#chat-modes-bar .mode-btn.active .mode-text {
    color: var(--text-strong) !important;
}

/* Focus */
#chat-modes-bar .mode-btn:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(15, 23, 42, 0.12),
        0 20px 42px rgba(15, 23, 42, 0.14) !important;
    border-color: rgba(15, 23, 42, 0.28) !important;
}

/* ===== Overflow hints (fade + chevrons)
   toggled via .has-left / .has-right on #chat-modes-bar
===== */
#chat-modes-bar::before,
#chat-modes-bar::after {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 34px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
}

#chat-modes-bar::before {
    left: 6px;
    background-image:
        linear-gradient(to right, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18l-6-6 6-6'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 8px 50%;
    background-size: 100% 100%, 14px 14px;
}

#chat-modes-bar::after {
    right: 6px;
    background-image:
        linear-gradient(to left, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 6l6 6-6 6'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, calc(100% - 8px) 50%;
    background-size: 100% 100%, 14px 14px;
}

#chat-modes-bar.has-left::before {
    opacity: 0.95;
}

#chat-modes-bar.has-right::after {
    opacity: 0.95;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    #chat-modes-bar .mode-btn {
        transition: none !important;
    }
}

/* === Field grid: одинаковая высота колонок и ровные линии === */
#account-overlay .acc-field-grid {
    align-items: stretch;
    /* колонки одной высоты */
}

/* каждая колонка растягивается и держит структуру: label / input / help */
#account-overlay .acc-field {
    height: 100%;
    display: grid;
    grid-template-rows: auto var(--acc-control-h) minmax(0, auto);
    gap: 6px;
    align-content: start;
}

/* help делаем одинаковой минимальной высоты (2 строки) */
#account-overlay .acc-help {
    min-height: 34px;
    line-height: 1.35;
}

/* === Input ровно одной высоты (чтобы copy был по центру) === */
#account-overlay .acc-input {
    height: var(--acc-control-h);
    min-height: var(--acc-control-h);
    line-height: 1.2;
}

/* контейнер input+copy фиксируем по высоте и выравниваем содержимое */
#account-overlay .acc-input-with-btn {
    position: relative;
    height: var(--acc-control-h);
    display: flex;
    align-items: center;
}

/* чтобы input не “прыгнул” и занял всю ширину */
#account-overlay .acc-input-with-btn .acc-input {
    width: 100%;
    height: var(--acc-control-h);
}

/* Copy-кнопка строго по центру, одинаковая для login/pass */
#account-overlay .acc-copy-btn {
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 34px;
    /* чуть больше, визуально ровнее */
    right: 8px;
}

/* моно-инпуты — запас справа под кнопку */
#account-overlay .acc-field .acc-input.mono {
    padding-right: 56px;
}

#model-selector {
    width: auto !important;
    max-width: 100%;
}

/* =========================================================
   PATCH: input outlines like settings "select-pill"
   + iOS Safari web top-gap fix
   + chat-modes-bar compact buttons
   Put this block at the VERY END of telegram_app.css
   ========================================================= */

:root {
    --pill-border: #d1d5db;
    /* gray-300 */
    --pill-radius: 0.5rem;
    /* rounded-lg */
    --pill-shadow: 0 1px 2px rgba(0, 0, 0, .05);

    /* Chat modes compact */
    --modes-gap: 6px;
    --modes-btn-w: 74px;
    --modes-btn-h: 54px;
    --modes-btn-radius: 14px;
    --modes-font: 10px;
}

/* ===== 1) MESSAGE INPUT: same contour as settings pills ===== */
#message-input,
#message-input.input-textarea {
    background: #ffffff !important;
    border: 1px solid var(--pill-border) !important;
    border-radius: var(--pill-radius) !important;
    box-shadow: var(--pill-shadow) !important;

    /* чтобы выглядело как pill, но было удобно печатать */
    padding: 10px 12px !important;
}

#message-input:focus,
#message-input:focus-visible {
    outline: none !important;
    border-color: #3b82f6 !important;
    /* blue-500 */
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, .18),
        var(--pill-shadow) !important;
}

/* ===== 2) MODEL SELECTOR: same contour as settings pills ===== */
#model-selector,
#model-selector.model-selector {
    background-color: #ffffff !important;
    border: 1px solid var(--pill-border) !important;
    border-radius: var(--pill-radius) !important;
    box-shadow: var(--pill-shadow) !important;

    /* стрелка — оставляем место справа */
    padding: 4px 34px 4px 12px !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

#model-selector:focus,
#model-selector:focus-visible {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, .18),
        var(--pill-shadow) !important;
}

/* ===== 3) Chat modes bar: smaller fonts/buttons so it fits on phones ===== */
#chat-modes-bar {
    padding: 6px 8px !important;
}

/* one-line slider */
#chat-modes-bar .modes-grid {
    gap: var(--modes-gap) !important;
    padding: 4px 2px !important;
    justify-content: flex-start !important;
    /* чтобы скроллилось нормально */
}

/* fixed compact buttons */
#chat-modes-bar .mode-btn {
    flex: 0 0 var(--modes-btn-w) !important;
    width: var(--modes-btn-w) !important;
    height: var(--modes-btn-h) !important;
    border-radius: var(--modes-btn-radius) !important;

    padding: 6px 5px !important;
    gap: 5px !important;
}

#chat-modes-bar .mode-btn .mode-text {
    font-size: var(--modes-font) !important;
    font-weight: 700 !important;
}

/* slightly smaller icon */
#chat-modes-bar .mode-btn .mode-icon,
#chat-modes-bar .mode-btn .mode-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* Extra-tight phones */
@media (max-width: 380px) {
    :root {
        --modes-gap: 5px;
        --modes-btn-w: 66px;
        --modes-btn-h: 52px;
        --modes-font: 9.5px;
    }
}

/* ===== 4) iPhone Safari WEB (not Telegram): remove top gap under URL bar =====
   Works together with JS class: .ios-safari-web */
.ios-safari-web body {
    /* убираем верхний отступ, который часто визуально выглядит как "зазор" */
    padding-top: 0 !important;

    /* сохраняем safe-area по бокам на случай ландшафта */
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
}

/* часто padding-top дублируется ещё и на контейнере */
.ios-safari-web #root,
.ios-safari-web #app-container {
    padding-top: 0 !important;
}

/* верхняя панель: оставим небольшой аккуратный padding */
.ios-safari-web #app-bar {
    padding-top: 8px !important;
}

/* =========================================================
   PATCH v2: Unified thin/transparent borders + centered modes
   Put this block at the VERY END of telegram_app.css
   ========================================================= */

/* === 1) ONE PLACE TO CONTROL ALL LINES === */
:root {
    /* “Линии” (обводки) */
    --ui-stroke-w: 1px;
    /* тоньше 1px кроссбраузерно почти не бывает стабильно */
    --ui-stroke: rgba(15, 23, 42, 0.10);
    /* очень тонкая/прозрачная */
    --ui-stroke-strong: rgba(15, 23, 42, 0.16);
    /* для active/hover */
    --ui-focus: rgba(59, 130, 246, 0.35);
    /* blue focus */

    /* Радиусы/тени */
    --ui-radius-pill: 0.5rem;
    /* 8px */
    --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);

    /* Chat modes compact */
    --modes-gap: 6px;
    --modes-btn-w: 74px;
    --modes-btn-h: 54px;
    --modes-btn-radius: 14px;
    --modes-font: 10px;
}

/* =========================================
   2) Apply unified stroke to key “button-like” elements
   (не добавляет border там, где его нет — только переопределяет стиль)
   ========================================= */

/* Общий случай: если у кнопки/контрола есть border — делаем его прозрачнее */
button,
.btn,
.acc-btn,
#logout-btn,
#topup-button {
    border-color: var(--ui-stroke) !important;
}

/* Pills в settings panels */
#image-settings-panel .select-pill,
#video-settings-panel .select-pill,
#search-settings-panel .select-pill {
    border: var(--ui-stroke-w) solid var(--ui-stroke) !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

/* “чипсы” (audio panel etc.) */
.setting-pill {
    border: var(--ui-stroke-w) solid var(--ui-stroke) !important;
    border-radius: 10px !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

/* Hover/Focus чуть “сильнее” */
#image-settings-panel .select-pill:hover,
#video-settings-panel .select-pill:hover,
#search-settings-panel .select-pill:hover,
.setting-pill:hover {
    border-color: var(--ui-stroke-strong) !important;
}

#image-settings-panel .select-pill:focus-within,
#video-settings-panel .select-pill:focus-within,
#search-settings-panel .select-pill:focus-within,
.setting-pill:focus-within {
    border-color: var(--ui-stroke-strong) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), var(--ui-shadow-sm) !important;
}

/* =========================================
   3) message-input + model-selector: same thin contour
   ========================================= */

#message-input,
#message-input.input-textarea {
    background: #ffffff !important;
    border: var(--ui-stroke-w) solid var(--ui-stroke) !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    padding: 10px 12px !important;
}

#message-input:focus,
#message-input:focus-visible {
    outline: none !important;
    border-color: var(--ui-stroke-strong) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), var(--ui-shadow-sm) !important;
}

#model-selector,
#model-selector.model-selector {
    background-color: #ffffff !important;
    border: var(--ui-stroke-w) solid var(--ui-stroke) !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: var(--ui-shadow-sm) !important;

    padding: 4px 34px 4px 12px !important;
    /* место под стрелку */

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

#model-selector:focus,
#model-selector:focus-visible {
    outline: none !important;
    border-color: var(--ui-stroke-strong) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), var(--ui-shadow-sm) !important;
}

/* =========================================
   4) Chat modes bar: CENTER buttons + make them fit better
   ========================================= */

#chat-modes-bar {
    padding: 6px 8px !important;
}

/* Центрируем кнопки, если влезают.
   Если не влезают — free-space отрицательный и flex ведет себя как flex-start,
   плюс работает горизонтальный скролл. */
#chat-modes-bar .modes-grid {
    justify-content: space-between !important;
    gap: var(--modes-gap) !important;
    padding: 4px 2px !important;
}

/* Компактные фикс. размеры */
#chat-modes-bar .mode-btn {
    flex: 0 0 var(--modes-btn-w) !important;
    width: var(--modes-btn-w) !important;
    height: var(--modes-btn-h) !important;

    border: var(--ui-stroke-w) solid var(--ui-stroke) !important;
    border-radius: var(--modes-btn-radius) !important;
    box-shadow: none !important;
    /* без тяжёлых теней */

    padding: 6px 5px !important;
    gap: 5px !important;
}

/* Текст меньше */
#chat-modes-bar .mode-btn .mode-text {
    font-size: var(--modes-font) !important;
    font-weight: 700 !important;
}

/* Иконка чуть меньше */
#chat-modes-bar .mode-btn .mode-icon,
#chat-modes-bar .mode-btn .mode-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* Active/hover — просто немного сильнее линия */
#chat-modes-bar .mode-btn:hover {
    border-color: var(--ui-stroke-strong) !important;
    background: #f9fafb !important;
    transform: none !important;
    box-shadow: none !important;
}

#chat-modes-bar .mode-btn.active {
    border-color: var(--ui-stroke-strong) !important;
    background: #f3f4f6 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Очень узкие телефоны: ещё компактнее */
@media (max-width: 380px) {
    :root {
        --modes-gap: 5px;
        --modes-btn-w: 66px;
        --modes-btn-h: 52px;
        --modes-font: 9.5px;
    }
}

/* =========================================
   5) iPhone Safari WEB: remove top gap under URL bar
   (works with JS class .ios-safari-web)
   ========================================= */
.ios-safari-web body {
    padding-top: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
}

.ios-safari-web #root,
.ios-safari-web #app-container {
    padding-top: 0 !important;
}

.ios-safari-web #app-bar {
    padding-top: 8px !important;
}

/* ANDROID: fix bottom gap for sticky input-area-container (put at very end) */
:root {
  --android-bottom-gap: 30px; /* подстрой 24–48px под свой UI */
}

/* У тебя класс platform-android вешается на <html>, поэтому так */
.platform-android .input-area-container {
  /* вместо margin-bottom делаем внутренний отступ снизу */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--android-bottom-gap)) !important;

  /* если где-то ранее принудительно обнулили margin — пусть так и будет */
  margin-bottom: 0 !important;
}

.imglb.hidden { display: none; }

.imglb {
  position: fixed;
  inset: 0;
  z-index: 99999;
  /* Убираем стандартные действия браузера (скролл, зум страницы) */
  touch-action: none; 
}

.imglb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85); /* Чуть темнее для контраста */
}

.imglb__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1; /* Слой жестов */
}

.imglb__img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  /* Плавность только при сбросе зума, при драге будем отключать JS-ом если нужно, 
     но обычно transform работает быстро и без transition */
  will-change: transform; 
}

.imglb__close {
  position: absolute;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom)); /* Чуть выше */
  transform: translateX(-50%);
  min-width: 140px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  
  /* ВАЖНО: Кнопка должна быть выше stage */
  z-index: 10; 
  display: flex;
  align-items: center;
  justify-content: center;
}

body.imglb-open { overflow: hidden; }
#image-lightbox-img {
    will-change: transform;
    backface-visibility: hidden; /* Исправляет мигание на iOS */
    transform-origin: center center;
}

/* ===========================
   GLASS MODE DROPDOWN (WHITE BG)
   =========================== */

#chat-modes-bar {
  display: flex;
  justify-content: center;
  padding: 10px 12px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  position: relative;
  z-index: 59 !important
}

#chat-modes-bar .modes-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mode-switcher {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border-radius: 9999px;
  overflow: hidden;

  /* glass on white */
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mode-main,
.mode-caret {
  appearance: none;
  border: 0;
  background: transparent;
  color: #0f172a; /* slate-900 */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background 160ms ease, transform 120ms ease, opacity 160ms ease;
}

.mode-main {
  gap: 10px;
  padding: 12px 16px;
  min-width: 170px;
}

.mode-caret {
  width: 64px;
  padding: 12px 12px;
  border-left: 1px solid rgba(15, 23, 42, 0.10);
}

.mode-main:active,
.mode-caret:active {
  transform: scale(0.985);
}

@media (hover:hover) {
  .mode-main:hover,
  .mode-caret:hover {
    background: rgba(15, 23, 42, 0.04);
  }
}

.mode-main-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mode-main-icon svg {
  width: 20px;
  height: 20px;
}

.mode-main-text {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Dropdown: fixed to avoid clipping by any overflow */
.mode-menu {
  position: fixed;
  min-width: 240px;
  padding: 8px;
  border-radius: 16px;
  z-index: 70 !important;

  /* glass dropdown */
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 22px 60px rgba(0,0,0,0.18);

  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.mode-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* important: your global .hidden uses display:none !important */
.mode-menu.hidden {
  display: none !important;
}

.mode-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #0f172a;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 140ms ease;
}

.mode-menu-item:hover {
  background: rgba(15, 23, 42, 0.05);
}

.mode-menu-item[aria-current="true"] {
  background: rgba(59, 130, 246, 0.10);
}
/* FIX: dropdown should render above everything (Telegram WebView safe) */
#mode-menu {
  position: fixed !important;
  z-index: 2147483647 !important; /* max int32 */
  display: block; /* чтобы не зависеть от странных display */
  isolation: isolate; /* новый stacking context */
}

/* На некоторых WebView blur ломает отрисовку fixed-элементов — отключим */
#mode-menu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.96) !important;
}
/* ===== Premium Mode Switcher ===== */
.mode-switcher{
  border-radius: 9999px;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92));
  border: 1px solid rgba(15, 23, 42, 0.10);

  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.mode-main,
.mode-caret{
  background: transparent;
  border: 0;
  color: #0f172a;
  transition: background 160ms ease, transform 120ms ease;
}

@media (hover:hover){
  .mode-main:hover,
  .mode-caret:hover{
    background: rgba(15, 23, 42, 0.04);
  }
}

.mode-main:active,
.mode-caret:active{
  transform: scale(0.985);
}

.mode-main-text{
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ===== Premium Dropdown ===== */
.mode-menu{
  /* важно: position fixed уже есть */
  border-radius: 18px;
  padding: 10px;

  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
  border: 1px solid rgba(15, 23, 42, 0.10);

  box-shadow:
    0 26px 70px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,.75);

  /* чтобы было "премиально" и предсказуемо */
  transform-origin: top center;
}

.mode-menu.open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ===== Center items text + premium hover ===== */
.mode-menu-item{
  width: 100%;

  /* ✅ центрируем текст в кнопках */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 12px 14px;
  border-radius: 14px;

  font-size: 13px;
  font-weight: 750;
  color: #0f172a;

  transition: background 140ms ease, transform 120ms ease;
}

@media (hover:hover){
  .mode-menu-item:hover{
    background: rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
  }
}

/* текущий пункт */
.mode-menu-item[aria-current="true"]{
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
}


/* Реквизиты внизу */
.requisites {
    margin-top: -6px;
    padding-top: 10px;
    border-top: 1px dashed #e6e8ee;
    font-size: 11px;
    color: #8a94a6;
    line-height: 1.35;
}
.requisites-title {
    font-weight: 700;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}
.requisites-value {
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

#ref-copy-tg,
#ref-copy-web {
  padding-left: 16px;
  padding-right: 16px;
  /* если нужно, можно оставить высоту как есть */
}

/* Поля со ссылками — больше отступы слева/справа */
#ref-link-telegram,
#ref-link-web {
  padding-left: 16px;
  padding-right: 16px;
}


/* ===== Referral section compact ===== */
#referral-settings.settings-group {
  padding: 10px !important;
  margin-bottom: 10px;
}

#referral-settings .settings-title {
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

/* Details arrow rotation */
#referral-settings details[open] summary svg {
  transform: rotate(180deg);
}

#referral-settings details summary::-webkit-details-marker {
  display: none;
}

#referral-settings details summary::marker {
  content: '';
}

/* Copy button hover */
#referral-settings button:hover {
  background: #f3f4f6 !important;
}

/* Stat cards subtle hover */
#referral-settings div[style*="background:#f0fdf4"]:hover,
#referral-settings div[style*="background:#eff6ff"]:hover {
  filter: brightness(0.98);
}


.fav-dialog-btn{
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #f59e0b; /* оранжевый */
  font-size: 18px;
  line-height: 1;
}

.fav-dialog-btn:disabled{
  opacity: 0.6;
  cursor: default;
}

.fav-separator{
  border-top: 1px solid #e5e7eb;
  margin: 8px 10px;
}

/* ===== App Boot Loader ===== */
.boot-loader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 28px 30px;
  text-align: center;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 251, 255, 0.78) 55%, rgba(240, 247, 255, 0.72) 100%);
  backdrop-filter: blur(14px) saturate(1.16);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.boot-loader::before {
  content: "";
  position: absolute;
  inset: -35% -20% auto;
  height: 80%;
  background:
    radial-gradient(50% 55% at 28% 52%, rgba(37, 99, 235, 0.17) 0%, rgba(37, 99, 235, 0) 75%),
    radial-gradient(45% 50% at 72% 46%, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0) 74%);
  filter: blur(10px);
  animation: bootNebulaDrift 6.2s ease-in-out infinite;
  pointer-events: none;
}

.boot-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.56) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 74%, rgba(148, 163, 184, 0.28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 68%, rgba(148, 163, 184, 0.26) 0 1px, transparent 1.5px);
  animation: bootStarTwinkle 2.6s ease-in-out infinite;
  pointer-events: none;
}

.boot-loader__brand {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #2563eb 0%, #0ea5e9 45%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.boot-loader__orb {
  position: relative;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 999px;
  background: radial-gradient(58% 58% at 50% 50%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}

.boot-loader__orb::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(45% 45% at 50% 50%, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0) 100%);
  filter: blur(9px);
  opacity: 0.7;
  animation: bootCloudPulse 2.8s ease-in-out infinite;
}

.boot-loader__orb::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    -52px -32px 0 rgba(148, 163, 184, 0.34),
    -46px 12px 0 rgba(148, 163, 184, 0.24),
    -18px -50px 0 rgba(255, 255, 255, 0.54),
    24px -48px 0 rgba(148, 163, 184, 0.3),
    48px -18px 0 rgba(148, 163, 184, 0.3),
    54px 16px 0 rgba(148, 163, 184, 0.24),
    22px 52px 0 rgba(255, 255, 255, 0.54),
    -26px 48px 0 rgba(148, 163, 184, 0.26);
  animation: bootStarTwinkle 2.2s ease-in-out infinite;
  pointer-events: none;
}

.boot-loader__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.78);
  box-shadow:
    0 -44px 0 rgba(59, 130, 246, 0.56),
    16px -41px 0 rgba(14, 165, 233, 0.44),
    30px -32px 0 rgba(59, 130, 246, 0.46),
    40px -16px 0 rgba(148, 163, 184, 0.32),
    44px 0 0 rgba(59, 130, 246, 0.54),
    40px 16px 0 rgba(14, 165, 233, 0.44),
    30px 32px 0 rgba(59, 130, 246, 0.5),
    16px 41px 0 rgba(148, 163, 184, 0.32),
    0 44px 0 rgba(59, 130, 246, 0.56),
    -16px 41px 0 rgba(14, 165, 233, 0.44),
    -30px 32px 0 rgba(59, 130, 246, 0.5),
    -40px 16px 0 rgba(148, 163, 184, 0.32),
    -44px 0 0 rgba(59, 130, 246, 0.54),
    -40px -16px 0 rgba(14, 165, 233, 0.44),
    -30px -32px 0 rgba(59, 130, 246, 0.5),
    -16px -41px 0 rgba(148, 163, 184, 0.32);
}

.boot-loader__ring--one {
  animation: bootCloudSpin 6.8s linear infinite;
}

.boot-loader__ring--two {
  transform: scale(0.68);
  opacity: 0.76;
  filter: blur(0.2px);
  animation: bootCloudSpinReverse 5.4s linear infinite;
}

.boot-loader__core {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82) 0%, rgba(219, 234, 254, 0.7) 100%);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.2) inset,
    0 8px 16px rgba(59, 130, 246, 0.18);
  backdrop-filter: blur(4px);
  animation: bootCoreFloat 2.4s ease-in-out infinite;
  position: relative;
}

.boot-loader__core::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  opacity: 0.72;
}

.boot-loader__title {
  position: relative;
  z-index: 1;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0;
}

.boot-loader__subtitle {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.boot-loader__bar {
  position: relative;
  z-index: 1;
  width: 188px;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
  overflow: hidden;
  margin-top: 2px;
}

.boot-loader__bar span {
  display: block;
  width: 44%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%);
  animation: bootBar 1.35s ease-in-out infinite;
}

@keyframes bootRingA {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.02); opacity: 0.58; }
}

@keyframes bootRingB {
  from { transform: scale(0.68) rotate(0deg); }
  to { transform: scale(0.68) rotate(-360deg); }
}

@keyframes bootPulse {
  0%, 100% { transform: translateY(0) scale(0.96); }
  50% { transform: translateY(-1.5px) scale(1); }
}

@keyframes bootBar {
  0% { transform: translateX(-120%); opacity: 0.6; }
  50% { opacity: 1; }
  100% { transform: translateX(280%); opacity: 0.6; }
}

@keyframes bootCloudSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bootCloudSpinReverse {
  from { transform: scale(0.68) rotate(0deg); }
  to { transform: scale(0.68) rotate(-360deg); }
}

@keyframes bootCloudPulse {
  0%, 100% { opacity: 0.52; transform: scale(0.94); }
  50% { opacity: 0.85; transform: scale(1.04); }
}

@keyframes bootCoreFloat {
  0%, 100% { transform: translateY(0) scale(0.96); }
  50% { transform: translateY(-1.5px) scale(1); }
}

@keyframes bootNebulaDrift {
  0%, 100% { transform: translateX(0) translateY(0); opacity: 0.62; }
  50% { transform: translateX(4px) translateY(2px); opacity: 0.9; }
}

@keyframes bootStarTwinkle {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

/* ===== Sidebar Brand Refresh (safe for Telegram/Web offsets) ===== */
#sidebar {
  background:
    radial-gradient(120% 85% at 100% -10%, rgba(14, 165, 233, 0.05) 0%, rgba(14, 165, 233, 0) 62%),
    radial-gradient(90% 80% at -10% 8%, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0) 58%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 55%, #ffffff 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

#sidebar > .p-4.border-b.pt-8 {
  position: relative;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.72) 100%);
  backdrop-filter: saturate(1.08);
}

#sidebar > .p-4.border-b.pt-8::before {
  content: none;
}

#sidebar > .p-4.border-b.pt-8 h2 {
  color: #0f172a !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#sidebar > .p-4.border-b.pt-8 h2::after {
  content: none;
}

#sidebar #account-selector {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(148, 163, 184, 0.45);
  color: #1e293b;
}

#sidebar #topup-button {
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

.sidebar-sections {
  padding: 8px 10px 6px;
  gap: 4px;
}

.sidebar-section-btn {
  position: relative;
  isolation: isolate;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: #334155;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background-color 170ms ease,
    color 170ms ease,
    box-shadow 170ms ease;
}

.sidebar-section-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(130deg, rgba(37, 99, 235, 0.05), rgba(14, 165, 233, 0.02));
  opacity: 0;
  transition: opacity 170ms ease;
  z-index: -1;
}

.sidebar-section-btn:hover {
  transform: translateY(-1px);
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.64);
}

.sidebar-section-btn:hover::before {
  opacity: 1;
}

.sidebar-section-btn.active {
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.22);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.68));
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.1);
}

.sidebar-section-btn.active::before {
  opacity: 0.75;
}

.sidebar-section-icon {
  width: 28px;
  height: 28px;
  margin-right: 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  color: #334155;
  border: 1px solid rgba(148, 163, 184, 0.2);
  transition: inherit;
}

.sidebar-section-btn:hover .sidebar-section-icon {
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(255, 255, 255, 0.9);
}

.sidebar-section-btn.active .sidebar-section-icon {
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.22);
  background: #ffffff;
}

.sidebar-content {
  height: calc(100% - 148px);
  padding: 0 8px 10px;
}

.sidebar-section-content {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 8px 20px rgba(148, 163, 184, 0.1);
}

/* Dialog list refresh */
#dialogs-list {
  padding: 6px 6px 10px;
}

#dialogs-list .dialog-item {
  margin-bottom: 5px;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

#dialogs-list .dialog-item:hover:not(.active) {
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.28);
  box-shadow: 0 8px 16px rgba(148, 163, 184, 0.14);
}

#dialogs-list .dialog-item.active {
  border-color: rgba(59, 130, 246, 0.3);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.12);
}

#dialogs-list .dialog-header {
  margin-bottom: 4px;
}

#dialogs-list .dialog-title {
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}

#dialogs-list .dialog-subtitle {
  color: #64748b;
  font-size: 11px;
  line-height: 1.2;
}

#dialogs-list .dialog-item.active .dialog-title {
  color: #1e40af;
}

#dialogs-list .dialog-item.active .dialog-subtitle {
  color: #334155;
}

#dialogs-list .delete-dialog-btn,
#dialogs-list .fav-dialog-btn {
  border-radius: 8px;
}

#dialogs-list .delete-dialog-btn:hover,
#dialogs-list .fav-dialog-btn:hover {
  background: #f1f5f9;
}

/* Settings content refresh */
#settings-section {
  padding: 10px;
}

#settings-section .settings-group {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(148, 163, 184, 0.1);
  padding: 12px;
}

#settings-section .settings-title {
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}

#settings-section .setting-item {
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  padding: 12px 0;
}

#settings-section .setting-item:first-of-type {
  border-top: 0;
  padding-top: 8px;
}

#settings-section .setting-label {
  color: #1e293b;
  font-weight: 600;
}

#settings-section .setting-description {
  color: #64748b;
}

#settings-section .language-select {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background-color: #ffffff;
}

#settings-section #save-ai-settings {
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.18);
}

#referral-settings.settings-group,
#web-auth-settings.settings-group {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  border-radius: 14px !important;
}

#referral-settings details {
  border-color: rgba(148, 163, 184, 0.22) !important;
  border-radius: 10px !important;
}

#referral-settings input,
#referral-settings button {
  border-radius: 8px !important;
}

#dialogs-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.58) transparent;
}

#dialogs-list::-webkit-scrollbar {
  width: 8px;
}

#dialogs-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 999px;
}

@media (max-width: 768px) {
  #sidebar {
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
  }

  .sidebar-section-btn {
    border-radius: 13px;
    min-height: 40px;
    padding: 7px 11px;
  }

  .sidebar-section-icon {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-section-btn,
  .sidebar-section-btn::before,
  .sidebar-section-icon {
    transition: none !important;
    animation: none !important;
  }
}

/* Top up button refresh */
#sidebar #topup-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%) !important;
  color: #1d4ed8 !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

#sidebar #topup-button::before {
  content: "$";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
}

#sidebar #topup-button:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.42) !important;
  background: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%) !important;
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.16);
}

#sidebar #topup-button:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.12);
}

#sidebar #topup-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.24), 0 10px 18px rgba(37, 99, 235, 0.14);
}

@media (max-width: 768px) {
  #sidebar #topup-button {
    width: 100%;
    min-height: 38px;
    justify-content: center;
  }
}

/* Save AI settings button in the same style as Top up */
#settings-section #save-ai-settings {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%) !important;
  color: #1d4ed8 !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

#settings-section #save-ai-settings::before {
  content: "✓";
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

#settings-section #save-ai-settings:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.42) !important;
  background: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%) !important;
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.16) !important;
}

#settings-section #save-ai-settings:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.12) !important;
}

#settings-section #save-ai-settings:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.24), 0 10px 18px rgba(37, 99, 235, 0.14) !important;
}

/* Chat workspace: near full width + wider agent messages */
:root {
  --chat-max-width: min(96vw, 1580px);
  --appbar-max-width: min(94vw, 1420px);
  --content-gutter: 8px;
}

#chat-area {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#chat-messages {
  width: 100% !important;
  max-width: var(--chat-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--content-gutter) !important;
  padding-right: var(--content-gutter) !important;
  box-sizing: border-box !important;
}

#chat-messages .agent-message {
  width: 100% !important;
  max-width: 100% !important;
}

#chat-messages .agent-message {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 14px;
}

#chat-messages .agent-message .formatted-content,
#chat-messages .agent-message > div {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  :root {
    --chat-max-width: 100vw;
    --appbar-max-width: 100vw;
    --content-gutter: 6px;
  }
}

/* Model selector redesign */
#model-selector-container .model-select-pro {
  position: relative;
  display: grid;
  gap: 0;
  width: 100%;
}

#model-selector-container .model-select-pro__field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

#model-selector-container .model-select-pro__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#model-selector-container .model-select-pro__trigger {
  width: 100%;
  min-width: 0;
  height: 34px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#model-selector-container .model-select-pro__trigger:hover {
  border-color: rgba(100, 116, 139, 0.48);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
}

#model-selector-container .model-select-pro.is-open .model-select-pro__trigger,
#model-selector-container .model-select-pro__trigger:focus-visible {
  outline: none;
  border-color: rgba(37, 99, 235, 0.46);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16), 0 12px 24px rgba(37, 99, 235, 0.14);
}

#model-selector-container .model-select-pro__trigger-left {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#model-selector-container #model-selector-selected-label {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

#model-selector-container .model-select-pro__trigger-right {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

#model-selector-container .model-select-pro__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  pointer-events: none;
}

#model-selector-container .model-select-pro__count-badge {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

#model-selector-container .model-select-pro__chevron {
  width: 15px;
  height: 15px;
  color: #64748b;
  pointer-events: none;
  transition: transform 0.18s ease;
}

#model-selector-container .model-select-pro__chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

#model-selector-container .model-select-pro.is-open .model-select-pro__chevron {
  transform: rotate(180deg);
}

#model-selector-container .model-select-pro__dropdown {
  --model-modal-gap: 22px;
  position: fixed !important;
  left: 50%;
  top: 50dvh;
  transform: translate(-50%, -50%);
  width: calc(100vw - (var(--model-modal-gap) * 2));
  max-width: 520px;
  z-index: 109;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #fff;
  box-shadow: 0 32px 64px rgba(15, 23, 42, 0.26);
  padding: 10px;
  max-height: 68vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#model-selector-container .model-select-pro__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  margin-bottom: 8px;
}

#model-selector-container .model-select-pro__modal-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

#model-selector-container .model-select-pro__close-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

#model-selector-container .model-select-pro__close-btn:hover {
  background: #eef2f7;
  border-color: rgba(100, 116, 139, 0.45);
  color: #334155;
}

#model-selector-container .model-select-pro__options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}

#model-selector-container .model-select-pro__group {
  margin-bottom: 12px;
}

#model-selector-container .model-select-pro__group:last-child {
  margin-bottom: 0;
}

#model-selector-container .model-select-pro__group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 6px;
  padding: 0 2px;
}

#model-selector-container .model-select-pro__group-items {
  display: grid;
  gap: 6px;
}

#model-selector-container .model-select-pro__option {
  width: 100%;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: #fff;
  border-radius: 10px;
  min-height: 40px;
  padding: 8px 10px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

#model-selector-container .model-select-pro__option:hover {
  border-color: rgba(100, 116, 139, 0.4);
  background: #f8fafc;
}

#model-selector-container .model-select-pro__option.is-selected {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(37, 99, 235, 0.08);
}

#model-selector-container .model-select-pro__option-title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

#model-selector-container .model-select-pro__availability {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0f766e;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 999px;
  padding: 3px 7px;
  white-space: nowrap;
}

#model-selector-container .model-select-pro__empty {
  font-size: 13px;
  color: #64748b;
  padding: 10px 4px 8px;
  text-align: center;
}

#model-selector-container .model-select-pro__backdrop {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 108;
  border: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

#model-selector-container .model-select-pro.is-open .model-select-pro__backdrop {
  display: block;
  pointer-events: auto;
}

@media (max-width: 768px) {
  #model-selector-container .model-select-pro {
    gap: 0;
  }

  #model-selector-container .model-select-pro__trigger {
    height: 34px;
    border-radius: 12px;
    font-size: 13px;
  }

  #model-selector-container .model-select-pro__count-badge {
    min-width: 22px;
    height: 22px;
    font-size: 10px;
    padding: 0 5px;
  }

  #model-selector-container .model-select-pro__dropdown {
    --model-modal-gap: 12px;
    left: 50%;
    top: 50dvh;
    transform: translate(-50%, -50%);
    width: calc(100vw - (var(--model-modal-gap) * 2));
    border-radius: 16px;
    max-height: 74vh;
    padding: 10px 10px 12px;
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.35);
  }

  #model-selector-container .model-select-pro__option {
    min-height: 42px;
    padding: 9px 10px;
  }

  #model-selector-container .model-select-pro__option-title {
    font-size: 13px;
  }
}

/* Model selector portal mode (render in document.body) */
.model-select-pro__dropdown.model-select-pro__dropdown--portal {
  --model-modal-gap: 22px;
  position: fixed !important;
  left: 50%;
  top: 50dvh;
  transform: translate(-50%, -50%);
  width: calc(100vw - (var(--model-modal-gap) * 2));
  max-width: 520px;
  z-index: 2147483640;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #fff;
  box-shadow: 0 32px 64px rgba(15, 23, 42, 0.26);
  padding: 10px;
  max-height: 68vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  margin-bottom: 8px;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__modal-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__close-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__close-btn:hover {
  background: #eef2f7;
  border-color: rgba(100, 116, 139, 0.45);
  color: #334155;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__group {
  margin-bottom: 12px;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__group:last-child {
  margin-bottom: 0;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 6px;
  padding: 0 2px;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__group-items {
  display: grid;
  gap: 6px;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option {
  width: 100%;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: #fff;
  border-radius: 10px;
  min-height: 40px;
  padding: 8px 10px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option:hover {
  border-color: rgba(100, 116, 139, 0.4);
  background: #f8fafc;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option.is-selected {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(37, 99, 235, 0.08);
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option-title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__availability {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0f766e;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 999px;
  padding: 3px 7px;
  white-space: nowrap;
}

.model-select-pro__backdrop.model-select-pro__backdrop--portal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2147483639;
  border: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.model-select-pro.is-open .model-select-pro__backdrop.model-select-pro__backdrop--portal {
  display: block;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .model-select-pro__dropdown.model-select-pro__dropdown--portal {
    --model-modal-gap: 12px;
    left: 50%;
    top: 50dvh;
    transform: translate(-50%, -50%);
    width: calc(100vw - (var(--model-modal-gap) * 2));
    max-height: 74vh;
    padding: 10px 10px 12px;
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.35);
  }

  .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option {
    min-height: 42px;
    padding: 9px 10px;
  }

  .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option-title {
    font-size: 13px;
  }
}

/* Honor native hidden attribute for model selector modal/backdrop */
#model-selector-container .model-select-pro__dropdown[hidden],
#model-selector-container .model-select-pro__backdrop[hidden],
.model-select-pro__dropdown.model-select-pro__dropdown--portal[hidden],
.model-select-pro__backdrop.model-select-pro__backdrop--portal[hidden] {
  display: none !important;
}

/* =========================================================
   FINAL OVERRIDE: Loader-inspired mode switch + welcome card
   ========================================================= */

#chat-modes-bar .mode-switcher {
  background:
    radial-gradient(110% 130% at 8% -20%, rgba(37, 99, 235, 0.06) 0%, rgba(37, 99, 235, 0) 62%),
    radial-gradient(95% 120% at 92% 120%, rgba(14, 165, 233, 0.05) 0%, rgba(14, 165, 233, 0) 64%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.9) 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(10px) saturate(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
}

#chat-modes-bar #mode-main-btn.mode-main {
  min-width: 188px;
  padding: 12px 18px;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#chat-modes-bar #mode-main-btn.mode-main:hover {
  background: rgba(15, 23, 42, 0.035) !important;
}

#chat-modes-bar #mode-main-btn.mode-main:active {
  transform: scale(0.985);
}

#chat-modes-bar #mode-main-btn .mode-main-text {
  font-weight: 800;
  font-size: 14px;
  color: #1f2937;
}

#chat-modes-bar #mode-main-btn .mode-main-icon {
  width: 22px;
  height: 22px;
}

#chat-modes-bar #mode-main-btn .mode-main-icon svg {
  width: 22px;
  height: 22px;
  color: #334155;
  filter: none;
}

#welcome-screen {
  position: relative;
  isolation: isolate;
  margin: 10px auto 6px !important;
  width: min(100%, 860px);
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(130% 170% at 0% 0%, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0) 56%),
    radial-gradient(120% 160% at 100% 100%, rgba(14, 165, 233, 0.05) 0%, rgba(14, 165, 233, 0) 62%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.82) 0%, rgba(249, 250, 251, 0.82) 100%) !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(8px) saturate(1.03);
  -webkit-backdrop-filter: blur(8px) saturate(1.03);
  overflow: visible;
  padding: 18px 18px 14px !important;
}

#welcome-screen::before {
  content: "";
  position: absolute;
  inset: -45% -20% auto;
  height: 78%;
  background:
    radial-gradient(42% 56% at 26% 54%, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0) 74%),
    radial-gradient(40% 52% at 72% 44%, rgba(14, 165, 233, 0.07) 0%, rgba(14, 165, 233, 0) 74%);
  filter: blur(9px);
  animation: welcomeNebulaDrift 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

#welcome-screen::after {
  content: "";
  position: absolute;
  inset: -34px;
  border-radius: 34px;
  background:
    radial-gradient(55% 58% at 22% 34%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 72%),
    radial-gradient(52% 56% at 78% 66%, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0) 72%);
  filter: blur(20px);
  opacity: 0.6;
  pointer-events: none;
  z-index: -2;
  animation: welcomeHaloPulse 9s ease-in-out infinite;
}

#welcome-screen h2 {
  font-size: clamp(1.15rem, 1.9vw, 1.38rem) !important;
  letter-spacing: -0.01em;
  margin-bottom: 8px !important;
  color: #1f2937 !important;
  font-weight: 700 !important;
  text-wrap: balance;
}

#welcome-screen p[data-i18n="welcome.description"] {
  max-width: 700px !important;
  margin-bottom: 8px !important;
  color: #475569 !important;
  font-size: clamp(0.86rem, 1.35vw, 0.92rem) !important;
  line-height: 1.45 !important;
}

#welcome-screen p[data-i18n="welcome.start"] {
  color: #94a3b8 !important;
  font-size: 0.84rem !important;
}

#welcome-screen .animate-fade-in {
  margin-bottom: 10px !important;
  font-size: 0.9rem !important;
}

@keyframes welcomeNebulaDrift {
  0%, 100% { transform: translateX(0) translateY(0); opacity: 0.6; }
  50% { transform: translateX(4px) translateY(2px); opacity: 0.92; }
}

@keyframes welcomeHaloPulse {
  0%, 100% { opacity: 0.52; transform: scale(0.98); }
  50% { opacity: 0.72; transform: scale(1.02); }
}

@media (max-width: 768px) {
  #chat-modes-bar #mode-main-btn.mode-main {
    min-width: 156px;
    padding: 11px 14px;
  }

  #welcome-screen {
    border-radius: 18px;
    padding: 14px 12px 10px !important;
    margin-top: 8px !important;
  }
}

/* Settings legal toolbar (privacy/terms links) */
.settings-legal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
}

.settings-legal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.settings-legal-link:hover {
  background: #f8fafc;
  border-color: #93c5fd;
  color: #1d4ed8;
}

@media (max-width: 480px) {
  .settings-legal-toolbar {
    gap: 6px;
  }

  .settings-legal-link {
    flex: 1 1 calc(50% - 6px);
    min-height: 28px;
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 9px;
  }
}