/* =========================================
   EDITFLOW AI HELPER STYLES
   ========================================= */

/* 1. Настраиваем секцию на весь экран (минус высота шапки сайта) */
/* 1. Настраиваем секцию на весь экран */
.helper-section {
    padding: 0;
    height: calc(100dvh - 80px); /* ИЗМЕНИЛИ vh на dvh (Dynamic Viewport) */
    display: flex;
    flex-direction: column;
}

/* 2. Убираем ограничения стандартного контейнера */
/* Ограничиваем ширину контейнера, чтобы он был ровно по шапке */
.helper-section .container {
    width: 100%;       /* <--- ДОБАВИТЬ ЭТУ СТРОКУ */
    max-width: 1200px; 
    margin: 0 auto;    
    padding: 0 20px;   
    height: 100%;
    display: flex;
}

/* Немного подправим отступ под логотипом */
.helper-header {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 0; /* Убираем любые лишние отступы сверху */
}

.helper-title img {
    height: 160px; /* Теперь лого будет действительно крупным и статусным */
    width: auto;
    display: block;
    margin: 0 auto;
    padding: 0;
}

.helper-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.text-gradient {
    background: linear-gradient(90deg, #8a2be2, #4a00e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.helper-subtitle {
    margin-top: 15px;
    font-size: 16px;
    color: #8c8c8c;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Главный контейнер окна */
.window {
    width: 100%;
    /* ИЗМЕНЕНИЯ ЗДЕСЬ: */
    height: 100vh;      /* Занимает всю высоту видимого экрана */
    max-width: 100vw;    /* Разрешаем занимать всю ширину */
    padding: 0;          /* Убираем отступы вокруг блока чата */
    margin: 0;           
    display: flex;
    justify-content: center; /* Центрируем, если сайт шире чата */
}

/* Каркас чата */
/* Каркас чата */
/* Каркас чата */
/* 3. Каркас чата: на весь экран, без рамок и теней */
.chat-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    gap: 0; /* Убираем дыру между меню и чатом */
}

/* Боковая панель */
/* Боковая панель */
.chat-sidebar {
    width: 280px;
    min-width: 280px;  /* <--- ДОБАВИТЬ ЭТУ СТРОКУ */
    flex-shrink: 0;    /* <--- ДОБАВИТЬ ЭТУ СТРОКУ (запрещает сжатие) */
    background: transparent;
    border-right: 1px solid #27272a; 
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.sidebar-title {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 0 !important;
    font-weight: 600;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clear-history-btn {
    background: transparent;
    border: none;
    color: #52525b; 
    cursor: pointer;
    font-size: 16px; /* Размер иконки */
    padding: 1px;
    border-radius: 6px;
    transition: all 0.2s ease;
    
    /* Убираем margin-top, так как align-items: center сделает всё за нас, 
       либо оставляем 2px для микро-корректировки "на глаз" */
    margin-top: 16px;
    display: flex; /* Чтобы иконка внутри кнопки центрировалась идеально */
    align-items: center;
}

/* Строка, в которой живут плашка режима и кнопка отправить */
.textarea-actions-row {
    display: block; /* Убрали flex, padding и min-height, чтобы пустая строка исчезала в 0px */
}

.clear-history-btn:hover {
    color: #ff4d4f; /* Краснеет при наведении */
    background: rgba(255, 77, 79, 0.1);
}

.action-btn {
    background: #252527;
    color: #e0e0e0;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 18px; /* Немного ужали падинги для компактности */
    text-align: left;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Флекс-режим для выравнивания иконки и текста */
    display: flex;
    align-items: center;
    gap: 12px; /* Расстояние между иконкой и текстом */
    width: 100%;
}

/* Активное состояние кнопки в боковом меню */
.action-btn.active {
    background: rgba(187, 134, 252, 0.1); /* Тот самый прозрачный фиолетовый */
    color: #BB86FC; /* Делаем текст фиолетовым */
    border-color: transparent;
}

/* Стили для самих иконок внутри кнопок */
.action-icon {
    width: 20px;  /* Оптимальный размер для иконок меню */
    height: 20px;
    object-fit: contain;
    flex-shrink: 0; /* Чтобы иконка не сжималась, если текст длинный */
}

.action-btn span {
    white-space: nowrap; /* Чтобы текст не переносился на другую строку */
}

/* Эффект при наведении на кнопку меню */
.action-btn:hover {
    background: rgba(187, 134, 252, 0.08); /* Очень легкая фиолетовая подсветка фона */
    color: #BB86FC; /* Текст и иконка становятся фиолетовыми */
    border-color: transparent;
}

/* Основная зона чата */
/* Контейнер правой части (где переписка и ввод) */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative; /* НУЖНО: для левитации нижнего блока */
    overflow: hidden;    /* Чтобы сообщения не вылезали за границы */
}

/* Зона с самими сообщениями */
.chat-messages {
    flex: 1;
    padding: 24px;
    /* Увеличиваем отступ снизу, чтобы текст мог прокрутиться ВЫШЕ поля ввода */
    padding-bottom: 250px !important; 
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
}

/* =========================================
   СООБЩЕНИЯ И АНИМАЦИИ
   ========================================= */

/* Магия плавного появления сообщений */
@keyframes messageFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px); /* Сообщение выплывает немного снизу */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message {
    display: flex;
    gap: 12px;
    max-width: 80%;
    /* Применяем анимацию ко всем новым сообщениям */
    animation: messageFadeIn 0.4s ease-out forwards; 
}

.message--bot {
    align-self: flex-start;
}

/* Выравниваем сообщения пользователя по правому краю без отступа аватарки */
.message--user {
    align-self: flex-end;
    margin-left: auto;
    max-width: 80%; /* Идеальное ограничение, как у бота */
}

/* Стили для иконки копирования (добавь в конец helper.css) */
/* Стили для иконки копирования */
/* Обертка сообщения (FLEX-END, как в прошлом шаге) */
.message--bot .message-bubble-wrapper {
    display: flex;
    align-items: flex-end; 
    gap: 10px; /* Немного увеличили отступ */
}

/* Сама кнопка */
.copy-btn {
    background: transparent;
    border: none;
    
    /* ИЗМЕНЕНИЯ ЗДЕСЬ: */
    color: #e0e0e0;       /* Сделали базовый цвет намного ярче (был серый, стал почти белый) */
    font-size: 18px;      /* Увеличили размер иконки (был 14px) */
    opacity: 0.7;         /* По умолчанию она слегка прозрачная */
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Плавная анимация */
    padding: 6px;         /* Увеличили область клика */
    margin-bottom: 6px;   /* Подкорректировали выравнивание под новый размер */
    border-radius: 6px;   /* Закруглили невидимую рамку */
}

/* Эффект при наведении */
.copy-btn:hover {
    opacity: 1;           /* Становится полностью непрозрачной */
    color: #BB86FC;       /* ИКОНКА ОКРАШИВАЕТСЯ В ФИОЛЕТОВЫЙ */
}

/* Настройки кружка аватарки */
.message-avatar {
    width: 36px;
    height: 36px;
    background: transparent; /* Убрали серый фон, чтобы иконка смотрелась чище */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden; /* Чтобы картинка не вылезала за края круга */
}

/* Чтобы картинка бота идеально вписывалась в кружок */
.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Для пользователя пока оставляем фиолетовый кружок (если потом не захочешь добавить его аватарку) */
.message--user .message-avatar {
    display: none !important;
}

.message-bubble {
    background: #27272a; 
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.5;
    
    /* ДОБАВЛЯЕМ ЭТИ ДВЕ СТРОКИ ДЛЯ ВОЛНЫ: */
    position: relative; 
    overflow: hidden;   
}

.message--bot .message-bubble {
    border-top-left-radius: 4px;
}

.message--user .message-bubble {
    background: #3b2d50; /* Фиолетовый фон для твоих сообщений */
    border-top-right-radius: 4px;
}

/* --- ЗОНА ВВОДА СООБЩЕНИЯ --- */
/* --- ЗОНА ВВОДА СООБЩЕНИЯ --- */
/* Возвращаем кликабельность самому полю ввода внутри секции */
/* Возвращаем кликабельность самому полю ввода внутри секции */
.chat-input-area {
    max-width: 800px; 
    margin: 0 auto; 
    width: 100%;
    padding: 0 24px;
    display: flex;
    
    /* 🔥 ИЗМЕНЕНО: Теперь блоки выстраиваются в колонку (друг под другом) */
    flex-direction: column; 
    align-items: stretch; /* Растягиваем их на все 100% ширины */
    
    gap: 16px;
    pointer-events: auto; 
}

.chat-bottom-section {
    position: absolute; /* ОТРЫВАЕМ ОТ СЕТКИ */
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* Мягкий градиент: сообщения будут плавно исчезать внизу */
    background: linear-gradient(to top, #0E0E0E 60%, transparent); 
    
    padding-bottom: 30px; /* Отступ от самого края */
    padding-top: 40px;    /* Чтобы градиент был мягким */
    
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 20;
    
    /* ВАЖНО: Пропускаем клики сквозь фон градиента, чтобы можно было 
       выделять текст сообщений за полем ввода */
    pointer-events: none; 
}

/* Само текстовое поле */
/* Само текстовое поле */
.chat-textarea {
    width: 100%;
    background: transparent !important; 
    border: none !important;           
    color: #e0e0e0;
    
    /* ИЗМЕНИЛИ: Справа сделали отступ 54px, чтобы длинный текст не залезал под кнопку, 
       а снизу вернули 14px для идеальной симметрии, когда поле пустое */
    padding: 14px 54px 14px 16px; 
    
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 22px;
    resize: none; 
    
    min-height: 52px;    
    max-height: 200px;   
    overflow-y: hidden;  
    outline: none !important;
    box-sizing: border-box;
}


/* =========================================
   НОВОЕ ОБЪЕДИНЕННОЕ ПОЛЕ ВВОДА
   ========================================= */

/* Общий контейнер (рама и фон) */
.textarea-unified-wrapper {
    flex: 1;
    background: #1e1e20; 
    border: 1px solid #27272a;
    border-radius: 12px;
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column; 
    overflow: hidden; 
    position: relative; /* НОВОЕ: Нужно для абсолютного позиционирования кнопки */
}

/* Перебиваем старые отступы для режима */
.active-mode-inline-container {
    padding: 0 16px 12px 16px !important; /* Отступы теперь здесь, а не в row */
    width: auto !important;
    margin: 0;
}

/* Эффект фокуса на всей обертке */
.textarea-unified-wrapper:focus-within {
    border-color: #3f3f46; 
}


.chat-textarea:focus {
    border-color: #27272a; 
    outline: none; 
}

/* Сама кнопка отправки */
.chat-send-btn {
    background: #ffffff;
    color: #121214;
    border: none;
    width: 36px; 
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* ИЗМЕНИЛИ: Жестко прибиваем кнопку поверх всего в правый нижний угол */
    position: absolute;
    bottom: 8px;
    right: 12px;
    margin: 0;
    z-index: 10;
}

/* Шапка бокового меню с кнопкой очистки */
/* Шапка бокового меню с кнопкой очистки */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Выравнивает их по одной горизонтальной оси */
    margin-bottom: 20px;
    padding-top: 4px; /* Небольшой отступ сверху, чтобы заголовок не "лип" к потолку */
}

/* Эффект при наведении */
/* Эффект при наведении */
.chat-send-btn:hover {
    background: #e0e0e0; /* При наведении становится светло-серой */
    color: #121214;
}

/* Эффект при нажатии */
.chat-send-btn:active {
    transform: translateY(2px);
}

/* =========================================
   БАЗОВЫЕ СТИЛИ, ШАПКА И ПОДВАЛ (ВМЕСТО STYLE2)
   ========================================= */
body {
    margin: 0;
    padding: 0;
    background-color: #0E0E0E; /* Твой фирменный темный фон */
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- ШАПКА --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(14, 14, 14, 0.9); /* Шапка в цвет фона, но с прозрачностью */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #2b2d31;
    z-index: 1000;
    height: 80px;
    display: flex;
    align-items: center;
}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo img {
    height: 32px;
    display: block;
}

.nav__list {
    display: flex;
    gap: 32px;
}

.nav__link {
    font-size: 15px;
    font-weight: 500;
    color: #a1a1aa;
    transition: color 0.2s;
}

.nav__link:hover, .nav__link.active {
    color: #ffffff;
}

.btn--outline {
    padding: 10px 20px;
    border: 1px solid #a855f7;
    background: transparent;
    color: #a855f7;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

.mobile-menu-btn, .mobile-menu {
    display: none; /* Скрываем мобильное меню на ПК */
}

/* --- ПОДВАЛ --- */
.footer {
    background: #0E0E0E; /* Подвал тоже сливаем с общим фоном */
    border-top: 1px solid #2b2d31;
    padding: 40px 0 20px;
    margin-top: auto;
}

.footer__container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

.footer__desc {
    color: #a1a1aa;
    font-size: 14px;
    margin-top: 12px;
    max-width: 250px;
}

.footer__title {
    color: #fff;
    font-size: 16px;
    margin-bottom: 16px;
}

.footer__list li {
    margin-bottom: 10px;
    font-size: 14px;
    color: #a1a1aa;
}

.footer__list li a:hover {
    color: #a855f7;
}

.socials {
    display: flex;
    gap: 12px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #1e1f22;
    border-radius: 50%;
    color: #a1a1aa;
    transition: all 0.2s;
}

.social-link:hover {
    background: #a855f7;
    color: #fff;
}

.footer__bottom {
    border-top: 1px solid #2b2d31;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #a1a1aa;
    font-size: 14px;
}

.payment-methods {
    display: flex;
    gap: 12px;
    font-size: 20px;
}


/* =========================================
   ИДЕАЛЬНЫЙ ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ (КАК НА СКРИНЕ)
   ========================================= */

/* Сама кнопка-обертка: делаем единую серую обводку */
/* Сама кнопка-обертка: делаем уже и с тусклой обводкой */
.header-user-btn {
    display: flex;
    align-items: center;
    gap: 10px; 
    padding: 6px 12px; /* Чуть уменьшили внутренние отступы (было 8px 16px) */
    border: 1px solid #27272a; /* Сделали обводку более тусклой, почти сливающейся с фоном */
    border-radius: 8px; 
    background: transparent;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 180px; /* Сделали кнопку уже (было 220px) */
    max-width: 240px; /* Не даем слишком длинной почте растянуть кнопку */
}

/* Эффект при наведении на всю кнопку */
.header-user-btn:hover {
    background-color: #161618; /* Еле заметная подсветка фона */
    border-color: #3f3f46; /* При наведении обводка чуть-чуть проявляется */
}

/* Стилизация иконки: она серая */
.header-avatar {
    font-size: 32px; /* Размер иконки */
    color: #a1a1aa; /* Серый цвет (zinc-400) */
    display: flex;
    align-items: center;
}

/* Колонка с текстом */
.header-user-details {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden; /* Чтобы длинная почта не ломала верстку */
}

/* Почта: она белая */
.header-email {
    font-size: 14px;
    color: #ffffff; /* Идеально белый */
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Три точки, если почта слишком длинная */
}

/* Ссылка на кабинет: она серая */
.header-cabinet-link {
    font-size: 12px;
    color: #a1a1aa; /* Серый цвет, как у иконки */
    text-decoration: none;
    font-weight: 400;
}

/* Убираем подчеркивание у ссылки при наведении на всю кнопку */
.header-user-btn:hover .header-cabinet-link {
    text-decoration: none;
}

/* Индикатор печати */
.typing-indicator {
    color: #a855f7;
    font-style: italic;
    animation: blink 1.4s infinite both;
}
@keyframes blink {
    0% { opacity: 0.2; }
    20% { opacity: 1; }
    100% { opacity: 0.2; }
}

/* =========================================
   ИНДИКАТОР РЕЖИМА ЧАТА
   ========================================= */
.active-mode-container {
    max-width: 800px;  /* Выравниваем по ширине поля ввода */
    margin: 0 auto;    /* Центрируем вместе с полем */
    width: 100%;
    padding: 0 24px 8px 24px; /* Отступ 8px снизу, чтобы не прилипало к полю */
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Серая плашка режима (теперь #252527 под стиль) */
.active-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #252527; 
    border: 1px solid #3f3f46; 
    color: #ffffff;
    padding: 6px 12px; 
    border-radius: 8px;
    font-size: 12px; 
    font-weight: 500;
}

/* Кнопка отмены (крестик) */
.cancel-mode-inline-btn {
    background: transparent;
    border: none;
    color: #a1a1aa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 2px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.cancel-mode-inline-btn:hover {
    opacity: 1;
    color: #ff4d4f;
}

.cancel-mode-btn {
    background: transparent;
    border: none;
    color: #a1a1aa; /* Делаем крестик мягко-серым по умолчанию */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 2px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

/* Эффект при наведении на крестик */
.cancel-mode-btn:hover {
    opacity: 1;
    color: #ff4d4f; /* Слегка краснеет, интуитивно показывая отмену */
}


/* =========================================
   КАСТОМНЫЙ ТЕМНЫЙ СКРОЛЛБАР
   ========================================= */

/* Для браузеров на движке WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px; /* Делаем скролл тонким и изящным */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent; /* Фон под скроллом прозрачный */
}

::-webkit-scrollbar-thumb {
    background: #27272a; /* Цвет ползунка сливается с нашими рамками */
    border-radius: 10px; /* Круглые края */
}

::-webkit-scrollbar-thumb:hover {
    background: #3f3f46; /* Чуть светлее при наведении */
}

/* Для Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #27272a transparent;
}


/* =========================================
   ПРОГРЕСС-БАР ЛИМИТОВ
   ========================================= */
.limit-tracker {
    margin-top: auto; /* Магия Flexbox: автоматически прижимает блок к самому низу! */
    background: #121214;
    border: 1px solid #27272a;
    border-radius: 12px;
    padding: 16px; /* Чуть уменьшили отступы для узкого сайдбара */
    width: 100%;
    box-sizing: border-box;
}

.limit-tracker-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px; /* Сделали шрифт капельку меньше, чтобы текст не переносился */
    color: #a1a1aa;
    font-weight: 500;
}

.limit-tracker-numbers {
    color: #4a4a4a; /* Серый цвет для общего числа */
}

.limit-tracker-numbers span {
    color: #ffffff; /* Белый цвет для оставшихся запросов */
    font-size: 16px;
    font-weight: 600;
}

.limit-progress-bar {
    width: 100%;
    height: 6px; /* Тонкая и аккуратная полоска */
    background: #27272a; /* Фон пустой части */
    border-radius: 10px;
    overflow: hidden;
}

.limit-progress-fill {
    height: 100%;
    width: 100% !important; /* Всегда заполнена */
    border-radius: 10px;
    transition: background 0.6s ease, box-shadow 0.6s ease; /* Плавный переход цвета */
}


/* Окно, через которое мы видим только одну строку */
.limit-numbers-window {
    height: 20px; /* Высота одной строки */
    overflow: hidden;
    position: relative;
}

/* Слайдер, который будет ездить вверх-вниз */
.limit-numbers-slider {
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Плавная «часовая» анимация */
}

.limit-slide {
    height: 20px; /* Должна совпадать с высотой окна */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Сдвиг вверх при активации ховера */
.limit-tracker.is-hovered .limit-numbers-slider {
    transform: translateY(-20px);
}

.limit-slide .unit {
    font-size: 11px;
    color: #4a4a4a;
    font-weight: 700;
}

/* Делаем весь блок интерактивным */
.limit-tracker {
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.limit-tracker:hover {
    border-color: rgba(187, 134, 252, 0.4);
}

/* =========================================
   КНОПКА ЗАГРУЗКИ ИСТОРИИ
   ========================================= */
.load-more-btn {
    background: rgba(187, 134, 252, 0.1);
    border: 1px solid rgba(187, 134, 252, 0.2);
    color: #BB86FC;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    margin: 0 auto 24px; /* Отступ снизу до сообщений */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.load-more-btn:hover {
    background: rgba(187, 134, 252, 0.2);
    border-color: rgba(187, 134, 252, 0.4);
    color: #ffffff;
}


/* =========================================
   МОДАЛЬНОЕ ОКНО УДАЛЕНИЯ ИСТОРИИ
   ========================================= */
.custom-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); /* Красивое размытие заднего фона */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.2s forwards;
}

.custom-modal {
    background: #1e1e20;
    border: 1px solid #27272a;
    border-radius: 16px;
    padding: 24px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform: translateY(20px);
    animation: slideUp 0.2s forwards;
}

.custom-modal-icon {
    font-size: 32px;
    color: #ff4d4f; /* Красный цвет предупреждения */
    margin-bottom: 16px;
}

.custom-modal-title {
    color: #fff;
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.custom-modal-text {
    color: #a1a1aa;
    font-size: 14px;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.custom-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    flex: 1; /* Кнопки занимают равное пространство */
}

.modal-btn-cancel {
    background: #27272a;
    color: #e0e0e0;
}

.modal-btn-cancel:hover {
    background: #3f3f46;
}

.modal-btn-danger {
    background: rgba(255, 77, 79, 0.1);
    color: #ff4d4f;
    border: 1px solid rgba(255, 77, 79, 0.2);
}

.modal-btn-danger:hover {
    background: #ff4d4f;
    color: #fff;
}

/* Анимации для плавного появления */
@keyframes fadeIn { to { opacity: 1; } }
@keyframes slideUp { to { transform: translateY(0); } }



/* =========================================
   ФИКС ГЛОБАЛЬНОЙ ШИРИНЫ (ЧТОБЫ НЕ БЫЛО СКРОЛЛА)
   ========================================= */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body, html { overflow-x: hidden; width: 100%; }

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Кнопка бургера скрыта на ПК */
.mobile-menu-toggle {
    display: none; 
    background: transparent;
    border: none;
    color: #e0e0e0;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
}



/* =========================================
   КНОПКА И МОДАЛКА "О БОТЕ"
   ========================================= */
.about-bot-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 16px; /* Отступ от логотипа */
}

.about-bot-btn:hover {
    color: #BB86FC;
    background: rgba(187, 134, 252, 0.1);
    border-color: rgba(187, 134, 252, 0.3);
}

/* Расширенная модалка */
.custom-modal.about-modal {
    max-width: 650px; /* Делаем её широкой */
    padding: 32px;
}

.about-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Две колонки на ПК */
    gap: 16px;
    text-align: left;
}

.about-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.2);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.2s, border-color 0.2s;
}

