/* Kepha Studio — fluxo autorun (preview lateral + código + ajuste). Sem result.json no simples.
   OS: KEPHA-STUDIO-AUTORUN-SMART-ENGINE-PREVIEW-NO-RESULTJSON-001
   Layout persistente (não é mais overlay full-screen) — #kh-autorun agora é a própria
   coluna ".ih-live" da Home Inteligente (estilizada em intelligent_home.css); os painéis
   Plano/Resposta/Logs vivem na faixa inferior (.ih-bottom-col). Regras de overlay antigas
   (#kh-autorun fixed, .ar-top/.ar-body/.ar-left/.ar-right) foram removidas — o conteúdo
   é montado direto dentro de #kh-autorun/#ih-plan/#ih-answer/#ih-logs por autorun_flow.js.
   OS: KEPHA-STUDIO-CANONICAL-UX-IMPLEMENTAR-DESIGN-ORIGINAL-STRAUX-AMBAR-001
   (.chip já vem de app.css, reusado aqui sem redefinir) */

/* estados */
.ar-states{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.ar-state{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:var(--rad-md);font-size:13px;color:var(--dim)}
.ar-state .d{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.ar-state.done{color:var(--txt)} .ar-state.done .d{background:var(--ok)}
.ar-state.cur{color:var(--fg-1);background:var(--panel)} .ar-state.cur .d{background:var(--acc);box-shadow:var(--glow-live)}
.ar-spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:arspin .7s linear infinite;vertical-align:middle}
@keyframes arspin{to{transform:rotate(360deg)}}

.ar-msg{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;font-size:13px;line-height:1.5;margin-bottom:14px}
.ar-msg .gen{color:var(--dim);font-size:11px;margin-top:6px}

/* barra de ajuste */
.ar-adjust{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px;margin-bottom:12px}
.ar-adjust label{font-size:12px;color:var(--dim);display:block;margin-bottom:6px}
.ar-adjust .r{display:flex;gap:8px}
.ar-adjust input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:var(--rad-md);color:var(--txt);padding:10px}
.ar-adjust button{background:var(--gold-500);border:1px solid transparent;color:var(--gold-ink);font-weight:800;border-radius:var(--rad-md);padding:10px 16px;cursor:pointer}
.ar-adjust button:hover{background:var(--gold-100)}
.ar-approve{background:transparent;border:1px solid var(--ok);color:var(--ok);border-radius:var(--rad-md);padding:9px 16px;cursor:pointer;font-size:13px;margin-top:8px}

/* fallback (sem API) */
.ar-fallback{background:var(--bg-inset);border:var(--border-gold);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px}
.ar-fallback h4{margin:0 0 6px;font-size:14px} .ar-fallback p{font-size:13px;color:var(--dim);line-height:1.5;margin:0 0 12px}
.ar-fallback .btns{display:flex;gap:8px;flex-wrap:wrap}
.ar-fallback button{border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:var(--rad-md);padding:9px 14px;cursor:pointer;font-size:13px}
.ar-fallback button.p{background:var(--gold-500);border:1px solid transparent;color:var(--gold-ink);font-weight:800}
.ar-fallback button.p:hover{background:var(--gold-100)}

/* preview */
.ar-preview-wrap{flex:1;display:flex;flex-direction:column;min-height:0}
.ar-preview-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--dim)}
.ar-preview-frame{flex:1;width:100%;border:none;background:#fff;min-height:220px}
.ar-preview-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--dim);text-align:center;padding:30px}

/* painel de código */
#ar-code{height:38%;min-height:150px;border-top:1px solid var(--line);display:flex;flex-direction:column;background:var(--bg)}
#ar-code.cp-expanded{position:fixed;inset:52px 0 0 0;height:auto;z-index:20}
.cp-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--bg2)}
.cp-tabs{display:flex;gap:4px;overflow:auto}
.cp-tab{background:none;border:none;color:var(--dim);padding:5px 10px;border-radius:6px;cursor:pointer;font-size:12px}
.cp-tab.on{background:var(--panel2);color:var(--txt)}
.cp-actions{display:flex;gap:6px} .cp-btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:4px 10px;cursor:pointer;font-size:11px}
.cp-code{flex:1;overflow:auto;margin:0;padding:12px;font-size:11.5px;color:var(--k-gold-bright);white-space:pre;font-family:var(--k-mono,ui-monospace,monospace)}
/* OS-KEPHA-STUDIO-LIVE-CODE-RESIZABLE-EXPANDABLE-WORKSPACE-001, B5: default
   é SEM quebra de linha (rolagem horizontal, .cp-code acima já é
   white-space:pre) -- toggle "Quebrar linhas" liga pre-wrap sob demanda. */
