.pipeline-editor-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #1e1e1e; z-index: 1050;
    display: flex; flex-direction: column;
}
.nodes-canvas {
    position: relative; width: 100%; height: 100%;
    background-image: radial-gradient(#333 1px, transparent 1px);
    background-size: 20px 20px; background-color: #141414;
    /* L2: панорамирование ЛКМ = скролл; overflow:auto — обязательное условие
       (было hidden — пан технически невозможен). site.css тоже даёт
       overflow:auto; правило здесь повторяется, т.к. этот файл грузится после. */
    overflow: auto; user-select: none;
    cursor: grab; /* подсказка: фон холста можно сдвигать ЛКМ */
    scrollbar-width: thin; scrollbar-color: #4a4a4a #141414; /* Firefox */
}
/* Во время панорамирования (canvas-events.js переключает класс) */
.nodes-canvas.is-panning { cursor: grabbing; }
.nodes-canvas::-webkit-scrollbar { width: 10px; height: 10px; }
.nodes-canvas::-webkit-scrollbar-track { background: #141414; }
.nodes-canvas::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 5px; }
.nodes-canvas::-webkit-scrollbar-thumb:hover { background: #666; }
.edges-svg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; pointer-events: auto; z-index: 1;
}
.edges-svg path {
    stroke: #0d6efd; stroke-width: 3; fill: none;
    pointer-events: stroke; cursor: pointer;
    /* Красивый эффект бегущей дорожки для связей */
    stroke-dasharray: 5; animation: dash 2s linear infinite;
}

.agent-node-card {
    border-color: #444;
}
.agent-node-card:hover {
    border-color: #0d6efd;
}
/* Стили для интерактивных точек подключения */
.node-port {
    position: absolute;
    width: 12px; height: 12px;
    background-color: #0d6efd;
    border: 2px solid #141414;
    border-radius: 50%;
    cursor: crosshair;
    z-index: 15;
}
.node-port:hover {
    background-color: #198754;
    transform: scale(1.2);
}
/* Левый порт ввода */
.port-input {
    left: -6px;
    top: calc(50% - 6px);
}
/* Правый порт вывода */
.port-output {
    right: -6px;
    top: calc(50% - 6px);
}

@keyframes dash { to { stroke-dashoffset: -20; } }

/* === Debug Modal Styles === */
.debug-section-divider {
    margin-top: 15px;
    margin-bottom: 10px;
    border-color: #444;
    opacity: 0.5;
}

.debug-section-title {
    color: #e0e0e0;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
}

.debug-message-item {
    background-color: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.debug-message-system {
    border-left: 3px solid #dc3545;
}

.debug-message-user {
    border-left: 3px solid #0d6efd;
}

.debug-message-assistant {
    border-left: 3px solid #198754;
}

.debug-message-header {
    background-color: #252538;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #333;
}

.debug-message-content {
    margin: 0;
    padding: 12px;
    background-color: #12121f;
    color: #d0d0d0;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
}

.debug-pre {
    margin: 8px 0 0 0;
    padding: 12px;
    background-color: #12121f;
    color: #d0d0d0;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 6px;
    border: 1px solid #2a2a3e;
    max-height: 500px;
    overflow-y: auto;
}

.debug-pre.debug-prompt-pre {
    cursor: pointer;
}

.debug-pre.debug-prompt-pre:hover {
    border-color: #0d6efd;
}

.debug-prompt-pre {
    line-height: 1.5;
}

.debug-response-pre {
    max-height: none;
    background-color: #0f1923;
    border-color: #1a3a52;
    color: #a8d0e6;
}

.debug-call-field {
    margin-bottom: 15px;
}

.debug-call-detail {
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* Scrollbar styling for debug content */
.debug-pre::-webkit-scrollbar,
.debug-message-content::-webkit-scrollbar {
    width: 6px;
}

.debug-pre::-webkit-scrollbar-track,
.debug-message-content::-webkit-scrollbar-track {
    background: #1a1a2e;
}

.debug-pre::-webkit-scrollbar-thumb,
.debug-message-content::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.debug-pre::-webkit-scrollbar-thumb:hover,
.debug-message-content::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* === New Agent History Layout === */
.debug-history-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    min-height: 400px;
}

/* Левая боковая панель с кнопками обращений */
.debug-history-sidebar {
    width: 250px;
    min-width: 200px;
    border-right: 1px solid #444;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.debug-sidebar-title {
    color: #f0c040;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #444;
}

.debug-history-buttons {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 5px;
}

.debug-call-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px 12px;
    color: #d0d0d0;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.debug-call-btn:hover {
    background: rgba(13, 110, 253, 0.15);
    border-color: #0d6efd;
}

.debug-call-btn.active {
    background: rgba(13, 110, 253, 0.25);
    border-color: #0d6efd;
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
}

.debug-call-btn-agent {
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
}

.debug-call-btn-number {
    font-size: 0.75rem;
    color: #f0c040;
    font-weight: 600;
}

.debug-call-btn-from {
    font-size: 0.75rem;
    color: #999;
    font-style: italic;
}

/* Правая панель с详细内容 */
.debug-history-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 5px;
}