.about-feature:hover {
    border-color: rgba(187, 134, 252, 0.3);
    transform: translateY(-2px);
}

.about-feature i {
    font-size: 18px;
    color: #BB86FC;
    background: rgba(187, 134, 252, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-feature h4 {
    margin: 0 0 6px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.about-feature p {
    margin: 0;
    color: #a1a1aa;
    font-size: 13px;
    line-height: 1.4;
}

#closeAboutBtn:hover {
    color: #fff !important;
}

/* Делаем последний блок широким на ПК */
.about-feature--wide {
    grid-column: 1 / -1; /* Занимает все доступные колонки в ряду */
    display: flex;
    align-items: center; /* Центрируем иконку относительно текста по вертикали */
}

/* Стили для выделения (фиолетовое свечение) */
.about-feature.highlight-feature {
    border-color: rgba(187, 134, 252, 0.4);
    background: linear-gradient(145deg, rgba(187, 134, 252, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow: 0 4px 20px rgba(187, 134, 252, 0.15);
}

.about-feature.highlight-feature i {
    background: #BB86FC;
    color: #121212;
}


/* =========================================
   СЕТКА ИКОНОК ПРОГРАММ В МОДАЛКЕ (ЦВЕТНЫЕ)
   ========================================= */
.software-icons-list {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.software-icons-list img {
    height: 22px; 
    width: auto;
    /* 🔥 Убрали ЧБ фильтр, теперь они в цвете по умолчанию */
    opacity: 1; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* При наведении просто немного увеличиваем для интерактивности */
.software-icons-list img:hover {
    transform: scale(1.15) translateY(-2px);
}

/* Адаптация для мобилок */
@media (max-width: 768px) {
    .software-icons-list {
        gap: 15px;
        justify-content: center;
    }
    
    .software-icons-list img {
        height: 20px;
    }
}




/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (ТЕЛЕФОНЫ)
   ========================================= */
@media (max-width: 768px) {

    /* Адаптация кнопки и модалки "О боте" */
    .about-bot-text { display: none; } /* Скрываем текст, оставляем только иконку */
   .about-bot-btn { 
        display: none !important; 
    }
    .header-left { flex: 1; /* Чтобы кнопка "О боте" могла оттолкнуться */ }
    
    .custom-modal.about-modal { padding: 24px; }
    .about-features-grid { grid-template-columns: 1fr; } /* Одна колонка на телефоне */
    /* 1. Шапка */
    .mobile-menu-toggle { display: block; } /* Показываем бургер */
    .logo img { 
        max-width: 120px; /* Чуть увеличили лимит для красоты */
        height: auto !important; /* Отменяем жесткую высоту от десктопа */
        max-height: 32px; /* Ограничиваем, чтобы шапку не распирало */
        object-fit: contain; /* Защита от любых сплющиваний */
    }
    
    /* Защищаем сам контейнер логотипа от сжатия флексбоксом */
    .logo {
        flex-shrink: 0;
    }

    /* Превращаем кнопку профиля в круглую аватарку ТОЛЬКО на телефонах */
    .header-user-btn { 
        width: 40px;
        height: 40px;
        min-width: auto; 
        padding: 0 !important; 
        border-radius: 50%;
        justify-content: center;
    }
    
    .header-user-details { display: none !important; } /* Полностью скрываем текст */
    
    .header-avatar { 
        font-size: 22px; 
        margin: 0; 
    }

    /* 2. Растягиваем чат на весь экран, убирая боковые отступы */
    .helper-section .container { padding: 0; width: 100%; }
    .chat-wrapper { flex-direction: column; width: 100%; border-radius: 0; }
    .chat-main { width: 100%; flex: 1; }

    /* 3. Прячем сайдбар за левый край экрана */
    /* 3. Прячем сайдбар за левый край экрана */
    /* 3. Прячем сайдбар за левый край экрана */
    /* 3. Прячем сайдбар за левый край экрана */
    .chat-sidebar {
        position: fixed;
        top: 80px;
        
        /* 🔥 Возвращаем математику с нашей умной переменной из JS! Она идеально считает экран */
        height: calc(var(--app-height, 100dvh) - 80px); 
        bottom: auto; /* Отключаем жесткую привязку, которая глючила на некоторых смартфонах */
        
        left: -100%; 
        width: 280px;
        background: #0E0E0E; 
        z-index: 999;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid #27272a;
        box-shadow: 10px 0 20px rgba(0,0,0,0.5);
        
        /* 🔥 Жестко делаем ОГРОМНЫЙ отступ снизу (60px), чтобы баланс гарантированно вылез над любой системной полоской или кнопками Android/iOS */
        padding: 20px 20px 80px 20px; 
        
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    /* Класс, который будет добавлять JS для выезда меню */
    .chat-sidebar.is-open { left: 0; }

    /* 4. Компактные отступы внутри чата */
    .chat-messages { padding: 16px; }
    .chat-input-area { padding: 0 10px; margin-bottom: 10px; }
    .chat-textarea { padding-right: 48px; } /* Чтобы текст не залезал под кнопку отправить */
    .chat-send-btn { right: 8px; bottom: 8px; }

    /* --- МОБИЛЬНЫЕ СООБЩЕНИЯ И ПОЛЕ ВВОДА --- */
    
    /* Сообщения бота занимают всю доступную ширину экрана */
    .message {
        max-width: 100%; 
    }
    
    /* Сообщения юзера чуть-чуть сдвигаем, чтобы визуально отличать диалог */
    .message--user {
        max-width: 90%; 
    }
    
    /* Делаем внутренние отступы в тексте чуть компактнее */
    .message-bubble {
        padding: 12px 14px;
        font-size: 14px; /* Чуть уменьшаем шрифт для мобилок, чтобы больше влезало */
    }

    /* Прижимаем поле ввода и убираем лишние пустые зоны снизу */
    .chat-bottom-section {
        padding-bottom: 12px; 
    }
    
    .chat-input-area {
        padding: 0 12px;
    }

    /* --- ЖЕСТКАЯ ФИКСАЦИЯ ЭКРАНА --- */
    /* --- ЖЕСТКАЯ ФИКСАЦИЯ ЭКРАНА --- */
    /* --- ЖЕСТКАЯ ФИКСАЦИЯ ЭКРАНА --- */
    /* --- ЖЕСТКАЯ ФИКСАЦИЯ ЭКРАНА --- */
    /* --- ЖЕСТКАЯ ФИКСАЦИЯ ЭКРАНА --- */
    /* --- ЖЕСТКАЯ ФИКСАЦИЯ ЭКРАНА --- */
    html, body {
        height: 100%;
        overflow: hidden !important; 
        overscroll-behavior-y: none; 
        width: 100%;
        margin: 0;
        padding: 0;
        /* 🔥 Убрали position: fixed, который ломал верстку */
    }

    /* Прибиваем шапку к экрану намертво */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    /* 🔥 Заставляем главный блок брать высоту из JS-переменной (с фолбэком на 100dvh) */
    .main {
        height: var(--app-height, 100dvh); 
        padding-top: 80px !important; 
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .helper-section {
        flex: 1;
        height: 100%; 
        padding: 0;
    }

    /* Если на этой странице случайно грузится подвал сайта - скрываем его, 
       чтобы он не растягивал высоту */
    .footer {
        display: none !important; 
    }
}


/* =========================================
   ФОРМАТИРОВАНИЕ ТЕКСТА В ЧАТЕ
   ========================================= */
.chat-inline-code {
    background-color: #1e1e20; /* Темно-серый фон */
    color: #BB86FC; /* Фиолетовый текст (под твой бренд) */
    padding: 2px 6px;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    border: 1px solid #27272a;
}

/* =========================================
   АНИМАЦИЯ КОПИРОВАНИЯ
   ========================================= */
@keyframes copyPulse {
    0% { transform: scale(0.95); }
    50% { 

        text-shadow: 0 0 10px rgba(187, 134, 252, 0.6); /* Легкое фиолетовое свечение */
    }
    100% { transform: scale(1); }
}

.copy-btn.copied {
    color: #BB86FC !important; /* Плавно перекрашиваем в фиолетовый */
    animation: copyPulse 0.4s ease-out forwards; /* Запускаем пульсацию */
}



/* =========================================
   ВОЛНА ПРИ КОПИРОВАНИИ СООБЩЕНИЯ
   ========================================= */

/* Создаем невидимый слой поверх текста сообщения */
.message-bubble::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* Тот самый легкий фиолетовый блик: по краям прозрачный, в центре цветной */
    background: linear-gradient(270deg, transparent 0%, rgba(187, 134, 252, 0.15) 30%, transparent 100%);
    
    transform: translateX(100%); /* Прячем его далеко справа */
    pointer-events: none; /* Чтобы блик не мешал выделять текст мышкой */
}

/* Класс, который будет запускать полет блика */
.message-bubble.wave-effect::after {
    animation: rippleWave 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes rippleWave {
    0% { transform: translateX(100%); }   /* Старт справа */
    100% { transform: translateX(-100%); } /* Улетает влево за пределы сообщения */
}

/* =========================================
   ИНТЕРАКТИВНЫЕ ЧЕК-ЛИСТЫ ПРАВОК (С ЦИТАТАМИ)
   ========================================= */
.chat-todo {
    display: flex;
    flex-direction: column; /* Изменили на колонку, чтобы цитата была снизу */
    margin: 4px 0;
    padding: 0; /* Убрали паддинги, перенесли их в todo-row */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.chat-todo:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(187, 134, 252, 0.4);
}

/* === ГЛАВНАЯ СТРОКА ПРАВКИ === */
.todo-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 8px 4px 4px;
    min-height: 28px;
    cursor: pointer;
}

.todo-checkbox {
    margin: 0 8px 0 4px; /* Отступы для отдельной галочки */
    cursor: pointer;
    width: 15px;
    height: 15px;
    accent-color: #BB86FC;
    flex-shrink: 0;
}

.todo-text {
    line-height: 1.3;
    font-size: 14px;
    color: #e0e0e0;
    transition: all 0.2s ease;
    flex: 1; /* Занимает все место до кнопок */
}

.todo-timing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(187, 134, 252, 0.12);
    color: #BB86FC;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 6px;
}

/* === БЛОК С КНОПКАМИ (УДАЛИТЬ И СКОПИРОВАТЬ) === */
.todo-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-left: 8px;
}

.chat-todo:hover .todo-actions { opacity: 1; }

.todo-copy-btn, .todo-delete-btn {
    background: transparent;
    border: none;
    color: #888888;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-copy-btn:hover { color: #BB86FC; background: rgba(255, 255, 255, 0.1); }
.todo-delete-btn:hover { color: #f44336; background: rgba(244, 67, 54, 0.15); }

/* === ОРИГИНАЛЬНАЯ ЦИТАТА (РАСКРЫВАШКА) === */
.todo-original {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.chat-todo.is-expanded .todo-original {
    max-height: 200px; /* Достаточно для большой цитаты */
    opacity: 1;
}

.todo-original-inner {
    margin: 0 8px 8px 32px; /* Выравниваем по тексту, пропуская галочку */
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.25);
    border-left: 2px solid rgba(187, 134, 252, 0.5);
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: #999;
    line-height: 1.4;
    font-style: italic;
}

.todo-original-inner i {
    font-size: 10px;
    margin-right: 6px;
    color: rgba(187, 134, 252, 0.5);
}

/* === МАГИЯ ВЫПОЛНЕННОЙ ЗАДАЧИ === */
/* Используем :has(), так как чекбокс теперь внутри .todo-row */
/* Теперь при нажатии на чекбокс текст и оформление не меняются */
/* === МАГИЯ ВЫПОЛНЕННОЙ ЗАДАЧИ === */
.chat-todo:has(.todo-checkbox:checked) .todo-text { 
    text-decoration: none; /* Убрали зачеркивание */
    color: #bebebe;        /* Текст становится серым (темным) */
}

.chat-todo:has(.todo-checkbox:checked) .todo-timing { 
    background: rgba(255, 255, 255, 0.05); 
    color: #666666; 
}

.chat-todo:has(.todo-checkbox:checked) { 
    opacity: 0.45; /* Блок становится полупрозрачным, визуально уходя на задний план */
    border-color: transparent; 
}

/* =========================================
   АНИМАЦИЯ ВОЛНЫ ДЛЯ ПРАВОК (ТОЛЬКО ДЛЯ СТРОКИ)
   ========================================= */

/* Теперь за границы не выходит строка, а не весь блок */
.todo-row {
    position: relative;
    overflow: hidden; 
}

/* Блик теперь привязан к todo-row */
.todo-row::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(270deg, transparent 0%, rgba(187, 134, 252, 0.3) 50%, transparent 100%);
    transform: translateX(100%);
    pointer-events: none;
    z-index: 1; /* Чтобы волна была поверх текста, но под кнопками */
}

/* Запуск анимации именно для строки */
.todo-row.wave-effect::after {
    animation: rippleWaveTodo 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Также уберем лишние свойства с общего контейнера, которые мы добавляли раньше */
.chat-todo {
    overflow: visible; /* Чтобы тени или эффекты не резались */
}

@keyframes rippleWaveTodo {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.todo-delete-btn.is-confirming {
    background: rgba(244, 67, 54, 0.2) !important;
    color: #f44336 !important;
    animation: pulseConfirm 0.5s infinite alternate;
}

@keyframes pulseConfirm {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}


/* Изменение цвета выделения текста */
::selection {
    background-color: rgba(187, 134, 252, 0.3); /* Наш фиолетовый с прозрачностью */
    color: #ffffff; /* Цвет самого текста при выделении */
}

/* Для браузеров на движке Firefox */
::-moz-selection {
    background-color: rgba(187, 134, 252, 0.3);
    color: #ffffff;
}


/* Контейнер, который прижимает всё содержимое к низу сайдбара */
.sidebar-footer {
    margin-top: auto; 
    display: flex;
    flex-direction: column;
    gap: 8px; 
    width: 100%;
    padding-top: 20px;
    flex-shrink: 0; /* 🔥 ЗАПРЕЩАЕМ футеру сжиматься или прятаться */
}
/* Стили для самой кнопки идеи (делаем её аккуратной) */
.idea-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #aaa;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.idea-btn i {
    color: #FFD700;
    font-size: 14px;
}

.idea-btn:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.3);
    color: #fff;
}

/* Убедись, что у самого сайдбара есть эти свойства, чтобы margin-top: auto сработал */
.chat-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%; /* Или любая фиксированная высота */
}

/* =========================================
   КАСТОМНЫЙ ПОЛЗУНОК НАСТРОЕК (СУБТИТРЫ)
   ========================================= */
.range-slider-wrapper {
    position: relative;
    width: 100%;
    margin-top: 40px; /* Место сверху для плавающей цифры */
    margin-bottom: 5px;
}

/* Плавающая цифра */
.range-tooltip {
    position: absolute;
    top: -34px;
    transform: translateX(-50%);
    background: #BB86FC;
    color: #121212;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 8px;
    pointer-events: none; /* Клик проходит сквозь неё на ползунок */
    box-shadow: 0 4px 10px rgba(187, 134, 252, 0.3);
    z-index: 2;
}

/* Маленький треугольник-хвостик внизу цифры */
.range-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #BB86FC;
}

/* Сама полоса */
/* Сама полоса ползунка */
.custom-range {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 10px;
    outline: none;
    cursor: pointer;

    /* Делаем шаг в 10px для идеального просчета */
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2) 10px,
            transparent 10px,
            transparent 20px
        ),
        linear-gradient(to right, #BB86FC, #BB86FC),
        linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));

    background-size:
        var(--value, 50%) 100%,
        var(--value, 50%) 100%,
        100% 100%;
    background-repeat: no-repeat;
    
    animation: waveSlider 1.5s linear infinite;
}