.ar-changes-wrap.ar-wrap-on .cp-code{white-space:pre-wrap;word-break:break-word}
.cp-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12px}

/* resposta final humana (RELEASE/ROLLBACK/VRC) — OS-KEPHA-STUDIO-RESPOSTA-
   FINAL-LEGIVEL-001. Reaproveita a caixa .ar-msg como base (mesmo padding/
   borda/tipografia já usados em toda a aba RESPOSTA); só a borda esquerda
   muda de cor por `kind`, sem inventar um sistema de cor novo (var(--ok)/
   var(--warn)/var(--err) já usados em app.css/intelligent_home.css). */
.ar-rf{border-left:3px solid var(--line)}
.ar-rf.ar-rf-ok{border-left-color:var(--ok)}
.ar-rf.ar-rf-warn{border-left-color:var(--warn)}
.ar-rf.ar-rf-block{border-left-color:var(--err)}
.ar-rf-title{font-weight:700;font-size:13.5px;margin-bottom:8px}
.ar-rf-sub{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--dim);margin:12px 0 4px}
.ar-rf-sub:first-of-type{margin-top:0}
.ar-rf-list{margin:0;padding-left:18px}
.ar-rf-list li{margin-bottom:3px}
.ar-rf-row b{color:var(--dim);font-weight:600;margin-right:4px}
/* "Em palavras simples" (OS-KEPHA-STUDIO-PRIMARY-LIVE-EXECUTION-AND-LAYMAN-
   RESPONSE-001): bloco destacado, visualmente separado da resposta técnica
   acima -- mesmos tokens de cor já usados (gold-wash), sem criar paleta
   nova. Conteúdo é sempre reaproveitado de campos já sintetizados
   (MEANING/MOTIVO/etc, ver KH.renderRespostaFinalHtml), nunca gerado aqui. */
.ar-rf-layman{margin-top:14px;padding:10px 12px;border-radius:var(--radius-md,8px);
  background:var(--gold-wash);border:1px solid var(--gold-line,transparent)}
.ar-rf-layman-label{font:700 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-500);margin-bottom:6px}
.ar-rf-layman p{margin:0;font-size:13px;line-height:1.55}
.ar-rf p{margin:0}

/* ==========================================================================
   TASK 1 — 3 MODOS DA ABA EXECUÇÃO (AO VIVO / ALTERAÇÕES / LINHA DO TEMPO)
   OS-KEPHA-STUDIO-EXECUCAO-REAL-3-MODOS-CODIGO-VIVO-001. Mesma paleta de
   .cp-tab (painel de código já existente acima) para consistência visual.
   ========================================================================== */
.ar-mode-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px 0 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.ar-mode-tab{background:none;border:1px solid transparent;color:var(--dim);padding:6px 12px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:600}
.ar-mode-tab:hover{background:var(--panel2)}
.ar-mode-tab.on{background:var(--panel2);color:var(--txt);border-color:var(--line)}
.ar-mode-tab.ar-mode-scroll{margin-left:auto;color:var(--gold-500);border-color:var(--line)}

/* linha do tempo / feed ao vivo — mesma lista, duas molduras */
.ar-timeline{display:flex;flex-direction:column;gap:2px}
.ar-tl-row{display:flex;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.ar-tl-row:last-child{border-bottom:none}
.ar-tl-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;margin-top:5px}
.ar-tl-body{flex:1;min-width:0}
.ar-tl-label{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--txt)}
.ar-tl-reason{font-size:12px;color:var(--dim);margin-top:2px}
.ar-tl-when{font-size:10.5px;color:var(--dim);font-family:ui-monospace,monospace;margin-top:3px}
/* KEPHA-DESIGN-SYSTEM.md, "RUNNING -- TERMINAL": altura útil significativa
   (era max-height:340px fixo) -- flex:1 dentro de .ar-exec-content/#kh-
   autorun (já flex column, ver .ih-exec-pane.active em
   intelligent_home.css), scroll continua só interno. */
.ar-exec-content{flex:1;min-height:0;display:flex;flex-direction:column}
.ar-live-feed{flex:1;min-height:0;overflow:auto}
.ar-live-tail{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--panel);color:var(--dim);font-size:12px;text-align:center}

/* ==========================================================================
   TASK 2 — CÓDIGO AO VIVO / ALTERAÇÕES (estado vazio honesto por padrão —
   ver comentário grande no topo de autorun_flow.js sobre a investigação
   real de disponibilidade de dado).
   ========================================================================== */
