/**
 * T4 (I6/I7, C1): Стили для карточек вызовов агентов + панель «Окно агентов».
 *
 * Правило (conflicts.md §4): только НОВЫЕ селекторы .agent-call-* и
 * .agent-window-*. НЕ переопределяем .debug-pre / .debug-call-field
 * (они уже в site.css/pipeline-canvas.css — карточки наследуют).
 *
 * Подключать ПОСЛЕ site.css и pipeline-canvas.css (в Index.cshtml —
 * после canvas.css, ДО landing.css — чтобы не конфликтовать с landing-темой).
 *
 * Структура DOM (landing-путь, v2):
 *   .landing-msg / .msg-ai                       (bubble)
 *     .landing-service-timeline                  (общий контейнер steps+cards)
 *       .landing-service-step  (текст-шаги)
 *       .agent-call-card       (встроен на месте шага «🤖 Агент: X»)
 *     .reply-text              (ответ)
 *
 * Authed-путь не создаёт timeline — chat-call-render.js::renderAgentCalls
 * создаёт его сам (display:block) — стили здесь общие.
 */

/* Карточка одного вызова — дочерний элемент .landing-service-timeline.
   Палитра: базовый hue #7C8AC6 (indigo) + тёмные «подложки» #182353 /
   #0C122C + мягкая белёсая шкала по alpha. Все цвета — один тон, меняется
   только светлота/прозрачность, чтобы палитра была единой. */
.agent-call-card {
    position: relative;
    border: 1px solid rgba(124, 138, 198, 0.24);
    border-radius: 8px;
    background: rgba(24, 35, 83, 0.685);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    align-self: stretch;
    width: 100%;
    flex-shrink: 0;
}

.agent-call-card:hover {
    border-color: rgba(124, 138, 198, 0.42);
}

/* Шапка карточки — кнопка-переключатель (свёрнуто по умолчанию):
   #N  srcName -> dstName  [badge model]  [chevron] */
.agent-call-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    padding: 8px 12px;
    background: rgba(124, 138, 198, 0.10);
    border: 0;
    border-bottom: 1px solid rgba(124, 138, 198, 0.22);
    color: #e0e6f5;
    font-size: 0.9em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.agent-call-head:hover {
    background: rgba(124, 138, 198, 0.16);
}

.agent-call-head:focus-visible {
    outline: 2px solid rgba(124, 138, 198, 0.55);
    outline-offset: -2px;
}

/* Chevron-индикатор раскрытия всей карточки (справа) */
.agent-call-head .agent-call-head-chevron {
    margin-left: auto;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1;
    color: #9aa4c6;
    transition: transform 0.2s ease;
}

.agent-call-head .agent-call-seq {
    font-weight: 700;
    font-family: 'Consolas', 'Menlo', monospace;
    background: rgba(124, 138, 198, 0.28);
    color: #c9d2f0;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.85em;
    white-space: nowrap;
}

.agent-call-head .agent-call-route,
.agent-call-head [data-role='route'] {
    font-family: 'Consolas', 'Menlo', monospace;
    color: #c5cee6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-call-head .agent-call-model {
    white-space: nowrap;
}

/* Тело карточки (Bootstrap collapse). display:block — только когда
   раскрыто (.show): иначе .agent-call-body{display:block} перетягивает
   display:none у .collapse и карточка не сворачивалась бы.
   Фон — мягкая индиго-подложка, чуть темнее card: задаёт «стол» под
   сообщения, которые будут на тон светлее (см. .debug-pre ниже). */
.agent-call-body {
    padding: 10px 12px 12px 12px;
    background: rgba(12, 18, 44, 0.35);
}

.agent-call-body.show {
    display: block;
}

/* Секция (makeSection): .agent-call-field — класс на поле .debug-call-field.
   Только margin-отступы (margin-bottom уже наследуем из site.css
   .pipeline-editor-modal .debug-call-field — НЕ переопределяем). */
.agent-call-field {
    margin-bottom: 12px;
}

.agent-call-field:last-child {
    margin-bottom: 0;
}

/* Тело секции (div.agent-call-section-body внутри .collapse) */
.agent-call-section-body {
    padding: 10px 0 4px 0;
    background: transparent;
}

/* Инструкция — акцент (текст-info + .debug-pre). Тот же hue, что и card,
   но более плотный alpha на border-left — читается как «выделение». */