/* 28.2px - это диагональ квадрата 20x20px. Это делает зацикливание бесшовным */
@keyframes waveSlider {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 28.2px 0, 0 0, 0 0; }
}

/* Кружочек (ползунок) для Chrome/Safari */
.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #BB86FC;
    cursor: pointer;
    border: 4px solid #1e1e20; /* Темная рамка создает красивый эффект кольца */
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.4);
    transition: transform 0.1s ease;
}

.custom-range::-webkit-slider-thumb:hover,
.custom-range:active::-webkit-slider-thumb {
    transform: scale(1.25); /* Увеличивается при клике/наведении */
}

/* Кружочек (ползунок) для Firefox */
.custom-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #BB86FC;
    cursor: pointer;
    border: 4px solid #1e1e20;
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.4);
    transition: transform 0.1s ease;
}

.custom-range:active::-moz-range-thumb {
    transform: scale(1.25);
}


/* --- СТИЛИ ДЛЯ ИКОНКИ ВОПРОСА И ПОДСКАЗКИ --- */
.info-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    cursor: help;
}

.info-icon {
    font-size: 14px;
    color: #52525b; /* Тусклый цвет по умолчанию */
    transition: color 0.2s ease;
}

.info-icon-wrapper:hover .info-icon {
    color: #BB86FC; /* Подсвечиваем при наведении */
}

