/* Kepha Studio — Home Inteligente (entrada simples → execução guiada → resultado)
   Inspiração conceitual em ferramentas modernas de IA; nada copiado (layout/cores próprios).
   OS: KEPHA-STUDIO-INTELLIGENT-HOME-LOVABLE-MANUS-STYLE-UX-001
   Layout persistente de 3 colunas (sidebar + central + execução ao vivo) + faixa inferior,
   seguindo a referência real do dono no Design Intake (DIN-20260708-164321-26D1).
   OS: KEPHA-STUDIO-CANONICAL-UX-IMPLEMENTAR-DESIGN-ORIGINAL-STRAUX-AMBAR-001

   Correção visual P0 (2026-08-16, reprovação visual do Owner em produção):
   sidebar 190px->210px e coluna de execução 380px->340px (medidas-alvo do
   Owner); ícones de menu/intenção passam de emoji para SVG inline
   (.kh-icon, ver intelligent_home.js); sombras decorativas reduzidas (nada
   de glassmorphism/blur); hero reescrito para "Peça o que precisa. A Kepha
   cuida da execução." como foco visual principal da primeira tela. */

#intelligent-home{position:fixed;inset:0;z-index:5;overflow:hidden;
  background:var(--surface-app);
  display:grid;grid-template-columns:var(--rail-nav) 1fr;grid-template-rows:auto 1fr;
  grid-template-areas:"sidebar topbar" "sidebar main"}
.ih-shell{display:contents}
.kh-icon{display:inline-block;vertical-align:-3px;flex:none}

/* sidebar persistente — NavItem canônico: texto + contagem mono, sem ícone
   (Design System: "Sinalização é feita por tipografia e forma mínima") */
.ih-sidebar{grid-area:sidebar;background:var(--surface-chrome);border-right:var(--border-gold);
  display:flex;flex-direction:column;padding:16px 12px;overflow:auto;gap:4px}
.ih-side-brand{display:flex;align-items:center;gap:8px;font-size:14px;padding:6px 8px 20px;color:var(--fg-1)}
.ih-side-brand img.logo-img{height:22px;width:auto;display:block}
.ih-side-brand .tag{font:700 9px/1 var(--font-mono);color:var(--gold-500);border:var(--border-gold);padding:2px 6px;border-radius:var(--radius-pill)}
.ih-side-nav{display:flex;flex-direction:column;gap:4px}
.ih-side-item{display:flex;align-items:center;width:100%;padding:9px 12px;border-radius:var(--radius-md);
  font:400 13px/1 var(--font);color:var(--fg-3);cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-ui),color var(--dur-fast) var(--ease-ui)}
.ih-side-item:hover{background:var(--bg-3);color:var(--fg-1)}
.ih-side-item.active{background:var(--gold-wash);color:var(--gold-100);font-weight:700;box-shadow:var(--marker-active)}
.ih-side-item .side-count{margin-left:auto;font:700 10px/1 var(--font-mono);color:var(--fg-5)}

/* bloco executivo fixo no rodapé da sidebar (padrão do Design System) */
.ih-side-exec{margin-top:auto;border:var(--border-gold);border-radius:var(--radius-md);
  padding:11px 12px;background:var(--wash-gold-panel)}

/* topo minimalista — TopBar canônico: rótulo da tela + avisos + links de texto */
.ih-top{grid-area:topbar;display:flex;align-items:center;gap:14px;padding:12px 22px;
  border-bottom:1px solid var(--line-2);background:var(--bg-1)}
.ih-brand{display:flex;align-items:center;gap:9px;font:700 13.5px/1 var(--font)}
.ih-brand img.logo-img{height:18px;width:auto;display:block}
.ih-brand .tag{font-size:11px;color:var(--fg-3);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:1px 9px}
.ih-top-actions{margin-left:auto;display:flex;gap:16px;align-items:center;font:var(--text-body-sm);color:var(--fg-3)}
.ih-link{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0;
  display:inline-flex;align-items:center;gap:5px}
.ih-link:hover{color:var(--fg-1)}
.ih-icon-btn{background:none;border:none;color:var(--fg-3);cursor:pointer;font:inherit;
  padding:0;display:inline-flex;align-items:center;gap:4px;position:relative}
.ih-icon-btn:hover{color:var(--fg-1)}
.ih-notif-count{background:var(--gold-500);color:var(--gold-ink);font:700 10px/1 var(--font-mono);
  border-radius:var(--radius-pill);padding:2px 5px;min-width:14px;text-align:center}

/* identidade do usuário no cabeçalho (Tarefa 1) — chip clicável com nome
   real + papel (Executivo/Operacional) e um menu mínimo (Minha Conta/
   Sair), seguindo os mesmos tokens já usados em .ih-side-item (hover) e
   .ih-notif-item/.ih-card (painel flutuante) em vez de inventar um novo
   vocabulário visual. */
.ih-user-menu{position:relative}
.ih-user-chip{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  padding:4px 8px 4px 4px;border-radius:var(--radius-md);color:inherit;font:inherit}
.ih-user-chip:hover{background:var(--bg-3)}
.ih-avatar{width:26px;height:26px;border-radius:50%;background:var(--k-card-raised);border:1px solid var(--line-3);
  flex:none;display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--font);color:var(--k-gold)}
.ih-user-info{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;text-align:left}
.ih-user-name{font:700 12px/1.2 var(--font);color:var(--fg-1);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ih-user-role{font:400 10.5px/1.2 var(--font);color:var(--fg-4)}
.ih-user-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;
  background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-md);
  box-shadow:0 10px 26px rgba(0,0,0,.35);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:20}
.ih-user-dropdown[hidden]{display:none}
.ih-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:none;color:var(--fg-2);font:400 12.5px/1 var(--font);padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer}
.ih-dropdown-item:hover{background:var(--bg-3);color:var(--fg-1)}

