html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        
        .container {
            display: flex;
            width: 100vw;
            height: 100vh;
        }
        
        .editor-section {
            flex: 1;
            width: 65%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            margin-right: 40px;
            margin-left: 40px;
        }

        .chat-section {
            width: 35%;
            min-width: 300px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #f9f9f9;
            border-right: 1px solid #e0e0e0;
        }
        
        #editor {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            align-items: center;
            padding: 20px 0;
        }
        
        /* Фиксированная ширина для редактора */
        #editor .ql-container {
            width: 794px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        #editor .ql-editor {
            width: 100%;
            overflow-y: auto;
            padding: 30px;
        }

        
        .chat-container {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 15px;
            background: #fff;
        }

        /* Стили для сообщений в чате */
        .chat-messages .log-entry {
            margin-bottom: 12px;
            padding: 14px 18px;
            border-radius: 8px;
            background: #ffffff;
            border: 1px solid #e9ecef;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.7;
            transition: box-shadow 0.2s;
            width: 90%;
            max-width: 90%;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            overflow: hidden;
        }

        .chat-messages .log-entry:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .chat-messages .log-entry:last-child {
            margin-bottom: 0;
        }

        /* Разные цвета для разных статусов */
        .chat-messages .log-entry.box {
            border-left: 3px solid #007bff;
        }

        .chat-messages .log-entry[data-status="ready"] {
            border-left-color: #28a745;
            background: linear-gradient(135deg, #f8fff8 0%, #ffffff 100%);
        }

        .chat-messages .log-entry[data-status="done"] {
            border-left-color: #17a2b8;
            background: linear-gradient(135deg, #f8ffff 0%, #ffffff 100%);
        }

        .chat-messages .log-entry[data-status="error"] {
            border-left-color: #dc3545;
            background: linear-gradient(135deg, #fff8f8 0%, #ffffff 100%);
        }

        .chat-messages .log-entry[data-status="pending"] {
            border-left-color: #ffc107;
            background: linear-gradient(135deg, #fffef8 0%, #ffffff 100%);
        }

        .chat-messages .log-entry .font-bold {
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 8px;
            display: block;
            font-size: 17px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .chat-messages .log-entry .text-content-dimmed {
            color: #6c757d;
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 6px;
            font-style: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .chat-messages .log-entry .text-xs {
            font-size: 14px;
            font-weight: 500;
            color: #495057;
            font-style: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* Стили для превью текста */
        .chat-messages .preview-section {
            margin-top: 10px;
            padding: 8px 12px;
            background: rgba(0, 123, 255, 0.1);
            border-radius: 6px;
        }

        .chat-messages .preview-header {
            font-weight: 700;
            font-size: 15px;
            color: #007bff;
            margin-bottom: 8px;
        }

        .chat-messages .preview-text {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.7;
            color: #2c3e50;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            max-width: 100%;
        }

        /* Стили для кнопок действий */
        .chat-messages .preview-actions {
            margin-top: 10px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .chat-messages .preview-actions button {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .chat-messages .preview-actions button:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Стили для поля ввода чата */
        .chat-input-container {
            padding: 15px 20px;
            border-top: 1px solid #f5f5f5;
            background: #ffffff;
        }

        .chat-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .chat-input {
            flex: 1;
            padding: 12px 50px 12px 16px;
            border: 2px solid #e1e5e9;
            border-radius: 25px;
            font-size: 16px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
            background: #ffffff;
        }

        .chat-input:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
        }

        .chat-input::placeholder {
            color: #6c757d;
        }

        .chat-send-button {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 50%;
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
        }

        .chat-send-button:hover {
            background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
            transform: translateY(-50%) scale(1.05);
            box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
        }

        .chat-send-button:active {
            transform: translateY(-50%) scale(0.95);
        }

        .chat-send-button:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: translateY(-50%);
        }

        /* Стили для изображений (изменение размера отключено) */
        .ql-editor img {
            max-width: 100%;
            height: auto;
        }

        /* Стили для чекбокса "чат по всему документу" */
        .chat-options {
            padding: 8px 15px 12px 15px;
        }

        .chat-checkbox-label {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #666;
            cursor: pointer;
            user-select: none;
        }

        .chat-checkbox-label input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .checkmark {
            height: 16px;
            width: 16px;
            background-color: #fff;
            border: 2px solid #ccc;
            border-radius: 3px;
            margin-right: 8px;
            position: relative;
            transition: all 0.2s ease;
        }

        .chat-checkbox-label input[type="checkbox"]:checked ~ .checkmark {
            background-color: #007bff;
            border-color: #007bff;
        }

        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .chat-checkbox-label input[type="checkbox"]:checked ~ .checkmark:after {
            display: block;
        }

        /* Стили для сообщений пользователя и AI */
        .chat-message {
            margin-bottom: 16px;
            padding: 12px 16px;
            border-radius: 18px;
            max-width: 85%;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            font-size: 16px;
            line-height: 1.5;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .chat-message.user {
                background: #f3f4f6;
    color: #2d2d2d;
    margin-left: auto;
    margin-right: 0;
    border-bottom-right-radius: 4px;
        }

        .chat-message.ai {
            background: #007fff;
            color: #ffffff;
            margin-left: 0;
            margin-right: auto;
            border-bottom-left-radius: 4px;
            border: 1px solid #e9ecef;
        }

        .chat-message .message-time {
            font-size: 12px;
            opacity: 0.7;
            margin-top: 6px;
            text-align: right;
        }

        .chat-message.user .message-time {
            text-align: right;
        }

        .chat-message.ai .message-time {
            text-align: left;
        }

        /* Стили для индикатора набора текста */
        .chat-message.typing {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            font-style: italic;
            opacity: 0.7;
        }

        .chat-message.typing::after {
            content: '';
            display: inline-block;
            width: 2px;
            height: 16px;
            background: #6c757d;
            margin-left: 4px;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        /* Стили для плавающей панели инструментов */
        .bubble-toolbar {
            position: fixed;
            display: none;
            flex-direction: row;
            gap: 4px;
            padding: 8px 12px;
            background: white;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(59, 130, 246, 0.1);
            z-index: 10000;
            font-size: 14px;
            white-space: nowrap;
            /* transform: translateY(-5px); Временно убрал для отладки */
            opacity: 0;
            transition: opacity 0.15s ease-out;
            pointer-events: auto;
        }

        .bubble-toolbar.show {
            /* transform: translateY(0); Временно убрал для отладки */
            opacity: 1;
        }

        .bubble-toolbar button {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            background: #f3f4f6;
            color: #374151;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.15s ease;
            white-space: nowrap;
            min-width: 70px;
        }

        .bubble-toolbar button:hover {
            background: #e5e7eb;
            color: #1f2937;
        }

        .bubble-toolbar button:active {
            background: #d1d5db;
        }

        /* Стили для Markdown в сообщениях чата */
        .markdown-content {
            line-height: 1.6;
        }

        .markdown-content h1,
        .markdown-content h2,
        .markdown-content h3,
        .markdown-content h4,
        .markdown-content h5,
        .markdown-content h6 {
            margin: 8px 0 4px 0;
            font-weight: 600;
            color: #1f2937;
        }

        .markdown-content h1 { font-size: 1.25rem; }
        .markdown-content h2 { font-size: 1.125rem; }
        .markdown-content h3 { font-size: 1rem; }

        .markdown-content p {
            margin: 4px 0;
        }

        .markdown-content ul,
        .markdown-content ol {
            margin: 8px 0;
            padding-left: 20px;
        }

        .markdown-content li {
            margin: 2px 0;
        }

        .markdown-content code {
            background-color: #f3f4f6;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.9em;
        }

        .markdown-content pre {
            background-color: #f3f4f6;
            padding: 12px;
            border-radius: 6px;
            overflow-x: auto;
            margin: 8px 0;
        }

        .markdown-content pre code {
            background-color: transparent;
            padding: 0;
            border-radius: 0;
        }

        .markdown-content blockquote {
            border-left: 3px solid #d1d5db;
            padding-left: 12px;
            margin: 8px 0;
            color: #6b7280;
            font-style: italic;
        }

        .markdown-content strong,
        .markdown-content b {
            font-weight: 600;
            color: #1f2937;
        }

        .markdown-content em,
        .markdown-content i {
            font-style: italic;
            color: #4b5563;
        }

        .markdown-content a {
            color: #3b82f6;
            text-decoration: underline;
        }

        .markdown-content a:hover {
            color: #2563eb;
        }

        /* Стили для панели инструментов редактора */
        .editor-toolbar {
            display: flex;
            gap: 5px;
            padding: 10px 10px;
            background: #ffffff;
        }

        .editor-toolbar .btn-save {
            background: #eee;
            color: #393939;
            border: none;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
        }

        .editor-toolbar .btn-save:hover:not(:disabled) {
            background: rgb(204, 204, 204);
            color: #393939;
            transform: translateY(-1px);
        }

        .editor-toolbar .btn-save:disabled {
            background: rgb(240, 240, 240);
            color: #d1d1d1;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        .editor-toolbar .btn-save:active:not(:disabled) {
            transform: translateY(0);
        }

        .editor-toolbar .btn-save-copy {
            background: #eee;
            color: #393939;
            border: none;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
            margin-left: 8px;
        }

        .editor-toolbar .btn-save-copy:hover:not(:disabled) {
            background: rgb(204, 204, 204);
            color: #393939;
            transform: translateY(-1px);
        }

        .editor-toolbar .btn-save-copy:disabled {
            background: rgb(240, 240, 240);
            color: #d1d1d1;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        .editor-toolbar .btn-save-copy:active:not(:disabled) {
            transform: translateY(0);
        }

        .editor-toolbar .btn-download {
            background: #eee;
            color: #393939;
            border: none;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
            margin-left: 8px;
        }

        .editor-toolbar .btn-download:hover:not(:disabled) {
            background: rgb(204, 204, 204);
            color: #393939;
            transform: translateY(-1px);
        }

        .editor-toolbar .btn-download:disabled {
            background: rgb(240, 240, 240);
            color: #d1d1d1;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        .editor-toolbar .btn-download:active:not(:disabled) {
            transform: translateY(0);
        }

        .editor-toolbar .btn-download-file {
            background: #eee;
            color: #393939;
            border: none;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
            margin-left: 8px;
        }

        .editor-toolbar .btn-download-file:hover:not(:disabled) {
            background: rgb(204, 204, 204);
            color: #393939;
            transform: translateY(-1px);
        }

        .editor-toolbar .btn-download-file:disabled {
            background: rgb(240, 240, 240);
            color: #d1d1d1;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        .editor-toolbar .btn-download-file:active:not(:disabled) {
            transform: translateY(0);
        }

        .editor-toolbar .btn-model-select {
            background: #eee;
            color: #393939;
            border: none;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23393939' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 15px center;
            padding-right: 40px;
            min-width: 150px;
        }

        .editor-toolbar .btn-model-select:hover {
            background-color: rgb(204, 204, 204);
            color: #393939;
            transform: translateY(-1px);
        }

        .editor-toolbar .btn-model-select:focus {
            background-color: rgb(204, 204, 204);
        }
        
        /* Стили для кнопок предпросмотра в логах */
        .preview-btn:hover {
            opacity: 0.9;
        }
        
        /* Модальное окно выбора формата */
        .format-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .format-modal.active {
            display: flex;
        }
        
        .format-modal-content {
            background: white;
            border-radius: 12px;
            padding: 24px;
            min-width: 300px;
            max-width: 500px;
        }
        
        .format-modal-content h3 {
            margin: 0 0 16px 0;
            font-size: 18px;
            font-weight: 600;
        }
        
        .format-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .format-option {
            padding: 12px 16px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            background: #fff;
        }
        
        .format-option:hover {
            background: #f9fafb;
            border-color: #3b82f6;
        }
        
        .format-option.selected {
            background: #eff6ff;
            border-color: #3b82f6;
        }
        
        .format-modal-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            justify-content: flex-end;
        }
        
        .format-modal-actions button {
            padding: 8px 16px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            background: #fff;
            cursor: pointer;
            font-size: 14px;
        }
        #editor .ql-editor {
    font-size: 16px;
    }
        .format-modal-actions button.btn-primary {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        .format-modal-actions button.btn-primary:hover {
            background: #2563eb;
        }

        /* Модальное окно вставки изображения */
        .image-insert-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1001;
        }

        .image-insert-modal.active {
            display: flex;
        }

        .image-insert-modal-content {
            background: white;
            border-radius: 12px;
            padding: 24px;
            min-width: 400px;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .image-insert-modal-content h3 {
            margin: 0 0 8px 0;
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }

        .image-insert-modal-content p {
            margin: 0 0 20px 0;
            color: #666;
            font-size: 14px;
        }

        .image-insert-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 24px;
        }

        .image-insert-option {
            display: flex;
            align-items: center;
            padding: 16px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }

        .image-insert-option:hover {
            border-color: #007bff;
            background: #f8f9fa;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
        }

        .option-icon {
            font-size: 24px;
            margin-right: 16px;
            width: 32px;
            text-align: center;
        }

        .option-text strong {
            display: block;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
        }

        .option-text span {
            font-size: 13px;
            color: #666;
        }

        .image-insert-actions {
            display: flex;
            justify-content: flex-end;
        }

        .image-insert-actions .btn-cancel {
            padding: 10px 20px;
            border: 1px solid #6c757d;
            background: white;
            color: #6c757d;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .image-insert-actions .btn-cancel:hover {
            background: #6c757d;
            color: white;
        }

        /* Стили для иконок undo/redo в Quill toolbar */
        .ql-toolbar .ql-undo::before,
        .ql-toolbar .ql-redo::before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .ql-toolbar .ql-undo::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v6h6'/%3E%3Cpath d='M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13'/%3E%3C/svg%3E");
        }

        .ql-toolbar .ql-redo::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7v6h-6'/%3E%3Cpath d='M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13'/%3E%3C/svg%3E");
        }

        .ql-toolbar .ql-undo,
        .ql-toolbar .ql-redo {
            width: 28px;
            height: 24px;
        }

        .ql-toolbar .ql-undo:hover,
        .ql-toolbar .ql-redo:hover {
            background-color: #f0f0f0;
        }

        .ql-toolbar .ql-undo.ql-active,
        .ql-toolbar .ql-redo.ql-active {
            color: #007bff;
        }

        .ql-toolbar .ql-undo:disabled,
        .ql-toolbar .ql-redo:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .ql-toolbar .ql-undo:disabled:hover,
        .ql-toolbar .ql-redo:disabled:hover {
            background-color: transparent;
        }

        /* Мобильная адаптация Quill toolbar */
        @media (max-width: 640px) {
            .ql-toolbar {
                padding: 8px !important;
                border-radius: 0 !important;
            }

            .ql-toolbar .ql-formats {
                margin-right: 8px !important;
            }

            .ql-toolbar .ql-picker-label,
            .ql-toolbar .ql-picker-item {
                padding: 4px 6px !important;
                font-size: 14px !important;
            }

            .ql-toolbar button {
                width: 32px !important;
                height: 32px !important;
                padding: 4px !important;
            }

            .ql-toolbar .ql-undo,
            .ql-toolbar .ql-redo {
                width: 32px !important;
                height: 32px !important;
            }

            .ql-toolbar .ql-undo::before,
            .ql-toolbar .ql-redo::before {
                width: 16px !important;
                height: 16px !important;
                font-size: 12px !important;
            }

            /* Для очень маленьких экранов скрываем некоторые кнопки или уменьшаем */
            @media (max-width: 480px) {
                .ql-toolbar {
                    padding: 6px !important;
                }

                .ql-toolbar button {
                    width: 28px !important;
                    height: 28px !important;
                    padding: 2px !important;
                }

                .ql-toolbar .ql-undo,
                .ql-toolbar .ql-redo {
                    width: 28px !important;
                    height: 28px !important;
                }
            }
        }

        /* Дополнительные стили для обеспечения видимости кнопок */
        .ql-toolbar .ql-undo,
        .ql-toolbar .ql-redo {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            cursor: pointer !important;
        }


        .ql-toolbar .ql-undo::before,
        .ql-toolbar .ql-redo::before {
            content: '' !important;
            display: block !important;
            width: 18px !important;
            height: 18px !important;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
        }

        /* Стили для контейнера редактора */
        #editor {
            min-height: 400px;
        }
.mobile-chat-close {
    display: none;
}
        /* Мобильная адаптация */
        @media (max-width: 640px) {
            .container {
                position: relative;
            }

            /* Скрываем чат по умолчанию на мобильных */
            .chat-section {
                display: none !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                z-index: 1000 !important;
                background-color: #f9f9f9 !important;
                flex-direction: column !important;
                justify-content: space-between !important;
            }

            /* Когда чат активен на мобильных */
            .chat-section.active {
                display: flex !important;
            }

            /* Гарантируем видимость контейнера чата */
            .chat-section.active .chat-container {
                display: block !important;
                height: 100vh !important;
                position: relative !important;
            }

            /* Гарантируем видимость сообщений чата */
            .chat-section.active .chat-messages {
                overflow-y: auto !important;
                padding: 20px !important;
                padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; /* Отступ для фиксированного инпута + безопасная зона */
                display: block !important;
                visibility: visible !important;
                height: calc(100vh - 140px - env(safe-area-inset-bottom, 0px)) !important; /* Высота минус инпут и безопасная зона */
                box-sizing: border-box !important;
                position: relative !important;
            }

            /* Гарантируем видимость контейнера ввода */
            .chat-section.active .chat-input-container {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                padding: 15px 20px !important;
                padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important; /* Безопасный отступ для iPhone */
                border-top: 1px solid #e0e0e0 !important;
                background: #ffffff !important;
                position: fixed !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
                z-index: 1001 !important;
                max-height: 120px !important; /* Ограничение высоты */
            }

            /* Гарантируем видимость чекбокса */
            .chat-section.active .chat-options {
                padding: 8px 0 0 0 !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            /* Гарантируем видимость лейбла чекбокса */
            .chat-section.active .chat-checkbox-label {
                display: flex !important;
                align-items: center !important;
                visibility: visible !important;
                opacity: 1 !important;
                cursor: pointer !important;
                font-size: 14px !important;
                color: #666 !important;
            }

            /* Гарантируем видимость самого чекбокса */
            .chat-section.active .chat-checkbox-label input[type="checkbox"] {
                display: none !important; /* Скрываем реальный чекбокс */
            }

            /* Гарантируем видимость кастомного чекбокса */
            .chat-section.active .checkmark {
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            /* Гарантируем видимость wrapper'а ввода */
            .chat-section.active .chat-input-wrapper {
                position: relative !important;
                display: flex !important;
                align-items: center !important;
                width: 100% !important;
                margin-top: 8px !important;
            }

            /* Гарантируем видимость инпута */
            .chat-section.active .chat-input {
                flex: 1 !important;
                padding: 14px 50px 14px 16px !important;
                border: 2px solid #e1e5e9 !important;
                border-radius: 25px !important;
                font-size: 16px !important; /* Предотвращает зум на iOS */
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
                outline: none !important;
                background: #ffffff !important;
                color: #333 !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Гарантируем видимость кнопки отправки */
            .chat-section.active .chat-send-button {
                position: absolute !important;
                right: 8px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                width: 36px !important;
                height: 36px !important;
                border: none !important;
                border-radius: 50% !important;
                background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
                color: white !important;
                cursor: pointer !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            /* Редактор занимает весь экран на мобильных */
            .editor-section {
                width: 100%;
                min-width: 100%;
            }

            /* Кнопка переключения чата на мобильных */
            .mobile-chat-toggle {
                display: block !important;
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                border: none;
                color: white;
                font-size: 24px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
                z-index: 999;
                transition: all 0.3s ease;
            }

            .mobile-chat-toggle:hover {
                transform: scale(1.1);
                box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
            }

            .mobile-chat-toggle.active {
                background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            }

        /* Кнопка "Спросить ИИ" в панели инструментов (появляется при выделении текста на мобильных) */
        .mobile-ask-ai-toggle {
            display: none !important; /* Скрыто по умолчанию */
            background: linear-gradient(135deg, #6f42c1 0%, #563d7c 100%); /* Фиолетовый цвет */
            color: white;
            border: none;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(111, 66, 193, 0.3);
            white-space: nowrap;
        }

        .mobile-ask-ai-toggle:hover {
            background: linear-gradient(135deg, #563d7c 0%, #4a2c5a 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(111, 66, 193, 0.4);
        }

        /* Когда кнопка "Спросить ИИ" активна (текст выделен) */
        .mobile-ask-ai-toggle.active {
            display: inline-block !important;
        }

            /* Кнопка закрытия чата на мобильных */
            .mobile-chat-close {
                display: none !important;
                position: fixed !important; /* Изменено на fixed для гарантии видимости */
                top: 15px !important;
                right: 15px !important;
                width: 44px !important;
                height: 44px !important;
                border-radius: 50% !important;
                background: rgba(220, 53, 69, 0.95) !important; /* Более насыщенный красный */
                border: 2px solid white !important;
                color: white !important;
                font-size: 20px !important;
                font-weight: bold !important;
                cursor: pointer !important;
                z-index: 1003 !important; /* Еще выше чем у инпута */
                transition: all 0.2s ease !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
            }

            .mobile-chat-close:hover {
                background: rgba(220, 53, 69, 1) !important;
                transform: scale(1.1) !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
            }

            /* Показываем кнопку закрытия только когда чат активен на мобильных */
            .chat-section.active .mobile-chat-close {
                display: flex !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            /* Когда чат активен - скрываем кнопку переключения */
            .chat-section.active ~ .editor-section .mobile-chat-toggle {
                display: none !important;
            }
        }

        /* Мобильная адаптация верхней панели инструментов */
        @media (max-width: 640px) {
            .editor-toolbar {
                padding: 10px 15px !important;
                gap: 8px !important;
                flex-wrap: wrap !important; /* Кнопки могут переноситься */
                position: relative !important;
            }
        .editor-section {
            margin-right: 0px;
            margin-left: 0px;
        }

            .editor-toolbar .btn-save,
            .editor-toolbar .btn-save-copy,
            .editor-toolbar .btn-download,
            .editor-toolbar .btn-download-file,
            .editor-toolbar .btn-model-select,
            .editor-toolbar .mobile-ask-ai-toggle {
                padding: 8px 12px !important;
                font-size: 13px !important;
                font-weight: 500 !important;
                min-width: auto !important;
                flex: 1 !important; /* Кнопки равномерно распределяются */
                min-width: 100px !important;
                max-width: calc(50% - 4px) !important; /* 2 кнопки в ряд */
                text-transform: none !important;
                letter-spacing: normal !important;
            }

            .editor-toolbar .btn-model-select {
                min-width: 120px !important;
                padding-right: 35px !important;
                background-position: right 10px center !important;
            }

            /* Для очень маленьких экранов - все кнопки в одну строку по 2 */
            @media (max-width: 480px) {
                .editor-toolbar .btn-save,
                .editor-toolbar .btn-save-copy,
                .editor-toolbar .btn-download,
                .editor-toolbar .btn-download-file,
                .editor-toolbar .btn-model-select {
                    max-width: calc(50% - 4px) !important;
                    min-width: 80px !important;
                    font-size: 12px !important;
                    padding: 6px 8px !important;
                }

                .editor-toolbar .btn-model-select {
                    padding-right: 30px !important;
                    background-position: right 8px center !important;
                }
            }

            /* Для самых маленьких экранов - кнопки в столбик */
            @media (max-width: 360px) {
                .editor-toolbar {
                    flex-direction: column !important;
                    gap: 6px !important;
                }

                .editor-toolbar .btn-save,
                .editor-toolbar .btn-save-copy,
                .editor-toolbar .btn-download,
                .editor-toolbar .btn-download-file,
                .editor-toolbar .btn-model-select,
                .editor-toolbar .mobile-ask-ai-toggle {
                    max-width: 100% !important;
                    width: 100% !important;
                }
            }
        }

        /* Скрываем кнопки мобильной версии на десктопе */
        @media (min-width: 641px) {
            .mobile-chat-toggle {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
            .mobile-ask-ai-toggle {
                display: none !important;
            }
        }
.ql-toolbar.ql-snow {
  font-family: 'Roboto Mono', 'Courier New', monospace;
}
.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
    height: 30px;
}
.ql-toolbar.ql-snow {
    background-color: #f5f5f5 !important;
}
.ql-toolbar.ql-snow .ql-active {
    color: #3d3d3d !important;
}

/* =========================
   НЕБЛОКИРУЮЩИЕ МОДАЛЬНЫЕ ОКНА (замена alert/prompt)
   ========================= */

/* Модальное окно для alert */
.custom-alert-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.custom-alert-modal.active {
    display: flex;
}

.custom-alert-modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.custom-alert-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 16px;
}

.custom-alert-message {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
    word-wrap: break-word;
}

.custom-alert-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.custom-alert-actions button {
    min-width: 100px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

/* Модальное окно для prompt */
.custom-prompt-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.custom-prompt-modal.active {
    display: flex;
}

.custom-prompt-modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.2s ease-out;
}

.custom-prompt-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #333;
}

.custom-prompt-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.custom-prompt-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-prompt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.custom-prompt-actions button {
    min-width: 80px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.custom-prompt-actions .btn-cancel {
    background: #f3f4f6;
    color: #374151;
}

.custom-prompt-actions .btn-cancel:hover {
    background: #e5e7eb;
}

.custom-prompt-actions .btn-primary {
    background: #3b82f6;
    color: white;
}

.custom-prompt-actions .btn-primary:hover {
    background: #2563eb;
}