/* Сама плашка подсказки */
.info-tooltip {
    position: absolute;
    bottom: calc(100% + 10px); /* Появляется над иконкой */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    background: #27272a;
    color: #e0e0e0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    width: 180px; /* Фиксированная ширина, чтобы текст красиво переносился */
    text-align: center;
    line-height: 1.4;
    border: 1px solid #3f3f46;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    
    pointer-events: none; /* Чтобы не мешала кликам */
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

/* Маленький треугольник внизу подсказки */
.info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #27272a transparent transparent transparent;
}

/* Показ при наведении */
.info-icon-wrapper:hover .info-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   СТИЛИ ДЛЯ ВЫПАДАЮЩЕГО СПИСКА (СУБТИТРЫ)
   ========================================= */
#targetLangInput option {
    background-color: #1e1e20; /* Темный фон (в цвет интерфейса) */
    color: #ffffff;            /* Белый текст */
    padding: 10px;             /* Немного "воздуха" между пунктами */
}

/* Опционально: меняем цвет рамки при клике (фокусе) на селект */
#targetLangInput:focus {
    border-color: rgba(187, 134, 252, 0.5) !important;
}


/* =========================================
   ПРОДВИНУТЫЙ ВИДЖЕТ СУБТИТРОВ
   ========================================= */