/* MISSION LIVE WORKSPACE -- OS-KEPHA-STUDIO-PRIMARY-LIVE-EXECUTION-AND-
   LAYMAN-RESPONSE-001 (2026-08-29): reorganiza a Home pra responder "o que
   a Kepha esta fazendo agora?" -- .ih-live (execucao ao vivo/plano/resposta/
   logs) deixa de ser coluna lateral estreita (38%) e vira o BLOCO PRIMARIO,
   empilhado abaixo do composer, largura total. "Suas missoes recentes"
   (grade de cards) sai do miolo -- essa pergunta ja tem dono (Centro de
   Missoes, item "minhas" da sidebar); a Home mantem so um link compacto (ver
   khRenderInicioView, intelligent_home.js). Reverte a decisao de layout de
   OS-KEPHA-STUDIO-LIVE-EXECUTION-RIGHT-RAIL-001 (2026-08-24, coluna lateral)
   por decisao NOVA e explicita do Owner -- mesmos 4 IDs/classes de sempre
   (#kh-autorun/#ih-plan/#ih-answer/#ih-logs, .ih-exec-pane/.ih-exec-tab),
   so a posicao/proporcao no layout muda, nenhuma logica de missao nem
   pipeline de evento novo. Layout unico (sem split lateral em nenhuma
   largura) -- resolve mobile "de graca" (requisito Parte R), por isso a
   antiga media query de empilhamento em <=980px foi absorvida aqui. */
.ih-main{grid-area:main;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  gap:0;width:100%;padding:0 20px;box-sizing:border-box}

/* divisoria de redimensionamento lateral nao se aplica mais ao layout
   empilhado (nao ha 2 colunas pra arrastar) -- elemento preservado no DOM
   (khInitLivePanel ainda referencia #ih-resizer sem quebrar), so oculto. */
.ih-resizer{display:none}
body.ih-resizing{cursor:col-resize!important}
body.ih-resizing *{-webkit-user-select:none;user-select:none}

/* painel de acompanhamento (.ih-live) -- agora BLOCO PRIMARIO, largura
   total, abaixo do composer (requisito 1/2/8: "console vivo" sempre
   visivel, rolagem propria independente do composer acima).
   #kh-autorun/#ih-plan/#ih-answer/#ih-logs continuam os MESMOS 4 IDs, e
   .ih-exec-pane/.ih-exec-tab/.active continuam as MESMAS classes que
   autorun_flow.js e mission_history.js ja escrevem via innerHTML -- so a
   posicao/largura/altura no layout muda, nenhuma logica de missao.
   .ih-live-header (novo): titulo/status/tempos/indicador de atividade da
   missao selecionada, ACIMA das abas -- fica visivel nao importa qual aba
   esta ativa (ver KH.setLiveHeader em intelligent_home.js). */
.ih-live{flex:1 1 auto;width:100%;max-width:1080px;align-self:center;
  min-width:0;margin:16px 0 28px;box-sizing:border-box;
  background:var(--surface-chrome);border:var(--border-hairline);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;min-height:min(560px,70vh);height:auto;overflow:hidden}
/* ZERO STATE INTELIGENTE -- OS-KEPHA-HOME-SMART-ZERO-STATE-001 +
   OS-KEPHA-STUDIO-CANONICAL-DESIGN-FINAL-LAYOUT-CLOSEOUT-001 (layout
   exato). .ih-live-technical (painel técnico de sempre) e .ih-live-zero
   (Estado atual/Próximas ações/Sugestões/Em palavras simples) são
   MUTUAMENTE EXCLUSIVOS -- toggle via .has-mission em #ih-live (ver
   KH.showLiveWorkspace/KH.showLiveZeroState, intelligent_home.js). */
.ih-live-technical{display:flex;flex-direction:column;flex:1;min-height:0}
.ih-live-zero{display:none;flex-direction:column;gap:22px;padding:24px 22px;overflow:auto;flex:1;min-height:0}
#ih-live:not(.has-mission) .ih-live-technical{display:none}
#ih-live:not(.has-mission) .ih-live-zero{display:flex}
.ih-zero-section h4,.ih-zero-hero-text>h4,.ih-zero-actions>h4{font:var(--text-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--fg-3);margin:0 0 10px}

/* GRID PRINCIPAL: Estado atual (1fr) | Próximas ações 3x2 (2fr) --
   KEPHA-DESIGN-SYSTEM.md, "HOME -- GRID PRINCIPAL". Empilha abaixo de
   900px (tablet/mobile), preservando a ordem (Estado atual primeiro). */
.ih-zero-maingrid{display:grid;grid-template-columns:1fr 2fr;gap:var(--k-gap,16px);align-items:stretch}
@media (max-width:900px){ .ih-zero-maingrid{grid-template-columns:1fr} }

/* Estado atual -- card de impacto dourado + mascote. Glow discreto
   (radial-gradient curto, sem blur pesado -- "não exagerar em glow" é
   requisito explícito do Design System). */
.ih-zero-hero{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:var(--k-pad-card,20px);
  border-radius:var(--k-r-lg);background:linear-gradient(135deg,var(--gold-wash),transparent 70%);
  border:1px solid var(--gold-line,transparent)}
.ih-zero-hero>.ih-zero-orb{align-self:flex-start}
.ih-zero-orb{flex:none;width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 38% 32%,rgba(240,178,63,.28),rgba(240,178,63,0) 72%)} /* rgb de --k-gold (#f0b23f) -- radial-gradient com alpha exige rgb literal */
.ih-zero-hero-title{font:700 17px/1.35 var(--font);color:var(--fg-1)}
.ih-zero-hero-sub{font:400 13px/1.4 var(--font);color:var(--fg-3);margin-top:4px}

/* Próximas ações -- grade 3 colunas x 2 linhas, 6 cards fixos (ver
   khZeroActionCardHtml). Empilha em telas estreitas (2 col, depois 1). */
.ih-zero-actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:1180px){ .ih-zero-actions-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .ih-zero-actions-grid{grid-template-columns:1fr} }
.ih-zero-card{background:var(--surface-card);border:var(--border-hairline);border-radius:var(--k-r-md);
  padding:13px 15px;cursor:pointer;color:var(--fg-1);font:600 13px/1.3 var(--font);text-align:left;
  display:flex;flex-direction:column;gap:6px;min-height:64px;
  transition:border-color var(--dur-ui) var(--ease-ui),background var(--dur-ui) var(--ease-ui)}
