/* Kepha Studio — MISSION WORKSPACE (3 painéis)
   OS: MEGA-OS-KEPHA-STUDIO-CLAUDE-DESKTOP-LIKE-WORKSPACE-AND-CONTINUOUS-WORKLOG-001

   MARCA KEPHA PRESERVADA: nenhum valor visual novo é inventado aqui. Todas
   as cores/fontes/raios vêm dos tokens canônicos (kepha-tokens.css, --k-*)
   ou dos aliases já existentes do Studio (app.css: --fg-*, --bg-*,
   --gold-*, --line-*, --font, --font-mono) que, desde
   OS-KEPHA-MATERIALIZE-CANONICAL-DESIGN-SYSTEM-001, só repassam os --k-*.
   Zero hex literal de cor neste arquivo — é a garantia mecânica de
   KEPHA_BRAND_PRESERVED (dark + dourado, Archivo na UI, JetBrains Mono no
   terminal), e de que nada da identidade visual de nenhuma outra
   ferramenta entrou junto com o padrão de INTERAÇÃO que a OS pediu.

   O layout ocioso da Home (composer grande + zero state) NÃO é tocado: ele
   continua exatamente como estava e volta inteiro quando não há missão
   sendo acompanhada (ver #ih-main.mw-on abaixo — é só um toggle de
   classe, nunca uma reescrita do DOM da Home). */

/* ---------- tomada da área principal ---------- */
#ih-main.mw-on { padding: 0; overflow: hidden; gap: 0; }
#ih-main.mw-on > #ih-center,
#ih-main.mw-on > #ih-resizer,
#ih-main.mw-on > #ih-live { display: none !important; }

.mw-root { display: none; }
#ih-main.mw-on > .mw-root {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; width: 100%;
}

/* ---------- cabeçalho compacto ---------- */
.mw-header {
  flex: none; padding: 10px 18px 9px;
  border-bottom: 1px solid var(--line-2); background: var(--surface-chrome);
}
.mw-head-top { display: flex; align-items: center; gap: 12px; }
.mw-head-title {
  flex: 1 1 auto; min-width: 0; font: 700 13.5px/1.35 var(--font); color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw-head-actions { flex: none; display: flex; gap: 6px; align-items: center; }
.mw-badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font: 700 9.5px/1 var(--font-mono); letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-2); color: var(--fg-3);
}
.mw-badge-live { background: var(--gold-wash); color: var(--gold-500); border-color: var(--gold-line); }
.mw-badge-done { background: var(--ok-wash); color: var(--ok-500); border-color: var(--ok-500); }
.mw-badge-warn { background: var(--danger-wash); color: var(--danger-500); border-color: var(--danger-line); }
.mw-badge-wait { background: var(--gold-wash); color: var(--gold-500); border-color: var(--gold-line); }
.mw-dots { display: inline-flex; gap: 2px; }
.mw-dots i {
  width: 3px; height: 3px; border-radius: 50%; background: currentColor;
  display: inline-block; animation: mw-blink 1.1s ease-in-out infinite;
}
.mw-dots i:nth-child(2) { animation-delay: .18s; }
.mw-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes mw-blink { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

.mw-head-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 7px; }
.mw-meta-bit { font: 400 10.5px/1.4 var(--font-mono); color: var(--fg-3); }
.mw-meta-bit b {
  font-weight: 700; color: var(--fg-4); text-transform: uppercase;
  letter-spacing: .06em; margin-right: 4px;
}
.mw-hbtn {
  background: none; border: 1px solid var(--line-2); color: var(--fg-2);
  font: 400 11.5px/1 var(--font); padding: 6px 10px; border-radius: var(--radius-md);
  cursor: pointer; white-space: nowrap;
}
.mw-hbtn:hover { color: var(--fg-1); background: var(--bg-3); }
.mw-hbtn-danger { color: var(--danger-500); border-color: var(--danger-line); }
.mw-hbtn-danger:hover { background: var(--danger-wash); color: var(--danger-500); }

