src/ui/styles.py

CSS = """
html, body, .gradio-container {
    height: 100% !important;
    margin: 0 !important;
}

/* 1. Глобальный контейнер: занимаем все пространство без прокрутки страницы */
.gradio-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--background-fill-primary) !important;
    overflow: hidden !important;
}

/* 2. Основной ряд: Sidebar + Chat
   Сделано flex: main-row занимает оставшееся пространство и не вызывает лишнюю высоту */
#main-row {
    display: flex !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
}

/* 3. Сайдбар: фиксированная ширина, скролл при переполнении */
#sidebar-container {
    width: 320px !important;
    min-width: 240px !important;
    max-width: 380px !important;
    border-right: 1px solid var(--border-color-primary) !important;
    background-color: var(--background-fill-secondary) !important;
    padding: 1.25rem !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02) !important;
    overflow: auto !important;
}

/* Убираем "старение" (побледнение) при обновлении данных */
.stale {
    opacity: 1 !important;
    filter: none !important;
}

/* 5. Правая колонка с чатом (Главная область) */
#col-chat-main {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    background: var(--background-fill-primary) !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

/* ЧАТБОТ: Растягиваем на всю доступную высоту, min-height:0 для корректного flex-scroll */
#chatbot {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
}

/* Фикс для внутренней обертки Gradio Chatbot - предотвращаем overflow issues */
#chatbot > .wrapper {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: auto !important;
}

/* 6. Поле ввода: фиксируем снизу с помощью sticky, чтобы всегда быть видимым */
#input-area {
    padding: 0.75rem 1rem !important;
    border-top: 1px solid var(--border-color-primary) !important;
    background: var(--background-fill-primary) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02) !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
}

/* Текстовое поле адаптируется по ширине и не выходит за границы */
#input-area textarea {
    border-radius: 10px !important;
    border: 1px solid var(--border-color-primary) !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    transition: border-color 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#input-area textarea:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.1) !important;
}

/* 7. Кнопки и прочие элементы */
.gr-button-primary {
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* Кастомный скроллбар */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-400);
}

/* Скрытие футера */
footer {
    display: none !important;
}

/* Убираем лишние зазоры между элементами */
.gap {
    gap: 12px !important;
}
"""