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