/* rNodes: тема чата только светлая; прежние отключённые dark-правила удалены. */
/**
 * DIVIALET - Версия с настройками модели и канвасами
 * Стили для одноокного интерфейса с диалогами в узлах
 * + Система настроек модели
 * + Кнопка удаления в виде крестика в правом верхнем углу
 * + Левая панель навигации по канвасам
 */

/* Импорт шрифтов */
@import url('/fonts/fonts.css');

:root {
    --node-default-width: 450px;
    --node-default-height: 650px;
}

/* Сброс стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Основные стили */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f7fa;
    color: #2d3748;
    height: 100vh;
    overflow: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Контейнер приложения */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #ffffff;
    width: 100vw;
    max-width: 100%;
}

/* ==================== ПАНЕЛЬ ИНСТРУМЕНТОВ ==================== */

.toolbar {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.5rem 0.6rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Зона логотипа: ширина = ширина левого сайдбара (280px) минус padding тулбара (1.5rem),
   чтобы правый край зоны садился ровно на правый край сайдбара.
   padding-left: 1rem повторяет отступ заголовка "Проект" в .sidebar-header (padding 1rem)
   — иконка логотипа смещается вправо и стоит на той же вертикали, что текст "Проект". */
.app-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3182ce;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0;
    padding-left: 1rem;
    width: calc(280px - 1.5rem);
    box-sizing: border-box;
    flex-shrink: 0;
}

.logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.node-navigator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #718096;
}

.node-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 0.85rem;
    background: white;
    color: #4a5568;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    min-width: 160px;
    max-width: 200px;
}

.node-select:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.2);
}

.node-select:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}

.toolbar-right {
    display: flex;
    gap: 0;
    align-items: center;
    margin-right: 2rem;
}

.btn {
    padding: 0.6rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: white;
    color: #4a5568;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: #3182ce;
    color: white;
    border-color: #3182ce;
}

.btn-primary:hover {
    background: #2c5282;
    border-color: #2c5282;
}

.btn-secondary {
    background: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

/* Контурные кнопки для верхней панели */
.btn-outline {
    background: transparent;
    border: 1px solid #cbd5e0;
    color: #4a5568;
    padding: 0.5rem;
    min-width: auto;
}

.toolbar-right .btn-outline {
    height: 34px;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

.btn-outline:hover {
    background: #f7fafc;
    border-color: #a0aec0;
    transform: none;
}

.btn-outline:active {
    transform: scale(0.95);
}

/* === Группы тулбара в стиле ленты MS Excel === */
.toolbar-groups {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.toolbar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    padding: 7px 0.6rem 0;
}

.toolbar-group-content {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.toolbar-group-label {
    font-size: 9px;
    color: rgba(19, 52, 59, 0.42);
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.04em;
    user-select: none;
    text-transform: uppercase;
}

.toolbar-group-sep {
    display: inline-block;
    align-self: center;
    width: 1px;
    height: 48px;
    background: rgba(19, 52, 59, 0.12);
    margin: 0 4px;
    margin-top: -10px;
    flex: none;
}

.toolbar-right .toolbar-group {
    padding: 7px 0.5rem 0;
}

.toolbar-right .toolbar-group-label {
    color: rgba(74, 85, 104, 0.5);
}

/* Бейдж «нет подключения» — точка в правом верхнем углу кнопки */
.zoom-btn.rbase-btn {
    position: relative;
}

.rbase-offline-badge {
    display: none;
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    background: #e53e3e;
    border-radius: 50%;
    border: 1.5px solid #fff;
    pointer-events: none;
    z-index: 2;
}

.zoom-btn.rbase-btn.rbase-offline .rbase-offline-badge {
    display: block;
}

.zoom-btn.rbase-btn.rbase-offline {
    opacity: 0.55;
}

/* Кнопка запуска rBase мигает, пока локальный сервер не запущен */
#rbaseOpenToolbarBtn.rbase-offline {
    animation: rbaseLaunchBlink 1.2s ease-in-out infinite;
}

@keyframes rbaseLaunchBlink {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #rbaseOpenToolbarBtn.rbase-offline {
        animation: none;
    }
}

/* Кнопка AI-Аналитика мигает, пока идёт анализ (ТЗ «Многопоточный UI», T3.2,
   требование Т-2). Цвет намеренно ОТЛИЧАЕТСЯ от красного мигания «rBase не
   запущен»: бирюзовый True Turquoise = «работа идёт», а не «проблема».
   :not(.rbase-offline) — индикация не должна «оживлять» кнопку, помеченную как
   отключённая: при выключенном rBase анализ идти не может по построению. */
.zoom-btn.rbase-btn.orch-busy:not(.rbase-offline) {
    animation: orchBusyBlink 1.4s ease-in-out infinite;
}

.zoom-btn.rbase-btn.orch-busy:not(.rbase-offline)::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    background: #20808D;
    border-radius: 50%;
    border: 1.5px solid #fff;
    pointer-events: none;
    z-index: 2;
}

@keyframes orchBusyBlink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(32, 128, 141, 0); background: rgba(32, 128, 141, 0.10); }
    50%      { box-shadow: 0 0 0 4px rgba(32, 128, 141, 0.18); background: rgba(32, 128, 141, 0.24); }
}

/* Без анимации — статичная подсветка, факт занятости всё равно читается
   (точка в углу остаётся). */
@media (prefers-reduced-motion: reduce) {
    .zoom-btn.rbase-btn.orch-busy:not(.rbase-offline) {
        animation: none;
        background: rgba(32, 128, 141, 0.18);
    }
}

/* ==================== ВЕРХНИЙ БАР: ПРАВАЯ ЧАСТЬ (Perplexity style) ====================
   Скоупим под .toolbar-right — глобальный .btn / .btn-outline не трогаем.
   Палитра: Offblack #13343B / muted rgba(19,52,59,0.62), True Turquoise #20808D / #1FB8CD,
   pill-радиус, без бордеров, hover/active — alpha-фон. См. Docs/PERPLEXITY_STYLE_GUIDE.md */

.toolbar-right .btn,
.toolbar-right .btn.btn-outline {
    border: none !important;
    background: transparent;
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    box-shadow: none;
}

.toolbar-right .btn:hover,
.toolbar-right .btn.btn-outline:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
    transform: none;
    border-color: transparent;
}

.toolbar-right .btn:active,
.toolbar-right .btn.btn-outline:active {
    background: rgba(31, 184, 205, 0.12);
    color: #1FB8CD;
    transform: scale(0.97);
}

.toolbar-right .btn:focus-visible,
.toolbar-right .btn.btn-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

.toolbar-right .btn:disabled {
    background: transparent;
    color: rgba(19, 52, 59, 0.30);
    cursor: not-allowed;
}

/* Иконка-«лампочка» внутри кнопки health — наследует currentColor от кнопки */
.toolbar-right .btn .health-bulb-icon {
    color: inherit !important;
}

/* Балансовая плашка (#aitunnelBalance.api-balance) — pill, без бордера, мягкий фон */
.toolbar-right .api-balance,
#aitunnelBalance.api-balance {
    background: rgba(19, 52, 59, 0.04);
    background-color: rgba(19, 52, 59, 0.04);
    border: none;
    color: #13343B;
    border-radius: 9999px;
    height: 32px;
    min-height: 32px;
    padding: 0 14px;
    margin-right: 0;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    transition: background 150ms ease;
    box-shadow: none;
}

.toolbar-right .api-balance:hover,
#aitunnelBalance.api-balance:hover {
    background: rgba(19, 52, 59, 0.08);
    background-color: rgba(19, 52, 59, 0.08);
    box-shadow: none;
}

#aitunnelBalance .balance-text {
    color: #13343B;
    font-weight: 500;
}

#aitunnelBalance .days-left {
    color: rgba(19, 52, 59, 0.55);
}

/* Заблокированный ключ: красный pill в той же системе альфа-цветов */
.toolbar-right .api-balance.blocked,
#aitunnelBalance.api-balance.blocked {
    background: rgba(229, 62, 62, 0.10);
    background-color: rgba(229, 62, 62, 0.10);
    color: #c53030;
    border: none;
}

.toolbar-right .api-balance.blocked:hover,
#aitunnelBalance.api-balance.blocked:hover {
    background: rgba(229, 62, 62, 0.16);
    background-color: rgba(229, 62, 62, 0.16);
}

/* Health-alarm pill — без жёсткого бордера, мягкий розово-кораловый alpha */
.toolbar-right .health-alarm-indicator {
    border: none;
    border-radius: 9999px;
    padding: 0 12px;
    height: 32px;
    background: rgba(212, 112, 106, 0.10);
}

.btn:disabled {
    background: #f7fafc;
    color: #a0aec0;
    cursor: not-allowed;
    transform: none;
}

/* ==================== ГЛАВНАЯ ОБЛАСТЬ КОНТЕНТА ==================== */

.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ==================== ЛЕВАЯ ПАНЕЛЬ НАВИГАЦИИ ==================== */

.canvas-sidebar {
    width: 280px;
    background: white;
    border-right: 1px solid rgba(19, 52, 59, 0.08);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    z-index: 50;
    min-width: 280px;
    max-width: 400px;
    resize: horizontal;
    overflow: hidden;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: none;
}

/* Контейнер для кнопок в шапке сайдбара */
.sidebar-header-buttons {
    display: flex;
    gap: 6px;
}

/* Контурные кнопки сайдбара */
.sidebar-outline-btn {
    background: transparent;
    border: 1px solid var(--border, rgba(232, 227, 219, 0.07));
    color: var(--text-dim, #948e84);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-outline-btn:hover {
    background-color: var(--bg-hover, rgba(255, 250, 243, 0.07));
    border-color: var(--border-hover, rgba(232, 227, 219, 0.13));
    color: var(--text, #e8e3db);
}

.sidebar-outline-btn:active {
    transform: scale(0.95);
}

/* ═══ Dropdown-меню проекта ═══ */
.project-menu-wrapper {
    position: relative;
}

.project-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    z-index: 999999;
    padding: 4px 0;
    animation: projectMenuFadeIn 0.15s ease;
}

.project-dropdown-menu.show {
    display: block;
}

@keyframes projectMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.project-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    color: #2d3748;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.project-dropdown-item:hover {
    background: #f7fafc;
}

.project-dropdown-item svg {
    flex-shrink: 0;
    color: #718096;
}

.project-dropdown-item:hover svg {
    color: #4a5568;
}

.project-dropdown-divider {
    height: 1px;
    margin: 4px 10px;
    background: #e2e8f0;
}

/* Устаревший стиль - оставлен для совместимости */
.export-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.1rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    opacity: 0.6;
}

.export-btn:hover {
    background-color: #f7fafc;
    opacity: 1;
    transform: scale(1.1);
}

.export-btn:active {
    transform: scale(0.95);
}

.sidebar-header h3 {
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: #13343B;
    font-family: inherit;
    cursor: pointer;
    border-radius: 5px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.12s;
}
.sidebar-header h3:hover {
    background: rgba(19, 52, 59, 0.06);
}

/* 🗂️ Вкладки модалки настроек проекта */
.ps-tabs {
    display: flex;
    gap: 2px;
    padding: 0 16px;
    border-bottom: 1px solid #e2e8f0;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.ps-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 12px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s;
}
.ps-tab:hover { color: #334155; }
.ps-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 500;
}
.ps-prompt-item, .ps-file-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background: #f8fafc;
}
.ps-prompt-item .ps-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.canvas-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.canvas-list::-webkit-scrollbar {
    width: 6px;
}

.canvas-list::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.canvas-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

/* ==================== ПЛАШКА КАНВАСА (Perplexity style) ====================
   Без бордеров, мягкие фоны на hover/active, FK Grotesk Neue,
   уменьшенная высота. См. Docs/PERPLEXITY_STYLE_GUIDE.md */

.canvas-item {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    margin: 0.125rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    border: none;
    position: relative;
    gap: 0.55rem;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    color: #475569;
}

.canvas-item:hover {
    background: rgba(19, 52, 59, 0.05);
    border: none;
}

.canvas-item.active {
    background: rgba(31, 184, 205, 0.08);
    border: none;
    color: #20808D;
}

.canvas-item-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    border: none;
    opacity: 0.7;
}

.canvas-item.active .canvas-item-icon {
    opacity: 1;
}

/* ── Живой предпросмотр потокового ответа ────────────────────────────────────
   T5.1/T5.2, ТЗ_МНОГОПОТОЧНЫЙ_UI_И_СТРИМИНГ_2026-07-27.

   Это НЕ сообщение: у него свой класс и он не попадает под селекторы, по
   которым ходят детекторы таблиц и кнопок заметок (P21) — иначе недописанный
   текст перелопачивался бы посреди печати. Настоящее сообщение вставляется как
   всегда, уже целиком, когда поток закрылся. Разметку (markdown, формулы,
   таблицы) разбирает именно оно — здесь только текст, чтобы не пересобирать
   разметку на каждый чанк. */
.stream-preview {
    padding: 0.6rem 0.85rem;
    margin: 0.35rem 0;
    border-radius: 10px;
    background: rgba(31, 184, 205, 0.05);
    border-left: 2px solid rgba(31, 184, 205, 0.45);
}

/* Цвет текста превью наследуется от контейнера сообщений. */
.stream-preview-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    /* Плотнее, чем у готового сообщения: `pre-wrap` сохраняет переводы строк
       как есть, и при 1.5 текст модели с абзацными отступами «разъезжался». */
    line-height: 1.3;
    color: inherit;
    display: inline;
}

.stream-preview-caret {
    display: inline-block;
    width: 7px;
    height: 14px;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: currentColor;
    opacity: 0.75;
    animation: streamCaretBlink 1s steps(2, start) infinite;
}

@keyframes streamCaretBlink {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .stream-preview-caret { animation: none; opacity: 0.6; }
}

/* ── Занятый диалог: в нём идёт фоновая работа ───────────────────────────────
   T3.1 (P24, требование Т-3), ТЗ_МНОГОПОТОЧНЫЙ_UI_И_СТРИМИНГ_2026-07-27.

   Модификатор .busy соседствует с .active, а не заменяет его: открытый диалог,
   в котором идёт генерация, должен читаться одновременно как активный И занятый.
   Поэтому занятость показываем не фоном (он занят активным состоянием) и не
   цветом точки (её цвет принадлежит диалогу), а пульсирующим кольцом вокруг
   точки плюс подписью в метаданных. Цвет янтарный — он не конфликтует ни с
   бирюзовым «активно», ни с красным «ошибка». */
.canvas-item.busy .canvas-item-icon {
    opacity: 1;
    animation: canvasBusyPulse 1.6s ease-out infinite;
}

@keyframes canvasBusyPulse {
    0%   { box-shadow: 0 0 0 0 rgba(224, 138, 60, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(224, 138, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 138, 60, 0); }
}

/* ⚠️ Слово состояния здесь БОЛЬШЕ НЕ ЖИВЁТ (24.09.2026). Раньше тут стояло
   `content: 'работает'`, и состояние у карточки могло быть ровно одно: диалог,
   остановившийся на уточняющем вопросе, показывал «работает». Теперь подпись
   рисует разметка, а слова берутся из каталога CANVAS_STATES в script.js —
   добавление состояния не требует правки таблицы стилей. */
.canvas-item-state {
    font-size: 10px;
    line-height: 1.3;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.canvas-item-state[data-state="working"] {
    color: #B4661F;
    background: rgba(224, 138, 60, 0.14);
}

/* Ожидание человека — не тревога, а приглашение: спокойный синий, не оранжевый. */
.canvas-item-state[data-state="awaiting"] {
    color: #1D6A8C;
    background: rgba(49, 130, 206, 0.14);
}

/* «Выполнено» (14.10): ответ готов, человек его ещё не открыл — спокойный зелёный. */
.canvas-item-state[data-state="done"] {
    color: #2F7D5B;
    background: rgba(47, 158, 107, 0.14);
}

/* Пульсация — украшение, а не носитель смысла: при отключённой анимации
   остаются кольцо и подпись. */
@media (prefers-reduced-motion: reduce) {
    .canvas-item.busy .canvas-item-icon {
        animation: none;
        box-shadow: 0 0 0 3px rgba(224, 138, 60, 0.35);
    }
}

.canvas-item-content {
    flex: 1;
    min-width: 0;
}

.canvas-item-title {
    font-weight: 400;
    font-size: 13px;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    font-family: inherit;
}

.canvas-item:hover .canvas-item-title {
    color: #1e293b;
}

.canvas-item.active .canvas-item-title {
    color: #20808D;
    font-weight: 400;
}

.canvas-item-meta {
    font-size: 11px;
    color: rgba(100, 116, 139, 0.75);
    margin-top: 0.05rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.3;
}

.canvas-item-nodes {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.canvas-item-time {
    color: rgba(100, 116, 139, 0.60);
}

/* 3-точечная кнопка меню (заменяет старые rename/delete) */
.canvas-item-menu {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(19, 52, 59, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
    padding: 0;
    outline: none;
}

.canvas-item:hover .canvas-item-menu,
.canvas-item-menu.menu-open {
    opacity: 1;
}

.canvas-item-menu:hover {
    background: rgba(19, 52, 59, 0.10);
    color: #20808D;
}

.canvas-item-menu:active {
    transform: translateY(-50%) scale(0.92);
}

.canvas-item-menu:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

/* Popup-меню переименовать/удалить */
.canvas-item-menu-popup {
    display: none;
    position: fixed;
    min-width: 170px;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(19, 52, 59, 0.12), 0 1px 3px rgba(19, 52, 59, 0.06);
    z-index: 999999;
    padding: 4px;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    animation: canvasMenuFadeIn 0.12s ease;
}

.canvas-item-menu-popup.show {
    display: block;
}

@keyframes canvasMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.canvas-item-menu-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: #13343B;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    border-radius: 6px;
    transition: background 120ms ease, color 120ms ease;
}

.canvas-item-menu-action:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.canvas-item-menu-action.danger:hover {
    background: rgba(229, 62, 62, 0.10);
    color: #c53030;
}

.canvas-item-menu-action svg {
    flex-shrink: 0;
    color: rgba(19, 52, 59, 0.55);
}

.canvas-item-menu-action:hover svg {
    color: inherit;
}

/* Drag & Drop стили для канвасов */
.canvas-item[draggable="true"] {
    cursor: move;
}

.canvas-item:hover[draggable="true"] {
    cursor: move;
}

.canvas-item[draggable="true"]:active {
    cursor: grabbing;
}

.empty-canvas-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: rgba(19, 52, 59, 0.55);
    font-size: 13px;
    line-height: 1.5;
    height: 200px;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
}

.empty-canvas-list-icon {
    margin-bottom: 0.85rem;
    opacity: 0.4;
    color: rgba(19, 52, 59, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== ОБЛАСТЬ ДЕРЕВА ==================== */

.tree-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #f7fafc;
}

.tree-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    background: 
        radial-gradient(circle at 20px 20px, #e2e8f0 1px, transparent 1px),
        radial-gradient(circle at 60px 60px, #e2e8f0 1px, transparent 1px);
    background-size: 40px 40px;
    cursor: grab;
    scroll-behavior: smooth;
    user-select: none;
    will-change: transform;
}

.tree-canvas:active {
    cursor: grabbing;
}

.nodes-container {
    position: relative;
    padding: 2rem;
    transform-origin: 0 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}


/* ==================== ЦВЕТОВЫЕ СХЕМЫ УЗЛОВ ==================== */

.dialog-node {
    position: absolute;
    width: 450px;
    min-height: 650px;
    background: white;
    border: 1px solid var(--node-primary-color, rgba(19, 52, 59, 0.10));
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(19, 52, 59, 0.06), 0 4px 12px rgba(19, 52, 59, 0.04);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    cursor: move;
    transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1), top 300ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1), height 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease, opacity 200ms ease;
    z-index: 100;
    will-change: transform, left, top;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
}

.dialog-node:hover {
    box-shadow: 0 4px 16px rgba(19, 52, 59, 0.10), 0 1px 3px rgba(19, 52, 59, 0.06);
    cursor: pointer;
}

.dialog-node.active {
    box-shadow: 0 0 0 1px var(--node-primary-color, #20B8CD), 0 6px 20px rgba(19, 52, 59, 0.08);
}

.dialog-node.processing {
    border-color: #ed8936;
    box-shadow: 0 0 0 1px rgba(237, 137, 54, 0.25), 0 6px 20px rgba(237, 137, 54, 0.10);
}

/* Цветовые классы для узлов */
.node-color-blue {
    --node-primary-color: #3182ce;
    --node-border-color: #2c5282;
    --node-bg-color: #ebf8ff;
}

.node-color-green {
    --node-primary-color: #48bb78;
    --node-border-color: #38a169;
    --node-bg-color: #f0fff4;
}

.node-color-purple {
    --node-primary-color: #805ad5;
    --node-border-color: #6b46c1;
    --node-bg-color: #faf5ff;
}

.node-color-red {
    --node-primary-color: #e53e3e;
    --node-border-color: #c53030;
    --node-bg-color: #fed7d7;
}

.node-color-orange {
    --node-primary-color: #ed8936;
    --node-border-color: #dd6b20;
    --node-bg-color: #fef5e7;
}

.node-color-pink {
    --node-primary-color: #d53f8c;
    --node-border-color: #b83280;
    --node-bg-color: #fed7e2;
}

.node-color-teal {
    --node-primary-color: #38b2ac;
    --node-border-color: #319795;
    --node-bg-color: #e6fffa;
}

.node-color-yellow {
    --node-primary-color: #d69e2e;
    --node-border-color: #b7791f;
    --node-bg-color: #fffff0;
}

.dialog-node.new {
    animation: nodeSlideIn 0.3s ease-out;
}

/* Ручка для изменения размера */
.dialog-node::after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 8px;
    height: 8px;
    background: rgba(19, 52, 59, 0.25);
    border-radius: 50%;
    box-shadow: none;
    cursor: se-resize;
    z-index: 200;
    opacity: 0.6;
    transition: opacity 150ms ease, background-color 150ms ease;
}

.dialog-node:hover::after {
    opacity: 1;
    background: rgba(19, 52, 59, 0.40);
}

.dialog-node.resizing::after {
    background: #20B8CD;
    opacity: 1;
}

.dialog-node.resizing {
    user-select: none;
}

/* Стили для перетаскивания */
.dialog-node.dragging {
    cursor: grabbing;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    transform: scale(1.02) translateY(-4px);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

.dialog-node.dragging * {
    pointer-events: none;
}

.dialog-node.dragging .node-header {
    cursor: grabbing;
}

.dialog-node:not(.dragging) {
    transition: left 0.3s ease, top 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

@keyframes nodeSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==================== ЗАГОЛОВОК УЗЛА ==================== */

.node-header {
    padding: 0.75rem 1rem;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
    cursor: move;
    user-select: none;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    grid-row: 1;
    min-height: 110px;
}

.node-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.node-title {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 14px;
    color: #13343B;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    background: none;
    border: none;
    outline: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.node-title:focus {
    background-color: rgba(19, 52, 59, 0.04);
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.25);
}

.node-header-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0; /* Кнопки не сжимаются */
}

.node-config-btn,
.node-height-expand-btn,
.node-fullscreen-btn,
.node-delete-btn {
    background: transparent;
    border: none;
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: rgba(19, 52, 59, 0.55);
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    flex-shrink: 0;
    outline: none;
    padding: 0;
}

.node-config-btn:hover,
.node-height-expand-btn:hover,
.node-fullscreen-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.node-config-btn:focus-visible,
.node-height-expand-btn:focus-visible,
.node-fullscreen-btn:focus-visible,
.node-delete-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

.node-delete-btn:hover {
    background: rgba(229, 62, 62, 0.10);
    color: #c53030;
}

.node-config-btn:active,
.node-height-expand-btn:active,
.node-fullscreen-btn:active,
.node-delete-btn:active {
    transform: scale(0.94);
}

.node-height-expand-btn.active {
    background: rgba(31, 184, 205, 0.14);
    color: #20808D;
}

/* Обновляем стили для .node-controls */
.node-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0; /* Убираем отступы сверху, так как теперь есть отступ в .node-title-row */
    min-height: 28px; /* Фиксированная минимальная высота для предотвращения скачков при переключении моделей */
}

.node-header:hover {
    background: #FFFFFF;
}

.node-header:active {
    background: #FFFFFF;
}

/* Кнопка удаления в правом верхнем углу (absolute-вариант) */
.node-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    color: rgba(19, 52, 59, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease, opacity 150ms ease;
    opacity: 0;
    z-index: 10;
    outline: none;
}

.dialog-node:hover .node-delete-btn {
    opacity: 1;
}

.node-delete-btn:hover {
    background: rgba(229, 62, 62, 0.10);
    color: #c53030;
}

.node-delete-btn:active {
    transform: scale(0.94);
}

/* Кнопка настроек модели для корневых узлов (absolute-вариант) */
.node-config-btn {
    position: absolute;
    top: 8px;
    right: 40px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    color: rgba(19, 52, 59, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease, opacity 150ms ease;
    opacity: 0;
    z-index: 10;
    outline: none;
}

.dialog-node:hover .node-config-btn {
    opacity: 1;
}

.node-config-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.node-config-btn:active {
    transform: scale(0.94);
}

/* Идентичность узла — через цвет рамки .dialog-node, без полосы в шапке */

.node-title {
    font-weight: 500;
    font-size: 14px;
    color: #13343B;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    outline: none;
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 2px 6px;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-left: 0;
    margin-right: 70px;
}

.node-title:focus {
    background: rgba(19, 52, 59, 0.04);
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.25);
    white-space: normal;
    overflow: visible;
}

/* Левая часть шапки с заголовком и счетчиком */
.node-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    margin-left: 0;
    margin-right: 70px;
}

.node-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    /* Строка растянута на всю ширину шапки: кнопки по-прежнему у правого края,
       а шкала заполнения окна (.token-counter) встаёт у левого. */
    margin-left: 0;
    justify-content: flex-end;
    min-height: 28px;
}

/* Свободная полоса строки осталась зоной перетаскивания узла (mousedown в
   script.js пропускает клик по самому контейнеру) — показываем это курсором. */
.node-header > .node-controls {
    cursor: move;
}

/* ==================== ИКОНКИ ВОЗМОЖНОСТЕЙ МОДЕЛИ ==================== */

@keyframes capRainbow {
    0%   { border-color: #c9995e; }
    16%  { border-color: #d4706a; }
    33%  { border-color: #a855f7; }
    50%  { border-color: #6b9fd4; }
    66%  { border-color: #5db87a; }
    83%  { border-color: #f59e0b; }
    100% { border-color: #c9995e; }
}

.model-caps {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* 13.09.2026. Два состояния кнопки теперь различаются формой, а не оттенком
   (раньше «модель умеет» и «фильтр включён» были бледной подложкой почти одного
   цвета, и понять, включён ли фильтр, было нельзя):
     • фильтр ВКЛЮЧЁН — сплошная заливка акцентом, белая иконка;
     • выбранная модель это умеет — зелёная точка в углу;
     • фильтр включён — рядом плашка «Рисуют · 6 ✕» (.cap-filter-chip). */
.cap-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: rgba(19, 52, 59, 0.55);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
    line-height: 1;
    outline: none;
}

.cap-btn:hover {
    border-color: rgba(32, 128, 141, 0.45);
    color: #20808D;
}

.cap-btn:active {
    transform: scale(0.94);
}

.cap-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

/* Выбранная модель это умеет — точка в углу, не заливка */
.cap-btn.cap-has::after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5db87a;
}

/* Фильтр ВКЛЮЧЁН — сплошная заливка */
.cap-btn.cap-filter-on {
    color: #fff;
    background: #20808D;
    border-color: #20808D;
    animation: none;
}

.cap-btn.cap-filter-on:hover {
    color: #fff;
    background: #1a6b76;
    border-color: #1a6b76;
}

.cap-btn.cap-filter-on.cap-has::after {
    background: #fff;
}

.cap-btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Плашка включённого фильтра: что включено, сколько моделей осталось, ✕ — снять */
.cap-filter-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-left: 2px;
    padding: 0 8px;
    border: 1px solid #20808D;
    border-radius: 6px;
    background: transparent;
    color: #20808D;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.cap-filter-chip:hover {
    background: rgba(32, 128, 141, 0.08);
}

.cap-filter-chip[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .model-caps {
        gap: 2px;
    }
    .cap-btn {
        width: 24px;
        height: 24px;
    }
    .cap-btn svg {
        width: 13px;
        height: 13px;
    }
}

/* ==================== ИНДИКАТОР ЗАПОЛНЕНИЯ ОКНА ==================== */
/* Прямоугольная шкала в начале строки управления: заливается слева направо
   на долю окна контекста (--p, 0..100) и по мере заполнения меняет цвет от
   зелёного к красному. Долю считает и пишет в подсказку paintTokenIndicator
   в script.js. */

.token-counter {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* Шкала стоит первой в строке и прижата к левому краю — остальные
       элементы .node-controls остаются у правого края. */
    order: -1;
    margin-right: auto;
    /* Встаёт ровно под рядом кнопок цвета узла и совпадает с ним по длине:
       тот же отступ слева и та же ширина — кнопки, зазоры между ними и их
       число (его проставляет renderNode из NODE_COLORS.length; 8 — запасное). */
    margin-left: var(--node-color-pad-x);
    width: calc(var(--node-color-count, 8) * var(--node-color-btn-w)
                + (var(--node-color-count, 8) - 1) * var(--node-color-gap));
    height: 24px;
    padding: 0;
    color: #64748b;
    /* Щелчок открывает окно «Что видит модель» (openContextInspector). */
    cursor: pointer;
}

.token-counter:focus-visible {
    outline: 2px solid rgba(19, 52, 59, 0.35);
    outline-offset: 2px;
    border-radius: 3px;
}

.token-bar {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 10px;
    border: 1px solid rgba(19, 52, 59, 0.18);
    border-radius: 3px;
    background: #f1f5f9;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

/* Заливка: градиент нарисован на всю ширину шкалы, а показана только его
   левая часть — clip-path обрезает её по доле окна. Поэтому цвет у края
   заливки отвечает ровно заполнению: зелёный → жёлтый → красный. */
.token-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #16a34a 0%, #65a30d 30%, #eab308 55%, #f59e0b 75%, #dc2626 100%);
    clip-path: inset(0 calc(100% - var(--p, 0) * 1%) 0 0);
    transition: clip-path 0.3s ease;
}

.token-counter:hover .token-bar {
    border-color: rgba(19, 52, 59, 0.38);
}

.token-counter.token-warning {
    color: #dd6b20;
}

.token-counter.token-danger {
    color: #dc2626;
}

.token-counter.token-warning .token-bar {
    border-color: rgba(221, 107, 32, 0.55);
}

.token-counter.token-danger .token-bar {
    border-color: rgba(220, 38, 38, 0.6);
}

/* ==================== СЧЕТЧИК СТОИМОСТИ ==================== */

.model-price {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: transparent;
    color: #4a5568;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
}

/* Цветовая кодировка по стоимости */
.model-price.price-cheap {
    color: #48bb78;
}

.model-price.price-medium {
    color: #ed8936;
}

.model-price.price-expensive {
    color: #f56565;
}

.model-price.price-very-expensive {
    color: #dc2626;
    font-weight: 600;
}

.model-price.price-unknown {
    color: #718096;
    opacity: 0.8;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .model-price {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

.context-toggle {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    color: #718096;
}

.context-toggle.shared {
    color: #48bb78;
}

.context-toggle:hover {
    background: rgba(113, 128, 150, 0.1);
}

.context-toggle.shared:hover {
    background: rgba(72, 187, 120, 0.1);
}

.model-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    background: white;
    color: #4a5568;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    max-width: 200px;
    width: 220px;
    height: 28px; /* Фиксированная высота для предотвращения скачков */
    line-height: 1.2;
    box-sizing: border-box; /* Важно для корректного расчета размеров */
}

.model-select:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.2);
}

.model-select:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}

/* Размеры ряда кнопок цвета вынесены в переменные: по ним же считается ширина
   шкалы заполнения окна, которая стоит ровно под этим рядом (см. .token-counter). */
:root {
    --node-color-btn-w: 14px;
    --node-color-gap: 5px;
    --node-color-pad-x: 8px;
}

.node-color-row {
    display: flex;
    align-items: center;
    gap: var(--node-color-gap);
    padding: 0 var(--node-color-pad-x) 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dialog-node:hover .node-color-row {
    opacity: 1;
}

.node-color-btn {
    width: var(--node-color-btn-w);
    height: 4px;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    background: var(--dot-color);
    transition: transform 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
    flex-shrink: 0;
}

.node-color-btn:hover {
    transform: scaleY(1.6);
    box-shadow: 0 0 0 1px rgba(19, 52, 59, 0.20);
}

.node-color-btn.color-active {
    transform: scaleY(1.6);
    box-shadow: 0 0 0 1.5px rgba(19, 52, 59, 0.45);
}

.node-color-btn.color-active:hover {
    transform: scaleY(1.8);
}

.node-menu {
    position: relative;
}

/* Удаляем старую кнопку меню */
.node-menu-btn {
    display: none;
}

/* ==================== СООБЩЕНИЯ ==================== */

/* Обёртка для области сообщений и кнопки структуры */
.node-messages-wrapper {
    flex: 1;
    position: relative;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    grid-row: 2; /* Занимает вторую строку в grid-контейнере .dialog-node */
}

.node-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem 1rem 1rem;
    margin-top: 1px; /* Отступ для предотвращения перекрытия границы заголовка */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 200px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid transparent; /* Прозрачная граница для лучшего разделения */
    position: relative; /* Для абсолютного позиционирования typing-indicator */
}

.node-messages::-webkit-scrollbar {
    width: 8px;
}

.node-messages::-webkit-scrollbar-track {
    background: #f3f3f3;
    border-radius: 4px;
}

.node-messages::-webkit-scrollbar-thumb {
    background: #cdcdcb;
    border-radius: 4px;
}

.node-messages::-webkit-scrollbar-thumb:hover {
    background: #9b9b9b;
}

.message {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
    animation: messageSlideIn 0.3s ease-out;
    align-items: flex-start; /* Предотвращает растягивание дочерних элементов по высоте */
}

.message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message.assistant {
    align-self: flex-start;
    position: relative; /* ��� ���������������� ������ �������������� */
}

/* ������ ��� ������ �������������� */
.message.assistant .message-content {
    padding-right: 40px; /* ����� ��� ������ �������������� */
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.message-avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-right: 0.75rem;
}

.message-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    width: auto;
    height: 24px;
    padding: 4px 8px;
    background: rgba(19, 52, 59, 0.05);
    border: none;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(19, 52, 59, 0.6);
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

.message.user .message-avatar {
    background: rgba(32, 128, 141, 0.12);
    color: #20808D;
    margin-right: 0;
}

.message.assistant .message-avatar,
.message.system .message-avatar {
    margin-right: 0.75rem;
    margin-top: 0.25rem;
}

.delete-pair-btn {
    width: 100%;
    height: 18px;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.message.user:hover .delete-pair-btn {
    opacity: 1;
}

.delete-pair-btn:hover {
    color: #ef4444;
    transform: scale(1.1);
}

/* Копирование и удаление пары — одним рядом под подписью «Вы», по ширине подписи. */
.pair-actions {
    display: flex;
    justify-content: center;
    gap: 3px;
    width: 100%;
}

.pair-actions .delete-pair-btn {
    width: 14px;
    height: 16px;
    flex: 0 0 auto;
}

/* Копирование пары «вопрос — ответ» — рядом с корзиной, тот же вид, свой цвет. */
.copy-pair-btn:hover {
    color: #20808D;
}

.copy-pair-btn.sn-confirmed {
    opacity: 1;
    color: #20808D;
    font-size: 12px;
}

.delete-pair-btn:active {
    transform: scale(0.95);
}

.delete-pair-btn svg {
    transition: transform 0.2s ease;
}

/* Кнопка удаления одиночного assistant-сообщения с ошибкой */
.delete-error-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    padding: 0;
    border-radius: 6px;
    z-index: 10;
}

.message.assistant.is-error .message-content {
    position: relative;
    padding-right: 44px;
    border-left: 3px solid #ef4444;
}

.delete-error-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #b91c1c;
    transform: scale(1.08);
}

.delete-error-btn:active {
    transform: scale(0.95);
}

.delete-error-btn svg {
    transition: transform 0.2s ease;
}


/* Мягкий чат: пузыри без контура, приглушённые тона палитры (бирюза #20808D,
   плашки rgba(19,52,59,…)), скругление 7px — как у кнопок. */
.message-content {
    background: #f6f8f8;
    padding: 0.85rem 1.15rem;
    border-radius: 7px;
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: text;
    user-select: text;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: hidden; /* Убирает скролл - контент растягивает контейнер автоматически */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    position: relative;
    max-width: 100%;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.message.user .message-content {
    background: #e7f2f3;
    color: #13343B;
}

.message-content:hover {
    background: #f1f4f4;
}

.message.user .message-content:hover {
    background: #dcecee;
}

/* Компактная ссылка в сообщении пользователя: текст "ссылка..." вместо длинного URL.
   Полный адрес — в href и title (видно при наведении), сообщение остаётся читаемым. */
.message.user .message-content .user-msg-link {
    color: #20808D;
    background: rgba(32, 128, 141, 0.10);
    padding: 1px 6px;
    border-radius: 4px;
    text-decoration: underline;
    text-decoration-color: rgba(32, 128, 141, 0.45);
    text-underline-offset: 2px;
    font-weight: 500;
    word-break: keep-all;
    white-space: nowrap;
}
.message.user .message-content .user-msg-link:hover {
    background: rgba(32, 128, 141, 0.18);
    text-decoration-color: #20808D;
}

/* ════════════════════════════════════════════════════════════════════════════
   🎯 ИНДИКАТОР ИСПОЛЬЗОВАННОЙ МОДЕЛИ
   ════════════════════════════════════════════════════════════════════════════ */
.message-model-info {
    font-size: 0.7rem;
    color: #9ca3af;
    text-align: right;
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(156, 163, 175, 0.2);
    font-style: italic;
}

/* Ответ, собранный платформой по записи хода (Этап 3 ТЗ «Ход как запись»):
   модель не вызывалась и денег не стоило. Отличаем спокойным синим — это не
   тревога и не ошибка, а другой автор ответа. */
.message-model-info--platform {
    color: #1D6A8C;
    font-style: normal;
}

/* ════════════════════════════════════════════════════════════════════════════
   CLARIFY CARD — карточка уточняющего вопроса (Авто / Авто · max), Perplexity style
   См. Docs/PERPLEXITY_STYLE_GUIDE.md и .github/instructions/ui_style.instructions.md.
   2026-09-10 (просьба заказчика): без своей заливки и рамки внутри пузыря ответа —
   «коробка в коробке» была перебором; кнопки без контура, скругление не больше 7px
   (решение заказчика сильнее pill-правила гайда); цвета — палитра приложения.
   ════════════════════════════════════════════════════════════════════════════ */
.clarify-card {
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
}
.clarify-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(19, 52, 59, 0.62);
    margin-bottom: 6px;
}
.clarify-card-header svg {
    color: #20808D;
    flex-shrink: 0;
}
.clarify-card-question {
    font-size: 15px;
    line-height: 1.5;
    color: inherit;
    margin-bottom: 10px;
}
.clarify-card-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
/* ВАРИАНТ УТОЧНЕНИЯ — АКТИВНЫЙ ТЕКСТ, А НЕ КНОПКА (решение владельца 24.09).
   «Мне не нравится кнопками, текст должен быть активным для выбора — при нажатии
   выбор может быть множественным». Поэтому ни заливки, ни рамки в покое: подчёркнут
   пунктиром, как обычная подсказка-ссылка. Отмеченный получает галочку и заливку —
   иначе множественный выбор не видно. Кнопочные правила ниже сохранены: разметка
   `.clarify-option-btn` могла остаться в сообщениях, сохранённых до правки. */
.clarify-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 7px;
    color: #13343B;
    /* Шрифт — в паре с вариантом листа AI Эксперта (form-sheet.css, стенд sheet_stand) */
    font: 500 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    border-bottom: 1px dashed rgba(19, 52, 59, 0.35);
    transition: background 150ms ease, color 150ms ease;
    user-select: none;
}
.clarify-option:hover {
    color: #20808D;
    background: rgba(19, 52, 59, 0.05);
    border-bottom-color: #20808D;
}
.clarify-option.is-picked {
    color: #13343B;
    background: rgba(31, 184, 205, 0.14);
    border-bottom-color: transparent;
}
/* Галочка — у отмеченного, чтобы выбор читался и без цвета. */
.clarify-option.is-picked::before {
    content: '✓';
    font-size: 12px;
    line-height: 1;
    color: #1FB8CD;
}
.clarify-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}
.clarify-card-hint {
    font-size: 11px;
    line-height: 1.3;
    color: rgba(19, 52, 59, 0.45);
    margin: -2px 0 2px;
}

.clarify-option-btn {
    background: rgba(19, 52, 59, 0.05);
    border: none;
    color: #13343B;
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    font: 500 13px/1 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.clarify-option-btn:hover {
    background: rgba(19, 52, 59, 0.09);
    color: #20808D;
}
.clarify-option-btn:active {
    background: rgba(31, 184, 205, 0.12);
    color: #1FB8CD;
    transform: scale(0.97);
}
.clarify-option-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}
.clarify-card-freeform {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}
.clarify-card-input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid rgba(19, 52, 59, 0.10);
    background: transparent;
    color: #13343B;
    font: 400 14px/1.4 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.clarify-card-input::placeholder {
    color: rgba(19, 52, 59, 0.45);
}
.clarify-card-input:focus {
    border-color: #1FB8CD;
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.18);
}
/* Автозаполнение браузера не должно красить поле своим фоном. */
.clarify-card-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    -webkit-text-fill-color: #13343B;
    transition: background-color 9999s ease-out 0s;
}
.clarify-card-send {
    height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    background: transparent;
    color: #20808D;
    border: none;
    font: 500 13px/1 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.clarify-card-send:hover {
    background: rgba(31, 184, 205, 0.08);
    color: #1FB8CD;
}
.clarify-card-send:active {
    background: rgba(31, 184, 205, 0.12);
    transform: scale(0.97);
}
.clarify-card-send:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

/* ОТВЕЧЕННАЯ КАРТОЧКА (просьба владельца 07.10): ответ виден так же, как в окне вопросов
   агента — вопрос, все варианты списком, выбранные отмечены кружком, остальные приглушены.
   Без заливки и рамки — палитра и правила карточки выше. */
.clarify-answered {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.clarify-answered-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    color: rgba(19, 52, 59, 0.40);
}
.clarify-answered-opt.is-picked {
    color: #13343B;
}
.clarify-answered-mark {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid rgba(19, 52, 59, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.clarify-answered-opt.is-picked .clarify-answered-mark {
    border-color: #20808D;
}
.clarify-answered-opt.is-picked .clarify-answered-mark::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20808D;
}
.clarify-answered-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.clarify-answered-label {
    font-size: 11px;
    line-height: 1.3;
    color: rgba(19, 52, 59, 0.55);
}
.clarify-answered-title {
    font: 500 14px/1.4 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    overflow-wrap: anywhere;
}
.clarify-answered-opt.is-picked .clarify-answered-title {
    font-weight: 600;
}
.clarify-answered-desc {
    font-size: 13px;
    line-height: 1.4;
    margin-top: 1px;
}
.clarify-answered-opt.is-picked .clarify-answered-desc {
    color: rgba(19, 52, 59, 0.68);
}
.clarify-card.is-skipped .clarify-card-question {
    color: rgba(19, 52, 59, 0.62);
}

/* Кнопка копирования текста */
/* Один строй с «Переспросить в облаке» и «Проверить по источникам»: тонкая иконка без рамки
   и заливки, тот же цвет и то же поведение при наведении (приёмка 22.09, Этап 3 шаг 7). */
.copy-btn {
    position: absolute;
    bottom: 6px;
    right: 8px;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #8a8f98;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    z-index: 10;
}

.message:hover .copy-btn {
    opacity: 0.7;
}

.copy-btn:hover {
    opacity: 1;
    color: #20B8CD;
}

.copy-btn:active {
    transform: scale(0.95);
}

.copy-btn.copied {
    background: rgba(72, 187, 120, 0.1);
    border-color: #48bb78;
    color: #48bb78;
}

.copy-btn.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.copy-btn svg {
    transition: transform 0.2s ease;
}

.copy-btn:hover svg {
    transform: scale(1.1);
}

/* Кнопка редактирования сообщения */
.edit-btn {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 1px;
    height: 1px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(237, 137, 54, 0.2);
    border-radius: 6px;
    color: #4a5568;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    backdrop-filter: blur(4px);
    z-index: 10;
}

.message.user:hover .edit-btn {
    opacity: 1;
}

.edit-btn:hover {
    background: rgba(237, 137, 54, 0.1);
    border-color: #ed8936;
    color: #ed8936;
    transform: scale(1.05);
}

.edit-btn:active {
    transform: scale(0.95);
}

.edit-btn svg {
    transition: transform 0.2s ease;
}

.edit-btn:hover svg {
    transform: scale(1.1);
}

/* Стили для режима редактирования */
.message-edit-input {
    width: 100% !important;
    min-height: 80px !important;
    padding: 0.75rem !important;
    border: 2px solid #3182ce !important;
    border-radius: 5px !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    resize: vertical !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1) !important;
    outline: none !important;
    color: #2d3748 !important;
    box-sizing: border-box !important;
}

.message-edit-input:focus {
    border-color: #2c5282 !important;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2) !important;
}

.edit-controls {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    justify-content: flex-start !important;
}

.edit-cancel-btn {
    width: 15px;
    height: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: white;
    color: #dc2626;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    padding: 0;
}

.edit-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #dc2626;
    transform: scale(1.1);
}

.edit-cancel-btn:active {
    transform: scale(0.95);
}

.edit-save-btn {
    width: 15px;
    height: 15px;
    border: 1px solid #48bb78;
    border-radius: 50%;
    background: #48bb78;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    padding: 0;
}

.edit-save-btn:hover {
    background: #38a169;
    border-color: #38a169;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
}

.edit-save-btn:active {
    transform: scale(0.95);
}

.edit-save-btn::before {
    content: '✓';
}

/* Улучшенное отображение сообщения пользователя для редактирования */
.message.user .message-content {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    position: relative;
}

.message.user .message-content:hover {
    background: #dcecee;
}



.message.user .message-content:hover::before {
    opacity: 1;
}

.message.user .message-content::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    background: rgba(32, 128, 141, 0.12);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='%2320808D'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
}

.message.user .message-content:hover::after {
    opacity: 1;
}

/* Скрываем подсказку на мобильных устройствах */
@media (max-width: 768px) {
    .message.user .message-content::before {
        display: none;
    }
}

.message:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background: rgba(49, 130, 206, 0.1);
    border-color: #3182ce;
    color: #3182ce;
    transform: scale(1.05);
}

.copy-btn:active {
    transform: scale(0.95);
}

.copy-btn.copied {
    background: rgba(72, 187, 120, 0.1);
    border-color: #48bb78;
    color: #48bb78;
}

.copy-btn.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.copy-btn svg {
    transition: transform 0.2s ease;
}

.copy-btn:hover svg {
    transform: scale(1.1);
}

/* Уведомление о копировании */
.copy-notification {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: #2d3748;
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    opacity: 0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
    z-index: 1001;
    max-width: 300px;
    word-wrap: break-word;
}

.copy-notification.success {
    background: #48bb78;
    border: 1px solid #38a169;
}

.copy-notification.error {
    background: #e53e3e;
    border: 1px solid #c53030;
}

.copy-notification.show {
    transform: translateX(0);
    opacity: 1;
}

/* УЛУЧШЕННАЯ ПОДСВЕТКА ИСХОДНОГО ТЕКСТА */
.message-content.highlighted {
    background: #fef5e7 !important;
    border: 2px solid #ed8936 !important;
    box-shadow: 0 0 0 4px rgba(237, 137, 54, 0.2), 0 0 20px rgba(237, 137, 54, 0.1);
    transform: translateY(-2px);
    z-index: 100;
    position: relative;
}

.message.user .message-content.highlighted {
    background: #fef5e7 !important;
    color: #13343B !important;
    border-color: #ed8936 !important;
}

.message-content.pulse {
    animation: highlightPulse 1s ease-in-out 2;
}

@keyframes highlightPulse {
    0%, 100% { 
        background: #fef5e7;
        transform: translateY(-2px);
    }
    50% { 
        background: #fed7aa;
        transform: translateY(-4px);
    }
}

/* ==================== ИНДИКАТОР ПЕЧАТИ — ПЕРЕЕХАЛ ====================
 *
 * Карточка показа хода (.typing-indicator), список шагов (.agent-timeline,
 * .at-*) и свёрнутый след под ответом (.agent-steps-*) живут в отдельном файле
 * [turn-timeline.css](turn-timeline.css) — ТЗ «Единый таймлайн хода в чате»
 * (2026-09-23), T1.1. Здесь их НЕТ намеренно: оставь оформление в двух местах,
 * и оно разъедется на первой же правке.
 *
 * Подключение — в app.html, рядом со style.css. Живой предпросмотр потока
 * (.stream-preview) остался в этом файле: это текст ответа, а не шаг хода.
 * ==================== */

/* ==================== ПОЛЕ ВВОДА ==================== */

.node-input {
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    background: white;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    grid-row: 4;
    /* Убираем min-height и transition, которые вызывали проблему */
}

.input-container {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    position: relative;
    z-index: 10;
}

.message-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    resize: none;
    font-size: 0.95rem;
    line-height: 1.4;
    min-height: 44px; /* Минимальная высота (примерно 3 строки) */
    max-height: 140px; /* Максимальная высота (примерно 10 строк) */
    height: 44px; /* Начальная высота */
    font-family: inherit;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    background: #f7fafc;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    overflow-y: auto; /* Добавляем скролл если текст не помещается */
}

.message-input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
    background: white;
}

.message-input::placeholder {
    color: #a0aec0;
}

.send-btn {
    width: 44px;
    min-height: 24px;
    flex: 1;
    border: none;
    border-radius: 5px;
    background: var(--node-primary-color, #3182ce);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    flex-shrink: 0;
}

.send-btn:hover {
    background: var(--node-border-color, #2c5282);
    transform: translateY(-1px);
}

.send-btn:active {
    transform: translateY(0);
}

.send-btn:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
    transform: none;
}

/* Режим «стоп»: во время генерации кнопка отправки превращается в отмену запроса */
.send-btn.stop-mode {
    background: #e53e3e;
}

.send-btn.stop-mode:hover {
    background: #c53030;
}

/* ==================== СВЯЗИ МЕЖДУ УЗЛАМИ ==================== */

.connections-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 18000px;
    min-height: 18000px;
    pointer-events: none;
    z-index: 0; /* Изменено с 1 на 0 - теперь линии будут под узлами */
    transform-origin: 0 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    shape-rendering: geometricPrecision;
    will-change: transform;
}

.connection-line {
    stroke: var(--connection-color, #3182ce);
    stroke-width: 2;
    fill: none;
    opacity: 0.6;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, height 0.15s ease, left 0.15s ease, top 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
}

.connection-line:hover {
    stroke-width: 3;
    opacity: 1;
}

.connection-line.highlighted {
    stroke: #ed8936;
    stroke-width: 3;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(237, 137, 54, 0.3));
    animation: connectionPulse 2s ease-in-out infinite;
}

@keyframes connectionPulse {
    0%, 100% { 
        stroke-width: 3;
        opacity: 1;
    }
    50% { 
        stroke-width: 4;
        opacity: 0.8;
    }
}

.connection-line.shared {
    stroke: var(--connection-color, #48bb78);
    stroke-dasharray: none;
}

.connection-line.isolated {
    stroke: var(--connection-color, #718096);
    stroke-dasharray: 8,4;
    stroke-width: 2;
}

.connection-line.new {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawConnection 0.8s ease-out forwards;
}

@keyframes drawConnection {
    0% {
        stroke-dashoffset: 1000;
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
}

/* ==================== TOOLTIP ДЛЯ ВЫДЕЛЕНИЯ ==================== */

.selection-tooltip {
    position: fixed;
    background: #ffffff;
    color: #2d3748;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    z-index: 999999 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    max-width: 300px;
    display: none;
    pointer-events: none;
    animation: tooltipSlideIn 0.2s ease-out;
    border: 1px solid #e2e8f0;
}

/* Кнопка закрытия тултипа */
.tooltip-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #a0aec0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}

.tooltip-close-btn:hover {
    color: #4a5568;
    background: #f7fafc;
}

.tooltip-close-btn svg {
    width: 12px;
    height: 12px;
}

@keyframes tooltipSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.selection-tooltip.show {
    display: block !important;
    pointer-events: auto !important;
}

/* Принудительно включаем клики для всех дочерних элементов тултипа */
.selection-tooltip.show * {
    pointer-events: auto !important;
}

.tooltip-preview {
    margin-bottom: 0;
    padding-right: 20px; /* Место для кнопки закрытия */
    font-size: 0.78rem;
    color: #64748b;
    font-style: normal;
    border-left: 2px solid #3182ce;
    padding-left: 8px;
    line-height: 1.4;
    word-wrap: break-word;
    max-height: 60px;
    overflow: hidden;
}

.tooltip-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
    margin-top: 10px;
}

/* Кнопки тултипа — простой стиль */
.tooltip-btn {
    flex: 1;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-align: center;
    background: #f7fafc;
    color: #2d3748;
    white-space: nowrap;
}

.tooltip-btn:hover {
    background: #edf2f7;
    color: #1a202c;
}

.tooltip-btn:active {
    background: #e2e8f0;
}

/* Кнопка создания ветви — синий акцент */
.fork-btn {
    background: #ebf8ff;
    color: #2b6cb0;
}

.fork-btn:hover {
    background: #bee3f8;
    color: #2c5282;
}

/* Кнопка добавления в заметки — зелёный акцент */
.selection-tooltip .tooltip-btn.add-note-btn {
    background: #f0fff4;
    color: #276749;
}

.selection-tooltip .tooltip-btn.add-note-btn:hover {
    background: #c6f6d5;
    color: #22543d;
    transform: none;
    box-shadow: none;
}

/* ==================== МОДАЛЬНЫЕ ОКНА ==================== */

.modal-overlay {
    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;
    /* Должен быть выше .chat-page (1500) и .node-fullscreen-css (1500),
     * иначе в режиме чата/полного экрана модалки уходят под рабочую область. */
    z-index: 2000;
    backdrop-filter: blur(4px);
}

.modal-overlay.show {
    display: flex;
}

.modal {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: modalSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 800px;
    width: 95%;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
}

.modal-content {
    padding: 0;
    /* Контент модального окна */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #718096;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: #f7fafc;
    color: #2d3748;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    background: white;
    color: #2d3748;
}

.form-input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-input::placeholder {
    color: #a0aec0;
}

.form-help {
    font-size: 0.8rem;
    color: #718096;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.form-help a {
    color: #3182ce;
    text-decoration: none;
}

.form-help a:hover {
    text-decoration: underline;
}

/* ==================== НАСТРОЙКИ МОДЕЛИ (mc-modal) ==================== */

/* Оверлей */
.mc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.18);
    display: none;
    align-items: center;
    justify-content: center;
    /* Должен быть выше .chat-page (1500) и .node-fullscreen-css (1500). */
    z-index: 2000;
    backdrop-filter: blur(2px);
}

.mc-modal-overlay.show {
    display: flex;
}

/* Модальное окно */
.mc-modal {
    background: #ffffff;
    border-radius: 12px;
    width: 92%;
    max-width: 1080px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(100, 116, 139, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    animation: mcModalSlideIn 0.2s ease-out;
}

@keyframes mcModalSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Заголовок */
.mc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
    flex-shrink: 0;
}

.mc-modal-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-modal-header-icon {
    flex-shrink: 0;
}

.mc-modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.01em;
}

.mc-modal-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, height 0.15s ease, left 0.15s ease, top 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.mc-modal-icon-btn:hover {
    background: rgba(100, 116, 139, 0.08);
    color: #475569;
}

.mc-modal-icon-btn svg {
    stroke: currentColor;
}

/* Тело модального окна */
.mc-modal-body {
    flex: 1;
    padding: 16px 18px;
    overflow-y: auto;
}

.mc-modal-body::-webkit-scrollbar {
    width: 5px;
}

.mc-modal-body::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.15);
    border-radius: 3px;
}

.mc-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.25);
}

/* Секция */
.mc-section {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.08);
}

.mc-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mc-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.mc-section-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Группа полей */
.mc-form-group {
    margin-bottom: 0;
}

.mc-dual-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.mc-control-card {
    padding: 10px;
    border: 1px solid rgba(100, 116, 139, 0.12);
    border-radius: 10px;
    background: #fbfdff;
}

.mc-form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 6px;
}

.mc-form-note {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 2px;
}

.mc-form-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.5;
    box-sizing: border-box;
}

.mc-form-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    background: #fff;
}

.mc-form-textarea::placeholder {
    color: #94a3b8;
}

.mc-form-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
    line-height: 1.4;
}

/* Поле точного ввода в настройках узла (T2.6 — порог сжатия в токенах) */
.mc-form-input {
    padding: 6px 8px;
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.mc-form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    background: #fff;
}

/* Слайдер температуры */
.mc-slider-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.mc-slider-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #3b82f6;
    min-width: 28px;
    text-align: right;
}

.mc-form-range {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: 4px;
}

.mc-form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, height 0.15s ease, left 0.15s ease, top 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}

.mc-form-range::-webkit-slider-thumb:hover {
    background: #2563eb;
    transform: scale(1.15);
}

.mc-form-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}

.mc-temp-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #94a3b8;
}

/* Загрузка файлов */
.mc-file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 1.5px dashed rgba(100, 116, 139, 0.25);
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, height 0.15s ease, left 0.15s ease, top 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
    background: #f8fafc;
}

.mc-file-upload:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.03);
}

.mc-file-upload.dragover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.mc-upload-text {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.4;
}

.mc-upload-text strong {
    color: #1e293b;
    font-weight: 600;
}

.mc-upload-formats {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Элемент файла */
.mc-modal-overlay .uploaded-files {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mc-modal-overlay .file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid rgba(100, 116, 139, 0.1);
    border-radius: 6px;
    font-size: 0.82rem;
}

.mc-modal-overlay .file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.mc-modal-overlay .file-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.mc-modal-overlay .file-name {
    font-weight: 500;
    color: #1e293b;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-modal-overlay .file-size {
    font-size: 0.72rem;
    color: #94a3b8;
}

.mc-modal-overlay .file-remove {
    background: none;
    color: #94a3b8;
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, height 0.15s ease, left 0.15s ease, top 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}

.mc-modal-overlay .file-remove:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

/* Футер модального окна */
.mc-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 18px;
    border-top: 1px solid rgba(100, 116, 139, 0.1);
    flex-shrink: 0;
}

.mc-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, height 0.15s ease, left 0.15s ease, top 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
    border: 1px solid transparent;
    font-family: inherit;
}

.mc-btn-secondary {
    background: transparent;
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.2);
}

.mc-btn-secondary:hover {
    background: rgba(100, 116, 139, 0.06);
    border-color: rgba(100, 116, 139, 0.3);
}

.mc-btn-primary {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.mc-btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

/* Шаблоны промптов внутри mc-modal */
.mc-modal-overlay .prompt-templates {
    margin-top: 8px;
}

.mc-modal-overlay .prompt-templates-title {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 4px;
}

.mc-modal-overlay .prompt-templates-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 100px;
    overflow-y: auto;
}

.mc-modal-overlay .prompt-template-item {
    padding: 3px 8px;
    background: rgba(100, 116, 139, 0.06);
    border: 1px solid rgba(100, 116, 139, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, height 0.15s ease, left 0.15s ease, top 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
    font-size: 0.72rem;
    white-space: nowrap;
    color: #475569;
}

.mc-modal-overlay .prompt-template-item:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* mc-modal: мобильная адаптация */
@media (max-width: 480px) {
    .mc-modal {
        width: 98%;
        max-height: 90vh;
        border-radius: 10px;
    }
    .mc-modal-header { padding: 12px 14px; }
    .mc-modal-body { padding: 12px 14px; }
    .mc-modal-footer { padding: 10px 14px; }
    .mc-form-textarea { font-size: 0.8rem; }
    .mc-dual-controls { grid-template-columns: 1fr; }
}

/* Старые стили настроек модели (совместимость) */

.config-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.config-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: #3182ce;
    border-radius: 2px;
}

.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    background: white;
    color: #2d3748;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
}

.form-textarea:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-range {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-range::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3182ce;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(49, 130, 206, 0.3);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
}

.form-range::-webkit-slider-thumb:hover {
    background: #2c5282;
    transform: scale(1.1);
}

.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #3182ce;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(49, 130, 206, 0.3);
}

/* ==================== ЗАГРУЗКА ФАЙЛОВ ==================== */

.file-upload-area {
    border: 2px dashed #cbd5e0;
    border-radius: 5px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    background: #f7fafc;
}

.file-upload-area:hover {
    border-color: #3182ce;
    background: #ebf8ff;
}

.file-upload-area.dragover {
    border-color: #3182ce;
    background: #ebf8ff;
    transform: scale(1.02);
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.upload-text {
    color: #4a5568;
    line-height: 1.6;
}

.upload-text strong {
    color: #2d3748;
    font-weight: 600;
}

.upload-text small {
    color: #718096;
    font-size: 0.85rem;
}

.uploaded-files {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.file-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.file-details {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-weight: 500;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 0.8rem;
    color: #718096;
}

.file-remove {
    background: #fed7d7;
    color: #e53e3e;
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, height 0.2s ease, left 0.2s ease, top 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
}

.file-remove:hover {
    background: #feb2b2;
    color: #c53030;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

/* ==================== СИСТЕМА МАСШТАБИРОВАНИЯ (Perplexity style) ==================== */
/* Палитра: Offblack #13343B, True Turquoise #20808D / #1FB8CD, без бордеров,
   pill-радиус, hover — subtle alpha-фон, focus — turquoise glow.
   См. Docs/PERPLEXITY_STYLE_GUIDE.md */

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #13343B;
    border-left: none;
    padding-left: 1rem;
    margin-left: 5px;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
}

.zoom-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex: none;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: rgba(19, 52, 59, 0.62);
    cursor: pointer;
    font-size: 0.8rem;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
    box-shadow: none;
}

.zoom-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

/* Кнопка "Открыть rBase" — текстовая, поэтому фон прямоугольный по ширине текста,
   а не круглый как у иконочных zoom-btn. */
#rbaseOpenToolbarBtn {
    width: auto;
    padding: 0 10px;
    border-radius: 8px;
}

.zoom-btn:active {
    background: rgba(31, 184, 205, 0.12);
    color: #1FB8CD;
    transform: scale(0.96);
}

.zoom-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

.zoom-btn:disabled {
    background: transparent;
    color: rgba(19, 52, 59, 0.30);
    cursor: not-allowed;
}

.zoom-level {
    font-weight: 500;
    color: #13343B;
    min-width: 48px;
    text-align: center;
    font-size: 0.85rem;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    background: rgba(19, 52, 59, 0.04);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    border: none;
}

@keyframes zoomPulse {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.05); 
    }
}

.zoom-level.updating {
    animation: zoomPulse 0.3s ease-in-out;
}

.tree-canvas::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.tree-canvas::-webkit-scrollbar-track {
    background: #f3f3f3;
    border-radius: 6px;
}

.tree-canvas::-webkit-scrollbar-thumb {
    background: #cdcdcb;
    border-radius: 6px;
    border: 2px solid #f3f3f3;
}

.tree-canvas::-webkit-scrollbar-thumb:hover {
    background: #9b9b9b;
}

.tree-canvas::-webkit-scrollbar-corner {
    background: #f3f3f3;
}

/* ==================== ФОРМАТИРОВАНИЕ ОТВЕТОВ ИИ ==================== */

.message-content p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.message-content p:first-child {
    margin-top: 0;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.message-content strong {
    font-weight: 600;
    color: inherit;
}

.message-content em {
    font-style: italic;
    color: inherit;
}

.message-content code {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.9em;
    color: inherit;
}

.message.user .message-content code {
    background: rgba(19, 52, 59, 0.07);
}

.message-content pre {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    border-radius: 6px;
    margin: 0.5rem 0;
    overflow-x: auto;
    border-left: 3px solid rgba(49, 130, 206, 0.5);
}

.message.user .message-content pre {
    background: rgba(19, 52, 59, 0.05);
    border-left-color: rgba(32, 128, 141, 0.45);
}

.message-content pre code {
    background: none;
    padding: 0;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.85em;
    line-height: 1.4;
    color: inherit;
}

/* === Блок кода: принудительно читаемый — светлый фон + тёмный текст ===
   В дереве диалогов тёмный текст (через наследование / тему ноды) ложился на
   тёмный фон контейнера и код был не виден. Здесь жёстко (через !important)
   задаём светлый фон поля и тёмный текст — перебивает ЛЮБУЮ тему ноды,
   наследование color: inherit и порядок подключения css-файлов.
   Селектор по .code-block-container ловит блок в чате, дереве и заметках. */
/* 04.10: блок кода — одна мягкая плашка в палитре чата (без тёмной рамки,
   вложенных фонов и тени). Поле кода прозрачное: фон даёт контейнер.
   `.message-content pre` и чип инлайн-кода `.message.assistant .message-content code`
   сюда не протекают — отступ, плашка и перенос строк сброшены. */
.code-block-container .code-block,
.code-block-container pre.code-block {
    background: transparent !important;
    margin: 0 !important;
    padding: 2px 16px 14px !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0;
}

.code-block-container .code-block code {
    background: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: pre !important;
}

.code-block-container .code-block,
.code-block-container .code-block code {
    color: #13343B !important;
    -webkit-text-fill-color: #13343B !important; /* на случай, если цвет задан через text-fill */
}

/* Подсветка синтаксиса под светлый фон (если её добавят) */
.code-block-container .code-block .keyword  { color: #cf222e !important; }
.code-block-container .code-block .string   { color: #0a3069 !important; }
.code-block-container .code-block .number   { color: #0550ae !important; }
.code-block-container .code-block .comment  { color: #6e7781 !important; }
.code-block-container .code-block .function { color: #8250df !important; }
.code-block-container .code-block .class    { color: #953800 !important; }
.code-block-container .code-block .operator { color: #0550ae !important; }

.message-content br + strong {
    display: inline-block;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 1.05em;
}

.message-content {
    line-height: 1.6;
    word-spacing: 0.05em;
}

.message-content p,
.message-content pre,
.message-content strong {
    animation: fadeInText 0.3s ease-out;
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== UNIFIED MODEL-RESPONSE TYPOGRAPHY (Perplexity style) ====================
   Источник истины: Docs/PERPLEXITY_STYLE_GUIDE.md и .github/instructions/ui_style.instructions.md.
   Задача: ответы всех моделей (OpenAI / DeepSeek / GigaChat / Sber / Alibaba / Anthropic) рендерятся
   одной функцией formatAIResponse() в script.js, но классы .ai-heading.h1..h6 раньше не имели CSS,
   поэтому заголовки получали браузерные дефолты (2em/1.5em/0.67em) и каждая модель «выглядела
   по-своему». Здесь явно фиксируем шрифт, размеры, веса и палитру — строго в скоупе
   `.message.assistant .message-content`, чтобы не задеть пузырь пользователя и легаси-блоки. */

.message.assistant .message-content {
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: #13343B;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.message.assistant .message-content .ai-heading,
.message.assistant .message-content h1,
.message.assistant .message-content h2,
.message.assistant .message-content h3,
.message.assistant .message-content h4,
.message.assistant .message-content h5,
.message.assistant .message-content h6 {
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    color: #13343B;
    line-height: 1.3;
    margin: 1.2em 0 0.45em;
    letter-spacing: -0.005em;
    padding: 0;
}

.message.assistant .message-content .ai-heading:first-child,
.message.assistant .message-content h1:first-child,
.message.assistant .message-content h2:first-child,
.message.assistant .message-content h3:first-child,
.message.assistant .message-content h4:first-child,
.message.assistant .message-content h5:first-child,
.message.assistant .message-content h6:first-child {
    margin-top: 0;
}

.message.assistant .message-content .h1,
.message.assistant .message-content h1 { font-size: 22px; font-weight: 600; }
.message.assistant .message-content .h2,
.message.assistant .message-content h2 { font-size: 19px; }
.message.assistant .message-content .h3,
.message.assistant .message-content h3 { font-size: 16.5px; }
.message.assistant .message-content .h4,
.message.assistant .message-content h4 { font-size: 15px; }
.message.assistant .message-content .h5,
.message.assistant .message-content h5 {
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(19, 52, 59, 0.62);
}
.message.assistant .message-content .h6,
.message.assistant .message-content h6 {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(19, 52, 59, 0.55);
}

.message.assistant .message-content p {
    margin: 0.6em 0;
    line-height: 1.6;
    font-size: 14.5px;
}
.message.assistant .message-content p:first-child { margin-top: 0; }
.message.assistant .message-content p:last-child  { margin-bottom: 0; }

.message.assistant .message-content strong { font-weight: 600; color: inherit; }
.message.assistant .message-content em     { font-style: italic; color: inherit; }

/* Глушим легаси-эффект "<br><strong>" → псевдо-заголовок: модели, которые вместо `# heading`
   используют `**Заголовок:**`, иначе получают другой размер шрифта и ломают унификацию. */
.message.assistant .message-content br + strong {
    display: inline;
    margin: 0;
    font-size: inherit;
}

.message.assistant .message-content code {
    font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
    font-size: 0.85em;
    /* Выравнивание инлайн-кода по строке: baseline + line-height:1 убирают half-leading
       монопропорционального шрифта, из-за которого чип «всплывал» над текстом. */
    line-height: 1;
    vertical-align: baseline;
    background: rgba(19, 52, 59, 0.06);
    color: #13343B;
    padding: 0.1em 0.4em;
    border-radius: 5px;
    border: none;
    /* Длинные URL в чипе переносятся, а не распирают пузырь. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.message.assistant .message-content ul,
.message.assistant .message-content ol {
    margin: 0.5em 0;
    padding-left: 1.4em;
    line-height: 1.55;
}
.message.assistant .message-content li {
    margin: 0.2em 0;
    font-size: 14.5px;
}

.message.assistant .message-content .ai-hr {
    border: none;
    height: 1px;
    background: rgba(19, 52, 59, 0.10);
    margin: 1.2em 0;
}

/* Тёмная тема */

/* ==================== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ==================== */

.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #3182ce;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn:focus,
.context-toggle:focus,
.model-select:focus,
.color-select:focus,
.node-delete-btn:focus,
.node-config-btn:focus,
.message-input:focus,
.form-input:focus,
.form-textarea:focus,
.tooltip-btn:focus {
    outline: 2px solid #3182ce;
    outline-offset: 2px;
}

.send-btn:focus {
    outline: none;
}

::selection {
    background: rgba(49, 130, 206, 0.2);
}

::-moz-selection {
    background: rgba(49, 130, 206, 0.2);
}

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center {
    text-align: center;
}

.text-muted {
    color: #718096;
}

.text-error {
    color: #e53e3e;
}

.text-success {
    color: #38a169;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.save-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #48bb78;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.save-indicator.show {
    opacity: 1;
}

/* ==================== АДАПТИВНОСТЬ ==================== */

@media (max-width: 768px) {
    .toolbar {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .toolbar-left {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    /* В колоночной раскладке мобильного тулбара фикс-ширина логотипа не нужна */
    .app-logo {
        width: auto;
    }

    .toolbar-right {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .canvas-sidebar {
        width: 240px;
        min-width: 240px;
    }

    .sidebar-header {
        padding: 0.75rem 1rem;
    }

    .canvas-item {
        padding: 0.5rem 0.75rem;
        margin: 0.125rem 0.25rem;
    }

    .canvas-item-title {
        font-size: 0.85rem;
    }

    .canvas-item-meta {
        font-size: 0.7rem;
    }

    .dialog-node {
        width: 320px;
        min-height: 250px;
        max-height: 1300px;
    }

    .modal {
        width: 95%;
        padding: 1.5rem;
        max-height: 85vh;
    }

    .modal-large {
        max-width: 95%;
    }

    .modal-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    .config-section {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .section-title {
        font-size: 1rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-textarea {
        font-size: 0.9rem;
        padding: 0.6rem;
    }

    .modal-actions {
        margin-top: 1.5rem;
        padding-top: 1rem;
        gap: 0.75rem;
    }

    .modal-actions .btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.85rem;
    }

    .prompt-templates-list {
        gap: 6px;
    }

    .prompt-template-item {
        padding: 3px 8px;
        font-size: 0.85rem;
    }

    .zoom-controls {
        gap: 0.5rem;
        padding-left: 0.75rem;
        margin-left: 0.75rem;
    }
    
    .zoom-btn {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
    
    .zoom-level {
        font-size: 0.8rem;
        min-width: 42px;
        padding: 0.2rem 0.4rem;
    }

    /* Кнопка копирования на мобильных */
    .copy-btn {
        opacity: 1; /* Всегда видна на мобильных */
        width: 32px;
        height: 32px;
    }

    .copy-notification {
        bottom: 60px;
        right: 10px;
        left: 10px;
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .main-content {
        flex-direction: column;
    }

    .canvas-sidebar {
        width: 100%;
        min-width: 100%;
        height: 200px;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        resize: vertical;
    }

    .sidebar-header h3 {
        font-size: 0.9rem;
    }

    .canvas-list {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.5rem;
        gap: 0.5rem;
        display: flex;
    }

    .canvas-item {
        min-width: 180px;
        margin: 0;
        flex-shrink: 0;
    }

    .toolbar {
        padding: 0.75rem;
    }

    .dialog-node {
        width: 290px;
        min-height: 220px;
        max-height: 1300px;
    }

    .modal {
        padding: 1rem;
        max-height: 80vh;
    }

    .modal-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .modal-title {
        font-size: 1rem;
    }

    .config-section {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .section-title {
        font-size: 0.95rem;
    }

    .form-group {
        margin-bottom: 0.75rem;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
    }

    .form-textarea {
        font-size: 0.85rem;
        padding: 0.5rem;
        min-height: 80px;
    }

    .form-help {
        font-size: 0.75rem;
        margin-top: 0.4rem;
    }

    .modal-actions {
        margin-top: 1rem;
        padding-top: 0.75rem;
        gap: 0.5rem;
        flex-direction: column-reverse;
    }

    .modal-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }

    .file-upload-area {
        padding: 1.25rem;
    }

    .upload-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .upload-text {
        font-size: 0.85rem;
    }

    .prompt-templates {
        margin-top: 8px;
    }

    .prompt-templates-title {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }

    .prompt-templates-list {
        gap: 5px;
    }

    .prompt-template-item {
        padding: 3px 7px;
        font-size: 0.8rem;
    }

    .zoom-controls {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(19, 52, 59, 0.10);
        padding-top: 0.5rem;
    }
    
    .zoom-btn {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
    
    .zoom-level {
        font-size: 0.75rem;
        min-width: 38px;
    }

    /* Улучшенная кнопка копирования для маленьких экранов */
    .copy-btn {
        width: 36px;
        height: 36px;
        bottom: 6px;
        right: 6px;
    }

    .copy-notification {
        bottom: 40px;
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}


@media (prefers-contrast: high) {
    .dialog-node {
        border-width: 3px;
    }

    .connection-line {
        stroke-width: 3;
    }

    .btn {
        border-width: 2px;
    }

    .message-content {
        border: 1px solid #e2e8f0;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .dialog-node {
        transform: none !important;
    }

    .message {
        transform: none !important;
    }

    .tree-canvas {
        scroll-behavior: auto;
    }
}

@media print {
    .toolbar,
    .canvas-sidebar,
    .selection-tooltip,
    .modal-overlay,
    .save-indicator {
        display: none !important;
    }

    .main-content {
        flex-direction: column;
    }

    .tree-canvas {
        overflow: visible !important;
        background: none !important;
    }

    .dialog-node {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }

    .connection-line {
        stroke: #000 !important;
    }
}
/* ==================== СТИЛИ ДЛЯ ИНФОРМАЦИИ О ХРАНИЛИЩЕ ==================== */

.storage-info {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.storage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.storage-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.storage-label {
    font-weight: 500;
    color: #4a5568;
}

.storage-value {
    font-weight: 600;
    color: #2d3748;
    font-family: 'Courier New', monospace;
}

/* Цветовая индикация для размера хранилища */
.storage-value[style*="color: #e53e3e"] {
    background: rgba(239, 68, 68, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.storage-value[style*="color: #ed8936"] {
    background: rgba(237, 137, 54, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(237, 137, 54, 0.2);
}

.storage-value[style*="color: #48bb78"] {
    background: rgba(72, 187, 120, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(72, 187, 120, 0.2);
}

/* Расширенные стили для конфигурационных секций */
.config-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.config-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Иконки для разных секций */
.section-title:has-text("🔑")::before {
    content: '';
    width: 4px;
    height: 20px;
    background: #3182ce;
    border-radius: 2px;
}

.section-title:has-text("💾")::before {
    content: '';
    width: 4px;
    height: 20px;
    background: #48bb78;
    border-radius: 2px;
}

.section-title:has-text("💽")::before {
    content: '';
    width: 4px;
    height: 20px;
    background: #ed8936;
    border-radius: 2px;
}

/* Улучшенные кнопки в настройках */
.btn-danger {
    background: #fed7d7;
    color: #e53e3e;
    border: 1px solid #feb2b2;
}

.btn-danger:hover {
    background: #feb2b2;
    border-color: #fc8181;
    color: #c53030;
}

.btn-warning {
    background: #fef5e7;
    color: #ed8936;
    border: 1px solid #fbd38d;
}

.btn-warning:hover {
    background: #fbd38d;
    border-color: #f6ad55;
    color: #dd6b20;
}

/* Адаптивность для модальных окон с большим количеством контента */
@media (max-width: 768px) {
    .storage-info {
        padding: 0.75rem;
    }
    
    .storage-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .storage-value {
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1rem;
    }
    
    .config-section {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }
}

/* Темная тема для новых элементов */
/* ==================== CSS ДЛЯ ПОЛНОЭКРАННОГО РЕЖИМА ==================== */

/* Стиль для узла в полноэкранном режиме */
.node-fullscreen-active {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid var(--node-primary-color, #3182ce) !important;
    border-radius: 12px !important;
    background: white !important;
    position: absolute !important;
    z-index: 1001 !important;
}

/* Убираем переходы во время изменения размера */
.dialog-node.resizing {
    transition: none !important;
}

/* Дополнительные стили для улучшения внешнего вида в полноэкранном режиме */
.node-fullscreen-active .node-header {
    background: linear-gradient(135deg, var(--node-bg-color, #ebf8ff), white);
    border-bottom: 1px solid var(--node-border-color, #2c5282);
    border-radius: 10px 10px 0 0;
}

.node-fullscreen-active .node-messages-wrapper {
    flex: 1;
}

.node-fullscreen-active .node-messages {
    border-radius: 0;
}

.node-fullscreen-active .node-input {
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #e2e8f0;
}


/* Кнопка полноэкранного режима (absolute-вариант) */
.node-fullscreen-btn {
    position: absolute;
    top: 8px;
    right: 72px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    color: rgba(19, 52, 59, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease, opacity 150ms ease;
    opacity: 0;
    z-index: 10;
    outline: none;
}

.dialog-node:hover .node-fullscreen-btn {
    opacity: 1;
}

.node-fullscreen-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.node-fullscreen-btn:active {
    transform: scale(0.94);
}

/* Стили для узла в полноэкранном режиме */
.node-fullscreen {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid var(--node-primary-color, #3182ce) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 6px !important;
}

.node-fullscreen .node-header {
    background: linear-gradient(135deg, var(--node-bg-color, #f7fafc) 0%, #ffffff 100%) !important;
    border-bottom: 2px solid var(--node-border-color, #e2e8f0) !important;
    padding: 1rem 1.5rem !important;
}

.node-fullscreen .node-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-right: 100px !important; /* Больше отступ от кнопок в полноэкранном режиме */
}

.node-fullscreen .node-messages-wrapper {
    flex: 1 !important;
}

.node-fullscreen .node-messages {
    padding: 1.5rem !important;
    gap: 1.25rem !important;
}

.node-fullscreen .message {
    margin-bottom: 0.75rem !important;
}

.node-fullscreen .message-content {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding: 1rem 1.25rem !important;
    border-radius: 7px !important;
}

.node-fullscreen .message-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.8rem !important;
}

.node-fullscreen .node-input {
    padding: 1.25rem 1.5rem !important;
    border-top: 2px solid #e2e8f0 !important;
}

.node-fullscreen .message-input {
    padding: 1rem 1.25rem !important;
    font-size: 1rem !important;
    min-height: 50px !important;
    max-height: 120px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
}

.node-fullscreen .message-input:focus {
    border-color: var(--node-primary-color, #3182ce) !important;
    box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.1) !important;
}

.node-fullscreen .send-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
}

/* .node-fullscreen .typing-indicator — в turn-timeline.css (T1.1).
   Здесь стоял «height: 50px !important», который при статичной области шагов
   срезал бы карточку до одной строки. */

/* Кнопка полноэкранного режима в полноэкранном состоянии */
.node-fullscreen .node-fullscreen-btn {
    opacity: 1 !important;
    background: rgba(49, 130, 206, 0.15) !important;
    color: #2c5282 !important;
    font-size: 16px !important;
    width: 28px !important;
    height: 28px !important;
    right: 68px !important; /* Корректируем позицию */
}

.node-fullscreen .node-fullscreen-btn:hover {
    background: rgba(49, 130, 206, 0.25) !important;
    transform: scale(1.05) !important;
}

/* Корректировка позиций других кнопок в полноэкранном режиме */
.node-fullscreen .node-config-btn {
    right: 100px !important; /* Сдвигаем левее */
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
}

.node-fullscreen .node-delete-btn {
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
}

/* Убираем transitions во время перетаскивания */
.dialog-node.dragging {
    transition: none !important;
}

/* Убираем transitions во время изменения размера */
.dialog-node.resizing {
    transition: none !important;
}

/* Особые стили для полноэкранного режима на мобильных устройствах */
@media (max-width: 768px) {
    .node-fullscreen {
        border-radius: 5px !important;
    }
    
    .node-fullscreen .node-header {
        padding: 0.75rem 1rem !important;
    }
    
    .node-fullscreen .node-title {
        font-size: 1rem !important;
        margin-right: 80px !important;
    }
    
    .node-fullscreen .node-messages {
        padding: 1rem !important;
        gap: 1rem !important;
    }
    
    .node-fullscreen .message-content {
        font-size: 0.95rem !important;
        padding: 0.75rem 1rem !important;
        border-radius: 12px !important;
    }
    
    .node-fullscreen .node-input {
        padding: 1rem !important;
    }
    
    .node-fullscreen .message-input {
        font-size: 0.95rem !important;
        padding: 0.75rem 1rem !important;
        min-height: 44px !important;
        max-height: 100px !important;
    }
    
    .node-fullscreen .send-btn {
        width: 44px !important;
        height: 44px !important;
    }
    
    .node-fullscreen .node-fullscreen-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 14px !important;
        right: 60px !important;
    }
    
    .node-fullscreen .node-config-btn {
        width: 24px !important;
        height: 24px !important;
        right: 88px !important;
    }
    
    .node-fullscreen .node-delete-btn {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Анимация для кнопки полноэкранного режима */
@keyframes fullscreenPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.node-fullscreen-btn:hover {
    animation: fullscreenPulse 0.6s ease-in-out;
}

/* Темная тема для полноэкранного режима */
/* ==================== РЕЖИМ ЧАТА ====================
 *
 * АРХИТЕКТУРА:
 *   В режиме чата мы НЕ пытаемся перекрашивать .dialog-node поверх его
 *   canvas-разметки. Вместо этого JS собирает чистую отдельную страницу
 *   <div class="chat-page"> поверх всего и физически переносит туда живые
 *   элементы: .f-msgs вместе со scroll-обёрткой, .f-input и typing.
 *
 *   При выходе из чат-режима эти узлы возвращаются на свои места по сохранённым
 *   ссылкам на родителя/соседа.
 *
 *   Это даёт независимую, предсказуемую вёрстку без боя с inline-style от
 *   fixNodeInputPosition() и cascading-конфликтами вокруг .dialog-node.
 */

/* Кнопка переключения режима чата на шапке узла (canvas-режим) */
.node-chat-mode-btn {
    position: absolute;
    top: 8px;
    right: 104px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    color: rgba(19, 52, 59, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease, opacity 150ms ease;
    opacity: 0;
    z-index: 10;
    padding: 0;
    outline: none;
}

.dialog-node:hover .node-chat-mode-btn { opacity: 1; }

.node-chat-mode-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.node-chat-mode-btn:active { transform: scale(0.94); }

.node-chat-mode-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

.node-chat-mode-btn.active {
    color: #20808D;
    background: rgba(31, 184, 205, 0.14);
}

/* ───── Чат-страница (отдельная DOM-разметка) ─────
 *  При входе в режим чата JS строит .chat-page и переносит туда
 *  живые элементы (.node-messages-wrapper/.f-msgs, .f-input, typing).
 *  Здесь — стили только для самой страницы; перенесённые элементы
 *  получают свои перекрытия в селекторах вида `.chat-page-* > .X`.
 */
.chat-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #1f2937;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* === Верхняя панель страницы чата === */
.chat-page-bar {
    flex: 0 0 auto;
    background: #ffffff;
    border-bottom: none;
    z-index: 2;
}

.chat-page-bar-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.chat-page-title {
    flex: 0 1 auto;
    margin: 0;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    color: #13343B;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    background: transparent;
    border: 0;
    outline: none;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.chat-page-title:hover {
    background: rgba(19, 52, 59, 0.04);
}

.chat-page-title:focus {
    background: rgba(19, 52, 59, 0.04);
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.25);
}

.chat-page-spacer {
    flex: 1 1 auto;
}

.chat-page-exit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    color: rgba(19, 52, 59, 0.55);
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    line-height: 1;
    outline: none;
}

.chat-page-exit:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.chat-page-exit:active { transform: scale(0.97); }

.chat-page-exit:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

.chat-page-exit svg { display: block; }

/* === Скроллируемая область с сообщениями === */
.chat-page-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.chat-page-scroll::-webkit-scrollbar { width: 10px; }
.chat-page-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-page-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    border: 2px solid #ffffff;
    background-clip: padding-box;
}
.chat-page-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.28);
    background-clip: padding-box;
    border: 2px solid #ffffff;
}

.chat-page-content {
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px 24px 32px;
    box-sizing: border-box;
}

/* === Перенесённая в чат-страницу обёртка ленты === */
.chat-page-content > .node-messages-wrapper {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
    background: transparent !important;
    display: block !important;
}

.chat-page-content .node-messages {
    overflow: visible !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

/* Меню структуры теперь position:fixed в body, в чат-странице ничего не клипается */

/* === Нижняя панель с полем ввода === */
.chat-page-input-bar {
    flex: 0 0 auto;
    background: #ffffff;
    border-top: none;
    z-index: 2;
}

.chat-page-input-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 14px 24px 18px;
    box-sizing: border-box;
}

/* Перенесённая в инпут-бар .node-input */
.chat-page-input-inner > .node-input {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    box-shadow: none !important;
}

.chat-page-input-inner .input-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
}

.chat-page-input-inner .input-container:focus-within {
    border-color: #cbd5e0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px #cbd5e0 !important;
}

.chat-page-input-inner .message-input,
.chat-page-input-inner .message-input-with-attach,
.chat-page-input-inner .message-input:focus,
.chat-page-input-inner .message-input-with-attach:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.chat-page-input-inner .attached-files-list {
    margin-top: 8px !important;
}

/* === Скрытие canvas-окружения под чат-страницей ===
 *  ВАЖНО: исходный узел НЕ удаляем из дерева — JS-обработчики ищут элементы
 *  через `document.querySelector('#${nodeId} .X')`, поэтому перенесённые
 *  в .chat-page элементы должны оставаться descendants of nodeElement.
 *  Решение: узел-источник схлопываем до 0×0, без визуального вклада;
 *  его дочерний .chat-page отображается как position:fixed и работает.
 *
 *  .tree-area НЕ прячем, иначе display:none у предка убьёт и chat-page
 *  (position:fixed не спасает от display:none предка). Вместо этого:
 *  • прячем фон-сетку у .tree-canvas;
 *  • прячем все соседние .dialog-node;
 *  • прячем connectionsSvg.
 *  Сама .chat-page (z-index:1500) перекрывает всё визуально.
 */
body.chat-mode-active .tree-canvas {
    background: #ffffff !important;
    cursor: default !important;
}

body.chat-mode-active .tree-canvas::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

body.chat-mode-active .dialog-node:not(.chat-mode-source) {
    display: none !important;
}

body.chat-mode-active .dialog-node.chat-mode-source {
    /* Узел в DOM, но визуально отсутствует (нулевой размер, без декора) */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    /* КРИТИЧНО: на .dialog-node стоит will-change: transform, left, top.
     * Это делает узел containing block для fixed-потомков → .chat-page
     * (position:fixed) ловит контейнером сам узел и схлопывается до 0×0.
     * Снимаем will-change на время чат-режима. */
    will-change: auto !important;
    filter: none !important;
    overflow: visible !important;
    z-index: 1499 !important;
    pointer-events: none !important;
    transition: none !important;
    animation: none !important;
    display: block !important;
}

/* Прячем оставшиеся в исходном узле дочерние элементы (их мы не переносили):
 * шапка узла со стрелкой/title-row, всё с canvas-ными декорациями. */
body.chat-mode-active .dialog-node.chat-mode-source > .node-header,
body.chat-mode-active .dialog-node.chat-mode-source > .typing-indicator {
    display: none !important;
}

/* Псевдоэлементы (resize handle, drag indicator) тоже прячем */
body.chat-mode-active .dialog-node.chat-mode-source::before,
body.chat-mode-active .dialog-node.chat-mode-source::after {
    content: none !important;
    display: none !important;
}

/* .chat-page как ребёнок узла — снова делаем интерактивной */
body.chat-mode-active .dialog-node.chat-mode-source > .chat-page {
    pointer-events: auto !important;
}

body.chat-mode-active #connectionsSvg {
    display: none !important;
}

/* КРИТИЧНО: на .nodes-container и .tree-canvas стоят transform/will-change,
 * которые делают их containing block для fixed-потомков (.chat-page).
 * Из-за этого fixed-узел позиционируется не от viewport, а от этих элементов.
 * Нейтрализуем через CSS !important — JS-инлайны не выживают (zoom-код
 * периодически переписывает transform). */
body.chat-mode-active .nodes-container {
    transform: none !important;
    will-change: auto !important;
}

body.chat-mode-active .tree-canvas {
    will-change: auto !important;
}

/* Адаптив: при ширине окна меньше 1280px колонка перестаёт капироваться
 * на 1140px и тянется на всю доступную ширину со скромными полями. */
@media (max-width: 1280px) {
    .chat-page-bar-inner,
    .chat-page-content,
    .chat-page-input-inner {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 900px) {
    .chat-page-bar-inner,
    .chat-page-content,
    .chat-page-input-inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ==================== /РЕЖИМ ЧАТА ==================== */


/* Исправленный CSS-подход для полноэкранного режима */

/* Полноэкранный режим через CSS */
.node-fullscreen-css {
    position: fixed !important;
    /* Размеры и позиция будут установлены через JavaScript для точности */
    z-index: 1500 !important;
    transform: none !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid var(--node-primary-color, #3182ce) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Обеспечиваем правильную структуру grid для содержимого */
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    overflow: hidden !important;
}

/* Обеспечиваем, что wrapper занимает доступное пространство */
.node-fullscreen-css .node-messages-wrapper {
    flex: 1 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Обеспечиваем, что область сообщений занимает доступное пространство в полноэкранном режиме */
.node-fullscreen-css .node-messages {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important; /* Позволяет flex элементу сжиматься */
}

/* Убеждаемся, что область ввода не "захватывает" лишнее пространство */
.node-fullscreen-css .node-input {
    flex-shrink: 0 !important;
    grid-row: 3 !important;
}

/* Убираем класс node-fullscreen если он был добавлен */
.node-fullscreen-css.node-fullscreen {
    /* Переопределяем стили из node-fullscreen */
    border-radius: 12px !important;
}

/* Адаптивность для CSS-подхода */
@media (max-width: 768px) {
    .node-fullscreen-css {
        left: 250px !important; /* для меньших экранов */
        top: 80px !important;
    }
}

@media (max-width: 480px) {
    .node-fullscreen-css {
        top: 280px !important; /* учитываем горизонтальную панель на мобильных */
        left: 5px !important;
        right: 5px !important;
        bottom: 5px !important;
    }
}

/* ==================== СТИЛИ ДЛЯ УЛУЧШЕННОЙ ОБРАБОТКИ ФАЙЛОВ ==================== */

/* Метаинформация файла */
.file-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.file-size {
    font-size: 0.8rem;
    color: #718096;
    background: #f7fafc;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

/* Индикатор количества токенов */
.file-tokens {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
}

.token-count-normal {
    color: #48bb78;
    background: rgba(72, 187, 120, 0.1);
    border-color: rgba(72, 187, 120, 0.3);
}

.token-count-medium {
    color: #ed8936;
    background: rgba(237, 137, 54, 0.1);
    border-color: rgba(237, 137, 54, 0.3);
}

.token-count-high {
    color: #e53e3e;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Превью содержимого файла */
.file-preview {
    font-size: 0.75rem;
    color: #a0aec0;
    font-style: italic;
    margin-top: 0.25rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
    cursor: help;
}

/* Улучшенный элемент файла */
.file-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.file-item:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.file-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.file-details {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-weight: 600;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.file-remove {
    background: #fed7d7;
    color: #e53e3e;
    border: 1px solid #feb2b2;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.file-remove:hover {
    background: #feb2b2;
    color: #c53030;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.file-remove:active {
    transform: translateY(0);
}

/* Предупреждение о большом размере файла */
.file-warning {
    background: #fef5e7;
    border: 1px solid #f6ad55;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #744210;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-warning::before {
    content: '⚠️';
    font-size: 1rem;
}

/* Информация о лимитах файлов */
.file-limits-info {
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #2b6cb0;
    line-height: 1.4;
}

.file-limits-info h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2c5282;
}

.file-limits-info ul {
    margin: 0;
    padding-left: 1rem;
}

.file-limits-info li {
    margin-bottom: 0.25rem;
}

/* Статистика обработки файлов */
.file-processing-stats {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #22543d;
}

.processing-stat {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0.25rem;
}

.processing-stat strong {
    color: #1a365d;
}

/* Прогресс-бар для обработки файлов */
.file-processing-progress {
    background: #edf2f7;
    border-radius: 4px;
    height: 4px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.file-processing-progress-bar {
    background: linear-gradient(90deg, #48bb78, #38a169);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

/* Улучшенная область загрузки файлов */
.file-upload-area {
    border: 2px dashed #cbd5e0;
    border-radius: 5px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f7fafc;
    position: relative;
}

.file-upload-area:hover {
    border-color: #3182ce;
    background: #ebf8ff;
    transform: translateY(-1px);
}

.file-upload-area.dragover {
    border-color: #3182ce;
    background: #ebf8ff;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(49, 130, 206, 0.2);
}

.file-upload-area.processing {
    pointer-events: none;
    opacity: 0.7;
}

.file-upload-area.processing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #3182ce;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .file-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .file-info {
        align-items: flex-start;
    }
    
    .file-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .file-preview {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }
    
    .file-remove {
        align-self: flex-end;
        margin-top: 0.25rem;
    }
    
    .file-upload-area {
        padding: 1.5rem;
    }
}

/* Темная тема */

/* ==================== СТИЛИ ДЛЯ ЦИТАТ (BLOCKQUOTES) ==================== */

.ai-blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-radius: 0 8px 8px 0;
    color: #374151;
    font-style: italic;
    position: relative;
    line-height: 1.6;
}

.ai-blockquote::before {
    content: '"';
    position: absolute;
    left: 0.5rem;
    top: -0.25rem;
    font-size: 2rem;
    color: rgba(16, 185, 129, 0.3);
    font-family: Georgia, serif;
}

/* Несколько подряд идущих цитат - объединяем визуально */
.ai-blockquote + .ai-blockquote {
    margin-top: -0.5rem;
    border-top: 1px dashed rgba(16, 185, 129, 0.2);
}

/* Тёмная тема для цитат */

/* ==================== УЛУЧШЕННЫЕ СТИЛИ ДЛЯ ТАБЛИЦ С АДАПТИВНОЙ ШИРИНОЙ ==================== */

.ai-table-container {
    margin: 1rem 0;
    overflow-x: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: white;
    border: 1px solid #e2e8f0;
    /* Убираем фиксированную ширину для адаптивности */
    width: 100%;
    max-width: 100%;
}

.ai-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.4;
    background: white;
    margin: 0;
    /* Автоматическое распределение ширины колонок */
    table-layout: auto;
}

.ai-table thead {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-bottom: 2px solid #e2e8f0;
}

.ai-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #2d3748;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    background: inherit;
    /* УБИРАЕМ white-space: nowrap для переноса текста */
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    /* Убираем фиксированную ширину */
    min-width: 80px; /* Минимальная ширина для читаемости */
    /* Адаптивная ширина */
    width: auto;
}

.ai-table th:last-child {
    border-right: none;
}

.ai-table td {
    padding: 0.75rem 1rem;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    color: #4a5568;
    vertical-align: top;
    /* ВКЛЮЧАЕМ перенос текста */
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    /* УБИРАЕМ max-width для адаптивности */
    min-width: 80px; /* Минимальная ширина для читаемости */
    width: auto;
    /* Умное распределение пространства */
    max-width: none;
}

.ai-table td:last-child {
    border-right: none;
}

/* Автоматическое выравнивание для разных типов данных */
.ai-table td {
    text-align: left;
}

/* Выравнивание по центру для коротких данных */
.ai-table td:only-child {
    text-align: center;
}

/* Выравнивание вправо для числовых данных */
.ai-table td[data-type="number"] {
    text-align: right;
}

.ai-table tbody tr {
    transition: background-color 0.2s ease;
}

.ai-table tbody tr:hover {
    background: #f7fafc;
}

.ai-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.ai-table tbody tr:nth-child(even):hover {
    background: #f1f5f9;
}

/* Специальные стили для колонок с разным содержимым */
.ai-table th:first-child,
.ai-table td:first-child {
    /* Первая колонка часто содержит названия - делаем её немного шире */
    min-width: 120px;
}

.ai-table th:last-child,
.ai-table td:last-child {
    /* Последняя колонка часто содержит описания - позволяем ей расширяться */
    width: auto;
}

/* Адаптивность таблиц */
@media (max-width: 768px) {
    .ai-table-container {
        margin: 0.75rem 0;
        border-radius: 6px;
        /* На мобильных разрешаем горизонтальную прокрутку */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .ai-table {
        font-size: 0.85rem;
        /* На мобильных используем минимальную ширину для компактности */
        min-width: 500px;
    }
    
    .ai-table th,
    .ai-table td {
        padding: 0.5rem 0.75rem;
        /* Уменьшаем минимальную ширину на мобильных */
        min-width: 60px;
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    .ai-table th {
        font-size: 0.8rem;
        font-weight: 700;
        /* Обеспечиваем перенос на мобильных */
        white-space: normal;
        word-break: break-word;
    }
    
    .ai-table th:first-child,
    .ai-table td:first-child {
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .ai-table-container {
        margin: 0.5rem -0.5rem; /* Расширяем на всю ширину сообщения */
        border-radius: 4px;
    }
    
    .ai-table {
        font-size: 0.8rem;
        min-width: 400px; /* Минимальная ширина для очень маленьких экранов */
    }
    
    .ai-table th,
    .ai-table td {
        padding: 0.4rem 0.5rem;
        min-width: 50px;
        font-size: 0.8rem;
        line-height: 1.2;
    }
    
    .ai-table th:first-child,
    .ai-table td:first-child {
        min-width: 70px;
    }
}

/* Улучшенная обработка длинного текста */
.ai-table th,
.ai-table td {
    /* Умный перенос слов */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    
    /* Разрешаем разрыв в любом месте для очень длинных слов */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Специальная обработка для URL и длинных строк без пробелов */
.ai-table td {
    word-break: break-all; /* Для URL и длинных строк */
}

.ai-table th {
    word-break: break-word; /* Для заголовков более консервативный подход */
}

/* Таблицы в сообщениях пользователя (светлые на темном фоне) */
.message.user .ai-table-container {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

.message.user .ai-table {
    background: rgba(255, 255, 255, 0.95);
}

.message.user .ai-table thead {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.message.user .ai-table th {
    color: #2d3748;
    border-color: rgba(255, 255, 255, 0.4);
}

.message.user .ai-table td {
    color: #2d3748;
    border-color: rgba(255, 255, 255, 0.3);
}

.message.user .ai-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.8);
}

.message.user .ai-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.85);
}

/* Темная тема для таблиц */

/* Анимация появления таблиц */
.ai-table-container {
    animation: tableSlideIn 0.4s ease-out;
}

@keyframes tableSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Улучшенный скроллбар для таблиц */
.ai-table-container::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.ai-table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.ai-table-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.ai-table-container::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Индикатор прокрутки для мобильных */
@media (max-width: 768px) {
    .ai-table-container::after {
        content: "← Прокрутите для просмотра →";
        display: block;
        text-align: center;
        font-size: 0.7rem;
        color: #a0aec0;
        padding: 0.25rem;
        background: #f7fafc;
        border-top: 1px solid #e2e8f0;
        font-style: italic;
    }
    
    .ai-table-container:not(:hover)::after {
        opacity: 0.6;
    }
}

.text-highlight {
  background-color: rgba(255, 234, 0, 0.7); /* Яркий желтый фон */
  box-shadow: 0 0 5px rgba(255, 234, 0, 0.5);
  border-radius: 3px;
  padding: 1px 3px;
  transition: all 0.3s ease;
}

.node-height-expand-btn {
    background: transparent;
    border: none;
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: rgba(19, 52, 59, 0.55);
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    flex-shrink: 0;
    outline: none;
    padding: 0;
}

.node-height-expand-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.node-height-expand-btn:active {
    transform: scale(0.94);
}

.node-height-expand-btn.active {
    background: rgba(31, 184, 205, 0.14);
    color: #20808D;
}

/* Стили для узла с увеличенной высотой */
.node-height-expanded {
    border: 1px solid #20B8CD !important;
    box-shadow: 0 0 0 1px rgba(32, 184, 205, 0.20), 0 6px 20px rgba(19, 52, 59, 0.08) !important;
}

/* Фокус для доступности */
.node-height-expand-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

/* Темная тема */

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .node-height-expand-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

/* Стили для заголовка tooltip с кнопкой закрытия */
.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.tooltip-close-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.tooltip-close-btn:hover {
    background: #edf2f7;
    color: #1a202c;
}

.tooltip-preview {
    flex: 1;
    margin-bottom: 0;
}

/* ==================== СТИЛИ ДЛЯ ПРИКРЕПЛЕНИЯ ФАЙЛОВ ==================== */

/* Контейнер ввода */
.input-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.input-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

.attach-btn-inside {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.attach-btn-inside:hover {
    background: #f1f5f9;
    color: #3182ce;
    transform: translateY(-50%) scale(1.1);
}

.message-input-with-attach {
    flex: 1;
    width: 100%;
    min-height: 50px;
    max-height: 140px;
    padding: 12px 16px 12px 48px; /* Отступ слева для булавки */
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: all 0.2s ease;
    background: white;
    overflow-y: auto; /* Включен вертикальный скролл */
    scrollbar-width: thin; /* Тонкая полоса прокрутки в Firefox */
}

.message-input-with-attach::-webkit-scrollbar {
    width: 8px; /* Ширина полосы прокрутки */
}

.message-input-with-attach::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.message-input-with-attach::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.message-input-with-attach::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}



.message-input-with-attach:focus {
    border-color: #3182ce;
    box-shadow: 0 0 0 1px #3182ce;
}

/* Контейнер ввода */
.input-container {
    position: relative;
}

/* Контейнер с RAG и кнопкой отправки */
.rag-controls-container {
    display: flex;
    flex-direction: row;          /* боковая колонка (RAG+Анализ) слева, кнопка отправки справа */
    align-items: stretch;         /* кнопка отправки тянется на всю высоту поля ввода */
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    align-self: stretch;
}
/* Боковая колонка: чекбокс RAG сверху, кнопка «Анализ проекта» под ним — всё к ВЕРХНЕМУ краю */
.pm-side-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
/* Кнопка отправки — фиксированная ширина, полная высота поля (растягивается align-items:stretch) */
.rag-controls-container > .send-btn {
    flex: 0 0 44px;
    align-self: stretch;
}

/* Компактный список прикрепленных файлов - ПОД полем ввода */
.attached-files-list {
    display: none;
    padding: 6px 8px 6px 48px;
    font-size: 0.85rem;
    line-height: 1.5;
    background: transparent;
    gap: 6px;
    width: 100%;
    clear: both;
}

/* Обертка для файла - кликабельная пилюля */
.file-item-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: all 0.15s ease;
    margin-right: 6px;
    margin-bottom: 4px;
}

.file-item-wrapper:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

/* ==================== РАЗМЕР ВЛОЖЕНИЯ — TIER (Perplexity style) ====================
 * Цветовая индикация объёма вложений относительно окна модели (T1.2 ТЗ RAG-память).
 * Палитра — danger/warning из Docs/PERPLEXITY_STYLE_GUIDE.md. */
.file-item-wrapper.file-chip-tier-amber {
    background: rgba(237, 137, 54, 0.12);
    border-color: rgba(237, 137, 54, 0.30);
}
.file-item-wrapper.file-chip-tier-amber:hover {
    background: rgba(237, 137, 54, 0.18);
    border-color: rgba(237, 137, 54, 0.45);
}
.file-item-wrapper.file-chip-tier-amber .file-size {
    color: #c05621;
    font-weight: 600;
}
.file-item-wrapper.file-chip-tier-red {
    background: rgba(229, 62, 62, 0.12);
    border-color: rgba(229, 62, 62, 0.30);
}
.file-item-wrapper.file-chip-tier-red:hover {
    background: rgba(229, 62, 62, 0.18);
    border-color: rgba(229, 62, 62, 0.45);
}
.file-item-wrapper.file-chip-tier-red .file-size {
    color: #c53030;
    font-weight: 600;
}

/* Файл ещё читается / распознаётся: пилюля с ходом и вращающимся кружком (приёмка 22.09, шаг 7а) */
.file-item-wrapper.file-chip-pending {
    cursor: default;
    background: #eef9fb;
    border-color: #b6e6ee;
}
.file-item-wrapper.file-chip-pending:hover {
    background: #eef9fb;
    border-color: #b6e6ee;
}
.file-item-wrapper.file-chip-pending .file-size {
    color: #13808f;
}
.file-chip-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 2px solid #b6e6ee;
    border-top-color: #20B8CD;
    border-radius: 50%;
    animation: file-chip-spin 0.8s linear infinite;
    flex: none;
}
@keyframes file-chip-spin {
    to { transform: rotate(360deg); }
}

/* Иконка файла */
.file-item-wrapper .file-icon {
    font-size: 13px;
    margin-right: 4px;
}

/* Имя файла */
.file-item-wrapper .file-name {
    color: #1e293b;
    font-weight: 500;
    margin-right: 4px;
    font-size: 0.83rem;
}

/* Размер файла */
.file-item-wrapper .file-size {
    font-size: 0.83rem;
    color: #64748b;
    margin-right: 6px;
    font-weight: 400;
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
}

/* Кнопка удаления */
.file-item-wrapper .remove-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #64748b;
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    margin-left: 2px;
    transition: background 0.15s ease;
}

.file-item-wrapper:hover .remove-file-btn {
    background: #e53e3e;
}

/* Стили для системных сообщений с файлами */

.message.system .message-avatar {
    background: #64748b;
    color: white;
}

/* Скрываем email контекст (показываем только компактное представление) */
.message.email-analysis-context {
    display: none !important;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .attach-btn-inside {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    .message-input-with-attach {
        padding-left: 40px;
    }
    
    .attached-files-list {
        padding-left: 40px;
    }
    
    .file-item {
        font-size: 0.8rem;
    }
}

/* Анимация появления файлов */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== СТИЛИ ДЛЯ СТАТУСА API ==================== */

/* Индикатор статуса API в интерфейсе */
.api-status {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-block;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.api-status-user {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
}

.api-status-default {
    background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(49, 130, 206, 0.3);
}

.api-status-none {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3);
}

/* Информация о конфигурации API в настройках */
.api-config-info {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.api-info-section h3 {
    margin: 0 0 12px 0;
    color: #2d3748;
    font-size: 1rem;
    font-weight: 600;
}

.api-info-item {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-weight: 500;
}

.api-info-item.success {
    background: #f0fff4;
    color: #38a169;
    border-left: 4px solid #48bb78;
}

.api-info-item.info {
    background: #ebf8ff;
    color: #3182ce;
    border-left: 4px solid #3182ce;
}

.api-info-item.error {
    background: #fed7d7;
    color: #e53e3e;
    border-left: 4px solid #e53e3e;
}

.api-info-detail {
    padding: 4px 0 4px 20px;
    color: #4a5568;
    font-size: 0.9rem;
}

.api-info-hint {
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #f6e05e;
    border-radius: 4px;
    color: #d69e2e;
    font-size: 0.85rem;
    margin-top: 8px;
}

/* Улучшенные стили для полей API ключей */
.api-key-group {
    margin-bottom: 20px;
    position: relative;
}

.api-key-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2d3748;
}

.api-key-input {
    width: 100%;
    padding: 10px 40px 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.api-key-input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.api-key-input.has-value {
    border-color: #48bb78;
    background: #f0fff4;
}

.api-key-status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

.api-key-status.configured {
    color: #48bb78;
}

.api-key-status.empty {
    color: #cbd5e0;
}

/* Информационное сообщение о базовом API */
.default-api-notice {
    background: linear-gradient(135deg, #ebf8ff 0%, #e6fffa 100%);
    border: 1px solid #3182ce;
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    position: relative;
}

.default-api-notice::before {
    content: '🌐';
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 1.5rem;
}

.default-api-notice-content {
    margin-left: 40px;
}

.default-api-notice h4 {
    margin: 0 0 8px 0;
    color: #2c5282;
    font-size: 1rem;
    font-weight: 600;
}

.default-api-notice p {
    margin: 0;
    color: #2d3748;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Анимация для обновления статуса */
.api-status.updating {
    animation: statusPulse 0.5s ease-in-out;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .api-config-info {
        padding: 12px;
        margin-bottom: 16px;
    }
    
    .api-info-item {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
    
    .api-info-detail {
        padding-left: 16px;
        font-size: 0.8rem;
    }
    
    .api-status {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}

/* Исправление отображения <br> в таблицах ИИ */
.ai-table td br,
.ai-table th br {
    display: block;
    content: "";
    margin: 0;
    line-height: 1.2;
}

.ai-table td,
.ai-table th {
    white-space: pre-line; /* Позволяет переносы строк */
    vertical-align: top;
}

/* Стили для отображения баланса API */
.api-balance {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    margin-right: 10px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
    border: 1px solid #90cdf4;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #2b6cb0;
    cursor: default;
    transition: all 0.2s ease;
}

.api-balance:hover {
    background: linear-gradient(135deg, #e6f7ff 0%, #d6eeff 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.balance-icon {
    margin-right: 6px;
    font-size: 1rem;
}

.balance-text {
    font-weight: 500;
}

.api-balance.updating {
    animation: balancePulse 1s infinite;
}

/* Стиль для заблокированного ключа */
.api-balance.blocked {
    background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
    border-color: #fc8181;
    color: #c53030;
}

.api-balance.blocked:hover {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

@keyframes balancePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .api-balance {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    .balance-icon {
        font-size: 0.9rem;
    }
}

/* ==================== ОВЕРЛЕЙ НУЛЕВОГО БАЛАНСА ==================== */
#zero-balance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(3px);
}

.zero-balance-message {
    background: #fff;
    border-radius: 12px;
    padding: 2.5rem 3rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 420px;
    width: 90%;
}

.zero-balance-message h2 {
    margin: 0.75rem 0 0.5rem;
    font-size: 1.3rem;
    color: #c53030;
    font-weight: 600;
}

.zero-balance-message p {
    margin: 0.4rem 0;
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.5;
}

.zero-balance-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.zero-balance-btn {
    margin-top: 1.25rem;
    padding: 0.7rem 1.5rem;
    background: #3182ce;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.zero-balance-btn:hover {
    background: #2b6cb0;
}

/* Стили для отображения прикрепленных файлов в сообщениях */
.file-attachment-content {
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    border-left: 3px solid #3182ce !important;
}

.files-header {
    margin-bottom: 10px;
    font-weight: 600;
    color: #3182ce;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.files-header::before {
    content: '📎';
    margin-right: 6px;
    font-size: 1.1rem;
}

.attached-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attached-file-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.attached-file-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.file-icon {
    font-size: 1.5rem;
    margin-right: 12px;
    color: #3182ce;
}

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 3px;
}

.file-meta {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: #718096;
}

.file-type {
    padding: 2px 6px;
    background: #ebf8ff;
    border-radius: 4px;
    color: #3182ce;
    font-weight: 500;
}

.file-size {
    color: #718096;
}

/* Темная тема */
/* Стили для модального окна просмотра содержимого файла */
.file-content-modal-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    height: 80vh;
    max-width: 900px;
    min-height: 300px;
    overflow: hidden;
    position: relative;
    width: 90%;
}

.file-content-modal-header {
    align-items: center;
    background-color: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
}

.file-content-modal-title {
    align-items: center;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
}

.file-content-icon {
    font-size: 1.25rem;
    margin-right: 10px;
}

.file-content-name {
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-content-modal-close {
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 4px;
}

.file-content-modal-close:hover {
    color: #4a5568;
}

.file-content-modal-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

.file-content-text {
    font-family: 'Roboto Mono', monospace, 'Courier New', Courier;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Индикатор загрузки для файла */
.file-content-loading {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.9);
}

.file-content-loading::after {
    content: 'Загрузка содержимого...';
    margin-top: 12px;
    font-size: 0.9rem;
    color: #4a5568;
}

.file-content-loading::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3182ce;
    border-radius: 50%;
    animation: file-spinner 1s linear infinite;
}

@keyframes file-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Стили для интерактивных элементов файла */
.file-attachment-content .simple-file-item {
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 3px 6px;
    border-radius: 4px;
}

.file-attachment-content .simple-file-item:hover {
    background-color: rgba(49, 130, 206, 0.1);
}

.file-attachment-content .file-pin-icon {
    cursor: pointer;
}

.file-attachment-content .simple-file-name {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
}

.file-attachment-content .simple-file-item:hover .simple-file-name {
    border-bottom-color: #3182ce;
}

/* Стили для модального окна подтверждения сброса */
.reset-confirm-modal {
    max-width: 480px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.25s ease-out;
    overflow: hidden;
}

.reset-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    border-bottom: 1px solid #feb2b2;
}

.reset-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reset-modal-title h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #c53030;
}

.reset-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: rgba(197, 48, 48, 0.1);
    color: #c53030;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background-color 0.15s, color 0.15s;
}

.reset-modal-close:hover {
    background: rgba(197, 48, 48, 0.2);
    color: #9b2c2c;
}

.reset-confirm-modal .modal-body {
    padding: 20px;
}

.reset-warning {
    background: #fff5f5;
    border-left: 3px solid #e53e3e;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 0 8px 8px 0;
}

.reset-warning p {
    margin: 0 0 10px 0;
    color: #c53030;
    font-size: 0.9rem;
    font-weight: 500;
}

.reset-warning ul {
    margin: 0;
    padding-left: 20px;
}

.reset-warning li {
    margin: 6px 0;
    color: #742a2a;
    font-size: 0.85rem;
    line-height: 1.4;
}

.reset-info-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #ebf8ff;
    border-radius: 6px;
    margin-bottom: 16px;
}

.reset-info-note span {
    color: #2b6cb0;
    font-size: 0.85rem;
    font-weight: 500;
}

.reset-confirm-input {
    margin-top: 8px;
}

.reset-confirm-input label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: #4a5568;
    font-weight: 500;
}

.reset-confirm-input input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    background: #ffffff;
    color: #2d3748;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.reset-confirm-input input:focus {
    outline: none;
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

.reset-confirm-input input::placeholder {
    color: #a0aec0;
}

.reset-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: #f7fafc;
    border-top: 1px solid #e2e8f0;
}

.reset-cancel-btn {
    padding: 10px 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #4a5568;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.reset-cancel-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.danger-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e53e3e;
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.15s, box-shadow 0.15s;
}

.danger-btn:hover {
    background: #c53030;
    box-shadow: 0 2px 8px rgba(197, 48, 48, 0.3);
}

.danger-btn:active {
    background: #9b2c2c;
}

/* Стили для секции опасной зоны в настройках */
.danger-section {
    border-top: 1px solid #e2e8f0;
    margin-top: 20px;
    padding-top: 20px;
    background-color: #fff5f5;
    border-radius: 8px;
    padding: 16px;
}

.danger-section h3 {
    color: #e53e3e;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.danger-section h3::before {
    content: "⚠️";
    margin-right: 8px;
}

.settings-row .danger-btn {
    padding: 8px 16px;
    font-size: 14px;
    background-color: #e53e3e;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(229, 62, 62, 0.3);
}

.settings-row .danger-btn:hover {
    background-color: #c53030;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(229, 62, 62, 0.4);
}

.settings-row .danger-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(229, 62, 62, 0.3);
}

.settings-description {
    margin-top: 8px;
    font-size: 13px;
    color: #718096;
}

/* Дополнительные стили для модального окна сброса */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #2d3748;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #a0aec0;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #4a5568;
}

/* Улучшенные стили для кнопок в модальном окне */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.modal-footer .cancel-btn {
    background-color: #e2e8f0;
    color: #4a5568;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.modal-footer .cancel-btn:hover {
    background-color: #cbd5e0;
}

.modal-footer .danger-btn {
    background-color: #e53e3e;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(229, 62, 62, 0.3);
}

.modal-footer .danger-btn:hover {
    background-color: #c53030;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(229, 62, 62, 0.4);
}

.modal-footer .danger-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(229, 62, 62, 0.3);
}

/* Специфичные стили для модального окна сброса */
.reset-confirm-modal .modal-header {
    background-color: #fff5f5;
    border-radius: 8px 8px 0 0;
    padding: 12px 16px;
}

.reset-confirm-modal .modal-header h3 {
    color: #e53e3e;
    display: flex;
    align-items: center;
}

.reset-confirm-modal .modal-body {
    padding: 16px;
}

.reset-confirm-modal .modal-footer {
    padding: 12px 16px;
    background-color: #f7fafc;
    border-radius: 0 0 8px 8px;
}

/* Стили для панели навигатора узлов */
.node-navigator-panel {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 280px;
  max-height: calc(100vh - 100px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 900;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

.node-navigator-panel.collapsed {
  transform: translateX(calc(100% - 35px));
  width: 300px;
}

.node-navigator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  user-select: none;
}

.node-navigator-title {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
}

.node-navigator-toggle {
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: #718096;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.node-navigator-panel.collapsed .node-navigator-toggle .chevron-icon {
  transform: rotate(180deg);
}

.node-navigator-content {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

.node-navigator-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.node-navigator-group {
  margin-bottom: 8px;
}

.node-navigator-group-header {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: #f1f5f9;
  font-weight: 600;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}

.node-navigator-group-header:hover {
  background: #e2e8f0;
}

.node-navigator-group-icon {
  margin-right: 8px;
  font-size: 14px;
  color: var(--node-primary-color, #3182ce);
}

.node-navigator-group-items {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  margin-top: 4px;
}

.node-navigator-item {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  color: #4a5568;
  transition: background 0.2s;
  position: relative;
}

.node-navigator-item:hover {
  background: #f1f5f9;
}

.node-navigator-item.active {
  background: #ebf8ff;
  color: #2b6cb0;
  font-weight: 500;
}

.node-navigator-item-icon {
  margin-right: 8px;
  font-size: 12px;
  opacity: 0.7;
}

.node-navigator-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-navigator-level-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  font-size: 8px;
  line-height: 12px;
  text-align: center;
  color: white;
  background: var(--node-primary-color, #3182ce);
}

.node-navigator-empty {
  padding: 12px;
  color: #718096;
  font-style: italic;
  font-size: 12px;
  text-align: center;
}

/* Индикатор активного узла */
.node-navigator-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: transparent;
  transition: background 0.2s;
}

.node-navigator-item.active::before {
  background: var(--node-primary-color, #3182ce);
}

/* Адаптивность для маленьких экранов */
@media (max-height: 700px) {
  .node-navigator-panel {
    top: 60px;
    max-height: calc(100vh - 80px);
  }
}

@media (max-width: 768px) {
  .node-navigator-panel {
    width: 240px;
    right: 10px;
  }
}

/* Стили для кнопок действий в навигаторе */
.node-navigator-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.node-navigator-action-btn {
    background: none;
    border: none;
    font-size: 14px;
    padding: 4px;
    border-radius: 3px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-navigator-action-btn svg {
    width: 14px;
    height: 14px;
}

.node-navigator-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.1);
}

.node-navigator-action-btn:active {
    transform: scale(0.95);
}

.node-navigator-group-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--node-primary-color, #3182ce);
    color: white;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}

.node-navigator-group-header:hover {
    background: var(--node-border-color, #2c5282);
}

.node-navigator-group-icon {
    margin-right: 8px;
}

/* Стили заголовка корневого узла */
.node-navigator-root-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}

/* Стили для информации о вложениях в навигаторе */
.node-navigator-attachments {
    display: flex;
    gap: 8px;
    margin-left: auto;
    margin-right: 8px;
    flex-shrink: 0;
}

.node-nav-attach-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 5px;
    border-radius: 3px;
}

.node-nav-attach-item svg {
    opacity: 0.85;
}

/* Вложения для дочерних узлов */
.node-navigator-item .node-navigator-attachments {
    margin-left: 8px;
    margin-right: 0;
}

.node-navigator-item .node-nav-attach-item {
    color: var(--node-primary-color, #3182ce);
    background: rgba(49, 130, 206, 0.1);
}

/* Стили для панели поиска в файле */
.file-content-search-panel {
    background-color: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-direction: row;
    padding: 8px 12px;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.search-input-container {
    display: flex;
    flex: 1;
    position: relative;
    min-width: 200px;
}

.file-content-search-input {
    background-color: white;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 0.9rem;
    padding: 6px 30px 6px 10px;
    width: 100%;
}

.file-content-search-input:focus {
    border-color: #3182ce;
    outline: none;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.file-content-search-clear {
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    font-size: 1.1rem;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    padding: 0;
    line-height: 1;
}

.file-content-search-clear.visible {
    visibility: visible;
}

.file-content-search-clear:hover {
    color: #4a5568;
}

.search-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.search-count {
    color: #4a5568;
    font-size: 0.8rem;
    white-space: nowrap;
}

.search-nav-btn {
    background-color: white;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    color: #4a5568;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    transition: all 0.2s ease;
}

.search-nav-btn:hover:not(:disabled) {
    background-color: #edf2f7;
    border-color: #a0aec0;
}

.search-nav-btn:disabled {
    background-color: #f7fafc;
    border-color: #e2e8f0;
    color: #cbd5e0;
    cursor: not-allowed;
}

.search-case-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-case-checkbox {
    cursor: pointer;
    margin: 0;
}

.search-case-label {
    color: #4a5568;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Стили для выделения результатов поиска */
.search-highlight {
    background-color: rgba(250, 240, 137, 0.5);
    border-radius: 2px;
    padding: 0 2px;
    margin: 0 -2px;
    box-shadow: 0 0 0 1px rgba(250, 240, 137, 0.5);
}

.search-highlight.active {
    background-color: rgba(246, 173, 85, 0.7);
    box-shadow: 0 0 0 1px rgba(246, 173, 85, 0.7);
}

/* Стили для темной темы */

/* Стили для LaTeX формул */
.latex-display {
    display: block;
    margin: 1rem 0;
    padding: 0.5rem;
    overflow-x: auto;
    background-color: rgba(240, 240, 240, 0.5);
    border-left: 3px solid #ccc;
    text-align: center;
}

/* Настройка для встроенного рендеринга формул с использованием MathJax */
.MathJax {
    outline: none;
}

/* Обычные инлайн-формулы $ и \( \) */
.message-content .MathJax_Display {
    margin: 1em 0;
}

/* Стили для отображения самих формул до рендеринга */
.dialog-node .message-content {
    /* Улучшаем читаемость LaTeX */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Формула в процессе загрузки/рендеринга */
.latex-display, [class*="math-tex"] {
    position: relative;
    opacity: 0.9;
}

/* Улучшаем отображение формул в темах */
.node-color-blue .latex-display {
    background-color: rgba(235, 248, 255, 0.6);
    border-left-color: #3182ce;
}

.node-color-green .latex-display {
    background-color: rgba(240, 255, 244, 0.6);
    border-left-color: #48bb78;
}

.node-color-purple .latex-display {
    background-color: rgba(250, 245, 255, 0.6);
    border-left-color: #805ad5;
}

.node-color-red .latex-display {
    background-color: rgba(254, 215, 215, 0.6);
    border-left-color: #e53e3e;
}

.node-color-orange .latex-display {
    background-color: rgba(254, 245, 231, 0.6);
    border-left-color: #ed8936;
}

.node-color-pink .latex-display {
    background-color: rgba(254, 215, 226, 0.6);
    border-left-color: #d53f8c;
}

.node-color-teal .latex-display {
    background-color: rgba(230, 255, 250, 0.6);
    border-left-color: #38b2ac;
}

.node-color-yellow .latex-display {
    background-color: rgba(255, 255, 240, 0.6);
    border-left-color: #d69e2e;
}

/* Стили для математических формул */
.math-display {
    display: block;
    margin: 1em 0;
    overflow-x: auto;
    text-align: center;
}

.MathJax {
    overflow-x: auto;
    max-width: 100%;
}

/* Стили для inline формул */
.message-content .MathJax[display="true"] {
    margin: 1em 0;
}

/* Улучшаем отображение формул на мобильных устройствах */
@media (max-width: 768px) {
    .math-display {
        font-size: 0.9em;
    }
}
/* Стили для настроек веб-поиска */
.model-extra-options {
    display: flex;
    margin-top: 2px;
    margin-bottom: 0;
    padding: 2px 5px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.02);
    min-height: 24px; /* Фиксированная минимальная высота */
    align-items: center; /* Выравниваем содержимое по центру */
    box-sizing: border-box;
}

.web-search-options {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    height: 20px; /* Фиксированная высота */
    box-sizing: border-box;
}

.web-search-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap; /* Предотвращаем перенос текста */
    height: 20px;
}

.web-search-toggle input {
    margin: 0;
    width: 14px;
    height: 14px;
}

.web-search-toggle span {
    font-size: 0.8rem;
    line-height: 1;
}

.web-search-context-size {
    padding: 1px 3px;
    font-size: 0.8rem;
    border-radius: 3px;
    border: 1px solid #ddd;
    height: 20px; /* Фиксированная высота */
    line-height: 1;
    box-sizing: border-box;
}

.web-search-context-size:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.prompt-templates {
  margin-top: 8px;
  font-size: 12px;
}

.prompt-templates-title {
  margin-bottom: 4px;
  color: #4a5568;
  font-weight: 500;
  font-size: 12px;
}

.prompt-templates-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 120px;
  overflow-y: auto;
}

.prompt-template-item {
  padding: 3px 8px;
  background-color: #edf2f7;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 11px;
  white-space: nowrap;
}

.prompt-template-item:hover {
  background-color: #d0d7e3;
}

/* Добавьте эти стили в ваш CSS файл */
.highlighted-text-fragment {
    background-color: rgba(255, 215, 0, 0.5);
    border-radius: 3px;
    padding: 2px 0;
    animation: pulse-highlight 2s infinite;
}

@keyframes pulse-highlight {
    0% { background-color: rgba(255, 215, 0, 0.3); }
    50% { background-color: rgba(255, 215, 0, 0.7); }
    100% { background-color: rgba(255, 215, 0, 0.3); }
}

.api-balance {
    display: inline-flex; /* Меняем на inline-flex для лучшего соответствия с соседними инлайн-элементами */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 10px; /* Минимальный padding */
    min-height: 28px; /* Минимальная высота - подстройте под соседние элементы */
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #f0f5ff;
    cursor: pointer;
    margin-bottom: 0; /* Убираем нижний отступ */
    margin-right: 6px; /* Добавляем небольшой отступ справа */
    transition: background-color 0.2s;
    white-space: nowrap;
    line-height: normal; /* Нормализуем высоту строки */
    vertical-align: middle; /* Важно для inline-flex элементов */
}

.api-balance:hover {
    background-color: #e0eaff;
}

.api-balance.updating {
    animation: pulse 1.5s infinite;
}

.api-balance .balance-icon {
    margin-right: 4px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    font-size: inherit; /* Наследуем размер шрифта */
}

.api-balance .balance-text {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    font-size: inherit; /* Наследуем размер шрифта */
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ==================== СТИЛИ ДЛЯ СИСТЕМЫ ЗАМЕТОК ==================== */

/* Панель заметок */
.notes-panel {
    position: fixed;
    right: 20px;
    top: 410px;
    width: 400px;
    max-width: 90vw;
    height: 600px;
    max-height: 80vh;
    min-width: 300px;
    min-height: 400px;
    resize: both;
    overflow: hidden;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
}

.notes-panel.collapsed {
    /* Сдвигаем на расчетное расстояние через JavaScript */
    /* left устанавливается динамически */
    transition: left 0.3s ease;
}

/* Стилизация ручки resize */
.notes-panel::-webkit-resizer {
    background-image: linear-gradient(135deg, 
        transparent 0%, 
        transparent 50%, 
        #667eea 50%, 
        #667eea 100%);
    background-size: 8px 8px;
    border-radius: 0 0 5px 0;
}

/* Заголовок панели заметок */
.notes-header {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #3182ce;
    color: white;
    border-radius: 12px 12px 0 0;
    cursor: move;
    user-select: none;
}

/* Запрет перетаскивания для свернутой панели */
.notes-panel.collapsed .notes-header {
    cursor: default;
}

.notes-toggle {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 12px;
}

.notes-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.notes-toggle .chevron-icon {
    transition: transform 0.3s ease;
}

.notes-panel.collapsed .notes-toggle .chevron-icon {
    transform: rotate(-180deg);
}

.notes-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.notes-actions {
    display: flex;
    gap: 8px;
}

.notes-action-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* ==================== ФИЛЬТР ЗАМЕТОК ==================== */

/* Контейнер кнопки фильтра с выпадающим списком */
.notes-filter-wrapper {
    position: relative;
}

/* Кнопка фильтра */
#notesFilterBtn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

#notesFilterBtn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Индикатор активного фильтра */
#notesFilterBtn.active {
    background: rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.6);
}

#notesFilterBtn.active::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #fbbf24;
    border-radius: 50%;
    border: 1px solid white;
}

/* Выпадающий список фильтра */
#notesFilterDropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    max-height: 400px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1010;
    display: none;
    overflow: hidden;
}

#notesFilterDropdown.show {
    display: block;
    animation: notesFilterSlideDown 0.2s ease;
}

@keyframes notesFilterSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Заголовок выпадающего списка */
.notes-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: white;
    color: #4a5568;
    font-weight: 600;
    font-size: 13px;
}

.notes-filter-clear {
    background: white;
    border: 2px solid #3182ce;
    color: #3182ce;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-filter-clear:hover {
    background: #f0f7ff;
}

/* Список диалогов */
.notes-filter-list {
    max-height: 250px;
    overflow-y: auto;
    padding: 8px 0;
}

/* Элемент списка фильтра */
.notes-filter-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 10px;
}

.notes-filter-item:hover {
    background: #f1f5f9;
}

.notes-filter-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #667eea;
    cursor: pointer;
    flex-shrink: 0;
}

.notes-filter-item-title {
    flex: 1;
    font-size: 13px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-filter-item-count {
    font-size: 12px;
    color: #94a3b8;
    flex-shrink: 0;
}

/* Пустое состояние фильтра */
.notes-filter-empty {
    padding: 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* Действия внизу фильтра */
.notes-filter-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    background: #f8fafc;
    border-top: 1px solid #3182ce;
}

.notes-filter-select-all,
.notes-filter-export {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-filter-select-all {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.notes-filter-select-all:hover {
    background: #e2e8f0;
}

.notes-filter-export {
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.notes-filter-export:hover {
    background: #f1f5f9;
    transform: scale(1.02);
}

/* Метка источника "Свои записи" в заметке */
.note-source-own {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

/* ==================== КОНЕЦ ФИЛЬТРА ЗАМЕТОК ====================  */

/* Контент заметок */
.notes-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.notes-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Пустое состояние */
.notes-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.notes-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.notes-empty-text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
}

.notes-empty-hint {
    font-size: 14px;
    line-height: 1.5;
}

/* Элемент заметки */
.note-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
}

.note-item:hover {
    background: #f1f5f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.note-item.collapsed .note-header {
    cursor: pointer;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
}

.note-header:hover .note-collapse-icon {
    color: #3b82f6;
}

.note-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}

.note-collapse-icon {
    color: #94a3b8;
    font-size: 10px;
    transition: all 0.2s ease;
}

.note-date {
    color: #94a3b8;
}

.note-source {
    color: #3b82f6;
    cursor: pointer;
    transition: color 0.2s ease;
}

.note-source:hover {
    color: #2563eb;
    text-decoration: underline;
}

.note-edited {
    color: #f59e0b;
}

.note-actions {
    display: flex;
    gap: 4px;
}

.note-action-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.note-action-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #475569;
}

/* Превью заметки (показывается когда свернута) */
.note-preview {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-preview.hidden {
    display: none;
}

/* Полный текст заметки */
.note-text {
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-top: 8px;
}

.note-text > *:first-child {
    margin-top: 0;
}

.note-text > *:last-child {
    margin-bottom: 0;
}

.note-text.hidden {
    display: none;
}

/* Сохраняем форматирование из оригинального сообщения */
.note-text pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    margin: 8px 0;
}

.note-text code {
    background: #f1f5f9;
    color: #e11d48;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.note-text ul, .note-text ol {
    margin: 8px 0;
    padding-left: 24px;
}

.note-text li {
    margin: 4px 0;
}

.note-text strong {
    font-weight: 600;
    color: #1e293b;
}

.note-text em {
    font-style: italic;
    color: #475569;
}

.note-text h1, .note-text h2, .note-text h3, 
.note-text h4, .note-text h5, .note-text h6 {
    font-weight: 600;
    margin: 12px 0 8px 0;
    color: #1e293b;
}

.note-text h1 { font-size: 20px; }
.note-text h2 { font-size: 18px; }
.note-text h3 { font-size: 16px; }
.note-text h4 { font-size: 15px; }
.note-text h5 { font-size: 14px; }
.note-text h6 { font-size: 13px; }

.note-text blockquote {
    border-left: 3px solid #3b82f6;
    margin: 8px 0;
    padding-left: 12px;
    color: #475569;
    font-style: italic;
}

.note-text p {
    margin: 8px 0;
}

/* ==================== СТИЛИ ДЛЯ AI-ТАБЛИЦ В ЗАМЕТКАХ ==================== */

.note-text .ai-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.note-text .ai-table thead {
    background: none;
}

.note-text .ai-table th {
    background: none;
    color: #1e293b;
    border-bottom: 2px solid #e2e8f0;
    padding: 10px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
}

.note-text .ai-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    color: #334155;
}

.note-text .ai-table tr:last-child td {
    border-bottom: none;
}

.note-text .ai-table tr:hover td {
    background: #f8fafc;
}

/* ==================== СТИЛИ ДЛЯ БЛОКОВ КОДА В ЗАМЕТКАХ ==================== */

.note-text .code-container {
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #282c34;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.note-text .code-header {
    background: #21252b;
    padding: 8px 12px;
    border-bottom: 1px solid #3a3f4b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.note-text .code-language {
    color: #abb2bf;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.note-text .code-block {
    background: #282c34;
    color: #abb2bf;
    padding: 16px;
    overflow-x: auto;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.note-text .code-block::-webkit-scrollbar {
    height: 8px;
}

.note-text .code-block::-webkit-scrollbar-track {
    background: #21252b;
}

.note-text .code-block::-webkit-scrollbar-thumb {
    background: #3a3f4b;
    border-radius: 4px;
}

.note-text .code-block::-webkit-scrollbar-thumb:hover {
    background: #4a4f5b;
}

/* ==================== ПОДСВЕТКА СИНТАКСИСА В ЗАМЕТКАХ ==================== */

.note-text .hljs-keyword {
    color: #c678dd; /* Фиолетовый для ключевых слов */
}

.note-text .hljs-string {
    color: #98c379; /* Зелёный для строк */
}

.note-text .hljs-number {
    color: #d19a66; /* Оранжевый для чисел */
}

.note-text .hljs-title,
.note-text .hljs-function {
    color: #61afef; /* Голубой для функций */
}

.note-text .hljs-comment {
    color: #5c6370; /* Серый для комментариев */
    font-style: italic;
}

.note-text .hljs-attr {
    color: #e06c75; /* Красноватый для атрибутов */
}

.note-text .hljs-built_in,
.note-text .hljs-class {
    color: #e5c07b; /* Жёлтый для встроенных функций */
}

.note-text .hljs-variable {
    color: #e06c75;
}

.note-text .hljs-operator {
    color: #56b6c2;
}

/* Таблица в заметке (старые стили для совместимости) */
.note-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
}

.note-table td, .note-table th {
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    background: white;
}

.note-table th {
    background: #f8fafc;
    font-weight: 600;
}

.note-table tr:nth-child(even) td {
    background: #f8fafc;
}

/* Textarea для редактирования заметки */
.note-edit-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #3b82f6;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
    font-family: inherit;
    resize: vertical;
    background: white;
    outline: none;
}

/* ==================== СТИЛИ ДЛЯ РЕДАКТИРУЕМОГО DIV (ContentEditable) ==================== */

.note-edit-content {
    width: 100%;
    min-height: 100px;
    max-height: 500px;
    padding: 12px;
    border: 2px solid #3b82f6;
    border-radius: 6px;
    background: #fefefe;
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    outline: none;
    overflow-y: auto;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transition: box-shadow 0.2s ease;
}

.note-edit-content:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Сохраняем форматирование при редактировании */
.note-edit-content pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    margin: 8px 0;
}

.note-edit-content code {
    background: #f1f5f9;
    color: #e11d48;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.note-edit-content ul,
.note-edit-content ol {
    margin: 8px 0;
    padding-left: 24px;
}

.note-edit-content li {
    margin: 4px 0;
}

.note-edit-content h1,
.note-edit-content h2,
.note-edit-content h3,
.note-edit-content h4,
.note-edit-content h5,
.note-edit-content h6 {
    font-weight: 600;
    margin: 12px 0 8px 0;
    color: #1e293b;
}

.note-edit-content h1 { font-size: 20px; }
.note-edit-content h2 { font-size: 18px; }
.note-edit-content h3 { font-size: 16px; }
.note-edit-content h4 { font-size: 15px; }
.note-edit-content h5 { font-size: 14px; }
.note-edit-content h6 { font-size: 13px; }

.note-edit-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
}

.note-edit-content table td,
.note-edit-content table th {
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
}

.note-edit-content table th {
    background: #f8fafc;
    font-weight: 600;
}

/* AI-таблицы в редактируемом содержимом */
.note-edit-content .ai-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
}

.note-edit-content .ai-table thead {
    background: none;
}

.note-edit-content .ai-table th {
    background: none;
    color: #1e293b;
    border-bottom: 2px solid #e2e8f0;
    padding: 10px;
    font-weight: 600;
}

.note-edit-content .ai-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
}

/* Блоки кода в редактируемом содержимом */
.note-edit-content .code-container {
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #282c34;
}

.note-edit-content .code-header {
    background: #21252b;
    padding: 8px 12px;
    border-bottom: 1px solid #3a3f4b;
}

.note-edit-content .code-language {
    color: #abb2bf;
    font-size: 12px;
    text-transform: uppercase;
}

.note-edit-content .code-block {
    background: #282c34;
    color: #abb2bf;
    padding: 16px;
    overflow-x: auto;
    font-family: 'Courier New', Consolas, Monaco, monospace;
}

/* Модальное окно для ручного добавления заметки */
.modal-compact {
    background: white;
    border-radius: 5px;
    width: 500px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 24px;  /* Добавлен общий отступ */
}

.form-textarea {
    width: 100%;
    padding: 12px 14px;  /* Увеличены отступы внутри поля */
    border: 1px solid #e2e8f0;
    border-radius: 8px;  /* Увеличен радиус скругления */
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 150px;  /* Увеличена минимальная высота */
    font-family: inherit;
    box-sizing: border-box;  /* Добавлено для корректного расчета ширины */
}

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

.modal-actions {
    margin-top: 20px;  /* Отступ сверху от текстового поля */
    display: flex;
    gap: 10px;  /* Расстояние между кнопками */
    justify-content: flex-end;  /* Выравнивание кнопок справа */
}

/* Кнопка "В заметки" в сообщениях */
.add-note-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-note-btn:hover {
    background: rgba(103, 126, 234, 0.1);
    color: #667eea;
}

/* Кнопка "В заметки" в tooltip */
.tooltip-btn.add-note-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.tooltip-btn.add-note-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Секция «Уведомления» (.notification и четыре цветовых класса) УДАЛЕНА —
   ТЗ «Панель системных уведомлений», T1.1 (P18). Это был мёртвый дубль:
   разметку всплывающего сообщения целиком задаёт `style.cssText` в
   `showNotification` (script.js), а класс `.notification.show` код не ставил
   ни разу — правила тут не применялись никогда. Палитра у них была своя
   (#10b981 / #3b82f6 / #f59e0b / #ef4444), запрещённая регламентом стиля, и
   два оформления одного блока разъехались бы на первой же правке.
   Оформление панели системных уведомлений — в notify-center.css. */

/* Подсветка сообщения при переходе к источнику */
.highlight-flash {
    animation: highlightFlash 2s ease;
}

@keyframes highlightFlash {
    0% { background-color: transparent; }
    20% { background-color: rgba(102, 126, 234, 0.2); }
    80% { background-color: rgba(102, 126, 234, 0.2); }
    100% { background-color: transparent; }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .notes-panel {
        width: 320px;
        height: 500px;
        right: 10px;
        top: 390px;
    }
    
    .notes-panel.collapsed {
        transform: translateX(290px);
    }
    
    .note-text {
        font-size: 13px;
    }
}

/* ==================== СТИЛИ ДЛЯ OPENAI ASSISTANTS ==================== */

/* Форма добавления ассистента */
.assistant-add-form {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.assistant-id-input {
    flex: 1.5;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9rem;
}

.assistant-name-input {
    flex: 1;
}

/* Список ассистентов */
.assistants-list {
    margin-top: 20px;
}

.no-assistants {
    text-align: center;
    color: #718096;
    padding: 20px;
    background: #f7fafc;
    border-radius: 8px;
    font-style: italic;
}

.assistant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.assistant-item:hover {
    border-color: #cbd5e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.assistant-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.assistant-name {
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 6px;
}

.assistant-name::before {
    content: '🤖';
    font-size: 1.1em;
}

.assistant-id {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.85rem;
    color: #718096;
}

/* Иконка режима ассистента в узле */
.assistant-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 20px;
    opacity: 0.8;
    animation: assistantPulse 2s infinite;
}

@keyframes assistantPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Режим ассистента для узла */
.dialog-node.assistant-mode {
    border-color: #805ad5;
    box-shadow: 0 0 0 2px rgba(128, 90, 213, 0.1);
}

.dialog-node.assistant-mode .node-header {
    background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
}

.dialog-node.assistant-mode .model-select {
    background: rgba(255, 255, 255, 0.95);
    border-color: #805ad5;
}

/* Кнопки управления ассистентами */
.btn-danger.btn-sm {
    padding: 4px 12px;
    font-size: 0.85rem;
}

/* Группа опций в селекторе */
optgroup[label="OpenAI Assistants"] {
    font-weight: 600;
    color: #805ad5;
}

optgroup[label="OpenAI Assistants"] option {
    padding-left: 20px;
    font-weight: normal;
}

/* Индикатор thread в сообщениях */
.message.assistant-thread-info {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-left: 3px solid #805ad5;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 0.85rem;
    color: #4a5568;
    font-style: italic;
}

/* Адаптивность */
@media (max-width: 768px) {
    .assistant-add-form {
        flex-direction: column;
    }
    
    .assistant-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .assistant-info {
        text-align: center;
    }
}

/* ==================== СТИЛИ ДЛЯ КОНТЕЙНЕРОВ КОДА ==================== */
/* Контейнер для блока кода */
.code-block-container {
        position: relative; /* кнопка «Копировать» встаёт в строку подписи языка */
        margin: 12px 0;
        border-radius: 7px;
        overflow: hidden;
        background: rgba(19, 52, 59, 0.05);
        border: none;
        box-shadow: none;
        max-width: 100%; /* Ограничиваем ширину */
        box-sizing: border-box; /* Включаем padding и border в ширину */
    }

    /* Заголовок блока кода — строка подписи в той же плашке, без своей заливки */
    .code-block-header {
        display: flex;
        align-items: center;
        min-height: 32px;
        padding: 0 44px 0 16px;
        background: transparent;
        border-bottom: none;
        font-size: 12px;
    }

    /* Язык программирования */
    .code-language {
        color: rgba(19, 52, 59, 0.55);
        font-weight: 500;
        text-transform: lowercase;
        letter-spacing: 0;
        font-size: 12px;
    }

    /* Обертка для кода с кнопкой (кнопка позиционируется от контейнера) */
    .code-block-wrapper {
        position: static;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden; /* Скрываем выходящий контент */
    }

    /* Кнопка копирования — в правом углу строки подписи, без контура */
    .code-copy-btn {
        position: absolute;
        top: 3px;
        right: 6px;
        width: 26px;
        height: 26px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 6px;
        color: rgba(19, 52, 59, 0.5);
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        z-index: 10;
        opacity: 1;
    }

    .code-copy-btn:hover {
        background: rgba(19, 52, 59, 0.08);
        color: #13343B;
    }

    .code-copy-btn.copied {
        background: transparent;
        color: #20808D;
    }

    .code-copy-btn svg {
        width: 15px;
        height: 15px;
        pointer-events: none;
    }
    
    /* Блок кода - С ОГРАНИЧЕННОЙ ШИРИНОЙ И ГОРИЗОНТАЛЬНОЙ ПРОКРУТКОЙ */
    .code-block {
        margin: 0;
        padding: 20px;
        padding-right: 65px; /* Отступ справа для кнопки */
        overflow-x: auto; /* Горизонтальная прокрутка только для кода */
        overflow-y: hidden; /* Скрываем вертикальную прокрутку */
        background: #282c34;
        color: #abb2bf;
        font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', Consolas, Monaco, 'Courier New', monospace;
        font-size: 15px;
        line-height: 1.7;
        tab-size: 4;
        white-space: pre;
        font-weight: 400;
        letter-spacing: 0.3px;
        max-width: 100%; /* Ограничиваем ширину */
        box-sizing: border-box;
    }
    
    /* Фикс для предотвращения растягивания контейнера */
    .message-content .code-block-container {
        max-width: calc(100% - 10px); /* Немного меньше чем контейнер сообщения */
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Ограничение ширины pre элемента */
    .code-block pre {
        margin: 0;
        max-width: 100%;
        overflow-x: auto;
    }
    
    .code-block code {
        background: transparent;
        padding: 0;
        border: none;
        color: #e6e6e6;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        display: inline-block; /* Позволяет коду расширяться по горизонтали */
        min-width: 100%; /* Минимальная ширина для коротких строк */
    }
    
    /* Улучшенный скроллбар для блока кода */
    .code-block::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }

    .code-block::-webkit-scrollbar-track {
        background: transparent;
    }

    .code-block::-webkit-scrollbar-thumb {
        background: rgba(19, 52, 59, 0.18);
        border-radius: 3px;
    }

    .code-block::-webkit-scrollbar-thumb:hover {
        background: rgba(19, 52, 59, 0.3);
    }
    
    /* Скроллбар всегда видимый для блоков с длинными строками */
    .code-block:hover::-webkit-scrollbar {
        display: block;
    }
    
    /* Инлайн код */
    .inline-code {
        background: #3a3f4b;
        padding: 3px 8px;
        border-radius: 4px;
        font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', Consolas, Monaco, 'Courier New', monospace;
        font-size: 14px;
        color: #e06c75;
        border: 1px solid #4b5263;
        white-space: nowrap;
        font-weight: 500;
        max-width: 100%;
        overflow-x: auto;
        display: inline-block;
    }
    
    /* Улучшенная подсветка синтаксиса с более яркими цветами */
    .code-block .keyword {
        color: #c678dd;
        font-weight: 500;
    }
    
    .code-block .string {
        color: #98c379;
    }
    
    .code-block .number {
        color: #d19a66;
    }
    
    .code-block .comment {
        color: #7f848e;
        font-style: italic;
        opacity: 0.8;
    }
    
    .code-block .function {
        color: #61afef;
        font-weight: 500;
    }
    
    .code-block .class {
        color: #e5c07b;
        font-weight: 500;
    }
    
    .code-block .operator {
        color: #56b6c2;
    }
    
    .code-block .punctuation {
        color: #abb2bf;
    }
    
    /* Светлая тема для кода */
    /* 04.10: контейнер/шапка/кнопка блока кода в светлой теме узла — общие
       (плашка палитры чата выше), отдельные цвета здесь больше не нужны. */

    .dialog-node.light-theme .inline-code {
        background: #f6f8fa;
        color: #d73a49;
        border-color: #d1d5da;
    }
    
    /* Светлая тема - подсветка синтаксиса */
    .dialog-node.light-theme .code-block .keyword {
        color: #d73a49;
        font-weight: 500;
    }
    
    .dialog-node.light-theme .code-block .string {
        color: #032f62;
    }
    
    .dialog-node.light-theme .code-block .number {
        color: #005cc5;
    }
    
    .dialog-node.light-theme .code-block .comment {
        color: #6a737d;
        font-style: italic;
    }
    
    .dialog-node.light-theme .code-block .function {
        color: #6f42c1;
        font-weight: 500;
    }
    
    .dialog-node.light-theme .code-block .class {
        color: #e36209;
        font-weight: 500;
    }
    
    /* Анимация для уведомления о копировании */
    @keyframes copySuccess {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1) rotate(5deg);
        }
        100% {
            transform: scale(1);
        }
    }
    
    .code-copy-btn.copied {
        animation: copySuccess 0.3s ease;
    }
    
    /* Адаптивность для маленьких экранов */
    @media (max-width: 480px) {
        .code-block {
            font-size: 12.5px;
        }
        
        .inline-code {
            font-size: 13px;
        }
    }
    
    /* Для средних экранов */
    /* Для больших экранов */
    @media (min-width: 1400px) {
        .inline-code {
            font-size: 15px;
        }
    }
    
    /* Предотвращение переноса строк в блоке кода */
    .code-block {
        word-break: normal;
        word-wrap: normal;
        overflow-wrap: normal;
        white-space: pre; /* Сохраняем форматирование и пробелы */
    }
    
    /* При наведении на контейнер кода показываем кнопку ярче */
    .code-block-container:hover .code-copy-btn {
        opacity: 1;
    }
    
    /* Дополнительные улучшения для читаемости */
    .code-block {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    
    /* Фикс для узлов диалога - предотвращаем расширение */
    .dialog-node .message-content {
        overflow-x: hidden; /* Скрываем горизонтальную прокрутку в сообщениях */
        max-width: 100%;
    }
    
    /* Убеждаемся что код не выходит за пределы сообщения */
    .message.assistant .message-content .code-block-container,
    .message.user .message-content .code-block-container {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Индикатор наличия горизонтальной прокрутки */
    .code-block-container.has-scroll .code-block::after {
        content: '→';
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: rgba(19, 52, 59, 0.4);
        font-size: 18px;
        font-weight: bold;
        pointer-events: none;
        opacity: 0.5;
    }


/* ==================== СТИЛИ ДЛЯ ТАБЛИЦ В СООБЩЕНИЯХ ==================== */
.message-table-container {
    overflow-x: auto;
    margin: 10px 0;
    border-radius: 8px;
    background: #f8f9fa;
    padding: 10px;
    position: relative;
}

.message-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.message-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.message-table th:last-child {
    border-right: none;
}

.message-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    font-size: 14px;
}

.message-table td:last-child {
    border-right: none;
}

.message-table tbody tr:last-child td {
    border-bottom: none;
}

.message-table tbody tr:hover {
    background: #f7fafc;
}

.message-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.message-table tbody tr:nth-child(even):hover {
    background: #edf2f7;
}

.table-copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    color: #4a5568;
    transition: all 0.2s;
    opacity: 0;
}

.table-copy-btn:hover {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.message-table-container:hover .table-copy-btn {
    opacity: 1;
}

    /* Стили для обычных текстовых блоков в тройных кавычках */
    .text-block {
        margin: 16px 0;
        padding: 16px;
        background: #f6f8fa;
        border: 1px solid #d1d5da;
        border-radius: 6px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    }
    
    .text-block pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.6;
        color: #24292e;
        background: transparent;
    }
    
    /* Убедимся, что таблицы отображаются правильно */
    .message-content table {
        margin: 16px 0;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }
    
    /* Предотвращаем применение стилей кода к таблицам */
    .message-content table:not(.code-table) {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
    
/* Сохранение форматирования при подсветке */
.highlighted-text-fragment {
    background-color: rgba(255, 235, 59, 0.5);
    padding: 0 2px;
    border-radius: 2px;
    animation: highlight-pulse 1s ease-in-out;
    /* Сохраняем исходное форматирование */
    display: inline;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.message-content[data-original-html] {
    /* Индикатор что есть сохраненный оригинал */
    position: relative;
}

/* Анимация мигания для подсвеченного текста */
@keyframes highlight-blink {
    0%, 100% {
        background-color: rgba(255, 235, 59, 0.5);
        box-shadow: 0 0 8px rgba(255, 235, 59, 0.6);
    }
    50% {
        background-color: rgba(255, 235, 59, 0.8);
        box-shadow: 0 0 12px rgba(255, 235, 59, 0.9);
    }
}

/* Улучшенная подсветка фрагмента */
.highlighted-text-fragment {
    background-color: rgba(255, 235, 59, 0.5);
    padding: 2px 4px;
    border-radius: 3px;
    display: inline;
    white-space: pre-wrap;
    word-wrap: break-word;
    transition: all 0.3s ease;
}

/* Контейнер сообщений должен иметь правильные стили для прокрутки */
.node-messages {
    scroll-behavior: smooth;
    position: relative;
}

/* При наведении на подсвеченный фрагмент */
.highlighted-text-fragment:hover {
    background-color: rgba(255, 235, 59, 0.7);
    box-shadow: 0 0 10px rgba(255, 235, 59, 0.8);
}

/* Обертка для файла с кнопкой удаления */
.simple-file-item-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 2px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.simple-file-item-wrapper:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Кнопка удаления файла из системного сообщения */
.remove-file-btn {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    flex-shrink: 0;
}

.simple-file-item-wrapper:hover .remove-file-btn {
    opacity: 1;
    visibility: visible;
}

.remove-file-btn:hover {
    background: #fee2e2;
    color: #dc2626;
    transform: scale(1.1);
}

.remove-file-btn:active {
    transform: scale(0.95);
}

/* Обновляем стиль simple-file-item для flex */
.simple-file-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Темная тема */

/* RAG Settings Styles */
.rag-settings {
    margin-top: 10px;
    padding: 10px;
    background: rgba(52, 73, 94, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(52, 73, 94, 0.2);
}

.rag-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.rag-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.rag-checkbox {
    display: none;
}

.rag-toggle-slider {
    width: 40px;
    height: 20px;
    background: #ccc;
    border-radius: 20px;
    margin-right: 10px;
    position: relative;
    transition: 0.3s;
}

.rag-toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: 0.3s;
}

.rag-checkbox:checked + .rag-toggle-slider {
    background: #4CAF50;
}

.rag-checkbox:checked + .rag-toggle-slider::after {
    transform: translateX(20px);
}

.rag-label {
    font-size: 14px;
    font-weight: 500;
    color: #34495e;
}

.rag-config-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.3s;
}

.rag-config-btn:hover {
    transform: rotate(90deg);
}

.rag-config {
    background: white;
    padding: 15px;
    border-radius: 6px;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.rag-config-group {
    margin-bottom: 15px;
}

.rag-config-group label {
    display: block;
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.rag-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.rag-slider {
    width: 70%;
    margin-right: 10px;
}

.rag-input-number {
    width: 60px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.rag-test-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.3s;
}

.rag-test-btn:hover {
    background: #2980b9;
}

/* RAG Context Preview */
.rag-context-preview {
    margin-top: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.rag-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
}

.rag-clear-btn {
    background: transparent;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 16px;
}

.rag-context-items {
    font-size: 13px;
    color: #555;
}

.rag-context-item {
    background: white;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-left: 3px solid #3498db;
}

.rag-context-item-score {
    float: right;
    color: #27ae60;
    font-weight: bold;
    font-size: 12px;
}

.rag-context-item-text {
    margin-top: 5px;
    line-height: 1.4;
}

.rag-context-item-meta {
    margin-top: 5px;
    font-size: 11px;
    color: #95a5a6;
}

/* Индикатор активного RAG */

/* ������ �������� ����� */
.gantt-charts-btn {
    background: rgba(31, 31, 31, 0.06);
    border: 1px solid rgba(31, 31, 31, 0.12);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.gantt-charts-btn svg {
    color: #6f6f6f;
    transition: color 0.2s ease;
}

.gantt-charts-btn:hover {
    background: rgba(31, 31, 31, 0.09);
    border-color: rgba(31, 31, 31, 0.18);
    transform: scale(1.05);
}

.gantt-charts-btn:hover svg {
    color: #6f6f6f;
}

.gantt-charts-btn.active {
    background: rgba(31, 31, 31, 0.09);
    border-color: rgba(31, 31, 31, 0.18);
}

.gantt-charts-btn.active svg {
    color: #1f1f1f;
}
.node-header.rag-active {
    border-left: 4px solid #4CAF50;
}

.rag-status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 10px;
    animation: pulse 2s infinite;
}

.rag-status-indicator.active {
    background: #4CAF50;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Уведомление об использовании RAG */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
    20% { opacity: 1; transform: translateX(-50%) translateY(0); }
    80% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

.rag-notification {
    animation: fadeInOut 3s ease-in-out;
}

/* ==================== RAG MODAL STYLES ==================== */

/* Оверлей модального окна */
.rag-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.18);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(2px);
}

.rag-modal-overlay.show {
    display: flex;
}

/* Модальное окно */
.rag-modal {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 520px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(100, 116, 139, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    animation: ragModalSlideIn 0.2s ease-out;
}

/* Закрепленное модальное окно */
.rag-modal-overlay.pinned .rag-modal {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 400px;
    max-height: calc(100vh - 40px);
}

@keyframes ragModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Заголовок модального окна */
.rag-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
}

.rag-modal-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rag-modal-header-icon {
    stroke: #64748b;
    flex-shrink: 0;
}

.rag-modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.01em;
}

.rag-modal-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Иконочные кнопки в хедере */
.rag-modal-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.rag-modal-icon-btn:hover {
    background: rgba(100, 116, 139, 0.08);
    color: #475569;
}

.rag-modal-icon-btn svg {
    stroke: currentColor;
}

/* Тело модального окна */
.rag-modal-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

/* Секция в модальном окне */
.rag-modal-section {
    margin-bottom: 16px;
}

.rag-modal-section-toggle {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.08);
}

.rag-modal-section-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Выпадающий список для выбора email аккаунтов */
.email-dropdown-container {
    position: relative;
    width: 100%;
}

.email-dropdown-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    color: #2d3748;
    transition: all 0.2s ease;
}

.email-dropdown-selected:hover {
    border-color: #4a90e2;
    background: #f7fafc;
}

.email-dropdown-arrow {
    font-size: 0.75rem;
    color: #718096;
    transition: transform 0.2s ease;
}

.email-dropdown-options.show + .email-dropdown-selected .email-dropdown-arrow,
.email-dropdown-container:has(.email-dropdown-options.show) .email-dropdown-arrow {
    transform: rotate(180deg);
}

.email-dropdown-options {
    position: fixed; /* Изменено с absolute на fixed чтобы вырваться из модалки */
    top: auto; /* Позиция будет вычислена через JS */
    left: auto;
    right: auto;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    z-index: 10000; /* Увеличен для вывода поверх модалки */
    transition: all 0.2s ease;
}

.email-dropdown-options.show {
    max-height: 250px;
    overflow-y: auto;
    opacity: 1;
    padding: 4px 0;
}

.email-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.9rem;
    color: #2d3748;
}

.email-dropdown-item:hover {
    background: #f7fafc;
}

.email-dropdown-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #4a90e2;
    flex-shrink: 0;
}

.email-dropdown-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Переключатель RAG */
.rag-modal-toggle {
    display: inline-flex !important;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
    transition: opacity 0.2s ease;
}

.rag-modal-toggle-wrapper {
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s ease;
}

.rag-modal-toggle-wrapper[style*="opacity: 0.5"] .rag-modal-toggle {
    cursor: not-allowed;
}

.rag-modal-toggle-wrapper[style*="opacity: 0.5"] .rag-modal-label {
    color: #94a3b8;
}

.rag-modal-checkbox {
    display: none;
}

.rag-modal-toggle-slider {
    width: 36px;
    height: 20px;
    background: #cbd5e0;
    border-radius: 20px;
    position: relative;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    margin-right: 10px;
}

.rag-modal-toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rag-modal-checkbox:checked + .rag-modal-toggle-slider {
    background: #3b82f6;
}

.rag-modal-checkbox:checked + .rag-modal-toggle-slider::after {
    transform: translateX(16px);
}

.rag-modal-checkbox:disabled + .rag-modal-toggle-slider {
    background: #e2e8f0;
    cursor: not-allowed;
}

.rag-modal-checkbox:disabled + .rag-modal-toggle-slider::after {
    background: #cbd5e0;
}

.rag-modal-toggle:hover .rag-modal-toggle-slider {
    background: #94a3b8;
}

.rag-modal-checkbox:checked + .rag-modal-toggle-slider:hover {
    background: #2563eb;
}

.rag-modal-checkbox:disabled + .rag-modal-toggle-slider:hover {
    background: #e2e8f0;
}

.rag-modal-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
    line-height: 1.4;
    white-space: normal;
}

/* Селектор режима RAG — карточки */
.rag-mode-selector {
    display: flex;
    gap: 8px;
}

.rag-mode-card {
    flex: 1;
    cursor: pointer;
    margin: 0;
}

.rag-mode-card input[type="radio"] {
    display: none;
}

.rag-mode-card-content {
    padding: 10px 12px;
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 8px;
    background: #fff;
    transition: all 0.15s ease;
}

.rag-mode-card:hover .rag-mode-card-content {
    border-color: rgba(100, 116, 139, 0.3);
    background: #f8fafc;
}

.rag-mode-card input:checked + .rag-mode-card-content {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 1px #3b82f6;
}

.rag-mode-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: #334155;
    font-weight: 500;
    font-size: 0.85rem;
}

.rag-mode-card-header svg {
    stroke: #64748b;
    flex-shrink: 0;
}

.rag-mode-card input:checked + .rag-mode-card-content .rag-mode-card-header svg {
    stroke: #3b82f6;
}

.rag-mode-card-desc {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.35;
}

/* Настройки RAG */
.rag-modal-settings {
    background: #f8fafc;
    border-radius: 8px;
    padding: 14px;
    margin-top: 12px;
    border: 1px solid rgba(100, 116, 139, 0.08);
}

/* Группа настроек */
.rag-modal-group {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.07);
}

.rag-modal-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Строка с фрагментами и кнопкой теста */
.rag-modal-group-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    border-bottom: none;
    padding-bottom: 0;
}

.rag-modal-group-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Селект */
.rag-modal-select,
.rag-modal-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 6px;
    font-size: 0.82rem;
    background: #fff;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.rag-modal-select:focus,
.rag-modal-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08);
}

.rag-modal-input {
    cursor: text;
}

.rag-modal-input::placeholder {
    color: #94a3b8;
}

/* Поиск документов */
.rag-modal-search-wrap {
    position: relative;
    margin-bottom: 6px;
}

.rag-modal-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    stroke: #94a3b8;
    pointer-events: none;
}

.rag-modal-input-search {
    padding-left: 28px !important;
}

/* Тулбар документов */
.rag-modal-docs-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

/* Плейсхолдер списка документов */
.rag-modal-docs-placeholder {
    color: #94a3b8;
    text-align: center;
    padding: 16px;
    font-size: 0.82rem;
}

/* Слайдер */
.rag-modal-slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rag-modal-slider {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.rag-modal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #3b82f6;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.rag-modal-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: #2563eb;
}

.rag-modal-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #3b82f6;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.rag-modal-value {
    min-width: 35px;
    text-align: center;
    font-weight: 600;
    color: #334155;
    font-size: 0.82rem;
}

/* Числовой ввод */
.rag-modal-input-number {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 6px;
    font-size: 0.82rem;
    text-align: center;
    color: #334155;
    background: #fff;
    transition: border-color 0.15s ease;
}

.rag-modal-input-number:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08);
}

/* Кнопка теста */
.rag-modal-test-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.2);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.rag-modal-test-btn:hover {
    background: #f1f5f9;
    border-color: rgba(100, 116, 139, 0.3);
    color: #1e293b;
}

.rag-modal-test-btn svg {
    stroke: #64748b;
    flex-shrink: 0;
}

.rag-modal-test-btn:hover svg {
    stroke: #475569;
}

/* Маленькие кнопки */
.rag-modal-small-btn {
    background: #fff;
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.18);
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.rag-modal-small-btn:hover {
    background: #f1f5f9;
    border-color: rgba(100, 116, 139, 0.3);
}

/* Список документов */
.rag-modal-documents-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid rgba(100, 116, 139, 0.12);
    border-radius: 6px;
    padding: 4px;
    background: #fff;
}

.rag-document-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.rag-document-item:hover {
    background: rgba(100, 116, 139, 0.05);
}

.rag-document-item input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
    accent-color: #3b82f6;
    width: 14px;
    height: 14px;
}

.rag-document-item label {
    flex: 1;
    cursor: pointer;
    font-size: 0.8rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #475569;
}

.rag-document-icon {
    font-size: 0.85rem;
}

.rag-document-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rag-document-chunks {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: auto;
    padding-left: 6px;
}

/* Превью контекста */
.rag-modal-preview {
    margin-top: 14px;
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(100, 116, 139, 0.08);
}

.rag-modal-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.rag-modal-preview-title {
    font-weight: 500;
    font-size: 0.82rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
}

.rag-modal-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.rag-modal-clear-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.rag-modal-clear-btn svg {
    stroke: currentColor;
}

.rag-modal-preview-items {
    max-height: 260px;
    overflow-y: auto;
}

/* Элемент контекста */
.rag-modal-context-item {
    background: #fff;
    padding: 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    border-left: 2px solid #3b82f6;
    position: relative;
}

.rag-modal-context-item:last-child {
    margin-bottom: 0;
}

.rag-modal-context-score {
    position: absolute;
    top: 8px;
    right: 8px;
    font-weight: 600;
    font-size: 0.72rem;
}

.rag-modal-context-text {
    margin-top: 4px;
    line-height: 1.45;
    color: #475569;
    font-size: 0.8rem;
}

.rag-modal-context-meta {
    margin-top: 4px;
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Футер модального окна */
.rag-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(100, 116, 139, 0.1);
}

/* Кнопки в футере */
.rag-modal-btn-secondary,
.rag-modal-btn-primary {
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.rag-modal-btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.15);
}

.rag-modal-btn-secondary:hover {
    background: #e2e8f0;
}

.rag-modal-btn-primary {
    background: #3b82f6;
    color: white;
    display: inline-flex;
    align-items: center;
}

.rag-modal-btn-primary:hover {
    background: #2563eb;
}

/* ==================== КНОПКА «ФАЙЛЫ» В ШАПКЕ УЗЛА ==================== */

.node-files-btn {
    background: transparent;
    border: none;
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    flex-shrink: 0;
    color: rgba(19, 52, 59, 0.55);
    outline: none;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    position: relative;
}

.node-files-btn svg {
    stroke: currentColor;
}

.node-files-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.node-files-btn:active {
    transform: scale(0.94);
}

.node-files-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

/* Активное состояние — есть прикреплённые файлы / панель открыта */
.node-files-btn.active,
.node-files-btn.has-files {
    color: #20808D;
    background: rgba(31, 184, 205, 0.14);
}

.node-files-btn.active:hover,
.node-files-btn.has-files:hover {
    color: #1FB8CD;
    background: rgba(31, 184, 205, 0.22);
}

/* Бейдж со счётчиком прикреплённых файлов (если используется) */
.node-files-btn .files-count-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #20B8CD;
    color: #FFFFFF;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
    line-height: 1.3;
}

/* ==================== КНОПКА RAG В ШАПКЕ УЗЛА ==================== */

.rag-settings-btn {
    background: transparent;
    border: none;
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    flex-shrink: 0;
    color: rgba(19, 52, 59, 0.55);
    outline: none;
    padding: 0;
}

.rag-settings-btn svg {
    stroke: currentColor;
}

.rag-settings-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.rag-settings-btn:active {
    transform: scale(0.94);
}

.rag-settings-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

.rag-settings-btn.active {
    color: #5db87a;
    background: rgba(93, 184, 122, 0.12);
}

.rag-settings-btn.active:hover {
    color: #6ec98a;
    background: rgba(93, 184, 122, 0.20);
}

/* RAG кнопка — предупреждение об авторизации */
.rag-settings-btn.auth-warning {
    color: #d4706a;
    background: rgba(212, 112, 106, 0.12);
    animation: rag-auth-pulse 2s ease-in-out infinite;
}

.rag-settings-btn.auth-warning:hover {
    color: #e07d77;
    background: rgba(212, 112, 106, 0.20);
}

@keyframes rag-auth-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Предупреждение об авторизации RAG в модалке */
.rag-auth-warning {
    background: rgba(212, 112, 106, 0.12);
    color: var(--text, #e8e3db);
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 3px solid #d4706a;
    font-size: 0.9em;
    line-height: 1.5;
}

.rag-auth-warning a {
    text-decoration: underline;
}

.rag-auth-warning a:hover {
    opacity: 0.8;
}

/* Предупреждение о недоступности RAG сервера */
.rag-server-warning {
    background: rgba(201, 153, 94, 0.12);
    color: var(--text, #e8e3db);
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 3px solid var(--warning, #c9995e);
    font-size: 0.9em;
    line-height: 1.5;
}

/* Кнопка анализа графиков */
.chart-analysis-btn {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chart-analysis-btn svg {
    stroke: #64748b;
    transition: stroke 0.2s ease;
}

.chart-analysis-btn:hover {
    background: rgba(100, 116, 139, 0.15);
    border-color: rgba(100, 116, 139, 0.3);
    transform: scale(1.05);
}

.chart-analysis-btn:hover svg {
    stroke: #475569;
}

.chart-analysis-btn.active {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
}

.chart-analysis-btn.active svg {
    stroke: #667eea;
}

/* Кнопка анализатора почты */
.email-analyzer-btn {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.email-analyzer-btn svg {
    stroke: #64748b;
    transition: stroke 0.2s ease;
}

.email-analyzer-btn:hover {
    background: rgba(100, 116, 139, 0.15);
    border-color: rgba(100, 116, 139, 0.3);
    transform: scale(1.05);
}

.email-analyzer-btn:hover svg {
    stroke: #475569;
}

.email-analyzer-btn:active {
    transform: scale(0.95);
}

/* Кнопка прямого анализа почты */
.email-direct-btn {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.email-direct-btn:hover {
    background: rgba(100, 116, 139, 0.2);
    border-color: rgba(100, 116, 139, 0.4);
    transform: scale(1.05);
    color: #475569;
}

.email-direct-btn:active {
    transform: scale(0.95);
}

/* ==================== DROPDOWN МЕНЮ ИНСТРУМЕНТОВ В УЗЛЕ ==================== */
.node-tools-dropdown {
    position: relative;
    flex-shrink: 0;
}

.node-tools-btn {
    background: transparent;
    border: none;
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    flex-shrink: 0;
    color: rgba(19, 52, 59, 0.55);
    outline: none;
    padding: 0;
}

.node-tools-btn svg {
    stroke: currentColor;
}

.node-tools-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.node-tools-btn:active {
    transform: scale(0.94);
}

.node-tools-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

.node-tools-btn.active {
    color: #20808D;
    background: rgba(31, 184, 205, 0.14);
}

.node-tools-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    overflow: hidden;
    padding: 4px 0;
}

.node-tools-menu.show {
    display: block;
    animation: toolsMenuFadeIn 0.15s ease-out;
}

@keyframes toolsMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.node-tools-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
    transition: all 0.15s ease;
    text-align: left;
    white-space: nowrap;
}

.node-tools-menu-item svg {
    flex-shrink: 0;
    stroke: #64748b;
    transition: stroke 0.15s ease;
}

.node-tools-menu-item:hover {
    background: rgba(100, 116, 139, 0.08);
    color: #1e293b;
}

.node-tools-menu-item:hover svg {
    stroke: #475569;
}

.node-tools-menu-item:active {
    background: rgba(100, 116, 139, 0.14);
}

.node-tools-menu-divider {
    height: 1px;
    background: rgba(100, 116, 139, 0.12);
    margin: 4px 8px;
}

/* Стили для полноэкранного режима */
.node-fullscreen-css .node-tools-menu {
    top: calc(100% + 6px);
}
/* ==================== / DROPDOWN МЕНЮ ИНСТРУМЕНТОВ В УЗЛЕ ==================== */

/* Счетчик непрочитанных писем */
.email-direct-counter {
    animation: pulse-counter 2s ease-in-out infinite;
}

@keyframes pulse-counter {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Индикатор активного RAG в заголовке узла */
.node-header.rag-active {
    border-left: 4px solid #4CAF50;
    padding-left: calc(1rem - 4px);
}

/* ==================== СТИЛИ ДЛЯ ФИЛЬТРАЦИИ RAG ==================== */

/* Текст помощи под настройками */
.rag-modal-help-text {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 3px;
    line-height: 1.35;
}

/* Статистика фильтрации */
.rag-modal-preview-stats {
    margin-bottom: 8px;
}

.rag-filter-stats {
    display: flex;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(100, 116, 139, 0.04);
    border-radius: 5px;
    font-size: 0.78rem;
    color: #475569;
    align-items: center;
}

.rag-filter-stats span {
    display: flex;
    align-items: center;
}

.rag-filter-stats .filtered {
    color: #ef4444;
}

.rag-filter-stats .accepted {
    color: #22c55e;
    font-weight: 600;
}

/* Цветовая индикация уровня схожести */
.rag-score-high {
    background: #dcfce7;
    color: #166534;
}

.rag-score-medium {
    background: #fef3c7;
    color: #92400e;
}

.rag-score-low {
    background: #fee2e2;
    color: #991b1b;
}

/* Элемент отфильтрованный */
.rag-modal-context-item.filtered-out {
    opacity: 0.35;
}

/* Информационный блок о фильтрации */
.rag-filter-info {
    background: #eff6ff;
    border-left: 2px solid #3b82f6;
    padding: 8px 10px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 0.78rem;
    color: #1e40af;
}

.rag-filter-info strong {
    display: block;
    margin-bottom: 2px;
    font-size: 0.82rem;
}

/* Адаптивность RAG модала */
@media (max-width: 640px) {
    .rag-modal {
        width: 95%;
        max-width: none;
    }

    .rag-modal-overlay.pinned .rag-modal {
        width: calc(100% - 20px);
        right: 10px;
        top: 10px;
    }

    .rag-mode-selector {
        flex-direction: column;
    }
}

/* ==================== EMAIL ANALYZER MODAL ==================== */

/* Широкая модалка (используется анализатором почты) */
.rag-modal.rag-modal--wide {
    max-width: 760px;
}

/* Иконка внутри section-label */
.rag-modal-label-icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 6px;
    stroke: #64748b;
    flex-shrink: 0;
}

/* Уточняющий лейбл под секцией (С даты / По дату / Максимум) */
.rag-modal-sublabel {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 4px;
}

/* Сетка 2×1 для парных полей */
.rag-modal-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
}

.rag-modal-group-inline--end {
    align-items: flex-end;
}

/* Textarea выравниваем с input */
.rag-modal-textarea {
    cursor: text;
    resize: vertical;
    min-height: 64px;
    font-family: inherit;
    line-height: 1.4;
}

/* SVG-стрелка вместо ▼ в селекторе ящиков */
.email-dropdown-arrow {
    width: 14px;
    height: 14px;
    stroke: #94a3b8;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Иконка-конверт в пункте списка ящиков */
.email-dropdown-item-icon {
    width: 14px;
    height: 14px;
    stroke: #64748b;
    flex-shrink: 0;
}

/* Панель результатов поиска */
.email-results-panel {
    margin-top: 4px;
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
}

.email-results-loading,
.email-results-empty,
.email-results-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    color: #64748b;
    text-align: center;
    gap: 4px;
}

.email-results-loading p,
.email-results-empty p,
.email-results-error p {
    margin: 0;
    font-size: 0.85rem;
}

.email-results-error {
    color: #dc2626;
}

.email-results-error svg {
    stroke: #dc2626;
}

.email-results-empty svg {
    stroke: #94a3b8;
}

.email-results-empty-hint,
.email-results-error-detail {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
}

.email-results-summary {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.12);
    font-size: 0.82rem;
    color: #475569;
}

.email-results-summary b {
    color: #1e293b;
}

/* Карточка одного письма в результатах */
.email-result-card {
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    transition: border-color 0.15s ease;
}

.email-result-card:last-child {
    margin-bottom: 0;
}

.email-result-card--unread {
    border-color: rgba(59, 130, 246, 0.35);
    border-left: 3px solid #3b82f6;
    background: #f5faff;
}

.email-result-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

.email-result-subject {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e293b;
}

.email-result-subject span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-result-status-icon {
    width: 14px;
    height: 14px;
    stroke: #64748b;
    flex-shrink: 0;
}

.email-result-date {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

.email-result-from {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 6px;
}

.email-result-from b {
    color: #1e293b;
    font-weight: 500;
}

.email-result-preview {
    font-size: 0.8rem;
    color: #475569;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 6px;
    line-height: 1.45;
}

.email-result-meta {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.email-result-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #94a3b8;
}

.email-result-meta-icon {
    width: 12px;
    height: 12px;
    stroke: #94a3b8;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .rag-modal.rag-modal--wide {
        max-width: none;
    }

    .rag-modal-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ==================== 🧠 RAG MEMORY SYSTEM STYLES ==================== */

/* Уведомление о RAG-памяти */
.rag-memory-notification {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 16px;
    margin: 8px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    animation: slideInFromTop 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

.rag-memory-notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.4);
}

.rag-memory-notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rag-memory-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.rag-memory-message {
    flex: 1;
    line-height: 1.4;
}

.rag-memory-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.rag-memory-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Варианты уведомлений */
.rag-memory-saved {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
}

.rag-memory-restored {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
}

.rag-memory-active {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
    box-shadow: 0 4px 15px rgba(237, 137, 54, 0.3);
}

/* Анимация появления */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анимация исчезновения */
.rag-memory-notification.fade-out {
    animation: fadeOutDown 0.5s ease-out forwards;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Индикатор RAG-режима: рамка шкалы заполнения окна становится фиолетовой
   (пояснение — в подсказке). Предупреждения о заполнении важнее цвета режима. */
.token-counter.rag-memory-mode:not(.token-warning):not(.token-danger) {
    color: #6b46c1;
}

.token-counter.rag-memory-mode:not(.token-warning):not(.token-danger) .token-bar {
    border-color: #6b46c1;
    box-shadow: inset 0 0 0 1px rgba(107, 70, 193, 0.25);
}

/* Пульсация для привлечения внимания при первом включении */
.token-counter.rag-memory-mode.pulse {
    animation: ragMemoryPulse 2s ease-in-out 3;
}

@keyframes ragMemoryPulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.7);
    }
}

/* Адаптация для темной темы */

/* ==================== 📊 IMPORTANCE SCORE INDICATORS ==================== */

/* Индикатор важности сообщения */
.importance-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
    cursor: help;
    z-index: 5;
}

.importance-indicator:hover {
    opacity: 1;
    transform: scale(1.3);
}

/* Высокая важность (0.7-1.0) - зелёный */
.importance-high {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    box-shadow: 0 0 4px rgba(72, 187, 120, 0.5);
}

/* Средняя важность (0.4-0.7) - жёлтый */
.importance-medium {
    background: linear-gradient(135deg, #ecc94b 0%, #d69e2e 100%);
    box-shadow: 0 0 4px rgba(236, 201, 75, 0.5);
}

/* Низкая важность (0.0-0.4) - красный */
.importance-low {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    box-shadow: 0 0 4px rgba(245, 101, 101, 0.5);
}

/* Подсказка с деталями важности */
.importance-tooltip {
    position: absolute;
    top: 20px;
    right: 0;
    min-width: 200px;
    padding: 8px 12px;
    background: rgba(26, 32, 44, 0.95);
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.importance-indicator:hover + .importance-tooltip,
.importance-indicator:focus + .importance-tooltip {
    opacity: 1;
    visibility: visible;
}

.importance-tooltip-header {
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.importance-tooltip-factor {
    display: flex;
    justify-content: space-between;
    margin: 2px 0;
}

.importance-tooltip-factor-name {
    opacity: 0.8;
}

.importance-tooltip-factor-value {
    font-weight: 500;
}

/* Режим отладки - показать все индикаторы */
.debug-importance .message,
body.debug-importance .message {
    position: relative;
}

/* Скрыть индикаторы по умолчанию (показывать только в debug режиме) */
.message .importance-indicator {
    display: none;
}

.debug-importance .message .importance-indicator,
body.debug-importance .message .importance-indicator {
    display: block;
}

/* ==================== 📊 IMPORTANCE THRESHOLD SLIDER ==================== */
.importance-slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
}

.importance-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #48bb78 0%, #ecc94b 40%, #ed8936 70%, #f56565 100%);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.importance-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}

.importance-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.7);
}

.importance-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.5);
}

.importance-slider-value {
    min-width: 50px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.importance-threshold-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    margin-top: 5px;
}

.importance-threshold-labels .threshold-label {
    font-size: 0.75rem;
    color: #718096;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.importance-threshold-labels .threshold-label:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.importance-threshold-labels .threshold-label.active {
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-weight: 600;
}

/* ==================== СТИЛИ ДЛЯ ГЕНЕРАЦИИ ИЗОБРАЖЕНИЙ ==================== */

/* Контейнер для сгенерированного изображения */
.generated-image-container {
    max-width: 100%;
    margin: 1rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

/* Заголовок изображения */
.generated-image-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
}

.generated-image-model {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.generated-image-size {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Промпт */
.generated-image-prompt {
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.875rem;
    color: #4a5568;
    line-height: 1.5;
}

.generated-image-prompt strong {
    color: #2d3748;
}

/* Обёртка для изображения */
.generated-image-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.generated-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    border-radius: 0;
    transition: transform 0.2s ease;
}

.generated-image:hover {
    transform: scale(1.02);
}

/* Панель управления изображением */
.generated-image-controls {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.generated-image-controls button {
    background: white;
    border: 1px solid #d2d6dc;
    color: #4a5568;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}

.generated-image-controls button:hover {
    background: #f7fafc;
    border-color: #a0aec0;
    transform: translateY(-1px);
}

.generated-image-controls button:active {
    transform: translateY(0);
}

/* Индикатор загрузки генерации изображения */
.image-generation-loader {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
}

.image-generation-loader .loader-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.image-generation-loader span {
    color: #667eea;
    font-weight: 500;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .generated-image-controls {
        flex-direction: column;
    }
    
    .generated-image-controls button {
        width: 100%;
        justify-content: center;
    }
    
    .generated-image-header {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* Тёмная тема для генерации изображений */

/* Стили для placeholder ошибки изображения */
.image-error-placeholder {
    border-radius: 8px;
    margin: 8px;
    animation: fadeIn 0.5s ease-out;
}

.image-error-placeholder button:hover {
    background: #0056b3 !important;
    transform: translateY(-1px);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== 🖼️ VISION / IMAGE RECOGNITION STYLES ==================== */

/* Контейнер превью прикрепленных изображений */
.attached-images-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px dashed rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    margin-bottom: 8px;
}

.attached-image-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.attached-image-item:hover {
    border-color: #3b82f6;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.attached-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attached-image-item .remove-image-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.attached-image-item:hover .remove-image-btn {
    opacity: 1;
}

.attached-image-item .remove-image-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.attached-image-item .image-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 9px;
    padding: 2px 4px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Селектор «что сделать с изображением» (12.10.2026): столбик слева, превью справа. */
.attached-images-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex: 0 0 auto;
}

.attached-images-actions-title {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 2px;
}

.img-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111827);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.img-action-chip:hover {
    background: var(--bg-secondary, #f3f4f6);
}

.img-action-chip.is-active {
    background: var(--text-primary, #111827);
    border-color: var(--text-primary, #111827);
    color: var(--bg-primary, #fff);
}

.img-action-chip:active {
    transform: scale(0.97);
}

/* T6.1: расширение модалки рисования — textarea + пресеты + селектор модели */
.image-editor-extension {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.image-editor-extension .ext-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.image-editor-extension .ext-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.image-editor-extension label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.image-editor-extension textarea#imageEditorPrompt {
    width: 100%;
    min-height: 60px;
    max-height: 140px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111827);
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
}

.image-editor-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.image-editor-preset-btn {
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.image-editor-preset-btn:hover {
    background: var(--accent-light, rgba(59, 130, 246, 0.15));
    border-color: var(--accent-color, #3b82f6);
}

.image-editor-model-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.image-editor-model-row select {
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111827);
    font-size: 12px;
    min-width: 220px;
}

.image-editor-model-row .model-cost-hint {
    font-size: 10px;
    color: var(--text-secondary, #6b7280);
}

/* Модальное окно редактора изображений */
.image-editor-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.image-editor-container {
    background: white;
    border-radius: 12px;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.image-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
}

.image-editor-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.close-editor-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-editor-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Панель инструментов редактора */
.image-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    align-items: center;
}

.image-editor-toolbar .tool-group {
    display: flex;
    gap: 4px;
}

.image-editor-toolbar .tool-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.image-editor-toolbar .tool-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.image-editor-toolbar .tool-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.image-editor-toolbar .tool-btn span {
    font-size: 14px;
}

.image-editor-toolbar .color-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.image-editor-toolbar .color-group label {
    font-size: 12px;
    color: #64748b;
}

.image-editor-toolbar .color-group input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}

.image-editor-toolbar .color-preset {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
}

.image-editor-toolbar .color-preset:hover {
    transform: scale(1.15);
    border-color: #94a3b8;
}

.image-editor-toolbar .action-group {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.image-editor-toolbar .action-btn {
    padding: 8px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.image-editor-toolbar .action-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Область canvas редактора */
.image-editor-canvas-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #f1f5f9;
    overflow: auto;
    min-height: 400px;
}

#imageEditorCanvas {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: crosshair;
    max-width: 100%;
    max-height: 100%;
}

/* Футер редактора */
.image-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.image-editor-footer .cancel-btn {
    padding: 10px 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.image-editor-footer .cancel-btn:hover {
    background: #e2e8f0;
}

.image-editor-footer .save-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.image-editor-footer .save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Изображения в сообщениях чата: мини-пиктограмма + имя (как строка прикреплённого
   файла), крупное превью — .message-image-tooltip при наведении, полный размер — по клику.
   Без заливки: чип живёт внутри залитого пузыря пользователя. */
.message-images-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
}

.message-image-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    line-height: 1.3;
    opacity: 0.85;
    cursor: zoom-in;
}

.message-image-chip:hover,
.message-image-chip:focus-visible {
    opacity: 1;
}

.message-image-chip:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
    border-radius: 3px;
}

.message-image-pic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 3px;
    overflow: hidden;
}

.message-image-pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-image-name {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.message-image-chip.is-missing {
    cursor: default;
    opacity: 0.6;
}

.message-image-chip.is-missing .message-image-name {
    text-decoration: line-through;
}

.message-image-tooltip {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    max-width: calc(100vw - 16px);
    padding: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.message-image-tooltip img {
    display: block;
    max-width: min(360px, calc(100vw - 26px));
    max-height: 360px;
    width: auto;
    height: auto;
    border-radius: 4px;
}

.message-image-tooltip-caption {
    max-width: 360px;
    padding: 4px 2px 0;
    font-size: 11px;
    color: #4a5568;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Модальное окно для полноразмерного просмотра изображения */
.full-image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10001;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.full-image-container {
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
}

.full-image-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 8px 8px 0 0;
}

.full-image-header span {
    font-size: 14px;
}

.full-image-header button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.full-image-header button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.full-image-container img {
    max-width: 100%;
    max-height: calc(95vh - 60px);
    object-fit: contain;
    border-radius: 0 0 8px 8px;
}

/* Тёмная тема для Vision */

/* ==================== CHART ANALYSIS MODULE ==================== */

.chart-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.chart-modal-overlay.show {
    display: flex;
}

.chart-modal {
    background: white;
    border-radius: 12px;
    width: 95%;
    max-width: 1200px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: chartModalSlideIn 0.3s ease-out;
    position: relative;
}

/* Resize handles */
.chart-resize-handle {
    position: absolute;
    z-index: 10;
}
.chart-resize-n { top: -4px; left: 12px; right: 12px; height: 8px; cursor: n-resize; }
.chart-resize-s { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: s-resize; }
.chart-resize-e { top: 12px; bottom: 12px; right: -4px; width: 8px; cursor: e-resize; }
.chart-resize-w { top: 12px; bottom: 12px; left: -4px; width: 8px; cursor: w-resize; }
.chart-resize-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
.chart-resize-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
.chart-resize-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
.chart-resize-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }

@keyframes chartModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chart-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px 12px 0 0;
}

.chart-modal-header.gantt-header-white {
    background: #ffffff;
    border-bottom: 1px solid #e6e6e6;
}

.chart-modal-header.gantt-header-white h2 {
    color: #1f1f1f;
    font-weight: 600;
}

.chart-modal-header.gantt-header-white .chart-close-btn {
    background: #ffffff;
    color: #6f6f6f;
    border: 1px solid #d6d6d4;
}

.chart-modal-header.gantt-header-white .chart-close-btn:hover {
    background: #f7e3e1;
    color: #b42318;
    border-color: #e9b8b3;
}

/* Кнопка развернуть/свернуть окно Ганта */
.gantt-maximize-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #d6d6d4;
    border-radius: 6px;
    color: #6f6f6f;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 4px;
}

.gantt-maximize-btn:hover {
    background: #f3f3f3;
    color: #1f1f1f;
    border-color: #d6d6d4;
}

.gantt-maximize-btn:active {
    transform: scale(0.95);
}

/* Кнопка развернуть/свернуть окно редактора таблиц */
.table-maximize-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 4px;
}

.table-maximize-btn:hover {
    background: #f0f4ff;
    color: #3b82f6;
    border-color: #93c5fd;
}

.table-maximize-btn:active {
    transform: scale(0.95);
}

.chart-modal-header.gantt-header-white .chart-btn {
    background: #ffffff;
    border: 1px solid #d6d6d4;
    color: #1f1f1f;
    font-weight: 500;
}

.chart-modal-header.gantt-header-white .chart-btn:hover {
    background: #f6f6f5;
    border-color: #9b9b9b;
    color: #1f1f1f;
}

.chart-modal-header h2 {
    color: white;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.chart-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chart-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.chart-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chart-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Chart Toolbar */
.chart-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.chart-toolbar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.chart-toolbar-param {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.chart-toolbar-param label {
    white-space: nowrap;
    flex-shrink: 0;
}

.chart-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.chart-toolbar-sep {
    width: 1px;
    height: 18px;
    background: #cbd5e0;
    margin: 0 0.25rem;
}

.chart-toolbar-left,
.chart-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chart-toolbar label {
    font-size: 0.875rem;
    color: #4a5568;
    font-weight: 500;
}

/* Log Scale Controls */
.chart-scale-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid #cbd5e0;
}

.chart-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #4a5568;
    cursor: pointer;
    user-select: none;
}

.chart-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #667eea;
}

.chart-checkbox-label:hover {
    color: #2d3748;
}

.chart-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    color: #2d3748;
    min-width: 120px;
    cursor: pointer;
}

.chart-select-axis {
    flex: 1;
    min-width: 140px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}

.chart-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.chart-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background: white;
    color: #4a5568;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.chart-btn:hover {
    background: #f7fafc;
    border-color: #a0aec0;
}

.chart-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chart-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Чекбокс-кнопка для Лассо */
.chart-checkbox-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background: transparent;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.chart-checkbox-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

.chart-checkbox-btn.active {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.08);
}

.chart-checkbox-btn .checkbox-icon {
    font-size: 16px;
    line-height: 1;
}

.chart-btn-primary {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.chart-btn-primary:hover {
    background: #5a67d8;
}

.chart-btn-secondary {
    background: #718096;
    color: white;
    border-color: #718096;
}

.chart-btn-secondary:hover {
    background: #4a5568;
}

.chart-btn-danger {
    background: #e53e3e;
    color: white;
    border-color: #e53e3e;
}

.chart-btn-danger:hover {
    background: #c53030;
    border-color: #c53030;
}

.chart-btn-ai {
    background: transparent;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-weight: 500;
    font-size: 0.8125rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.chart-btn-ai:hover:not(:disabled) {
    background: rgba(100, 116, 139, 0.08);
    color: #1e293b;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.chart-btn-ai:disabled {
    background: transparent;
    color: #94a3b8;
    border-color: #e2e8f0;
    opacity: 0.6;
}

/* Chart Container */
.chart-container {
    position: relative;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    min-height: 300px;
    flex: 1;
}

#chartCanvas {
    display: block;
    max-width: 100%;
    cursor: crosshair;
}

.chart-tooltip {
    position: absolute;
    background: rgba(45, 55, 72, 0.95);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    max-width: 200px;
}

/* Chart Splitter */
.chart-splitter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10px;
    cursor: row-resize;
    user-select: none;
    touch-action: none;
    flex-shrink: 0;
    margin: -2px 0;
    position: relative;
    z-index: 5;
}

.chart-splitter-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #cbd5e0;
    transition: background 0.15s, width 0.15s;
}

.chart-splitter:hover .chart-splitter-handle,
.chart-splitter.active .chart-splitter-handle {
    background: #667eea;
    width: 60px;
}

/* Analysis Panel */
.chart-analysis-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    min-height: 80px;
    flex-shrink: 0;
}

.chart-panel-left,
.chart-panel-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
}

.chart-analysis-section {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.chart-analysis-section h3 {
    font-size: 0.85rem;
    color: #2d3748;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

/* Компактные кнопки */
.chart-btn-sm {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
}

.trend-controls {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.trend-equation {
    background: white;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #553c9a;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

.selection-stats {
    background: white;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

.stats-placeholder {
    color: #a0aec0;
    font-style: italic;
    text-align: center;
    margin: 0;
}

.single-point-info,
.multi-point-stats {
    font-size: 0.875rem;
    color: #4a5568;
}

.single-point-info strong,
.multi-point-stats strong {
    color: #2d3748;
}

.single-point-info p,
.multi-point-stats p {
    margin: 0.25rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.5rem;
}

.stats-column h4 {
    font-size: 0.8rem;
    color: #667eea;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.stats-column p {
    margin: 0.2rem 0;
    font-size: 0.8rem;
}

.metadata-info {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
}

.metadata-info p {
    font-size: 0.8rem;
}

.ai-split-layout {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

.chart-ai-prompt {
    flex: 1;
    min-height: 0;
    padding: 0.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    resize: none;
    font-family: inherit;
}

.chart-ai-prompt:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ai-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    flex-shrink: 0;
}

.ai-link {
    background: none;
    border: none;
    padding: 2px 6px;
    font-size: 0.72rem;
    color: #667eea;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    border-radius: 3px;
    transition: background 0.15s;
}

.ai-link:hover:not(:disabled) {
    background: rgba(102, 126, 234, 0.1);
}

.ai-link:disabled {
    color: #a0aec0;
    cursor: default;
}

/* Шапка блока AI-анализ: заголовок слева, кнопки справа на одном уровне */
.gantt-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.gantt-ai-header h3 {
    margin: 0;
}

.gantt-ai-header .ai-actions {
    flex-direction: row;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Группы точек */
.group-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

.group-create-row {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.group-create-row .chart-input {
    flex: 1;
    min-width: 80px;
    padding: 0.35rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
}

.group-create-row .chart-input:focus {
    outline: none;
    border-color: #667eea;
}

.chart-color-select {
    min-width: 50px;
    padding: 0.35rem;
    font-size: 0.85rem;
}

.groups-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

.groups-placeholder {
    color: #a0aec0;
    font-style: italic;
    font-size: 0.75rem;
    text-align: center;
    padding: 0.35rem;
    margin: 0;
}

.group-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: white;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.group-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.group-name {
    font-weight: 500;
    font-size: 0.75rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-count {
    font-size: 0.7rem;
    color: #718096;
}

.group-actions {
    display: flex;
    gap: 0.15rem;
}

.group-action-btn {
    padding: 0.15rem 0.35rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.75rem;
    transition: background 0.2s;
}

.group-action-btn:hover {
    background: #e2e8f0;
}

.group-delete-btn:hover {
    background: #fed7d7;
    color: #c53030;
}

/* Modal Footer */
.chart-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f7fafc;
    border-radius: 0 0 12px 12px;
}

.chart-info {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
    color: #718096;
}

.chart-info span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chart-footer-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Chart Notification Animation */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    90% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

.chart-notification {
    pointer-events: none;
}

/* Dark mode support */

/* Responsive */
@media (max-width: 768px) {
    .chart-modal {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
    
    .chart-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .chart-toolbar-left,
    .chart-toolbar-right {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .chart-analysis-panel {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== INLINE CHARTS IN MESSAGES ==================== */

/* График в ответе (chart-analysis.js 3.0): внутри пузыря ответа — без своей заливки и
   рамки, кнопка по регламенту (≤ 7px, без контура). Размер холста задаёт скрипт — в
   пикселях экрана под ширину сообщения. */
.inline-chart-container {
    margin: 0.75rem 0;
    max-width: 860px;
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
}

.inline-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 0 6px;
}

.inline-chart-title {
    font-weight: 500;
    color: #13343B;
    font-size: 15px;
    line-height: 1.3;
}

.inline-chart-expand-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    background: rgba(32, 128, 141, 0.10);
    color: #20808D;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.inline-chart-expand-btn:hover {
    background: rgba(32, 128, 141, 0.18);
}

.inline-chart-expand-btn[hidden] {
    display: none;
}

.inline-chart-container canvas {
    display: block;
    max-width: 100%;
    background: #ffffff;
}

.inline-chart-description,
.inline-chart-note {
    padding: 6px 0 0;
    font-size: 13px;
    color: rgba(19, 52, 59, 0.62);
    line-height: 1.5;
}

.inline-chart-note {
    font-size: 12px;
    color: rgba(19, 52, 59, 0.5);
}

.inline-chart-note[hidden] {
    display: none;
}

/* Модель прислала испорченный блок chart-data — говорим об этом словами */
.inline-chart-error {
    margin: 0.75rem 0;
    font-size: 14px;
    color: #c53030;
    line-height: 1.5;
}

.inline-chart-error details {
    margin-top: 4px;
    color: rgba(19, 52, 59, 0.62);
    font-size: 12px;
}

.inline-chart-error pre {
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    font: 12px/1.5 "JetBrains Mono", "Fira Code", monospace;
}

/* Блок «Анализ данных» под таблицей ответа — текстом, без заливки */
.chart-stats-block {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(19, 52, 59, 0.72);
    line-height: 1.6;
}

.chart-stats-title {
    font-weight: 500;
    color: #20808D;
    margin-bottom: 2px;
}

/* Темная тема для inline графиков */

/* ==================== CHART OPTIONS DIALOG ==================== */

.chart-options-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chart-options-dialog-overlay.show {
    opacity: 1;
}

.chart-options-dialog {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
    transition: transform 0.2s ease;
}

.chart-options-dialog-overlay.show .chart-options-dialog {
    transform: translateY(0);
}

.chart-options-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.chart-options-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #2d3748;
}

.chart-options-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #718096;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.chart-options-close:hover {
    background: #f7fafc;
    color: #2d3748;
}

.chart-options-body {
    padding: 1.25rem;
}

.chart-options-body p {
    margin: 0 0 1rem 0;
    color: #4a5568;
    font-size: 0.9rem;
}

.chart-options-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chart-option-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.chart-option-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    transform: translateX(4px);
}

.chart-option-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.chart-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.chart-option-text strong {
    color: #2d3748;
    font-size: 0.95rem;
}

.chart-option-text small {
    color: #718096;
    font-size: 0.8rem;
}

/* ── Анализ графиков 3.0: таблицы диалога, сохранённые, выбор колонок ── */
.chart-options-dialog {
    max-height: 86vh;
    overflow-y: auto;
}

.chart-options-caption {
    margin: 14px 0 6px;
    font-size: 12px;
    color: rgba(19, 52, 59, 0.55);
}

.chart-options-tables {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.chart-option-table {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(19, 52, 59, 0.04);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    color: #13343B;
}

.chart-option-table:hover {
    background: rgba(31, 184, 205, 0.10);
}

.chart-option-table-id {
    flex-shrink: 0;
    font-weight: 500;
    color: #20808D;
}

.chart-option-table-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-storage-list {
    max-height: 220px;
    overflow-y: auto;
}

.chart-storage-empty {
    margin: 4px 0;
    font-size: 12px;
    color: rgba(19, 52, 59, 0.5);
}

.chart-storage-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 6px;
}

.chart-storage-item:hover {
    background: rgba(19, 52, 59, 0.05);
}

.chart-storage-main {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.chart-storage-name {
    font-size: 13px;
    color: #13343B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-storage-meta {
    font-size: 11px;
    color: rgba(19, 52, 59, 0.5);
}

.chart-storage-item button {
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 12px;
    color: rgba(19, 52, 59, 0.55);
    cursor: pointer;
}

.chart-storage-item button:hover {
    background: rgba(19, 52, 59, 0.08);
    color: #13343B;
}

.chart-picker {
    max-width: 640px;
}

.chart-picker label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: rgba(19, 52, 59, 0.72);
}

.chart-picker select {
    width: 100%;
}

.chart-picker-hint {
    font-size: 12px;
    color: rgba(19, 52, 59, 0.5);
}

.chart-picker-file {
    margin-bottom: 12px;
    font-size: 14px;
    color: #13343B;
}

.chart-picker-file span {
    color: rgba(19, 52, 59, 0.55);
}

.chart-picker-row {
    margin-bottom: 12px;
}

.chart-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.chart-picker-preview {
    max-height: 160px;
    overflow: auto;
    font-size: 12px;
}

.chart-picker-preview table {
    width: 100%;
    border-collapse: collapse;
}

.chart-picker-preview th,
.chart-picker-preview td {
    padding: 2px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
}

.chart-picker-preview th {
    color: rgba(19, 52, 59, 0.55);
    font-weight: 500;
}

.chart-picker-warn {
    margin: 0;
    font-size: 13px;
    color: #c05621;
}

/* Поля коэффициентов тренда в окне анализа */
.trend-coeff-input {
    width: 76px;
    padding: 0 2px;
    background: transparent;
    border: none;
    border-bottom: 1px dashed #20808D;
    color: #20808D;
    font: inherit;
    text-align: center;
    outline: none;
}

.trend-coeff-input:focus {
    border-bottom-style: solid;
}

.trend-error {
    color: #c53030;
}

.trend-src-note {
    color: rgba(19, 52, 59, 0.5);
    font-size: 12px;
}

/* Chart Paste Modal */
.chart-paste-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.chart-paste-body {
    padding: 1.5rem;
}

.chart-paste-body p {
    margin: 0 0 0.75rem 0;
    color: #4a5568;
    font-size: 0.9rem;
}

.chart-paste-example {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.8rem;
    color: #553c9a;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.chart-paste-input {
    width: 100%;
    height: 150px;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 1rem;
}

.chart-paste-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.chart-paste-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Excel upload zone */
.excel-upload-zone {
    border: 2px dashed #4a5568;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(26, 32, 44, 0.5);
}

.excel-upload-zone:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.excel-upload-zone.drag-over {
    border-color: #48bb78;
    background: rgba(72, 187, 120, 0.1);
    transform: scale(1.02);
}

.excel-upload-content {
    pointer-events: none;
}

/* Dark mode */

/* ==================== КОМПАКТНЫЕ ССЫЛКИ НА ИСТОЧНИКИ ==================== */
.source-link {
    color: #3182ce;
    text-decoration: none;
    font-size: 0.85em;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(49, 130, 206, 0.1);
    border: 1px solid rgba(49, 130, 206, 0.2);
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: 2px;
}

.source-link:hover {
    background: rgba(49, 130, 206, 0.2);
    border-color: rgba(49, 130, 206, 0.4);
    color: #2c5282;
    text-decoration: none;
}

.source-link:active {
    background: rgba(49, 130, 206, 0.3);
}

/* Иконка внешней ссылки (опционально) */
.source-link::after {
    content: '↗';
    font-size: 0.7em;
    margin-left: 2px;
    opacity: 0.7;
}

/* Dark mode для ссылок */
/* ==================== GANTT CHART STYLES ==================== */

/* ��������� ���� ��������� ����� */
.gantt-modal {
    max-width: 1200px;
    width: 95%;
    max-height: 90vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Toolbar ��� ��������� ����� */
.gantt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-bottom: 1px solid #e6e6e6;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gantt-toolbar-left,
.gantt-toolbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.gantt-toolbar label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #3a3a3a;
}

/* ������ ��������������� */
.gantt-zoom-controls {
    display: inline-flex;
    gap: 4px;
    margin-left: 16px;
    align-items: center;
}

.gantt-zoom-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 31, 31, 0.048);
    border: 1px solid rgba(31, 31, 31, 0.12);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gantt-zoom-btn svg {
    color: #6f6f6f;
    transition: color 0.2s ease;
}

.gantt-zoom-btn:hover {
    background: rgba(31, 31, 31, 0.09);
    border-color: rgba(31, 31, 31, 0.18);
    transform: scale(1.05);
}

.gantt-zoom-btn:hover svg {
    color: #6f6f6f;
}

.gantt-zoom-btn:active {
    transform: scale(0.95);
}

/* Контейнер диаграммы */
.gantt-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: 1rem;
    background: #ffffff;
    position: relative;
    max-height: 500px;
}

/* Закреплённая шапка диаграммы («Задачи» + шкала дат).
   Оба холста диаграммы прокручиваются вертикально вместе со своей шапкой,
   нарисованной внутри них, — при прокрутке она уезжала под тулбар. Эти накладки
   лежат поверх и показывают ту же полосу, скопированную из основных холстов
   (см. syncGanttHeaderOverlays в gantt-chart.js).
   pointer-events: none — чтобы наведение и клики по-прежнему доставались
   основному холсту; z-index ниже тултипа (.chart-tooltip = 100). */
.gantt-header-overlay {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    display: none;
}

/* Фиксированная панель с названиями задач */
.gantt-names-panel {
    flex-shrink: 0;
    width: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    z-index: 10;
    border-right: none;
    scrollbar-width: thin;
    scrollbar-color: #d6d6d4 #f3f3f3;
}

/* Вертикальный ресайзер для изменения ширины колонки задач */
.gantt-column-resizer {
    width: 6px;
    flex-shrink: 0;
    background: #e6e6e6;
    cursor: col-resize;
    position: relative;
    z-index: 15;
    transition: background 0.2s ease;
}

.gantt-column-resizer:hover,
.gantt-column-resizer.active {
    background: #1f1f1f;
}

.gantt-column-resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 30px;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.2) 3px,
        rgba(0,0,0,0.2) 6px
    );
}

.gantt-names-panel::-webkit-scrollbar {
    width: 6px;
}

.gantt-names-panel::-webkit-scrollbar-track {
    background: #f3f3f3;
}

.gantt-names-panel::-webkit-scrollbar-thumb {
    background: #d6d6d4;
    border-radius: 3px;
}

#ganttNamesCanvas {
    display: block;
    cursor: pointer;
}

/* Скроллируемая область с календарём */
.gantt-chart-scroll {
    flex: 1;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #d6d6d4 #f3f3f3;
}

.gantt-chart-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.gantt-chart-scroll::-webkit-scrollbar-track {
    background: #f3f3f3;
    border-radius: 5px;
}

.gantt-chart-scroll::-webkit-scrollbar-thumb {
    background: #d6d6d4;
    border-radius: 5px;
    border: 1px solid #f3f3f3;
}

.gantt-chart-scroll::-webkit-scrollbar-thumb:hover {
    background: #9b9b9b;
}

.gantt-chart-scroll::-webkit-scrollbar-corner {
    background: #f3f3f3;
}

#ganttCanvas {
    display: block;
    cursor: crosshair;
}

/* Тултип для задач при наведении */
.gantt-task-tooltip {
    position: fixed;
    z-index: 10000;
    background: #1f1f1f;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    display: none;
}

.gantt-tooltip-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: #ffffff;
}

.gantt-tooltip-dates {
    color: #9b9b9b;
    font-size: 12px;
    margin-bottom: 4px;
}

.gantt-tooltip-recurrence {
    color: #d6d6d4;
    font-size: 12px;
    margin-bottom: 4px;
}

.gantt-tooltip-progress {
    color: #9b9b9b;
    font-size: 12px;
    margin-bottom: 2px;
}

.gantt-tooltip-resource {
    color: #d6d6d4;
    font-size: 12px;
}

/* Часы по задаче — итог плана и факта, строкой под исполнителями */
.gantt-tooltip-effort {
    color: #d6d6d4;
    font-size: 12px;
    margin-top: 2px;
}

/* Панель анализа внизу */
.gantt-analysis-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: #fafafa;
    border-top: 1px solid #e6e6e6;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d6d6d4 #f3f3f3;
    transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
}

/* Свёрнутое состояние панели — схлопывается вниз */
.gantt-analysis-panel.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    border-top-color: transparent;
}

/* Кликабельная полоска-переключатель панели */
.gantt-analysis-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3f3f3;
    border-top: 1px solid #e6e6e6;
    color: #6f6f6f;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.gantt-analysis-toggle:hover {
    background: #e6e6e6;
    color: #1f1f1f;
}

.gantt-analysis-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

/* В свёрнутом состоянии шеврон смотрит вверх (клик = раскрыть вверх) */
.gantt-analysis-toggle.collapsed .gantt-analysis-chevron {
    transform: rotate(180deg);
}

.gantt-analysis-panel::-webkit-scrollbar {
    width: 8px;
}

.gantt-analysis-panel::-webkit-scrollbar-track {
    background: #f3f3f3;
    border-radius: 4px;
}

.gantt-analysis-panel::-webkit-scrollbar-thumb {
    background: #d6d6d4;
    border-radius: 4px;
}

.gantt-analysis-panel::-webkit-scrollbar-thumb:hover {
    background: #9b9b9b;
}

.gantt-panel-left,
.gantt-panel-right,
.gantt-panel-full {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gantt-panel-full {
    width: 100%;
}

/* ������ ����� */
.gantt-tasks-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #d6d6d4 #f3f3f3;
}

.gantt-tasks-list::-webkit-scrollbar {
    width: 6px;
}

.gantt-tasks-list::-webkit-scrollbar-track {
    background: #f3f3f3;
    border-radius: 3px;
}

.gantt-tasks-list::-webkit-scrollbar-thumb {
    background: #d6d6d4;
    border-radius: 3px;
}

.gantt-tasks-list::-webkit-scrollbar-thumb:hover {
    background: #9b9b9b;
}

.gantt-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
}

.gantt-task-item:hover {
    background: #fafafa;
    border-color: #1f1f1f;
}

.gantt-task-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.gantt-task-info {
    flex: 1;
    min-width: 0;
}

.gantt-task-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: #1f1f1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-task-dates {
    font-size: 0.75rem;
    color: #6f6f6f;
    margin-top: 0.25rem;
}

.gantt-task-resource {
    font-size: 0.75rem;
    color: #1f1f1f;
    margin-top: 0.25rem;
}

.gantt-task-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gantt-progress-bar {
    width: 60px;
    height: 6px;
    background: #e6e6e6;
    border-radius: 3px;
    overflow: hidden;
}

.gantt-progress-fill {
    height: 100%;
    background: #1f1f1f;
    transition: width 0.3s;
}

.gantt-task-delete {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: #6f6f6f;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.gantt-task-delete:hover {
    background: #f7e3e1;
    color: #b42318;
}

.gantt-placeholder {
    text-align: center;
    color: #9b9b9b;
    padding: 2rem;
    font-size: 0.875rem;
}

/* ���������� */
/* Шапка блока: заголовок и вкладки в одну строку — высота отдана строкам */
.gantt-stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.gantt-stats-head h3 {
    margin: 0;
}

.gantt-stats-tabs {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: #ececec;
    border-radius: 7px;
}

.gantt-stats-tab {
    border: none;
    background: none;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 12px;
    color: #3a3a3a;
    cursor: pointer;
}

.gantt-stats-tab:hover {
    color: #1f1f1f;
}

.gantt-stats-tab.is-active {
    background: #ffffff;
    color: #1f1f1f;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Строки компактные: 12 px и тонкие отступы, чтобы во вкладку влезло больше */
.gantt-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px;
    background: white;
    border-radius: 7px;
    border: 1px solid #e6e6e6;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.gantt-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.25;
}

/* Щёлкаемая строка — кнопка: сбрасываем её оформление под строку */
button.gantt-stat-row,
button.gantt-stat-grid {
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    border-radius: 5px;
    cursor: pointer;
}

.gantt-stat-link:hover {
    background: #f3f3f3;
}

.gantt-stat-link.is-active {
    background: #f3f3f3;
}

.gantt-stat-link.is-active .gantt-stat-label,
.gantt-stat-link.is-active .gantt-stat-name {
    color: #1f1f1f;
    font-weight: 600;
}

.gantt-stat-row.gantt-stat-separator {
    border-top: 1px solid #e6e6e6;
    margin-top: 3px;
    padding-top: 5px;
}

.gantt-stat-label {
    color: #3a3a3a;
}

.gantt-stat-value {
    font-weight: 600;
    color: #1f1f1f;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gantt-stat-warn .gantt-stat-value,
.gantt-stat-over .gantt-stat-value {
    color: #b42318;
}

.gantt-stat-note {
    padding: 2px 6px 4px;
    font-size: 11px;
    color: #6f6f6f;
}

.gantt-stat-empty {
    padding: 6px;
    font-size: 12px;
    color: #6f6f6f;
}

/* Вкладка «Ресурсы»: таблица на сетке — имя тянется, числа по правому краю */
.gantt-stat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 56px 56px 84px 84px;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.25;
    color: #1f1f1f;
    font-variant-numeric: tabular-nums;
}

.gantt-stat-grid > span:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.gantt-stat-grid-head {
    position: sticky;
    top: -4px;
    background: #ffffff;
    font-size: 11px;
    color: #6f6f6f;
    border-bottom: 1px solid #e6e6e6;
}

/* Заголовок колонки — кнопка сортировки (статистика и окно «Ресурсы»):
   выглядит как обычный заголовок, щелчок сортирует строки */
.gantt-sort-head {
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
}

.gantt-resw-head .gantt-sort-head {
    text-align: center;
}

.gantt-stat-grid-head .gantt-sort-head:first-child,
.gantt-resw-head .gantt-sort-head:first-child,
.gantt-sum-head .gantt-sort-head:first-child {
    text-align: left;
}

.gantt-sort-head:hover,
.gantt-sort-head.is-active {
    color: #1f1f1f;
}

.gantt-sort-arrow {
    margin-left: 2px;
    font-size: 8px;
    vertical-align: 1px;
}

.gantt-stat-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-stat-grid.is-empty {
    color: #9b9b9b;
}

/* Условие в панели состояния — отличаем от людей */
.chart-info .gantt-filter-chip-cond {
    background: #fbf6ec;
    border-color: #ecd9b0;
    color: #b7791f;
}

/* Inline ��������� ����� */
.inline-gantt-container {
    margin: 1rem 0;
    padding: 1rem;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
}

.inline-gantt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.inline-gantt-header h4 {
    margin: 0;
    color: #1f1f1f;
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .gantt-modal {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .gantt-analysis-panel {
        grid-template-columns: 1fr;
    }
    
    .gantt-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .inline-gantt-container {
        padding: 0.75rem;
    }
    
    .inline-gantt-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Gantt Chart Styles */
.gantt-modal {
    max-width: 1200px;
    width: 95%;
    max-height: 90vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gantt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-bottom: 1px solid #e6e6e6;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gantt-toolbar-left,
.gantt-toolbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.gantt-container {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    background: #ffffff;
}

#ganttCanvas {
    display: block;
    width: 100%;
    cursor: crosshair;
    border-radius: 7px;
}

.gantt-analysis-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: #fafafa;
    border-top: 1px solid #e6e6e6;
    max-height: 300px;
    overflow-y: auto;
}

.gantt-tasks-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gantt-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
}

.gantt-task-item:hover {
    background: #fafafa;
    border-color: #1f1f1f;
}

.gantt-task-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: #1f1f1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-progress-bar {
    width: 60px;
    height: 6px;
    background: #e6e6e6;
    border-radius: 3px;
    overflow: hidden;
}

.gantt-progress-fill {
    height: 100%;
    background: #1f1f1f;
    transition: width 0.3s;
}

.gantt-convert-btn {
    background: white;
    color: #1f1f1f;
    border: 1px solid #e6e6e6;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.gantt-convert-btn:hover {
    background: #fafafa;
    border-color: #d6d6d4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.inline-gantt-container {
    margin: 1rem 0;
    padding: 1rem;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
}

.inline-gantt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .gantt-modal {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .gantt-analysis-panel {
        grid-template-columns: 1fr;
    }
}

/* Gantt Modal Resize Handles */
.gantt-resize-handle {
    z-index: 10;
    background: transparent;
}

.gantt-resize-handle:hover {
    background: rgba(31, 31, 31, 0.12);
}

.gantt-modal {
    position: relative;
}

.gantt-modal-header-draggable {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.gantt-modal-header-draggable:active {
    cursor: grabbing !important;
}

/* Gantt Task Edit Modal */
.gantt-edit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    animation: fadeIn 0.2s ease;
}

/* Переход «‹ ›» к соседней задаче: окно подменяется на месте, без появления */
.gantt-edit-modal-overlay.gantt-edit-modal-swap,
.gantt-edit-modal-overlay.gantt-edit-modal-swap .gantt-edit-modal {
    animation: none;
}

/* position: fixed + центровка трансформом, а НЕ flex-центровка оверлеем:
   перетаскивание задаёт окну явные left/top, а flex-потомка так не сдвинуть.
   Оверлей остаётся затемнением и ловцом клика «мимо окна». */
.gantt-edit-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 92%;
    max-width: 900px;
    /* Высота ЗАДАНА, а не выведена из содержимого. Иначе каждый добавленный
       исполнитель делал окно выше, а так как оно центрировано трансформом,
       росло оно в обе стороны — форма дёргалась под руками. Содержимое, когда
       не помещается, прокручивается внутри тела. Ручной ресайз ставит свою
       высоту inline и это правило перебивает. */
    height: min(90vh, 760px);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ganttEditSlideUp 0.3s ease;
}

/* Своя анимация появления: общая slideUp задаёт transform: translateY и затёрла
   бы центрующий translate(-50%, -50%) — окно на 0.3s уезжало бы вправо-вниз
   на половину своего размера. */
@keyframes ganttEditSlideUp {
    from {
        transform: translate(-50%, calc(-50% + 20px));
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.gantt-edit-modal-header {
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
}

.gantt-edit-modal-header .gantt-edit-modal-close {
    cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.gantt-edit-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    color: #1f1f1f;
}

.gantt-edit-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.gantt-edit-modal-close {
    background: none;
    border: none;
    color: #1f1f1f;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s;
}

.gantt-edit-modal-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.gantt-edit-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Альбомная раскладка модалки редактирования задачи.
   align-content: start обязателен. Без него лишняя высота окна (его тянут за
   угол, и тело формы выше содержимого) раздавалась поровну между рядами сетки:
   между «Названием» и полями зиял провал, а поля стояли как бы по центру. */
.gantt-edit-body-landscape {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    align-items: start;
    align-content: start;
}

.gantt-edit-body-landscape .gantt-edit-span-2 {
    grid-column: 1 / -1;
}

.gantt-edit-col {
    min-width: 0;
}

/* Ряды формы — по верху: подписи в одну линию, поля под ними в другую.
   Раньше здесь было align-items: end, и ряд равнялся по НИЖНЕМУ краю — из-за
   разной высоты полей подпись «Прогресс» стояла ниже соседних. */
.gantt-edit-row {
    display: grid;
    column-gap: 12px;
    align-items: start;
}

/* Дата начала / дата окончания / рабочие дни / прогресс — в одну строку.
   Колонка рабочих дней узкая и фиксированная: в ней всегда двузначное число. */
.gantt-edit-row-dates {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 62px minmax(0, 1.05fr);
    column-gap: 8px;
}

/* Поля в ряду дат поджаты: четыре колонки в полширины модалки иначе не встают */
.gantt-edit-row-dates .gantt-edit-field label {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-edit-row-dates .gantt-edit-field input[type="date"] {
    padding: 10px 6px;
    font-size: 13px;
}

/* Рабочие дни — не поле ввода, а показание: срок задаётся датами.
   Поэтому ни рамки-«ввода», ни курсора текста. */
.gantt-edit-workdays {
    width: 100%;
    padding: 10px 6px;
    border: 1px solid #ececec;
    border-radius: 7px;
    background: #f6f6f5;
    color: #1f1f1f;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: default;
}

.gantt-edit-workdays:focus {
    outline: none;
}

.gantt-edit-row-recurrence {
    grid-template-columns: 1fr 1fr;
}

.gantt-edit-row .gantt-edit-field {
    min-width: 0;
}

/* Блок периодичности */
.gantt-edit-recurrence {
    border: 1px dashed #d6d6d4;
    border-radius: 7px;
    padding: 12px 12px 4px 12px;
    margin-bottom: 20px;
    background: #f6f6f5;
}

.gantt-edit-recurrence .gantt-edit-field {
    margin-bottom: 8px;
}

.gantt-edit-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #1f1f1f;
    cursor: pointer;
    user-select: none;
}

.gantt-edit-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1f1f1f;
    cursor: pointer;
}

.gantt-edit-checkbox input[type="checkbox"]:disabled,
.gantt-edit-checkbox input[type="checkbox"]:disabled + span {
    cursor: not-allowed;
}

.gantt-edit-recurrence-hint {
    display: block;
    font-size: 11px;
    color: #6f6f6f;
    margin-bottom: 8px;
}

.gantt-edit-field {
    margin-bottom: 20px;
}

.gantt-edit-field:last-child {
    margin-bottom: 0;
}

/* На узком экране возвращаемся к одной колонке */
@media (max-width: 760px) {
    .gantt-edit-body-landscape {
        grid-template-columns: 1fr;
    }

    .gantt-edit-row-dates,
    .gantt-edit-row-recurrence {
        grid-template-columns: 1fr;
    }
}

/* Окно шириной 92% экрана: между 760 и 940 px столбец формы ужимается
   настолько, что поле даты обрезает свой значок календаря. Четыре поля ряда
   разводим 2 × 2 — раньше, чем вся форма схлопнется в одну колонку. */
@media (min-width: 761px) and (max-width: 940px) {
    .gantt-edit-row-dates {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.gantt-edit-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #1f1f1f;
    font-size: 14px;
}

/* Путь задачи по разделам вместо подписи «Название»: звенья щёлкаются */
.gantt-edit-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.3;
}

.gantt-edit-path-link {
    max-width: 100%;
    padding: 2px 6px;
    border: none;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-weight: 500;
    color: #1f1f1f;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.gantt-edit-path-link:first-child {
    margin-left: -6px;
}

.gantt-edit-path-link:hover {
    background: #f3f3f3;
}

.gantt-edit-path-sep {
    color: #9b9b9b;
}

.gantt-edit-field input[type="text"],
.gantt-edit-field input[type="date"],
.gantt-edit-field select,
.gantt-edit-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
    background: #ffffff;
    color: #1f1f1f;
}

.gantt-edit-field select {
    cursor: pointer;
    height: 42px;
}

.gantt-edit-field input[type="text"]:focus,
.gantt-edit-field input[type="date"]:focus,
.gantt-edit-field select:focus,
.gantt-edit-field textarea:focus {
    outline: none;
    border-color: #1f1f1f;
    box-shadow: 0 0 0 3px rgba(31, 31, 31, 0.06);
}

.gantt-edit-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* Последнему полю ряда возвращаем отступ, который снимает общее правило
   .gantt-edit-field:last-child. Иначе ряд «прилипает» к тому, что идёт ниже:
   у соседей в ряду отступ 20px, а у последнего — ноль.

   Селектор привязан к КОНКРЕТНОМУ ряду, а не к .gantt-edit-row вообще: тот же
   :last-child есть и в блоке периодичности, где отступ свой (8px), и общее
   правило сбило бы его. */
.gantt-edit-row-dates .gantt-edit-field:last-child {
    margin-bottom: 20px;
}

/* Блок периодичности: та же история на своих 8px */
.gantt-edit-recurrence .gantt-edit-row .gantt-edit-field:last-child {
    margin-bottom: 8px;
}

/* Контейнер ползунка держим той же высоты, что поле ввода даты (42px — та же
   величина, что задана select'у этой формы), а ползунок центрируем внутри:
   полоска высотой 6px иначе прилипла бы к низу своей ячейки. */
.gantt-edit-progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    /* Сам контейнер — ячейка сетки ряда: без этого его минимальная ширина
       считается по содержимому и ряд распирает наружу */
    min-width: 0;
}

/* Значение процентов живёт в подписи («Прогресс 20%:»), а не под ползунком. */
.gantt-edit-field label #taskEditProgressValue {
    font-weight: 600;
    color: #1f1f1f;
}

/* min-width: 0 обязателен. У flex-элемента минимальная ширина по умолчанию
   равна min-content, а у ползунка она своя, браузерная (около 130 px) — на
   узкой колонке он переставал сжиматься и вылезал за границу левого столбца
   формы, наезжая на «Ресурсы». flex: 1 сам по себе от этого не спасает. */
.gantt-edit-progress-container input[type="range"] {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    height: 6px;
    border-radius: 3px;
    background: #e6e6e6;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.gantt-edit-progress-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1f1f1f;
    cursor: pointer;
    transition: all 0.2s;
}

.gantt-edit-progress-container input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(31, 31, 31, 0.12);
}

.gantt-edit-progress-container input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1f1f1f;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.gantt-edit-progress-container input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(31, 31, 31, 0.12);
}

/* ───────────────────────────────────────────────────────────────────────────
   Фильтр по исполнителям. Кнопка лежит ПОВЕРХ шапки колонки задач: сама шапка
   нарисована внутри canvas, и HTML-кнопку в неё не поставить — только наложить.
   Координаты те же, что у шапки: высота 44 px (GANTT_CONFIG.headerHeight),
   ширина колонки 200 px (taskNameWidth).
   ─────────────────────────────────────────────────────────────────────────── */
/* Отсчёт от .gantt-container, у которого padding: 1rem. Шапка начинается на
   16 px сверху и высотой 44 px — кнопка 26 px встаёт по её центру (16 + 9).
   Горизонталь задаётся из кода (positionGanttFilterButton): колонку задач
   перетаскивают за разделитель, её ширина живёт в GANTT_CONFIG.taskNameWidth,
   и фиксированное значение в стилях оставляло бы кнопку посреди шапки.
   z-index выше 20 — столько у накладки закреплённой шапки, иначе кнопка
   пряталась бы под ней. */
.gantt-filter-wrap {
    position: absolute;
    top: 25px;
    left: 16px;
    z-index: 21;
}

.gantt-filter-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 26px;
    padding: 0 6px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s;
}

.gantt-filter-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Фильтр включён — кнопка перестаёт быть частью шапки и становится меткой */
.gantt-filter-btn.gantt-filter-on {
    background: #ffffff;
    color: #1f1f1f;
}

.gantt-filter-count {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Селектор с обёрткой: .gantt-res-menu, чьё оформление мы переиспользуем,
   объявлен НИЖЕ по файлу и при равном весе перебивал бы высоту — список
   обрезался на полустроке */
.gantt-filter-wrap .gantt-filter-menu {
    position: absolute;
    top: 32px;
    left: 0;
    width: 260px;
    max-height: 340px;
}

/* Сколько задач у исполнителя — правым краем строки */
.gantt-filter-menu .gantt-filter-tasks {
    margin-left: auto;
    padding-left: 8px;
    font-size: 11px;
    color: #9b9b9b;
}

/* Список фильтра живёт вне .gantt-edit-field, поэтому строке нужны свои
   правила: те, что написаны для окна задачи, сюда не достают */
.gantt-filter-menu .gantt-res-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #1f1f1f;
    cursor: pointer;
    user-select: none;
}

.gantt-filter-menu .gantt-res-option:hover {
    background: #f3f3f3;
}

.gantt-filter-menu .gantt-res-option-on {
    color: #1f1f1f;
    font-weight: 500;
}

.gantt-filter-menu .gantt-res-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #1f1f1f;
    cursor: pointer;
}

/* «Фильтр: …» в панели состояния окна, рядом с «Задач: N» — виден, только
   пока фильтр включён. Селекторы с .chart-info: там правило «.chart-info span»
   делает каждый span флексом, и без явного веса оно перебивало бы наши */
.chart-info .gantt-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #1f1f1f;
}

.chart-info .gantt-filter-bar[hidden] {
    display: none;
}

.chart-info .gantt-filter-bar-label {
    color: #6f6f6f;
}

.chart-info .gantt-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 1px 2px 1px 7px;
    border-radius: 6px;
    background: #f3f3f3;
    border: 1px solid #d6d6d4;
    font-weight: 500;
    line-height: 1.3;
}

.gantt-filter-chip-x {
    border: none;
    background: none;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    color: #9b9b9b;
    cursor: pointer;
}

.gantt-filter-chip-x:hover {
    background: #f3f3f3;
    color: #1f1f1f;
}

.gantt-filter-bar-reset {
    border: none;
    background: none;
    padding: 0 2px;
    font-size: inherit;
    color: #1f1f1f;
    text-decoration: underline;
    cursor: pointer;
}

.gantt-filter-bar-reset:hover {
    color: #1f1f1f;
}

/* ───────────────────────────────────────────────────────────────────────────
   Окно «Ресурсы»: кто занят в диаграмме, на сколько часов и во что обходится.
   Окно про людей, а не про задачи, поэтому отдельное — но на том же каркасе
   (.gantt-edit-modal), что и окно задачи: то же перетаскивание и тот же ресайз.
   ─────────────────────────────────────────────────────────────────────────── */
.gantt-resw-modal {
    max-width: 1000px;
    /* Своя высота: людей в своде обычно больше, чем полей в окне задачи, и
       список тут длиннее. Растёт так же не от содержимого — см. .gantt-edit-modal */
    height: min(90vh, 820px);
}

/* Сетка одна на шапку, строки и кнопки — иначе колонки разъедутся */
.gantt-resw-head,
.gantt-resw-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px 78px 78px 86px 104px 104px 96px;
    column-gap: 8px;
    align-items: center;
}

.gantt-resw-head {
    padding: 0 8px 7px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9b9b9b;
}

.gantt-resw-head span:not(:first-child) {
    text-align: center;
}

.gantt-resw-row {
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: #1f1f1f;
}

.gantt-resw-row:hover {
    background: #f6f6f5;
}

.gantt-resw-name {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Правка имени прямо в строке. Поле занимает ячейку имени, числа рядом
   остаются на своих местах — строка не перестраивается. */
.gantt-resw-row-edit {
    background: rgba(31, 31, 31, 0.036);
}

.gantt-edit-modal-body input.gantt-resw-rename {
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid #1f1f1f;
    border-radius: 6px;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #1f1f1f;
}

.gantt-edit-modal-body input.gantt-resw-rename:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 31, 31, 0.072);
}

.gantt-resw-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Факт больше плана — то же состояние, что и в таблице часов задачи */
.gantt-resw-num-over {
    color: #b7791f;
    font-weight: 600;
}

/* Ставка менялась: сколько периодов */
.gantt-resw-periods {
    margin-left: 2px;
    font-size: 9px;
    color: #9b9b9b;
}

.gantt-resw-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.gantt-resw-row .gantt-res-btn {
    opacity: 0.45;
}

.gantt-resw-row:hover .gantt-res-btn {
    opacity: 1;
}

/* Значок ставки цветом говорит, задана она или нет: тёмный — задана, красный
   — нет. Видно без наведения (остальные кнопки приглушены), но приглушённо:
   строк много, и ряд ярких значков превратился бы в светофор. */
.gantt-resw-row .gantt-res-rate-on {
    color: #3a3a3a;
    opacity: 0.9;
}

.gantt-resw-row .gantt-res-rate-off {
    color: #c98b8b;
    opacity: 0.9;
}

/* Карточка ставок раскрывается под своей строкой */
.gantt-resw-card {
    margin: 0 0 6px 8px;
    padding: 6px;
    border-left: 2px solid rgba(31, 31, 31, 0.21);
    border-radius: 0 6px 6px 0;
    background: rgba(31, 31, 31, 0.03);
}

.gantt-resw-card .gantt-res-row-rates {
    padding: 0;
    background: none;
}

.gantt-resw-total {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e6e6e6;
    font-size: 12px;
    color: #6f6f6f;
}

.gantt-resw-total span:first-child {
    font-weight: 600;
    color: #1f1f1f;
}

.gantt-resw-total-note {
    color: #9b9b9b;
}

/* Строка «завести исполнителя» */
.gantt-resw-add {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.gantt-edit-modal-body input.gantt-resw-add-name,
.gantt-edit-modal-body input.gantt-resw-add-rate {
    padding: 7px 10px;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    color: #1f1f1f;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gantt-edit-modal-body input.gantt-resw-add-name {
    flex: 1 1 auto;
    min-width: 0;
}

.gantt-edit-modal-body input.gantt-resw-add-rate {
    flex: 0 0 110px;
    width: 110px;
    text-align: center;
}

.gantt-edit-modal-body input.gantt-resw-add-name:focus,
.gantt-edit-modal-body input.gantt-resw-add-rate:focus {
    outline: none;
    border-color: #1f1f1f;
    box-shadow: 0 0 0 3px rgba(31, 31, 31, 0.06);
}

.gantt-resw-note {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #9b9b9b;
}

/* На узком экране числа не влезают — окно прокручивается вбок целиком */
@media (max-width: 900px) {
    .gantt-resw-table {
        overflow-x: auto;
    }

    .gantt-resw-head,
    .gantt-resw-row {
        min-width: 780px;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Выбор исполнителей в модалке редактирования задачи.
   Свой список с галочками вместо <datalist>: нативную подсказку рисует
   операционная система — чёрное меню посреди светлой формы, и отметить в нём
   нескольких нельзя.
   ─────────────────────────────────────────────────────────────────────────── */
.gantt-res-picker {
    position: relative;
}

/* Поле выглядит как обычный ввод формы: та же рамка, радиус и подсветка */
.gantt-res-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: 42px;
    padding: 5px 32px 5px 8px;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
    background: #ffffff;
    cursor: text;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gantt-res-picker.is-open .gantt-res-control,
.gantt-res-control:focus-within {
    border-color: #1f1f1f;
    box-shadow: 0 0 0 3px rgba(31, 31, 31, 0.06);
}

.gantt-res-chips {
    display: contents;
}

.gantt-res-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 3px 4px 3px 8px;
    border-radius: 6px;
    background: rgba(31, 31, 31, 0.06);
    color: #1f1f1f;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.gantt-res-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: #1f1f1f;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s;
}

.gantt-res-chip-x:hover {
    opacity: 1;
    background: rgba(31, 31, 31, 0.108);
}

/* Строка набора занимает остаток ряда, но не ломает перенос плашек.
   Селектор нарочно тяжёлый: общее правило формы
   «.gantt-edit-field input[type="text"]» весит класс + атрибут + тег, и одних
   двух классов не хватает — рамка поля ввода так и рисовалась внутри поля
   выбора. Имя тега добавляет тот самый недостающий вес, а ниже по файлу наше
   правило и выигрывает по порядку. */
.gantt-edit-field input.gantt-res-search {
    flex: 1 1 110px;
    width: auto;
    min-width: 110px;
    padding: 4px 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: #1f1f1f;
}

.gantt-edit-field input.gantt-res-search:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.gantt-res-caret {
    position: absolute;
    top: 12px;
    right: 10px;
    display: flex;
    color: #9b9b9b;
    pointer-events: none;
    transition: transform 0.2s;
}

.gantt-res-picker.is-open .gantt-res-caret {
    transform: rotate(180deg);
}

.gantt-res-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 230px;
    overflow-y: auto;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.gantt-res-menu[hidden] {
    display: none;
}

/* Строка списка: галочка с именем занимает всё, корзинка прижата к правому краю */
.gantt-res-row {
    display: flex;
    align-items: center;
    border-radius: 6px;
}

.gantt-res-row:hover {
    background: #f3f3f3;
}

/* Выбранные отделены от остальных: сверху взятые, ниже — кого можно взять */
.gantt-res-sep {
    height: 1px;
    margin: 4px 6px;
    background: #ececec;
}

/* Строка списка — тоже <label>, а у формы есть своё правило для подписей полей
   («.gantt-edit-field label»: display: block, свой отступ и размер). Оно
   специфичнее одного класса, поэтому строка перестала быть флексом и галочка
   липла к имени. Привязываемся к полю — и правило перебито. */
.gantt-edit-field .gantt-res-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 0;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #1f1f1f;
    cursor: pointer;
    user-select: none;
}

.gantt-edit-field .gantt-res-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Карандаш и корзинка приглушены по умолчанию: два десятка ярких значков в
   списке — шум, но и прятать до наведения нельзя, иначе о них никто не узнает */
.gantt-res-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: #9b9b9b;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.gantt-res-del {
    margin-right: 4px;
}

.gantt-res-row:hover .gantt-res-btn {
    opacity: 1;
}

.gantt-res-edit:hover,
.gantt-res-rate:hover {
    color: #1f1f1f;
    background: rgba(31, 31, 31, 0.072);
}

.gantt-res-rate {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* ── Карточка ставок исполнителя: «с такой-то даты — столько-то» ── */
.gantt-res-row-rates {
    display: block;
    padding: 6px;
    background: rgba(31, 31, 31, 0.036);
}

.gantt-rate-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.gantt-rate-card-name {
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    color: #1f1f1f;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-rate-line {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.gantt-rate-since,
.gantt-rate-unit {
    flex: 0 0 auto;
    font-size: 11px;
    color: #6f6f6f;
}

/* Привязка к САМОЙ КАРТОЧКЕ, а не к полю формы: её открывают из двух мест —
   из списка исполнителей в окне задачи (там вокруг .gantt-edit-field) и из
   окна «Ресурсы» (там его нет). С привязкой к полю формы во втором случае
   правила не применялись вовсе, и поля выходили нативными.
   Имя тега здесь обязательно: общее правило формы «.gantt-edit-field
   input[type=date]» весит класс + атрибут + тег, двух классов против него
   не хватает. */
.gantt-rate-card input.gantt-rate-from,
.gantt-rate-card input.gantt-rate-value {
    padding: 4px 6px;
    border: 1px solid #d6d6d4;
    border-radius: 6px;
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    color: #1f1f1f;
}

/* Дата тянется, но не бесконечно: в узкой карточке выпадающего списка ей нужна
   вся строка, а в широком окне «Ресурсы» растянутая на пол-окна дата — пустота */
.gantt-rate-card input.gantt-rate-from {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 170px;
}

.gantt-rate-card input.gantt-rate-value {
    flex: 0 0 62px;
    width: 62px;
    text-align: center;
}

.gantt-rate-card input.gantt-rate-from:focus,
.gantt-rate-card input.gantt-rate-value:focus {
    outline: none;
    border-color: #1f1f1f;
    box-shadow: 0 0 0 3px rgba(31, 31, 31, 0.072);
}

.gantt-rate-drop {
    width: 20px;
    height: 20px;
    font-size: 15px;
    line-height: 1;
    opacity: 0.6;
}

.gantt-rate-drop:hover {
    color: #b42318;
    background: rgba(180, 35, 24, 0.1);
}

.gantt-rate-add {
    display: block;
    width: 100%;
    padding: 5px;
    border: 1px dashed #d6d6d4;
    border-radius: 6px;
    background: none;
    color: #1f1f1f;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.gantt-rate-add:hover {
    background: rgba(31, 31, 31, 0.048);
}

.gantt-rate-note {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.35;
    color: #9b9b9b;
}

.gantt-res-del:hover {
    color: #b42318;
    background: rgba(180, 35, 24, 0.1);
}

/* Строка в правке: вместо подписи — поле ввода и галочка «готово» */
.gantt-res-row-edit {
    gap: 4px;
    padding: 3px 4px 3px 6px;
    background: rgba(31, 31, 31, 0.036);
}

.gantt-edit-field input.gantt-res-rename {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid #1f1f1f;
    border-radius: 6px;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    color: #1f1f1f;
}

.gantt-edit-field input.gantt-res-rename:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 31, 31, 0.072);
}

.gantt-res-ok {
    opacity: 1;
    color: #3a3a3a;
}

.gantt-res-ok:hover {
    background: rgba(31, 31, 31, 0.07);
}

.gantt-edit-field .gantt-res-option-on {
    color: #1f1f1f;
    font-weight: 500;
}

.gantt-res-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #1f1f1f;
    cursor: pointer;
}

.gantt-res-add {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    border: none;
    border-top: 1px solid #ececec;
    border-radius: 0 0 6px 6px;
    background: none;
    color: #1f1f1f;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.gantt-res-add:hover {
    background: rgba(31, 31, 31, 0.048);
}

.gantt-res-empty {
    padding: 8px;
    font-size: 12px;
    color: #9b9b9b;
}

/* ───────────────────────────────────────────────────────────────────────────
   Трудозатраты по исполнителям в модалке редактирования задачи.
   Строка на каждый ресурс из поля «Ресурсы»: имя — план, ч — факт, ч.
   Рамка та же, что у блока периодичности: оба — вложенные блоки формы.
   ─────────────────────────────────────────────────────────────────────────── */
.gantt-edit-effort .gantt-effort-box {
    border: 1px dashed #d6d6d4;
    border-radius: 7px;
    background: #f6f6f5;
    padding: 10px 12px;
}

/* Сетка одна на шапку и строки — иначе подписи колонок разъезжались бы с
   полями при длинном имени исполнителя. Три числа: план, факт, стоимость часа. */
.gantt-effort-head,
.gantt-effort-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px 22px 68px 78px;
    column-gap: 6px;
    align-items: center;
}

.gantt-effort-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9b9b9b;
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 6px;
}

.gantt-effort-head span:not(:first-child) {
    text-align: center;
}

.gantt-effort-row + .gantt-effort-row {
    margin-top: 6px;
}

/* Клетка имени — флекс: обрезается само имя, а кнопка режима «ч/%» справа от
   него не сжимается и не съедается многоточием. Раньше обрезка стояла на всей
   клетке, и у длинного имени кнопка пропадала вместе с хвостом фамилии. */
.gantt-effort-name {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 13px;
    color: #1f1f1f;
}

.gantt-effort-person {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Поле уже общего .gantt-edit-field input: два числа и имя должны укладываться
   в полширины модалки. Рамка тоньше по той же причине. */
.gantt-edit-effort .gantt-effort-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d6d6d4;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    text-align: center;
    background: #ffffff;
    color: #1f1f1f;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gantt-edit-effort .gantt-effort-input:focus {
    outline: none;
    border-color: #1f1f1f;
    box-shadow: 0 0 0 3px rgba(31, 31, 31, 0.06);
}

/* Кнопка «=» в шапке, между названиями «План» и «Факт»: факт = план у всех.
   Приглушена, как карандаш с корзинкой в списке исполнителей, и по той же
   причине: яркий значок в ряду подписей читался бы как ошибка. */
.gantt-edit-effort .gantt-effort-eq {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: none;
    color: #9b9b9b;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.gantt-effort-box:hover .gantt-effort-eq {
    opacity: 1;
}

.gantt-edit-effort .gantt-effort-eq:hover {
    color: #1f1f1f;
    background: rgba(31, 31, 31, 0.072);
}

/* «≠» — где-то факт разошёлся с планом. Не ошибка, а состояние работы,
   поэтому не красный, а тот же акцент формы, только в полную силу. */
.gantt-edit-effort .gantt-effort-eq-diff {
    color: #1f1f1f;
    opacity: 1;
}

/* Пустая клетка строки под кнопкой шапки — держит колонки на месте */
.gantt-effort-gap {
    display: block;
}

/* Ставка меняется внутри срока задачи: в клетке одно число, а стоимость
   считается по кускам. Пунктир снизу — «тут не всё сказано, наведи» */
.gantt-edit-effort .gantt-effort-rate-split {
    border-bottom: 2px dashed #1f1f1f;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: help;
}

/* Факт больше плана — единственное состояние, о котором стоит сказать цветом */
.gantt-edit-effort .gantt-effort-input-over {
    border-color: #b7791f;
    background: #fbf6ec;
    color: #b7791f;
}

/* Раздел в окне задачи: исполнители и часы — свод вложенных задач, только чтение */
.gantt-sum-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
    min-height: 34px;
    box-sizing: border-box;
}

.gantt-sum-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px 54px 82px 82px;
    column-gap: 6px;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    color: #1f1f1f;
    font-variant-numeric: tabular-nums;
}

.gantt-sum-row > span:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.gantt-sum-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9b9b9b;
    padding: 0 0 6px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 2px;
}

.gantt-sum-head > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-sum-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.gantt-sum-person {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-sum-count {
    flex: none;
    font-size: 11px;
    color: #9b9b9b;
}

.gantt-sum-row-over .gantt-sum-fact {
    color: #b42318;
}

.gantt-effort-empty {
    font-size: 12px;
    color: #9b9b9b;
    line-height: 1.4;
}

/* Откуда взялся план: срок × часы в дне. Пока число наше — подсказка висит. */
.gantt-effort-hint {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.35;
    color: #9b9b9b;
}

.gantt-effort-total {
    display: none;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e6e6e6;
    font-size: 12px;
    color: #6f6f6f;
}

.gantt-effort-total.gantt-effort-total-shown {
    display: block;
}

/* Две строки итога: часы и деньги. Плашка прижата к правому краю. */
.gantt-effort-total-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.gantt-effort-total-line + .gantt-effort-total-line {
    margin-top: 5px;
}

.gantt-effort-total b {
    color: #1f1f1f;
    font-weight: 600;
}

.gantt-effort-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(31, 31, 31, 0.06);
    color: #1f1f1f;
    white-space: nowrap;
}

.gantt-effort-badge-ok {
    background: rgba(31, 31, 31, 0.06);
    color: #3a3a3a;
}

.gantt-effort-badge-over {
    background: rgba(180, 35, 24, 0.1);
    color: #b42318;
}

/* ───────────────────────────────────────────────────────────────────────────
   Метка ID элемента диалога (#Т1 / #Г1 / #Р1) — artifact-refs.js.
   Сидит в левом верхнем углу элемента, по клику вставляет ссылку в поле ввода.
   Приглушена по умолчанию и проявляется при наведении на элемент: постоянная
   яркая плашка на каждой таблице зашумила бы чтение ответа.
   ─────────────────────────────────────────────────────────────────────────── */
.artifact-id-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 4;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.6;
    color: #667eea;
    background: rgba(102, 126, 234, 0.10);
    border: 1px solid rgba(102, 126, 234, 0.30);
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s;
}

.table-wrapper-with-btn:hover > .artifact-id-badge,
.inline-chart-container:hover > .artifact-id-badge,
.generated-image-container:hover > .artifact-id-badge,
.artifact-id-badge:hover {
    opacity: 1;
}

.artifact-id-badge:hover {
    background: rgba(102, 126, 234, 0.20);
}

/* Ресайз-ручки модалки редактирования задачи. Свой набор классов, а не
   .gantt-resize-handle от большой модалки Ганта: тот обработчик завязан на
   #ganttModalWindow и перерисовку canvas. */
.gantt-edit-resize-handle {
    position: absolute;
    z-index: 5;
    background: transparent;
}

.gantt-edit-resize-handle:hover {
    background: rgba(31, 31, 31, 0.12);
}

.gantt-edit-resize-n { top: 0; left: 0; right: 0; height: 6px; cursor: n-resize; }
.gantt-edit-resize-s { bottom: 0; left: 0; right: 0; height: 6px; cursor: s-resize; }
.gantt-edit-resize-w { top: 0; bottom: 0; left: 0; width: 6px; cursor: w-resize; }
.gantt-edit-resize-e { top: 0; bottom: 0; right: 0; width: 6px; cursor: e-resize; }

/* Углы перекрывают стороны — z-index выше */
.gantt-edit-resize-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nw-resize; z-index: 6; }
.gantt-edit-resize-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: ne-resize; z-index: 6; }
.gantt-edit-resize-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: sw-resize; z-index: 6; }
.gantt-edit-resize-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; z-index: 6; }

.gantt-edit-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e6e6e6;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.gantt-edit-actions-left {
    display: flex;
    gap: 8px;
    margin-right: auto;
}

/* Кнопки-иконки без заливки */
.chart-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #6f6f6f;
}

.chart-btn-icon:hover {
    background: #f3f3f3;
    color: #1f1f1f;
}

.chart-btn-icon-danger {
    color: #b42318;
}

.chart-btn-icon-danger:hover {
    background: #f7e3e1;
    color: #b42318;
}

.chart-btn-icon-clone {
    color: #6f6f6f;
}

.chart-btn-icon-clone:hover {
    background: #f3f3f3;
    color: #1f1f1f;
}

.gantt-edit-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.gantt-edit-btn-cancel {
    background: #e6e6e6;
    color: #1f1f1f;
}

.gantt-edit-btn-cancel:hover {
    background: #d6d6d4;
}

.gantt-edit-btn-save {
    background: #1f1f1f;
    color: white;
}

.gantt-edit-btn-save:hover {
    box-shadow: 0 4px 12px rgba(31, 31, 31, 0.24);
}

/* Inline ������������� �������� */
.gantt-task-name,
.gantt-task-dates,
.gantt-task-resource,
.gantt-task-progress {
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.gantt-task-name:hover,
.gantt-task-dates:hover,
.gantt-task-resource:hover,
.gantt-task-progress:hover {
    background: rgba(31, 31, 31, 0.06);
}

.gantt-task-resource {
    opacity: 0.7;
    font-size: 12px;
}

.gantt-task-resource:hover {
    opacity: 1;
}

/* ==================== TABLE EDITOR MODULE ==================== */

/* ����� ����������������� ������� */
.table-edited-label {
    display: inline-block;
    margin-bottom: 4px;
    margin-left: auto;
    padding-right: 5px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 400;
    text-align: right;
    width: 100%;
}

/* Wrapper ��� ������� � ������ */
.table-with-controls {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* ��������� ��������� ��� ����������� ���������������� ������ */
.message-content {
    position: relative;
}

/* ������ �������������� ������� (��� ��������, ����� � ������� �����) */
.table-editor-convert-btn {
    transition: all 0.2s ease;
}

.table-editor-convert-btn:hover {
    background: #3b82f6 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* ������ ���� ������� (������ � 4 ����������) */
.table-menu-btn {
    position: absolute !important;
    top: 8px;
    right: 8px;
    z-index: 100;
}

/* ����� ��� ������ ����� ��� ��������� (��� ������������) */
.gantt-convert-btn:hover {
    background: #1f1f1f !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(31, 31, 31, 0.24);
}

/* ����������� ���� �������� ��� �������� */
.table-actions-menu {
    position: fixed;
    background: white;
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 200px;
    z-index: 10000;
    animation: tableMenuFadeIn 0.15s ease;
}

@keyframes tableMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table-action-item {
    display: block;
    padding: 6px 10px;
    color: #4a5568;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.15s ease;
    cursor: pointer;
    line-height: 1.4;
}

.table-action-item:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Dark mode ��� ���� */

/* ��������� ���� ��������� */
.table-editor-modal {
    background: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* Resize handles */
.table-editor-resize-handle {
    position: absolute;
    z-index: 10;
}

.table-editor-resize-n {
    top: 0;
    left: 10px;
    right: 10px;
    height: 5px;
    cursor: n-resize;
}

.table-editor-resize-s {
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 5px;
    cursor: s-resize;
}

.table-editor-resize-w {
    top: 10px;
    left: 0;
    bottom: 10px;
    width: 5px;
    cursor: w-resize;
}

.table-editor-resize-e {
    top: 10px;
    right: 0;
    bottom: 10px;
    width: 5px;
    cursor: e-resize;
}

.table-editor-resize-nw {
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    cursor: nw-resize;
}

.table-editor-resize-ne {
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    cursor: ne-resize;
}

.table-editor-resize-sw {
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    cursor: sw-resize;
}

.table-editor-resize-se {
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    cursor: se-resize;
}

/* Toolbar */
.table-editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.table-editor-toolbar-left,
.table-editor-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-editor-info {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    padding: 4px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

/* ��������� ������� */
.table-editor-container {
    flex: 1;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
}

.table-editor-scroll {
    overflow: auto;
    max-height: calc(90vh - 300px);
    min-height: 200px;
}

/* ������������� ������� */
.editable-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
    font-size: 13px;
}

/* ������� ������ */
.table-editor-corner {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    box-sizing: border-box !important;
    height: 32px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 30;
    padding: 0 !important;
}

/* ������� �������� */
.table-editor-col-index {
    height: 32px;
    min-width: 80px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    color: #475569;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 0;
    user-select: none;
    position: relative;
}

/* Resize handle для изменения ширины колонок */
.col-resize-handle {
    position: absolute;
    right: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 25;
    background: transparent;
}

.col-resize-handle::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: #94a3b8;
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.15s;
}

.col-resize-handle:hover::after,
.col-resize-handle.active::after {
    opacity: 1;
}

.col-resize-handle:hover,
.col-resize-handle.active {
    background: rgba(59, 130, 246, 0.15);
}

body.table-editor-col-resizing,
body.table-editor-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.table-editor-col-index.hovered {
    background: #e2e8f0;
}

.col-index-content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    padding: 0 4px;
}

.col-letter {
    font-weight: 600;
    color: #475569;
}

.col-add-btn,
.col-remove-btn {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
    z-index: 5;
}

.table-editor-col-index.hovered .col-add-btn,
.table-editor-col-index.hovered .col-remove-btn {
    opacity: 1;
}

.col-add-left {
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.col-add-right {
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.col-remove-btn {
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.col-add-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    transform: translateY(-50%) scale(1.1);
}

.col-remove-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    transform: translateY(-50%) scale(1.1);
}

.col-add-btn svg,
.col-remove-btn svg {
    display: block;
}

/* ������� ����� */
.table-editor-row-index {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    box-sizing: border-box !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    color: #475569;
    text-align: center;
    position: sticky;
    left: 0;
    z-index: 10;
    padding: 0 !important;
    user-select: none;
}

.table-editor-row-index.hovered {
    background: #e2e8f0;
}

.row-index-content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    min-height: 36px;
    padding: 0;
    overflow: hidden;
    width: 40px;
    max-width: 40px;
}

.row-number {
    font-weight: 600;
    color: #475569;
}

.row-add-btn,
.row-remove-btn {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
    z-index: 5;
}

.table-editor-row-index.hovered .row-add-btn,
.table-editor-row-index.hovered .row-remove-btn {
    opacity: 1;
}

.row-add-top {
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.row-add-bottom {
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.row-remove-btn {
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.row-add-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    transform: translateX(-50%) scale(1.1);
}

.row-remove-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    transform: translateX(-50%) scale(1.1);
}

.row-add-btn svg,
.row-remove-btn svg {
    display: block;
}

/* ������ ������ */
.table-editor-cell {
    min-width: 80px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #1e293b;
    cursor: cell;
    transition: all 0.1s ease;
    vertical-align: middle;
}

.table-editor-cell:hover {
    background: #f8fafc;
}

.table-editor-cell.selected {
    background: #dbeafe;
    border-color: #3b82f6;
    box-shadow: inset 0 0 0 1px #3b82f6;
}

.table-editor-cell.merged-cell {
    background: #fef3c7;
}

.table-editor-cell.merged-cell.selected {
    background: #fde68a;
}

/* ������������� ������ (contenteditable) */
.table-editor-cell.editing {
    padding: 4px 8px;
    border: 2px solid #3b82f6 !important;
    background: white !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    cursor: text;
    white-space: pre-wrap;
    word-break: break-word;
}

.table-editor-cell.editing:focus {
    border-color: #2563eb !important;
}

/* ������ */
#tableEditorStatus {
    font-size: 13px;
    color: #64748b;
}

/* T4.5 ТЗ «Панель системных уведомлений»: один смысл — один цвет. Было
   #ef4444 — пятый красный в продукте. И появилось ПРЕДУПРЕЖДЕНИЕ: у строки
   состояния редактора таблиц его не было в принципе, только «ошибка» и
   «успех», причём успех стоял ПО УМОЛЧАНИЮ — 25 вызовов из 53 шли без типа, и
   отказ у них выглядел подтверждением. */
#tableEditorStatus.status-error {
    color: #c53030;
}

#tableEditorStatus.status-warning {
    color: #c05621;
}

/* Dark mode */

/* ==================== СТРУКТУРА ДИАЛОГА ==================== */

/* Кнопка структуры диалога — теперь живёт в .node-title-row и в .chat-page-bar-inner (Perplexity-стиль) */
.dialog-structure-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(19, 52, 59, 0.55);
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    padding: 0;
    outline: none;
}

.dialog-structure-btn:hover {
    background: rgba(19, 52, 59, 0.06);
    color: #20808D;
}

.dialog-structure-btn:active {
    transform: scale(0.94);
}

.dialog-structure-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30);
}

/* Меню структуры диалога — глобальный popup в body (position и координаты задаёт JS) */
.dialog-structure-menu {
    min-width: 280px;
    max-width: 400px;
    max-height: 45vh;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(19, 52, 59, 0.12), 0 1px 3px rgba(19, 52, 59, 0.06);
    z-index: 999999;
    display: none;
    flex-direction: column;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    animation: dialogStructureFadeIn 0.12s ease;
}

@keyframes dialogStructureFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Фиксированная часть (заголовок + кнопки) */
.dialog-structure-fixed {
    flex-shrink: 0;
    padding-top: 8px;
}

/* Скроллируемый список элементов */
.dialog-structure-items-list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 8px;
}

.dialog-structure-items-list::-webkit-scrollbar {
    width: 6px;
}

.dialog-structure-items-list::-webkit-scrollbar-track {
    background: transparent;
}

.dialog-structure-items-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.dialog-structure-items-list::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Заголовок меню структуры */
.dialog-structure-header {
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 4px;
}

/* Элемент списка структуры */
.dialog-structure-item {
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid transparent;
}

.dialog-structure-item:hover {
    background: rgba(49, 130, 206, 0.08);
    color: #2b6cb0;
    border-left-color: #3182ce;
}

.dialog-structure-item-number {
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 130, 206, 0.1);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3182ce;
    flex-shrink: 0;
}

.dialog-structure-item-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.dialog-structure-empty {
    padding: 16px 12px;
    text-align: center;
    color: #a0aec0;
    font-size: 0.85rem;
    font-style: italic;
}

/* Кнопки управления (показать все / скрыть все) */
.dialog-structure-controls {
    display: flex;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 4px;
}

.dialog-structure-ctrl-btn {
    flex: 1;
    padding: 4px 8px;
    font-size: 0.7rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.8);
    color: #4a5568;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dialog-structure-ctrl-btn:hover {
    background: #3182ce;
    color: white;
    border-color: #3182ce;
}

/* Кнопки управления контекстом */
.dialog-structure-ctrl-btn.ctx-btn {
    background: rgba(237, 137, 54, 0.1);
    border-color: rgba(237, 137, 54, 0.3);
    color: #c05621;
}

.dialog-structure-ctrl-btn.ctx-btn:hover {
    background: #ed8936;
    color: white;
    border-color: #ed8936;
}

.dialog-structure-ctrl-btn.ctx-btn.has-excluded {
    background: rgba(229, 62, 62, 0.15);
    border-color: rgba(229, 62, 62, 0.4);
    color: #c53030;
    font-weight: 600;
}

/* Стилизованный toggle-переключатель (контурный, компактный) */
.dialog-structure-toggle {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.dialog-structure-toggle-checkbox {
    display: none;
}

.dialog-structure-toggle-slider {
    width: 24px;
    height: 12px;
    background: transparent;
    border: 1.5px solid #a0aec0;
    border-radius: 12px;
    position: relative;
    transition: 0.2s;
}

.dialog-structure-toggle-slider::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #a0aec0;
    border-radius: 50%;
    top: 0.5px;
    left: 1px;
    transition: 0.2s;
}

.dialog-structure-toggle-checkbox:checked + .dialog-structure-toggle-slider {
    border-color: #718096;
}

.dialog-structure-toggle-checkbox:checked + .dialog-structure-toggle-slider::after {
    transform: translateX(11px);
    background: #718096;
}

.dialog-structure-toggle:hover .dialog-structure-toggle-slider {
    border-color: #718096;
}

.dialog-structure-toggle:hover .dialog-structure-toggle-slider::after {
    background: #718096;
}

.dialog-structure-toggle:hover .dialog-structure-toggle-checkbox:checked + .dialog-structure-toggle-slider {
    border-color: #4a5568;
}

.dialog-structure-toggle:hover .dialog-structure-toggle-checkbox:checked + .dialog-structure-toggle-slider::after {
    background: #4a5568;
}

/* Элемент списка, который отфильтрован (скрыт в чате) */
.dialog-structure-item.filtered-out {
    opacity: 0.5;
}

.dialog-structure-item.filtered-out .dialog-structure-item-text {
    text-decoration: line-through;
    color: #a0aec0;
}

/* Кастомный tooltip для саммари в структуре диалога — lite стиль */
.summary-tooltip {
    position: fixed;
    padding: 8px 12px;
    background: rgba(250, 248, 245, 0.97);
    color: #5a564f;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.5;
    border-radius: 6px;
    max-width: 280px;
    min-width: 100px;
    z-index: 999999;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(180, 175, 165, 0.25);
    word-wrap: break-word;
    backdrop-filter: blur(8px);
}

/* Скрытые сообщения в чате (визуально скрыты, но в контексте остаются) */
.message-filtered-hidden {
    display: none !important;
}

/* Темная тема для структуры диалога */

/* Подсветка сообщения при навигации */
.message-highlight {
    animation: messageHighlight 1.5s ease-out;
}

@keyframes messageHighlight {
    0% {
        background: rgba(49, 130, 206, 0.3);
        box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.2);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* Темная тема для подсветки */

/* ═══════════════════════════════════════
   ☁️ ОБЛАЧНЫЕ ПРОЕКТЫ — стили
   ═══════════════════════════════════════ */

.cloud-project-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.15s;
}

.cloud-project-item:hover {
    background: #f7fafc;
}

.cloud-project-item.active {
    background: #e6f7ff;
    border-left: 3px solid #3182ce;
}

.cloud-project-info {
    flex: 1;
    min-width: 0;
}

.cloud-project-name {
    color: #2d3748;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cloud-project-badge {
    font-size: 10px;
    background: #3182ce;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.cloud-project-meta {
    color: #718096;
    font-size: 12px;
    margin-bottom: 2px;
}

.cloud-project-date {
    color: #a0aec0;
    font-size: 11px;
}

.cloud-project-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 12px;
}

.cloud-btn {
    padding: 6px 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #718096;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-btn:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    color: #4a5568;
}

.cloud-btn-load:hover {
    background: #3182ce;
    border-color: #3182ce;
    color: white;
}

.cloud-btn-save:hover {
    background: #48bb78;
    border-color: #48bb78;
    color: white;
}

.cloud-btn-delete:hover {
    background: #f56565;
    border-color: #f56565;
    color: white;
}

/* ═══════════════════════════════════════
   🎨 ПРЕЗЕНТАЦИОННЫЙ КОНСТРУКТОР
   ═══════════════════════════════════════ */
.presentation-builder-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    min-width: 36px;
    height: 36px;
}

.presentation-builder-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.presentation-builder-btn:active {
    transform: translateY(0);
}

.presentation-builder-btn svg {
    stroke: currentColor;
    stroke-width: 1.5;
}

/* Адаптивные стили для приложения */
@media (max-width: 1200px) {
    .app-container {
        width: 100vw;
    }

    .canvas-sidebar {
        width: 240px;
        min-width: 200px;
    }

    /* Подстройка зоны логотипа под уменьшенный сайдбар (см. .app-logo выше) */
    .app-logo {
        width: calc(240px - 1.5rem);
    }
}

@media (max-width: 768px) {
    .toolbar {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
    }
    
    .toolbar-left {
        gap: 1rem;
    }
    
    .toolbar-right {
        gap: 0.5rem;
    }
    
    .zoom-controls {
        gap: 0.25rem;
    }
    
    .zoom-btn {
        padding: 0.35rem;
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   🏥 HEALTH ALARM — Индикатор доступности в toolbar
   ═══════════════════════════════════════════════════════════════════ */

.health-alarm-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(212, 112, 106, 0.1);
    border: 1px solid rgba(212, 112, 106, 0.25);
    cursor: default;
    position: relative;
    animation: healthAlarmPulse 3s ease-in-out infinite;
}

@keyframes healthAlarmPulse {
    0%, 100% { border-color: rgba(212, 112, 106, 0.25); }
    50%      { border-color: rgba(212, 112, 106, 0.5); }
}

.health-alarm-text {
    color: #d4706a;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Тултип при наведении */
.health-alarm-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1e1c24;
    border: 1px solid rgba(232, 227, 219, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 280px;
    max-width: 360px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}

.health-alarm-tooltip::-webkit-scrollbar { width: 5px; }
.health-alarm-tooltip::-webkit-scrollbar-thumb { background: rgba(232,227,219,0.10); border-radius: 3px; }
.health-alarm-tooltip::-webkit-scrollbar-thumb:hover { background: rgba(232,227,219,0.18); }

.health-alarm-indicator:hover .health-alarm-tooltip {
    display: block;
}

.health-tooltip-header {
    color: #e8a09c;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.health-tooltip-stats {
    color: #948e84;
    font-size: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(232, 227, 219, 0.07);
}

.health-tooltip-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.health-tooltip-model {
    color: #6b6560;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Стилизация недоступных моделей в селекторе */
.model-select option.model-unavailable {
    color: #d4706a !important;
    background: rgba(212, 112, 106, 0.05);
}

/* ═══════════════════════════════════════════ */
/* 🏥 MODEL HEALTH PING — модалка и таблица   */
/* ═══════════════════════════════════════════ */

/* Кнопка лампочки */
#modelHealthBtn {
    position: relative;
}

/* Мигание лампочки, когда часть моделей недоступна.
   Цвет приходит из JS через CSS-переменную --health-bulb-color
   (берётся из _calcOverallColor: оранжевый/красный/тёмно-красный
   в зависимости от доли недоступных). */
@keyframes health-bulb-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
#modelHealthBtn.health-bulb-alert .health-bulb-icon {
    color: var(--health-bulb-color, #d4706a) !important;
    animation: health-bulb-blink 1s ease-in-out infinite;
}
/* Заливка SVG-лампочки в цвет алярма (а не только обводка) */
#modelHealthBtn.health-bulb-alert .health-bulb-icon svg path {
    fill: currentColor;
}

/* Модалка */
.hp-modal {
    width: 520px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    padding: 0;
}

.hp-modal .modal-header {
    padding: 20px 20px 14px;
    margin-bottom: 0;
    border-bottom: 1px solid #e2e8f0;
}

.hp-meta {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px 6px;
    color: #718096;
    font-size: 12px;
}

.hp-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 14px;
    min-height: 120px;
    max-height: 60vh;
}
.hp-body::-webkit-scrollbar { width: 6px; }
.hp-body::-webkit-scrollbar-track { background: #f7fafc; border-radius: 3px; }
.hp-body::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }
.hp-body::-webkit-scrollbar-thumb:hover { background: #a0aec0; }

.hp-footer {
    padding: 12px 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

.hp-run-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.hp-empty {
    color: #a0aec0;
    text-align: center;
    padding: 32px 0;
    font-size: 13px;
}

/* Группы провайдеров */
.hp-group-label {
    color: #718096;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 0 4px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 2px;
}
.hp-group-label:first-child { padding-top: 0; }

/* Таблица */
.hp-table {
    width: 100%;
    border-collapse: collapse;
}
.hp-table td {
    padding: 5px 0;
    font-size: 12px;
    color: #2d3748;
    vertical-align: middle;
}
.hp-table tr:hover {
    background: #f7fafc;
}

.hp-model-name {
    width: 55%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}

.hp-ms-cell {
    width: 25%;
    text-align: right;
    padding-right: 8px !important;
    color: #718096;
    font-variant-numeric: tabular-nums;
    position: relative;
}

.hp-ms-bar {
    height: 3px;
    background: #edf2f7;
    border-radius: 2px;
    margin-top: 2px;
    overflow: hidden;
}
.hp-ms-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.hp-status-cell {
    width: 20%;
    text-align: right;
}

/* Бейджи статуса */
.hp-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}
.hp-ok        { background: #f0fff4; color: #38a169; }
.hp-slow      { background: #fffbeb; color: #d69e2e; }
.hp-very-slow { background: #fff5f5; color: #e53e3e; }
.hp-warn      { background: #fffbeb; color: #d69e2e; }
.hp-err       { background: #fff5f5; color: #e53e3e; }
.hp-unknown   { background: #f7fafc; color: #718096; }  /* не проверялась / не судим */

/* Спиннер при тестировании */
@keyframes hp-spin { to { transform: rotate(360deg); } }
.hp-spin { animation: hp-spin 1s linear infinite; }

/* ═══════════════════════════════════════════════════════════════════
   TABLET / iPAD ADAPTATION
   ═══════════════════════════════════════════════════════════════════ */

/* Detect touch-capable large screens (tablets) */
@media (pointer: coarse) and (min-width: 700px) {

    /* --- Touch-action control --- */
    .tree-canvas {
        touch-action: none; /* Managed by touch-adapter.js */
        -webkit-overflow-scrolling: touch;
    }

    .node-messages,
    .canvas-list,
    .modal-content,
    .settings-modal-content {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* --- Prevent iOS callout on interactive elements --- */
    .node-header,
    .zoom-btn,
    .canvas-item,
    .node-controls button,
    .btn {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Allow text selection in message content */
    .message-content,
    .node-title,
    textarea,
    [contenteditable] {
        -webkit-user-select: text;
        user-select: text;
    }

    /* --- Enlarge touch targets to 44px minimum (Apple HIG) --- */
    .zoom-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .node-config-btn,
    .node-height-expand-btn,
    .node-fullscreen-btn,
    .node-delete-btn,
    .node-chat-mode-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 16px;
    }

    /* iPad не имеет :hover, поэтому делаем абсолютные кнопки шапки всегда видимыми. */
    .dialog-node .node-config-btn,
    .dialog-node .node-fullscreen-btn,
    .dialog-node .node-delete-btn,
    .dialog-node .node-chat-mode-btn {
        opacity: 1;
    }

    /* Пересчитанные правые отступы под 36px-кнопки + 4px gap
     * (десктопные значения 8/40/72/104 рассчитаны под 28px и на iPad дают наложения). */
    .node-delete-btn      { right: 8px; }
    .node-config-btn      { right: 48px; }
    .node-fullscreen-btn  { right: 88px; }
    .node-chat-mode-btn   { right: 128px; }

    .node-header-buttons {
        gap: 6px;
    }

    /* Enlarge resize handle for touch (44x44 touch zone) */
    .dialog-node::after {
        width: 20px;
        height: 20px;
        right: 2px;
        bottom: 2px;
    }

    /* Invisible enlarged touch target for resize handle */
    .dialog-node::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 44px;
        height: 44px;
        z-index: 199;
        cursor: se-resize;
    }

    /* --- Canvas sidebar adjustments for iPad --- */
    .canvas-sidebar {
        min-width: 260px;
        width: 260px;
    }

    .canvas-item {
        padding: 0.85rem 1rem;
        min-height: 44px;
    }

    /* --- Toolbar spacing for touch --- */
    .toolbar {
        padding: 0.6rem 1rem;
    }

    .zoom-controls {
        gap: 4px;
    }

    .toolbar-right {
        gap: 0.75rem;
    }

    .btn.btn-outline {
        padding: 10px 18px;
        min-height: 40px;
    }

    /* В тулбаре сохраняем pill-стиль на touch (см. .toolbar-right .btn выше) */
    .toolbar-right .btn,
    .toolbar-right .btn.btn-outline {
        padding: 0 14px;
        height: 40px;
        min-height: 40px;
        border-radius: 9999px;
    }

    .toolbar-right .api-balance,
    #aitunnelBalance.api-balance {
        height: 40px;
        min-height: 40px;
        line-height: 40px;
        padding: 0 16px;
    }

    /* --- Node input area: larger for tablet keyboards --- */
    .node-input textarea {
        min-height: 50px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .node-input .send-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* --- Selection tooltip: easier to tap --- */
    .selection-tooltip .tooltip-btn {
        padding: 0.65rem 1rem;
        min-height: 44px;
        font-size: 0.9rem;
    }

    .selection-tooltip .tooltip-close-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    /* --- Model select dropdown: enlarged for iPad touch --- */
    .model-select {
        min-height: 44px;
        height: 44px;
        font-size: 16px;
        max-width: 260px;
        width: 260px;
        padding: 0.5rem 0.8rem;
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 28px;
    }

    .model-select option {
        font-size: 16px;
        padding: 8px;
        min-height: 40px;
    }

    /* --- File upload area --- */
    .file-upload-area {
        min-height: 60px;
    }

    /* --- Dialog structure menu items --- */
    .dialog-structure-item {
        min-height: 40px;
        padding: 8px 12px;
    }

    /* --- Sidebar toggle button (for hiding sidebar) --- */
    .sidebar-outline-btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* --- Node navigator panel --- */
    .node-navigator-header {
        min-height: 44px;
    }

    .node-navigator-item {
        min-height: 40px;
        padding: 8px 12px;
    }

    /* --- Scrollbar on touch: thinner, auto-hide --- */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .tree-canvas::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* --- Disable hover effects that flash on touch --- */
    .dialog-node:hover {
        transform: none;
        border-color: rgba(19, 52, 59, 0.10);
        box-shadow: 0 1px 3px rgba(19, 52, 59, 0.06), 0 4px 12px rgba(19, 52, 59, 0.04);
    }

    .dialog-node.active {
        border-color: #20B8CD;
        box-shadow: 0 0 0 1px rgba(32, 184, 205, 0.20), 0 6px 20px rgba(19, 52, 59, 0.08);
        transform: none;
    }

    .zoom-btn:hover {
        background: transparent;
        color: rgba(19, 52, 59, 0.62);
    }

    .canvas-item:hover {
        background: transparent;
    }

    /* Active state feedback instead of hover */
    .zoom-btn:active {
        background: rgba(31, 184, 205, 0.12);
        color: #1FB8CD;
        transform: scale(0.96);
    }

    .canvas-item:active {
        background: rgba(19, 52, 59, 0.05);
    }

    .node-config-btn:active,
    .node-height-expand-btn:active,
    .node-fullscreen-btn:active,
    .node-chat-mode-btn:active {
        background: rgba(31, 184, 205, 0.12);
        color: #1FB8CD;
        transform: scale(0.94);
    }
}

/* iPad landscape-specific: wider nodes */
@media (pointer: coarse) and (min-width: 1024px) and (orientation: landscape) {
    .dialog-node {
        min-width: 420px;
    }
}

/* iPad portrait: narrower sidebar */
@media (pointer: coarse) and (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
    .canvas-sidebar {
        width: 220px;
        min-width: 220px;
    }

    .dialog-node {
        width: 400px;
        min-width: 350px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET COMPACT TOOLBAR — узкие тач-экраны (iPad portrait/landscape
   до ~1280px CSS-ширины).

   ЗАЧЕМ: базовый touch-блок выше (@media pointer:coarse min-width:769)
   ради 40px HIG-таргетов РАЗДУВАЕТ ленту тулбара, из-за чего на iPad
   она не помещается по ширине и правые группы (Аккаунт/Сервис) уходят
   за край — у .toolbar стоит space-between без переноса и overflow.

   ЗДЕСЬ возвращаем компактную геометрию ИМЕННО тулбару (тач-таргеты
   узлов/инпутов из верхнего блока не трогаем — их увеличивать верно):
   34px-кнопки, плотные gap'ы, без вертикальных подписей групп, авто-
   ширина логотипа. Плюс flex-wrap как страховка: если даже после
   ужатия не влезает (узкий portrait), правая зона целиком переносится
   на вторую строку, ничего не обрезается. Блок идёт ПОЗЖЕ и УЖЕ по
   ширине, чем раздувающий, — поэтому выигрывает каскад.
   ─────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) and (min-width: 700px) and (max-width: 1280px) {
    .toolbar {
        padding: 0.4rem 0.5rem 0.3rem;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    /* Лента в ОДНУ строку: правая зона (Статус/Аккаунт/Сервис) всегда видима
       целиком и прижата вправо; левая лента может сжиматься и при нехватке
       ширины прокручивается горизонтально (свайпом), а не переносится на
       вторую строку. См. .zoom-controls ниже. */
    .toolbar-left {
        flex: 1 1 auto;
        min-width: 0;
    }
    .toolbar-right {
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: 0.5rem;
        gap: 0.25rem;
    }

    /* Логотип не равняем по ширине сайдбара — даём ленте больше места */
    .app-logo {
        width: auto;
        padding-left: 0.5rem;
        font-size: 1.15rem;
        gap: 0.3rem;
    }
    .logo-icon { width: 26px; height: 26px; }

    /* Группы: убираем подписи и схлопываем высоту в один ряд */
    .toolbar-group,
    .toolbar-right .toolbar-group {
        min-height: 0;
        padding: 0 0.3rem;
    }
    .toolbar-group-label { display: none; }
    .toolbar-group-content { gap: 0.15rem; }
    .toolbar-group-sep {
        height: 26px;
        margin: 0 2px;
    }

    .zoom-controls {
        padding: 4px 0 4px 0.4rem; /* верт. 4px — чтобы скролл не срезал бейджи кнопок */
        margin-left: 0;
        gap: 0.15rem;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;        /* лента без видимого скроллбара */
    }
    .zoom-controls::-webkit-scrollbar { width: 0; height: 0; }

    /* Компактные тач-кнопки: 34px вместо раздутых 40px */
    .zoom-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }
    #rbaseOpenToolbarBtn {
        width: auto;
        height: 34px;
        padding: 0 8px;
    }
    .zoom-level {
        min-width: 38px;
        padding: 0.2rem 0.35rem;
        font-size: 0.78rem;
    }

    .toolbar-right .btn,
    .toolbar-right .btn.btn-outline {
        height: 34px;
        min-height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }
    .toolbar-right .api-balance,
    #aitunnelBalance.api-balance {
        height: 34px;
        min-height: 34px;
        line-height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }
}

/* ───────────────────────────────────────────────────────────────────
   TABLET PORTRAIT — переезд элементов в выпадашку аккаунта.

   В книжной ориентации даже компактная лента не помещается в одну строку,
   поэтому баланс и кнопку rBase убираем из тулбара и показываем в меню
   аккаунта (#clubUserMenu, после «Хранилище» — пункты .club-menu-tablet-item).
   Это и разгружает правую зону, и убирает «Приложения» из ленты, давая ей
   шанс уместиться без прокрутки на большинстве iPad (на самых узких — лёгкий
   горизонтальный скролл ленты, см. компактный блок выше).
   ─────────────────────────────────────────────────────────────────── */

/* Пункты меню-переезда по умолчанию скрыты (десктоп/альбом — без дублей) */
.club-menu-tablet-item { display: none; }

/* На ЛЮБОМ touch-устройстве (iPad/планшет) кнопка «Открыть rBase» не нужна:
   rBase — это локальный десктопный сервер на ПК, на планшете его нет.
   Прячем группу «Приложения» и её разделитель в обеих ориентациях. */
@media (pointer: coarse) {
    #appsToolbarGroup { display: none !important; }
    .toolbar-groups > .toolbar-group-sep:last-of-type { display: none !important; }
}

@media (pointer: coarse) and (max-width: 1024px) and (orientation: portrait) {
    /* Показываем перенесённый пункт (баланс) в выпадашке аккаунта */
    .club-menu-tablet-item { display: block; }

    /* Баланс убираем из ленты — он доступен в меню аккаунта */
    #aitunnelBalance { display: none !important; }
}

/* Safe area insets for iPads with rounded corners / home indicator */
@supports (padding: env(safe-area-inset-bottom)) {
    .toolbar {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .canvas-sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .node-input {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
}

/* ==================== ПРОЖЕКТОР — поиск по диалогам (Perplexity style) ====================
   Источник стиля: Docs/PERPLEXITY_STYLE_GUIDE.md и .github/instructions/ui_style.instructions.md
   Все классы заскоуплены префиксом .spotlight-. ТЗ: ТЗ_ПОИСК_ДИАЛОГОВ_2026-06-03.md */
.spotlight-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 100000;
    padding-top: 12vh;
}
.spotlight-overlay.show { display: flex; }

/* «Припаркованное» состояние (после перехода к результату): фон прозрачный и
   пропускает клики на чат позади, а панель уезжает к правому краю и остаётся
   открытой — чтобы можно было перебирать результаты поиска один за другим. */
.spotlight-overlay.docked {
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;            /* клики проходят сквозь фон на чат */
}
.spotlight-overlay.docked .spotlight-modal {
    pointer-events: auto;            /* сама панель остаётся интерактивной */
    position: fixed;
    top: 12vh;
    right: 16px;
    width: 380px;
    max-width: 380px;
    max-height: 76vh;
    margin: 0;
    animation: spotlightDockIn 0.24s ease-out;
}
@keyframes spotlightDockIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* В припаркованном режиме строка поиска — ручка перетаскивания (но не само поле/кнопки) */
.spotlight-overlay.docked .spotlight-search-row { cursor: move; }
.spotlight-overlay.docked .spotlight-input { cursor: text; }

/* Кнопка «свернуть» — показывается только в припаркованном режиме */
.spotlight-min {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: rgba(19, 52, 59, 0.55);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    transition: background 150ms ease, color 150ms ease;
}
.spotlight-min:hover { background: rgba(19, 52, 59, 0.06); color: #20808D; }
.spotlight-overlay.docked .spotlight-min { display: inline-flex; }

/* Ручка ресайза (нижний правый угол) — только в припаркованном и не свёрнутом состоянии */
.spotlight-resize {
    display: none;
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 2;
    background: linear-gradient(135deg,
        transparent 0 48%, rgba(19, 52, 59, 0.28) 48% 58%,
        transparent 58% 70%, rgba(19, 52, 59, 0.28) 70% 80%, transparent 80%);
}
.spotlight-overlay.docked .spotlight-resize { display: block; }
.spotlight-overlay.minimized .spotlight-resize { display: none; }

/* Свёрнуто: панель спрятана, на экране остаётся только карточка */
.spotlight-overlay.minimized .spotlight-modal { display: none; }

/* Свёрнутая карточка прожектора (перетаскиваемая, клик — развернуть) */
.spotlight-card {
    display: none;
    position: fixed;
    z-index: 100001;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 13px;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.12);
    border-radius: 9999px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #13343B;
    font: 500 13px/1 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: grab;
    user-select: none;
    max-width: 320px;
    animation: spotlightCardIn 0.18s ease-out;
}
.spotlight-card.show { display: inline-flex; }
.spotlight-card:active { cursor: grabbing; }
.spotlight-card-icon { color: rgba(19, 52, 59, 0.5); flex: 0 0 auto; }
.spotlight-card-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.spotlight-card-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: rgba(19, 52, 59, 0.5);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background 150ms ease, color 150ms ease;
}
.spotlight-card-close:hover { background: rgba(19, 52, 59, 0.08); color: #20808D; }
@keyframes spotlightCardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Во время перетаскивания/ресайза не даём выделять текст по всей странице */
body.spotlight-dragging,
body.spotlight-dragging * { user-select: none !important; }

.spotlight-modal {
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 92%;
    max-width: 640px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
    animation: spotlightSlideIn 0.18s ease-out;
}
@keyframes spotlightSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.spotlight-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
}
.spotlight-search-icon { color: rgba(19, 52, 59, 0.45); flex: 0 0 auto; }

/* Переключатель области поиска «Везде» / «В этом диалоге» (T1.5) */
.spotlight-scope {
    display: flex;
    gap: 6px;
    padding: 10px 16px 2px;
}
.spotlight-scope-btn {
    border: none;
    background: rgba(19, 52, 59, 0.04);
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    height: 28px;
    padding: 0 14px;
    font: 500 12px/1 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.spotlight-scope-btn:hover         { background: rgba(19, 52, 59, 0.08); color: #20808D; }
.spotlight-scope-btn.active        { background: rgba(31, 184, 205, 0.12); color: #20808D; }
.spotlight-scope-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

/* Переключатель режима «по словам» / «по смыслу» (T3.1) — справа в строке областей */
.spotlight-mode { margin-left: auto; display: flex; gap: 4px; }
.spotlight-mode-btn {
    border: none;
    background: rgba(19, 52, 59, 0.04);
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    height: 28px;
    padding: 0 12px;
    font: 500 12px/1 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.spotlight-mode-btn:hover         { background: rgba(19, 52, 59, 0.08); color: #20808D; }
.spotlight-mode-btn.active        { background: rgba(31, 184, 205, 0.12); color: #20808D; }
.spotlight-mode-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
/* «По смыслу» недоступно без запущенного rBase (T3.1) */
.spotlight-mode-btn.disabled,
.spotlight-mode-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(19, 52, 59, 0.04);
    color: rgba(19, 52, 59, 0.45);
}
.spotlight-mode-btn.disabled:hover,
.spotlight-mode-btn:disabled:hover { background: rgba(19, 52, 59, 0.04); color: rgba(19, 52, 59, 0.45); }

/* В режиме «по смыслу» область/фильтры словесного движка не применяются — гасим их */
.spotlight-modal.semantic-mode .spotlight-scope-btn,
.spotlight-modal.semantic-mode .spotlight-filters { opacity: 0.4; pointer-events: none; }

/* Значок «по смыслу» у семантических результатов (T3.1) */
.spotlight-semantic-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 6px;
    padding: 1px 7px 1px 5px;
    border-radius: 9999px;
    background: rgba(31, 184, 205, 0.12);
    color: #20808D;
    font-weight: 500;
    vertical-align: middle;
}
.spotlight-semantic-badge svg { flex: 0 0 auto; }

/* Фильтры выдачи (T2.1) + чип архива (T2.2) */
.spotlight-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 16px 2px;
}
.spotlight-filter-btn {
    border: 1px solid rgba(19, 52, 59, 0.12);
    background: transparent;
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    height: 26px;
    padding: 0 12px;
    font: 500 12px/1 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.spotlight-filter-btn:hover         { background: rgba(19, 52, 59, 0.06); color: #20808D; }
.spotlight-filter-btn.active        { background: rgba(31, 184, 205, 0.12); color: #20808D; border-color: rgba(31, 184, 205, 0.45); }
.spotlight-filter-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.spotlight-filter-sep {
    width: 1px;
    height: 16px;
    background: rgba(19, 52, 59, 0.14);
    margin: 0 2px;
}

/* Группа «Архив»: индикатор загрузки / пустого результата (T2.2) */
.spotlight-archive-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: rgba(19, 52, 59, 0.50);
    font: 400 13px/1.4 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
}
.spotlight-archive-spinner {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid rgba(31, 184, 205, 0.30);
    border-top-color: #20808D;
    border-radius: 50%;
    animation: spotlightArchiveSpin 0.7s linear infinite;
}
@keyframes spotlightArchiveSpin { to { transform: rotate(360deg); } }

.spotlight-input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font: 400 16px/1.4 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
}
.spotlight-input::placeholder { color: rgba(19, 52, 59, 0.45); }

.spotlight-close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: rgba(19, 52, 59, 0.55);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.spotlight-close:hover  { background: rgba(19, 52, 59, 0.06); color: #20808D; }
.spotlight-close:active { transform: scale(0.96); }
.spotlight-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

.spotlight-results {
    overflow-y: auto;
    padding: 8px;
}
.spotlight-results::-webkit-scrollbar { width: 8px; height: 8px; }
.spotlight-results::-webkit-scrollbar-track { background: transparent; }
.spotlight-results::-webkit-scrollbar-thumb { background: rgba(19, 52, 59, 0.18); border-radius: 4px; }
.spotlight-results::-webkit-scrollbar-thumb:hover { background: rgba(19, 52, 59, 0.30); }

.spotlight-hint,
.spotlight-empty {
    padding: 24px 16px;
    text-align: center;
    color: rgba(19, 52, 59, 0.45);
    font: 400 14px/1.5 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
}

.spotlight-group { margin-bottom: 6px; }
.spotlight-group-title {
    padding: 8px 12px 4px;
    font: 500 11px/1.4 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(19, 52, 59, 0.45);
}

.spotlight-result {
    padding: 8px 12px;
    margin: 2px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.spotlight-result:hover  { background: rgba(19, 52, 59, 0.05); }
.spotlight-result.active  { background: rgba(31, 184, 205, 0.10); }
.spotlight-result.active .spotlight-result-snippet { color: #20808D; }

/* Подсветка совпадений в сниппете (T1.3) — аналог .search-highlight из поиска по файлу */
.spotlight-hl {
    background: rgba(31, 184, 205, 0.22);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

/* Точечная подсветка найденной ФРАЗЫ в сообщении после перехода из прожектора
   (только сам фрагмент, не весь блок; держится ~4с, затем плавно гаснет) */
.spotlight-phrase-hl {
    background: rgba(255, 209, 0, 0.55);
    box-shadow: 0 0 0 2px rgba(255, 209, 0, 0.55);
    border-radius: 3px;
    transition: background 0.45s ease, box-shadow 0.45s ease;
}
.spotlight-phrase-hl-fade {
    background: transparent;
    box-shadow: 0 0 0 2px rgba(255, 209, 0, 0);
}

/* Кратковременная подсветка карточки заметки после перехода из прожектора */
.note-item.note-flash { animation: spotlightNoteFlash 1.6s ease; }
@keyframes spotlightNoteFlash {
    0%   { box-shadow: 0 0 0 0 rgba(31, 184, 205, 0); }
    25%  { box-shadow: 0 0 0 3px rgba(31, 184, 205, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(31, 184, 205, 0); }
}

.spotlight-result-snippet {
    font: 400 14px/1.45 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.spotlight-result-path {
    margin-top: 3px;
    font: 400 12px/1.4 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    color: rgba(19, 52, 59, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Недавние запросы (T3.2) */
.spotlight-history-item { display: flex; align-items: center; gap: 8px; }
.spotlight-history-icon { color: rgba(19, 52, 59, 0.40); flex: 0 0 auto; }
.spotlight-history-text {
    font: 400 14px/1.45 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Тёмная тема */


/* ── Модель на компьютере человека (ТЗ «Модели на компьютере», T5.4) ── */
.message-model-info .message-local-badge {
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(93, 184, 122, 0.14);
    color: #3f8d59;
    font-size: 0.72rem;
    white-space: nowrap;
}
/* Кнопка ряда ответа: место и вид — как у соседней «правка текста». */
.ask-cloud-btn {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    color: #8a8f98;
}
.message-content:hover .ask-cloud-btn,
.message:hover .ask-cloud-btn { opacity: 0.7; }
.ask-cloud-btn:hover { opacity: 1; color: #20B8CD; }
/* Без координат абсолютные кнопки садятся в одну точку и накладываются друг на друга
   (приёмка 22.09, Этап 3 шаг 7). Ставим их в ряд слева от «Копировать». */
.ask-cloud-btn { bottom: 6px; right: 36px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ask-cloud-btn.ask-cloud-2 { right: 64px; }

/* Видимая кнопка облака под ответом модели на компьютере, когда текст ответа на неё ссылается
   (приёмка 22.09, шаг 7: иконку без подписи, видную лишь при наведении, человек не нашёл). */
.local-cloud-cta { margin-top: 8px; }
.local-cloud-cta-btn {
    background: #fff;
    border: 1px solid #20B8CD;
    border-radius: 6px;
    color: #13808f;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    padding: 5px 12px;
    transition: background 0.15s ease;
}
.local-cloud-cta-btn:hover { background: #e8f8fa; }

/* ═══ Действия под ответом — один блок, один вид, одна реакция (приёмка 22.09, Этап 3 шаг 8) ═══
   Раньше «в заметки» стояла в потоке слева, «копировать» была пилюлей с рамкой, а облако и лупа —
   абсолютом без координат. Теперь все они в общем ряду справа внизу и стилизованы одинаково. */
.msg-actions {
    /* Своей строкой под сообщением, а не поверх него: абсолютный ряд наезжал на строку
       «использована: …» (приёмка 22.09, Этап 3 шаг 8). Место под ряд держится всегда,
       поэтому при наведении ничего не прыгает. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: 26px;
    margin-top: 4px;
    padding-right: 2px;
    overflow: visible;
    /* Скрываем видимостью, а не прозрачностью: прозрачность наследовала и подсказка —
       текст сквозил (приёмка 22.09, Этап 3 шаг 9). */
    visibility: hidden;
    z-index: 60;
}
.message:hover .msg-actions { visibility: visible; }

.msg-actions .copy-btn,
.msg-actions .add-note-btn,
.msg-actions .text-edit-btn,
.msg-actions .ask-cloud-btn {
    /* Обнуляем смещения прежней раскладки (bottom: 6px, right: 36/64/92px): при относительном
       положении они СДВИГАЛИ иконки вверх и влево — ряд вставал лесенкой (приёмка 22.09, шаг 9). */
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    line-height: 1;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: #9aa1ab;
    cursor: pointer;
    opacity: 1;
    transform: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.msg-actions .copy-btn:hover,
.msg-actions .add-note-btn:hover,
.msg-actions .text-edit-btn:hover,
.msg-actions .ask-cloud-btn:hover {
    color: #20B8CD;
    background: rgba(32, 184, 205, 0.10);
    transform: none;
}
.msg-actions .copy-btn svg,
.msg-actions .add-note-btn svg,
.msg-actions .text-edit-btn svg,
.msg-actions .ask-cloud-btn svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    display: block;
    transform: none;
}
.msg-actions .copy-btn.copied { color: #2f855a; background: rgba(72, 187, 120, 0.12); }
.msg-actions .copy-btn.error { color: #c53030; background: rgba(239, 68, 68, 0.12); }

/* Своя мягкая подсказка: системная — чёрная с белым текстом, чужая этому приложению */
/* Подсказки кнопок рисует единая карточка страницы (.app-tip, script.js): своя ::after у ряда
   не могла выйти за пределы сообщения и обрезалась краем (приёмка 23.09). */

/* Прозрачность старой раскладки наследовала подсказка: у облака и лупы карточка выходила светлее
   остальных трёх (приёмка 23.09, Этап 3). В общем ряду прозрачности нет ни у одной кнопки. */
.msg-actions .ask-cloud-btn,
.msg-actions .ask-cloud-btn:hover,
.message-content:hover .msg-actions .ask-cloud-btn,
.message:hover .msg-actions .ask-cloud-btn {
    opacity: 1;
}

/* Идёт проверка ответа по источникам: блок пульсирует и мигает точкой — неподвижную строку
   человек не замечает (приёмка 23.09, Этап 3). */
.local-verify-checking {
    border-left-color: #20B8CD !important;
    border-radius: 0 7px 7px 0;
    animation: lv-pulse 1.6s ease-in-out infinite;
}
@keyframes lv-pulse {
    0%, 100% { background: rgba(32, 184, 205, 0.05); }
    50%      { background: rgba(32, 184, 205, 0.18); }
}
.lv-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #20B8CD;
    vertical-align: middle;
    animation: lv-dot 1s ease-in-out infinite;
}
@keyframes lv-dot {
    0%, 100% { transform: scale(0.65); opacity: 0.45; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* ═══ Единая подсказка страницы (приёмка 23.09) ═══
   Одна карточка на всё приложение вместо системной чёрной: тёмное стекло, мягкая тень,
   скругление 7px. Положение считает script.js — карточка не выходит за края окна. */
.app-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    max-width: 300px;
    padding: 7px 10px;
    background: rgba(12, 15, 20, 0.97);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    color: #f3f6f9;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: left;
    white-space: normal;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}
.app-tip.is-on {
    opacity: 1;
    transform: none;
}

/* ==================== «ЧТО ВИДИТ МОДЕЛЬ» ====================
   Окно по щелчку на шкалу заполнения (.token-counter). Разметку и
   раскладку блоков по группам делает openContextInspector в script.js. */

.ctx-insp-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(2px);
}

.ctx-insp-modal {
    display: flex;
    flex-direction: column;
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    color: #1e293b;
    font-size: 13px;
}

.ctx-insp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #eef2f6;
}

.ctx-insp-title {
    font-size: 16px;
    font-weight: 600;
}

.ctx-insp-sub {
    margin-top: 2px;
    color: #64748b;
}

.ctx-insp-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
}

.ctx-insp-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.ctx-insp-summary {
    padding: 12px 18px;
    border-bottom: 1px solid #eef2f6;
    background: #f8fafc;
}

.ctx-insp-fill span {
    color: #64748b;
}

.ctx-insp-bar {
    display: flex;
    gap: 2px;
    height: 10px;
    margin: 8px 0 6px;
    border-radius: 3px;
    overflow: hidden;
    background: #e2e8f0;
}

.ctx-insp-seg {
    flex-basis: 0;
    min-width: 3px;
}

.ctx-insp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: #475569;
    font-size: 12px;
}

.ctx-insp-legend-item i,
.ctx-insp-group-head i {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 2px;
    vertical-align: -1px;
}

.ctx-insp-note {
    margin-top: 6px;
    color: #475569;
    font-size: 12px;
}

.ctx-insp-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 18px 14px;
}

.ctx-insp-empty {
    padding: 24px 0;
    color: #64748b;
    text-align: center;
}

.ctx-insp-group {
    margin-top: 10px;
}

.ctx-insp-group-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0 6px;
    border-bottom: 1px solid #eef2f6;
}

.ctx-insp-group-title {
    font-weight: 600;
}

.ctx-insp-group-hint {
    flex: 1;
    color: #94a3b8;
    font-size: 12px;
}

.ctx-insp-group-size {
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
}

.ctx-insp-item {
    margin-top: 4px;
    border: none;
    border-left: 3px solid #cbd5e1;
    border-radius: 5px;
    background: rgba(19, 52, 59, 0.025);
}

.ctx-insp-role-user { border-left-color: #3b82f6; }
.ctx-insp-role-assistant { border-left-color: #16a34a; }
.ctx-insp-role-system { border-left-color: #94a3b8; }

.ctx-insp-item > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 6px 10px;
    cursor: pointer;
    list-style: none;
}

.ctx-insp-item > summary::-webkit-details-marker {
    display: none;
}

.ctx-insp-item > summary:hover {
    background: #f8fafc;
}

.ctx-insp-item-label {
    font-weight: 500;
}

.ctx-insp-item-label::before {
    content: '▸';
    display: inline-block;
    width: 12px;
    color: #94a3b8;
}

.ctx-insp-item[open] .ctx-insp-item-label::before {
    content: '▾';
}

.ctx-insp-item-size {
    margin-left: auto;
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
}

.ctx-insp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    padding-left: 12px;
}

.ctx-insp-chip {
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
}

.ctx-insp-preview {
    width: 100%;
    padding-left: 12px;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ctx-insp-item[open] .ctx-insp-preview {
    display: none;
}

.ctx-insp-text {
    max-height: 420px;
    margin: 0;
    padding: 8px 10px 10px 22px;
    overflow: auto;
    border-top: 1px solid #eef2f6;
    color: #334155;
    font: 12px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.ctx-insp-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid #eef2f6;
}

.ctx-insp-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: rgba(19, 52, 59, 0.06);
    color: #1e293b;
    font-size: 13px;
    cursor: pointer;
}

.ctx-insp-btn:hover {
    background: rgba(19, 52, 59, 0.1);
}

.ctx-insp-btn-primary {
    background: #20808D;
    color: #fff;
}

.ctx-insp-btn-primary:hover {
    background: #1a6d78;
}

/* ==================== ЧИСТЫЙ ЧАТ (body.chat-clean) ====================
   Ответ — просто текст на странице, без плашки; вопрос — компактный пузырь
   по ширине текста, прижатый вправо. Класс ставится в app.html на <body>:
   сняли класс — вернулся прежний вид с плашками. */

body.chat-clean .message.user .message-content {
    flex: 0 1 auto;
    max-width: 80%;
    padding: 0.6rem 1rem;
    background: #eef3f3;
}

body.chat-clean .message.user .message-content:hover {
    background: #e4eeef;
}

body.chat-clean .message.assistant .message-content,
body.chat-clean .message.assistant .message-content:hover {
    background: transparent;
    padding-left: 0.25rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* В полноэкранном режиме свои отступы стоят с !important — перебиваем так же. */
body.chat-clean .node-fullscreen .message.assistant .message-content {
    padding-left: 0.25rem !important;
}

/* Ответ отделяется от следующего вопроса воздухом, а не рамкой. */
body.chat-clean .message.assistant {
    margin-bottom: 1.75rem;
}


/* ── ТЗ «Бюджет контекста» (27.09.2026) ────────────────────────────────────
   Поле дистиллята в окнах настроек проекта и диалога; служебное предупреждение
   о бюджете окна над перепиской узла. Кнопки — радиус ≤ 7px, без заливки в заливке. */
.settings-digest { margin-top: 10px; border-top: 1px dashed #e2e8f0; padding-top: 10px; }
.settings-digest .sd-status { font-size: 12.5px; color: #475569; margin-bottom: 6px; }
.settings-digest .sd-status.sd-failed { color: #b91c1c; }
.settings-digest .sd-status.sd-big,
.settings-digest .sd-size.sd-big { color: #dc2626; }
.settings-digest .sd-text {
    width: 100%; box-sizing: border-box; min-height: 180px; padding: 8px 10px;
    border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; line-height: 1.45;
    font-family: inherit; resize: vertical; background: #ffffff; color: #1e293b;
}
.settings-digest .sd-text[readonly] { background: #f8fafc; color: #64748b; }
.settings-digest .sd-size { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.settings-digest .sd-missing { font-size: 12px; color: #b45309; margin-top: 6px; }
.settings-digest .sd-hint { font-size: 12px; color: #64748b; margin-top: 6px; }

.rag-memory-notification.ctx-budget-notice {
    background: #ffffff; color: #334155; box-shadow: none;
    border: 1px solid #cbd5e1; border-left: 3px solid #20808D; border-radius: 6px;
    padding: 8px 12px;
}
.rag-memory-notification.ctx-budget-notice::before { display: none; }
.rag-memory-notification.ctx-budget-notice.ctx-budget-warning { border-left-color: #e0a94a; }
.ctx-budget-notice .rag-memory-notification-content { display: flex; align-items: center; gap: 10px; }
.ctx-budget-notice .rag-memory-message { flex: 1 1 auto; }
.ctx-budget-notice .ctx-budget-inspect {
    flex: 0 0 auto; background: none; border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 3px 8px; font-size: 12px; color: #20808D; cursor: pointer;
}
.ctx-budget-notice .ctx-budget-inspect:hover { border-color: #20808D; }
.ctx-budget-notice .rag-memory-close { color: #64748b; }
/* ТЗ «Бюджет контекста» T4.1: блок больше четверти окна модели — красным. */
.ctx-insp-item.ctx-insp-big > summary .ctx-insp-item-label,
.ctx-insp-item.ctx-insp-big > summary .ctx-insp-item-size { color: #dc2626; }
.ctx-insp-item.ctx-insp-big { border-left: 3px solid #dc2626; }
/* Окно просмотра источника из базы (T5.3, ТЗ «Доработки по сверке сайта»): тот же вид, что «Что видит
   модель»; фрагмент, на который сослался ответ, — акцентной полосой слева. */
.ctx-insp-item.src-view-hit { border-left: 3px solid #20808D; background: rgba(32, 128, 141, 0.06); }
/* ═══ Свёртка длинных таблиц в диалоге ═══════════════════════════════════
   Таблица на полсотни строк занимала экран целиком, и переписка вокруг неё
   терялась. Читаются первые 10 строк, следующие две уходят в расфокус —
   низ растворяется, видно, что продолжение есть, а читать его не тянет.
   Строки именно ПРЯЧУТСЯ стилями, а не выбрасываются из разметки: таблицу
   читают редактор, Гант и разбор действий — они работают с DOM. */

.table-wrapper-with-btn.table-collapsible.is-collapsed table tbody tr:nth-child(n+13) {
    display: none;
}

/* Одиннадцатая и двенадцатая — хвост в расфокусе. Размытие и прозрачность
   идут на ячейки, а не на tr: filter у строки таблицы браузеры трактуют
   по-разному, у ячейки — одинаково. */
.table-wrapper-with-btn.table-collapsible table tbody tr:nth-child(11) > td,
.table-wrapper-with-btn.table-collapsible table tbody tr:nth-child(11) > th,
.table-wrapper-with-btn.table-collapsible table tbody tr:nth-child(12) > td,
.table-wrapper-with-btn.table-collapsible table tbody tr:nth-child(12) > th {
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.table-wrapper-with-btn.table-collapsible.is-collapsed table tbody tr:nth-child(11) > td,
.table-wrapper-with-btn.table-collapsible.is-collapsed table tbody tr:nth-child(11) > th {
    opacity: 0.42;
    filter: blur(1.3px);
    pointer-events: none;
    user-select: none;
}

.table-wrapper-with-btn.table-collapsible.is-collapsed table tbody tr:nth-child(12) > td,
.table-wrapper-with-btn.table-collapsible.is-collapsed table tbody tr:nth-child(12) > th {
    opacity: 0.16;
    filter: blur(2.6px);
    pointer-events: none;
    user-select: none;
}

/* Кнопка на всю ширину — мишень заметная, но негромкая */
.table-collapse-btn {
    display: block;
    width: 100%;
    margin: 4px 0 10px;
    padding: 6px 10px;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 5px;
    background: rgba(102, 126, 234, 0.05);
    color: #5566cc;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.table-collapse-btn:hover {
    background: rgba(102, 126, 234, 0.13);
    border-color: rgba(102, 126, 234, 0.45);
    color: #4453b8;
}

/* В свёрнутом виде кнопка подступает к растворённому хвосту вплотную */
.table-wrapper-with-btn.table-collapsible.is-collapsed > .table-collapse-btn {
    margin-top: -2px;
}

/* Поле, где формула не посчиталась: введённое не стираем — его правят */
.gantt-effort-input.gantt-field-bad,
.gantt-rate-card input.gantt-rate-value.gantt-field-bad {
    border-color: #b42318;
    background: rgba(180, 35, 24, 0.05);
}

.gantt-effort-input.gantt-field-bad:focus,
.gantt-rate-card input.gantt-rate-value.gantt-field-bad:focus {
    border-color: #b42318;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

/* Кнопка режима строки трудозатрат: «ч» или «%». Стоит сразу за именем и
   показывает, в чём считают ЭТУ строку — что видно, то и введено в полях. */
.gantt-effort-unit {
    flex: 0 0 auto;
    margin-left: 6px;
    padding: 0 5px;
    height: 17px;
    min-width: 19px;
    border: 1px solid #d6d6d4;
    border-radius: 5px;
    background: #f6f6f5;
    color: #6f6f6f;
    font-family: inherit;
    font-size: 11px;
    line-height: 15px;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
    vertical-align: middle;
}

.gantt-effort-row:hover .gantt-effort-unit,
.gantt-effort-unit:hover {
    opacity: 1;
}

.gantt-effort-unit:hover {
    border-color: #1f1f1f;
    color: #1f1f1f;
}

/* На проценте кнопка заметнее: режим необычный, и его видно сразу */
.gantt-effort-unit.gantt-effort-unit-pct {
    border-color: rgba(31, 31, 31, 0.27);
    background: rgba(31, 31, 31, 0.06);
    color: #1f1f1f;
    opacity: 1;
}

/* Имя с кнопкой в одной клетке: обрезаем имя, кнопку не даём сжать */
.gantt-effort-row-pct .gantt-effort-name {
    color: #1f1f1f;
}

/* Переход по задачам в подвале окна: «‹ 3 из 49 ›».
   Стоит слева от «Сохранить», в один ряд с ним — это навигация, а не действие
   над задачей, поэтому к левым кнопкам (удалить, клонировать) не примыкает. */
.gantt-task-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
}

.gantt-task-nav-btn {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 1;
    color: #6f6f6f;
}

.gantt-task-nav-btn:hover:not(:disabled) {
    background: rgba(31, 31, 31, 0.06);
    color: #1f1f1f;
}

.gantt-task-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.gantt-task-nav-count {
    min-width: 62px;
    padding: 0 2px;
    text-align: center;
    font-size: 12px;
    color: #9b9b9b;
    user-select: none;
}

/* ============================================================================
   КАРКАС ПРИЛОЖЕНИЯ — МИНИМАЛИСТИЧНЫЙ КАНВАС (Этап 1: T1.1 / T1.2 / T1.3)
   ТЗ:     Docs/ТЗ в работе/ТЗ_ЧАТ_МИНИМАЛИСТИЧНЫЙ_КАНВАС_2026-09-29.md
   Эталон: Docs/Concepts/desktop_minimal_canvas_2026-09-29.html
   ---------------------------------------------------------------------------
   Скоуп-секция: все правила ограничены #rail / #drawer / #crumbs и их
   потомками. Существующие классы (.toolbar, .canvas-sidebar, .canvas-item)
   НЕ переопределяются — старый тулбар и новый каркас сосуществуют до T1.6.

   Палитра (T6.1, решение владельца В1 от 29.09.2026): монохром концепта —
   текст и акцент #1f1f1f, приглушённый #6f6f6f, бледный #9b9b9b, линии
   #e6e6e6, мягкий фон #f3f3f3 / #e9e9e9, холст #f6f6f5. Бирюза приложения
   в секциях чата не используется. Теней на рельсе / ящике / строке пути
   НЕТ — тени допустимы только на popup и модалках (приёмка shadows=0).
   Шрифт (В2) — системный стек концепта, FK Grotesk Neue не подключается.
   Тёмная тема НЕ добавляется (В3: старая удаляется в T6.2).

   Переменные названы --mc-* намеренно: в файле уже есть употребления
   var(--text, …) и var(--text-dim, …) с собственными дефолтами — глобальный
   --text перекрасил бы чужой UI.
   ========================================================================== */

:root {
    --rail: 56px;
    --mc-drawer-w: 280px;
    /* Временная совместимость T1.1–T1.3 со старой панелью. Убирается вместе
       с .toolbar в T1.6: новый каркас не должен перекрывать живые элементы. */
    --mc-legacy-toolbar-h: 97px;
    --mc-surface: #ffffff;
    --mc-text: #1f1f1f;
    /* Акцента-цвета в концепте нет: «акцент» — тот же тёмный текст, а
       наведение передаёт мягкий фон, не смена оттенка. */
    --mc-accent: #1f1f1f;
    --mc-accent-hover: #1f1f1f;
    --mc-muted: #6f6f6f;
    --mc-faint: #9b9b9b;
    --mc-line: #e6e6e6;
    --mc-soft: #f3f3f3;
    --mc-soft2: #e9e9e9;
    --mc-canvas: #f6f6f5;
    --mc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Значки из словаря IC концепта: stroke 1.6, round, без заливки, currentColor */
#rail .ic,
#drawer .ic,
#crumbs .ic {
    display: block;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------- T1.1  Левый рельс 56px ---------------- */

#rail {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--rail);
    z-index: 100;
    background: var(--mc-surface);
    border-right: 1px solid var(--mc-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    font-family: inherit;
    color: var(--mc-text);
}

/* Н1/T1.6: рабочая область всегда начинается правее fixed-рельса. Пока жила
   старая toolbar, тот же сдвиг применялся временно; после её удаления он стал
   базовой геометрией и больше не зависит от legacy-класса. */
.main-content {
    width: calc(100% - var(--rail));
    margin-left: var(--rail);
}

/* Окно-контейнер (tabindex=-1: фокус ставит скрипт, чтобы работали клавиши окна — задачник, почта, «Клиенты», бриф…)
   без рамки фокуса браузера: у развёрнутого окна она видна только слева — тёмная полоса у рельса (владелец 25.10).
   Одно правило на всё приложение — новое окно его наследует; свои рамки фокуса кнопок и полей точнее и остаются. */
[tabindex="-1"]:focus {
    outline: none;
}

body.mc-frame-legacy #rail {
    top: var(--mc-legacy-toolbar-h);
}

#rail .rail-logo {
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Вид покоя наследован от иконочных кнопок .toolbar-right .btn (регламент §4):
   кнопка «вполсилы» — muted-цвет, прозрачный фон, без бордера; разгорается под
   курсором; hover-фон вместо контура; приглушение при недоступности.
   Теней нет ни в одном состоянии — приёмка стенда shadows=0. */
#rail .rail-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: transparent;
    /* 7px — решение заказчика, сильнее pill-правила ui_style,
       см. ТЗ_ЧАТ_МИНИМАЛИСТИЧНЫЙ_КАНВАС_2026-09-29 */
    border-radius: 7px;
    color: var(--mc-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

#rail .rail-btn:hover {
    background: var(--mc-soft);
    color: var(--mc-accent);
}

/* Active-эффект — лёгкое сжатие, а не сдвиг вверх (по ui_style) */
#rail .rail-btn:active {
    background: var(--mc-soft2);
    color: var(--mc-accent-hover);
    transform: scale(0.96);
}

#rail .rail-btn.on {
    background: var(--mc-soft2);
    color: var(--mc-accent);
}

/* Фокус-кольцо через outline: контур при наведении/нажатии запрещён,
   а тень на рельсе недопустима (shadows=0). */
#rail .rail-btn:focus-visible {
    outline: 2px solid var(--mc-accent);
    outline-offset: 2px;
}

#rail .rail-btn:disabled {
    background: transparent;
    color: #c4c4c2;
    cursor: not-allowed;
}

/* Число непрочитанных на кнопке «Почта» — как счётчик задачника (.ptk-rail-cnt) */
#rail .rail-btn[data-rail="mail"] { position: relative; }
#rail .rail-mail-cnt {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    background: var(--mc-ink, #1f1f1f);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
#rail .rail-mail-cnt[hidden] { display: none; }

#rail .rail-sp {
    flex: 1 1 auto;
    min-height: 8px;
}

/* ---------------- T1.2  Выдвижной ящик 280px ---------------- */

#drawer {
    position: fixed;
    left: var(--rail);
    top: 0;
    bottom: 0;
    width: var(--mc-drawer-w);
    z-index: 99;
    background: var(--mc-surface);
    border-right: 1px solid var(--mc-line);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: inherit;
    color: var(--mc-text);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
}

#drawer.open {
    transform: none;
    visibility: visible;
}

body.mc-frame-legacy #drawer {
    top: var(--mc-legacy-toolbar-h);
}

/* Шапка ящика — по образцу .sidebar-header из .canvas-sidebar:
   порядок «заголовок → поиск → список». */
#drawer .dr-proj {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--mc-text);
    flex-shrink: 0;
}

#drawer .dr-proj-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

#drawer .dr-proj small {
    color: var(--mc-faint);
    font-weight: 400;
    font-size: 12px;
    flex-shrink: 0;
}

#drawer .dr-search {
    margin: 0 2px 8px;
    flex-shrink: 0;
}

#drawer .dr-search input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--mc-line);
    /* 7px — решение заказчика, см. ТЗ_ЧАТ_МИНИМАЛИСТИЧНЫЙ_КАНВАС_2026-09-29 */
    border-radius: 7px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--mc-text);
    background: var(--mc-surface);
    outline: none;
    transition: border-color 150ms ease;
}

#drawer .dr-search input::placeholder {
    color: var(--mc-faint);
}

#drawer .dr-search input:focus {
    border-color: var(--mc-accent);
}

#drawer .dr-new {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin: 0 0 2px;
    border: none;
    background: transparent;
    /* 7px — решение заказчика, см. ТЗ_ЧАТ_МИНИМАЛИСТИЧНЫЙ_КАНВАС_2026-09-29 */
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--mc-accent);
    text-align: left;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

#drawer .dr-new:hover {
    background: var(--mc-soft);
    color: var(--mc-accent-hover);
}

#drawer .dr-new:active {
    background: var(--mc-soft2);
    transform: scale(0.98);
}

#drawer .dr-new:focus-visible {
    outline: 2px solid var(--mc-accent);
    outline-offset: 2px;
}

#drawer .dr-sec {
    font-size: 12px;
    color: var(--mc-faint);
    padding: 14px 10px 4px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

#drawer .dr-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 6px;
}

#drawer .dr-list::-webkit-scrollbar {
    width: 6px;
}

#drawer .dr-list::-webkit-scrollbar-track {
    background: transparent;
}

#drawer .dr-list::-webkit-scrollbar-thumb {
    background: var(--mc-line);
    border-radius: 3px;
}

/* Строка диалога в ящике — ТОТ ЖЕ класс .canvas-item, что и в .canvas-sidebar
   (регламент §4: третьего варианта строки списка не заводим). Здесь только
   добивка ширины и доступности, вид строки целиком берётся из глобальных
   правил .canvas-item / .canvas-item-icon / .canvas-item-content / -title / -meta. */
#drawer .dr-list .canvas-item {
    width: 100%;
    box-sizing: border-box;
}

#drawer .dr-list .canvas-item:focus-visible {
    outline: 2px solid var(--mc-accent);
    outline-offset: -2px;
}

#drawer .dr-empty {
    padding: 14px 10px;
    font-size: 12px;
    color: var(--mc-faint);
    line-height: 1.5;
}

#drawer .dr-foot {
    margin-top: auto;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--mc-faint);
    padding: 8px 10px 2px;
    border-top: 1px solid var(--mc-line);
    line-height: 1.45;
}

/* ---------------- T1.3  Строка пути ---------------- */

/* Мета-элемент по образцу .c-meta концепта (шрифт / цвет / ellipsis)
   плюс кликабельность как у .canvas-item. */
#crumbs {
    position: fixed;
    top: 12px;
    /* leftEdge() из концепта, состояние «ящик закрыт»: рельс 56px + 18px */
    left: calc(var(--rail) + 18px);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: inherit;
    font-size: 14px;
    color: var(--mc-muted);
    max-width: calc(100vw - 520px);
    overflow: hidden;
    white-space: nowrap;
}

body.mc-frame-legacy #crumbs {
    top: calc(var(--mc-legacy-toolbar-h) + 12px);
}

/* Ящик открыт: строка пути отъезжает от его правого края на 12px и ужимается,
   чтобы не залезть под правый верх (приёмка underPanel).
   794 = 348 слева (56 + 280 + 12) + 446 справа — тот же правый резерв,
   что и в закрытом состоянии (520 - 74). */
body.drawer-open #crumbs {
    left: calc(var(--rail) + var(--mc-drawer-w) + 12px);
    max-width: calc(100vw - 794px);
}

@media (max-width: 820px) {
    /* На узком окне calc(100vw - 794px) уходит в минус — прячем строку пути,
       иначе она вылезет под панели. */
    body.drawer-open #crumbs {
        display: none;
    }
}

#crumbs .crumb-proj {
    padding: 0 6px 0 2px;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

#crumbs button {
    padding: 5px 7px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    transition: background 150ms ease, color 150ms ease;
}

#crumbs button:hover {
    background: var(--mc-soft2);
    color: var(--mc-text);
}

#crumbs button:focus-visible {
    outline: 2px solid var(--mc-accent);
    outline-offset: 1px;
}

#crumbs .cur {
    color: var(--mc-text);
    font-weight: 500;
}

#crumbs .sep {
    color: #c4c4c2;
    padding: 0 1px;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    #drawer {
        transition: none;
    }

    #rail .rail-btn,
    #drawer .dr-new,
    #crumbs button {
        transition: none;
    }
}

/* ---------------- T1.4  Компактный правый верх ----------------
   Элементы сюда не копируются: initCanvasFrame переносит существующие узлы
   с их ID, обработчиками, бейджами и состоянием rBase. Поэтому один источник
   баланса/уведомлений/доступности остаётся и во временном старом toolbar. */
#top {
    position: fixed;
    top: 8px;
    right: 12px;
    /* Меню приложений раскрывается поверх карточек диалогов, а не оказывается
       полупрозрачным под активным узлом с собственным z-index. */
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 3px;
    max-width: calc(100vw - 520px);
    min-width: 0;
    color: var(--mc-text);
    font-family: inherit;
}

/* Н1 действует и на правый верх: до T1.6 старый toolbar всё ещё занимает
   первые 97px страницы. */
body.mc-frame-legacy #top {
    top: calc(var(--mc-legacy-toolbar-h) + 8px);
}

#top .ic {
    display: block;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#top .top-icon-btn,
#top > #topActions > .btn,
#top > #topActions > #modelHealthBtn {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--mc-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

#top .top-icon-btn:hover,
#top > #topActions > .btn:hover,
#top > #topActions > #modelHealthBtn:hover {
    background: var(--mc-soft);
    color: var(--mc-accent);
}

#top .top-icon-btn:active,
#top > #topActions > .btn:active,
#top > #topActions > #modelHealthBtn:active {
    background: var(--mc-soft2);
    color: var(--mc-accent-hover);
    transform: scale(.96);
}

#top .top-icon-btn:focus-visible,
#top > #topActions > .btn:focus-visible,
#top > #topActions > #modelHealthBtn:focus-visible,
#top .top-app-item:focus-visible {
    outline: 2px solid var(--mc-accent);
    outline-offset: 2px;
}

#topActions {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

#top .top-apps-wrap {
    position: relative;
    flex: 0 0 auto;
}

#top .top-apps-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    padding: 1px 4px;
    border-radius: 9px;
    /* Бейдж концепта — тёмный, не тревожно-красный: число писем, не ошибка. */
    background: var(--mc-ink, #1f1f1f);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
}

#topAppsMenu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 1002;
    width: 330px;
    max-height: min(560px, calc(100vh - 132px));
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--mc-line);
    border-radius: 9px;
    background: var(--mc-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .04); /* popup: тень концепта */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

#topAppsMenu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

#topAppsMenu .top-apps-title {
    padding: 7px 9px 5px;
    color: var(--mc-faint);
    font-size: 12px;
    letter-spacing: .02em;
}

#topAppsList {
    display: grid;
    gap: 2px;
}

/* Пункт меню наследует семантику .menu-action из ui_style: значок, название,
   короткое пояснение. У кнопок нет теней; офлайн именно приглушает, не прячет. */
#topAppsMenu .top-app-item {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 7px 9px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--mc-text);
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

#topAppsMenu .top-app-item:hover {
    background: var(--mc-soft);
    color: var(--mc-accent);
}

#topAppsMenu .top-app-item:active {
    background: var(--mc-soft2);
}

#topAppsMenu .top-app-media {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-muted);
}

#topAppsMenu .top-app-media svg,
#topAppsMenu .top-app-media svg-icon,
#topAppsMenu .top-app-media img {
    display: block;
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
}

#topAppsMenu .top-rbase-mark {
    color: #00385D;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

#topAppsMenu .top-app-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

#topAppsMenu .top-app-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

#topAppsMenu .top-app-description {
    overflow: hidden;
    color: var(--mc-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#topAppsMenu .top-app-item.rbase-btn.rbase-offline {
    opacity: .55;
}

#topAppsMenu .top-app-item.rbase-btn.rbase-offline .rbase-offline-badge {
    display: block;
}

#topAppsMenu #rbaseOpenToolbarBtn.rbase-offline {
    animation: none;
}

/* Живые индикаторы перенесены сюда с toolbar и сохраняют свои ID. */
#top #ragServerStatus,
#top .status-online,
#top .status-offline {
    min-width: 32px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 8px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--mc-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

#top #ragServerStatus:hover,
#top .status-online:hover,
#top .status-offline:hover {
    background: var(--mc-soft);
}

#top #ragServerStatus .status-dot,
#top .status-online .status-dot,
#top .status-offline .status-dot {
    width: 8px;
    height: 8px;
}

/* 11.10.2026: точка — только состояние 1Base: серая, пока нет ответа, зелёная — на связи.
   Тревога моделей — на лампочке #modelHealthBtn, сюда не подмешивается. */
#top #ragServerStatus .status-dot {
    border-radius: 50%;
    background: #b5b5b5;
}

#top #ragServerStatus.status-online .status-dot {
    background: #3f9f5f;
}

/* 12.10.2026: 1Base не отвечает — тревога: красная мигающая точка с расходящимся кольцом и
   красная подпись. Только после проверки (status-offline); до первого ответа — серая, без мигания,
   чтобы не дёргать на каждой загрузке. Без 1Base веб-поиск идёт облегчённым пакетом хостинга. */
#top #ragServerStatus.status-offline {
    color: #d93025;
}

#top #ragServerStatus.status-offline .top-rbase-label {
    font-weight: 600;
}

#top #ragServerStatus.status-offline .status-dot {
    width: 9px;
    height: 9px;
    background: #e53935;
    animation: rbaseOfflineAlarm 1.1s ease-in-out infinite;
}

@keyframes rbaseOfflineAlarm {
    0%   { opacity: 1;    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.65); }
    50%  { opacity: 0.25; box-shadow: 0 0 0 6px rgba(229, 57, 53, 0); }
    100% { opacity: 1;    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}

@media (prefers-reduced-motion: reduce) {
    #top #ragServerStatus.status-offline .status-dot {
        animation: none;
        box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.25);
    }
}

#top .top-rbase-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

#top #aitunnelBalance {
    height: 32px;
    box-sizing: border-box;
    padding: 0 9px;
    border: none;
    border-radius: 7px;
    background: var(--mc-soft);
    color: var(--mc-text);
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
}

#top #aitunnelBalance:hover {
    background: var(--mc-soft2);
}

#top #aitunnelBalance .days-left {
    display: none;
}

#top #healthAlarmIndicator {
    width: 8px;
    height: 8px;
    min-width: 8px;
    margin: 0 3px;
    padding: 0;
    border-radius: 50%;
    background: #d4706a;
}

#top #healthAlarmIndicator > * {
    display: none;
}

#top #clubLoginToolbarBtn,
#top #clubUserInfo {
    width: 32px;
    height: 32px;
    min-width: 32px;
    box-sizing: border-box;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--mc-soft);
    color: var(--mc-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#top #clubLoginToolbarBtn:hover,
#top #clubUserInfo:hover {
    background: var(--mc-soft2);
}

#top #clubLoginToolbarBtn {
    font-size: 0;
}

#top #clubLoginToolbarBtn svg-icon {
    font-size: 17px;
}

#top #clubUserInfo::before {
    content: attr(data-avatar-initial);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

#top #clubUserInfo .club-user-name,
#top #clubUserInfo > svg-icon,
#top #clubUserInfo .guest-logout-btn {
    /* «Выйти» гостя вылезал из 32-пиксельного аватара за край окна; выход —
       последним пунктом меню профиля (он же выводит из гостевого режима). */
    display: none;
}

@media (max-width: 920px) {
    #top {
        max-width: calc(100vw - 80px);
    }

    #top #aitunnelBalance {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #top .top-icon-btn,
    #top > #topActions > .btn,
    #top > #topActions > #modelHealthBtn,
    #topAppsMenu,
    #topAppsMenu .top-app-item {
        transition: none;
    }
}

/* ---------------- T1.5  Масштаб в правом нижнем углу -------------------
   Внутри — настоящие .zoom-btn и #zoomLevel из временной toolbar, поэтому
   updateZoomUI() продолжает обновлять один и тот же элемент. */
#zoom {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 101;
    display: flex;
    align-items: center;
    padding: 4px;
    border: 1px solid var(--mc-line);
    border-radius: 9px;
    background: var(--mc-surface);
    color: var(--mc-text);
    font-family: inherit;
}

#zoomActions {
    display: flex;
    align-items: center;
    gap: 2px;
}

#zoom #zoomActions .zoom-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--mc-muted);
    box-shadow: none;
}

#zoom #zoomActions .zoom-btn:hover {
    background: var(--mc-soft);
    color: var(--mc-accent);
}

#zoom #zoomActions .zoom-btn:active {
    background: var(--mc-soft2);
    color: var(--mc-accent-hover);
    transform: scale(.96);
}

#zoom #zoomActions .zoom-btn:focus-visible {
    outline: 2px solid var(--mc-accent);
    outline-offset: 2px;
    box-shadow: none;
}

#zoom #zoomLevel {
    min-width: 42px;
    padding: 0 5px;
    border-radius: 7px;
    background: var(--mc-soft);
    color: var(--mc-text);
    font-size: 12px;
    line-height: 30px;
    text-align: center;
}

/* «Ветки из выделения» жил в меню профиля до T3.2; вход — пункт «⋯» узла. */

@media (prefers-reduced-motion: reduce) {
    #zoom #zoomActions .zoom-btn {
        transition: none;
    }
}

/* ================= /КАРКАС ПРИЛОЖЕНИЯ (Этап 1) ================= */

/* ================= МИНИМАЛИСТИЧНЫЙ КАНВАС — Этап 2 / T2.1 ===========
   Размеры остаются у layout-движка, а эта секция отвечает только за вид
   четырёх представлений одного живого DOM-узла. */
body.mc-layout-active .nodes-container {
    padding: 0;
}

body.mc-layout-active .dialog-node {
    min-height: 0;
    max-height: none;
    transform-origin: center;
    /* Камера измеряет итоговую геометрию в том же кадре, что и раскладка.
       Анимация left/top/width/height оставляла старые размеры на время замера:
       раскрытый узел после перехода уезжал вверх из рассчитанного центра. */
    transition: none;
    /* Старый базовый z-index:100 у .dialog-node не должен поднимать точки
       и пиктограммы над активным полным узлом. */
    z-index: 5;
}

body.mc-layout-active .dialog-node.is-layout-hidden {
    display: none;
}

body.mc-layout-active .dialog-node.as-full {
    z-index: 10;
    overflow: hidden;
}

/* T2.5: временно раскрытая ветка не меняет раскладку и лежит над ней. */
body.mc-layout-active .dialog-node.is-peeking {
    /* Подсмотр выше активного узла и точек, но ниже меню z-index:180. */
    z-index: 150 !important;
    overflow: hidden;
    cursor: pointer;
}

/* Анимация только предпросмотра на выбранном свободном участке.
   Навигационные пиктограммы всегда остаются на своих местах. */
body.mc-layout-active .dialog-node.is-peeking {
    transition: left .42s cubic-bezier(.2, .7, .2, 1),
                top .42s cubic-bezier(.2, .7, .2, 1),
                width .42s cubic-bezier(.2, .7, .2, 1),
                height .42s cubic-bezier(.2, .7, .2, 1);
}

body.mc-layout-active .dialog-node.chat-peek-anchor {
    z-index: 160 !important;
    transition: none !important;
    cursor: pointer;
}

body.mc-layout-active .dialog-node.is-peek-returning {
    pointer-events: none;
}

/* Если единственный свободный участок по другую сторону полного узла,
   переносим подсмотр без перелёта поверх него. */
body.mc-layout-active .dialog-node.is-peeking.is-peek-jump {
    transition: none;
}

body.mc-layout-active .is-peek-obscured {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Виды as-card / as-icon / as-dot и точка «+N» — в секции «Доводка видов
   узла» в конце файла: там слои .v-card / .v-icon по концепту. */

@media (prefers-reduced-motion: reduce) {
    body.mc-layout-active .dialog-node {
        transition: none;
    }
}

/* =============== /МИНИМАЛИСТИЧНЫЙ КАНВАС — Этап 2 / T2.1 =========== */

/* ================= КАРТА СТРУКТУРЫ (T7.1) ==========================
   Карта не перестраивается при раскрытии узла: к нужному узлу подъезжает
   камера. Столбцы стоят на месте всегда; при варианте «соседи
   расступаются» ветки едут поперёк — этот переезд и анимируется.
   Камеру это не сбивает: она берёт геометрию из плана раскладки. */
body.mc-map-active .dialog-node:not(.is-peeking):not(.chat-peek-anchor):not(.is-pin-dragging):not(.is-resizing) {
    transition: left .42s cubic-bezier(.2, .7, .2, 1),
                top .42s cubic-bezier(.2, .7, .2, 1),
                width .42s cubic-bezier(.2, .7, .2, 1),
                height .42s cubic-bezier(.2, .7, .2, 1);
}

/* Во время ресайза и перетаскивания PIN карточка обязана идти за рукой. */
body[data-mc-resizing] .dialog-node,
body.mc-pin-dragging .dialog-node.is-pinned {
    transition: none !important;
}

/* Раскрытый узел читается как окно над картой, а не как ещё одна карточка. */
body.mc-map-active .dialog-node.as-full[data-layout-role="focus"] {
    box-shadow: 0 10px 34px rgba(17, 17, 16, .10);
}

@media (prefers-reduced-motion: reduce) {
    body.mc-map-active .dialog-node {
        transition: none;
    }
}

/* Предпросмотр «в одном месте»: полоса навигации над окном и подсветка
   ветки на карте, которую сейчас показывает окно. */
body.mc-layout-active .chat-peek-nav {
    position: absolute;
    /* Выше подсвеченной карточки-источника (160): полоса всегда читается. */
    z-index: 170;
    box-sizing: border-box;
    height: 34px;
    padding: 0 4px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--cv-line);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(17, 17, 16, .08);
    white-space: nowrap;
    font: 12px/1 var(--cv-font);
    color: var(--cv-muted);
    pointer-events: auto;
}
body.mc-layout-active .chat-peek-nav .cpn-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--cv-line);
    border-radius: 7px;
    background: #fff;
    color: var(--cv-text);
    font: 13px/1 var(--cv-font);
    cursor: pointer;
}
body.mc-layout-active .chat-peek-nav .cpn-btn:hover:not(:disabled) { border-color: #cfcfcd; }
body.mc-layout-active .chat-peek-nav .cpn-btn:disabled { opacity: .35; cursor: default; }
body.mc-layout-active .chat-peek-nav .cpn-count { min-width: 52px; text-align: center; }
body.mc-layout-active .chat-peek-nav .cpn-sep { width: 1px; height: 16px; margin: 0 6px; background: var(--cv-line); }
body.mc-layout-active .dialog-node.is-peeking.is-peek-swap {
    animation: mcPeekSwap .16s ease-out;
}
@keyframes mcPeekSwap { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    body.mc-layout-active .dialog-node.is-peeking.is-peek-swap { animation: none; }
}
body.mc-layout-active .dialog-node.chat-peek-anchor {
    outline: 2px solid #1f1f1f;
    outline-offset: 3px;
    border-radius: 10px;
}
body.mc-layout-active .dialog-node.chat-peek-anchor.is-grow {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =============== /КАРТА СТРУКТУРЫ (T7.1) =========================== */

/* ================= МИНИМАЛИСТИЧНЫЙ КАНВАС — T2.2: камера ============ */
.canvas-scene {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    transform-origin: 0 0;
    will-change: transform;
}

.canvas-scene.cam-anim {
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.tree-canvas.mc-camera-active {
    overflow: hidden;
    scroll-behavior: auto;
    touch-action: none;
}

.tree-canvas.mc-camera-active.is-panning {
    cursor: grabbing;
}

.tree-canvas.mc-camera-active .nodes-container,
.tree-canvas.mc-camera-active .connections-svg {
    transform: none !important;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .canvas-scene.cam-anim {
        transition: none;
    }
}

/* =============== /МИНИМАЛИСТИЧНЫЙ КАНВАС — T2.2: камера ============ */

/* ================= МИНИМАЛИСТИЧНЫЙ КАНВАС — T2.4: связи ============== */
.edges-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.edges-svg .edge {
    fill: none;
    stroke: var(--edge, #cdcdcb);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.edges-svg .edge.dash {
    stroke-dasharray: 4 4;
}

.edges-svg .edge.thin {
    stroke: #dadad8;
}

/* ================= MINIMAL CANVAS — T3: node header and more menu ================ */
:root {
    /* T6.1: те же значения концепта, что у токенов каркаса выше; второй
       набор с другими оттенками больше не заводим. */
    --mc-ink: #1f1f1f;
    --mc-muted: #6f6f6f;
    --mc-soft: #f3f3f3;
    --mc-soft2: #e9e9e9;
    --mc-danger: #b42318;
    --mc-warn: #b7791f;
}

.dialog-node > .node-header.f-head {
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 10px 8px 8px 16px;
    background: #fff;
    border: 0;
    color: var(--mc-ink);
    cursor: move;
    user-select: none;
}

.f-head .cdot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}

.f-title {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 5px;
    border-radius: 5px;
    outline: 0;
    color: var(--mc-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Название — текст; правка включается только пунктом «⋯ → Переименовать». */
    cursor: default;
}

.f-title[contenteditable="true"] {
    cursor: text;
}

.f-title[contenteditable="true"]:focus {
    white-space: normal;
    overflow: visible;
    background: var(--mc-soft);
    box-shadow: 0 0 0 2px var(--mc-soft2);
}

.f-link,
.f-head-action,
.f-quick-trigger,
.f-more {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    border: 0;
    border-radius: 7px;
    color: var(--mc-muted);
    background: transparent;
    cursor: pointer;
}

.f-link:hover,
.f-head-action:hover,
.f-quick-trigger:hover,
.f-more:hover,
.f-link:focus-visible,
.f-head-action:focus-visible,
.f-quick-trigger:focus-visible,
.f-more:focus-visible {
    color: var(--mc-ink);
    background: var(--mc-soft);
    outline: 0;
}

.f-link.isolated { color: var(--mc-warn); }

/* В «Структуре диалога» что-то выключено (скрыто или убрано из контекста) —
   пиктограмма кнопки красная (refreshDialogStructureMark в script.js) */
.f-structure.has-context-off,
.f-structure.has-context-off:hover,
.f-structure.has-context-off:focus-visible,
.dialog-structure-btn.has-context-off,
.dialog-structure-btn.has-context-off:hover {
    color: var(--mc-danger);
}

.f-pin[aria-pressed="true"] {
    color: var(--mc-ink);
    background: var(--mc-soft2);
}
.f-pin[aria-pressed="true"] svg { fill: var(--mc-soft); }
body.mc-layout-active .dialog-node > .f-head { cursor: default; }
body.mc-layout-active .dialog-node.is-pinned { z-index: 20 !important; }
body.mc-layout-active .dialog-node.as-full[data-layout-role="focus"] { z-index: 40 !important; }
body.mc-layout-active .dialog-node.is-pinned.node-on-top { z-index: 50 !important; }
body.mc-layout-active .dialog-node.is-pinned > .f-head,
body.mc-layout-active .dialog-node.is-pinned > .f-head .f-title:not([contenteditable="true"]) {
    cursor: grab;
    touch-action: none;
}
body.mc-layout-active .dialog-node.is-pinned.is-pin-dragging {
    z-index: 170 !important;
    transition: none;
}
body.mc-pin-dragging,
body.mc-pin-dragging * { cursor: grabbing !important; user-select: none !important; }

/* Структура стоит постоянно; соседний значок раскрывает шесть команд
   в самой шапке, не сдвигая кнопку «⋯» у правого края. */
.f-head .f-quick {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row-reverse;
    align-items: center;
    min-width: 28px;
}

.f-head .f-quick-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    pointer-events: none;
    transition: max-width .24s ease, opacity .18s ease, transform .24s ease;
}

.f-head .f-quick:hover .f-quick-actions,
.f-head .f-quick:focus-within .f-quick-actions,
.f-head .f-quick.is-open .f-quick-actions {
    max-width: 180px;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.f-head .f-quick-action {
    width: 28px;
    flex-basis: 28px;
}

.f-head .f-quick-action.node-files-btn,
.f-head .f-quick-action.node-files-btn.active {
    border-radius: 7px;
    color: var(--mc-muted);
    background: transparent;
    box-shadow: none;
    transform: none;
}

.f-head .f-quick-action.node-files-btn:hover,
.f-head .f-quick-action.node-files-btn.active:hover,
.f-head .f-quick-action.node-files-btn:focus-visible {
    color: var(--mc-ink);
    background: var(--mc-soft);
    box-shadow: none;
}

.f-ctx {
    position: relative;
    display: block;
    height: 2px;
    margin: 0 16px;
    border-radius: 2px;
    background: var(--mc-soft);
    cursor: pointer;
    /* Точка-отсечка выходит за 2px полосы — поверх ленты сообщений. */
    z-index: 1;
}

.f-ctx::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--p, 0) * 1%);
    max-width: 100%;
    border-radius: 2px;
    background: #c4c4c2;
    transition: width .18s ease, background .18s ease;
}

/* Отсечка на границе заполнения: полоса остаётся в 2px, а щёлкать можно
   по точке. Видимая точка 8px, прозрачная рамка добавляет зону попадания
   до 20px — щелчок по псевдоэлементу приходит самой .f-ctx. */
.f-ctx::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--p, 0) * 1%);
    width: 8px;
    height: 8px;
    border: 6px solid transparent;
    border-radius: 50%;
    background: #a8a8a6;
    background-clip: content-box;
    transform: translate(-50%, -50%);
    transition: left .18s ease, background-color .18s ease;
}

.f-ctx:hover::after,
.f-ctx:focus-visible::after { background-color: var(--mc-ink); }
.f-ctx.warn::before,
.f-ctx.warn::after { background-color: var(--mc-warn); }
.f-ctx:focus-visible { outline: 2px solid var(--mc-soft2); outline-offset: 3px; }

.typing-indicator .typing-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--mc-muted);
    animation: mc-typing-pulse 1.2s ease-in-out infinite;
}
@keyframes mc-typing-pulse { 50% { opacity: .2; } }

.chat-more-pop {
    position: fixed;
    z-index: 180;
    display: none;
    box-sizing: border-box;
    width: min(320px, calc(100vw - 16px));
    min-width: 220px;
    max-height: min(72vh, 680px);
    overflow: auto;
    padding: 7px;
    border: 1px solid #dededc;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    color: var(--mc-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.chat-more-pop.open { display: block; }
.pop-label { padding: 5px 7px 4px; color: var(--mc-muted); font-size: 11.5px; font-weight: 500; }
.pop-divider { height: 1px; margin: 6px 3px; background: #ebebe9; }

.more-colors { display: flex; align-items: center; gap: 7px; padding: 2px 7px 5px; }
.more-color {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--dialog-color);
    cursor: pointer;
}
.more-color:hover, .more-color:focus-visible { outline: 2px solid var(--mc-soft2); outline-offset: 2px; }
.more-color.active { border-color: #fff; box-shadow: 0 0 0 1px var(--mc-ink); }

.pi {
    width: 100%;
    min-height: 40px;
    padding: 7px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    color: var(--mc-ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.pi:hover, .pi:focus-visible { outline: 0; background: var(--mc-soft); }
.pi-icon { display: inline-flex; color: var(--mc-muted); }
.pi-copy { min-width: 0; display: grid; gap: 1px; }
.pi-title { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pi .d { overflow: hidden; color: var(--mc-muted); font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.pi-check { display: inline-flex; align-items: center; justify-content: center; color: var(--mc-ink); }
.pi.danger { color: var(--mc-danger); }
.pi.danger .pi-icon { color: inherit; }
.pi.danger:hover, .pi.danger:focus-visible { background: rgba(229, 62, 62, .10); color: #c53030; }


/* Уменьшенные виды прячут шапку и полосу контекста целиком — см. секцию
   «Доводка видов узла» в конце файла. */
/* =============== /MINIMAL CANVAS — T3: node header and more menu ================ */

/* ================= MINIMAL CANVAS — T4.1: message ribbon =================
   Оболочки `.m.*` дополняют, а не заменяют legacy-классы `.message`/role:
   table-chat, text-editor, artifact-refs и обработчики старых сообщений по-прежнему
   находят свои селекторы. Меняем только вид полного фокусного узла. */
body.mc-layout-active .dialog-node.as-full .node-messages-wrapper {
    min-height: 0;
    min-width: 0;
}

body.mc-layout-active .dialog-node.as-full .node-messages.f-msgs {
    min-height: 0;
    min-width: 0;
    margin-top: 0;
    padding: 16px 18px 8px;
    gap: 16px;
    border-top: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
}

body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m {
    width: auto;
    min-width: 0;
    max-width: 100%;
    gap: 0;
    margin: 0;
    align-self: stretch;
}

body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m.u {
    width: auto;
    max-width: 84%;
    align-self: flex-end;
    flex-direction: row;
}

/* «Вы» не спорит с пузырём: подпись скрыта. */
body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m > .message-avatar,
body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m > .message-avatar-container > .message-avatar {
    display: none;
}

/* 04.10: «Скопировать пару» и «Удалить пару» вернулись — слева от пузыря вопроса,
   в верхнем углу, видны при наведении на вопрос. Вид — как у ряда действий под ответом. */
body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m > .message-avatar-container {
    display: flex;
    flex-direction: row;
    align-self: flex-start;
    gap: 0;
    margin: 4px 4px 0 0;
}

body.mc-layout-active .dialog-node.as-full .f-msgs .pair-actions {
    width: auto;
    gap: 2px;
}

body.mc-layout-active .dialog-node.as-full .f-msgs .pair-actions .delete-pair-btn {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: #9aa1ab;
    opacity: 0;
    transform: none;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m.u:hover .pair-actions .delete-pair-btn,
body.mc-layout-active .dialog-node.as-full .f-msgs .pair-actions .delete-pair-btn:focus-visible {
    opacity: 1;
}

body.mc-layout-active .dialog-node.as-full .f-msgs .pair-actions .delete-pair-btn svg {
    width: 15px;
    height: 15px;
}

body.mc-layout-active .dialog-node.as-full .f-msgs .pair-actions .copy-pair-btn:hover {
    color: #20B8CD;
    background: rgba(32, 184, 205, 0.10);
}

body.mc-layout-active .dialog-node.as-full .f-msgs .pair-actions .delete-pair-btn:not(.copy-pair-btn):hover {
    color: #c53030;
    background: rgba(229, 62, 62, 0.10);
}

body.mc-layout-active .dialog-node.as-full .f-msgs .pair-actions .copy-pair-btn.sn-confirmed {
    opacity: 1;
    color: #20808D;
}

body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mc-ink);
    font-size: inherit;
    line-height: inherit;
    overflow-wrap: anywhere;
    overflow: visible;
}

body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b:hover,
body.mc-layout-active .dialog-node.as-full .f-msgs .message.user .message-content.b:hover {
    background: transparent;
}

body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m.u .message-content.b {
    padding: 9px 13px;
    border-radius: 16px;
    background: var(--mc-soft);
}

body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b > :first-child { margin-top: 0; }
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b > :last-child { margin-bottom: 0; }
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b p { margin: 0 0 8px; }
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b ul,
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b ol { margin: 6px 0; padding-left: 20px; }
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b li { margin: 3px 0; }
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b b { font-weight: 600; }
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b blockquote {
    margin: 0 0 6px;
    padding-left: 10px;
    border-left: 2px solid var(--mc-soft2);
    color: var(--mc-muted);
}

body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b .tbl,
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b table {
    width: 100%;
    margin: 6px 0 8px;
    font-size: 13px;
}
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b .tbl th,
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b table th {
    color: var(--mc-muted);
    font-size: 12px;
    font-weight: 500;
}
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b .viz,
body.mc-layout-active .dialog-node.as-full .f-msgs .message-content.b > svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 4px 0 8px;
}

/* T4.2: единственная строка метаданных ответа — режим, фактическая модель,
   фактическое списание. В длинной подписи текст не ломает ритм ленты. */
body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m.a .cap {
    margin-top: 6px;
    overflow: hidden;
    color: var(--mc-faint);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m.e {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    padding: 8px 8px 8px 12px;
    border-radius: 10px;
    background: #fdf0ef;
    color: var(--mc-danger);
    font-size: 13.5px;
}
body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m.e .message-content.b {
    display: block;
    width: 100%;
    flex: 0 1 auto;
    box-sizing: border-box;
    min-height: 0;
    padding-right: 34px;
    color: inherit;
}
body.mc-layout-active .dialog-node.as-full .message-error-text {
    display: inline-block;
    min-width: 0;
    line-height: 1.4;
}
body.mc-layout-active .dialog-node.as-full .f-msgs > .message.m.e .msg-actions { display: none; }
body.mc-layout-active .dialog-node.as-full .message-retry-btn {
    height: 28px;
    float: right;
    margin: -1px 0 0 10px;
    padding: 5px 10px;
    border: 0;
    border-radius: 7px;
    background: #fff;
    color: var(--mc-ink);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
body.mc-layout-active .dialog-node.as-full .message-retry-btn:hover,
body.mc-layout-active .dialog-node.as-full .message-retry-btn:focus-visible {
    background: var(--mc-soft2);
    outline: 0;
}

/* Рантаймный таймлайн создаёт карточку сам, поэтому класс `typing` ставится и
   в его конструкторе. Точка остаётся одинаковой до и после появления шагов. */
.typing-indicator .typing-spinner {
    width: 7px;
    height: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 7px;
}
.typing-indicator .typing-spinner .typing-dot {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: var(--mc-muted);
    animation: mc-typing-pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .typing-indicator .typing-spinner .typing-dot { animation: none; }
}
/* =============== /MINIMAL CANVAS — T4.1: message ribbon ================ */

/* ================= MINIMAL CANVAS — T4.3: input card ====================
   Одна спокойная поверхность; textarea остаётся прозрачной, чтобы не возникала
   вложенная плашка. Старые ID и классы ввода сохраняются для обработчиков. */
body.mc-layout-active .dialog-node.as-full .node-input.f-input {
    padding: 0 18px 12px;
    border: 0;
    background: transparent;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .input-container.f-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 8px 6px 14px;
    border: 0;
    border-radius: 18px;
    background: var(--mc-soft);
    box-shadow: none;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .input-wrapper {
    display: flex;
    min-width: 0;
    gap: 8px;
    align-items: flex-end;
    background: transparent;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .message-input-with-attach,
body.mc-layout-active .dialog-node.as-full .node-input.f-input .message-input-with-attach:focus {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 24px;
    max-height: 140px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 0 30px;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    color: var(--mc-ink);
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.45;
    resize: none;
    overflow-y: hidden;
    transition: none;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .message-input-with-attach::placeholder {
    color: var(--mc-faint);
    opacity: 1;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .attach-btn-inside {
    top: 1px;
    left: 0;
    width: 24px;
    height: 24px;
    transform: none;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .attach-btn-inside:hover {
    transform: none;
    background: transparent;
}

/* T4.4: формула ввода «+ · режим · ↑». Служебный select/RAG-чекбокс остаётся
   только в DOM для прежних обработчиков и не создаёт второй поверхности. */
body.mc-layout-active .dialog-node.as-full .node-input.f-input .input-wrapper {
    gap: 0;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .message-input-with-attach,
body.mc-layout-active .dialog-node.as-full .node-input.f-input .message-input-with-attach:focus {
    width: 100%;
    padding-left: 0;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .f-input-store {
    display: none !important;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .f-row {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 30px;
    margin-top: 6px;
    gap: 6px;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .attach-btn-inside.f-plus {
    position: static;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: var(--mc-muted);
    background: transparent;
    cursor: pointer;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .attach-btn-inside.f-plus:hover,
body.mc-layout-active .dialog-node.as-full .node-input.f-input .attach-btn-inside.f-plus:focus-visible {
    outline: 0;
    color: var(--mc-ink);
    background: #e7e7e6;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .f-pills {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 5px;
    overflow: hidden;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .pill {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 24px;
    gap: 4px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    color: var(--mc-muted);
    background: #e7e7e6;
    font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .pill:hover,
body.mc-layout-active .dialog-node.as-full .node-input.f-input .pill:focus-visible {
    outline: 0;
    color: var(--mc-ink);
    background: #dededc;
}

/* Тумблеры «База» / «Анализ проекта» у кнопки отправки: видны всегда,
   чтобы человек решал про каждый запрос, а не искал флажок в меню «+». */
body.mc-layout-active .dialog-node.as-full .node-input.f-input .f-toggles {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .pill.toggle {
    color: var(--mc-muted);
    background: transparent;
    box-shadow: inset 0 0 0 1px #d6d6d4;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .pill.toggle.on {
    color: var(--mc-ink);
    background: #dededc;
    box-shadow: inset 0 0 0 1px #9a9a98;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .pill.toggle.on.pm-yellow { box-shadow: inset 0 0 0 1px #c9a227; }
body.mc-layout-active .dialog-node.as-full .node-input.f-input .pill.toggle.on.pm-red { box-shadow: inset 0 0 0 1px #c0392b; color: #a12a1e; }
body.mc-layout-active .dialog-node.as-full .node-input.f-input .pill.toggle .pill-badge { color: var(--mc-muted); font-weight: 400; }

body.mc-layout-active .dialog-node.as-full .node-input.f-input .sp {
    flex: 1 1 auto;
    min-width: 4px;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .mode {
    display: inline-flex;
    align-items: center;
    max-width: 185px;
    height: 30px;
    gap: 3px;
    padding: 0 5px 0 7px;
    border: 0;
    border-radius: 7px;
    color: var(--mc-muted);
    background: transparent;
    font: 500 13.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .mode-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .mode:hover,
body.mc-layout-active .dialog-node.as-full .node-input.f-input .mode:focus-visible {
    outline: 0;
    color: var(--mc-ink);
    background: #e7e7e6;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .send-btn.send,
body.mc-layout-active .dialog-node.as-full .node-input.f-input .send-btn.send:hover,
body.mc-layout-active .dialog-node.as-full .node-input.f-input .send-btn.send:active {
    flex: 0 0 30px;
    align-self: auto;
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    box-shadow: none;
    transform: none;
    color: #fff;
    background: #d6d6d6;
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .send-btn.send.ready {
    color: #fff;
    background: var(--mc-ink);
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .send-btn.send.stop-mode {
    background: var(--mc-danger);
}

body.mc-layout-active .dialog-node.as-full .node-input.f-input .send-btn.send:disabled {
    cursor: not-allowed;
    opacity: .65;
}

/* Шторка выбора модели: данные те же, что у скрытого select, но поиск и
   сортировка не заставляют прокручивать системный список. */
.input-model-picker { position: fixed; z-index: 220; inset: 0; display: none; }
.input-model-picker.open { display: block; }
.input-model-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .22); }
.input-model-sheet {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: min(620px, calc(100vw - 32px));
    max-height: min(76vh, 720px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid #dededc;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .04);
    color: var(--mc-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transform: translateX(-50%);
}
.input-model-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.input-model-sheet-head button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; color: var(--mc-muted); background: transparent; cursor: pointer; }
.input-model-sheet-head button:hover { color: var(--mc-ink); background: var(--mc-soft); }
.input-model-search { width: 100%; height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid #dededc; border-radius: 7px; outline: 0; color: var(--mc-ink); background: #fff; font: 14px/1 inherit; }
.input-model-search:focus { border-color: #bdbdbb; box-shadow: 0 0 0 2px #efefed; }
.input-model-sorts { display: flex; gap: 4px; margin: 10px 0 4px; }
.input-model-sorts button { height: 26px; padding: 0 8px; border: 0; border-radius: 7px; color: var(--mc-muted); background: transparent; font: 500 12px/1 inherit; cursor: pointer; }
.input-model-sorts button:hover, .input-model-sorts button.is-active { color: var(--mc-ink); background: var(--mc-soft); }
.input-model-price-note { margin: 0 0 7px 2px; color: var(--mc-faint); font-size: 11.5px; }
.input-model-list { min-height: 80px; overflow: auto; padding-right: 2px; }
.input-model-group { padding: 10px 7px 4px; color: var(--mc-muted); font-size: 11.5px; font-weight: 600; }
.input-model-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; width: 100%; min-height: 38px; gap: 10px; padding: 7px; border: 0; border-radius: 7px; color: var(--mc-ink); background: transparent; text-align: left; cursor: pointer; }
.input-model-row:hover, .input-model-row:focus-visible, .input-model-row.is-active { outline: 0; background: var(--mc-soft); }
.input-model-copy { min-width: 0; }
.input-model-name { display: block; overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.input-model-price { color: var(--mc-muted); font-size: 12px; white-space: nowrap; }
.input-model-check { display: inline-flex; align-items: center; justify-content: center; color: var(--mc-ink); }
.input-model-empty { padding: 22px 7px; color: var(--mc-muted); font-size: 13px; text-align: center; }
@media (max-width: 560px) {
    .input-model-sheet { bottom: 0; width: 100%; max-height: 82vh; border-radius: 12px 12px 0 0; }
}
/* =============== /MINIMAL CANVAS — T4.3: input card ====================== */

.tree-canvas.mc-camera-active #connectionsSvg {
    display: none;
}

/* =============== /МИНИМАЛИСТИЧНЫЙ КАНВАС — T2.4: связи ============== */

/* ============================================================================
   МИНИМАЛИСТИЧНЫЙ КАНВАС — доводка видов узла и уборка старых панелей (29.09)
   ТЗ: Docs/ТЗ в работе/ТЗ_ЧАТ_МИНИМАЛИСТИЧНЫЙ_КАНВАС_2026-09-29.md (§4, Н6–Н9)
   Эталон: Docs/Concepts/desktop_minimal_canvas_2026-09-29.html (renderMini,
   .v-card / .v-icon / .sdot / #toast). Палитра — монохром концепта (В1),
   шрифт — системный стек (В2). Теней на узлах нет; тень — только у тоста.
   ========================================================================== */
:root {
    --cv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cv-text: #1f1f1f;
    --cv-muted: #6f6f6f;
    --cv-faint: #9b9b9b;
    --cv-soft: #f3f3f3;
    --cv-soft2: #e9e9e9;
    --cv-line: #e6e6e6;
    --cv-ink: #1f1f1f;
    --cv-danger: #b42318;
}

/* ---- Тело узла: тонкая нейтральная рамка, без теней и цветной обводки ---- */
body.mc-layout-active .dialog-node,
body.mc-layout-active .dialog-node:hover,
body.mc-layout-active .dialog-node.active,
body.mc-layout-active .dialog-node.processing {
    border: 1px solid var(--cv-line);
    border-radius: 12px;
    box-shadow: none;
    background: #fff;
    color: var(--cv-text);
}

/* Ручка размера свободного окна: размер задаёт раскладка (T2.3). */
body.mc-layout-active .dialog-node::after {
    display: none;
}

body.mc-layout-active .dialog-node.as-full,
body.mc-layout-active .dialog-node.as-full > .node-header.f-head {
    cursor: default;
}

/* Полоса контекста — сразу под названием (T3.3). Исторические правила
   закрепляют ленту за второй строкой сетки, и .f-ctx без своей строки
   уезжала под поле ввода. */
body.mc-layout-active .dialog-node.as-full {
    /* An implicit auto column kept the widest child's min-content width
       after a resize: the ribbon AND input could extend past the card. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

body.mc-layout-active .dialog-node.as-full > .f-head,
body.mc-layout-active .dialog-node.as-full > .f-ctx,
body.mc-layout-active .dialog-node.as-full > .node-messages-wrapper,
body.mc-layout-active .dialog-node.as-full > .node-input {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body.mc-layout-active .dialog-node.as-full > .f-ctx { grid-row: 2; }
body.mc-layout-active .dialog-node.as-full > .node-messages-wrapper { grid-row: 3; }
body.mc-layout-active .dialog-node.as-full > .node-input { grid-row: 4; }

/* Слои уменьшенных видов в полном виде не видны. */
.dialog-node > .v-card,
.dialog-node > .v-icon {
    display: none;
}

/* ---- Карточка 208×112: значок типа, название, отрывок ответа, мета ---- */
body.mc-layout-active .dialog-node.as-card {
    z-index: 5;
    overflow: hidden;
    cursor: pointer;
}

/* Всё тело полного узла скрыто. !important — потому что индикатор хода и
   поле ввода держат свой display в inline-стиле. */
body.mc-layout-active .dialog-node.as-card > :not(.v-card),
body.mc-layout-active .dialog-node.as-icon > :not(.v-icon),
body.mc-layout-active .dialog-node.as-dot > :not(.v-icon) {
    display: none !important;
}

body.mc-layout-active .dialog-node.as-card > .v-card {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px 10px;
    font-family: var(--cv-font);
    color: var(--cv-text);
    text-align: left;
}

.v-card .c-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.v-card .gl {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 6px;
    background: var(--cv-soft);
    color: var(--cv-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.v-card .c-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v-card .c-snip {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cv-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.v-card .c-meta {
    margin-top: auto;
    font-size: 11.5px;
    color: var(--cv-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Значок 64×78 и точка 30×30: рамку несёт сам значок, не узел ---- */
body.mc-layout-active .dialog-node.as-icon,
body.mc-layout-active .dialog-node.as-dot,
body.mc-layout-active .dialog-node.as-icon:hover,
body.mc-layout-active .dialog-node.as-dot:hover {
    min-height: 0;
    padding: 0;
    background: transparent;
    border-color: transparent;
    overflow: visible;
    cursor: pointer;
}

body.mc-layout-active .dialog-node.as-icon > .v-icon,
body.mc-layout-active .dialog-node.as-dot > .v-icon {
    position: absolute;
    top: 0;
    left: -14px;
    width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--cv-font);
}

.v-icon .i-box {
    position: relative;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    border: 1px solid var(--cv-line);
    border-radius: 12px;
    background: #fff;
    color: var(--cv-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 150ms ease, color 150ms ease;
}

body.mc-layout-active .dialog-node.as-icon:hover .i-box,
body.mc-layout-active .dialog-node.as-dot:hover .i-box {
    border-color: #cfcfcd;
    color: var(--cv-text);
}

.v-icon .i-label {
    max-width: 92px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--cv-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Путь к корню не теряется при открытии глубокой ветки. */
.v-icon .i-root-label {
    color: var(--cv-muted);
    font: 10px/1.2 var(--cv-font);
}
body.mc-layout-active .dialog-node[data-layout-role="ancestor"] > .v-card {
    gap: 2px;
    padding: 8px 12px;
}
body.mc-layout-active .chat-layout-overflow.chat-layout-ancestor-gap {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid var(--cv-line);
    border-radius: 10px;
    background: #fff;
    color: var(--cv-muted);
    font: 12px var(--cv-font);
    cursor: pointer;
}
body.mc-layout-active #edges .ancestry-edge {
    stroke: #bbbcbf;
    opacity: 1;
}

.v-icon .i-count {
    position: absolute;
    right: -7px;
    bottom: -7px;
    box-sizing: border-box;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 1px solid var(--cv-line);
    border-radius: 9px;
    background: #fff;
    color: var(--cv-muted);
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.mc-layout-active .dialog-node.as-dot > .v-icon {
    left: 0;
    width: 30px;
}

body.mc-layout-active .dialog-node.as-dot .i-box {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

body.mc-layout-active .dialog-node.as-dot .i-box svg {
    width: 14px;
    height: 14px;
}

body.mc-layout-active .dialog-node.as-dot .i-label,
body.mc-layout-active .dialog-node.as-dot .i-count {
    display: none;
}

/* ---- Точка «+N»: скрытые ветки, вид точки с числом (P23) ---- */
body.mc-layout-active .chat-layout-overflow {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--cv-line);
    border-radius: 50%;
    background: #fff;
    color: var(--cv-muted);
    font: 500 11px/28px var(--cv-font);
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 150ms ease, color 150ms ease;
}

body.mc-layout-active .chat-layout-overflow:hover,
body.mc-layout-active .chat-layout-overflow:focus-visible {
    border-color: #cfcfcd;
    color: var(--cv-text);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    body.mc-layout-active .dialog-node.is-peeking {
        transition: none;
    }
}

/* ---- T5.1. Точка состояния ветки ---- */
.sdot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
}

.sdot.running {
    background: var(--cv-muted);
    animation: mc-typing-pulse 1.2s ease-in-out infinite;
}

.sdot.unread { background: var(--cv-ink); }
.sdot.error { background: var(--cv-danger); }

.v-icon .i-box .sdot {
    position: absolute;
    top: 6px;
    right: 6px;
}

body.mc-layout-active .dialog-node.as-dot .i-box .sdot {
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
}

/* ---- T5.2. Тост чата: внизу по центру, тёмная плашка ---- */
.chat-toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 3000;
    max-width: 70vw;
    box-sizing: border-box;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--cv-ink);
    color: #fff;
    font: 13.5px/1.4 var(--cv-font);
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .04);
}

.chat-toast.on {
    opacity: 1;
}

/* ---- Старый список диалогов слева: его заменяет ящик #drawer ----
   Контейнер остаётся в DOM владельцем #canvasList, #spotlightOpenBtn и
   #sidebarDialogsTitle; меню проекта и «Индекс проекта» переехали в ящик. */
body.mc-frame .canvas-sidebar {
    display: none !important;
}

/* Панель заметок открывается кнопкой рельса; свёрнутая, она больше не
   торчит язычком у правого края. */
body.mc-frame .notes-panel.collapsed {
    visibility: hidden;
    pointer-events: none;
    transition: left .3s ease, visibility 0s linear .3s;
}

/* ---- Перенесённые в ящик элементы старого списка ---- */
#drawer .dr-proj {
    align-items: center;
}

#drawer .dr-proj-name {
    cursor: pointer;
    border-radius: 5px;
}

#drawer .dr-proj-name:hover {
    color: var(--cv-text);
    text-decoration: underline;
    text-decoration-color: var(--cv-line);
    text-underline-offset: 3px;
}

#drawer .dr-proj-menu {
    margin-left: auto;
    flex-shrink: 0;
}

#drawer .dr-proj-menu-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--cv-muted);
    box-shadow: none;
}

#drawer .dr-proj-menu-btn:hover {
    background: var(--cv-soft);
    color: var(--cv-text);
    border: none;
}

#drawer .dr-list .canvas-item {
    position: relative;
    padding-right: 34px;
}

#drawer .dr-list .canvas-item.dr-dragging {
    opacity: .5;
}

#drawer .dr-item-menu {
    box-shadow: none;
}

#drawer .dr-item-menu .ic {
    fill: none;
    stroke: none;
}

#drawer .pm-sidebar-footer {
    margin: 6px -10px 0;
    padding: 10px 12px;
    border-top: 1px solid var(--cv-line);
    background: transparent;
}

#drawer .pm-sidebar-footer .pm-index-btn {
    height: 32px;
    border-radius: 7px;
    font-family: var(--cv-font);
}

#drawer .dr-foot {
    margin-top: 0;
}

#drawer .pm-sidebar-footer + .dr-foot {
    border-top: none;
    padding-top: 0;
}

/* ---- T6.1. Холст, шрифт и ящик — палитра и системный стек концепта ---- */
body.mc-frame .tree-area {
    background: var(--mc-canvas);
}

body.mc-frame .tree-canvas {
    background-color: var(--mc-canvas);
    /* Один слой точек: размер слоя ведёт камера (24 × z). */
    background-image: radial-gradient(circle, #d4d4d2 1px, transparent 1.4px);
}

body.mc-frame[data-canvas-grid="plain"] .tree-canvas { background-image: none; }
body.mc-frame[data-canvas-borders="none"] .dialog-node.as-full,
body.mc-frame[data-canvas-borders="none"] .dialog-node.as-card,
body.mc-frame[data-canvas-borders="none"] .v-icon .i-box,
body.mc-frame[data-canvas-borders="none"] .v-icon .i-count { border-color: transparent; }

/* Настройки вариантов концепта открываются отдельной кнопкой справа вверху. */
#canvasSettingsPanel {
    position: fixed;
    top: 56px;
    right: 12px;
    z-index: 1100;
    width: min(360px, calc(100vw - 80px));
    max-height: calc(100vh - 72px);
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    background: var(--mc-surface);
    color: var(--mc-text);
    font: 13px/1.4 var(--mc-font);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .04);
}
body.mc-frame-legacy #canvasSettingsPanel { top: calc(var(--mc-legacy-toolbar-h) + 52px); }
.canvas-settings-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--mc-line); }
.canvas-settings-head h2 { flex: 1; margin: 0; font: 500 15px/1.35 var(--mc-font); }
.canvas-settings-head button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--mc-muted); font: 24px/1 var(--mc-font); cursor: pointer; }
.canvas-settings-head button:hover { background: var(--mc-soft); color: var(--mc-text); }
.canvas-settings-body { padding: 2px 16px 16px; }
.canvas-settings-group { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.canvas-settings-group legend { width: 100%; margin-bottom: 7px; padding: 0; color: var(--mc-muted); font: 12px/1.35 var(--mc-font); }
.canvas-settings-options { display: flex; flex-wrap: wrap; gap: 5px; }
.canvas-settings-options button { min-height: 32px; padding: 6px 9px; border: 0; border-radius: 7px; background: var(--mc-soft); color: var(--mc-text); font: 12px/1.25 var(--mc-font); cursor: pointer; }
.canvas-settings-options button:hover { background: var(--mc-soft2); }
.canvas-settings-options button.selected { background: var(--mc-ink); color: #fff; }
.canvas-settings-options button:disabled { opacity: .45; cursor: default; }
#canvasSettingsPanel button:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 2px; }
@media (max-width: 600px) { #canvasSettingsPanel { right: 8px; width: calc(100vw - 72px); } }

body.mc-frame #rail,
body.mc-frame #drawer,
body.mc-frame #crumbs,
body.mc-frame #top,
body.mc-frame #zoom,
body.mc-layout-active .dialog-node,
.chat-more-pop,
#inputModelPicker {
    font-family: var(--mc-font);
}

#drawer .dr-list .canvas-item:hover {
    background: var(--mc-soft);
}

#drawer .dr-list .canvas-item.active {
    background: var(--mc-soft2);
    color: var(--mc-text);
}

#drawer .dr-list .canvas-item .canvas-item-title,
#drawer .dr-list .canvas-item.active .canvas-item-title,
#drawer .dr-list .canvas-item:hover .canvas-item-title {
    color: var(--mc-text);
}

#drawer .dr-list .canvas-item .canvas-item-meta {
    color: var(--mc-faint);
}

#drawer .pm-index-title,
#drawer .pm-index-count,
#drawer .pm-index-auto-text {
    font-family: var(--mc-font);
    color: var(--mc-muted);
}

#drawer .pm-index-title {
    color: var(--mc-text);
}

#drawer .pm-sidebar-footer .pm-index-btn,
#drawer .pm-idx-done .pm-index-btn {
    border: 1px solid var(--mc-line);
    background: var(--mc-surface);
    color: var(--mc-text);
}

#drawer .pm-sidebar-footer .pm-index-btn:hover {
    background: var(--mc-soft);
    color: var(--mc-text);
}

/* Индекс нужен — кнопка тёмная (главное действие ящика), как «отправить». */
#drawer .pm-idx-partial .pm-index-btn,
#drawer .pm-sidebar-footer:not(.pm-idx-done):not(.pm-idx-partial) .pm-index-btn {
    border-color: transparent;
    background: var(--mc-ink);
    color: #fff;
}

#drawer .pm-idx-partial .pm-index-btn:hover,
#drawer .pm-sidebar-footer:not(.pm-idx-done):not(.pm-idx-partial) .pm-index-btn:hover {
    background: #000;
    color: #fff;
}

#drawer .pm-dot-green { background: #3f8f5f; box-shadow: none; }
#drawer .pm-dot-amber { background: #b7791f; box-shadow: none; }
#drawer .pm-dot-grey { background: #c4c4c2; }

/* ---- Полный узел: лента на всю высоту, ввод в потоке (Н12) ----
   Высоту ленты раньше вписывал inline updateNodeMessagesHeight по временным
   540×420 (или по карточке), а поле ввода fixNodeInputPosition клал поверх
   абсолютом: после растяжения узла под лентой зияла пустота. Теперь хозяин —
   сетка узла (шапка / контекст / лента 1fr / ввод). Прямые селекторы (>)
   не задевают «режим чата» (лента уезжает в .chat-page) и полноэкранный узел. */
body.mc-layout-active .dialog-node.as-full:not(.node-fullscreen-css):not(.chat-mode-source) > .node-messages-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* Правые 7 px узла — ручка ресайза: полоса прокрутки ленты стоит левее
       неё, текстовая колонка той же ширины (padding ленты уменьшен на 7). */
    padding-right: 7px;
}

body.mc-layout-active .dialog-node.as-full:not(.node-fullscreen-css):not(.chat-mode-source) > .node-messages-wrapper > .node-messages.f-msgs {
    padding-right: 11px;
}

body.mc-layout-active .dialog-node.as-full:not(.node-fullscreen-css):not(.chat-mode-source) > .node-messages-wrapper > .node-messages.f-msgs {
    flex: 1 1 auto;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

body.mc-layout-active .dialog-node.as-full:not(.node-fullscreen-css):not(.chat-mode-source) > .node-input.f-input {
    position: static !important;
    padding-top: 6px;
}

/* Широкое содержимое прокручивается само, а не растягивает ленту вбок. */
body.mc-layout-active .dialog-node.as-full .f-msgs mjx-container,
body.mc-layout-active .dialog-node.as-full .f-msgs .ai-table-container,
body.mc-layout-active .dialog-node.as-full .f-msgs .message-table-container,
body.mc-layout-active .dialog-node.as-full .f-msgs pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Полосы прокрутки ленты — тонкие и нейтральные (T6.2: вместо
   #f1f5f9 / #cbd5e0 / #a0aec0 старого узла). */
body.mc-layout-active .dialog-node .node-messages {
    scrollbar-width: thin;
    scrollbar-color: #dcdcda transparent;
}

body.mc-layout-active .dialog-node .node-messages::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.mc-layout-active .dialog-node .node-messages::-webkit-scrollbar-track {
    background: transparent;
}

body.mc-layout-active .dialog-node .node-messages::-webkit-scrollbar-thumb {
    background: #dcdcda;
    border-radius: 3px;
}

body.mc-layout-active .dialog-node .node-messages::-webkit-scrollbar-thumb:hover {
    background: #c4c4c2;
}

/* Четыре независимых угла полного узла и PIN. Миниатюры и подсмотр — без ручек. */
.dialog-node > .rz {
    display: none;
}

body.mc-layout-active .dialog-node.as-full:not(.is-peeking):not(.node-fullscreen-css):not(.chat-mode-source) > .rz {
    display: block;
    position: absolute;
    z-index: 30;
    touch-action: none;
    width: 18px;
    height: 18px;
    color: #b9b9b7;
}

body.mc-layout-active .dialog-node > .rz::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-bottom-right-radius: 3px;
    opacity: .55;
    pointer-events: none;
}

body.mc-layout-active .dialog-node > .rz-nw { left: 0; top: 0; cursor: nwse-resize; }
body.mc-layout-active .dialog-node > .rz-ne { right: 0; top: 0; cursor: nesw-resize; }
body.mc-layout-active .dialog-node > .rz-sw { left: 0; bottom: 0; cursor: nesw-resize; }
body.mc-layout-active .dialog-node > .rz-se { right: 0; bottom: 0; cursor: nwse-resize; }

body.mc-layout-active .dialog-node > .rz-nw::after { transform: rotate(180deg); }
body.mc-layout-active .dialog-node > .rz-ne::after { transform: rotate(-90deg); }
body.mc-layout-active .dialog-node > .rz-sw::after { transform: rotate(90deg); }

body.mc-layout-active .dialog-node:hover > .rz::after,
body.mc-layout-active .dialog-node.is-resizing > .rz::after {
    opacity: 1;
}

body.mc-layout-active .dialog-node > .rz:hover {
    color: #737371;
}

/* Тянущийся узел не догоняет курсор с задержкой; ветки вокруг — плавно. */
body.mc-layout-active .dialog-node.is-resizing {
    transition: none !important;
}

body[data-mc-resizing] {
    user-select: none;
}

body[data-mc-resizing="nw"] *,
body[data-mc-resizing="se"] * { cursor: nwse-resize !important; }
body[data-mc-resizing="ne"] *,
body[data-mc-resizing="sw"] * { cursor: nesw-resize !important; }

/* ---- T5.4. Ветка из выделения: вид #selbar концепта для #selectionTooltip ----
   Та же подсказка и те же кнопки (#createBranchBtn / #addNoteBtn), только
   тёмная компактная панель над выделением: без превью и крестика — закрывается
   кликом мимо или Esc. */
.selection-tooltip.selbar,
.selection-tooltip.selbar.show {
    display: flex !important;
    align-items: center;
    gap: 2px;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 3px;
    border: none;
    border-radius: 9px;
    background: var(--cv-ink);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .04);
    font-family: var(--cv-font);
}

.selection-tooltip.selbar:not(.show) {
    display: none !important;
}

.selection-tooltip.selbar .tooltip-close-btn,
.selection-tooltip.selbar .tooltip-header {
    display: none;
}

.selection-tooltip.selbar .tooltip-actions {
    display: flex;
    gap: 2px;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
}

.selection-tooltip.selbar .tooltip-btn,
.selection-tooltip.selbar .tooltip-btn.fork-btn,
.selection-tooltip.selbar .tooltip-btn.add-note-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #fff;
    font: 13px/1.2 var(--cv-font);
    white-space: nowrap;
    box-shadow: none;
    transform: none;
    cursor: pointer;
}

.selection-tooltip.selbar .tooltip-btn:hover,
.selection-tooltip.selbar .tooltip-btn:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    outline: none;
    transform: none;
    box-shadow: none;
}

.selection-tooltip.selbar .tooltip-btn .ic {
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .sdot.running { animation: none; }
    .chat-toast { transition: none; }
    .selection-tooltip.selbar { animation: none; }
    /* T6.6: ящик, появление узла и полоса контекста — без движения. */
    #drawer { transition: none; }
    body.mc-layout-active .dialog-node,
    body.mc-layout-active .dialog-node.new { transition: none; animation: none; }
    .f-ctx::before,
    .f-ctx::after { transition: none; }
    .typing-indicator .typing-dot { animation: none; }
    .v-icon .i-box,
    body.mc-layout-active .chat-layout-overflow { transition: none; }
    .f-head .f-quick-actions { transition: none; }
}
/* ========== /МИНИМАЛИСТИЧНЫЙ КАНВАС — доводка видов узла и уборка панелей ========== */

/* T6.4: иммерсивные режимы живут в координатах окна, а не масштабированной
   canvas-сцены. Живые лента и ввод остаются теми же DOM-элементами. */
body.chat-mode-active #canvasScene,
body.mc-fullscreen-active #canvasScene {
    transform: none !important;
    will-change: auto !important;
    transition: none !important;
}

body.mc-fullscreen-active .tree-canvas,
body.mc-fullscreen-active .nodes-container {
    will-change: auto !important;
}

body.mc-fullscreen-active #edges,
body.chat-mode-active #edges {
    display: none !important;
}

body.mc-fullscreen-active .dialog-node:not(.node-fullscreen-css) {
    display: none !important;
}

body.mc-fullscreen-active .dialog-node.node-fullscreen-css {
    position: fixed !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    border: 1px solid var(--mc-line) !important;
    box-shadow: none !important;
    transition: none !important;
}

body.mc-fullscreen-active .node-fullscreen-css > .node-messages-wrapper {
    grid-row: 3 !important;
    min-height: 0;
}

body.mc-fullscreen-active .node-fullscreen-css .node-messages.f-msgs {
    height: auto !important;
    max-height: none !important;
}

body.mc-fullscreen-active .node-fullscreen-css > .node-input.f-input {
    grid-row: 4 !important;
    position: static !important;
}

/* Правые язычки чата. Дерево закреплено; заметки в раскрытом виде свободно
   перемещаются, а при сворачивании уходят вправо на той же высоте. */
body.mc-frame .node-navigator-panel,
body.mc-frame .notes-panel {
    box-sizing: border-box;
    left: auto;
    right: 12px;
    width: min(340px, calc(100vw - 72px));
    min-width: 0;
    background: #fff;
    border: 1px solid var(--cv-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .04);
    color: var(--cv-text);
    font-family: var(--cv-font);
    z-index: 1200;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: transform .18s ease;
}

body.mc-frame .node-navigator-panel {
    top: 86px;
    bottom: auto;
    height: min(58vh, 520px);
    max-height: calc(100vh - 252px);
}

body.mc-frame .notes-panel {
    top: clamp(290px, 39vh, 340px);
    bottom: auto;
    height: min(420px, calc(100vh - 410px));
    max-height: calc(100vh - 80px);
    min-height: 0;
    resize: none;
}

body.mc-frame .node-navigator-panel.collapsed,
body.mc-frame .notes-panel.collapsed {
    right: 0;
    width: 340px;
    max-width: 340px;
    height: 150px;
    min-height: 0;
    max-height: 150px;
    transform: translateX(calc(100% - 46px));
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
}

body.mc-frame .node-navigator-panel.collapsed {
    height: 214px;
    max-height: 214px;
}

body.mc-frame .node-navigator-header,
body.mc-frame .notes-header {
    box-sizing: border-box;
    min-height: 48px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cv-line);
    background: #fff;
    color: var(--cv-text);
    border-radius: 12px 12px 0 0;
    font-family: var(--cv-font);
}

body.mc-frame .node-navigator-title,
body.mc-frame .notes-title {
    color: var(--cv-text);
    font: 600 13px/1.3 var(--cv-font);
}

body.mc-frame .node-navigator-toggle,
body.mc-frame .notes-toggle {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--cv-line);
    border-radius: 7px;
    background: #fff;
    color: var(--cv-muted);
    box-shadow: none;
}

body.mc-frame .node-navigator-toggle:hover,
body.mc-frame .notes-toggle:hover {
    background: var(--cv-soft);
    color: var(--cv-text);
    transform: none;
}

body.mc-frame .node-navigator-panel.collapsed .node-navigator-header,
body.mc-frame .notes-panel.collapsed .notes-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
    width: 46px;
    height: 100%;
    padding: 9px 6px;
    border-bottom: none;
    border-right: 1px solid var(--cv-line);
    border-radius: 12px 0 0 12px;
}

body.mc-frame .node-navigator-panel.collapsed .node-navigator-toggle,
body.mc-frame .notes-panel.collapsed .notes-toggle { order: -1; margin: 0; }

body.mc-frame .node-navigator-panel.collapsed .node-navigator-title,
body.mc-frame .notes-panel.collapsed .notes-title {
    flex: 0 0 auto;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
}

body.mc-frame .notes-panel.collapsed .notes-title svg { display: none; }
body.mc-frame .node-navigator-panel.collapsed .node-navigator-content,
body.mc-frame .notes-panel.collapsed .notes-content,
body.mc-frame .notes-panel.collapsed .notes-actions { display: none; }

body.mc-frame .node-navigator-content,
body.mc-frame .notes-content {
    min-height: 0;
    scrollbar-color: #d4d4d2 transparent;
}

@media (max-width: 700px) {
    body.mc-frame .node-navigator-panel,
    body.mc-frame .notes-panel { width: min(340px, calc(100vw - 60px)); }
    body.mc-frame .node-navigator-panel { top: 72px; }
    body.mc-frame .node-navigator-panel.collapsed,
    body.mc-frame .notes-panel.collapsed { width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
    body.mc-frame .node-navigator-panel,
    body.mc-frame .notes-panel { transition: none; }
}

/* Общий визуальный язык окон чата. Правила привязаны к mc-frame, чтобы не
   менять отдельные студии и личный кабинет. Стили API/руководства создаются
   JS после загрузки CSS, поэтому здесь селекторы с ID. */
body.mc-frame :is(.modal-overlay, .mc-modal-overlay, .spotlight-overlay, .chart-modal-overlay,
                  #apiSettingsModal, #userManualModal) {
    background: rgba(31, 31, 31, .30);
    backdrop-filter: blur(2px);
}

body.mc-frame :is(.modal, .modal-compact, .modal-container, .mc-modal, .spotlight-modal,
                  .chart-modal, .chart-options-dialog, .file-content-modal-container),
body.mc-frame #apiSettingsModal .api-settings-modal-content,
body.mc-frame #userManualModal .manual-modal-content {
    box-sizing: border-box;
    max-height: calc(100vh - 32px);
    border: 1px solid var(--cv-line);
    border-radius: 12px;
    background: #fff;
    color: var(--cv-text);
    font-family: var(--cv-font);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .04);
}

body.mc-frame #apiSettingsModal .api-settings-modal-content,
body.mc-frame #userManualModal .manual-modal-content {
    width: min(1080px, calc(100vw - 32px));
    height: min(780px, calc(100vh - 32px));
}

body.mc-frame #apiSettingsModal .api-settings-modal-content { width: min(860px, calc(100vw - 32px)); }

body.mc-frame :is(.modal-header, .mc-modal-header, .file-content-modal-header),
body.mc-frame #apiSettingsModal .api-settings-header,
body.mc-frame #userManualModal .manual-header {
    border-bottom: 1px solid var(--cv-line);
    background: #fff;
    color: var(--cv-text);
    font-family: var(--cv-font);
}

body.mc-frame :is(.modal-header, .mc-modal-header) :is(h1, h2, h3),
body.mc-frame #apiSettingsModal .api-settings-header h1,
body.mc-frame #userManualModal .manual-header h1 {
    color: var(--cv-text);
    font-family: var(--cv-font);
    font-weight: 600;
}

body.mc-frame #apiSettingsModal :is(.api-settings-tabs, .email-form-header),
body.mc-frame #userManualModal :is(.manual-toolbar, .manual-nav, .manual-nav-tabs) {
    background: var(--cv-soft);
    border-color: var(--cv-line);
}

body.mc-frame #apiSettingsModal .api-settings-tab,
body.mc-frame #userManualModal :is(.manual-tool, .manual-nav-tab) {
    border-radius: 7px;
    color: var(--cv-muted);
    font-family: var(--cv-font);
    box-shadow: none;
}

body.mc-frame #apiSettingsModal .api-settings-tab.active,
body.mc-frame #userManualModal :is(.manual-nav-tab.active, .manual-tool.active) {
    border-color: var(--cv-line);
    background: #fff;
    color: var(--cv-text);
    box-shadow: none;
}

body.mc-frame #apiSettingsModal .api-settings-tab:hover:not(.active),
body.mc-frame #userManualModal :is(.manual-tool:hover:not(.disabled), .manual-nav-tab:hover:not(.active)) {
    border-color: var(--cv-line);
    background: #fff;
    color: var(--cv-text);
    box-shadow: none;
}

body.mc-frame #apiSettingsModal :is(.api-settings-close-btn, .feature-icon),
body.mc-frame #userManualModal :is(.manual-close-btn, .manual-section a) {
    color: var(--cv-muted);
}

body.mc-frame #apiSettingsModal :is(input, textarea, select):focus,
body.mc-frame #userManualModal :is(input, textarea, select):focus,
body.mc-frame .modal-overlay :is(input, textarea, select):focus {
    border-color: var(--cv-muted);
    outline: 2px solid rgba(111, 111, 111, .20);
    outline-offset: 1px;
    box-shadow: none;
}

body.mc-frame :is(.modal, .modal-compact, .modal-container, .mc-modal, .spotlight-modal) :is(button, input, textarea, select) {
    font-family: var(--cv-font);
}

@media (max-width: 700px) {
    body.mc-frame #apiSettingsModal .api-settings-modal-content,
    body.mc-frame #userManualModal .manual-modal-content {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
    }
}

/* Правая нижняя зона принадлежит масштабу канваса. Свёрнутые студии и
   временный индикатор сохранения стоят выше неё даже при большом z-index. */
body.mc-frame :is(.img-pill, .orch-minimized-pill, .orch-ab-minimized-pill,
                  .dw-minimized-pill, .wtv-minimized-pill, .save-indicator.show) {
    bottom: 76px !important;
}

/* ================= Содержимое узла (проверка 30.09) =================
   Одни правила для любого ответа — от какой бы модели и режима он ни пришёл. */
body.mc-layout-active .f-msgs .message-content.b .ai-quote {
    display: block;
    margin: 4px 0;
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--cv-line, #e6e6e6);
    color: var(--cv-muted, #6f6f6f);
}
body.mc-layout-active .f-msgs .message-content.b .ai-li-2 { padding-left: 18px; }
body.mc-layout-active .f-msgs .message-content.b img.ai-md-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 6px 0;
    border-radius: 7px;
}
/* Ячейки таблиц не рвут слова посреди («значен/ие-200»): широкая таблица
   прокручивается в своём блоке, ей не нужен перенос «где угодно». */
body.mc-layout-active .f-msgs .message-content.b table th,
body.mc-layout-active .f-msgs .message-content.b table td {
    overflow-wrap: normal;
    word-break: normal;
}
/* Значок «#Т1/#Г1» и переключатель «Обрабатывать» получают свою строку
   и больше не лежат поверх заголовков таблицы и графика. */
body.mc-layout-active .f-msgs .table-wrapper-with-btn,
body.mc-layout-active .f-msgs .inline-chart-container {
    position: relative;
    padding-top: 26px;
}

/* Ответ любой модели в узле — один шрифт и один цвет с остальным канвасом.
   Старый блок «UNIFIED MODEL-RESPONSE TYPOGRAPHY» красил ответы в бирюзовый
   #13343B и ставил FK Grotesk — в монохромном канвасе (T6.1) ответ выглядел
   чужим. Размеры, интервалы и иерархия заголовков остаются из того блока. */
body.mc-layout-active .dialog-node .f-msgs .message.assistant .message-content,
body.mc-layout-active .dialog-node .f-msgs .message.assistant .message-content :is(p, li, strong, em, td, th, span:not(.ai-quote)),
body.mc-layout-active .dialog-node .f-msgs .message.assistant .message-content :is(.ai-heading, h1, h2, h3, h4, h5, h6) {
    font-family: var(--mc-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    color: var(--mc-ink, #1f1f1f);
}

body.mc-layout-active .f-msgs .message-content.b p:empty { display: none; }

/* Гант из ответа — в монохроме канваса, как график и таблица рядом. */
body.mc-layout-active .f-msgs .inline-gantt-container .inline-gantt-header h4 {
    color: var(--mc-ink, #1f1f1f) !important;
    font: 500 14px/1.3 var(--mc-font, system-ui, sans-serif) !important;
}
body.mc-layout-active .f-msgs .inline-gantt-container .inline-gantt-header .chart-btn {
    color: var(--mc-ink, #1f1f1f) !important;
    border: 1px solid var(--cv-line, #e6e6e6) !important;
    border-radius: 7px !important;
    background: #fff !important;
    font: 13px var(--mc-font, system-ui, sans-serif) !important;
}

/* Картинка в ответе (владелец 30.09): без рамок, шапки модели и подписи
   промпта; под ней только «Скачать · Заново · Увеличить» словами-ссылками. */
body.mc-layout-active .f-msgs .generated-image-container {
    margin: 4px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    max-width: 100% !important;
    overflow: visible !important;
}
body.mc-layout-active .f-msgs .generated-image-container .generated-image-header,
body.mc-layout-active .f-msgs .generated-image-container .generated-image-prompt,
body.mc-layout-active .f-msgs .generated-image-container > .artifact-id-badge {
    display: none !important;
}
body.mc-layout-active .f-msgs .generated-image-container .generated-image-wrapper {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
body.mc-layout-active .f-msgs .generated-image-container img.generated-image {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}
body.mc-layout-active .f-msgs .generated-image-container .generated-image-controls {
    display: flex !important;
    gap: 16px !important;
    padding: 6px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    justify-content: flex-start !important;
}
body.mc-layout-active .f-msgs .generated-image-container .generated-image-controls button {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--mc-muted, #6f6f6f) !important;
    font: 13px/1.4 var(--mc-font, system-ui, sans-serif) !important;
    cursor: pointer;
}
body.mc-layout-active .f-msgs .generated-image-container .generated-image-controls button:hover,
body.mc-layout-active .f-msgs .generated-image-container .generated-image-controls button:focus-visible {
    color: var(--mc-ink, #1f1f1f) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: 0;
}

/* ================= «Во весь экран» — удобно читать и работать (30.09) =====
   Узел по-прежнему занимает весь экран, но текст живёт в колонке для
   чтения (~760px) по центру: длинная строка перестаёт тянуться на всю
   ширину монитора. Шапка и поле ввода стоят по той же колонке. Картинки не
   растягиваются больше своей ширины и высоты экрана; широкие таблицы и
   код прокручиваются в пределах колонки. */
body.mc-fullscreen-active .dialog-node.node-fullscreen-css {
    --mc-read: 760px;
    --mc-read-pad: max(28px, calc((100% - var(--mc-read)) / 2));
}
body.mc-fullscreen-active .node-fullscreen-css > .f-head,
body.mc-fullscreen-active .node-fullscreen-css > .f-ctx {
    padding-left: var(--mc-read-pad) !important;
    padding-right: var(--mc-read-pad) !important;
}
body.mc-fullscreen-active .node-fullscreen-css .node-messages.f-msgs {
    padding: 28px var(--mc-read-pad) 36px !important;
    scrollbar-gutter: stable;
}
body.mc-fullscreen-active.mc-layout-active .dialog-node.node-fullscreen-css .f-msgs .message.m .message-content.b,
body.mc-fullscreen-active.mc-layout-active .dialog-node.node-fullscreen-css .f-msgs .message.m .message-content.b :is(p, li, td, th, strong, em) {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
}
body.mc-fullscreen-active .node-fullscreen-css .f-msgs .message-content.b p { margin: 0 0 12px; }
body.mc-fullscreen-active .node-fullscreen-css .f-msgs > .message.m { margin-bottom: 22px; }
body.mc-fullscreen-active .node-fullscreen-css > .node-input.f-input {
    padding-left: var(--mc-read-pad) !important;
    padding-right: var(--mc-read-pad) !important;
    padding-bottom: 20px !important;
}
body.mc-fullscreen-active.mc-layout-active .dialog-node.node-fullscreen-css .f-msgs img.generated-image,
body.mc-fullscreen-active.mc-layout-active .dialog-node.node-fullscreen-css .f-msgs img.ai-md-image {
    width: auto !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    margin: 0;
}
body.mc-fullscreen-active .node-fullscreen-css .f-msgs .generated-image-controls {
    justify-content: flex-start !important;
}

/* Обёртка картинки — flex: без этого она растягивала картинку по ширине колонки. */
body.mc-layout-active .f-msgs .generated-image-container img.generated-image { align-self: flex-start; }

/* Сообщения ленты не сжимаются flex-колонкой (см. turn-timeline.css, 30.09). */
body.mc-layout-active .f-msgs > .message { flex-shrink: 0; }

/* ================= Режим чата (30.09) =================
   Страница чата — потомок сцены, а у сцены transform камеры: position:fixed
   считался от сцены, и страница съезжала при сдвиге холста, а рельс, угол,
   зум и правые панели ложились поверх (закрывая кнопку выхода). В режиме
   чата снимаем transform сцены и отводим странице область холста: слева
   рельс, сверху строка пути и угол. Текст — колонкой для чтения. */
body.chat-mode-active .canvas-scene {
    transform: none !important;
    will-change: auto !important;
}
body.chat-mode-active .chat-page {
    border-top: 1px solid var(--mc-line, #e6e6e6);
    font-family: var(--mc-font, system-ui, sans-serif);
    color: var(--mc-ink, #1f1f1f);
}
body.chat-mode-active #zoom,
body.chat-mode-active .node-navigator-panel,
body.chat-mode-active .notes-panel,
body.chat-mode-active #edges {
    display: none !important;
}
body.chat-mode-active .chat-page-bar-inner,
body.chat-mode-active .chat-page-content,
body.chat-mode-active .chat-page-input-inner {
    max-width: 808px;
}
body.chat-mode-active .chat-page .f-msgs .message-content.b,
body.chat-mode-active .chat-page .f-msgs .message-content.b :is(p, li, td, th) {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
}

/* Строка кнопок над таблицей (30.09): номер «#Т1» слева; «Обрабатывать»,
   «×2» и меню — справа, в одну линию по центру, одной высоты 24px. */
body.mc-layout-active .f-msgs .table-wrapper-with-btn { padding-top: 32px; }
body.mc-layout-active .f-msgs .table-wrapper-with-btn > .artifact-id-badge {
    top: 4px !important; left: 0 !important; height: 24px; box-sizing: border-box;
    display: inline-flex; align-items: center; line-height: 1;
}
body.mc-layout-active .f-msgs .table-wrapper-with-btn.tbl-has-toggle > .tbl-focus-toggle {
    top: 4px !important; right: 30px !important; height: 24px; box-sizing: border-box; padding: 0 8px 0 5px;
}
body.mc-layout-active .f-msgs .table-wrapper-with-btn > .table-menu-btn {
    top: 4px !important; right: 0 !important; width: 24px; height: 24px; border-radius: 7px;
}
body.mc-layout-active .f-msgs .table-wrapper-with-btn > .tbl-wide-btn { display: none; }
body.mc-fullscreen-active .node-fullscreen-css .f-msgs .table-wrapper-with-btn > .tbl-wide-btn {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 4px; right: 146px; z-index: 4; height: 24px; min-width: 32px; padding: 0 6px;
    border: 1px solid var(--cv-line, #e6e6e6); border-radius: 7px; background: #fff;
    color: var(--mc-ink, #1f1f1f); font: 500 12px/1 var(--mc-font, system-ui, sans-serif); cursor: pointer;
}
body.mc-fullscreen-active .node-fullscreen-css .f-msgs .tbl-wide-btn[aria-pressed="true"] { background: var(--mc-soft, #f3f3f3); }
/* ×2: таблица вдвое шире колонки чтения (не шире экрана), по центру колонки. */
body.mc-fullscreen-active .node-fullscreen-css .f-msgs .tbl-wide {
    --tbl-wide: min(200%, calc(100vw - 160px));
    width: var(--tbl-wide) !important; max-width: none !important;
    margin-left: calc((100% - var(--tbl-wide)) / 2) !important;
    position: relative;
}
/* Во весь экран: меню · ×2 · «Обрабатывать» — справа налево, без наложения. */
body.mc-fullscreen-active .node-fullscreen-css .f-msgs .table-wrapper-with-btn > .tbl-wide-btn { right: 30px !important; }
body.mc-fullscreen-active .node-fullscreen-css .f-msgs .table-wrapper-with-btn.tbl-has-toggle > .tbl-focus-toggle { right: 68px !important; }

/* Ящик: «⋯» у строки диалога — отступ 12px от правого края выделения (владелец 30.09). */
#drawer .dr-list .canvas-item .dr-item-menu { right: 12px; }
#drawer .dr-list .canvas-item { padding-right: 42px; }

/* 30.09: меню таблицы не у самой рамки — отступ 8px справа; остальные
   кнопки сдвинуты на столько же. «×2» есть и в режиме чата. */
body.mc-layout-active .f-msgs .table-wrapper-with-btn > .table-menu-btn { right: 8px !important; }
body.mc-layout-active .f-msgs .table-wrapper-with-btn.tbl-has-toggle > .tbl-focus-toggle { right: 38px !important; }
body.mc-layout-active .f-msgs .table-wrapper-with-btn > .artifact-id-badge { left: 8px !important; }
body.mc-fullscreen-active .node-fullscreen-css .f-msgs .table-wrapper-with-btn > .tbl-wide-btn,
body.chat-mode-active .chat-page .table-wrapper-with-btn > .tbl-wide-btn { right: 38px !important; }
body.mc-fullscreen-active .node-fullscreen-css .f-msgs .table-wrapper-with-btn.tbl-has-toggle > .tbl-focus-toggle,
body.chat-mode-active .chat-page .table-wrapper-with-btn.tbl-has-toggle > .tbl-focus-toggle { right: 76px !important; }
body.chat-mode-active .chat-page .table-wrapper-with-btn > .tbl-wide-btn {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 4px; z-index: 4; height: 24px; min-width: 32px; padding: 0 6px;
    border: 1px solid var(--cv-line, #e6e6e6); border-radius: 7px; background: #fff;
    color: var(--mc-ink, #1f1f1f); font: 500 12px/1 var(--mc-font, system-ui, sans-serif); cursor: pointer;
}
body.chat-mode-active .chat-page .tbl-wide-btn[aria-pressed="true"] { background: var(--mc-soft, #f3f3f3); }
body.chat-mode-active .chat-page .tbl-wide {
    --tbl-wide: min(200%, calc(100vw - 56px - 80px));
    width: var(--tbl-wide) !important; max-width: none !important;
    margin-left: calc((100% - var(--tbl-wide)) / 2) !important;
    position: relative;
}

/* Эскиз Ганта в ответе: план-таблица остаётся в DOM (её читают редактор таблиц,
   #Т, «Обрабатывать», модель), на виду — диаграмма как в концепте. Клик — модалка. */
.table-wrapper-with-btn.tbl-as-gantt > table,
.table-wrapper-with-btn.tbl-as-gantt > .table-collapse-btn,
.table-wrapper-with-btn.tbl-as-gantt > .tbl-wide-btn,
.inline-gantt-container.has-glance > canvas,
.inline-gantt-container.has-glance .inline-gantt-header .chart-btn {
    display: none !important;
}
/* Вид — точно как в концепте: без рамки, тени, полосы кнопок; натуральный
   размер 480px (подписи 11.5px), а не растяжка на ширину узла. Кнопки таблицы
   (#Т, «Обрабатывать», меню) — поверх правого верха, только при наведении. */
.ai-table-container:has(.tbl-as-gantt) {
    margin: 4px 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
    animation: none !important;
}
.table-wrapper-with-btn.tbl-as-gantt,
body.mc-layout-active .f-msgs .table-wrapper-with-btn.tbl-as-gantt {
    padding-top: 0 !important;
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.table-wrapper-with-btn.tbl-as-gantt > :is(.artifact-id-badge, .tbl-focus-toggle, .table-menu-btn) {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity .12s;
}
.table-wrapper-with-btn.tbl-as-gantt:is(:hover, :focus-within) > :is(.artifact-id-badge, .tbl-focus-toggle, .table-menu-btn) {
    opacity: 1 !important;
    pointer-events: auto;
}
.table-wrapper-with-btn.tbl-as-gantt > .artifact-id-badge { top: -2px !important; left: auto !important; right: 136px !important; }
.table-wrapper-with-btn.tbl-as-gantt > .tbl-focus-toggle { top: -2px !important; right: 30px !important; }
.table-wrapper-with-btn.tbl-as-gantt > .table-menu-btn { top: -2px !important; right: 0 !important; }
.gantt-glance {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
}
.gantt-glance:focus-visible { box-shadow: 0 0 0 2px var(--mc-ink, #1f1f1f); }
.gantt-glance .gantt-glance-svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--mc-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}
.inline-gantt-container.has-glance { margin: 4px 0 8px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
/* «Обрабатывать» в шапке модалки Ганта — тот же вид, что у таблицы, в строке шапки */
#ganttChartModal .gantt-focus-toggle { position: static; margin: 0 auto 0 14px; opacity: 1; }
/* Правка своей реплики (владелец 01.10): без рамки и обводки, лёгкая — как поле
   ввода внизу (фон --mc-soft, радиус 18), шириной во всю ленту, а не по пузырю.
   Кнопки — тихие слова «Отмена» / «Отправить» вместо кружков. */
body.mc-layout-active .f-msgs > .message:has(> .message-edit-input),
body.chat-mode-active .chat-page .message:has(> .message-edit-input) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
}
body.mc-layout-active .message .message-edit-input,
body.chat-mode-active .message .message-edit-input {
    width: 100% !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--mc-soft, #f3f3f3) !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--mc-ink, #1f1f1f) !important;
    font: 14.5px/1.6 var(--mc-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif) !important;
    resize: none !important;
}
body.mc-layout-active .message .message-edit-input:focus,
body.chat-mode-active .message .message-edit-input:focus {
    border: 0 !important;
    box-shadow: none !important;
}
body.mc-layout-active .message .message-edit-input::selection { background: rgba(31, 31, 31, .12); }
body.mc-layout-active .message > .edit-controls,
body.chat-mode-active .message > .edit-controls {
    justify-content: flex-end !important;
    gap: 14px !important;
    margin-top: 6px !important;
    padding-right: 6px;
}
body.mc-layout-active .message > .edit-controls :is(.edit-cancel-btn, .edit-save-btn),
body.chat-mode-active .message > .edit-controls :is(.edit-cancel-btn, .edit-save-btn) {
    width: auto !important;
    height: auto !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    font: 12.5px/1.3 var(--mc-font, system-ui, sans-serif) !important;
    color: var(--mc-muted, #6f6f6f) !important;
    cursor: pointer;
}
body.mc-layout-active .message > .edit-controls .edit-cancel-btn::after,
body.chat-mode-active .message > .edit-controls .edit-cancel-btn::after { content: "Отмена"; }
body.mc-layout-active .message > .edit-controls .edit-save-btn::after,
body.chat-mode-active .message > .edit-controls .edit-save-btn::after { content: "Отправить"; color: var(--mc-ink, #1f1f1f); font-weight: 500; }
body.mc-layout-active .message > .edit-controls :is(.edit-cancel-btn, .edit-save-btn):hover::after,
body.chat-mode-active .message > .edit-controls :is(.edit-cancel-btn, .edit-save-btn):hover::after { text-decoration: underline; text-underline-offset: 2px; }
body.mc-layout-active .message > .edit-controls :is(.edit-cancel-btn, .edit-save-btn)::before,
body.chat-mode-active .message > .edit-controls :is(.edit-cancel-btn, .edit-save-btn)::before { content: none !important; display: none !important; }
body.mc-layout-active .message > .edit-controls :is(.edit-cancel-btn, .edit-save-btn) > *,
body.chat-mode-active .message > .edit-controls :is(.edit-cancel-btn, .edit-save-btn) > * { display: none !important; }

/* ================= «Настройки диалога» в текущем стиле (01.10) =================
   Окно #modelConfigModal было в прежней палитре: синие акценты, холодные серые,
   заголовки секций капсом. Здесь — тот же язык, что у «Вида канваса» и меню
   узла: нейтральные --cv-*, тёмная основная кнопка, мягкие серые поля,
   радиусы кнопок ≤ 7px. Разметка не меняется. */
body.mc-frame #modelConfigModal .mc-modal {
    max-width: 880px;
    border-radius: 12px;
    font: 13px/1.45 var(--cv-font);
    color: var(--cv-text);
}
body.mc-frame #modelConfigModal .mc-modal-header { padding: 14px 16px 12px; border-bottom: 1px solid var(--cv-line); }
body.mc-frame #modelConfigModal .mc-modal-header-icon { display: none; }
body.mc-frame #modelConfigModal .mc-modal-title { font: 500 15px/1.35 var(--cv-font); color: var(--cv-text); letter-spacing: 0; }
body.mc-frame #modelConfigModal .mc-modal-icon-btn { width: 28px; height: 28px; padding: 0; border-radius: 7px; color: var(--cv-muted); }
body.mc-frame #modelConfigModal .mc-modal-icon-btn:hover { background: var(--cv-soft); color: var(--cv-text); }
body.mc-frame #modelConfigModal .mc-modal-body { padding: 4px 16px 16px; }
body.mc-frame #modelConfigModal .mc-modal-body::-webkit-scrollbar-thumb { background: var(--cv-soft2); }

body.mc-frame #modelConfigModal .mc-section { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--cv-line); }
body.mc-frame #modelConfigModal .mc-section:last-child { border-bottom: 0; padding-bottom: 0; }
body.mc-frame #modelConfigModal .mc-section-header { margin-bottom: 8px; gap: 0; }
body.mc-frame #modelConfigModal .mc-section-header > svg { display: none; }
body.mc-frame #modelConfigModal .mc-section-label {
    font: 500 13px/1.35 var(--cv-font); color: var(--cv-text);
    text-transform: none; letter-spacing: 0;
}
body.mc-frame #modelConfigModal .mc-form-label { font: 12px/1.35 var(--cv-font); color: var(--cv-muted); margin-bottom: 6px; }
body.mc-frame #modelConfigModal .mc-form-note,
body.mc-frame #modelConfigModal .mc-form-hint,
body.mc-frame #modelConfigModal .mc-temp-scale,
body.mc-frame #modelConfigModal .mc-upload-formats { color: var(--cv-faint); font-size: 12px; }

/* Поля и карточки — белые с тонким контуром (15.10): серая заливка с серым
   текстом читалась бледно. Контур чуть темнее --cv-line, иначе на белом
   окне поле теряется. */
body.mc-frame #modelConfigModal :is(.mc-form-textarea, .mc-form-input) {
    border: 1px solid #dcdcdc; border-radius: 7px;
    background: #fff; color: var(--cv-text);
    font: 13px/1.5 var(--cv-font);
    transition: border-color .15s, box-shadow .15s;
}
body.mc-frame #modelConfigModal :is(.mc-form-textarea, .mc-form-input):hover { border-color: #c4c4c4; }
body.mc-frame #modelConfigModal :is(.mc-form-textarea, .mc-form-input):focus {
    outline: none; border-color: var(--cv-faint); background: #fff;
    box-shadow: 0 0 0 3px rgba(31, 31, 31, .06);
}
body.mc-frame #modelConfigModal .mc-form-textarea::placeholder { color: #a8a8a8; }

body.mc-frame #modelConfigModal .mc-control-card { padding: 12px; border: 1px solid var(--cv-line); border-radius: 7px; background: #fff; }
body.mc-frame #modelConfigModal .mc-slider-value { color: var(--cv-text); font: 500 13px/1.3 var(--cv-font); }
body.mc-frame #modelConfigModal .mc-form-range { height: 4px; background: var(--cv-soft2); }
body.mc-frame #modelConfigModal .mc-form-range::-webkit-slider-thumb { width: 14px; height: 14px; background: var(--cv-ink); box-shadow: 0 0 0 3px #fff; }
body.mc-frame #modelConfigModal .mc-form-range::-webkit-slider-thumb:hover { background: var(--cv-ink); transform: none; }
body.mc-frame #modelConfigModal .mc-form-range::-moz-range-thumb { width: 14px; height: 14px; background: var(--cv-ink); box-shadow: 0 0 0 3px #fff; }

body.mc-frame #modelConfigModal .prompt-templates-title { color: var(--cv-muted); font-size: 12px; font-weight: 400; }
body.mc-frame #modelConfigModal .prompt-template-item {
    padding: 5px 9px; border: 0; border-radius: 7px;
    background: var(--cv-soft); color: var(--cv-text); font: 12px/1.25 var(--cv-font);
}
body.mc-frame #modelConfigModal .prompt-template-item:hover { background: var(--cv-soft2); color: var(--cv-text); }

body.mc-frame #modelConfigModal .mc-file-upload {
    border: 1px dashed var(--cv-soft2); border-radius: 7px; background: #fff; padding: 14px 12px;
}
body.mc-frame #modelConfigModal .mc-file-upload > svg { stroke: var(--cv-faint); }
body.mc-frame #modelConfigModal .mc-file-upload:hover,
body.mc-frame #modelConfigModal .mc-file-upload.dragover { border-color: var(--cv-muted); background: var(--cv-soft); }
body.mc-frame #modelConfigModal .mc-upload-text { color: var(--cv-muted); font-size: 13px; }
body.mc-frame #modelConfigModal .mc-upload-text strong { color: var(--cv-text); font-weight: 500; }
body.mc-frame #modelConfigModal .file-item { border: 0; border-radius: 7px; background: var(--cv-soft); }
body.mc-frame #modelConfigModal .file-name { color: var(--cv-text); font-weight: 400; }
body.mc-frame #modelConfigModal .file-size { color: var(--cv-faint); }
body.mc-frame #modelConfigModal .file-remove { color: var(--cv-muted); border-radius: 7px; }
body.mc-frame #modelConfigModal .file-remove:hover { background: var(--cv-soft2); color: var(--cv-danger); }

body.mc-frame #modelConfigModal .mc-modal-footer { padding: 12px 16px; border-top: 1px solid var(--cv-line); }
body.mc-frame #modelConfigModal .mc-btn { min-height: 32px; padding: 6px 14px; border-radius: 7px; font: 500 13px/1.25 var(--cv-font); }
body.mc-frame #modelConfigModal .mc-btn > svg { display: none; }
body.mc-frame #modelConfigModal .mc-btn-secondary { border: 0; background: var(--cv-soft); color: var(--cv-text); }
body.mc-frame #modelConfigModal .mc-btn-secondary:hover { background: var(--cv-soft2); border: 0; }
body.mc-frame #modelConfigModal .mc-btn-primary { border: 0; background: var(--cv-ink); color: #fff; }
body.mc-frame #modelConfigModal .mc-btn-primary:hover { background: #000; }
body.mc-frame #modelConfigModal .mc-btn:focus-visible { outline: 2px solid var(--cv-ink); outline-offset: 2px; }

/* ================= «Добавить заметку» в текущем стиле (01.10) ================= */
body.mc-frame #manualNoteModal .modal-compact {
    width: min(560px, calc(100vw - 32px)); padding: 0; overflow: hidden;
    font: 13px/1.45 var(--cv-font); color: var(--cv-text);
}
body.mc-frame #manualNoteModal .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 14px 16px 12px; border-bottom: 1px solid var(--cv-line); background: #fff;
}
body.mc-frame #manualNoteModal .modal-title { margin: 0; font: 500 15px/1.35 var(--cv-font); color: var(--cv-text); }
body.mc-frame #manualNoteModal .close-btn {
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
    background: transparent; color: var(--cv-muted); font: 22px/1 var(--cv-font); cursor: pointer;
}
body.mc-frame #manualNoteModal .close-btn:hover { background: var(--cv-soft); color: var(--cv-text); }
body.mc-frame #manualNoteModal .modal-content { padding: 14px 16px; }
body.mc-frame #manualNoteModal .form-group { margin: 0; }
body.mc-frame #manualNoteModal .form-label { display: block; margin-bottom: 6px; font: 12px/1.35 var(--cv-font); color: var(--cv-muted); }
body.mc-frame #manualNoteModal .form-textarea {
    box-sizing: border-box; width: 100%; min-height: 140px; padding: 9px 11px;
    border: 1px solid transparent; border-radius: 7px; background: var(--cv-soft);
    color: var(--cv-text); font: 13px/1.5 var(--cv-font); resize: vertical;
}
body.mc-frame #manualNoteModal .form-textarea:hover { background: var(--cv-soft2); }
body.mc-frame #manualNoteModal .form-textarea:focus {
    outline: none; border-color: var(--cv-line); background: #fff; box-shadow: 0 0 0 2px rgba(31, 31, 31, .08);
}
body.mc-frame #manualNoteModal .form-textarea::placeholder { color: var(--cv-faint); }
body.mc-frame #manualNoteModal .modal-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin: 0;
    padding: 12px 16px; border-top: 1px solid var(--cv-line); background: #fff;
}
body.mc-frame #manualNoteModal .modal-actions .btn {
    min-height: 32px; padding: 6px 14px; border: 0; border-radius: 7px;
    font: 500 13px/1.25 var(--cv-font); box-shadow: none; transform: none;
}
body.mc-frame #manualNoteModal .modal-actions .btn-secondary { background: var(--cv-soft); color: var(--cv-text); }
body.mc-frame #manualNoteModal .modal-actions .btn-secondary:hover { background: var(--cv-soft2); }
body.mc-frame #manualNoteModal .modal-actions .btn-primary { background: var(--cv-ink); color: #fff; }
body.mc-frame #manualNoteModal .modal-actions .btn-primary:hover { background: #000; }

/* ================= Загрузка страницы без «въезда» узлов (01.10) =================
   До первой раскладки узлы скрыты и без переходов; класс снимает chat-layout.js
   (или запасной таймер в app.html). */
html.mc-booting #nodesContainer,
html.mc-booting .chat-edges,
html.mc-booting #connectionsSvg { visibility: hidden; }
html.mc-booting :is(.dialog-node, .canvas-scene, .chat-layout-overflow) { transition: none !important; }

/* ================= Заметки: ресайз и текущий стиль (01.10) =================
   Ресайз был выключен `resize: none` в правилах язычков — вернули для
   раскрытой панели. Свёрнутый язычок держит свой размер через !important:
   ресайз пишет width/height в style, и без этого язычок вырастал бы до
   растянутой панели. Содержимое было в прежней палитре (синяя шапка —
   белые полупрозрачные кнопки, на белом их не видно). */
body.mc-frame .notes-panel:not(.collapsed) {
    resize: both;
    overflow: hidden;
    min-width: 280px;
    min-height: 220px;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 24px);
}
body.mc-frame .notes-panel.collapsed {
    width: 340px !important;
    height: 150px !important;
    resize: none;
}
body.mc-frame .notes-panel::-webkit-resizer {
    background: linear-gradient(135deg, transparent 0 55%, var(--cv-faint) 55% 62%, transparent 62% 72%, var(--cv-faint) 72% 79%, transparent 79%);
    border-radius: 0 0 12px 0;
}

body.mc-frame .notes-actions { gap: 2px; }
body.mc-frame .notes-action-btn,
body.mc-frame .notes-filter-wrapper > button {
    width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 7px;
    background: transparent; color: var(--cv-muted);
    box-shadow: none;
}
body.mc-frame .notes-action-btn:hover { background: var(--cv-soft); color: var(--cv-text); transform: none; }
body.mc-frame .notes-action-btn svg { fill: currentColor; }
body.mc-frame #notesFilterBtn {
    width: 28px; height: 28px; border: 0; border-radius: 7px;
    background: transparent; color: var(--cv-muted);
}
body.mc-frame #notesFilterBtn:hover { background: var(--cv-soft); color: var(--cv-text); transform: none; }
body.mc-frame #notesFilterBtn.active { background: var(--cv-soft2); color: var(--cv-text); border: 0; }
body.mc-frame #notesFilterBtn.active::after { background: var(--cv-ink); border-color: #fff; width: 6px; height: 6px; }
body.mc-frame #notesFilterDropdown { border-color: var(--cv-line); border-radius: 12px; }

body.mc-frame .notes-filter-dropdown {
    border: 1px solid var(--cv-line); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .04);
    font-family: var(--cv-font);
}
body.mc-frame .notes-filter-header { color: var(--cv-muted); font: 12px/1.35 var(--cv-font); }
body.mc-frame .notes-filter-clear {
    border: 0; border-radius: 7px; background: var(--cv-soft); color: var(--cv-text);
}
body.mc-frame .notes-filter-clear:hover { background: var(--cv-soft2); }
body.mc-frame .notes-filter-item { border-radius: 7px; }
body.mc-frame .notes-filter-item:hover { background: var(--cv-soft); }
body.mc-frame .notes-filter-item input[type="checkbox"] { accent-color: var(--cv-ink); }
body.mc-frame .notes-filter-item-title { color: var(--cv-text); }
body.mc-frame .notes-filter-item-count,
body.mc-frame .notes-filter-empty { color: var(--cv-faint); }
body.mc-frame .notes-filter-actions { background: #fff; border-top: 1px solid var(--cv-line); }
body.mc-frame :is(.notes-filter-select-all, .notes-filter-export) {
    border: 0; border-radius: 7px; background: var(--cv-soft); color: var(--cv-text);
}
body.mc-frame :is(.notes-filter-select-all, .notes-filter-export):hover { background: var(--cv-soft2); }

body.mc-frame .notes-container { padding: 10px 12px; }
body.mc-frame .notes-empty { color: var(--cv-faint); font-family: var(--cv-font); }
body.mc-frame .notes-empty-icon { color: var(--cv-soft2); }
body.mc-frame .notes-empty-text { color: var(--cv-muted); font: 500 14px/1.35 var(--cv-font); }
body.mc-frame .notes-empty-hint { color: var(--cv-faint); font-size: 12px; }

body.mc-frame .note-item {
    border: 0; border-radius: 7px; background: var(--cv-soft);
    box-shadow: none;
}
body.mc-frame .note-item:hover { background: var(--cv-soft2); box-shadow: none; }
body.mc-frame .note-info { color: var(--cv-muted); font: 12px/1.35 var(--cv-font); }
body.mc-frame :is(.note-collapse-icon, .note-date, .note-source-own) { color: var(--cv-faint); }
body.mc-frame .note-header:hover .note-collapse-icon { color: var(--cv-text); }
body.mc-frame .note-source { color: var(--cv-text); text-decoration: underline; text-decoration-color: var(--cv-soft2); text-underline-offset: 2px; }
body.mc-frame .note-source:hover { color: var(--cv-ink); text-decoration-color: currentColor; }
body.mc-frame .note-edited { color: var(--cv-faint); }
body.mc-frame .note-action-btn { border-radius: 7px; color: var(--cv-muted); }
body.mc-frame .note-action-btn:hover { background: #fff; color: var(--cv-text); }
body.mc-frame .note-preview { color: var(--cv-muted); font: 13px/1.45 var(--cv-font); }
body.mc-frame .note-text { color: var(--cv-text); font: 13px/1.5 var(--cv-font); }
body.mc-frame .note-text :is(strong, h1, h2, h3, h4, h5, h6) { color: var(--cv-text); }
body.mc-frame .note-text em { color: var(--cv-muted); }
body.mc-frame .note-text blockquote { border-left-color: var(--cv-soft2); color: var(--cv-muted); }
body.mc-frame .note-text code { background: #fff; color: var(--cv-text); }
body.mc-frame .note-text .ai-table { box-shadow: none; border: 1px solid var(--cv-line); }

body.mc-frame :is(.note-edit-content, .note-edit-textarea) {
    border: 1px solid var(--cv-line); border-radius: 7px; background: #fff;
    color: var(--cv-text); box-shadow: 0 0 0 2px rgba(31, 31, 31, .06);
}
body.mc-frame :is(.note-edit-content, .note-edit-textarea):focus { outline: none; box-shadow: 0 0 0 2px rgba(31, 31, 31, .12); }

/* Реквизиты и подписи сторон в договоре (05.10): это текст документа, а не
   таблица-данные — без рамки, тени, заливки шапки и полос; две колонки текста,
   как в бумажном договоре. Распознаёт ArtifactRefs.isSignatureTable, меню, #Т,
   «Обрабатывать» и свёртку такой таблице не вешает table-editor.js. */
.ai-table-container.doc-sign-box {
    margin: 0.5rem 0 1rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
}
.ai-table.doc-sign-table,
.ai-table.doc-sign-table thead,
.ai-table.doc-sign-table tbody tr,
.ai-table.doc-sign-table tbody tr:nth-child(even),
.ai-table.doc-sign-table tbody tr:hover {
    background: transparent !important;
    border: 0 !important;
}
.ai-table.doc-sign-table { table-layout: fixed; }
.ai-table.doc-sign-table :is(th, td) {
    border: 0 !important;
    padding: 1px 24px 1px 0 !important;
    min-width: 0 !important;
    position: static !important;
    color: inherit !important;
    font-size: inherit;
    line-height: inherit;
    word-break: normal !important;
    overflow-wrap: anywhere;
    text-align: left !important;
}
.ai-table.doc-sign-table th { padding-bottom: 6px !important; font-weight: 600; }
/* Узкий экран: у .ai-table там min-width 500px с прокруткой — тексту она не нужна. */
@media (max-width: 768px) {
    .ai-table.doc-sign-table { min-width: 0 !important; }
}

/* ================= ГАНТ — СТИЛЬ ПРИЛОЖЕНИЯ (12.10.2026) =================
   Окно Ганта, окно задачи и «Ресурсы» — в монохроме каркаса (--mc-*):
   белые панели, линии #e6e6e6, кнопки 7px, основная — чёрная, системный
   шрифт, цвет только у сигнала (просрочка, перерасход). Свои классы Ганта
   перекрашены на месте; здесь — общие классы графиков (.chart-btn,
   .chart-select, .ai-link, …), и только внутри окон Ганта: модалки других
   графиков остаются как были. Холст рисует gantt-chart.js теми же цветами
   (GANTT_CONFIG.colors). */
#ganttChartModal,
.gantt-edit-modal-overlay {
    font-family: var(--mc-font);
    color: var(--mc-text);
}
#ganttChartModal {
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: none;
}
/* Окно задачи открыто поверх окна Ганта: второе затемнение — лёгкое */
.gantt-edit-modal-overlay { background: rgba(0, 0, 0, 0.18); }

#ganttChartModal .gantt-modal,
.gantt-edit-modal {
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
}

/* ── Шапка ─────────────────────────────────────────────────────────────── */
#ganttChartModal .chart-modal-header {
    padding: 12px 14px 12px 20px;
    background: var(--mc-surface);
    border-bottom: 1px solid var(--mc-line);
}
#ganttChartModal .chart-modal-header h2 {
    font: 600 16px/1.3 var(--mc-font);
    color: var(--mc-text);
}
#ganttChartModal .chart-header-actions { gap: 6px; }

/* ── Кнопки ────────────────────────────────────────────────────────────── */
#ganttChartModal .chart-btn,
.gantt-edit-modal .chart-btn {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--mc-line);
    border-radius: 7px;
    background: var(--mc-surface);
    color: var(--mc-text);
    font: 500 13px/1 var(--mc-font);
    box-shadow: none;
    transform: none;
}
#ganttChartModal .chart-btn:hover:not(:disabled),
.gantt-edit-modal .chart-btn:hover:not(:disabled) {
    background: var(--mc-soft);
    border-color: var(--mc-line);
    color: var(--mc-text);
}
#ganttChartModal .chart-btn-sm,
.gantt-edit-modal .chart-btn-sm {
    height: 26px;
    padding: 0 9px;
    font-size: 12.5px;
}
#ganttChartModal .chart-btn-primary,
.gantt-edit-modal .chart-btn-primary {
    background: var(--mc-accent);
    border-color: var(--mc-accent);
    color: #fff;
}
#ganttChartModal .chart-btn-primary:hover:not(:disabled),
.gantt-edit-modal .chart-btn-primary:hover:not(:disabled) {
    background: #000;
    border-color: #000;
    color: #fff;
}
#ganttChartModal .chart-btn-secondary {
    background: var(--mc-surface);
    border-color: var(--mc-line);
    color: var(--mc-text);
}
#ganttChartModal .chart-btn svg,
.gantt-edit-modal .chart-btn svg { flex-shrink: 0; }

/* Значки «развернуть» и «закрыть» — без контура, как кнопки шапки приложения */
#ganttChartModal .chart-close-btn,
#ganttChartModal .gantt-maximize-btn,
.gantt-edit-modal .gantt-edit-modal-close {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--mc-muted);
    font-size: 15px;
    transform: none;
}
.gantt-edit-modal .gantt-edit-modal-close { font-size: 22px; }
#ganttChartModal .chart-close-btn:hover,
#ganttChartModal .gantt-maximize-btn:hover,
.gantt-edit-modal .gantt-edit-modal-close:hover {
    border: 0;
    background: var(--mc-soft);
    color: var(--mc-text);
}

/* ── Тулбар ────────────────────────────────────────────────────────────── */
#ganttChartModal .chart-modal-body {
    padding: 0 20px;
    gap: 0;
}
#ganttChartModal .gantt-toolbar {
    padding: 10px 0;
    background: transparent;
    border-bottom: 1px solid var(--mc-line);
    gap: 8px 16px;
}
#ganttChartModal .gantt-toolbar-left,
#ganttChartModal .gantt-toolbar-right { gap: 8px 14px; }
#ganttChartModal .gantt-toolbar-right { gap: 6px; }
#ganttChartModal .gantt-toolbar-left > label:not(.chart-checkbox-label) {
    font-size: 13px;
    color: var(--mc-muted);
}
#ganttChartModal .gantt-zoom-controls,
#ganttChartModal .gantt-toolbar-left > .chart-btn { margin-left: 0 !important; }
#ganttChartModal .gantt-zoom-btn {
    width: 26px;
    padding: 0;
    justify-content: center;
}
#ganttChartModal .chart-checkbox-label {
    gap: 6px;
    font-size: 13px;
    color: var(--mc-text);
}
#ganttChartModal .chart-checkbox-label:hover { color: var(--mc-text); }
#ganttChartModal .chart-checkbox-label input[type="checkbox"],
.gantt-edit-modal input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--mc-accent);
}
#ganttChartModal .chart-select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--mc-line);
    border-radius: 7px;
    background: var(--mc-surface);
    color: var(--mc-text);
    font: 13px var(--mc-font);
    min-width: 96px;
}
#ganttChartModal .chart-select:focus {
    border-color: var(--mc-faint);
    box-shadow: none;
}

/* ── Диаграмма ─────────────────────────────────────────────────────────── */
/* Разделитель колонки задач — тонкая линия с широкой зоной захвата */
#ganttChartModal .gantt-column-resizer {
    background: linear-gradient(90deg, transparent 2.5px, var(--mc-line) 2.5px, var(--mc-line) 3.5px, transparent 3.5px);
}
#ganttChartModal .gantt-column-resizer:hover,
#ganttChartModal .gantt-column-resizer.active {
    background: linear-gradient(90deg, transparent 2px, var(--mc-faint) 2px, var(--mc-faint) 4px, transparent 4px);
}
/* Кнопка фильтра лежит поверх белой шапки колонки задач */
#ganttChartModal .gantt-filter-btn {
    background: transparent;
    color: var(--mc-faint);
}
#ganttChartModal .gantt-filter-btn:hover {
    background: var(--mc-soft);
    color: var(--mc-text);
}
#ganttChartModal .gantt-filter-btn.gantt-filter-on {
    background: var(--mc-accent);
    color: #fff;
}
#ganttChartModal .chart-tooltip {
    background: #1f1f1f;
    border-radius: 7px;
    font: 12px/1.45 var(--mc-font);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

/* ── «Статистика и AI-анализ» ──────────────────────────────────────────── */
#ganttChartModal .gantt-analysis-toggle {
    margin: 0 -20px;
    padding: 8px 20px;
    background: transparent;
    border-top: 1px solid var(--mc-line);
    color: var(--mc-muted);
    font-weight: 400;
}
#ganttChartModal .gantt-analysis-toggle:hover {
    background: var(--mc-soft);
    color: var(--mc-text);
}
#ganttChartModal .gantt-analysis-panel {
    margin: 0 -20px;
    padding: 12px 20px;
    background: var(--mc-surface);
    border-top: 1px solid var(--mc-line);
}
#ganttChartModal .chart-analysis-section {
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: 10px;
}
#ganttChartModal .chart-analysis-section h3 {
    font: 600 13px/1.3 var(--mc-font);
    color: var(--mc-text);
}
#ganttChartModal .gantt-stats-tabs { background: var(--mc-soft); }
#ganttChartModal .gantt-stats-tab.is-active { color: var(--mc-text); }
#ganttChartModal .ai-link {
    padding: 3px 7px;
    border-radius: 6px;
    color: var(--mc-muted);
    font: 12.5px var(--mc-font);
}
#ganttChartModal .ai-link:hover:not(:disabled) {
    background: var(--mc-soft);
    color: var(--mc-text);
}
#ganttChartModal .chart-ai-prompt {
    padding: 8px 10px;
    border: 1px solid var(--mc-line);
    border-radius: 7px;
    color: var(--mc-text);
    font: 13px/1.5 var(--mc-font);
}
#ganttChartModal .chart-ai-prompt:focus {
    border-color: var(--mc-faint);
    box-shadow: none;
}

/* ── Подвал ────────────────────────────────────────────────────────────── */
#ganttChartModal .chart-modal-footer {
    padding: 10px 16px 10px 20px;
    background: var(--mc-surface);
    border-top: 1px solid var(--mc-line);
}
#ganttChartModal .chart-info {
    gap: 16px;
    font-size: 13px;
    color: var(--mc-muted);
}
#ganttChartModal .chart-footer-buttons { gap: 6px; }

/* ── Окно задачи и «Ресурсы» ───────────────────────────────────────────── */
.gantt-edit-modal-header {
    padding: 14px 14px 14px 20px;
    border-bottom-color: var(--mc-line);
}
.gantt-edit-modal-header h3 {
    font: 600 16px/1.3 var(--mc-font);
    color: var(--mc-text);
}
.gantt-edit-modal-body { padding: 18px 20px; }
.gantt-edit-modal-footer { padding: 12px 20px; }
.gantt-edit-field input[type="text"],
.gantt-edit-field input[type="date"],
.gantt-edit-field select,
.gantt-edit-field textarea {
    border-radius: 7px;
    color: var(--mc-text);
}
.gantt-edit-field input[type="text"]:focus,
.gantt-edit-field input[type="date"]:focus,
.gantt-edit-field select:focus,
.gantt-edit-field textarea:focus,
.gantt-res-control:focus-within {
    border-color: var(--mc-faint);
    box-shadow: none;
}
/* Повтор задачи и трудозатраты — группы полей без пунктира и подложки */
.gantt-edit-recurrence,
.gantt-edit-effort .gantt-effort-box {
    border: 1px solid var(--mc-line);
    background: transparent;
}