:root {
  color-scheme: dark;
  --bg: #030207;
  --text: #f8f7ff;
  --muted: #a8a1b8;
  --violet: #a855f7;
  --violet-2: #c084fc;
  --cyan: #22d3ee;
  --green: #34d399;
  --radius: 8px;
  --sidebar-width: 252px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(168, 85, 247, .15), transparent 28rem),
    radial-gradient(circle at 20% 88%, rgba(34, 211, 238, .07), transparent 32rem),
    linear-gradient(135deg, #05030a 0%, #080712 47%, #020308 100%);
}

button, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.vc-app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  transition: grid-template-columns .22s ease;
}

.vc-app-shell[data-sidebar-state="collapsed"] { --sidebar-width: 78px; }

.vc-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 14px;
  border-right: 1px solid rgba(255, 255, 255, .07);
  background: rgba(4, 4, 9, .72);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.vc-side-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vc-side-brand,
.vc-brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.vc-side-brand { flex: 1 1 auto; }

.vc-side-brand strong,
.vc-brand-copy strong {
  display: block;
  font-size: 15px;
  font-weight: 850;
  color: #fff;
  letter-spacing: .02em;
}

.vc-side-brand small,
.vc-brand-copy small {
  display: block;
  margin-top: 3px;
  color: #b7a9cd;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .11em;
  white-space: nowrap;
}

.vc-logo-orb {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(216, 180, 254, .78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, #fff 0 5%, #f5d0fe 6% 13%, transparent 14%),
    radial-gradient(circle at 42% 36%, #f0abfc 0 12%, #c084fc 25%, #7c3aed 52%, #2b0a54 76%, #07020f 100%);
  box-shadow:
    0 0 13px rgba(216, 180, 254, .9),
    0 0 34px rgba(168, 85, 247, .7),
    0 0 70px rgba(124, 58, 237, .34),
    inset -8px -10px 18px rgba(15, 2, 34, .76),
    inset 5px 5px 12px rgba(255, 255, 255, .16);
}

.vc-logo-orb-large {
  width: 54px;
  height: 54px;
}

.vc-sidebar-toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #e9e4f6;
  background: rgba(18, 14, 28, .72);
}

.vc-sidebar-toggle span { font-size: 21px; line-height: 1; }

.vc-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vc-nav a,
.vc-nav-help {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #bdb5ca;
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
}

.vc-nav i,
.vc-nav-help i {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 180, 254, .14);
  border-radius: 7px;
  color: #d8b4fe;
  background: rgba(168, 85, 247, .08);
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
}

.vc-nav a:hover,
.vc-nav a.is-active,
.vc-nav-help:hover {
  color: #fff;
  background: rgba(168, 85, 247, .11);
  border-color: rgba(216, 180, 254, .15);
}

.vc-nav-group summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: #958aa7;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
}

.vc-nav-group summary::-webkit-details-marker { display: none; }

.vc-nav-group summary:hover { color: #e9e4f6; }

.vc-nav-group summary i { transition: transform .15s ease; }

.vc-nav-group[open] > summary i { transform: rotate(90deg); }

.vc-nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.vc-sidebar-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #958aa7;
  font-size: 12px;
  white-space: nowrap;
}

.vc-status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px rgba(52, 211, 153, .7);
}

.vc-app-shell[data-sidebar-state="collapsed"] .vc-side-copy,
.vc-app-shell[data-sidebar-state="collapsed"] .vc-nav span,
.vc-app-shell[data-sidebar-state="collapsed"] .vc-sidebar-foot span:not(.vc-status-dot) {
  display: none;
}

.vc-app-shell[data-sidebar-state="collapsed"] .vc-sidebar { align-items: center; padding-inline: 12px; }
.vc-app-shell[data-sidebar-state="collapsed"] .vc-side-top { flex-direction: column; }
.vc-app-shell[data-sidebar-state="collapsed"] .vc-sidebar-toggle span { transform: rotate(180deg); }
.vc-app-shell[data-sidebar-state="collapsed"] .vc-nav a,
.vc-app-shell[data-sidebar-state="collapsed"] .vc-nav-help,
.vc-app-shell[data-sidebar-state="collapsed"] .vc-nav-group summary { justify-content: center; padding-inline: 8px; }

/* ARCHITECTURAL PRINCIPLE-004: sem zona reservada global pro Atomic Core —
   ele agora vive dentro do fluxo de #vcChatScroll, não da viewport inteira. */
.vc-main {
  min-width: 0;
  min-height: 100vh;
  padding: 22px clamp(24px, 5vw, 72px) 34px;
}

