/* Paperclip UI fixes — additive overlay. Remove the in index.html to revert. */ /* --------------------------------------------------------------------------- 1. Восстановление теней. В кастомной сборке --shadow-sm/md/lg заданы пустыми строками, поэтому у всех всплывающих панелей (меню, попапы, диалоги) box-shadow не рисовался вообще и они сливались с фоном. --------------------------------------------------------------------------- */ :root { --shadow-2xs: 0 1px 0 0 rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.08); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10); --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.14), 0 2px 6px -2px rgb(0 0 0 / 0.10); --shadow-lg: 0 12px 28px -8px rgb(0 0 0 / 0.18), 0 4px 10px -4px rgb(0 0 0 / 0.12); --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.22); --shadow-2xl: 0 32px 64px -16px rgb(0 0 0 / 0.28); } .dark { --shadow-2xs: 0 1px 0 0 rgb(0 0 0 / 0.40); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.50); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.55), 0 1px 2px -1px rgb(0 0 0 / 0.45); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.55), 0 1px 2px -1px rgb(0 0 0 / 0.45); --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.60), 0 2px 6px -2px rgb(0 0 0 / 0.45); --shadow-lg: 0 16px 36px -10px rgb(0 0 0 / 0.70), 0 4px 12px -4px rgb(0 0 0 / 0.50); --shadow-xl: 0 28px 60px -14px rgb(0 0 0 / 0.75); --shadow-2xl: 0 36px 72px -18px rgb(0 0 0 / 0.80); } /* --------------------------------------------------------------------------- 2. Всплывающие панели: явная тень + читаемая рамка, чтобы отделялись от фона. --------------------------------------------------------------------------- */ [data-radix-popper-content-wrapper] > *, [role="menu"], [role="listbox"], [role="tooltip"], [data-slot="dropdown-menu-content"], [data-slot="popover-content"], [data-slot="select-content"], [data-slot="context-menu-content"], [data-slot="command-dialog"], [data-radix-menu-content], [data-radix-popover-content], [data-radix-select-content] { box-shadow: 0 18px 44px -12px rgb(0 0 0 / 0.30), 0 6px 16px -6px rgb(0 0 0 / 0.20), 0 0 0 1px rgb(0 0 0 / 0.08) !important; } .dark [data-radix-popper-content-wrapper] > *, .dark [role="menu"], .dark [role="listbox"], .dark [role="tooltip"], .dark [data-slot="dropdown-menu-content"], .dark [data-slot="popover-content"], .dark [data-slot="select-content"], .dark [data-slot="context-menu-content"], .dark [data-slot="command-dialog"], .dark [data-radix-menu-content], .dark [data-radix-popover-content], .dark [data-radix-select-content] { box-shadow: 0 20px 48px -12px rgb(0 0 0 / 0.80), 0 8px 20px -8px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.14) !important; } /* Поверхность попапов чуть светлее фона — иначе меню сливается с сайдбаром. */ .dark { --popover: oklch(23.5% 0 0); } /* Модальные окна: заметная тень и затемнение подложки. */ [role="dialog"][data-state="open"], [data-slot="dialog-content"], [data-slot="sheet-content"], [data-slot="alert-dialog-content"] { box-shadow: 0 32px 72px -16px rgb(0 0 0 / 0.45) !important; } .dark [role="dialog"][data-state="open"], .dark [data-slot="dialog-content"], .dark [data-slot="sheet-content"], .dark [data-slot="alert-dialog-content"] { box-shadow: 0 36px 80px -16px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.12) !important; } [data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"], [data-slot="sheet-overlay"] { background-color: rgb(0 0 0 / 0.55) !important; } /* --------------------------------------------------------------------------- 3. Липкая шапка задачи. Она стоит внутри прокручиваемого контейнера с внутренним отступом, поэтому над ней оставалась щель, сквозь которую был виден проезжающий текст; фон был полупрозрачным (80–95%) и текст просвечивал. --------------------------------------------------------------------------- */ header.sticky.top-0 { background-color: var(--background) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Заглушка, перекрывающая щель над шапкой. */ header.sticky.top-0::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; background: var(--background); pointer-events: none; } /* Панель ввода снизу — тоже делаем непрозрачной, чтобы текст не просвечивал. */ .sticky[class*="bottom-"]:has(textarea), .sticky[class*="bottom-"]:has([contenteditable="true"]) { background-image: none !important; background-color: var(--background) !important; } /* --------------------------------------------------------------------------- 4. Мелочи удобства: последнее сообщение не должно упираться в поле ввода. --------------------------------------------------------------------------- */ .operator-preview-task-chat > *:last-child { scroll-margin-bottom: 16px; } /* --------------------------------------------------------------------------- 5. Логи вызовов инструментов в треде. Строки лежат в .tc-turn-fold, а кнопка-переключатель — в ПЕРВОМ дочернем блоке (шапке группы). У завершённых групп это «Выполнено N инструментов», у активных — «Выполняется…», и лежит она на уровень глубже, поэтому селектор ищет её в любом месте шапки, но НЕ внутри самой раскрываемой части. По умолчанию свёрнуто; раскрывается по клику (aria-expanded="true"). --------------------------------------------------------------------------- */ div:has(> .tc-turn-fold) > .tc-turn-fold { display: none !important; } div:has(> :first-child button[aria-expanded="true"]) > .tc-turn-fold { display: block !important; } /* --------------------------------------------------------------------------- 6. Поле ввода: ФИКСИРОВАННАЯ высота (не max-height!), иначе оно всё равно растёт с 34px до предела и сообщения дёргаются. Текст прокручивается внутри. --------------------------------------------------------------------------- */ .sticky textarea, .sticky [contenteditable="true"] { height: 76px !important; min-height: 76px !important; max-height: 76px !important; overflow-y: auto !important; resize: none !important; } .sticky .paperclip-mdxeditor-scope { height: auto !important; max-height: none !important; overflow: visible !important; } /* --------------------------------------------------------------------------- 7. Панель ввода «прилипает» на 20px выше низа — в этой щели снизу проезжает текст («текст заходит за поле ввода»). Закрываем щель снизу и с боков. --------------------------------------------------------------------------- */ .sticky[class*="bottom-"]:has(textarea), .sticky[class*="bottom-"]:has([contenteditable="true"]) { background-color: var(--background) !important; background-image: none !important; } .sticky[class*="bottom-"]:has(textarea)::after, .sticky[class*="bottom-"]:has([contenteditable="true"])::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 56px; background: var(--background); pointer-events: none; } .sticky[class*="bottom-"]:has(textarea)::before, .sticky[class*="bottom-"]:has([contenteditable="true"])::before { content: ""; position: absolute; left: -12px; right: -12px; bottom: 100%; height: 10px; background: var(--background); pointer-events: none; }