Update styles.py

src/ui/styles.py

@@ -1,52 +1,26 @@
 CSS = """
-/* 1. Глобальные правила растягивания на весь экран */
+/* 1. Глобальный фон страницы */
 html, body, .gradio-container {
-    height: 100vh !important;
-    min-height: 100vh !important;
+    background-color: #212121 !important;
     margin: 0 !important;
     padding: 0 !important;
-    overflow: hidden !important;
-    background-color: #212121 !important; /* Общий темный фон */
-}
-
-/* Растягиваем все внутренние обертки Gradio, чтобы чат занимал всю высоту */
-.gradio-container .main,
-.gradio-container .wrap,
-.gradio-container .contain,
-.gradio-container .sidebar-parent {
-    height: 100% !important;
-    min-height: 100% !important;
-    display: flex !important;
-    flex-direction: row !important;
-    flex: 1 1 auto !important;
-    background-color: #212121 !important;
 }
 
 /* 2. Главный ряд (сайдбар + чат) */
 #main-row {
-    display: flex !important;
-    flex-direction: row !important;
-    width: 100% !important;
-    height: 100% !important;
     margin: 0 !important;
     gap: 0 !important;
-    overflow: hidden !important;
-    flex: 1 1 auto !important;
     background-color: #212121 !important;
 }
 
-/* 3. Стилизация сайдбара */
+/* 3. Боковая панель */
 #sidebar-container {
-    background-color: #171717 !important; /* Контрастный темный фон */
+    background-color: #171717 !important;
     border-right: 1px solid #2f2f2f !important;
     padding: 1.5rem 1.25rem !important;
-    height: 100% !important;
-    display: flex !important;
-    flex-direction: column !important;
-    overflow-y: auto !important;
 }
 
-/* Кнопка сворачивания/разворачивания сайдбара (круглая, темная, всегда поверх) */
+/* Кнопка сворачивания/разворачивания сайдбара */
 .sidebar-parent button.toggle-button,
 .sidebar-parent > button {
     background-color: #171717 !important;
@@ -59,9 +33,8 @@ html, body, .gradio-container {
     align-items: center !important;
     justify-content: center !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-    z-index: 999 !important; /* Кнопка всегда видна на переднем плане */
+    z-index: 999 !important;
     cursor: pointer !important;
-    transition: background-color 0.2s !important;
 }
 
 .sidebar-parent button.toggle-button:hover,
@@ -69,31 +42,21 @@ html, body, .gradio-container {
     background-color: #2f2f2f !important;
 }
 
-/* 4. Стилизация чат-зоны */
+/* 4. Колонка чата */
 #col-chat-main {
-    display: flex !important;
-    flex-direction: column !important;
-    flex: 1 1 auto !important;
-    height: 100% !important;
-    min-height: 0 !important;
     background-color: #212121 !important;
-    overflow: hidden !important;
-    position: relative !important;
+    padding: 0 !important;
+    margin: 0 !important;
 }
 
-/* Окно чата занимает все доступное место */
+/* Стилизация компонента Chatbot */
 #chatbot {
-    flex: 1 1 auto !important;
-    height: calc(100vh - 140px) !important;
-    max-height: calc(100vh - 140px) !important;
-    width: 100% !important;
-    max-width: 800px !important;
-    margin: 0 auto !important;
-    background: transparent !important;
+    background-color: transparent !important;
     border: none !important;
     box-shadow: none !important;
-    overflow-y: auto !important;
-    padding: 20px 10px !important;
+    max-width: 800px !important;
+    margin: 0 auto !important;
+    width: 100% !important;
 }
 
 #chatbot > .wrapper {
@@ -101,57 +64,55 @@ html, body, .gradio-container {
     border: none !important;
 }
 
-/* 5. Четкие контрастные цвета для текста сообщений */
+/* 5. Настройки пузырей сообщений и текста */
 #chatbot .message,
 #chatbot [data-testid="user"],
 #chatbot [data-testid="bot"],
 #chatbot .message p,
 #chatbot .message span,
-#chatbot .message li {
+#chatbot .message li,
+#chatbot .message ul,
+#chatbot .message ol {
     font-size: 0.98rem !important;
     line-height: 1.6 !important;
 }
 
-/* Сообщения пользователя: темно-серый пузырь справа, белый текст */
+/* Сообщения пользователя */
 #chatbot .user, #chatbot [data-testid="user"] {
     background-color: #2f2f2f !important;
     color: #ffffff !important;
     border: 1px solid #3c3c3c !important;
     border-radius: 20px !important;
     border-bottom-right-radius: 4px !important;
-    align-self: flex-end !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
     margin-left: auto !important;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
+    max-width: 80% !important;
 }
 
 #chatbot .user *, #chatbot [data-testid="user"] * {
-    color: #ffffff !important; /* Гарантирует белый текст для внутренних тегов */
+    color: #ffffff !important;
 }
 
-/* Сообщения Агента: прозрачный фон, светло-серый контрастный текст */
+/* Сообщения бота */
 #chatbot .bot, #chatbot [data-testid="bot"] {
     background-color: transparent !important;
     color: #ececec !important;
-    align-self: flex-start !important;
     margin-right: auto !important;
     max-width: 100% !important;
     padding-left: 0 !important;
 }
 
 #chatbot .bot *, #chatbot [data-testid="bot"] * {
-    color: #ececec !important; /* Гарантирует светло-серый текст для внутренних тегов */
+    color: #ececec !important;
 }
 
-/* 6. Очистка области ввода от белых углов */
+/* 6. Поле ввода (ChatGPT стиль) */
 #input-area {
-    width: 100% !important;
     max-width: 800px !important;
     margin: 0 auto 1.5rem auto !important;
     padding: 0 1rem !important;
     background: transparent !important;
     border: none !important;
-    box-shadow: none !important;
-    flex-shrink: 0 !important;
 }
 
 #input-area > div,
@@ -162,7 +123,6 @@ html, body, .gradio-container {
     box-shadow: none !important;
 }
 
-/* Само текстовое поле в стиле ChatGPT */
 #input-area textarea {
     border-radius: 26px !important;
     border: 1px solid #424242 !important;
@@ -171,7 +131,6 @@ html, body, .gradio-container {
     padding: 14px 20px !important;
     font-size: 1rem !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
-    transition: border-color 0.2s, box-shadow 0.2s !important;
 }
 
 #input-area textarea:focus {
@@ -179,7 +138,7 @@ html, body, .gradio-container {
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
 }
 
-/* Минималистичная кнопка Run (светло-серая, с темным текстом) */
+/* Кнопка отправки */
 #input-area button,
 #input-area .gr-button-primary {
     border-radius: 22px !important;
@@ -190,16 +149,14 @@ html, body, .gradio-container {
     padding: 0 20px !important;
     height: 44px !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
-    transition: all 0.2s ease !important;
 }
 
 #input-area button:hover,
 #input-area .gr-button-primary:hover {
     background-color: #ffffff !important;
-    transform: translateY(-1px) !important;
 }
 
-/* Настройки скроллбара */
+/* Тонкий скроллбар */
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;