.ar-changes-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:36px 16px;color:var(--dim)}
.ar-changes-empty-title{font-size:13px;font-weight:700;color:var(--fg-2,var(--txt))}
.ar-changes-empty-sub{font-size:12px;color:var(--dim);max-width:440px}
.ar-changes-audit{margin-top:6px;font-size:12px;color:var(--dim)}
.ar-changes-split{display:flex;gap:0;min-height:220px}
.ar-changes-split .ar-changes-code{flex:1;min-width:0;border-right:1px solid var(--line);padding-right:14px}
.ar-changes-split .ar-preview-slot{flex:1;min-width:0;padding-left:14px;display:flex;flex-direction:column}
@media (max-width:820px){.ar-changes-split{flex-direction:column}
  .ar-changes-split .ar-changes-code{border-right:none;border-bottom:1px solid var(--line);padding:0 0 14px}
  .ar-changes-split .ar-preview-slot{padding:14px 0 0}}
.ar-file-list{display:flex;flex-direction:column;gap:10px}
.ar-file-row{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ar-file-line{padding:8px 12px;font-size:12px;font-weight:600;background:var(--panel);border-bottom:1px solid var(--line)}
.ar-file-sensitive{padding:14px;font-size:12px;color:var(--warn);text-align:center}
/* OS-KEPHA-LIVE-CODE-REAL-PATCH-STREAM-001, Fase 8/10/11: .ar-file-row
   agora e' <details>/<summary> (clique abre/fecha o diff -- Fase 10) e pode
   conter mais de um patch cronologico do mesmo arquivo (Fase 11). */
details.ar-file-row > summary.ar-file-line{cursor:pointer;list-style:revert;user-select:none}
details.ar-file-row:not([open]) > summary.ar-file-line{border-bottom:none}
.ar-file-patch-entry+.ar-file-patch-entry{border-top:1px solid var(--line)}
.ar-file-patch-meta{padding:6px 12px 0;font:11px var(--font-mono,monospace);color:var(--dim)}

/* ==========================================================================
   TASK 4 — PLANO (linhas estruturadas, sem JSON cru) e LOGS (tabela técnica
   secundária, timestamp/componente/evento).
   ========================================================================== */
.ar-plan-block{display:flex;flex-direction:column;gap:0}
.ar-plan-row{display:flex;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:12.5px}
.ar-plan-row:last-child{border-bottom:none}
.ar-plan-lbl{flex:none;width:110px;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
.ar-plan-val{flex:1;color:var(--txt)}

/* componente terminal (Design System, seção TERMINAL): 13px/line-height
   1.8, JetBrains Mono via --k-mono -- cores por tipo de linha já batem
   via alias (--dim->--k-text-3, --gold-500->--k-gold, --ok->--k-success,
   --err->--k-danger, ver app.css); [INFO]/[PLAN] (--k-info/--k-gold-
   bright) ficam disponíveis pra quando existir um evento real desses
   tipos -- hoje o backend não emite nenhum (mission_execution_stream.py
   só tem OK/ERROR/DENIED/PENDING/REVIEW), nunca fabricado aqui. */
.ar-log-table{display:flex;flex-direction:column;gap:0;font-family:var(--k-mono,ui-monospace,monospace);font-size:13px;line-height:1.8}
.ar-log-row{display:grid;grid-template-columns:118px 130px 1fr;gap:8px;padding:6px 2px;border-bottom:1px solid var(--line);color:var(--dim)}
.ar-log-row:last-child{border-bottom:none}
.ar-log-ts{color:var(--dim)}
.ar-log-comp{color:var(--gold-500);font-weight:600}
.ar-log-event{color:var(--txt);white-space:normal;word-break:break-word}
.ar-log-row.ar-log-audit .ar-log-comp{color:var(--ok)}

/* ==========================================================================
   INCIDENTE-KEPHA-GPT-BYPASS-AND-LIVE-COMMAND-STREAM-001, Parte B —
   Live Execution Stream (painel EXECUÇÃO/LOGS progressivo)
   OS-KEPHA-STUDIO-REPLICATE-APPROVED-UI-IN-PRODUCTION-001: fundo escuro
   tipo "janela de terminal" -- só apresentação (cor/borda/fonte mono já
   usada), NENHUMA mudança na lógica/eventos reais renderizados por
   execution_stream_panel.js. Formato mostrado continua só o que já é real
   ([TOOL] nome — resumo); não existe hoje nenhum evento de Bash real no
   backend (ver mission_execution_stream.py) -- nunca fabricado aqui.
   ========================================================================== */
.exs-summary-list,.exs-log-table{background:var(--k-terminal);border:1px solid var(--k-border);border-radius:var(--k-r-sm);
  padding:8px 4px;font-family:var(--k-mono,ui-monospace,monospace)}
.exs-summary-list{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.exs-summary-row{display:flex;align-items:flex-start;gap:8px;padding:5px 8px;border-radius:6px;background:var(--panel-2,rgba(255,255,255,.03));font-size:12.5px}
.exs-icon{flex:0 0 auto;font-weight:700;width:14px;text-align:center}
.exs-text{color:var(--txt);word-break:break-word}
.exs-tool{color:var(--gold-500);font-family:ui-monospace,monospace;font-size:11px}
.exs-host{color:var(--dim);font-family:ui-monospace,monospace;font-size:11px}
.exs-summary-row.exs-ok .exs-icon{color:var(--ok)}
.exs-summary-row.exs-err .exs-icon{color:var(--err)}
.exs-summary-row.exs-warn .exs-icon{color:var(--warn)}
.exs-summary-row.exs-neutral .exs-icon{color:var(--dim)}
.exs-details{margin-top:6px}
.exs-details summary{cursor:pointer;color:var(--dim);font-size:12px;padding:4px 0}
.exs-log-table{max-height:260px;overflow-y:auto;margin-top:4px}
/* Terminal da aba EXECUÇÃO (KEPHA-DESIGN-SYSTEM.md, "RUNNING -- TERMINAL"):
   ocupa altura útil significativa, scroll SÓ interno (nunca a página) --
   ver arLiveFeedHtml/khExecStreamRerender, autorun_flow.js. */
.ar-exec-live-trace{flex:1;min-height:320px;display:flex;flex-direction:column}
.ar-exec-live-trace .exs-log-table{flex:1;max-height:none;height:100%}
.ar-log-row.exs-log-row.exs-err .ar-log-comp{color:var(--err)}
.ar-log-row.exs-log-row.exs-ok .ar-log-comp{color:var(--ok)}
.ar-log-row.exs-log-row.exs-warn .ar-log-comp{color:var(--warn)}
#exs-live-box{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
#exs-live-box h5{margin:0 0 6px;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em}

/* ==========================================================================
   OS-KEPHA-STUDIO-REALTIME-WORK-VISIBILITY-CODE-AND-VISUAL-PREVIEW-001,
   Fase 1.3 — diff colorido com numeração de linha real (KH.renderDiffHtml,
   autorun_flow.js). Reaproveita os tokens --ok/--err/--gold-500 já
   existentes em app.css, nenhuma cor inventada.
   ========================================================================== */
.diff-view{font-family:ui-monospace,monospace;font-size:11.5px;line-height:1.55;overflow-x:auto}
.ar-changes-wrap.ar-wrap-on .diff-view{overflow-x:visible}
.diff-line{display:flex;white-space:pre}
.ar-changes-wrap.ar-wrap-on .diff-text{white-space:pre-wrap;word-break:break-word}
.diff-lineno{flex:0 0 32px;text-align:right;padding-right:6px;color:var(--dim);opacity:.55;user-select:none}
.diff-marker{flex:0 0 12px;text-align:center;font-weight:700}
.diff-text{flex:1;min-width:0}
.diff-add{background:var(--ok-wash,rgba(143,208,163,.13))}
.diff-add .diff-marker,.diff-add .diff-text{color:var(--ok)}
.diff-del{background:var(--danger-wash,rgba(224,120,92,.08))}
.diff-del .diff-marker,.diff-del .diff-text{color:var(--err)}
.diff-hunk{color:var(--gold-500);opacity:.85;padding:3px 0 3px 8px;margin:2px 0}
.diff-ctx .diff-text{color:var(--dim)}

/* ==========================================================================
   Fase 2 — PREVIEW REAL (imagem JPEG real vinda de lib.preview_capturer,
   base64 em ctx.codigo.preview_events[].data_uri). ar-preview-bar/
   ar-preview-frame já existiam (fluxo autorun legado, iframe); estas classes
   são novas, específicas da imagem estática do fluxo canônico.
   ========================================================================== */
.ar-preview-img{width:100%;border-radius:8px;border:1px solid var(--line);display:block;margin-top:6px;background:#fff}
.ar-preview-when{font-weight:400;font-size:11px;color:var(--dim);margin-left:auto}
.ar-preview-hist{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ar-preview-thumb{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:6px;padding:4px 9px;cursor:pointer;font-size:11px}
.ar-preview-thumb.on{color:var(--txt);border-color:var(--gold-500)}

/* responsividade do shell (sidebar/live/bottom-row) fica em intelligent_home.css */