.agent-call-instr-field {
    border-left: 3px solid rgba(124, 138, 198, 0.55);
    padding-left: 8px;
}

/* Ответ агента — акцент «итог». Светлее Инструкция: тот же индиго,
   но выше светлота — «завершено». */
.agent-call-response-field {
    border-left: 3px solid rgba(170, 185, 240, 0.55);
    padding-left: 8px;
}

/* === «Меж-агентные» блоки внутри карточки ===
   .debug-pre / .debug-message-content унаследованы из pipeline-canvas.css
   (тёмный почти чёрный фон #12121f + рамка #2a2a3e) — визуально «контрастно
   бьёт» по landing-bubble. Для карточки это ВСПОМОГАТЕЛЬНАЯ информация,
   поэтому делаем:
     1) фон прозрачным — контент читается напрямую на фоне bubble;
     2) рамку мягче (полупрозрачная линия без «коробки»);
     3) шрифт на шаг меньше (0.78em от 0.85rem у base .debug-pre);
     4) цвет текста чуть приглушённый.
   Scope через .agent-call-* — правило conflicts.md §4 соблюдено. */
.agent-call-body .debug-pre,
.agent-call-body .debug-message-content,
.agent-call-body .debug-pre.debug-response-pre {
    background-color: rgba(124, 138, 198, 0.10);
    border-color: rgba(124, 138, 198, 0.22);
    color: #c5cee6;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 8px 10px;
}

/* Диалог (N сообщений): каждое сообщение — тоже «сообщение» (фон чуть
   светлее .agent-call-body); тёмную шапку убираем, role-чип остаётся. */
.agent-call-body .debug-message-item {
    background-color: rgba(124, 138, 198, 0.08);
    border-color: rgba(124, 138, 198, 0.22);
    margin-bottom: 8px;
}

.agent-call-body .debug-message-header {
    background-color: rgba(124, 138, 198, 0.16);
    border-bottom-color: rgba(124, 138, 198, 0.22);
    padding: 6px 10px;
    font-size: 0.78rem;
}

/* Ассист-блоки `.agent-call-instr-field` / `.agent-call-response-field`
   уже имеют border-left-акценты выше и наследуют общий
   .agent-call-body .debug-pre (прозрачный фон / меньший шрифт). */

/* Chevron-индикатор раскрытия секции (▸/▾) */
.agent-call-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.9em;
    line-height: 1;
}

.agent-call-section-btn[aria-expanded='true'] .agent-call-chevron {
    transform: translateY(15%); /* визуальный сдвиг — «раскрыто» */
}

/* Панель «Окно агентов» (AgentWindow._rebuild) */
.agent-window-panel,
#agentWindow {
    min-height: 120px;
    max-height: 70vh;
    overflow: auto;
}

.agent-window-head {
    padding: 8px 12px;
    border-bottom: 1px solid #2a3140;
    background: rgba(30, 36, 48, 0.9);
    position: sticky;
    top: 0;
    z-index: 2;
}

.agent-window-list {
    background: transparent;
    border-top: 0;
}

.agent-window-row {
    border: 0;
    border-bottom: 1px solid rgba(42, 49, 64, 0.6);
    background: transparent;
    transition: background 0.15s ease;
}

.agent-window-row:last-child {
    border-bottom: 0;
}

.agent-window-row:hover {
    background: rgba(30, 36, 48, 0.6);
}

/* Пустое состояние (calls.length === 0 из _rebuild) */
.agent-window-empty {
    padding: 24px 16px;
    text-align: center;
    color: #6b7590;
    font-size: 0.92em;
}

/* Активная строка (фильтр включён) — подсветка (тот же индиго, как карточка) */
.agent-window-row--active {
    background: rgba(124, 138, 198, 0.12);
    border-left: 3px solid rgba(124, 138, 198, 0.55);
}

/* Компактный вид при ограниченном месте (workbench-modal) */
@media (max-width: 575.98px) {
    .agent-call-head {
        font-size: 0.85em;
        padding: 6px 10px;
    }
    .agent-call-body {
        padding: 8px 10px 10px 10px;
    }
    .agent-window-row {
        padding: 8px 10px !important; /* !important — Bootstrap .p-2 = 0.5rem */
    }
}