.debug-call-panel {
    display: none;
}

.debug-call-panel:not(.d-none) {
    display: block;
}

/* Шапка обращения: кто → кому */
.debug-call-header {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
}

.debug-call-route {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
}

.debug-route-agent {
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
}

.debug-route-source {
    background: rgba(220, 53, 69, 0.2);
    color: #ff6b8a;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

.debug-route-target {
    background: rgba(25, 135, 84, 0.2);
    color: #75e8b0;
    border: 1px solid rgba(25, 135, 84, 0.4);
}

.debug-route-arrow {
    color: #888;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Инструкция */
.debug-instruction-pre {
    background-color: #1a1a2e;
    border-color: #2a3a5e;
    color: #a0c4ff;
}

/* Скроллбар для боковой панели */
.debug-history-buttons::-webkit-scrollbar {
    width: 5px;
}

.debug-history-buttons::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.debug-history-buttons::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

.debug-history-buttons::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Скроллбар для контента */
.debug-history-content::-webkit-scrollbar {
    width: 6px;
}

.debug-history-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.debug-history-content::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.debug-history-content::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* ============================================================
   READ-ONLY ВИЗУАЛИЗАТОР ПАЙПЛАЙНА (Landing-страница)
   Переиспользует холст/ноды/связи редактора, но без редактирования:
   - скрыты контролы карточки (🐛 ⚙️ ❌), селект агента, порты
   - карточки не двигаются (cursor: default)
   - подсветка активного узла + анимация идущего ребра
   ============================================================ */

/* Обёртка-вьюпорт: сам контейнер визуализатора (на Landing — секция с фикс. высотой) */
.pipeline-viewer {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    user-select: none;
}

/* Родительская секция должна иметь ОПРЕДЕЛЁННУЮ высоту:
   холст и карточки нод — absolutely positioned (не дают высоту контенту),
   иначе после скрытия плейсхолдера секция схлопнется до 0. */
.pipeline-visualization-area {
    height: 680px;
}

/* Холст внутри вьюпорт (используем .nodes-canvas — уже есть стили) */
.pipeline-viewer .nodes-canvas {
    position: absolute;
    inset: 0;
    overflow: auto; /* прокрутка при широком графе */
    cursor: default; /* read-only: панорамирование ЛКМ здесь недоступно (нет handler'ов редактора) */
}

/* Связи в режиме просмотра: без курсора-указателя (нельзя кликать) */
.pipeline-viewer .edges-svg path {
    pointer-events: none;
    cursor: default;
    opacity: 0.7;
}

/* --- Скрыть всё, что связано с редактированием --- */
/* ВАЖНО: порты прячем visibility:hidden, а НЕ display:none.
   drawEdges() (общий модуль редактора) вычисляет концы связей
   по getBoundingClientRect() портов .port-input/.port-output;
   при display:none геометрия равна 0 и все рёбра рисуются
   за пределами холста (связи «не отображаются»). */
.pipeline-viewer .node-port {
    visibility: hidden;
}
.pipeline-viewer .agent-role-select {
    display: none !important;
}
.pipeline-viewer .debug-node-btn,
.pipeline-viewer .settings-node-btn,
.pipeline-viewer .delete-node-btn {
    display: none !important;
}
.pipeline-viewer .agent-node-card {
    cursor: default;
    pointer-events: none; /* не даём ловить drag/клик — чисто отображение */
}

/* --- Подсветка состояния узла --- */
/* ВАЖНО (inline-редактор, authed): стили подсветки применяются НЕ только
   к .pipeline-viewer (anon-лендинг), но и к .pipeline-visualization-section
   — инлайн-редактору из _EditorModals, который рендерится прямо в этой секции.
   Иначе live-бейджи «АКТИВЕН/ГОТОВО» и подсветка рёбер не появятся в authed. */
/* Активный узел (текущий выполняющийся) */
.pipeline-viewer .agent-node-card.node-active,
.pipeline-visualization-section .agent-node-card.node-active {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.6), 0 0 18px 2px rgba(255, 193, 7, 0.45);
    animation: node-active-pulse 1.6s ease-in-out infinite;
    z-index: 20 !important;
}
.pipeline-viewer .agent-node-card.node-active .node-icon,
.pipeline-visualization-section .agent-node-card.node-active .node-icon {
    color: #ffc107 !important;
}

/* Завершённый узел (исполнен, ответ получен) */
.pipeline-viewer .agent-node-card.node-done,
.pipeline-visualization-section .agent-node-card.node-done {
    border-color: #198754 !important;
    box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.55), 0 0 10px rgba(25, 135, 84, 0.35);
}
.pipeline-viewer .agent-node-card.node-done .node-icon,
.pipeline-visualization-section .agent-node-card.node-done .node-icon {
    color: #25d366 !important;
}
.pipeline-viewer .agent-node-card.node-done .node-title::after,
.pipeline-visualization-section .agent-node-card.node-done .node-title::after {
    content: " ✓";
    color: #25d366;
    font-weight: 700;
}