.srt-widget {
    background: #1e1e20;
    border: 1px solid #27272a;
    border-radius: 12px;
    margin-top: 12px;
    overflow: hidden;
    width: 100%;
}

.srt-preview-wrapper {
    position: relative;
    max-height: 140px; /* Высота превью (примерно 3 блока субтитров) */
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 16px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: #a1a1aa;
    line-height: 1.5;
}

/* Класс, который добавляется при разворачивании */
.srt-preview-wrapper.is-expanded {
    max-height: 3000px; /* Большой запас для длинного текста */
}

/* Тот самый эффект затухания снизу */
.srt-fade {
    position: absolute;
    bottom: 0; 
    left: 0; 
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, rgba(30, 30, 32, 0), rgba(30, 30, 32, 1));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Прячем градиент, когда текст развернут */
.srt-preview-wrapper.is-expanded .srt-fade {
    opacity: 0;
}

/* Нижняя панель с кнопками */
.srt-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #252527;
    border-top: 1px solid #27272a;
}

/* Кнопка "Развернуть" */
.srt-expand-btn {
    background: transparent;
    border: none;
    color: #a1a1aa;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    padding: 0;
}

.srt-expand-btn:hover {
    color: #BB86FC;
}

/* Кнопка "Скачать" (переопределяем старые стили) */
.srt-download-btn {
    background: #BB86FC;
    color: #121212;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease;
}