.vc-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.vc-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.vc-agent-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.vc-agent-badge[data-state="connected"]::before { background: var(--green); box-shadow: 0 0 10px rgba(52,211,153,.5); }
.vc-agent-badge[data-state="disconnected"]::before { background: #6b7280; }
.vc-agent-badge[data-state="error"]::before { background: #f59e0b; }

.vc-project-context {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
}
.vc-project-context label { font-weight: 750; color: var(--text); }
.vc-project-context select,
.vc-project-context input,
.vc-project-context button {
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(13,10,22,.82);
  color: var(--text);
  font: inherit;
}
.vc-project-context select { max-width: 170px; padding: 0 8px; }
.vc-project-context input { width: 120px; padding: 0 8px; }
.vc-project-context button { padding: 0 10px; font-weight: 750; cursor: pointer; }
.vc-project-context :disabled { opacity: .5; cursor: not-allowed; }
.vc-project-context span { max-width: 150px; line-height: 1.25; }
.vc-user-menu { position: relative; flex: 0 0 auto; }
.vc-user-menu summary { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 750; list-style: none; }
.vc-user-menu summary::-webkit-details-marker { display: none; }
.vc-user-menu summary span:first-child { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: rgba(168,85,247,.22); color: #fff; }
.vc-user-dropdown { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; min-width: 160px; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #120d1d; box-shadow: 0 16px 35px rgba(0,0,0,.4); }
.vc-user-dropdown button { padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.vc-user-dropdown button:hover, .vc-user-dropdown button:focus-visible { background: rgba(168,85,247,.16); }

.vc-operation-logs:not([hidden]) { display: grid; gap: 10px; }
.vc-operation-log-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.vc-operation-log-filters label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.vc-operation-log-filters input,
.vc-operation-log-filters button { min-height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(13,10,22,.82); color: var(--text); padding: 0 9px; }
.vc-operation-log-entry { display: grid; grid-template-columns: minmax(150px,1fr) minmax(100px,.6fr) minmax(180px,1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 11px; }
[data-state="loading"] { color: var(--muted); }
[data-state="empty"] { color: #a99eb9; }
[data-state="error"] { color: #f87171; }
[data-state="success"] { color: var(--green); }

.vc-brand-copy { min-width: 0; }
.vc-brand-copy strong { font-size: 22px; }

/* DECISION-022: cabecalho generico + Atomic Core so aparecem em Chat;
   regra dura #13 (CLAUDE.md) -- .vc-brand-lockup/.vc-agent-badge ja
   declaram display fora de qualquer gate [hidden], entao o gate precisa
   de especificidade de ID pra vencer, independente da ordem no arquivo. */
#vcBrandLockup[hidden],
#vcAgentBadge[hidden],
#vcPageHead[hidden] { display: none; }

/* Achado real (2026-07-12): .vc-chat-stage era min(940px,100%) + margin:0
   auto, centralizado dentro de .vc-main -- isso deixava o Atomic Core
   (align-self:flex-end DENTRO dessa coluna) encostado na borda direita da
   coluna de 940px, não na borda real da área de conteúdo, com uma faixa
   vazia visível entre os dois. Largura total aqui é segura: bolhas de
   mensagem (.vc-message, 760px) e o card de status (.vc-feature-panel,
   760px) já têm seu próprio max-width independente do stage -- só o
   Atomic Core usa a largura real do stage pra se ancorar. */
.vc-chat-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: clamp(16px, 3vh, 34px);
  padding-bottom: 24px;
  min-height: calc(100vh - 116px);
}

/* ARCHITECTURAL PRINCIPLE-004 (ver DECISIONS.md, achado 2026-07-12): nao
   scrolla mais por conta propria -- isso criava uma segunda barra de
   rolagem interna, competindo com a rolagem nativa da pagina (que
   .vc-app-shell/.vc-sidebar ja assumiam via min-height:100vh/position:
   sticky). Agora e um container de fluxo normal; a pagina real rola.
   padding-bottom sincronizado via JS (ResizeObserver no composer) com a
   altura real do composer, pra preservar a regra dura #12 (nada nasce
   escondido atras do composer sticky) sem depender de scroll isolado. */
.vc-chat-scroll {
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 160px; /* fallback if ResizeObserver is unsupported/unavailable; JS keeps this in sync with the real composer height */
}

.vc-kicker {
  margin: 0 0 12px;
  color: var(--violet-2);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .24em;
}

.vc-feature-panel {
  display: grid;
  gap: 10px;
  max-width: min(760px, 100%);
  padding: 13px 15px;
  border: 1px solid rgba(216, 180, 254, .12);
  border-radius: var(--radius);
  background: rgba(5, 5, 10, .54);
}
#vcFeaturePanel[hidden] { display: none; }

/* ARCHITECTURAL PRINCIPLE-004 (ver DECISIONS.md): Dashboard precisa da
   largura total do .vc-chat-stage--wide — sem isso, o próprio
   #vcFeaturePanel (max-width:760px) continuaria comprimindo o painel. */
.vc-feature-panel.vc-feature-panel--wide { max-width: none; }

.vc-feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.vc-feature-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vc-feature-head span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(52, 211, 153, .22);
  border-radius: 999px;
  color: #86efac;
  background: rgba(52, 211, 153, .08);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
}

.vc-feature-head strong {
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vc-feature-head button {
  min-height: 28px;
  border: 1px solid rgba(216, 180, 254, .14);
  border-radius: 999px;
  padding: 0 10px;
  color: #d8b4fe;
  background: rgba(18, 14, 28, .62);
  font-size: 10px;
  font-weight: 780;
}

.vc-feature-panel p {
  margin: 0;
  color: #bdb4cf;
  font-size: 13px;
  line-height: 1.45;
}

.vc-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vc-feature-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #efe9ff;
  background: rgba(18, 14, 28, .72);
  font-size: 11px;
  font-weight: 760;
}

.vc-feature-actions button:hover {
  border-color: rgba(192, 132, 252, .44);
}

.vc-safe-status:not([hidden]),
.vc-secret-guard-card:not([hidden]) {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 180, 254, .12);
}

.vc-safe-status h4,
.vc-secret-guard-card h4 {
  margin: 0;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vc-safe-status-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  color: #bdb4cf;
  font-size: 11px;
}

.vc-safe-status-row strong {
  color: #e9ddff;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ok = endpoint real respondeu; local = fallback (endpoint ausente/erro) —
   nunca tratado como erro agressivo, só um estado visual mais discreto. */
.vc-safe-status-row[data-state="ok"] strong { color: var(--green); }
.vc-safe-status-row[data-state="local"] strong { color: #facc15; }

.vc-secret-guard-grid {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 7px 12px;
  color: #bdb4cf;
  font-size: 12px;
}

.vc-secret-guard-grid strong {
  color: #86efac;
  font-size: 10px;
  letter-spacing: .08em;
}

.vc-github-pr:not([hidden]) {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 180, 254, .12);
}

.vc-github-pr h4 {
  margin: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vc-github-pr label {
  display: grid;
  gap: 4px;
  color: #b7a9cd;
  font-size: 11px;
  font-weight: 700;
}

.vc-github-pr input,
.vc-github-pr textarea {
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: var(--radius);
  background: rgba(18, 14, 28, .72);
  color: #fff;
  font-size: 13px;
  padding: 8px 10px;
  resize: vertical;
}

.vc-github-pr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vc-github-pr-actions button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #efe9ff;
  background: rgba(18, 14, 28, .78);
  font-size: 12px;
  font-weight: 760;
}

.vc-github-pr-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.vc-github-pr-actions button:not(:disabled):hover {
  border-color: rgba(192, 132, 252, .44);
}

.vc-github-pr-status {
  margin: 0;
  color: #bdb4cf;
  font-size: 12px;
  line-height: 1.45;
}

.vc-github-pr-status a { color: #c4b5fd; text-decoration: underline; }

.vc-mission-patch:not([hidden]) {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 180, 254, .12);
}

.vc-mission-patch h4 {
  margin: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vc-mission-patch label {
  display: grid;
  gap: 4px;
  color: #b7a9cd;
  font-size: 11px;
  font-weight: 700;
}

.vc-mission-patch input,
.vc-mission-patch textarea {
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: var(--radius);
  background: rgba(18, 14, 28, .72);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px;
  resize: vertical;
}

.vc-mission-patch #vcMissionFileContent,
.vc-mission-patch #vcMissionDesc {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.vc-mission-patch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vc-mission-patch-actions button,
.vc-mission-patch > #vcMissionDownloadBtn {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #efe9ff;
  background: rgba(18, 14, 28, .78);
  font-size: 12px;
  font-weight: 760;
}

.vc-mission-patch-actions button:disabled,
.vc-mission-patch > #vcMissionDownloadBtn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.vc-mission-patch-actions button:not(:disabled):hover,
.vc-mission-patch > #vcMissionDownloadBtn:not(:disabled):hover {
  border-color: rgba(192, 132, 252, .44);
}

.vc-mission-patch-status {
  margin: 0;
  color: #bdb4cf;
  font-size: 12px;
  line-height: 1.45;
}

.vc-mission-patch-output:not([hidden]) {
  display: block;
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: var(--radius);
  background: rgba(4, 4, 9, .9);
  color: #d1fae5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}


.vc-agent-apply:not([hidden]) {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 180, 254, .12);
}

.vc-agent-apply h4 {
  margin: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vc-agent-apply-banner {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(248, 113, 113, .42);
  border-left: 3px solid rgba(248, 113, 113, .82);
  border-radius: var(--radius);
  background: rgba(248, 113, 113, .08);
  color: #fecaca;
  font-size: 12px;
  line-height: 1.5;
}

.vc-agent-apply label {
  display: grid;
  gap: 4px;
  color: #b7a9cd;
  font-size: 11px;
  font-weight: 700;
}

.vc-agent-apply input,
.vc-agent-apply textarea {
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: var(--radius);
  background: rgba(18, 14, 28, .72);
  color: #fff;
  font-size: 13px;
  padding: 8px 10px;
}

.vc-agent-apply textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  resize: vertical;
}

.vc-agent-apply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vc-agent-apply-actions button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #efe9ff;
  background: rgba(18, 14, 28, .78);
  font-size: 12px;
  font-weight: 760;
}

.vc-agent-apply-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.vc-agent-apply-actions button:not(:disabled):hover {
  border-color: rgba(248, 113, 113, .55);
}

.vc-agent-apply-status {
  margin: 0;
  color: #bdb4cf;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.vc-dry-run:not([hidden]) {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 180, 254, .12);
}

.vc-dry-run h4 {
  margin: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vc-dry-run-banner {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(250, 204, 21, .38);
  border-left: 3px solid rgba(250, 204, 21, .7);
  border-radius: var(--radius);
  background: rgba(250, 204, 21, .08);
  color: #fde68a;
  font-size: 12px;
  line-height: 1.5;
}

.vc-dry-run label {
  display: grid;
  gap: 4px;
  color: #b7a9cd;
  font-size: 11px;
  font-weight: 700;
}

.vc-dry-run input {
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: var(--radius);
  background: rgba(18, 14, 28, .72);
  color: #fff;
  font-size: 13px;
  padding: 8px 10px;
}

.vc-dry-run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vc-dry-run-actions button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #efe9ff;
  background: rgba(18, 14, 28, .78);
  font-size: 12px;
  font-weight: 760;
}

.vc-dry-run-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.vc-dry-run-actions button:not(:disabled):hover {
  border-color: rgba(192, 132, 252, .44);
}

.vc-dry-run-status {
  margin: 0;
  color: #bdb4cf;
  font-size: 12px;
  line-height: 1.45;
}

/* Apply Fix (Tools) */
.vc-apply-fix:not([hidden]) {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 180, 254, .12);
}
.vc-apply-fix h4 {
  margin: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vc-apply-fix-banner {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(251,191,36,.3);
  border-radius: var(--radius);
  background: rgba(251,191,36,.07);
  color: #fcd34d;
  font-size: 12px;
  line-height: 1.45;
}
.vc-apply-fix-banner code { font-size: 11px; color: #fde68a; }
.vc-apply-fix label {
  display: grid;
  gap: 4px;
  color: #b7a9cd;
  font-size: 11px;
  font-weight: 700;
}
.vc-apply-fix input,
.vc-apply-fix textarea {
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: var(--radius);
  background: rgba(18, 14, 28, .72);
  color: #fff;
  font-size: 13px;
  padding: 8px 10px;
  resize: vertical;
}
.vc-apply-fix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vc-apply-fix-actions button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #efe9ff;
  background: rgba(18, 14, 28, .78);
  font-size: 12px;
  font-weight: 760;
}
.vc-apply-fix-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.vc-apply-fix-actions button:not(:disabled):hover {
  border-color: rgba(192, 132, 252, .44);
}
.vc-apply-fix-preview:not([hidden]) {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(52,211,153,.25);
  border-radius: var(--radius);
  background: rgba(52,211,153,.05);
}
.vc-apply-fix-preview h5 {
  margin: 0;
  font-size: 11px;
  color: var(--green);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vc-apply-fix-preview pre {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.2);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-x: auto;
}
#vcApplyFixDiffBefore { color: #fca5a5; }
#vcApplyFixDiffAfter { color: #86efac; }
.vc-apply-fix-status {
  margin: 0;
  color: #bdb4cf;
  font-size: 12px;
  line-height: 1.45;
}

.vc-composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vc-composer-actions button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #e9e4f6;
  background: rgba(18, 14, 28, .78);
  font-size: 12px;
  font-weight: 760;
}

.vc-composer-actions button:hover {
  border-color: rgba(192, 132, 252, .42);
}


.vc-chat-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: end;
  min-height: 230px;
  padding-bottom: 6px;
}

.vc-message {
  max-width: min(760px, 100%);
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  background: rgba(9, 8, 16, .58);
}

.vc-message span {
  display: block;
  margin-bottom: 7px;
  color: #c4b5fd;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}

.vc-message p { margin: 0; color: #ded8ea; line-height: 1.55; }
.vc-message-user { align-self: flex-end; background: rgba(124, 58, 237, .18); border-color: rgba(192, 132, 252, .22); }
.vc-message-pending { border-color: rgba(250, 204, 21, .22); }

.vc-composer {
  width: 100%;
  position: sticky;
  bottom: 18px;
  z-index: 20;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 14px;
  background: rgba(8, 7, 13, .82);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px);
}

.vc-composer textarea {
  width: 100%;
  max-height: 180px;
  resize: none;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  outline: 0;
  padding: 12px 13px;
  color: #f7f7f8;
  background: #2f2f2f;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color .15s ease, background-color .15s ease;
}

.vc-composer:hover textarea { background: #323232; }
.vc-composer:focus-within textarea { border-color: rgba(255, 255, 255, .16); }
.vc-composer textarea:disabled { color: #a9a9ad; background: #292929; border-color: rgba(255, 255, 255, .05); }
.vc-composer textarea::placeholder { color: #a0a0a7; }
.vc-composer-actions { justify-content: flex-end; }
.vc-composer-actions .vc-send {
  color: #fff;
  border-color: rgba(192, 132, 252, .56);
  background: linear-gradient(135deg, rgba(147, 51, 234, .95), rgba(6, 182, 212, .65));
  box-shadow: 0 0 20px rgba(168, 85, 247, .25);
}

/* Indicador periférico do Chat: sticky é limitado por #vcChatScroll e
   acompanha a rolagem única da página sem escapar para o viewport global.
   A coluna vazia da Hero reserva espaço no estado inicial; as margens
   compensam a caixa no fluxo sem aproximá-la do composer. */
.vc-atomic-hud {
  --atomic-core-size: min(260px, 20vw);
  --atomic-safe-area: 36px;
  --atomic-intensity: 1;
  position: sticky;
  top: calc(100vh - var(--vc-composer-height, 112px) - var(--atomic-core-size) - 70px);
  align-self: flex-end;
  z-index: 8;
  margin: calc(-1 * (var(--atomic-core-size) - 18px)) 10px -38px auto;
  width: calc(var(--atomic-core-size) + (var(--atomic-safe-area) * 2));
  aspect-ratio: 1;
  pointer-events: none;
  opacity: calc(.76 * var(--atomic-intensity));
  contain: layout;
  transition: opacity .32s ease, transform .32s ease;
}

/* Fase 1.5: recolhe só no Modo Avançado do Software Factory (colisão real
   confirmada por screenshot contra a zona reservada acima) — nunca via
   display:none, pra manter a transição suave; vc-no-transition aplica o
   estado final sem animação sob reduced-motion (window.VCMotion). */
.vc-atomic-hud.is-collapsed {
  opacity: 0;
  transform: scale(.85);
}
.vc-atomic-hud.vc-no-transition {
  transition: none;
}

/* next-clean-79: Atomic Core e chat stream sao exclusivos da aba Chat. */
.vc-app-shell[data-active-feature]:not([data-active-feature="chat"]) .vc-atomic-hud,
.vc-app-shell[data-active-feature]:not([data-active-feature="chat"]) #vcChatStream {
  display: none;
}

.vc-app-shell[data-active-feature="factory"] #vcChatScroll {
  display: none;
}

.vc-app-shell[data-active-feature]:not([data-active-feature="chat"]) #vcFeaturePanel > .vc-feature-head {
  display: none;
}

.vc-atomic-rings,
.vc-core-node,
.vc-agent { position: absolute; left: 50%; top: 50%; }
.vc-atomic-rings { width: var(--atomic-core-size); height: var(--atomic-core-size); transform: translate(-50%, -50%); overflow: visible; }
.vc-atomic-ring { fill: none; stroke: rgba(250, 204, 21, .035); stroke-width: .75; }
.vc-orbit-ring,
.vc-orbit-decagon,
.vc-orbit-spokes line { fill: none; stroke: rgba(216, 180, 254, .075); stroke-width: .7; }
.vc-orbit-ring-secondary { opacity: .55; }
.vc-orbit-spokes { opacity: .65; }

.vc-core-node {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(216, 180, 254, .38);
  border-radius: 50%;
  color: #f8f3ff;
  background: radial-gradient(circle at 36% 28%, rgba(216, 180, 254, .42), rgba(88, 28, 135, .88) 58%, rgba(24, 10, 42, .9));
  box-shadow: 0 0 24px rgba(216, 180, 254, .62), 0 0 58px rgba(168, 85, 247, .34), inset 0 0 30px rgba(255, 255, 255, .08);
  text-align: center;
}

.vc-core-node span { display: block; margin-bottom: -22px; color: rgba(245, 243, 255, .76); font-size: 26px; }
.vc-core-node strong { display: block; margin-top: 26px; font-size: 12px; letter-spacing: .16em; }

.vc-agent {
  width: 92px;
  min-height: 70px;
  display: grid;
  justify-items: center;
  gap: 3px;
  transform: translate(-50%, -50%);
  color: var(--agent-color, #c4b5fd);
  text-align: center;
  will-change: transform, opacity, filter;
}

.vc-agent i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--agent-color, #c4b5fd) 48%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--agent-color, #c4b5fd) 13%, rgba(4, 4, 10, .94));
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--agent-color, #c4b5fd) 15%, transparent);
  font-style: normal;
  font-size: 10px;
  font-weight: 850;
}

.vc-agent span { max-width: 76px; color: color-mix(in srgb, var(--agent-color, #c4b5fd) 82%, #fff); font-size: 10px; font-weight: 850; text-transform: uppercase; line-height: 1.15; }
.vc-agent small { max-width: 76px; color: rgba(217, 211, 229, .62); font-size: 8px; font-weight: 700; line-height: 1.1; }

.vc-agent[data-agent="pi"] { --agent-color: #b86cff; }
.vc-agent[data-agent="hermes"] { --agent-color: #34d399; }
.vc-agent[data-agent="openclaw"] { --agent-color: #3b82f6; }
.vc-agent[data-agent="scanner"] { --agent-color: #22d3ee; }
.vc-agent[data-agent="patchEngine"] { --agent-color: #d946ef; }
.vc-agent[data-agent="aegis"] { --agent-color: #facc15; }
.vc-agent[data-agent="goCore"] { --agent-color: #f59e0b; }
.vc-agent[data-agent="passGold"] { --agent-color: #fb7185; }
.vc-agent[data-agent="archivist"] { --agent-color: #0f766e; }
.vc-agent[data-agent="github"] { --agent-color: #38bdf8; }
.vc-agent.is-highlighted i { box-shadow: 0 0 0 1px color-mix(in srgb, var(--agent-color) 70%, transparent), 0 0 24px color-mix(in srgb, var(--agent-color) 70%, transparent); }
.vc-atomic-hud[data-state="action"] .vc-atomic-ring { stroke-opacity: .62; }

.vc-smile-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 2, 7, .72);
  backdrop-filter: blur(10px);
}

.vc-chat-onboarding:not([hidden]) {
  grid-area: onboarding;
  width: 100%;
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(216,180,254,.16);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(28,18,45,.72), rgba(8,7,14,.88));
}
.vc-chat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "onboarding atomic";
  align-items: start;
  gap: clamp(18px, 3vw, 42px);
  width: 100%;
}
.vc-chat-hero .vc-atomic-hud {
  position: static;
  grid-area: atomic;
  align-self: start;
  margin: calc(-1 * var(--atomic-safe-area)) 0 0;
}
.vc-chat-onboarding h1 { margin: 4px 0 8px; font-size: clamp(20px, 3vw, 30px); }
.vc-chat-onboarding > p { margin: 0 0 14px; color: #bdb4cf; }
.vc-onboarding-plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.vc-plan-card { display: grid; gap: 5px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.vc-plan-card.is-selected { border-color: rgba(168,85,247,.7); background: rgba(168,85,247,.09); }
.vc-onboarding-plans span, .vc-onboarding-plans small { color: #9d94aa; font-size: 11px; line-height: 1.4; }
.vc-plan-card:hover, .vc-plan-card:focus-visible { border-color: rgba(168,85,247,.5); }
.vc-plan-status { min-height: 17px; margin: 9px 0 0 !important; font-size: 11px; }
.vc-onboarding-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.vc-onboarding-account p { margin: 0; color: #bdb4cf; font-size: 12px; }
.vc-onboarding-account a, .vc-onboarding-actions button { padding: 9px 13px; border: 1px solid rgba(216,180,254,.18); border-radius: 9px; color: #fff; background: rgba(168,85,247,.14); font-size: 12px; font-weight: 800; }
.vc-onboarding-actions { display: flex; gap: 8px; margin-top: 14px; }
.vc-hero-recent:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vc-hero-recent button { padding: 8px 11px; border: 1px solid rgba(216,180,254,.16); border-radius: 9px; color: #d8d0e4; background: rgba(255,255,255,.045); font-size: 12px; }
.vc-tutorial-counter { font-size: 12px; color: #a78bfa !important; }
.vc-tutorial-preference { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: #bdb4cf; font-size: 12px; }

.vc-smile-card {
  position: relative;
  width: min(430px, 100%);
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(216, 180, 254, .18);
  border-radius: 8px;
  background: rgba(10, 8, 18, .96);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .46);
}

.vc-smile-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  color: #f8f7ff;
  background: rgba(255, 255, 255, .05);
}

.vc-smile-avatar {
  width: 74px;
  height: 74px;
  object-fit: contain;
  margin-bottom: 12px;
}

.vc-smile-card h2 { margin: 4px 0 8px; font-size: 24px; }
.vc-smile-card p { margin: 0; color: #cbc3d8; line-height: 1.55; }

.vc-smile-steps {
  display: flex;
  gap: 6px;
  margin-top: 18px;
}

.vc-smile-steps span {
  flex: 1 1 0;
  min-width: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.vc-smile-steps span.is-active { background: var(--violet-2); }

.vc-smile-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.vc-smile-actions button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 8px;
  color: #f8f7ff;
  background: rgba(168, 85, 247, .13);
  font-size: 12px;
  font-weight: 800;
}

.vc-smile-actions button:hover:not(:disabled),
.vc-smile-close:hover { background: rgba(168, 85, 247, .2); }
.vc-smile-actions button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 1180px) {
  .vc-atomic-hud { --atomic-core-size: 245px; --atomic-safe-area: 58px; opacity: calc(.42 * var(--atomic-intensity)); }
}

@media (max-width: 1400px) {
  .vc-project-context { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 820px) {
  .vc-app-shell { grid-template-columns: 1fr; }
  .vc-sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 12px; }
  .vc-side-top { flex: 0 0 auto; }
  .vc-sidebar-toggle { display: none; }
  .vc-nav { flex-direction: row; }
  .vc-sidebar-foot { display: none; }
  .vc-main { padding: 16px; }
  .vc-header { align-items: flex-start; flex-wrap: wrap; }
  .vc-project-context { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .vc-user-menu { margin-left: auto; }
  .vc-project-context span { max-width: none; }
  .vc-brand-copy small { white-space: normal; line-height: 1.45; }
  .vc-chat-stage { padding-top: 14px; }
  .vc-safe-status-row { grid-template-columns: 1fr; }
  .vc-atomic-hud {
    --atomic-core-size: 245px;
    --atomic-safe-area: 58px;
    top: calc(100vh - var(--vc-composer-height, 112px) - 190px);
    margin-right: 0;
    margin-left: calc(100% - (var(--atomic-core-size) + (var(--atomic-safe-area) * 2)));
    opacity: calc(.48 * var(--atomic-intensity));
    scale: .62;
    transform-origin: right bottom;
  }
  .vc-atomic-hud .vc-agent span,
  .vc-atomic-hud .vc-agent small { display: none; }
  .vc-chat-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "onboarding"; }
  .vc-chat-hero .vc-atomic-hud { display: none; }
  .vc-onboarding-plans { grid-template-columns: 1fr; }
  .vc-onboarding-account { align-items: stretch; flex-direction: column; }
}

@media (max-width: 420px) {
  .vc-chat-onboarding:not([hidden]) { width: 100%; padding: 14px; }
  .vc-onboarding-actions { flex-direction: column; }
  .vc-smile-card { max-height: calc(100vh - 24px); overflow-y: auto; }
}

/* Vision Core original eye/orb mark adapted from the production v23-eye logo. */
.vc-eye-logo {
  flex: 0 0 auto;
  width: 58px;
  height: 40px;
  display: grid;
  place-items: center;
  perspective: 500px;
}

.vc-eye-logo-large {
  width: 74px;
  height: 48px;
}

.vc-eye {
  position: relative;
  width: 54px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(168, 85, 247, .9);
  border-radius: 58% 42% 58% 42% / 50%;
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, .26), rgba(9, 7, 15, .96) 64%, #030306 100%);
  box-shadow: 0 0 20px rgba(168, 85, 247, .55), 0 0 64px rgba(124, 58, 237, .22), inset 0 0 14px rgba(255, 255, 255, .06);
  transform-origin: center;
}

.vc-eye-logo-large .vc-eye {
  width: 68px;
  height: 40px;
  box-shadow: 0 0 26px rgba(168, 85, 247, .62), 0 0 86px rgba(124, 58, 237, .28), inset 0 0 18px rgba(255, 255, 255, .07);
}

.vc-pupil {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 9%, #ddd6fe 10% 18%, #a855f7 38%, #5b21b6 72%, #090014 100%);
  box-shadow: 0 0 22px rgba(168, 85, 247, .95);
  transition: transform .25s ease;
  position: relative;
  z-index: 1;
}

.vc-eye-logo-large .vc-pupil {
  width: 22px;
  height: 22px;
}

.vc-app-shell[data-sidebar-state="collapsed"] .vc-eye-logo {
  width: 46px;
}

.vc-app-shell[data-sidebar-state="collapsed"] .vc-eye {
  width: 44px;
  height: 28px;
}

.vc-app-shell[data-sidebar-state="collapsed"] .vc-pupil {
  width: 15px;
  height: 15px;
}

/* ── Software Factory section (Next) ──────────────────────────── */
.vc-sf-stage:not([hidden]) {
  width: min(940px, 100%);
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 16px;
  margin: 0 auto 34px;
  padding: 16px;
  border: 1px solid rgba(216, 180, 254, .12);
  border-radius: var(--radius);
  background: rgba(5, 5, 10, .50);
}
/* ARCHITECTURAL PRINCIPLE-004 (achado real, 2026-07-12): o grid de 2-3
   colunas do Modo Avançado (.vc-sf-advanced-grid) ficava espremido em
   min(940px,100%) — ganha largura total só enquanto o Modo Avançado está
   ativo (.vc-sf-intro/.vc-sf-advanced-head já têm seu próprio max-width,
   não esticam feio). */
.vc-sf-stage.vc-sf-stage--wide:not([hidden]) {
  width: 100%;
  margin: 0 0 34px;
}
.vc-sf-intro { max-width: 760px; }
.vc-sf-intro h1 { margin: 0; color: #fff; font-size: clamp(20px, 2vw, 28px); }
.vc-sf-intro p { max-width: 670px; margin: 10px 0 0; color: #bdb4cf; font-size: 14px; }
.vc-sf-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(216, 180, 254, .12);
  border-radius: var(--radius);
  background: rgba(5, 5, 10, .42);
}
.vc-sf-controls label {
  display: grid;
  gap: 5px;
  color: #958aa7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vc-sf-controls select,
.vc-sf-controls input[type="text"] {
  min-height: 34px;
  min-width: 126px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 8px;
  background: rgba(18, 14, 28, .78);
  color: #f8fafc;
  padding: 0 10px;
}
.vc-sf-mode {
  display: flex;
  min-height: 34px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  overflow: hidden;
}
.vc-sf-mode button {
  border: 0;
  padding: 0 12px;
  background: transparent;
  color: #bdb4cf;
  font-size: 12px;
  font-weight: 780;
}
.vc-sf-mode button[aria-pressed="true"] { background: rgba(168, 85, 247, .24); color: #fff; }
.vc-sf-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #bdb4cf;
  font-size: 11px;
}
.vc-sf-extra > span {
  color: #958aa7;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vc-sf-extra label {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid rgba(216, 180, 254, .12);
  border-radius: 999px;
  background: rgba(18, 14, 28, .42);
}

.vc-sf-url-context {
  display: grid;
  gap: 5px;
  width: 100%;
}
.vc-sf-url-context > label {
  color: #958aa7;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vc-sf-url-row {
  display: flex;
  gap: 8px;
}
.vc-sf-url-row input {
  flex: 1 1 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: var(--radius);
  background: rgba(18, 14, 28, .72);
  color: #fff;
  font-size: 12px;
}
.vc-sf-url-row button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #efe9ff;
  background: rgba(18, 14, 28, .78);
  font-size: 11px;
  font-weight: 760;
}
.vc-sf-url-row button:disabled { opacity: .45; cursor: not-allowed; }
.vc-sf-url-status {
  margin: 0;
  min-height: 14px;
  color: #958aa7;
  font-size: 11px;
}
.vc-sf-advanced:not([hidden]) {
  display: grid;
  gap: 14px;
}
.vc-sf-advanced-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(216, 180, 254, .14);
  border-radius: var(--radius);
  background: rgba(5, 5, 10, .54);
}
.vc-sf-advanced-head h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0;
}
.vc-sf-advanced-head p:not(.vc-kicker) {
  margin: 6px 0 0;
  max-width: 640px;
  color: #bdb4cf;
  font-size: 12px;
  line-height: 1.45;
}
.vc-sf-advanced-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.vc-sf-advanced-actions button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(216, 180, 254, .16);
  border-radius: 999px;
  color: #efe9ff;
  background: rgba(18, 14, 28, .78);
  font-size: 11px;
  font-weight: 760;
}
.vc-sf-advanced-actions button:hover { border-color: rgba(192, 132, 252, .44); }
.vc-sf-advanced-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: 12px;
}
.vc-sf-advanced-grid-bottom {
  grid-template-columns: minmax(230px, .75fr) minmax(0, 1.1fr) minmax(230px, .85fr);
}
.vc-sf-architect-card {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  background: rgba(9, 8, 16, .58);
}
.vc-sf-architect-card h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vc-sf-summary-grid,
.vc-sf-suggestion,
.vc-sf-preview,
.vc-sf-graph,
.vc-sf-agent-matrix {
  display: grid;
  gap: 8px;
}
.vc-sf-summary-item,
.vc-sf-suggestion-item,
.vc-sf-preview-row,
.vc-sf-agent-row,
.vc-sf-timeline-step,
.vc-sf-graph-group {
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .035);
}
.vc-sf-summary-item span,
.vc-sf-preview-row span {
  display: block;
  margin-bottom: 3px;
  color: #958aa7;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vc-sf-summary-item strong,
.vc-sf-preview-row strong {
  color: #f8f7ff;
  font-size: 13px;
}
.vc-sf-warning-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.vc-sf-warning {
  padding: 8px 10px;
  border: 1px solid rgba(250, 204, 21, .28);
  border-left: 3px solid rgba(250, 204, 21, .72);
  border-radius: var(--radius);
  background: rgba(250, 204, 21, .06);
  color: #fde68a;
  font-size: 11px;
  line-height: 1.45;
}
.vc-sf-catalog {
  display: grid;
  gap: 10px;
  max-height: 410px;
  overflow: auto;
  padding-right: 3px;
}
.vc-sf-catalog-category {
  display: grid;
  gap: 7px;
}
.vc-sf-catalog-category h4 {
  margin: 0;
  color: #c4b5fd;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vc-sf-catalog-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vc-sf-tech-button,
.vc-sf-remove-tech,
.vc-sf-agent-state,
.vc-sf-timeline-step {
  border: 1px solid rgba(216, 180, 254, .14);
  color: #e9e4f6;
  background: rgba(18, 14, 28, .72);
}
.vc-sf-tech-button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 720;
}
.vc-sf-tech-button[aria-pressed="true"] {
  border-color: rgba(52, 211, 153, .4);
  color: #d1fae5;
  background: rgba(6, 78, 59, .2);
}
.vc-sf-tech-button[data-suggested="true"] { box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .2); }
.vc-sf-suggestion-item {
  display: grid;
  gap: 4px;
}
.vc-sf-suggestion-item strong {
  color: #fff;
  font-size: 13px;
}
.vc-sf-suggestion-item span {
  color: #a7f3d0;
  font-size: 11px;
}
.vc-sf-suggestion-item p,
.vc-sf-tech-detail p,
.vc-sf-timeline-detail p {
  margin: 0;
  color: #bdb4cf;
  font-size: 11px;
  line-height: 1.45;
}
.vc-sf-graph-group h4 {
  margin: 0 0 8px;
  color: #d8b4fe;
  font-size: 11px;
}
.vc-sf-graph-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0 6px 14px;
  border-left: 1px solid rgba(216, 180, 254, .22);
  color: #f8f7ff;
  font-size: 12px;
}
.vc-sf-remove-tech {
  min-width: 28px;
  height: 26px;
  border-radius: 999px;
}
.vc-sf-tech-detail,
.vc-sf-timeline-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.vc-sf-tech-detail h4,
.vc-sf-timeline-detail h4 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 12px;
}
.vc-sf-agent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.vc-sf-agent-row strong {
  display: block;
  color: #f8f7ff;
  font-size: 12px;
}
.vc-sf-agent-row span {
  display: block;
  color: #958aa7;
  font-size: 10px;
}
.vc-sf-agent-state {
  min-width: 82px;
  min-height: 28px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
}
.vc-sf-agent-state[data-state="REQUIRED"],
.vc-sf-agent-state[data-state="LOCKED"] {
  color: #fde68a;
  border-color: rgba(250, 204, 21, .32);
}
.vc-sf-agent-state[data-state="ON"] {
  color: #d1fae5;
  border-color: rgba(52, 211, 153, .34);
}
.vc-sf-timeline {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.vc-sf-timeline-step {
  flex: 0 0 152px;
  min-height: 86px;
  padding: 9px 10px;
  border-radius: var(--radius);
  text-align: left;
}
.vc-sf-timeline-step strong {
  display: block;
  color: #fff;
  font-size: 12px;
}
.vc-sf-timeline-step span {
  display: block;
  margin-top: 5px;
  color: #958aa7;
  font-size: 10px;
}
.vc-sf-timeline-step[data-status="READY"],
.vc-sf-timeline-step[data-status="DONE"] { border-color: rgba(52, 211, 153, .28); }
.vc-sf-timeline-step[data-status="ACTIVE"],
.vc-sf-timeline-step[data-status="WAITING_APPROVAL"] { border-color: rgba(250, 204, 21, .32); }
.vc-sf-timeline-step[aria-selected="true"] {
  outline: 2px solid rgba(192, 132, 252, .46);
  outline-offset: 2px;
}
.vc-sf-empty {
  margin: 0;
  color: #958aa7;
  font-size: 12px;
  line-height: 1.45;
}
.vc-sf-controls .vc-sf-check {
  min-height: 34px;
  display: flex;
  align-items: center;
  grid-auto-flow: column;
  gap: 7px;
}
.vc-sf-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: end;
  min-height: 200px;
}
.vc-sf-msg {
  max-width: min(760px, 100%);
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  background: rgba(9, 8, 16, .58);
}
.vc-sf-msg span { display: block; margin-bottom: 6px; color: #c4b5fd; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.vc-sf-msg p { margin: 0; color: #ded8ea; line-height: 1.55; font-size: 13px; white-space: pre-wrap; }
.vc-sf-msg-user { align-self: flex-end; background: rgba(124, 58, 237, .18); border-color: rgba(192, 132, 252, .22); }
.vc-sf-msg-pending { border-color: rgba(250, 204, 21, .22); }
.vc-sf-msg-error { border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .08); }
.vc-sf-progress:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(216, 180, 254, .12);
  border-radius: var(--radius);
  background: rgba(5, 5, 10, .54);
  font-size: 12px;
  color: #bdb4cf;
}
.vc-sf-progress-step { display: flex; align-items: center; gap: 8px; color: #958aa7; }
.vc-sf-progress-done { color: #86efac; }
.vc-sf-progress-active { color: #c4b5fd; }
.vc-sf-progress-error { color: #fca5a5; }
.vc-sf-log:not([hidden]) {
  display: grid;
  gap: 5px;
  max-height: 120px;
  overflow: auto;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: var(--radius);
  background: rgba(3, 7, 18, .45);
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}
.vc-sf-log-row { white-space: nowrap; }
.vc-sf-log-ok { color: #86efac; }
.vc-sf-log-warn { color: #fde68a; }
.vc-sf-log-error { color: #fca5a5; }
.vc-sf-final:not([hidden]) {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(134, 239, 172, .18);
  border-radius: var(--radius);
  background: rgba(6, 78, 59, .08);
}
.vc-sf-final pre {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  color: #d8f3e5;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.vc-sf-files-actions:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vc-sf-files-actions button {
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(134, 239, 172, .3);
  border-radius: 999px;
  background: rgba(6, 78, 59, .18);
  color: #d1fae5;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.vc-sf-files-actions button:disabled { opacity: .5; cursor: not-allowed; }
.vc-sf-files-actions button:not(:disabled):hover { background: rgba(6, 78, 59, .3); }
.vc-sf-files-status { font-size: 11px; color: #9db8ac; }
.vc-sf-files-list:not([hidden]) {
  display: grid;
  gap: 4px;
  max-height: 140px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid rgba(134, 239, 172, .14);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .15);
}
.vc-sf-file-row {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  color: #d8f3e5;
}
.vc-sf-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.vc-sf-composer textarea {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  padding: 10px 12px;
  border: 1px solid rgba(216, 180, 254, .18);
  border-radius: var(--radius);
  background: rgba(18, 14, 28, .78);
  color: #fff;
  font-size: 13px;
  resize: vertical;
  outline: none;
}
.vc-sf-composer textarea:focus { border-color: rgba(192, 132, 252, .44); }
.vc-sf-composer-actions { display: flex; gap: 8px; }
.vc-sf-composer-actions button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(168, 85, 247, .5);
  border-radius: 999px;
  color: #fff;
  background: rgba(168, 85, 247, .2);
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}
.vc-sf-composer-actions button:disabled { opacity: .4; cursor: not-allowed; }
.vc-sf-composer-actions button:not(:disabled):hover { background: rgba(168, 85, 247, .35); }

@media (max-width: 820px) {
  .vc-sf-advanced-head,
  .vc-sf-advanced-grid,
  .vc-sf-advanced-grid-bottom {
    display: grid;
    grid-template-columns: 1fr;
  }
  .vc-sf-advanced-actions {
    justify-content: flex-start;
  }
  .vc-sf-timeline {
    display: grid;
    overflow: visible;
  }
  .vc-sf-timeline-step {
    flex-basis: auto;
    width: 100%;
  }
}

/* Eye blink: real lid elements, matching the old hover-close behavior. */
.eye-lid-top,
.eye-lid-bottom {
  position: absolute;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 50%;
  background: #050507;
  pointer-events: none;
  transition: transform .46s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.eye-lid-top {
  top: 0;
  transform: translateY(-100%);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.eye-lid-bottom {
  bottom: 0;
  transform: translateY(100%);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.vc-eye.is-blinking .eye-lid-top,
.vc-eye-logo:hover .eye-lid-top,
.vc-side-brand:hover .eye-lid-top,
.vc-brand-lockup:hover .eye-lid-top {
  transform: translateY(0);
}

.vc-eye.is-blinking .eye-lid-bottom,
.vc-eye-logo:hover .eye-lid-bottom,
.vc-side-brand:hover .eye-lid-bottom,
.vc-brand-lockup:hover .eye-lid-bottom {
  transform: translateY(0);
}

.vc-eye-logo:hover .vc-eye,
.vc-side-brand:hover .vc-eye,
.vc-brand-lockup:hover .vc-eye,
.vc-eye-logo:focus-visible .vc-eye {
  box-shadow: 0 0 30px rgba(168, 85, 247, .76), 0 0 92px rgba(124, 58, 237, .32), inset 0 0 16px rgba(255, 255, 255, .08);
}

/* Settings / AI Provider Vault */
.vc-settings:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vc-settings h4 { margin: 0 0 4px; font-size: 16px; color: var(--text); }
.vc-settings h5 { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.vc-settings-form:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}
.vc-settings-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.vc-settings-form select,
.vc-settings-form input {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 13px;
}
.vc-settings-field-actions:not([hidden]) {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.vc-settings-field-actions button {
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.vc-settings-field-actions button:disabled { opacity: .4; }
.vc-settings-field-actions button:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.vc-settings-status { font-size: 12px; color: var(--muted); margin: 0; }
.vc-account-oauth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.vc-account-oauth a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, .045);
  font-size: 12px;
  font-weight: 820;
}
.vc-account-oauth a:hover { background: rgba(255, 255, 255, .08); }
.vc-settings-list { max-width: 600px; }
.vc-settings-motion {
  max-width: 600px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(216,180,254,.18);
  border-radius: var(--radius);
}
.vc-settings-motion h5 { margin: 0 0 6px; font-size: 13px; color: var(--text); }
.vc-settings-motion-copy { margin: 0 0 10px; font-size: 12px; color: #958aa7; line-height: 1.5; }
.vc-settings-motion-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #bdb4cf;
  cursor: pointer;
}
/* Regra dura #13 (CLAUDE.md): .vc-settings-motion-toggle já declara
   display fora de qualquer gate [hidden] -- especificidade de ID vence,
   independente da ordem no arquivo (mesmo padrão do fix de cabeçalho). */
#vcAtomicIdleDriftRow[hidden],
#vcAtomicReturnDurationRow[hidden] { display: none; }
.vc-settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 13px;
}
.vc-settings-item strong { color: var(--text); min-width: 100px; }
.vc-settings-item span { color: var(--muted); }
.vc-settings-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(99,102,241,.15);
  color: #a5b4fc;
  text-transform: uppercase;
  margin-left: auto;
}
.vc-settings-item-actions {
  display: flex;
  gap: 6px;
  margin-left: 8px;
}
.vc-settings-item-actions button {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.vc-settings-item-actions button:hover { background: rgba(255,255,255,.07); color: var(--text); }

/* Vault — Rollback */
.vc-vault-rollback:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vc-vault-rollback h4 { margin: 0; font-size: 16px; color: var(--text); }
.vc-vault-banner {
  padding: 10px 14px;
  border: 1px solid rgba(251,191,36,.3);
  border-radius: var(--radius);
  background: rgba(251,191,36,.08);
  color: #fbbf24;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
.vc-vault-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 13px;
}
.vc-vault-item strong { color: var(--text); min-width: 120px; }
.vc-vault-item span { color: var(--muted); flex: 1; }
.vc-vault-item button {
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid rgba(251,191,36,.3);
  border-radius: var(--radius);
  background: rgba(251,191,36,.1);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.vc-vault-item button:hover { background: rgba(251,191,36,.2); }
.vc-vault-actions {
  display: flex;
  gap: 8px;
}
.vc-vault-actions button {
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.vc-vault-actions button:first-child {
  background: rgba(251,191,36,.15);
  border-color: rgba(251,191,36,.4);
  color: #fbbf24;
}
.vc-vault-actions button:hover { background: rgba(255,255,255,.12); }
.vc-vault-actions button:first-child:hover { background: rgba(251,191,36,.25); }
.vc-vault-status { font-size: 12px; color: var(--muted); margin: 0; }

/* Mission History (B-2) */
.vc-mission-history:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}
.vc-mission-history h4 { margin: 0 0 4px; font-size: 16px; color: var(--text); }
.vc-mh-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
}
.vc-mh-item:hover { background: rgba(255,255,255,.04); }
.vc-mh-item strong { color: var(--text); min-width: 100px; }
.vc-mh-item span { color: var(--muted); flex: 1; }
.vc-mh-detail:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vc-mh-detail h5 { margin: 0; font-size: 14px; color: var(--text); }
.vc-mh-detail p { margin: 0; font-size: 12px; color: var(--muted); }
.vc-mh-detail pre {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  background: rgba(0,0,0,.2);
  font-size: 12px;
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}
.vc-mh-detail #vcMissionDetailEvidence h5 { margin-top: 8px; }
.vc-mh-detail #vcMissionDetailBack {
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.vc-mh-detail #vcMissionDetailBack:hover { background: rgba(255,255,255,.06); color: var(--text); }

/* Hermes diagnostic hint (B-1/5c) */
.vc-hermes-hint:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
  padding: 12px 16px;
  border: 1px solid rgba(52,211,153,.3);
  border-radius: var(--radius);
  background: rgba(52,211,153,.06);
}
.vc-hint-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vc-hint-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.vc-hint-header strong { font-size: 13px; color: var(--green); }
.vc-hint-diagnosis { font-size: 12px; color: var(--muted); margin: 0; }
.vc-hint-actions { display: flex; gap: 6px; }
.vc-hint-actions button {
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.vc-hint-actions button:hover { background: rgba(255,255,255,.12); }

/* Métricas — camada visual sobre /api/metrics/agents, /api/dora-metrics,
   /api/agent/status (backend intocado). Sem animação de entrada — o painel
   aparece no estado final, mesmo fora de reduced-motion (não é identidade
   de marca como o Atomic Core, é um dashboard de dados).
   ARCHITECTURAL PRINCIPLE-004 (achado real, 2026-07-12): 720px era estreito
   demais para os cards de gráfico (repeat(auto-fit, minmax(210px,1fr)))
   caberem confortavelmente lado a lado — pode ganhar largura total via
   botão local, reaproveitando o mesmo mecanismo --wide. */
.vc-metrics-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.vc-feature-panel--wide .vc-metrics-panel:not([hidden]) {
  max-width: none;
  width: 100%;
}

/* ARCHITECTURAL PRINCIPLE-004 (ver DECISIONS.md): painel de largura total —
   sem max-width, e .vc-chat-stage--wide (aplicada só enquanto esta aba está
   ativa) remove o cap de 940px do container pai. */
.vc-chat-stage.vc-chat-stage--wide { width: 100%; max-width: none; }
.vc-metrics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.vc-metrics-head h4 { margin: 0; font-size: 16px; color: var(--text); }
.vc-metrics-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vc-metrics-source {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.vc-metrics-source.is-real { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); color: var(--green); }
.vc-metrics-source.is-fallback { border-color: rgba(250,204,21,.4); background: rgba(250,204,21,.1); color: #facc15; }
#vcMetricsRefresh,
#vcMetricsWideToggle {
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#vcMetricsRefresh:hover,
#vcMetricsWideToggle:hover,
#vcMetricsWideToggle[aria-pressed="true"] { background: rgba(255,255,255,.12); }
.vc-metrics-raw-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}

.vc-metrics-error:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(248,113,113,.42);
  border-left: 3px solid rgba(248,113,113,.82);
  border-radius: var(--radius);
  background: rgba(248,113,113,.08);
}
.vc-metrics-error p { margin: 0; color: #fecaca; font-size: 12px; line-height: 1.5; }
#vcMetricsRetry {
  padding: 6px 14px;
  border: 1px solid rgba(248,113,113,.4);
  border-radius: var(--radius);
  background: rgba(248,113,113,.14);
  color: #fecaca;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
#vcMetricsRetry:hover { background: rgba(248,113,113,.22); }

.vc-metrics-skel:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
.vc-metrics-skel-row {
  height: 40px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
}

.vc-metrics-body:not([hidden]) { display: flex; flex-direction: column; gap: 22px; }
.vc-metrics-section h5 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.vc-metrics-agent-list { display: flex; flex-direction: column; gap: 8px; }
.vc-metrics-agent-row {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vc-metrics-agent-head { display: flex; align-items: center; gap: 8px; }
.vc-metrics-agent-head strong { color: var(--text); font-size: 13px; flex: 1; }
.vc-metrics-agent-note { margin: 0; color: var(--muted); font-size: 11px; }

.vc-metrics-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vc-metrics-status-dot.vc-metrics-status-ok { background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,.5); }
.vc-metrics-status-dot.vc-metrics-status-warn { background: #facc15; box-shadow: 0 0 8px rgba(250,204,21,.5); }
.vc-metrics-status-dot.vc-metrics-status-error { background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,.5); }

.vc-metrics-status-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.vc-metrics-status-badge.vc-metrics-status-ok { color: var(--green); background: rgba(52,211,153,.12); }
.vc-metrics-status-badge.vc-metrics-status-warn { color: #facc15; background: rgba(250,204,21,.12); }
.vc-metrics-status-badge.vc-metrics-status-error { color: #f87171; background: rgba(248,113,113,.12); }

.vc-metrics-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-metrics-chip {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(168,85,247,.3);
  background: rgba(168,85,247,.1);
  color: var(--violet-2);
  font-size: 10px;
}

.vc-metrics-cost { display: flex; align-items: center; gap: 10px; }
.vc-metrics-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.vc-metrics-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
}
.vc-metrics-cost span { font-size: 11px; color: var(--muted); min-width: 60px; text-align: right; }
.vc-metrics-no-cost { font-size: 11px; color: var(--muted); font-style: italic; }

.vc-metrics-empty { margin: 0; color: var(--muted); font-size: 12px; }

.vc-metrics-total {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(168,85,247,.25);
  border-radius: var(--radius);
  background: rgba(168,85,247,.06);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.vc-metrics-total strong { color: var(--text); }
.vc-metrics-total span { color: var(--violet-2); font-weight: 700; }

.vc-metrics-dora-grid,
.vc-metrics-runtime-grid,
.vc-metrics-memory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.vc-metrics-dora-card,
.vc-metrics-info-card {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vc-metrics-dora-label,
.vc-metrics-info-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.vc-metrics-dora-card strong,
.vc-metrics-info-card strong { font-size: 13px; color: var(--text); }

.vc-metric-chart-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.vc-metric-chart {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
}
.vc-metric-chart h6 {
  margin: 0;
  color: #f8f7ff;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vc-chart-desc,
.vc-metric-chart-empty span {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.vc-metric-chart-empty { border-style: dashed; }
.vc-bar-chart {
  display: grid;
  gap: 8px;
}
.vc-bar-row {
  display: grid;
  grid-template-columns: minmax(72px, .75fr) minmax(80px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vc-bar-row span,
.vc-chart-timeline span {
  min-width: 0;
  color: #d8d2e6;
  font-size: 11px;
}
.vc-bar-row strong {
  color: #f8f7ff;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
.vc-chart-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.vc-chart-fill {
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
}
.vc-donut-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  justify-self: center;
}
.vc-donut-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.vc-donut-wrap strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
}
.vc-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.vc-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}
.vc-chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.vc-gauge {
  --gauge-value: 0%;
  --gauge-color: var(--green);
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(8,7,13,.98) 0 58%, transparent 59%),
    conic-gradient(var(--gauge-color) var(--gauge-value), rgba(255,255,255,.08) 0);
}
.vc-gauge strong {
  color: #fff;
  font-size: 16px;
}
.vc-sparkline {
  width: 100%;
  height: 52px;
  overflow: visible;
}
.vc-chart-timeline {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vc-chart-timeline li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vc-metrics-conn-row { display: flex; align-items: center; gap: 8px; }
.vc-metrics-conn-row span:last-child { font-size: 13px; color: var(--text); }
.vc-metrics-conn-meta { margin: 6px 0 0; font-size: 11px; color: var(--muted); }

.vc-metrics-raw:not([hidden]) {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  background: rgba(0,0,0,.2);
  font-size: 11px;
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
}

.vc-feature-viz:not([hidden]) {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.vc-feature-viz h4 {
  margin: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .vc-bar-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .vc-bar-row strong {
    text-align: left;
  }
}