.ih-zero-card:hover{border-color:var(--gold-line);background:var(--bg-2)}
.ih-zero-card-icon{color:var(--k-gold)}
.ih-zero-card-mission{border-left:3px solid var(--gold-500)}
.ih-zero-card-meta{font:400 11px/1 var(--font-mono);color:var(--fg-5)}
.ih-zero-card-disabled{opacity:.5;cursor:default}
.ih-zero-card-disabled:hover{border-color:var(--border-hairline);background:var(--surface-card)}

/* Sugestões -- 3 colunas horizontais, ícone + título + descrição + chevron
   (KEPHA-DESIGN-SYSTEM.md, "HOME -- SUGESTÕES"). */
.ih-zero-suggestions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:900px){ .ih-zero-suggestions{grid-template-columns:1fr} }
.ih-zero-suggestion{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface-card);
  border:var(--border-hairline);border-radius:var(--k-r-md);padding:14px 15px;cursor:pointer;color:var(--fg-1);
  transition:border-color var(--dur-ui) var(--ease-ui),background var(--dur-ui) var(--ease-ui)}
.ih-zero-suggestion:hover{border-color:var(--gold-line);background:var(--bg-2)}
.ih-zero-suggestion-icon{flex:none;color:var(--k-gold)}
.ih-zero-suggestion-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ih-zero-suggestion-title{font:700 13px/1.3 var(--font);color:var(--fg-1)}
.ih-zero-suggestion-desc{font:400 11.5px/1.4 var(--font);color:var(--fg-3)}
.ih-zero-suggestion-chevron{flex:none;color:var(--fg-4)}

/* Banner "Em palavras simples" -- texto+fluxo à esquerda, área do mascote
   à direita (KEPHA-DESIGN-SYSTEM.md, "HOME -- BANNER FINAL"). */
.ih-zero-banner{display:flex;align-items:stretch;gap:20px;padding:var(--k-pad-card,20px);
  border-radius:var(--k-r-lg);background:var(--gold-wash);border:1px solid var(--gold-line,transparent)}
.ih-zero-banner-text{flex:1;min-width:0}
.ih-zero-banner-text p{margin:6px 0 12px;font-size:13px;line-height:1.55;color:var(--fg-1)}
.ih-zero-flow-tagline{font:600 12.5px/1.4 var(--font);color:var(--fg-1);margin:10px 0}
.ih-zero-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:12px;color:var(--fg-3)}
.ih-zero-flow-step{background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--radius-pill);
  padding:5px 12px;white-space:nowrap}
.ih-zero-flow-arrow{color:var(--gold-500);font-weight:700}
/* MASCOT_WAVE=PENDING_ASSET -- área reservada, largura fixa, placeholder
   neutro (ícone genérico) até assets/mascot-wave.png existir; nunca
   declarado como o asset final (ver KH.mascotSvg/khRenderLiveZeroState). */
.ih-zero-banner-mascot{flex:none;width:120px;display:flex;align-items:center;justify-content:center;
  border-left:1px dashed var(--gold-line,var(--line-2))}
.ih-zero-mascot-placeholder{width:64px;height:64px;border-radius:var(--k-r-lg);background:var(--k-card-raised);
  display:flex;align-items:center;justify-content:center;color:var(--fg-5)}

/* mascote (SVG próprio, ver KH.mascotSvg) -- discreto, nunca dominando a tela */
.kh-mascot{flex:none;display:block}

@media (max-width:640px){
  .ih-zero-banner{flex-direction:column}
  .ih-zero-banner-mascot{width:100%;border-left:none;border-top:1px dashed var(--gold-line,var(--line-2));padding-top:14px}
  .ih-zero-flow{justify-content:center}
}
/* "Expandir" (B3): esconde o composer acima, .ih-live ocupa quase toda a
   viewport util (sidebar/topbar continuam visiveis). "Recolher" (mesmo
   botao) volta ao estado anterior. */
#ih-main.ih-live-expanded{gap:0}
/* achado real ao validar com Playwright: #ih-center (elemento de verdade
   renderizado por KH.renderHome) -- .ih-content e um seletor legado que
   nunca chega a existir no DOM (nenhum lugar do JS aplica essa classe);
   escondendo .ih-content por engano nao escondia nada e o modo "Expandir"
   nao expandia de fato -- corrigido para o id real. */
#ih-main.ih-live-expanded #ih-center{display:none}
#ih-main.ih-live-expanded .ih-live{flex:1 1 auto;max-width:none;min-height:calc(100vh - 140px)}
/* "Tela cheia" (B4): cobre quase toda a viewport, Esc fecha (ver
   khInitLivePanelResize). Funciona em qualquer aba (Ao vivo/Alterações/
   Plano/Resposta/Logs) porque todas vivem dentro de .ih-live. */