.srt-download-btn:hover {
    background: #a855f7;
}


/* Кнопка меню в кастомном режиме */
.cm-menu-wrapper {
    /* Отрываем иконку от общего макета, чтобы она не отнимала место у текста */
    position: absolute; 
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 2;
}

/* На компьютерах (где есть мышка) прячем по умолчанию */
/* На компьютерах (где есть мышка) прячем по умолчанию */
@media (hover: hover) {
    
    .cm-menu-wrapper {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
    }

    /* 1. По умолчанию текста МНОГО (иконки нет, отступ не нужен) */
    .mode-select-area {
        padding-right: 0; 
    }

    /* 2. При наведении показываем иконку... */
    .action-btn:hover .cm-menu-wrapper,
    .action-btn:has(.is-open) .cm-menu-wrapper {
        opacity: 1;
        visibility: visible;
    }

    /* 3. ...И одновременно плавно сжимаем текст, уступая место иконке */
    .action-btn:hover .mode-select-area,
    .action-btn:has(.is-open) .mode-select-area {
        padding-right: 28px; 
    }
}

.cm-menu-btn {
    color: #52525b;
    padding: 2px 8px; /* Оставили 8px по бокам, но убрали лишнюю высоту (было 8px) */
    cursor: pointer;
    transition: color 0.2s;
    font-size: 16px;  /* Можно сделать саму иконку капельку крупнее для удобства */
    display: flex;
    align-items: center;
}

i.action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.cm-menu-btn:hover {
    color: #BB86FC;
}

/* Выпадающее меню */
.cm-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #1e1e20;
    border: 1px solid #3f3f46;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 100;
    min-width: 140px;
    display: none; /* Скрыто по умолчанию */
    overflow: hidden;
}

.cm-dropdown.is-open {
    display: block;
}

.cm-dropdown-item {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e0e0e0;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.cm-dropdown-item:hover {
    background: rgba(187, 134, 252, 0.1);
    color: #BB86FC;
}

.cm-dropdown-item.delete {
    color: #ff4d4f;
}

.cm-dropdown-item.delete:hover {
    background: rgba(255, 77, 79, 0.1);
}


/* =========================================
   СКРОЛЛ ДЛЯ СПИСКА РЕЖИМОВ В САЙДБАРЕ
   ========================================= */
.sidebar-scroll-area {
    flex: 1; 
    min-height: 0; 
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
    padding-right: 8px;
    margin-right: -8px; 
    
    /* Для Firefox: скроллбар прозрачный по умолчанию */
    scrollbar-color: transparent transparent; 
}

/* Для Firefox: скроллбар появляется при наведении на блок */
.sidebar-scroll-area:hover {
    scrollbar-color: #27272a transparent;
}

/* Кастомный тонкий скроллбар для Chrome/Safari */
.sidebar-scroll-area::-webkit-scrollbar {
    width: 4px;
}

.sidebar-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

/* 🔥 По умолчанию ползунок ПОЛНОСТЬЮ ПРОЗРАЧНЫЙ */
.sidebar-scroll-area::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}

/* 🔥 Появляется только тогда, когда мышка находится НАД БЛОКОМ режимов */
.sidebar-scroll-area:hover::-webkit-scrollbar-thumb {
    background: #27272a;
}

/* Меняет цвет при наведении на сам ползунок */
.sidebar-scroll-area:hover::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}


/* =========================================
   ФИКС ДЛИННЫХ НАЗВАНИЙ КАСТОМНЫХ РЕЖИМОВ
   ========================================= */

/* Заставляем текст обрезаться и добавляем троеточие */
/* =========================================
   ФИКС ДЛИННЫХ НАЗВАНИЙ РЕЖИМОВ
   ========================================= */
.mode-select-area {
    flex: 1;
    min-width: 0; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    /* Добавляем плавность для анимации сжатия */
    transition: padding-right 0.2s ease; 
    /* На мобильных телефонах иконка видна всегда, поэтому отступ есть сразу */
    padding-right: 28px; 
}

/* Делаем саму кнопку якорем для парящей иконки */
.action-btn {
    position: relative; 
}


/* =========================================
   ИСТОРИЯ ТОКЕНОВ
   ========================================= */
.token-history-btn {
    background: transparent;
    border: none;
    color: #52525b;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.token-history-btn:hover {
    color: #BB86FC;
    background: rgba(187, 134, 252, 0.1);
}

.token-history-list {
    max-height: 350px;
    overflow-y: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px; /* Для скроллбара */
}

/* Кастомный скроллбар для списка истории */
.token-history-list::-webkit-scrollbar { width: 4px; }
.token-history-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
.token-history-list::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }

.history-item {
    background: rgba(0,0,0,0.2);
    border: 1px solid #27272a;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-item-title { color: #e0e0e0; font-size: 13px; font-weight: 500; }
.history-item-date { color: #888; font-size: 11px; }
.history-item-tokens { color: #ff4d4f; font-weight: 600; font-size: 14px; }


/* Кнопка отмены для превью файла в субтитрах */
.media-remove-btn {
    position: absolute;
    top: -8px;
    left: -8px; /* Разместили слева, чтобы не мешал кнопке отправки справа */
    background: #27272a;
    color: #a1a1aa;
    border: 1px solid #3f3f46;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 20;
}

.media-remove-btn:hover {
    background: #ff4d4f;
    border-color: #ff4d4f;
    color: #fff;
}


/* --- АНИМАЦИЯ ПУЛЬСИРУЮЩЕЙ ВОЛНЫ (ОБНОВЛЕННАЯ) --- */
.pulse-icon-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
}

.pulse-icon-container i {
    position: relative;
    z-index: 2;
}

.pulse-icon-container::before,
.pulse-icon-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Сделали цвет гораздо мягче и прозрачнее (0.15 вместо 0.4) */
    background: rgba(187, 134, 252, 0.05); 
    /* Замедлили анимацию до 4 секунд и сделали затухание плавным (ease-out) */
    animation: pulse-wave 4s infinite ease-out; 
    z-index: 1;
    pointer-events: none; /* Чтобы волна не мешала кликам */
}

.pulse-icon-container::after {
    /* Вторая волна запускается ровно на середине первой */
    animation-delay: 2s; 
}

@keyframes pulse-wave {
    0% { transform: scale(1); opacity: 1; }
    /* scale(20) растянет волну до 960px, что с запасом покроет весь твой блок */
    100% { transform: scale(20); opacity: 0; } 
}

/* --- КНОПКИ ВЫБОРА ЯЗЫКА --- */
.lang-selector-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.lang-option-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.lang-option-btn:hover {
    background: rgba(187, 134, 252, 0.1);
    color: #fff;
    border-color: rgba(187, 134, 252, 0.4);
}

.lang-option-btn.active {
    background: #BB86FC;
    color: #000;
    border-color: #BB86FC;
    /* font-weight удалили, чтобы кнопка не расширялась при клике */
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.3);
}


