/* Admin dashboard: live-badge turns amber while the SSE connection is reconnecting (EventSource.onerror),
   so an operator can tell "still live but momentarily disconnected" apart from a normal steady state. */
.live-badge.is-stale { color:#8a6d1c; background:#fdf4e0; border-color:#f0dfb2; }
.live-badge.is-stale i { background:#e0a41c; }

.executions-more { padding:14px 25px 22px; }
.executions-more a { font-size:.72rem; font-weight:700; color:var(--blue); }
.executions-more a:hover { text-decoration:underline; }

/* Task 2 report page: infinite-scroll status line (loading / end-of-list / network error) and the invisible
   sentinel IntersectionObserver watches to trigger the next keyset-paginated fetch. */
.executions-panel { position:relative; }
.executions-scroll-status { padding:14px 25px; text-align:center; font-size:.68rem; color:#8492a4; min-height:18px; }
.executions-scroll-status:empty { padding:0; min-height:0; }
[data-executions-sentinel] { height:1px; }
/* ── Detalhe da execução ────────────────────────────────────────────────────
   Cabeçalho, faixa de fatos/métricas, abas e o par conversa + linha do tempo.
   O fundo branco e a remoção das sombras são globais (ver site.css). */
.execution-breadcrumb { display:flex; align-items:center; gap:9px; margin-bottom:14px; color:#8492a4; font-size:.68rem; font-weight:600; }
.execution-breadcrumb a { color:#8492a4; }
.execution-breadcrumb a:hover { color:var(--blue); }
.execution-breadcrumb > span:last-child { color:var(--ink); }

.execution-heading h1 { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.execution-state { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border:1px solid transparent; border-radius:20px; font-size:.72rem; font-weight:700; letter-spacing:0; }
.execution-state i { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; color:#fff; font-size:.55rem; font-style:normal; }
.execution-state.success { color:#13805f; background:#e5f6f0; border-color:#c8ebdf; }
.execution-state.danger { color:#c53c4a; background:#fdecf0; border-color:#f5cdd5; }
.execution-state.running { color:#0872c8; background:#e8f4fd; border-color:#c7e3f7; }
.execution-state.success i { background:#16a06f; }
.execution-state.danger i { background:#d8465a; }
.execution-state.running i { background:#0e86dd; }

.execution-facts,.execution-metrics { display:grid; align-items:center; gap:0; margin-bottom:14px; padding:19px 4px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 6px 22px rgba(14,38,68,.04); }
.execution-facts { grid-template-columns:repeat(5,minmax(0,1fr)); }
.execution-metrics { grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:22px; }
.execution-facts > *,.execution-metrics > * { display:flex; align-items:center; gap:12px; min-width:0; padding:2px 22px; border-right:1px solid #e9eff5; }
.execution-facts > *:last-child,.execution-metrics > *:last-child { border-right:0; }
.execution-facts small,.execution-metrics small { display:block; color:#8190a2; font-size:.55rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.execution-facts strong { display:block; margin-top:5px; font-size:.78rem; overflow-wrap:anywhere; }
.execution-facts > * > span:last-child,.execution-metrics .metric-date > span:last-child { min-width:0; }
.fact-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:#eaf4fd; color:var(--brand-primary); font-size:.95rem; }
.execution-metrics > *:not(.metric-date) { flex-direction:column; align-items:flex-start; gap:0; }
.execution-metrics strong { margin-top:7px; font-size:1.15rem; letter-spacing:-.03em; }
.execution-metrics .metric-date strong { margin-top:5px; font-size:.76rem; letter-spacing:0; }

.execution-tabs { display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.execution-tabs button { display:inline-flex; align-items:center; gap:8px; margin-bottom:-1px; padding:12px 16px; border:0; border-bottom:2px solid transparent; background:transparent; color:#7a899b; font-size:.78rem; font-weight:600; }
.execution-tabs button:hover { color:var(--ink); }
.execution-tabs button[aria-selected="true"] { border-bottom-color:var(--brand-primary); color:var(--brand-primary); }
.execution-tabs button > span { font-size:.9rem; }

.execution-columns { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:18px; align-items:start; }
.execution-synthesis,.execution-conversation-card,.execution-diagnostics { grid-column:1; }
/* Ancorada na linha 1 para alinhar o topo com a Síntese: sem isso o auto-placement a joga
   na linha 2, ao lado da conversa. O span cobre as duas linhas da coluna esquerda (síntese
   + conversa) e o align-self:start impede que ela estique até o fim delas. */
.execution-timeline-card { grid-column:2; grid-row:1/span 2; align-self:start; position:sticky; top:18px; }
/* Fora do Resumo só resta uma seção, que ocupa a largura toda. */
.execution-columns:not([data-execution-view="resumo"]) > * { grid-column:1/-1; grid-row:auto; }
.execution-columns:not([data-execution-view="resumo"]) .execution-timeline-card { position:static; }

.execution-synthesis header { display:flex; align-items:center; gap:12px; }
.synthesis-mark { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:10px; background:#eeeafb; color:var(--violet); font-size:.85rem; }
.synthesis-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.synthesis-item { padding:20px 22px; border-right:1px solid #edf1f5; }
.synthesis-item:last-child { border-right:0; }
.synthesis-item strong { display:flex; align-items:center; gap:8px; font-size:.74rem; }
.synthesis-item strong::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--blue); }
.synthesis-item.confidence strong::before { background:var(--green); }
.synthesis-item p { margin:9px 0 0; color:#617086; font-size:.7rem; line-height:1.65; }

.execution-conversation-card header,.execution-timeline-card header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.conversation-sort { display:flex; align-items:center; gap:7px; color:#7a899b; font-size:.68rem; }
.conversation-sort select { border:1px solid #d2dde7; border-radius:9px; padding:7px 10px; color:#556478; font-size:.68rem; font-weight:600; background:#fff; }

.execution-conversation { display:grid; gap:16px; padding:22px; }
.execution-message { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; }
.message-avatar { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:11px; background:#eaf4fd; color:var(--brand-primary); font-size:.85rem; }
.message-avatar.system { background:#fdf3e3; color:#b1801f; }
.message-avatar.agent { background:#eeeafb; color:var(--violet); }
.message-body { min-width:0; padding:15px 18px; border:1px solid #e7eef5; border-left:3px solid #d7e5f2; border-radius:12px; background:#fbfcfe; }
.execution-message.user .message-body { border-left-color:var(--brand-primary); background:#f4f9fe; }
.execution-message.system .message-body { border-left-color:#e0a41c; background:#fffaf1; }
.message-body header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 0 9px; border:0; color:#8492a4; font-size:.63rem; }
.message-body header strong { color:var(--ink); font-size:.72rem; }
.execution-message pre { margin:0; color:#3d4c60; font:inherit; font-size:.72rem; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.execution-message pre.is-clamped { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.message-expand { display:inline-flex; align-items:center; gap:7px; margin-top:11px; padding:7px 12px; border:1px solid #d9e3ec; border-radius:9px; background:#fff; color:#556478; font-size:.66rem; font-weight:600; }
.message-expand:hover { border-color:#9ec9e9; color:var(--blue); }
.message-expand[aria-expanded="true"] span { display:inline-block; transform:rotate(180deg); }

.execution-events { display:grid; gap:2px; margin:0; padding:14px 22px 6px; list-style:none; }
.execution-events li { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:13px; padding:11px 0; }
/* Conector vertical entre os círculos: desce da base do círculo (11px de padding + 25px do
   círculo) até o topo do círculo seguinte (2px de gap + 11px de padding), esticando junto
   com a altura do item — o texto de cada evento tem tamanho variável.
   Some no último item e também no último VISÍVEL, senão sobra um traço solto quando os
   eventos extras estão colapsados. */
.execution-events li::before { content:""; position:absolute; left:11.5px; top:36px; bottom:-13px; width:2px; background:#e3eaf2; }
.execution-events li:last-child::before,.execution-events li:has(+ [hidden])::before { display:none; }
.event-index { display:grid; place-items:center; width:25px; height:25px; flex:0 0 25px; border-radius:50%; background:#eaf4fd; color:var(--brand-primary); font-size:.62rem; font-weight:800; }
.execution-events li:first-child .event-index { background:#e5f6f0; color:var(--green); }
.execution-events li > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; min-width:0; }
.execution-events strong { font-size:.72rem; }
.execution-events time { color:#8492a4; font-size:.62rem; white-space:nowrap; }
.execution-events p { grid-column:1/-1; margin:0; color:#7a899b; font-size:.66rem; line-height:1.55; }
.timeline-more { padding:8px 22px 20px; }
.timeline-more button[aria-expanded="true"] span { display:inline-block; transform:rotate(180deg); }

.execution-diagnostics .execution-error { margin:20px 22px 0; font-size:.72rem; }

@media(max-width:991px){
 .execution-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .execution-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .execution-facts > *,.execution-metrics > * { padding:11px 18px; border-right:0; border-bottom:1px solid #e9eff5; }
 .execution-facts > *:last-child,.execution-metrics > *:last-child { border-bottom:0; }
 .execution-columns { grid-template-columns:1fr; }
 /* Coluna única: a timeline volta a empilhar, senão o grid-row:1/span 2 a sobrepõe à síntese. */
 .execution-synthesis,.execution-conversation-card,.execution-diagnostics,.execution-timeline-card { grid-column:1; grid-row:auto; }
 .execution-timeline-card { position:static; }
 .execution-tabs { overflow-x:auto; }
 .execution-tabs button { white-space:nowrap; }
}
@media(max-width:600px){
 .execution-facts,.execution-metrics { grid-template-columns:1fr; }
 .execution-heading h1 { font-size:1.7rem; }
 .synthesis-item { border-right:0; border-bottom:1px solid #edf1f5; }
 .execution-events li > div { grid-template-columns:1fr; }
}