/* ---------- corpo: CENTRO (60%) | divisor | DIREITA (40%) ---------- */
.mw-body {
  --mw-right-w: 40%;
  flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch;
}
.mw-center {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  min-height: 0; position: relative; background: var(--surface-app);
}
.mw-right {
  flex: 0 0 var(--mw-right-w); width: var(--mw-right-w); min-width: 0;
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--line-2); background: var(--surface-chrome);
}
.mw-resizer {
  flex: 0 0 6px; cursor: col-resize; background: var(--line-1);
  border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
}
.mw-resizer:hover, .mw-resizer.dragging, .mw-resizer:focus-visible { background: var(--gold-wash); outline: none; }
/* "Expandir preview" / "Expandir execução" sem sair da missão. */
.mw-root.mw-expanded .mw-center { display: none; }
.mw-root.mw-expanded .mw-resizer { display: none; }
.mw-root.mw-expanded .mw-right { flex: 1 1 auto; width: auto; border-left: none; }

/* ---------- FEED CONTÍNUO (coração da experiência) ---------- */
.mw-feed {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 14px 18px 10px; scroll-behavior: auto;
  /* TEXT_SELECTION: o feed inteiro (mensagem, comando, saída, diff) é
     livremente selecionável/copiável -- nunca bloqueado. */
  -webkit-user-select: text; user-select: text;
}
.mw-feed:focus-visible { outline: 1px solid var(--gold-line); outline-offset: -2px; }

/* linha COMPACTA -- nunca um card gigante por evento. */
.mw-row {
  display: grid; grid-template-columns: 58px 96px 1fr; gap: 10px;
  align-items: baseline; padding: 3px 0; border-radius: var(--radius-xs);
  font: 400 12.5px/1.55 var(--font); color: var(--fg-2);
}
.mw-row:hover { background: var(--line-1); }
.mw-time { font: 400 10.5px/1.6 var(--font-mono); color: var(--fg-5); text-align: right; }
.mw-tag {
  font: 700 9px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw-body-cell, .mw-row > .mw-body { min-width: 0; word-break: break-word; }
.mw-row > .mw-body { display: block; }
.mw-dim { color: var(--fg-4); }
.mw-sum { color: var(--fg-2); }
.mw-host { font: 700 10.5px/1 var(--font-mono); color: var(--gold-500); }
.mw-tool { font: 400 10.5px/1 var(--font-mono); color: var(--fg-4); }

/* cor por canal -- só o rótulo ganha cor, o corpo continua legível. */
.mw-c-voce .mw-tag { color: var(--gold-100); }
.mw-c-voce .mw-msg { color: var(--fg-1); font-weight: 600; }
.mw-c-kepha .mw-tag { color: var(--gold-500); }
.mw-c-sistema .mw-tag { color: var(--fg-3); }
.mw-c-exec .mw-tag { color: var(--gold-500); }
.mw-c-tool .mw-tag { color: var(--gold-500); }
.mw-c-auditor .mw-tag { color: var(--info, var(--k-info)); }
.mw-c-thinkers .mw-tag { color: var(--k-info); }
.mw-c-depto .mw-tag { color: var(--k-info); }
.mw-c-redteam .mw-tag { color: var(--danger-500); }
.mw-c-vrc .mw-tag { color: var(--gold-100); }
.mw-c-arquivo .mw-tag, .mw-c-diff .mw-tag { color: var(--fg-2); }
.mw-c-teste .mw-tag { color: var(--ok-500); }
.mw-c-remoto .mw-tag { color: var(--gold-500); }
.mw-c-gap .mw-tag { color: var(--danger-500); }

.mw-t-ok .mw-sum { color: var(--fg-2); }
.mw-t-err .mw-sum { color: var(--danger-500); }
.mw-t-warn .mw-sum { color: var(--gold-500); }

/* saída real de execução (stdout de leitura remota governada). */
.mw-term { margin: 4px 0 6px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-terminal); }
.mw-term-head {
  cursor: pointer; padding: 5px 9px; font: 400 11px/1.4 var(--font-mono);
  color: var(--gold-500); list-style: none;
}
.mw-term-head::-webkit-details-marker { display: none; }
.mw-term-out {
  margin: 0; padding: 8px 10px 10px; border-top: 1px solid var(--line-2);
  font: 400 11.5px/1.7 var(--font-mono); color: var(--fg-2);
  white-space: pre; overflow-x: auto; max-height: 320px; overflow-y: auto;
  -webkit-user-select: text; user-select: text;
}
.mw-open-art {
  background: none; border: none; padding: 0 0 0 6px; cursor: pointer;
  font: 400 11px/1 var(--font); color: var(--gold-500);
}
.mw-open-art:hover { color: var(--gold-100); text-decoration: underline; }
.mw-final { margin: 6px 0 10px; }
.mw-older-note {
  padding: 8px 10px; margin-bottom: 8px; border: 1px dashed var(--line-3);
  border-radius: var(--radius-sm); font: 400 11.5px/1.5 var(--font); color: var(--fg-3);
}
.mw-older-note button { background: none; border: none; color: var(--gold-500); cursor: pointer; font: inherit; text-decoration: underline; }