/* =========================================
   ФИКС РАЗМЕРОВ БЛОКА БАЛАНСА
   ========================================= */

/* Выстраиваем цифры и текст в ровную линию */
.limit-slide {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* Уменьшаем сами цифры и убираем баг с обрезкой низа */
.limit-slide span[id] { 
    font-size: 12px !important;
    line-height: 1 !important; 
    font-weight: 600;
}

/* Уменьшаем надписи TKN и ЗАПРОСОВ */
.limit-slide .unit {
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 0.5px;
}


/* Кнопка подгрузки старых списаний */
.history-load-more {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    margin-top: 4px;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.history-load-more:hover {
    background: rgba(187, 134, 252, 0.1);
    color: #BB86FC;
    border-color: rgba(187, 134, 252, 0.4);
}


/* =========================================
   DRAG & DROP ДЛЯ ЗАГРУЗКИ МЕДИА
   ========================================= */
#uploadWrapper {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Класс, который добавляется скриптом, когда файл "висит" над блоком */
#uploadWrapper.dragover {
    background: rgba(187, 134, 252, 0.15) !important;
    border-color: #BB86FC !important;
    border-style: solid !important; /* Меняем пунктир на сплошную линию */
    transform: scale(1.02); /* Слегка увеличиваем весь блок */
    box-shadow: 0 0 20px rgba(187, 134, 252, 0.2);
}

/* Иконка внутри тоже реагирует */
#uploadWrapper.dragover i {
    transform: scale(1.15);
    color: #fff !important;
}

#uploadWrapper i {
    transition: transform 0.3s ease, color 0.3s ease;
}


/* =========================================
   СТАРТОВАЯ КАРТОЧКА (ОНБОРДИНГ)
   ========================================= */
.welcome-card {
    background: #1e1e20;
    border: 1px solid rgba(187, 134, 252, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 10px;
    max-width: 100%;
}

.welcome-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #27272a;
}

.welcome-card-icon {
    width: 40px;
    height: 40px;
    background: rgba(187, 134, 252, 0.1);
    color: #BB86FC;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.welcome-card-title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.welcome-card-subtitle {
    margin: 4px 0 0 0;
    color: #a1a1aa;
    font-size: 13px;
}

.welcome-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.welcome-feature-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.welcome-feature-item i {
    color: #BB86FC;
    margin-top: 2px;
}

.welcome-feature-text {
    font-size: 13px;
    color: #e0e0e0;
    line-height: 1.4;
}

.welcome-model-badge {
    display: inline-block;
    background: #252527;
    border: 1px solid #3f3f46;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    color: #a1a1aa;
    margin-top: 16px;
}

.custom-mode-item .menu-dots {
  visibility: hidden; 
  /* или opacity: 0; pointer-events: none; */
}

.custom-mode-item:hover .menu-dots {
  visibility: visible; 
  /* или opacity: 1; pointer-events: auto; */
}


/* =========================================
   ЧЕКБОКСЫ В НАСТРОЙКАХ РЕЖИМОВ
   ========================================= */
.cm-dropdown-item.checkbox-item {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.cm-dropdown-item.checkbox-item input[type="checkbox"] {
    accent-color: #BB86FC; /* Фирменный фиолетовый */
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.cm-dropdown-item.checkbox-item span {
    font-size: 13px;
    color: #e0e0e0;
    white-space: nowrap;
}

.cm-dropdown-item.checkbox-item:hover span {
    color: #BB86FC;
}


/* Кнопка-скрепка внутри поля ввода */
/* Кнопка-скрепка внутри поля ввода */
.inline-upload-btn {
    position: absolute;
    left: 16px;   /* Сдвигаем правее от левого края рамки */
    bottom: 14px; /* Приподнимаем, чтобы она встала ровно по центру строки текста */
    background: transparent;
    border: none;
    color: #a1a1aa;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
    display: none; 
}

.inline-upload-btn:hover {
    color: #BB86FC;
}

/* =========================================
   СВОРАЧИВАНИЕ ДЛИННЫХ СООБЩЕНИЙ ПОЛЬЗОВАТЕЛЯ
   ========================================= */
.msg-collapse-wrapper {
    position: relative;
    max-height: 140px; /* Высота примерно на 6-7 строк текста */
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.msg-collapse-wrapper.is-expanded {
    max-height: 5000px; /* Большой запас для стены текста */
}

.msg-collapse-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    /* Градиент уходит в цвет фона сообщения юзера (#3b2d50) */
    background: linear-gradient(to bottom, rgba(59, 45, 80, 0), rgba(59, 45, 80, 1));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.msg-collapse-wrapper.is-expanded .msg-collapse-fade {
    opacity: 0; /* Прячем градиент при разворачивании */
}

.msg-expand-btn {
    background: transparent;
    border: none;
    color: #BB86FC; /* Фиолетовая кнопка под стиль бренда */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0 0 0;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    transition: color 0.2s;
}

.msg-expand-btn:hover {
    color: #d1b3ff;
}

/* Эффект пульсации для аватарки бота */
.message-avatar {
    position: relative;
}

.message-avatar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    animation: avatarPulse 2s infinite ease-in-out;
    z-index: -1;
}

@keyframes avatarPulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.5; }
}

/* Стили для картинки или видео внутри аватарки */
.message-avatar img,
.message-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔥 УВЕЛИЧИВАЕМ МАСШТАБ САМОГО ВИДЕО */
    /* 1.2 — это +20% к размеру. Можно поставить 1.5 или больше, пока шар не станет нужного размера */
    transform: scale(2); 
    display: block;
}

/* =========================================
   ЛОАДЕР ДЛЯ ВИДЕО-АВАТАРКИ
   ========================================= */
.message-avatar {
    position: relative; /* Важно: чтобы лоадер центрировался ровно внутри кружка */
}