@keyframes node-active-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.60), 0 0 14px 1px rgba(255, 193, 7, 0.40); }
    50%      { box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.85), 0 0 26px 4px rgba(255, 193, 7, 0.55); }
}

/* Статус-бейдж в углу карточки (активен / завершён) */
.pipeline-viewer .node-status-badge,
.pipeline-visualization-section .node-status-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 25;
    font-size: 0.65rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.pipeline-viewer .node-status-badge.node-active,
.pipeline-visualization-section .node-status-badge.node-active {
    background: #ffc107;
    color: #1a1a1a;
}
.pipeline-viewer .node-status-badge.node-done,
.pipeline-visualization-section .node-status-badge.node-done {
    background: #198754;
    color: #fff;
}

/* Ребро «в пути» (source → текущий активный узел) */
.pipeline-viewer .edges-svg path.edge-active,
.pipeline-visualization-section .edges-svg path.edge-active {
    stroke: #ffc107 !important;
    stroke-width: 5 !important;
    opacity: 1;
    stroke-dasharray: 10;
    animation: edge-active-flow 0.9s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.7));
}
/* Ребро «завершено» (source и target уже прошли)
   !important: базовые правила path (stroke-dasharray:5 + animation: dash)
   имеют ту же специфичность, что и это правило, — без флага бегущий
   пунктир и базовая толщина перекрашивают «пройденное» ребро обратно. */
.pipeline-viewer .edges-svg path.edge-done,
.pipeline-visualization-section .edges-svg path.edge-done {
    stroke: #25d366 !important;
    stroke-width: 4 !important;
    stroke-dasharray: none !important;
    animation: none !important;
    opacity: 0.95;
}
@keyframes edge-active-flow {
    to { stroke-dashoffset: -20; }
}