UNPKG

jodit-pro

Version:

PRO Version of Jodit Editor

1,447 lines (1,445 loc) 65.6 kB
/*! * jodit-pro - PRO Version of Jodit Editor * Author: Chupurnov Valerii <chupurnov@gmail.com> * Version: v4.9.27 * Url: https://xdsoft.net/jodit/pro/ * License(s): SEE LICENSE IN LICENSE.md */ .jodit-ui-range { user-select: none; } .jodit-ui-range__slider { position: relative; z-index: 1; height: 2px; margin: var(--jd-padding-default) 7px; background: #1e87f0; } .jodit-ui-range__slider::before, .jodit-ui-range__slider::after { position: absolute; top: 0; left: -6px; width: 7px; height: 2px; background: #1e87f0; content: ''; } .jodit-ui-range__slider::after { right: -6px; left: auto; } .jodit-ui-range__handle { position: absolute; z-index: 2; top: -5px; width: 12px; height: 12px; border: 1px solid #ccc; border-radius: 50%; background: #28a5f5; cursor: ew-resize; transform: translateX(-50%); } .jodit-ui-range__handle:active { transform: translateX(-50%) scale(1.1); } .jodit-ui-range__label { display: flex; justify-content: space-between; color: var(--jd-color-label); font-size: 0.8em; } .jodit-ui-range__log { color: #7f7272; font-weight: bold; } .jodit-ui-range_log_false .jodit-ui-range__log { display: none; } /** * AI Assistant Pro styles * Main import file that combines all UI component styles */ /** * AI Assistant Pro Design System * Централизованная система дизайна с поддержкой темной темы */ :root, .jodit-ai-assistant-pro { --jd-ai-primary-start: #667eea; --jd-ai-primary-end: #764ba2; --jd-ai-primary-gradient: linear-gradient(135deg, var(--jd-ai-primary-start) 0%, var(--jd-ai-primary-end) 100%); --jd-ai-accent: #667eea; --jd-ai-accent-hover: #764ba2; --jd-ai-accent-pink-start: #f093fb; --jd-ai-accent-pink-end: #f5576c; --jd-ai-accent-gradient: linear-gradient(135deg, var(--jd-ai-accent-pink-start) 0%, var(--jd-ai-accent-pink-end) 100%); --jd-ai-success: #34c759; --jd-ai-warning: #ff9500; --jd-ai-error: #ff3b30; --jd-ai-info: #5ac8fa; --jd-ai-text-primary: #1c1c1e; --jd-ai-text-secondary: #3a3a3c; --jd-ai-text-tertiary: #8e8e93; --jd-ai-text-white: #fff; --jd-ai-text-white-secondary: rgba(255, 255, 255, 0.85); --jd-ai-text-white-tertiary: rgba(255, 255, 255, 0.6); --jd-ai-bg-primary: #fff; --jd-ai-bg-secondary: #f5f7fa; --jd-ai-bg-tertiary: #f8f9fa; --jd-ai-bg-elevated: rgba(102, 126, 234, 0.08); --jd-ai-bg-hover: rgba(102, 126, 234, 0.05); --jd-ai-bg-danger: rgba(255, 59, 48, 0.05); --jd-ai-bg-danger-hover: rgba(255, 59, 48, 0.15); --jd-ai-message-user-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --jd-ai-message-assistant-gradient: linear-gradient(135deg, #f5f7fa 0%, #fff 100%); --jd-ai-message-user-text: var(--jd-ai-text-white); --jd-ai-message-assistant-text: var(--jd-ai-text-primary); --jd-ai-border-light: rgba(0, 0, 0, 0.06); --jd-ai-border-medium: rgba(0, 0, 0, 0.1); --jd-ai-border-dark: rgba(0, 0, 0, 0.15); --jd-ai-border-primary: rgba(102, 126, 234, 0.3); --jd-ai-border-danger: rgba(255, 59, 48, 0.2); --jd-ai-text-danger: #ff3b30; --jd-ai-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --jd-ai-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --jd-ai-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --jd-ai-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15); --jd-ai-shadow-primary-sm: 0 2px 8px rgba(102, 126, 234, 0.25); --jd-ai-shadow-primary-md: 0 4px 15px rgba(102, 126, 234, 0.3); --jd-ai-shadow-primary-lg: 0 6px 20px rgba(102, 126, 234, 0.4); --jd-ai-shadow-accent-sm: 0 2px 10px rgba(245, 87, 108, 0.25); --jd-ai-shadow-accent-md: 0 4px 15px rgba(245, 87, 108, 0.3); --jd-ai-shadow-accent-lg: 0 6px 20px rgba(245, 87, 108, 0.4); --jd-ai-shadow-primary-focus: rgba(102, 126, 234, 0.08); --jd-ai-overlay-light: rgba(255, 255, 255, 0.15); --jd-ai-overlay-medium: rgba(255, 255, 255, 0.25); --jd-ai-overlay-dark: rgba(0, 0, 0, 0.05); --jd-ai-space-xs: 4px; --jd-ai-space-sm: 8px; --jd-ai-space-md: 12px; --jd-ai-space-lg: 16px; --jd-ai-space-xl: 20px; --jd-ai-space-2xl: 24px; --jd-ai-space-3xl: 32px; --jd-ai-radius-xs: 4px; --jd-ai-radius-sm: 6px; --jd-ai-radius-md: 10px; --jd-ai-radius-lg: 12px; --jd-ai-radius-xl: 16px; --jd-ai-radius-2xl: 20px; --jd-ai-radius-full: 50%; --jd-ai-text-xs: 11px; --jd-ai-text-sm: 12px; --jd-ai-text-base: 13px; --jd-ai-text-md: 14px; --jd-ai-text-lg: 15px; --jd-ai-text-xl: 16px; --jd-ai-text-2xl: 18px; --jd-ai-text-3xl: 20px; --jd-ai-weight-normal: 400; --jd-ai-weight-medium: 500; --jd-ai-weight-semibold: 600; --jd-ai-weight-bold: 700; --jd-ai-transition-fast: 0.15s ease; --jd-ai-transition-base: 0.2s ease; --jd-ai-transition-slow: 0.3s ease; --jd-ai-z-base: 1; --jd-ai-z-elevated: 2; --jd-ai-z-overlay: 10; --jd-ai-z-modal: 100; --jd-ai-header-height: 60px; --jd-ai-input-height: 44px; --jd-ai-button-size: 40px; --jd-ai-button-sm-size: 32px; --jd-ai-avatar-size: 36px; --jd-ai-tool-min-height: 56px; } .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-main-panel, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-main-panel, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-main-panel, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-settings-popup, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-settings-popup, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-settings-popup, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)), .jodit_theme_dark:not(:has(.jodit_theme_light)), .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) { --jd-color-background-default: var(--jd-dark-background-color); --jd-ai-primary-start: #7c93ff; --jd-ai-primary-end: #8b5fc7; --jd-ai-accent: #7c93ff; --jd-ai-accent-hover: #8b5fc7; --jd-ai-accent-pink-start: #ff9ff3; --jd-ai-accent-pink-end: #ff6b7a; --jd-ai-text-primary: #fff; --jd-ai-text-secondary: #e5e5e7; --jd-ai-text-tertiary: #98989d; --jd-ai-text-white: #fff; --jd-ai-text-white-secondary: rgba(255, 255, 255, 0.85); --jd-ai-text-white-tertiary: rgba(255, 255, 255, 0.6); --jd-ai-bg-primary: #2b2b2b; --jd-ai-bg-secondary: #2c2c2e; --jd-ai-bg-tertiary: #3a3a3c; --jd-ai-bg-elevated: rgba(124, 147, 255, 0.12); --jd-ai-bg-hover: rgba(124, 147, 255, 0.08); --jd-ai-bg-danger: rgba(255, 59, 48, 0.15); --jd-ai-bg-danger-hover: rgba(255, 59, 48, 0.25); --jd-ai-message-user-gradient: linear-gradient(135deg, #7c93ff 0%, #8b5fc7 100%); --jd-ai-message-assistant-gradient: linear-gradient(135deg, #3a3a3c 0%, #48484a 100%); --jd-ai-message-user-text: var(--jd-ai-text-white); --jd-ai-message-assistant-text: var(--jd-ai-text-white); --jd-ai-border-light: rgba(255, 255, 255, 0.1); --jd-ai-border-medium: rgba(255, 255, 255, 0.15); --jd-ai-border-dark: rgba(255, 255, 255, 0.2); --jd-ai-border-primary: rgba(124, 147, 255, 0.4); --jd-ai-border-danger: rgba(255, 59, 48, 0.3); --jd-ai-text-danger: #ff6b6b; --jd-ai-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --jd-ai-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --jd-ai-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --jd-ai-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6); --jd-ai-shadow-primary-sm: 0 2px 8px rgba(124, 147, 255, 0.3); --jd-ai-shadow-primary-md: 0 4px 15px rgba(124, 147, 255, 0.35); --jd-ai-shadow-primary-lg: 0 6px 20px rgba(124, 147, 255, 0.4); --jd-ai-shadow-accent-sm: 0 2px 10px rgba(255, 107, 122, 0.3); --jd-ai-shadow-accent-md: 0 4px 15px rgba(255, 107, 122, 0.35); --jd-ai-shadow-accent-lg: 0 6px 20px rgba(255, 107, 122, 0.4); --jd-ai-shadow-primary-focus: rgba(124, 147, 255, 0.12); --jd-ai-overlay-light: rgba(255, 255, 255, 0.1); --jd-ai-overlay-medium: rgba(255, 255, 255, 0.15); --jd-ai-overlay-dark: rgba(0, 0, 0, 0.3); } .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-main-panel .jodit-toolbar-button_variant_secondary, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-main-panel .jodit-toolbar-button_variant_secondary, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-main-panel .jodit-toolbar-button_variant_secondary, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-settings-popup .jodit-toolbar-button_variant_secondary, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-settings-popup .jodit-toolbar-button_variant_secondary, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-settings-popup .jodit-toolbar-button_variant_secondary, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-toolbar-button_variant_secondary, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-toolbar-button_variant_secondary, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-toolbar-button_variant_secondary, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-main-panel .jodit-ui-button_variant_default, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-main-panel .jodit-ui-button_variant_default, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-main-panel .jodit-ui-button_variant_default, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-settings-popup .jodit-ui-button_variant_default, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-settings-popup .jodit-ui-button_variant_default, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-settings-popup .jodit-ui-button_variant_default, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-button_variant_default, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-button_variant_default, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-button_variant_default { border: 1px solid var(--jd-ai-border-light) !important; background: var(--jd-ai-bg-elevated) !important; box-shadow: var(--jd-ai-shadow-sm) !important; } .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-main-panel .jodit-ui-text-area__input, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-main-panel .jodit-ui-text-area__input, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-main-panel .jodit-ui-text-area__input, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-settings-popup .jodit-ui-text-area__input, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-settings-popup .jodit-ui-text-area__input, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-settings-popup .jodit-ui-text-area__input, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-text-area__input, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-text-area__input, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-text-area__input, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-main-panel .jodit-ui-select__input, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-main-panel .jodit-ui-select__input, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-main-panel .jodit-ui-select__input, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-settings-popup .jodit-ui-select__input, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-settings-popup .jodit-ui-select__input, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-settings-popup .jodit-ui-select__input, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-select__input, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-select__input, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-select__input, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-main-panel .jodit-ui-input__input, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-main-panel .jodit-ui-input__input, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-main-panel .jodit-ui-input__input, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-settings-popup .jodit-ui-input__input, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-settings-popup .jodit-ui-input__input, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-settings-popup .jodit-ui-input__input, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-input__input, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-input__input, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-input__input { background-color: var(--jd-ai-bg-secondary); color: var(--jd-ai-text-primary); } .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-main-panel .jodit-ui-input__wrapper, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-main-panel .jodit-ui-input__wrapper, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-main-panel .jodit-ui-input__wrapper, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-settings-popup .jodit-ui-input__wrapper, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-settings-popup .jodit-ui-input__wrapper, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-settings-popup .jodit-ui-input__wrapper, .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-input__wrapper, .jodit_theme_dark:not(:has(.jodit_theme_light)) .jodit-ui-input__wrapper, .jodit-ai-assistant-pro_theme_dark:not( :has(.jodit-ai-assistant-pro_theme_light)) .jodit-ui-input__wrapper { background: var(--jd-ai-bg-secondary); } .jodit-ai-assistant-pro_theme_light .jodit-ui-main-panel, .jodit-ai-assistant-pro_theme_light .jodit-ui-settings-popup, .jodit-ai-assistant-pro_theme_light { --jd-ai-primary-start: #667eea; --jd-ai-primary-end: #764ba2; --jd-ai-text-primary: #1c1c1e; --jd-ai-text-secondary: #3a3a3c; --jd-ai-text-tertiary: #8e8e93; --jd-ai-bg-primary: #fff; --jd-ai-bg-secondary: #f5f7fa; --jd-ai-bg-tertiary: #f8f9fa; --jd-ai-bg-elevated: rgba(102, 126, 234, 0.08); --jd-ai-bg-hover: rgba(102, 126, 234, 0.05); --jd-ai-border-light: rgba(0, 0, 0, 0.06); --jd-ai-border-medium: rgba(0, 0, 0, 0.1); --jd-ai-border-primary: rgba(102, 126, 234, 0.3); --jd-ai-message-user-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --jd-ai-message-assistant-gradient: linear-gradient(135deg, #f5f7fa 0%, #fff 100%); --jd-ai-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --jd-ai-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --jd-ai-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); } .jodit-ai-assistant-pro__success { color: var(--jd-ai-success); } .jodit-ai-assistant-pro__warning { color: var(--jd-ai-warning); } .jodit-ai-assistant-pro__error { color: var(--jd-ai-error); } .jodit-ai-assistant-pro__info { color: var(--jd-ai-info); } @keyframes ai-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ai-slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes ai-slide-in-right { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @keyframes ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes ai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /** * Main Panel styles */ .jodit-ui-main-panel { font-family: var(--jd-font-default); font-size: var(--jd-font-size-default); position: relative; display: flex; height: 100%; flex-direction: column; background: var(--jd-color-background-default); } .jodit-ui-main-panel__container { display: flex; max-width: 100%; height: 100%; max-height: 100%; flex-direction: column; } .jodit-ui-main-panel__header { position: relative; display: flex; min-height: 60px; align-items: center; justify-content: space-between; padding: calc(var(--jd-padding-default) * 1.25) var(--jd-padding-default); border-bottom: 1px solid var(--jd-ai-border-light); box-shadow: var(--jd-ai-shadow-md); gap: var(--jd-ai-space-md); backdrop-filter: blur(20px) saturate(180%); background: rgba(255, 255, 255, 0.85); } .jodit-dialog_theme_dark:not(:has(.jodit-dialog_theme_light)) .jodit-ui-main-panel__header, .jodit-ui-main-panel__header .jodit_theme_dark:not(:has(.jodit_theme_light)) { background: rgba(44, 44, 46, 0.85); } .jodit-ui-main-panel__header-left, .jodit-ui-main-panel__header-right { display: flex; align-items: center; gap: var(--jd-ai-space-sm); } .jodit-ui-main-panel__header-left { display: none; } .jodit-ui-main-panel__header-title { overflow: hidden; flex: 1; font-size: var(--jd-ai-text-2xl); font-weight: var(--jd-ai-weight-bold); letter-spacing: -0.3px; text-overflow: ellipsis; white-space: nowrap; background: var(--jd-ai-primary-gradient); background-clip: text; -webkit-text-fill-color: transparent; } .jodit-ui-main-panel_view_conversation .jodit-ui-main-panel__header-left { display: flex; } .jodit-ui-main-panel__content { flex: 1; background: var(--jd-color-background-default); overflow-y: auto; } .jodit-ui-main-panel__footer { display: none; border-top: 1px solid var(--jd-ai-border-light); background: var(--jd-ai-bg-primary); box-shadow: var(--jd-ai-shadow-sm); } .jodit-ui-main-panel_view_conversation .jodit-ui-main-panel__footer, .jodit-ui-main-panel_view_welcome .jodit-ui-main-panel__footer { display: block; } .jodit-ui-main-panel_displaymode_dialog .jodit-ui-main-panel__close-button, .jodit-ui-main-panel_allowclose_false .jodit-ui-main-panel__close-button { display: none; } .jodit-ui-main-panel_displaymode_flight .jodit-ui-main-panel__header { min-height: 40px; padding: var(--jd-ai-space-sm) var(--jd-padding-default); } .jodit-ui-main-panel_displaymode_top .jodit-ui-resize__handle, .jodit-ui-main-panel_displaymode_bottom .jodit-ui-resize__handle, .jodit-ui-main-panel_displaymode_flight .jodit-ui-resize__handle { display: none; } .jodit-ui-main-panel_displaymode_flight .jodit-ui-main-panel__header-title { font-size: var(--jd-ai-text-lg); } .jodit-ui-main-panel__new-button button { border: none !important; background: var(--jd-ai-primary-gradient) !important; box-shadow: var(--jd-ai-shadow-primary-md) !important; color: var(--jd-ai-text-white) !important; } .jodit-ui-main-panel__new-button button:hover { box-shadow: var(--jd-ai-shadow-primary-lg) !important; } .jodit-ui-main-panel__new-button button svg { fill: var(--jd-ai-text-white) !important; } .jodit-ui-main-panel__loading-overlay { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; display: none; align-items: center; justify-content: center; background: var(--jd-color-background-default); background: color-mix(in srgb, var(--jd-color-background-default) 80%, transparent); } .jodit-ui-main-panel_loading_true .jodit-ui-main-panel__loading-overlay { display: flex; } .jodit-ui-main-panel__loading-spinner { width: var(--jd-ai-input-height); height: var(--jd-ai-input-height); border: 4px solid var(--jd-ai-border-light); border-radius: var(--jd-ai-radius-full); border-top-color: var(--jd-ai-primary-start); animation: ai-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; box-shadow: var(--jd-ai-shadow-primary-sm); } .jodit-plugin__ai-assistant-pro__flight-container .jodit-ui-main-panel { border-radius: var(--jd-ai-radius-lg) var(--jd-ai-radius-lg) 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); } .jodit-ui-resize__handle.jodit-plugin__ai-assistent-resize-handle { width: 6px; } .jodit-ui-resize__handle.jodit-plugin__ai-assistent-resize-handle::before, .jodit-ui-resize__handle.jodit-plugin__ai-assistent-resize-handle::after { width: 2px; background: var(--jd-ai-text-primary); } @keyframes jodit-ui-main-panel-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /** * Welcome Screen styles */ .jodit-ui-welcome-screen__container { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--jd-padding-default) * 3); text-align: center; } .jodit-ui-welcome-screen__icon { display: flex; width: 60px; height: 60px; align-items: center; justify-content: center; margin-bottom: var(--jd-padding-default); } .jodit-ui-welcome-screen__icon svg { width: 100%; height: 100%; fill: var(--jd-ai-primary-start); } .jodit-ui-welcome-screen__title { margin-bottom: calc(var(--jd-padding-default) / 2); color: var(--jd-color-text); font-size: calc(var(--jd-font-size-default) * 1.2); font-weight: bold; } .jodit-ui-welcome-screen__subtitle { margin-bottom: var(--jd-padding-default); color: var(--jd-color-label); } .jodit-ui-welcome-screen__tip { color: var(--jd-color-placeholder); font-size: var(--jd-font-size-small); } /** * Conversation List styles */ .jodit-ui-conversation-list__container { display: flex; height: 100%; flex-direction: column; } .jodit-ui-conversation-list__header { padding: var(--jd-padding-default); border-bottom: 1px solid var(--jd-color-border); } .jodit-ui-conversation-list__search { position: relative; padding: var(--jd-padding-default); border-bottom: 1px solid var(--jd-color-border); } .jodit-ui-conversation-list__search .jodit-ui-input { margin-bottom: 0; } .jodit-ui-conversation-list__search-loader { position: absolute; z-index: var(--jd-ai-z-base); top: 50%; right: calc(var(--jd-padding-default) + var(--jd-ai-space-sm)); display: none; width: var(--jd-ai-space-lg); height: var(--jd-ai-space-lg); border: 2px solid var(--jd-ai-border-light); border-radius: var(--jd-ai-radius-full); border-top-color: var(--jd-ai-primary-start); margin-top: -8px; animation: ai-spin 0.6s linear infinite; } .jodit-ui-conversation-list_loading_true .jodit-ui-conversation-list__search-loader { display: block; } .jodit-ui-conversation-list__list { flex: 1; padding: calc(var(--jd-padding-default) / 2); overflow-y: auto; } .jodit-ui-conversation-list__item { position: relative; display: flex; align-items: center; padding: var(--jd-ai-space-md); border: 1px solid transparent; border-radius: var(--jd-ai-radius-md); margin-bottom: 6px; background: var(--jd-ai-bg-primary); cursor: pointer; transition: all var(--jd-ai-transition-base); } .jodit-ui-conversation-list__item:hover { border-color: var(--jd-ai-border-primary); background: var(--jd-ai-bg-hover); } .jodit-ui-conversation-list__item:hover .jodit-ui-conversation-list__item-delete { opacity: 1; } .jodit-ui-conversation-list__item_active { border-color: var(--jd-ai-border-primary); background: var(--jd-ai-message-assistant-gradient); } .jodit-ui-conversation-list__item-avatar { display: flex; width: var(--jd-ai-avatar-size); height: var(--jd-ai-avatar-size); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--jd-ai-radius-full); margin-right: var(--jd-ai-space-md); background: var(--jd-ai-primary-gradient); box-shadow: var(--jd-ai-shadow-primary-sm); color: var(--jd-ai-text-white); font-size: var(--jd-ai-text-sm); font-weight: var(--jd-ai-weight-semibold); } .jodit-ui-conversation-list__item-wrapper { display: flex; min-width: 0; flex: 1; align-items: center; cursor: pointer; } .jodit-ui-conversation-list__item-content { min-width: 0; flex: 1; } .jodit-ui-conversation-list__item-delete { display: flex; width: var(--jd-ai-button-sm-size); height: var(--jd-ai-button-sm-size); flex-shrink: 0; align-items: center; justify-content: center; padding: 0; margin-left: var(--jd-ai-space-sm); color: var(--jd-ai-text-danger); cursor: pointer; transition: all var(--jd-ai-transition-base); } .jodit-ui-conversation-list__item-delete:hover { border-color: var(--jd-ai-text-danger); background: var(--jd-ai-bg-danger-hover); transform: scale(1.1); } .jodit-ui-conversation-list__item-delete:active { transform: scale(0.9); } .jodit-ui-conversation-list__item-delete .jodit-icon { font-size: var(--jd-ai-text-sm); } .jodit-ui-conversation-list__item-title { overflow: hidden; margin-bottom: 4px; font-weight: var(--jd-ai-weight-medium); text-overflow: ellipsis; white-space: nowrap; } .jodit-ui-conversation-list__item-meta { color: var(--jd-color-label); font-size: var(--jd-font-size-small); } .jodit-ui-conversation-list__item-badge { display: flex; min-width: var(--jd-ai-space-xl); height: var(--jd-ai-space-xl); align-items: center; justify-content: center; padding: 0 6px; border-radius: 10px; background: var(--jd-color-background-active); color: var(--jd-color-white); font-size: var(--jd-font-size-small); font-weight: bold; } .jodit-ui-conversation-list__empty { padding: calc(var(--jd-padding-default) * 2); color: var(--jd-color-placeholder); text-align: center; } /** * Message List styles */ .jodit-ui-message-list__scroll-container { height: 100%; padding: var(--jd-padding-default); overflow-y: auto; } .jodit-ui-message-list__artifacts { display: flex; flex-direction: column; gap: var(--jd-ai-space-md); } .jodit-ui-artifact { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--jd-ai-border-light); border-radius: var(--jd-ai-radius-lg); background: var(--jd-ai-bg-secondary); border-bottom-left-radius: 0; border-top-left-radius: 0; transition: all var(--jd-ai-transition-base); } .jodit-ui-artifact:hover { border-color: var(--jd-ai-border-medium); box-shadow: var(--jd-ai-shadow-md); } .jodit-ui-artifact__status { display: flex; align-items: center; padding: var(--jd-ai-space-sm) var(--jd-ai-space-md); border-bottom: 1px solid var(--jd-ai-border-light); background: var(--jd-ai-bg-elevated); color: var(--jd-ai-text-secondary); font-size: var(--jd-ai-text-xs); font-weight: var(--jd-ai-weight-medium); gap: var(--jd-ai-space-sm); } .jodit-ui-artifact__status[data-status='generating'] { animation: ai-shimmer 2s infinite; background: linear-gradient(90deg, var(--jd-ai-bg-elevated) 0%, var(--jd-ai-bg-hover) 50%, var(--jd-ai-bg-elevated) 100%); background-size: 200% 100%; } .jodit-ui-artifact__status[data-status='ready'] { background: rgba(52, 199, 89, 0.1); color: var(--jd-ai-success); } .jodit-ui-artifact__status[data-status='failed'] { background: rgba(255, 59, 48, 0.1); color: var(--jd-ai-error); } .jodit-ui-artifact__status-icon { font-size: var(--jd-ai-text-md); } .jodit-ui-artifact__status-text { letter-spacing: 0.5px; text-transform: uppercase; } .jodit-ui-artifact__content { padding: var(--jd-ai-space-lg); } .jodit-ui-artifact__loader { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--jd-ai-space-3xl); gap: var(--jd-ai-space-md); } .jodit-ui-artifact__spinner { width: 40px; height: 40px; border: 4px solid var(--jd-ai-border-light); border-radius: 50%; border-top-color: var(--jd-ai-accent); animation: ai-spin 1s linear infinite; } .jodit-ui-artifact__loader-message { color: var(--jd-ai-text-secondary); font-size: var(--jd-ai-text-sm); } .jodit-ui-artifact__error { display: flex; flex-direction: column; align-items: center; padding: var(--jd-ai-space-3xl); gap: var(--jd-ai-space-md); text-align: center; } .jodit-ui-artifact__error-icon { font-size: var(--jd-ai-text-3xl); } .jodit-ui-artifact__error-message { color: var(--jd-ai-error); font-size: var(--jd-ai-text-sm); } .jodit-ui-artifact__image { display: block; max-width: 100%; height: auto; } .jodit-ui-artifact__caption { padding-top: var(--jd-ai-space-md); border-top: 1px solid var(--jd-ai-border-light); margin-top: var(--jd-ai-space-md); color: var(--jd-ai-text-secondary); font-size: var(--jd-ai-text-sm); font-style: italic; } .jodit-ui-artifact__audio { width: 100%; height: 40px; } .jodit-ui-artifact__file-card { display: flex; align-items: center; padding: var(--jd-ai-space-lg); border-radius: var(--jd-ai-radius-md); background: var(--jd-ai-bg-tertiary); gap: var(--jd-ai-space-md); transition: all var(--jd-ai-transition-fast); } .jodit-ui-artifact__file-card:hover { background: var(--jd-ai-bg-hover); } .jodit-ui-artifact__file-icon { flex-shrink: 0; font-size: var(--jd-ai-text-3xl); } .jodit-ui-artifact__file-info { min-width: 0; flex: 1; } .jodit-ui-artifact__file-name { overflow: hidden; color: var(--jd-ai-text-primary); font-weight: var(--jd-ai-weight-medium); text-overflow: ellipsis; white-space: nowrap; } .jodit-ui-artifact__file-size { margin-top: var(--jd-ai-space-xs); color: var(--jd-ai-text-tertiary); font-size: var(--jd-ai-text-xs); } .jodit-ui-artifact__download-btn { display: inline-block; padding: var(--jd-ai-space-sm) var(--jd-ai-space-lg); border: none; border-radius: var(--jd-ai-radius-md); background: var(--jd-ai-primary-gradient); box-shadow: var(--jd-ai-shadow-primary-sm); color: var(--jd-ai-text-white); cursor: pointer; font-size: var(--jd-ai-text-sm); font-weight: var(--jd-ai-weight-medium); text-decoration: none; transition: all var(--jd-ai-transition-fast); } .jodit-ui-artifact__download-btn:hover { box-shadow: var(--jd-ai-shadow-primary-md); transform: translateY(-1px); } .jodit-ui-artifact__download-btn:active { transform: translateY(0); } .jodit-ui-artifact__json { padding: var(--jd-ai-space-lg); border-radius: var(--jd-ai-radius-md); margin: 0; background: var(--jd-ai-bg-tertiary); font-size: var(--jd-ai-text-sm); line-height: 1.5; overflow-x: auto; } .jodit-ui-artifact__json code { color: var(--jd-ai-text-primary); font-family: 'SF Mono', Monaco, Consolas, monospace; } .jodit-ui-artifact__json::-webkit-scrollbar { height: 8px; } .jodit-ui-artifact__json::-webkit-scrollbar-track { background: transparent; } .jodit-ui-artifact__json::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--jd-ai-border-medium); } .jodit-ui-artifact__json::-webkit-scrollbar-thumb:hover { background: var(--jd-ai-border-dark); } .jodit-ui-artifact__placeholder { display: flex; flex-direction: column; align-items: center; padding: var(--jd-ai-space-3xl); gap: var(--jd-ai-space-md); } .jodit-ui-artifact__placeholder-icon { font-size: var(--jd-ai-text-3xl); opacity: 0.5; } .jodit-ui-artifact__placeholder-text { color: var(--jd-ai-text-tertiary); font-size: var(--jd-ai-text-sm); } .jodit-ui-artifact-group { display: flex; flex-direction: column; gap: var(--jd-ai-space-md); } @keyframes ai-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (width <= 480px) { .jodit-ui-message-list-item__message-bubble { max-width: 85%; } .jodit-ui-artifact__content { padding: var(--jd-ai-space-md); } .jodit-ui-artifact__loader, .jodit-ui-artifact__error, .jodit-ui-artifact__placeholder { padding: var(--jd-ai-space-2xl); } } .jodit-ui-message-list-item__message { display: flex; max-width: 100%; margin-bottom: var(--jd-ai-space-lg); animation: ai-slide-in var(--jd-ai-transition-slow); } .jodit-ui-message-list-item__message[data-role='user'] { justify-content: flex-end; } .jodit-ui-message-list-item__message[data-role='assistant'] { justify-content: flex-start; } .jodit-ui-message-list-item__message[data-role='tool'] { justify-content: center; } .jodit-ui-message-list-item__message-bubble { position: relative; max-width: 90%; padding: var(--jd-ai-space-lg); border-radius: var(--jd-ai-radius-xl); overflow-wrap: break-word; transition: all var(--jd-ai-transition-base); } .jodit-ui-message-list-item__message-bubble_user_true { border: none; border-radius: var(--jd-ai-radius-xl) var(--jd-ai-radius-xl) var(--jd-ai-radius-sm) var(--jd-ai-radius-xl); background: var(--jd-ai-message-user-gradient); box-shadow: var(--jd-ai-shadow-primary-sm); color: var(--jd-ai-message-user-text); } .jodit-ui-message-list-item__message-bubble_user_true:hover { box-shadow: var(--jd-ai-shadow-primary-md); } .jodit-ui-message-list-item__message-bubble_assistant_true { padding: var(--jd-ai-space-lg); border: 1px solid var(--jd-ai-border-light); border-radius: var(--jd-ai-radius-xl) var(--jd-ai-radius-xl) var(--jd-ai-radius-xl) var(--jd-ai-radius-sm); background: var(--jd-ai-message-assistant-gradient); box-shadow: var(--jd-ai-shadow-sm); color: var(--jd-ai-message-assistant-text); } .jodit-ui-message-list-item__message-bubble_assistant_true:hover { box-shadow: var(--jd-ai-shadow-md); } .jodit-ui-message-list-item__message-bubble_tool_true { max-width: 80%; padding: var(--jd-ai-space-md) var(--jd-ai-space-lg); border: 1px solid var(--jd-ai-border-medium); border-radius: var(--jd-ai-radius-md); border-left: 3px solid var(--jd-ai-accent); background: linear-gradient(135deg, var(--jd-ai-bg-tertiary) 0%, var(--jd-ai-bg-secondary) 100%); box-shadow: var(--jd-ai-shadow-sm); color: var(--jd-ai-text-secondary); font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: var(--jd-ai-text-sm); } .jodit-ui-message-list-item__message-bubble_tool_true:hover { border-left-color: var(--jd-ai-accent-hover); box-shadow: var(--jd-ai-shadow-md); } .jodit-ui-message-list-item__message-content { overflow: auto; margin-bottom: 4px; color: inherit; font-size: var(--jd-ai-text-base); line-height: 1.6; overflow-wrap: break-word; } .jodit-ui-message-list-item__message-content h1, .jodit-ui-message-list-item__message-content h2, .jodit-ui-message-list-item__message-content h3, .jodit-ui-message-list-item__message-content h4, .jodit-ui-message-list-item__message-content h5, .jodit-ui-message-list-item__message-content h6 { margin-top: var(--jd-ai-space-xl); margin-bottom: var(--jd-ai-space-md); color: inherit; font-weight: var(--jd-ai-weight-semibold); line-height: 1.3; } .jodit-ui-message-list-item__message-content h1:first-child, .jodit-ui-message-list-item__message-content h2:first-child, .jodit-ui-message-list-item__message-content h3:first-child, .jodit-ui-message-list-item__message-content h4:first-child, .jodit-ui-message-list-item__message-content h5:first-child, .jodit-ui-message-list-item__message-content h6:first-child { margin-top: 0; } .jodit-ui-message-list-item__message-content h1 { padding-bottom: var(--jd-ai-space-sm); border-bottom: 2px solid var(--jd-ai-border-light); font-size: var(--jd-ai-text-2xl); } .jodit-ui-message-list-item__message-content h2 { padding-bottom: var(--jd-ai-space-xs); border-bottom: 1px solid var(--jd-ai-border-light); font-size: var(--jd-ai-text-xl); } .jodit-ui-message-list-item__message-content h3 { font-size: var(--jd-ai-text-lg); } .jodit-ui-message-list-item__message-content h4 { font-size: var(--jd-ai-text-md); } .jodit-ui-message-list-item__message-content h5 { font-size: var(--jd-ai-text-base); } .jodit-ui-message-list-item__message-content h6 { color: var(--jd-ai-text-tertiary); font-size: var(--jd-ai-text-sm); } .jodit-ui-message-list-item__message-content p { margin: var(--jd-ai-space-md) 0; line-height: 1.6; } .jodit-ui-message-list-item__message-content p:first-child { margin-top: 0; } .jodit-ui-message-list-item__message-content p:last-child { margin-bottom: 0; } .jodit-ui-message-list-item__message-content strong, .jodit-ui-message-list-item__message-content b { font-weight: var(--jd-ai-weight-bold); } .jodit-ui-message-list-item__message-content em, .jodit-ui-message-list-item__message-content i { font-style: italic; } .jodit-ui-message-list-item__message-content u { text-decoration: underline; } .jodit-ui-message-list-item__message-content s, .jodit-ui-message-list-item__message-content del { opacity: 0.7; text-decoration: line-through; } .jodit-ui-message-list-item__message-content mark { padding: 2px 4px; border-radius: var(--jd-ai-radius-xs); background-color: rgba(255, 235, 59, 0.4); } .jodit-ui-message-list-item__message-content a { border-bottom: 1px solid transparent; color: var(--jd-ai-accent-pink-start); text-decoration: none; transition: all var(--jd-ai-transition-fast); } .jodit-ui-message-list-item__message-content a:hover { border-bottom-color: currentcolor; color: var(--jd-ai-accent-pink-end); } .jodit-ui-message-list-item__message-content a:active { opacity: 0.8; } .jodit-ui-message-list-item__message-content ul, .jodit-ui-message-list-item__message-content ol { padding-left: var(--jd-ai-space-2xl); margin: var(--jd-ai-space-md) 0; } .jodit-ui-message-list-item__message-content ul:first-child, .jodit-ui-message-list-item__message-content ol:first-child { margin-top: 0; } .jodit-ui-message-list-item__message-content ul:last-child, .jodit-ui-message-list-item__message-content ol:last-child { margin-bottom: 0; } .jodit-ui-message-list-item__message-content ul { list-style-type: disc; } .jodit-ui-message-list-item__message-content ul ul { list-style-type: circle; } .jodit-ui-message-list-item__message-content ul ul ul { list-style-type: square; } .jodit-ui-message-list-item__message-content ol { list-style-type: decimal; } .jodit-ui-message-list-item__message-content ol ol { list-style-type: lower-alpha; } .jodit-ui-message-list-item__message-content ol ol ol { list-style-type: lower-roman; } .jodit-ui-message-list-item__message-content li { margin: var(--jd-ai-space-xs) 0; line-height: 1.6; } .jodit-ui-message-list-item__message-content li > p { margin: var(--jd-ai-space-xs) 0; } .jodit-ui-message-list-item__message-content li > ul, .jodit-ui-message-list-item__message-content li > ol { margin-top: var(--jd-ai-space-xs); } .jodit-ui-message-list-item__message-content blockquote { padding: var(--jd-ai-space-md) var(--jd-ai-space-lg); border-radius: var(--jd-ai-radius-sm); border-left: 4px solid var(--jd-ai-accent-pink-start); margin: var(--jd-ai-space-lg) 0; background: var(--jd-ai-overlay-dark); color: var(--jd-ai-text-secondary); font-style: italic; } .jodit-ui-message-list-item__message-content blockquote p:first-child { margin-top: 0; } .jodit-ui-message-list-item__message-content blockquote p:last-child { margin-bottom: 0; } .jodit-ui-message-list-item__message-content blockquote > blockquote { margin-top: var(--jd-ai-space-md); } .jodit-ui-message-list-item__message-content code { padding: 2px 6px; border: 1px solid var(--jd-ai-border-light); border-radius: var(--jd-ai-radius-xs); background: var(--jd-ai-overlay-dark); color: var(--jd-ai-accent-pink-end); font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace; font-size: 0.9em; overflow-wrap: anywhere; white-space: pre-wrap; } .jodit-ui-message-list-item__message-content pre { padding: var(--jd-ai-space-lg); border: 1px solid var(--jd-ai-border-light); border-radius: var(--jd-ai-radius-md); margin: var(--jd-ai-space-md) 0; background: var(--jd-ai-bg-tertiary); font-size: var(--jd-ai-text-sm); line-height: 1.5; overflow-x: auto; } .jodit-ui-message-list-item__message-content pre::-webkit-scrollbar { height: 8px; } .jodit-ui-message-list-item__message-content pre::-webkit-scrollbar-track { background: transparent; } .jodit-ui-message-list-item__message-content pre::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--jd-ai-border-medium); } .jodit-ui-message-list-item__message-content pre::-webkit-scrollbar-thumb:hover { background: var(--jd-ai-border-dark); } .jodit-ui-message-list-item__message-content pre > code { padding: 0; border: none; background: transparent; color: var(--jd-ai-text-primary); font-size: inherit; white-space: pre; } .jodit-ui-message-list-item__message-content table { overflow: hidden; width: 100%; border: 1px solid var(--jd-ai-border-light); border-radius: var(--jd-ai-radius-sm); margin: var(--jd-ai-space-lg) 0; border-collapse: collapse; border-spacing: 0; font-size: var(--jd-ai-text-sm); } .jodit-ui-message-list-item__message-content thead { background: var(--jd-ai-bg-elevated); } .jodit-ui-message-list-item__message-content th { padding: var(--jd-ai-space-md) var(--jd-ai-space-lg); border-bottom: 2px solid var(--jd-ai-border-medium); color: var(--jd-ai-text-primary); font-weight: var(--jd-ai-weight-semibold); text-align: left; } .jodit-ui-message-list-item__message-content td { padding: var(--jd-ai-space-md) var(--jd-ai-space-lg); border-bottom: 1px solid var(--jd-ai-border-light); } .jodit-ui-message-list-item__message-content tbody tr { transition: background var(--jd-ai-transition-fast); } .jodit-ui-message-list-item__message-content tbody tr:hover { background: var(--jd-ai-bg-hover); } .jodit-ui-message-list-item__message-content tbody tr:last-child td { border-bottom: none; } .jodit-ui-message-list-item__message-content hr { height: 2px; border: none; margin: var(--jd-ai-space-xl) 0; background: linear-gradient(to right, transparent, var(--jd-ai-border-medium) 50%, transparent); } .jodit-ui-message-list-item__message-content img { max-width: 100%; height: auto; border-radius: var(--jd-ai-radius-md); margin: var(--jd-ai-space-md) 0; box-shadow: var(--jd-ai-shadow-sm); transition: all var(--jd-ai-transition-base); } .jodit-ui-message-list-item__message-content img:hover { box-shadow: var(--jd-ai-shadow-md); } .jodit-ui-message-list-item__message-content input[type='checkbox'] { margin-right: var(--jd-ai-space-sm); accent-color: var(--jd-ai-accent-pink-start); cursor: pointer; } .jodit-ui-message-list-item__message-content details { padding: var(--jd-ai-space-md); border: 1px solid var(--jd-ai-border-light); border-radius: var(--jd-ai-radius-md); margin: var(--jd-ai-space-md) 0; background: var(--jd-ai-bg-secondary); } .jodit-ui-message-list-item__message-content details[open] { padding-bottom: var(--jd-ai-space-lg); } .jodit-ui-message-list-item__message-content summary { padding: var(--jd-ai-space-sm); border-radius: var(--jd-ai-radius-sm); margin: calc(var(--jd-ai-space-sm) * -1); cursor: pointer; font-weight: var(--jd-ai-weight-medium); transition: background var(--jd-ai-transition-fast); user-select: none; } .jodit-ui-message-list-item__message-content summary:hover { background: var(--jd-ai-bg-hover); } .jodit-ui-message-list-item__message-content summary::marker { color: var(--jd-ai-accent-pink-start); } .jodit-ui-message-list-item__message-content kbd { display: inline-block; padding: 3px 6px; border: 1px solid var(--jd-ai-border-medium); border-radius: var(--jd-ai-radius-xs); background: var(--jd-ai-bg-secondary); box-shadow: 0 1px 0 var(--jd-ai-border-medium); color: var(--jd-ai-text-primary); font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 0.85em; } .jodit-ui-message-list-item__message-content sub, .jodit-ui-message-list-item__message-content sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; } .jodit-ui-message-list-item__message-content sub { bottom: -0.25em; } .jodit-ui-message-list-item__message-content sup { top: -0.5em; } .jodit-ui-message-list-item__message-content abbr[title] { border-bottom: none; cursor: help; text-decoration: underline dotted; } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content code { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.2); color: var(--jd-ai-text-white); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content pre { border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.15); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content blockquote { border-left-color: var(--jd-ai-text-white-secondary); background: rgba(0, 0, 0, 0.1); color: var(--jd-ai-text-white-secondary); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content a { border-bottom: 1px solid rgba(255, 255, 255, 0.5); color: var(--jd-ai-text-white); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content a:hover { border-bottom-color: var(--jd-ai-text-white); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content hr { background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3) 50%, transparent); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content h1, .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content h2 { border-bottom-color: rgba(255, 255, 255, 0.3); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content th { border-bottom-color: rgba(255, 255, 255, 0.3); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content td { border-bottom-color: rgba(255, 255, 255, 0.15); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content table { border-color: rgba(255, 255, 255, 0.2); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content kbd { border-color: rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-content mark { background-color: rgba(255, 235, 59, 0.3); } .jodit-ui-message-list-item__message-bubble_assistant_true .jodit-ui-message-list-item__message-content pre > code { color: var(--jd-ai-text-primary); } .jodit-ui-message-list-item__message-timestamp { margin-top: var(--jd-ai-space-sm); font-size: var(--jd-ai-text-xs); font-weight: var(--jd-ai-weight-medium); letter-spacing: 0.3px; } .jodit-ui-message-list-item__message-actions { position: absolute; z-index: 10; right: var(--jd-ai-space-xs); bottom: var(--jd-ai-space-xs); opacity: 0; transition: opacity var(--jd-ai-transition-fast); } .jodit-ui-message-list-item__message-bubble:hover .jodit-ui-message-list-item__message-actions { opacity: 1; } .jodit-ui-message-list-item__message-bubble_user_true .jodit-ui-message-list-item__message-timestamp { color: var(--jd-ai-text-white-secondary); } .jodit-ui-message-list-item__message-bubble_assistant_true .jodit-ui-message-list-item__message-timestamp { color: var(--jd-ai-text-tertiary); } .jodit-ui-message-list-item__tool-call { position: relative; display: flex; max-width: 100%; height: 100%; flex-direction: column; padding: 0; border: 1px solid var(--jd-ai-border-medium); margin-left: -1px; background: var(--jd-ai-bg-secondary); border-bottom-right-radius: var(--jd-ai-radius-lg); border-top-right-radius: var(--jd-ai-radius-lg); box-shadow: var(--jd-ai-shadow-sm); gap: 0; transition: all var(--jd-ai-transition-base); } .jodit-ui-message-list-item__tool-call:hover { border-color: var(--jd-ai-accent); box-shadow: var(--jd-ai-shadow-md); } .jodit-ui-message-list-item__tool-call + .jodit-ui-message-list-item__tool-call { margin-top: var(--jd-ai-space-md); } .jodit-ui-message-list-item__tool-header { display: flex; min-height: var(--jd-ai-tool-min-height); flex-direction: row; align-items: center; padding: var(--jd-ai-space-md) var(--jd-ai-space-lg); background: var(--jd-ai-accent-gradient); border-top-right-radius: var(--jd-ai-radius-lg); gap: var(--jd-ai-space-md); } .jodit-ui-message-list-item__tool-icon { position: relative; z-index: var(--jd-ai-z-elevated); display: flex; width: var(--jd-ai-avatar-size); height: var(--jd-ai-avatar-size); flex-shrink: 0; align-items: center; justify-content: center; font-size: var(--jd-ai-text-3xl); } .jodit-ui-message-list-item__tool-name { position: relative; z-index: var(--jd-ai-z-elevated); min-width: 0; flex: 1; color: var(--jd-ai-text-white); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: var(--jd-ai-text-lg); font-weight: var(--jd-ai-weight-semibold); line-height: 1.4; } .jodit-ui-message-list-item__tool-status { position: relative; z-index: var(--jd-ai-z-elevated); flex-shrink: 0; padding: var(--jd-ai-space-sm) var(--jd-ai-space-md); border-radius: var(--jd-ai-radius-sm); background: var(--jd-ai-overlay-medium); color: var(--jd-ai-text-white); font-size: var(--jd-ai-text-xs); font-weight: var(--jd-ai-weight-semibold); letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; } .jodit-ui-message-list-item__tool-result-header { display: flex; align-items: center; padding-bottom: var(--jd-ai-space-sm); border-bottom: 1px solid var(--jd-ai-border-light); margin-bottom: var(--jd-ai-space-sm); gap: var(--jd-ai-space-sm); } .jodit-ui-message-list-item__tool-result-icon { display: flex; width: 20px; height: 20px; flex-shrink: 0; align-items: center; justify-content: center; font-size: var(--jd-ai-text-lg); } .jodit-ui-message-list-item__tool-result-title { color: var(--jd-ai-text-primary); font-family: -apple-system, BlinkMa