/* "Voltar ao vivo ↓" -- flutuante, só aparece com auto-scroll pausado. */
.mw-back-live {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 118px; z-index: 4;
  background: var(--k-gold-grad); color: var(--gold-ink); border: none;
  font: 700 11.5px/1 var(--font); padding: 8px 14px; border-radius: var(--radius-pill);
  cursor: pointer; box-shadow: var(--k-shadow);
}
.mw-back-live[hidden] { display: none; }

/* ---------- COMPOSER COMPACTO (rodapé da coluna central, nunca no topo) ---------- */
.mw-composer {
  flex: none; border-top: 1px solid var(--line-2); background: var(--surface-chrome);
  padding: 9px 14px 11px;
}
.mw-input {
  width: 100%; resize: vertical; min-height: 38px; max-height: 160px;
  background: var(--surface-terminal); border: 1px solid var(--line-2);
  border-radius: var(--radius-md); color: var(--fg-1);
  font: 400 13px/1.5 var(--font); padding: 9px 11px;
}
.mw-input:focus { outline: none; border-color: var(--gold-line); }
.mw-composer-bar { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.mw-attach { font: 400 11.5px/1 var(--font); color: var(--fg-3); cursor: pointer; border: 1px solid var(--line-2); padding: 6px 10px; border-radius: var(--radius-md); }
.mw-attach:hover { color: var(--fg-1); background: var(--bg-3); }
button.mw-attach.mw-mic { background: transparent; display: inline-flex; align-items: center; gap: 5px; }
/* OS-KEPHA-AUTONOMOUS-REAL-TEST-RECOVERY-P0-001: estado real de gravacao
   (ver KH.startMicRecording/mission_workspace.js::mwWireComposer). */
.mw-mic.recording { border-color: #c0392b; color: #c0392b; }
.mw-mic.recording .kh-icon { animation: ih-mic-pulse 1.2s ease-in-out infinite; }
.mw-composer-note { flex: 1 1 auto; font: 400 11px/1.4 var(--font); color: var(--fg-4); }
.mw-send {
  background: var(--k-gold-grad); color: var(--gold-ink); border: none;
  font: 700 12px/1 var(--font); padding: 9px 15px; border-radius: var(--radius-md); cursor: pointer;
}
.mw-send:disabled { opacity: .55; cursor: default; }
.mw-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.mw-thumbs:empty { display: none; }
.mw-thumb-chip {
  display: inline-flex; align-items: center; gap: 6px; font: 400 11px/1 var(--font);
  color: var(--fg-2); background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: var(--radius-pill); padding: 5px 9px;
}
.mw-thumb-chip button { background: none; border: none; color: var(--fg-4); cursor: pointer; font: inherit; }
.mw-composer-confirm {
  margin-top: 8px; padding: 10px 12px; border: 1px solid var(--gold-line);
  border-radius: var(--radius-md); background: var(--gold-wash);
  font: 400 12px/1.55 var(--font); color: var(--fg-2);
}
.mw-composer-confirm[hidden] { display: none; }
.mw-confirm-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

/* ---------- PAINEL DIREITO ---------- */
.mw-rtabs {
  flex: none; display: flex; gap: 2px; padding: 8px 10px;
  border-bottom: 1px solid var(--line-2); overflow-x: auto;
}
.mw-rtab {
  background: none; border: 1px solid transparent; color: var(--fg-3); cursor: pointer;
  font: 700 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 10px; border-radius: var(--radius-md); white-space: nowrap;
}
.mw-rtab:hover { color: var(--fg-1); background: var(--bg-3); }
.mw-rtab.on { color: var(--gold-500); border-color: var(--gold-line); background: var(--gold-wash); }
.mw-expand { margin-left: auto; }

.mw-preview-pane {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px 18px;
  -webkit-user-select: text; user-select: text;
}
.mw-preview-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mw-preview-bar {
  font: 700 10px/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-4); word-break: break-all;
}
.mw-preview-img { max-width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--radius-md); display: block; }
.mw-preview-when { font: 400 10.5px/1 var(--font-mono); }
.mw-thumbs-row { display: flex; gap: 5px; flex-wrap: wrap; }
.mw-thumb {
  background: none; border: 1px solid var(--line-2); color: var(--fg-3); cursor: pointer;
  font: 400 10.5px/1 var(--font-mono); padding: 5px 8px; border-radius: var(--radius-sm);
}
.mw-thumb.on { color: var(--gold-500); border-color: var(--gold-line); background: var(--gold-wash); }
.mw-ptabs { display: flex; gap: 4px; }
.mw-ptab {
  background: none; border: 1px solid var(--line-2); color: var(--fg-3); cursor: pointer;
  font: 400 11px/1 var(--font); padding: 5px 10px; border-radius: var(--radius-pill);
}
.mw-ptab.on { color: var(--gold-500); border-color: var(--gold-line); background: var(--gold-wash); }
.mw-preview-scroll { min-height: 0; overflow: auto; }
/* CODE PREVIEW: no-wrap por padrão + scroll horizontal (requisito da OS). */
.mw-code {
  margin: 0; padding: 10px 12px; background: var(--surface-terminal);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font: 400 11.5px/1.7 var(--font-mono); color: var(--fg-2);
  white-space: pre; overflow-x: auto;
}
.mw-diff-entry { margin-bottom: 10px; }
.mw-file-list { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 8px; }
.mw-file-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 6px 8px; cursor: pointer; text-align: left; width: 100%;
}
.mw-file-item:hover { background: var(--bg-3); }
.mw-file-item.on { border-color: var(--gold-line); background: var(--gold-wash); }
.mw-file-path { font: 400 11.5px/1.4 var(--font-mono); color: var(--fg-1); word-break: break-all; }
.mw-file-meta { font: 400 10px/1.3 var(--font-mono); color: var(--fg-4); }
.mw-pad { padding: 12px 2px; }
/* HTML PREVIEW -- SEMPRE sandbox (o atributo `sandbox` sem valor nenhum é
   o mais restritivo possível: sem scripts, sem same-origin, sem forms). */