.avatar-loader {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #52525b; /* Тускло-серый цвет, чтобы не отвлекать от сообщений */
    font-size: 18px;
    border-radius: 50%;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* Скрытие скроллбара для горизонтальных панелей */
.hide-scrollbar {
    -ms-overflow-style: none;  /* для IE и Edge */
    scrollbar-width: none;  /* для Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* для Chrome, Safari и Opera */
}

/* Класс для мгновенного появления сообщений из истории */
.message.no-anim {
    animation: none !important;
    transform: none !important;
}

/* =========================================
   КНОПКА РАСКРЫТИЯ (СТРЕЛКА)
   ========================================= */
.todo-expand-btn {
    background: transparent !important;
    border: none;
    color: #71717a; /* Тускло-серый цвет, как у остальных иконок */
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.todo-expand-btn:hover {
    color: #BB86FC; /* Твой фирменный фиолетовый при наведении */
}

/* =========================================
   АНИМАЦИЯ АККОРДЕОНА (ОРИГИНАЛЬНЫЙ ТЕКСТ)
   ========================================= */
/* 1. Скрываем блок по умолчанию */
.todo-original {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

/* 2. Показываем блок плавно, когда JS добавляет класс is-expanded */
.chat-todo.is-expanded .todo-original {
    max-height: 800px; /* С запасом для очень длинных цитат */
    opacity: 1;
    margin-top: 8px; /* Отступ от самой задачи */
}

/* =========================================
   МИНИМАЛИСТИЧНАЯ КНОПКА "КУПИТЬ ТОКЕНЫ"
   ========================================= */
.buy-tokens-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Сделали 8px вместо 10px как у Обратной связи, чтобы была ниже */
    padding: 8px 10px; 
    background: transparent;
    /* Пунктирная рамка в стиле Обратной связи, но с фиолетовым оттенком */
    border: 1px dashed rgba(187, 134, 252, 0.25);
    border-radius: 10px;
    color: #aaa;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.buy-tokens-btn i {
    color: #BB86FC; /* Фиолетовая иконка молнии */
    font-size: 14px;
}

.buy-tokens-btn:hover {
    background: rgba(187, 134, 252, 0.05);
    border-color: rgba(187, 134, 252, 0.5);
    color: #fff;
}


/* --- СВЕТОФОР УВЕРЕННОСТИ ДЛЯ ЧЕКЛИСТОВ (СФЕРЫ) --- */

/* --- СВЕТОФОР УВЕРЕННОСТИ (ШАРЫ ВНУТРИ БЛОКА) --- */

.chat-todo .todo-row {
    display: flex;
    align-items: center; /* Центрирует шар, чекбокс и текст по вертикали */
    gap: 10px;           /* Одинаковый отступ между шаром, чекбоксом и текстом */
    padding: 8px 12px;   /* Внутренние отступы для аккуратности */
}

/* Базовый стиль шара */
.todo-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;      /* Чтобы шар не сплющивался */
    background-color: rgba(255, 255, 255, 0.1); /* Цвет, если рейтинг не определен */
    transition: all 0.3s ease;
}

/* Цвета в зависимости от класса родителя */
.chat-todo.rating-green .todo-indicator {
    background-color: #4CAF50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.chat-todo.rating-yellow .todo-indicator {
    background-color: #FFB300;
    box-shadow: 0 0 8px rgba(255, 179, 0, 0.6);
}

.chat-todo.rating-red .todo-indicator {
    background-color: #E53935;
    box-shadow: 0 0 8px rgba(229, 57, 53, 0.6);
}

/* Убираем старый padding, если он мешает */
.chat-todo .todo-checkbox {
    margin: 0;
}



/* ========================================================== */
/* 🔥 АНИМАЦИЯ ОЖИДАНИЯ ОТВЕТА ИИ (МАГИЧЕСКИЕ ЗВЕЗДЫ) 🔥      */
/* ========================================================== */

.ai-thinking-box {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: rgba(187, 134, 252, 0.05);
    border: 1px solid rgba(187, 134, 252, 0.15);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    box-shadow: inset 0 0 20px rgba(187, 134, 252, 0.05);
}

/* Пробегающий блик по фону */
.ai-thinking-box::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(187, 134, 252, 0.15), transparent);
    animation: ai-sweep 2s infinite linear;
}

@keyframes ai-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Контейнер для звезд */
.ai-sparkles-container {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Общий класс для звезд */
.ai-sparkle {
    position: absolute;
    fill: #BB86FC;
    filter: drop-shadow(0 0 6px rgba(187, 134, 252, 0.8));
}

/* 🔥 Новая анимация: быстрый полет вправо */
@keyframes ai-fly-right {
    0% { transform: translateX(-20px) scale(0.2); opacity: 0; }
    15% { opacity: 1; transform: translateX(-10px) scale(1); }
    85% { opacity: 1; transform: translateX(20px) scale(1); }
    100% { transform: translateX(30px) scale(0.2); opacity: 0; }
}

/* Центральная белая звезда (самая быстрая) */
.ai-sparkle.s-main {
    width: 16px; height: 16px;
    top: 5px; left: 5px;
    fill: #fff; 
    animation: ai-fly-right 0.8s infinite linear;
}

/* Верхняя фиолетовая звезда */
.ai-sparkle.s-mini1 {
    width: 10px; height: 10px;
    top: -2px; left: 0;
    animation: ai-fly-right 1.1s infinite linear;
    animation-delay: 0.3s; /* Задержка, чтобы летели не одновременно */
}

/* Нижняя фиолетовая звезда */
.ai-sparkle.s-mini2 {
    width: 12px; height: 12px;
    bottom: 0; left: 0;
    animation: ai-fly-right 0.9s infinite linear;
    animation-delay: 0.6s;
}

/* Переливающийся текст */
.ai-thinking-text {
    background: linear-gradient(90deg, #fff, #BB86FC, #fff);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-shine 2s infinite linear;
    position: relative; /* Чтобы текст был поверх блика */
}

@keyframes text-shine {
    to { background-position: 200% center; }
}


/* ========================================================== */
/* 🔥 КАРТОЧКИ ПОДСКАЗОК В ПУСТОМ ЧАТЕ (EMPTY STATE) 🔥       */
/* ========================================================== */

.welcome-tip-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: auto; /* Прижимает по центру/низу в зависимости от флекс-контейнера */
    margin-bottom: auto;
    padding: 20px;
    box-sizing: border-box;
}

.welcome-tip-card {
    background: rgba(187, 134, 252, 0.05);
    border: 1px solid rgba(187, 134, 252, 0.15);
    border-radius: 14px;
    padding: 22px 24px;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    animation: tip-fade-in-up 0.5s ease-out forwards;
}

@keyframes tip-fade-in-up {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

.welcome-tip-card .tip-header {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome-tip-card .tip-desc {
    color: #a1a1aa;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.welcome-tip-card .tip-label {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.welcome-tip-card .tip-example-user {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px;
    border-radius: 10px;
    color: #fff; /* Сделали текст белым, как ты и просил */
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 18px; /* Оставляем отступ снизу, чтобы не прилипало к следующему заголовку */
    font-style: normal; /* Убираем курсив */
}

.welcome-tip-card .tip-example-bot {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px;
    border-radius: 10px;
    color: #ccc;
    font-size: 14.5px;
    line-height: 1.5;
}


/* ========================================================== */
/* 🔥 ПОЛНОЭКРАННЫЙ DRAG & DROP ПОВЕРХ ЧАТА 🔥              */
/* ========================================================== */

/* Скрытый по умолчанию контейнер на весь экран */
#fullscreen-drag-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
    
    /* 🔥 МАГИЯ: Эффект размытия фона 🔥 */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); /* Для Safari */
    
    /* Центрирование содержимого */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Поверх всех элементов на странице */
    z-index: 10000; 
    
    /* Плавное появление */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    
    /* Чтобы клики не проходили сквозь него, когда он активен */
    pointer-events: none; 
    
    color: #fff;
    font-family: sans-serif;
    text-align: center;
}

/* Класс, который мы будем добавлять через JS для показа окна */
#fullscreen-drag-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Включаем взаимодействие, чтобы поймать drop */
}

/* Стили для иконки скрепки */
#fullscreen-drag-overlay .drag-icon {
    font-size: 80px; /* Большая иконка */
    color: #BB86FC; /* Ваш фирменный фиолетовый */
    margin-bottom: 20px;
    
    /* Эффект свечения */
    filter: drop-shadow(0 0 15px rgba(187, 134, 252, 0.6));
}

/* Стили для текста */
#fullscreen-drag-overlay .drag-text {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
   .privacy-badge { display: none !important; }
}


/* 1. Делаем шрифт чуть компактнее, чтобы длинные слова влезали 100% */
.action-btn .mode-select-area {
    font-size: 13.5px !important;       /* Чуть уменьшаем размер */
    letter-spacing: -0.3px !important;  /* Слегка сдвигаем буквы */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1;
}

/* 2. Прячем шестеренку по умолчанию */
.action-btn .cm-menu-wrapper {
    display: none !important;
}

/* 3. Показываем шестеренку при наведении */
.action-btn:hover .cm-menu-wrapper {
    display: block !important;
}

/* Уникальный стиль для блока приватности в модалке */
.about-feature.privacy-feature {
    background-color: #18181A !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    text-align: left;
}

/* Зеленый щит в едином размере карточек */
.about-feature.privacy-feature i {
    color: #4CAF50 !important;
    background: rgba(76, 175, 80, 0.1) !important;
}