.ih-live.ih-live-fullscreen{position:fixed;inset:14px;z-index:60;flex:none;width:auto;
  max-width:none;min-width:0;margin:0;height:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
/* B5/B6: mais espaço amplo (expandido/tela cheia) -> fonte de código um
   pouco maior, ainda monoespaçada (.cp-code vive em autorun_flow.css; regra
   aqui tem especificidade maior por causa das 2 classes de estado, então
   sempre vence a base, independente da ordem dos <link>) */
.ih-live.ih-live-fullscreen .cp-code,#ih-main.ih-live-expanded .cp-code{font-size:12.5px}
.ih-live-header{flex:none;padding:16px 16px 12px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ih-live-mascot{flex:none;display:flex;align-items:flex-start;padding-top:2px}
.ih-live-header-main{flex:1;min-width:0}
.ih-live-header-tools{flex:none;display:flex;gap:2px;padding-top:1px}
.ih-live-tool-btn{background:none;border:1px solid transparent;color:var(--fg-4);cursor:pointer;
  padding:5px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center}
.ih-live-tool-btn:hover{color:var(--fg-1);background:var(--bg-3)}
.ih-live-tool-btn.on{color:var(--gold-500);border-color:var(--line-2)}
.ih-live-activity{display:inline-flex;align-items:center;gap:6px;font:700 9.5px/1 var(--font-mono);
  letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-pill);
  background:var(--bg-3);color:var(--fg-4);margin-bottom:10px}
.ih-live-activity .dot{width:7px;height:7px;border-radius:50%;background:var(--fg-5);flex:none}
.ih-live-activity[data-state="live"]{background:var(--gold-wash);color:var(--gold-500)}
.ih-live-activity[data-state="live"] .dot{background:var(--gold-500);animation:ih-pulse 1.4s ease-in-out infinite}
.ih-live-activity[data-state="wait"]{background:var(--gold-wash);color:var(--gold-500)}
.ih-live-activity[data-state="wait"] .dot{background:var(--gold-500)}
.ih-live-activity[data-state="done"]{background:var(--ok-wash);color:var(--ok-500)}
.ih-live-activity[data-state="done"] .dot{background:var(--ok-500)}
.ih-live-activity[data-state="warn"]{background:var(--danger-wash);color:var(--danger-500)}
.ih-live-activity[data-state="warn"] .dot{background:var(--danger-500)}
.ih-live-activity[data-state="danger"]{background:var(--danger-wash);color:var(--danger-500)}
.ih-live-activity[data-state="danger"] .dot{background:var(--danger-500)}
@keyframes ih-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* "EXECUTANDO AGORA •••" -- 3 pontos animados em sequência (não o mesmo
   pulso do .dot, que já indica o estado geral). Só aparece quando
   data-state="live" (ver CSS abaixo); requisito explícito da OS-KEPHA-
   STUDIO-REPLICATE-APPROVED-UI-IN-PRODUCTION-001. */
.ih-live-dots{display:none;gap:2px;margin-left:2px}
.ih-live-activity[data-state="live"] .ih-live-dots{display:inline-flex}
.ih-live-dots i{width:3px;height:3px;border-radius:50%;background:currentColor;display:inline-block;
  animation:ih-dots-blink 1.2s ease-in-out infinite}
.ih-live-dots i:nth-child(2){animation-delay:.2s}
.ih-live-dots i:nth-child(3){animation-delay:.4s}
@keyframes ih-dots-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.ih-live-title{font:700 14px/1.35 var(--font);color:var(--fg-1);margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* frase de atividade real ("Analisando seu pedido...", "Sem nova
   atividade no momento" etc.) -- ver KH_LIVE_ACTIVITY_PHRASE,
   intelligent_home.js. Vazia (sem reservar espaço) fora de missão ao vivo. */
.ih-live-phrase{font:400 12px/1.4 var(--font);color:var(--gold-500);margin-bottom:8px;min-height:0}
.ih-live-phrase:empty{display:none}
.ih-live-subrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.ih-live-status-badge{font:700 9.5px/1 var(--font-mono);letter-spacing:.05em;color:var(--fg-3);
  background:var(--bg-3);border-radius:var(--radius-xs);padding:3px 8px;text-transform:uppercase}
.ih-live-times{font:400 10.5px/1 var(--font-mono);color:var(--fg-5)}
.ih-exec-tabs{display:flex;gap:2px;padding:12px 14px 0;flex:none}
.ih-exec-tab{font:700 9.5px/1 var(--font-mono);letter-spacing:.06em;padding:7px 10px;cursor:pointer;
  border:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:transparent;color:var(--fg-4)}
.ih-exec-tab.active{background:var(--bg-0);color:var(--gold-500)}
.ih-exec-pane{display:none;overflow:auto;flex:1;min-height:0;padding:16px 14px 20px;
  border-top:1px solid var(--line-2)}
.ih-exec-pane.active{display:flex;flex-direction:column;gap:16px}
.ih-live-head{font:700 12.5px/1.3 var(--font);color:var(--fg-1);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ih-live-idle{color:var(--fg-3);font-size:13px;text-align:center;padding:40px 10px;line-height:1.6}
.ih-live-idle span{font-size:12px;opacity:.85}
.ih-exec-pane h4{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--fg-3);margin:0 0 10px}
.ih-bottom-idle{color:var(--fg-4);font-size:12px}

/* MISSION COCKPIT — OS-KEPHA-STUDIO-FULLSCREEN-MISSION-COCKPIT-001. Com
   missão ativa (#ih-main.mission-active), a página inteira PARA de rolar
   (a área útil já é limitada por #intelligent-home:fixed+grid-template-
   rows:auto 1fr) -- só as 2 colunas internas rolam, cada uma na sua
   própria caixa (.ih-cockpit-left/.ih-cockpit-right), nunca a página. */
#ih-main.mission-active{overflow:hidden}
#ih-main.mission-active .ih-live{flex:1 1 auto;min-height:0;max-height:none;margin:10px 0 14px}
/* KEPHA-DESIGN-SYSTEM.md, "RUNNING -- GRID PRINCIPAL": grid-template-
   columns EXATO 2fr 1fr (antes flex 68/32 aproximado). */
.ih-cockpit-body{display:grid;grid-template-columns:2fr 1fr;flex:1;min-height:0;overflow:hidden}
.ih-cockpit-left{min-width:0;display:flex;flex-direction:column;min-height:0}
/* coluna direita "inteligência viva" (Agora/Descobertas/Bloqueios/Próximos
   passos prováveis/Metadados/Em palavras simples, ou Resposta condensada
   quando terminal) -- ver KH.renderCockpitIntel. Rolagem própria, nunca
   some ao trocar de aba à esquerda. */
.ih-cockpit-right{min-width:260px;overflow-y:auto;
  border-left:1px solid var(--line-2);padding:16px 16px 20px;display:flex;flex-direction:column;gap:16px}
.ih-cockpit-section h4{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--fg-3);margin:0 0 8px}
.ih-cockpit-line{font-size:13px;color:var(--fg-1);line-height:1.5}
.ih-cockpit-agora .ih-cockpit-line{font-weight:600;color:var(--gold-500)}
.ih-cockpit-layman{padding:12px;border-radius:var(--k-r-md);background:var(--gold-wash);
  border:1px solid var(--gold-line,transparent)}
.ih-cockpit-layman p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--fg-1)}
/* Metadados -- linhas rótulo/valor (KEPHA-DESIGN-SYSTEM.md, "RUNNING --
   GRID PRINCIPAL"), reaproveita os mesmos dados de target_resolution já
   coletados por arRenderTargetResolution (nunca um valor inventado). */