.mw-html-frame {
  width: 100%; min-height: 340px; border: 1px solid var(--line-2);
  border-radius: var(--radius-md); background: var(--fg-1);
}
.mw-summary { display: flex; flex-direction: column; gap: 15px; }
.mw-summary section h5 {
  font: 700 10px/1 var(--font-mono); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--fg-4); margin: 0 0 6px;
}
.mw-summary p, .mw-summary .mw-now { font: 400 12.5px/1.6 var(--font); color: var(--fg-2); margin: 0; }
.mw-summary .mw-now { color: var(--gold-500); font-weight: 600; }
.mw-plist { margin: 0; padding-left: 17px; }
.mw-plist li { font: 400 12px/1.55 var(--font); color: var(--fg-2); margin-bottom: 4px; }
.mw-meta h5 { margin-top: 11px; }
.mw-meta div { font: 400 12px/1.5 var(--font-mono); color: var(--fg-2); }
.mw-logs { display: flex; flex-direction: column; gap: 10px; }

/* ---------- RESPONSIVO ----------
   Desktop: 3 painéis. Tablet: sidebar colapsada + centro/direita. Mobile:
   NUNCA 3 colunas -- alterna Execução | Preview, feed primeiro. */
.mw-mobile-only { display: none; }

/* TABLET: sidebar colapsa para uma faixa estreita (a navegação continua
   existindo, só perde a largura) e o preview encolhe. */
