CSS = """
/* 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;
}

/* 2. Основной ряд: Sidebar + Chat */
#main-row {
    flex-grow: 1 !important;
    height: 100vh !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
}

/* 3. Сайдбар */
#sidebar-container {
    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;
}



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

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

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

/* Фикс для внутренней обертки Gradio Chatbot */
#chatbot > .wrapper {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 6. Поле ввода: всегда внизу */
#input-area {
    padding: 1rem 2rem !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;
}

#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;
}

#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: 6px;
    height: 6px;
}

::-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;
}
"""