.ih-cockpit-meta-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:4px 0;
  border-bottom:1px solid var(--line-1)}
.ih-cockpit-meta-row:last-child{border-bottom:none}
.ih-cockpit-meta-row span:first-child{color:var(--fg-4)}
.ih-cockpit-meta-row span:last-child{color:var(--fg-1);font-weight:600;text-align:right}

/* TIMELINE HORIZONTAL (KEPHA-DESIGN-SYSTEM.md, "RUNNING -- TIMELINE") --
   largura total, abaixo do grid terminal/painel. Ver KH.renderCockpitTimeline. */
.ih-cockpit-timeline{flex:none;display:flex;align-items:center;gap:0;padding:10px 16px;
  border-top:1px solid var(--line-2);overflow-x:auto}
.ih-timeline-node{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;min-width:76px}
.ih-timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--line-3)}
.ih-timeline-label{font:600 10px/1 var(--font-mono);letter-spacing:.04em;color:var(--fg-4);white-space:nowrap}
.ih-timeline-connector{flex:1 1 24px;height:1px;background:var(--line-2);min-width:16px}
.ih-timeline-done .ih-timeline-dot{background:var(--k-success)}
.ih-timeline-done .ih-timeline-label{color:var(--fg-2)}
.ih-timeline-current .ih-timeline-dot{background:var(--k-gold);box-shadow:0 0 0 3px var(--k-gold-dim);animation:ih-pulse 1.4s ease-in-out infinite}
.ih-timeline-current .ih-timeline-label{color:var(--k-gold);font-weight:700}
.ih-timeline-failed .ih-timeline-dot{background:var(--k-danger)}
.ih-timeline-failed .ih-timeline-label{color:var(--k-danger)}
@media (max-width:1180px){
  .ih-cockpit-body{grid-template-columns:1.6fr 1fr}
}
@media (max-width:860px){
  .ih-cockpit-body{display:flex;flex-direction:column;overflow:visible}
  .ih-cockpit-left{flex:1 1 auto}
  .ih-cockpit-right{flex:none;max-width:none;max-height:46vh;border-left:none;border-top:1px solid var(--line-2)}
  #ih-main.mission-active{overflow-y:auto}
  #ih-main.mission-active .ih-live{max-height:none;height:auto}
}
.ih-stop-bar{align-items:center;justify-content:flex-end;padding:8px 14px;flex:none;
  border-top:1px solid var(--line-2);background:var(--danger-wash)}
.ih-stop-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;
  border:1px solid var(--danger-line);color:var(--danger-500);font:700 11px/1 var(--font);
  letter-spacing:.02em;padding:7px 12px;border-radius:var(--radius-md);cursor:pointer}
.ih-stop-btn:hover{background:var(--danger-500);color:var(--gold-ink);border-color:var(--danger-500)}
.ih-stop-btn:disabled{opacity:.5;cursor:default;background:transparent;color:var(--danger-500);border-color:var(--danger-line)}
.ih-target-resolution{flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 10px;margin-bottom:10px;
  background:var(--bg-inset);border:var(--border-gold);border-radius:var(--radius-md)}
.ih-tr-row{display:inline-flex;align-items:baseline;gap:5px;font-size:11.5px}
.ih-tr-lbl{color:var(--fg-4);font:400 10px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.05em}
.ih-tr-val{color:var(--fg-1);font-weight:600}
.ih-tr-conf{margin-left:auto;font:700 9px/1 var(--font-mono);letter-spacing:.06em;padding:2px 7px;
  border-radius:var(--radius-pill);text-transform:uppercase}
.ih-tr-conf-high{color:var(--ok-500);background:var(--ok-wash)}
.ih-tr-conf-medium{color:var(--gold-500);background:var(--gold-wash)}
.ih-tr-conf-low{color:var(--danger-500);background:var(--danger-wash)}

@media (max-width:980px){
  #intelligent-home{grid-template-columns:64px 1fr}
  /* Layout ja empilhado por padrao (ver .ih-main/.ih-live acima, unico
     layout desde OS-KEPHA-STUDIO-PRIMARY-LIVE-EXECUTION-AND-LAYMAN-
     RESPONSE-001) -- nao ha mais split lateral pra desfazer aqui. So
     ajustes de espaco realmente exclusivos de tela estreita permanecem. */
  .ih-live{max-height:60vh;margin:20px 0 28px}
  .ih-live-header-tools .ih-live-tool-expand{display:none}
  .ih-live.ih-live-fullscreen{position:fixed;inset:10px;max-height:none}
  .ih-user-name,.ih-user-role{max-width:90px}
  /* achado real durante o E2E visual desta OS (Playwright, 390x844):
     document.documentElement.scrollWidth===clientWidth (a métrica que a OS
     anterior usou para provar "mobile sem overflow") continua batendo
     mesmo aqui, porque #intelligent-home tem overflow:hidden -- ele
     CLIPA o excesso em vez de estourar o documento, escondendo o
     problema da métrica mas não da tela: #ih-notif/#ih-help (topbar)
     ficam maiores que a coluna disponível e o chip de usuário é cortado
     de verdade. #ih-notif/#ih-help são 100% redundantes com os itens
     "Notificações"/"Ajuda" que já existem na sidebar (mesmo handler --
     khSetView("notificacoes")/khOpenHelp(), ver KH.renderHome) -- ocultar
     só eles no mobile não remove nenhuma função, só a duplicata. */
  #ih-notif,#ih-help{display:none}
  .ih-side-brand span:not(.logo-img),.ih-side-item span{font-size:0}
  .ih-side-item{justify-content:center}
}

/* miolo central — dentro de #ih-main (que agora carrega o scroll da
   página inteira: composer + missões recentes + workspace da missão
   empilhados, ver .ih-main acima) */
.ih-center{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:min(6vh,60px) 20px 0;width:100%;max-width:820px;margin:0 auto;flex:none}
/* Home (KEPHA-DESIGN-SYSTEM.md, "HOME — LAYOUT EXATO"): coluna central
   max-width 1280px -- só na view "inicio" (ver khSetView), as demais
   views mantêm 820px (largura de leitura, nunca tocadas por esta OS). */