@media (max-width: 1100px) {
  #intelligent-home.mw-active { grid-template-columns: 56px 1fr; }
  #intelligent-home.mw-active .ih-side-brand .tag,
  #intelligent-home.mw-active .ih-side-item span { display: none; }
  #intelligent-home.mw-active .ih-side-item { justify-content: center; padding: 9px 4px; }
  #intelligent-home.mw-active .ih-side-item::before {
    content: attr(data-nav); font: 700 8px/1 var(--font-mono);
    text-transform: uppercase; letter-spacing: .02em; color: inherit;
    overflow: hidden; max-width: 46px; text-overflow: ellipsis; white-space: nowrap;
  }
  .mw-body { --mw-right-w: 38%; }
  .mw-row { grid-template-columns: 52px 82px 1fr; gap: 8px; }
}

@media (max-width: 760px) {
  .mw-mobile-only { display: inline-block; }
  .mw-body { display: block; position: relative; }
  .mw-center, .mw-right {
    width: 100%; flex: none; height: 100%;
    position: absolute; inset: 0;
  }
  .mw-resizer { display: none; }
  .mw-right { border-left: none; }
  /* feed primeiro: preview só entra quando o usuário pede. */
  .mw-root:not(.mw-mobile-preview) .mw-right { display: none; }
  .mw-root.mw-mobile-preview .mw-center { display: none; }
  .mw-root.mw-expanded .mw-center { display: none; }
  .mw-head-meta { gap: 2px 10px; }
  .mw-row { grid-template-columns: 44px 1fr; gap: 6px; }
  .mw-row .mw-tag { grid-column: 2; font-size: 8.5px; }
  .mw-row > .mw-body { grid-column: 2; }
  .mw-back-live { bottom: 128px; }
}

/* ---------- IDLE (mesmo shell, sem missão sendo acompanhada) ----------
   OS-KEPHA-FINAL-LIVE-WORKSPACE-RECERT-FIX-AND-CLOSEOUT-001. Mesmos
   tokens do resto do arquivo -- zero hex literal novo. */
.mw-idle-title { opacity: .72; font-weight: 600; }
.mw-idle-hero {
  max-width: 640px; margin: 0 auto; padding: 14vh 20px 22px; text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
.mw-idle-hero h2 {
  margin: 0; font: 700 22px/1.3 var(--font); color: var(--fg-1);
}
.mw-idle-hero p {
  margin: 0; font: 400 13px/1.6 var(--font); color: var(--fg-3);
}
.mw-idle-history {
  max-width: 640px; margin: 4px auto 0; padding: 0 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.mw-preview-empty {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: var(--fg-4);
  font: 400 12px/1.6 var(--font);
}