.ih-center.ih-center-home{max-width:1280px}
.ih-hero{font:var(--text-h1);letter-spacing:var(--tracking-h1);text-align:center;
  color:var(--fg-1);margin-bottom:6px}
.ih-sub{color:var(--fg-3);text-align:center;margin-bottom:26px;font:var(--text-body-sm)}

/* COMPOSER GRANDE -> compacto durante missão ativa (OS-KEPHA-STUDIO-
   FULLSCREEN-MISSION-COCKPIT-001, "COMPOSER"). Fora de missão ativa
   (#ih-main sem .mission-active) o botão fica oculto e o composer completo
   sempre visível -- comportamento de sempre, sem regressão. */
.ih-new-mission-btn{display:none;align-items:center;gap:6px;background:transparent;
  border:1px solid var(--line-3);color:var(--fg-2);border-radius:var(--radius-md);
  padding:8px 14px;font:700 12px/1 var(--font);cursor:pointer;margin:14px auto 0}
.ih-new-mission-btn:hover{border-color:var(--gold-line);color:var(--fg-1)}
#ih-main.mission-active{padding-top:6px}
#ih-main.mission-active .ih-center{padding-top:8px;flex:none}
#ih-main.mission-active .ih-new-mission-btn{display:inline-flex}
#ih-main.mission-active .ih-composer-full{display:none}
#ih-main.mission-active .ih-composer-full.forced{display:block;margin-top:14px;width:100%}

/* caixa de prompt — PromptField canônico (composers/studio.card.html) */
.ih-box{width:100%;background:var(--surface-card);border:var(--border-gold);border-radius:var(--radius-lg);
  padding:var(--space-5);transition:border-color var(--dur-ui) var(--ease-ui)}
.ih-prompt{width:100%;background:transparent;border:none;color:var(--fg-1);font:var(--text-body-md);
  resize:none;min-height:82px;padding:6px 8px}
.ih-prompt:focus{outline:none}
.ih-box-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:var(--space-7);flex-wrap:wrap}
.ih-box-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ih-box-hint{font:400 11.5px/1 var(--font-mono);color:var(--fg-5)}
.ih-mh-progress{margin-top:8px;padding:8px 12px;border-radius:var(--radius-md);background:var(--bg-3);
  border:1px solid var(--line-2);color:var(--fg-3);font-size:13px}
.ih-attach{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line-3);
  border-radius:var(--radius-md);padding:7px 12px;cursor:pointer;color:var(--fg-3);font-size:12.5px}
.ih-attach:hover{border-color:var(--gold-line);color:var(--fg-1)}
/* OS-KEPHA-AUTONOMOUS-REAL-TEST-RECOVERY-P0-001: estado real de gravacao
   do microfone (ver ihToggleMicRecording/intelligent_home.js) -- mesma
   moldura do .ih-attach, so troca cor pra indicar "gravando" de verdade. */
.ih-mic.recording{border-color:#c0392b;color:#c0392b}
.ih-mic.recording .kh-icon{animation:ih-mic-pulse 1.2s ease-in-out infinite}
@keyframes ih-mic-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.ih-send{background:var(--gold-500);border:1px solid transparent;color:var(--gold-ink);font-weight:800;
  border-radius:var(--radius-md);padding:9px 16px;cursor:pointer;font:800 13px/1 var(--font);display:inline-flex;align-items:center;gap:6px}
.ih-send:hover{background:var(--gold-100)} .ih-send:active{background:var(--gold-700)}
.ih-send:disabled{opacity:.45;cursor:default}

/* chips de intenção (Criar/Criar tela/Analisar/...) REMOVIDOS (2026-08-16,
   pedido direto do Owner: "tudo é resolvido pelo prompt, é por ali que a
   Kepha define o que vai ser executado") -- classes .ih-intents/.ih-chip/
   .ih-intent-hint não são mais renderizadas por intelligent_home.js;
   regras retiradas daqui para não deixar CSS morto. */

/* miniaturas de anexos */
.ih-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ih-thumb{position:relative;width:64px;height:64px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line-2);background:var(--bg-0)}
.ih-thumb img{width:100%;height:100%;object-fit:cover}
.ih-thumb .doc{display:flex;align-items:center;justify-content:center;height:100%;font-size:22px;color:var(--fg-4)}
.ih-thumb .rm{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:var(--fg-1);border:none;border-radius:50%;
  width:18px;height:18px;cursor:pointer;font-size:11px;line-height:1}
.ih-thumb .nm{position:absolute;bottom:0;left:0;right:0;font-size:8px;color:var(--fg-1);background:rgba(0,0,0,.55);padding:1px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Design Intake contextual (referência legada opcional) */
.ih-di{width:100%;margin-top:12px;background:var(--bg-inset);border:var(--border-gold);border-radius:var(--radius-md);padding:10px 12px;font-size:12px;display:none}
.ih-di.show{display:block}
.ih-di .ih-di-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.ih-di input{flex:1;min-width:200px;background:var(--bg-0);border:1px solid var(--line-2);border-radius:var(--radius-md);color:var(--fg-1);padding:7px 9px;font-size:12px}

/* prévia de missões recentes (ainda usada pelo card "Mission Console
   Clássico" em Dashboard Executivo, KH.renderRecent/project_cards.js --
   Design System não cobriu esta tela: painel hairline, radius-lg, sem
   sombra/transform, tons de status = StatusBadge). NÃO usada na Home
   (OS-KEPHA-HOME-REMOVE-MISSION-CENTER-LINK-001: nenhum atalho/lista de
   missão no miolo central -- Centro de Missões só na sidebar). */
.ih-recent{width:100%;margin-top:40px}
.ih-recent h3{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--fg-3);margin-bottom:12px;text-align:center}
.ih-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ih-card{background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-lg);padding:14px;cursor:pointer;
  transition:border-color var(--dur-ui) var(--ease-ui),background var(--dur-ui) var(--ease-ui)}
.ih-card:hover{border-color:var(--gold-line);background:var(--bg-2)}
.ih-card .c-name{font:var(--text-row);color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ih-card .c-status{font-size:12px;margin:6px 0}
.ih-card .c-meta{font:var(--text-meta);color:var(--fg-5)}
.ih-card .c-cont{margin-top:10px;font-size:12px;color:var(--gold-500)}
.ih-card .c-id{font:var(--text-meta);color:var(--fg-5);margin-top:6px;opacity:.8}
.st-draft{color:var(--fg-3)} .st-wait{color:var(--gold-500)} .st-recv{color:var(--gold-500)} .st-done{color:var(--ok-500)} .st-rej{color:var(--danger-500)}
.ih-empty{color:var(--fg-3);text-align:center;font-size:13px;padding:20px}

/* ===== fluxo guiado ===== */
#kh-flow{position:fixed;inset:0;z-index:8;background:var(--bg-0);overflow:auto;display:none;flex-direction:column}
#kh-flow.show{display:flex}
.kf-top{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line-2);background:var(--bg-1)}
.kf-title{font:700 13.5px/1 var(--font);display:flex;align-items:center;gap:10px;color:var(--fg-1)}
.kf-title .chip{background:var(--gold-wash);border-radius:var(--radius-xs);padding:2px 8px;font:var(--text-label);color:var(--gold-500)}
.kf-body{flex:1;display:grid;grid-template-columns:1fr;gap:0;min-height:0}
.kf-body.with-preview{grid-template-columns:minmax(360px,42%) 1fr}
.kf-left{padding:22px;overflow:auto;max-width:640px;margin:0 auto;width:100%}
.kf-right{border-left:1px solid var(--line-2);background:var(--surface-chrome);display:flex;flex-direction:column;min-height:0}
.kf-steps{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.kf-step{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius-md);font-size:13px;color:var(--fg-3)}
.kf-step .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:12px;border:1px solid var(--line-2)}
.kf-step.done{color:var(--fg-1)} .kf-step.done .n{background:var(--ok-500);color:var(--bg-inset);border:none}
.kf-step.cur{color:var(--fg-1);background:var(--bg-3)} .kf-step.cur .n{background:var(--gold-500);color:var(--gold-ink);border:none}
.kf-action{background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-lg);padding:18px;margin-bottom:14px}
.kf-action h4{font:var(--text-h2);margin-bottom:6px;color:var(--fg-1)}
.kf-action p{font:var(--text-body-sm);color:var(--fg-3);line-height:1.55;margin-bottom:12px}
.kf-primary{background:var(--gold-500);border:1px solid transparent;color:var(--gold-ink);font-weight:800;border-radius:var(--radius-md);padding:9px 16px;cursor:pointer;font-size:13px}
.kf-primary:hover{background:var(--gold-100)} .kf-primary:active{background:var(--gold-700)} .kf-primary:disabled{opacity:.45;cursor:default}
.kf-second{background:transparent;border:1px solid var(--line-3);color:var(--fg-2);border-radius:var(--radius-md);padding:9px 16px;cursor:pointer;font-size:12px;margin-left:8px}
.kf-second:hover{border-color:var(--gold-line);color:var(--fg-1)}
.kf-paste{width:100%;background:var(--bg-0);border:1px solid var(--line-2);border-radius:var(--radius-md);color:var(--fg-1);padding:10px;font-family:var(--font-mono);font-size:12px;min-height:150px;margin-bottom:10px}
.kf-verdict{font-size:13px;margin-top:10px}
.kf-pkg{background:var(--surface-terminal);border:var(--border-hairline);border-radius:var(--radius-md);padding:12px;font-size:12px;color:var(--fg-3);margin-bottom:12px}
.kf-pkg code{color:var(--gold-500);font-size:11px}
.kf-preview-frame{flex:1;width:100%;min-height:340px;border:none;background:#fff}
.kf-preview-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--fg-3);text-align:center;padding:30px}
.kf-refs{padding:10px 14px;border-top:1px solid var(--line-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kf-refs img{height:52px;border-radius:var(--radius-sm);border:1px solid var(--line-2);cursor:pointer}
.kf-refs .lbl{font-size:11px;color:var(--fg-3);width:100%}
details.kf-tech{margin-top:16px;background:var(--bg-1);border:var(--border-hairline);border-radius:var(--radius-md);padding:10px 12px}
details.kf-tech summary{cursor:pointer;color:var(--fg-3);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
details.kf-tech pre{font:400 11px/1.6 var(--font-mono);color:var(--fg-3);white-space:pre-wrap;margin-top:8px;max-height:260px;overflow:auto}

/* ===== menu simplificado real (golive): views "Minhas Missões"/"Entregas"/
   "Histórico"/"Notificações"/"Minha Conta" — miolo central (#ih-center)
   trocado pelo roteador khSetView em intelligent_home.js.
   OS-KEPHA-FINAL-100PCT-OPERATIONAL-UX-USERS-EXECUTIVE-ECONOMIC-GOLIVE-001 */
.ih-view-head{width:100%;margin-bottom:18px}
.ih-view-head h2{font:var(--text-h1);letter-spacing:var(--tracking-h1);margin-bottom:4px;color:var(--fg-1)}
.ih-view-head p{color:var(--fg-3);font:var(--text-body-sm);line-height:1.5}

/* lista completa de missões — grade canônica de MissionRow
   (Design System SPEC.md §4: minmax(240px,1fr) 132px 104px 84px, cabeçalho
   MISSÃO/ESTADO/QUANDO/AÇÃO). Kepha tem mais estados reais que o
   waiting/ready/error/done do artefato (DEPARTMENTS/EXECUTION/CORRECTION/
   VRC/PAUSED/...): mapeados por PROPÓSITO visual — dourado="em andamento/
   precisa atenção do sistema", neutro="concluída", terracota="falha" — não
   pelo nome literal do estado, que o Design System nunca viu. */
.ih-mlist-head{display:grid;grid-template-columns:minmax(240px,1fr) 150px 150px 120px;gap:10px;
  padding:9px 16px;font:700 9px/1 var(--font-mono);letter-spacing:.1em;color:var(--fg-5);
  border-bottom:1px solid var(--line-1)}
.ih-mlist{width:100%;display:flex;flex-direction:column;background:var(--surface-chrome);
  border:var(--border-hairline);border-radius:var(--radius-lg);overflow:hidden}
.ih-mrow{display:grid;grid-template-columns:minmax(240px,1fr) 150px 150px 120px;gap:10px;align-items:center;
  padding:11px 16px;border-bottom:1px solid var(--line-1)}
.ih-mrow:last-child{border-bottom:none}
.ih-mrow-main{min-width:0}
.ih-mrow-title{font:var(--text-row);color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ih-mrow-goal{font:var(--text-meta);color:var(--fg-5);margin-top:3px;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.ih-mrow-meta{display:flex;flex-direction:column;gap:3px;font:var(--text-meta);color:var(--fg-4)}
.ih-mrow-state{opacity:.85}
.ih-mrow-when{opacity:.7}
.ih-mrow-progress{height:4px;border-radius:var(--radius-pill);background:var(--bg-3);overflow:hidden;max-width:120px}
.ih-mrow-progress-bar{height:100%;background:var(--gold-500);border-radius:var(--radius-pill)}
.c-status{display:inline-flex;align-items:center;gap:6px;font:var(--text-label);letter-spacing:.1em;
  padding:4px 9px;border-radius:var(--radius-xs);text-transform:uppercase;width:fit-content}
.st-recv,.st-wait{color:var(--gold-500);background:var(--gold-wash)}
.st-done{color:var(--ok-500);background:var(--ok-wash)}
.st-rej{color:var(--danger-500);background:var(--danger-wash);border:1px solid var(--danger-line)}

/* notificações */
.ih-notif-list{width:100%;display:flex;flex-direction:column;gap:8px}
.ih-notif-item{background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-lg);padding:12px 14px;cursor:pointer;
  transition:border-color var(--dur-ui) var(--ease-ui)}
.ih-notif-item:hover{border-color:var(--gold-line)}
.ih-notif-msg{font-size:13px;color:var(--fg-1)}
.ih-notif-meta{font:var(--text-meta);color:var(--fg-5);margin-top:4px}
.ih-icon-btn.has-unread{color:var(--gold-500)}

/* minha conta */
.ih-account-card{width:100%;max-width:460px;background:var(--surface-card);border:var(--border-hairline);
  border-radius:var(--radius-lg);padding:18px}
.ih-account-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid var(--line-1);font-size:13px}
.ih-account-row:last-of-type{border-bottom:none}
.ih-account-row span{color:var(--fg-3)}
.ih-account-row b{color:var(--fg-1);font-weight:600}

/* ---- Centro de Missões (OS-KEPHA-FINAL-MISSION-CENTER-DRILLDOWN-GOLIVE-
   CLOSURE-001): toolbar (agrupar/escopo/busca/filtro), grupos colapsáveis
   (usuário/vps+sistema/linha do tempo) e painel de contexto (drill-down). */
.mc-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.mc-group-toggle{display:flex;flex-wrap:wrap;gap:6px}
.mc-toggle{margin-left:0}
.mc-toggle.active{background:var(--gold-wash);color:var(--gold-100);border-color:var(--gold-line);font-weight:700}
.mc-scope{display:flex;gap:6px;margin-left:auto}
.mc-search{flex:1 1 220px;min-width:180px;background:var(--bg-3);border:1px solid var(--line-3);
  border-radius:var(--radius-md);padding:9px 12px;color:var(--fg-1);font-size:12.5px}
.mc-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.mc-filters select{background:var(--bg-3);border:1px solid var(--line-3);border-radius:var(--radius-md);
  padding:7px 10px;color:var(--fg-2);font-size:12px}

.mc-group{margin-bottom:14px;background:var(--surface-chrome);border-radius:var(--radius-lg);overflow:hidden}
.mc-group-head{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;
  background:var(--bg-3);user-select:none}
.mc-group-title{font-weight:700;color:var(--fg-1);font-size:13px}
.mc-group-count{color:var(--fg-5);font:var(--text-meta)}
.mc-group-head .mc-drill{margin-left:auto}
/* Achado real de validação visual em produção (tablet 768px): a grade de
   5 colunas (.mc-mlist-head/.mc-row) soma >700px de largura mínima e
   estourava pra fora do painel principal, ficando cortada atrás da
   sidebar (overflow que impede uso). overflow-x:auto AQUI (nunca no body
   da página) contém o scroll dentro do próprio componente. */
.mc-group-body{display:flex;flex-direction:column;overflow-x:auto}
.mc-group-body.collapsed{display:none}

.mc-vps-block{margin-bottom:18px}
.mc-vps-head{display:flex;align-items:center;gap:10px;padding:6px 2px 10px}
.mc-vps-title{font:var(--text-h1);font-size:16px;color:var(--fg-1)}

.mc-mlist-head{display:grid;grid-template-columns:minmax(220px,1fr) 140px 130px 100px 100px;gap:10px;
  padding:8px 14px;font:var(--text-label);letter-spacing:.08em;color:var(--fg-5);text-transform:uppercase}
.mc-row{display:grid;grid-template-columns:minmax(220px,1fr) 140px 130px 100px 100px;gap:10px;
  align-items:center;padding:10px 14px;border-top:1px solid var(--line-1)}
.mc-row-main{min-width:0}
.mc-row-title{font:var(--text-row);color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-row-sub{font:var(--text-meta);color:var(--fg-5);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-row-when,.mc-row-dur{font:var(--text-meta);color:var(--fg-4)}

.mc-context-panel{width:min(880px,96vw);overflow-x:auto}
.mc-context-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0 6px}
.mc-context-summary>div{background:var(--bg-3);border-radius:var(--radius-md);padding:10px 12px}
.mc-cs-label{display:block;font:var(--text-meta);color:var(--fg-5);margin-bottom:3px}
.mc-cs-value{display:block;font-size:15px;font-weight:700;color:var(--fg-1)}

@media (max-width: 720px){
  .mc-mlist-head{display:none}
  .mc-row{grid-template-columns:1fr;gap:4px}
  .mc-scope{margin-left:0;width:100%}
}