/* ═══════════════════════════════════════════════════════════
   J.A.R.V.I.S. — Clean Cockpit v6.0
   Particle Orb + Terminal + Voice — Minimal Design
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --bg:         #010408;
  --bg2:        #040a10;
  --cyan:       #00e4ff;
  --cyan2:      #00b8d4;
  --green:      #00ff88;
  --purple:     #a78bfa;
  --fire:       #ff6a00;
  --amber:      #ffb84e;
  --red:        #ff4466;
  --white:      #e8f4ff;
  --text:       #f0f8ff;
  --text-mid:   #b8d4e8;
  --text-dim:   #7aa0bc;
  --dim:        #1a2a38;
  --glass:          rgba(0,228,255,0.03);
  --glass-border:   rgba(0,228,255,0.10);
  --glass-strong:   rgba(0,228,255,0.06);
  --glow-c:  0 0 20px rgba(0,228,255,0.25);
  --glow-c2: 0 0 12px rgba(0,228,255,0.12);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-orb:  'Orbitron', sans-serif;
  --font-ui:   'Inter', -apple-system, sans-serif;
  --nav-h: 46px;
  --t: all 0.2s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%; overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(0,228,255,0.15); border-radius: 2px; }
::-webkit-scrollbar-track { background: transparent; }

/* ═══ AMBIENT BACKGROUND ═══ */
.bg-hex {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z' fill='%2300e4ff' fill-opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5;
}
.bg-scanlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,228,255,0.012) 2px, rgba(0,228,255,0.012) 4px);
}
.bg-glow-tl {
  position: fixed; top: 0; left: 0; width: 50%; height: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 20%, rgba(0,100,180,0.06), transparent 70%);
}
.bg-glow-br {
  position: fixed; bottom: 0; right: 0; width: 50%; height: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 80% 80%, rgba(167,139,250,0.04), transparent 70%);
}

/* ═══ NAVBAR — Minimal ═══ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(1,4,8,0.95) 0%, rgba(1,4,8,0.8) 100%);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
}
.navbar-left { display: flex; align-items: center; gap: 12px; }
.navbar-title {
  font-family: var(--font-orb); font-size: 14px; font-weight: 700;
  color: #ffd700; letter-spacing: 4px;
  text-shadow: 0 0 15px rgba(255,215,0,0.25);
}
.navbar-tabs { display: flex; gap: 4px; }
.tab-btn {
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-dim); cursor: pointer;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; padding: 6px 14px;
  transition: var(--t);
}
.tab-btn:hover { color: var(--text-mid); border-color: rgba(0,228,255,0.12); }
.tab-btn.active {
  color: var(--cyan); border-color: rgba(0,228,255,0.25);
  background: rgba(0,228,255,0.05);
  text-shadow: 0 0 8px rgba(0,228,255,0.3);
}
.navbar-right { display: flex; align-items: center; gap: 14px; }
.lang-toggle { display: flex; gap: 2px; }
.lang-btn {
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-dim); cursor: pointer;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1px; padding: 4px 8px; transition: var(--t);
}
.lang-btn:hover { color: var(--text-mid); }
.lang-btn.active {
  color: var(--cyan); border-color: rgba(0,228,255,0.3);
  background: rgba(0,228,255,0.08);
}
.clock {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 1px;
}

/* ═══ TAB PANELS ═══ */
.tab-panel {
  display: none; position: fixed;
  top: var(--nav-h); left: 0; right: 0; bottom: 0;
  z-index: 1;
}
.tab-panel.active { display: flex; }

/* ═══ COCKPIT — Pure Orb ═══ */
.cockpit-clean {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; height: 100%;
  position: relative;
}

.orb-section {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
}
.avatar-container {
  position: relative;
  width: 75vh; height: 75vh;
  max-width: 75vw; max-height: 75vh;
}
#particle-orb {
  width: 100%; height: 100%;
  display: block;
  background: transparent;
}
/* Onda sonora reativa DENTRO da esfera — overlay 2D, não intercepta clique, mistura como luz. */
#orb-wave {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
}
.avatar-status {
  font-family: var(--font-orb); font-size: 9px;
  letter-spacing: 6px; color: var(--text-dim);
  text-transform: uppercase; text-align: center;
  margin-top: 14px;
  transition: color 0.5s;
}
.avatar-container.listening ~ .avatar-status { color: var(--green); }
.avatar-container.thinking ~ .avatar-status { color: var(--amber); }
.avatar-container.speaking ~ .avatar-status { color: var(--fire); }

/* ── Qualidade dos gráficos do avatar (Baixo/Médio/Alto) ── */
.avatar-quality {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 9px;
}
.avatar-quality .aq-label {
  font-family: var(--font-orb); font-size: 8px; letter-spacing: 3px;
  color: var(--text-dim); opacity: .6; margin-right: 3px;
}
.avatar-quality .aq-btn {
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .5px;
  color: var(--text-dim); background: rgba(0, 228, 255, .04);
  border: 1px solid rgba(0, 228, 255, .18); border-radius: 4px;
  padding: 2px 8px; cursor: pointer; transition: all .18s;
}
.avatar-quality .aq-btn:hover { border-color: rgba(0, 228, 255, .45); color: var(--text); }
.avatar-quality .aq-btn.active {
  color: #041016; background: var(--cyan, #00e4ff);
  border-color: var(--cyan, #00e4ff); font-weight: 600;
  box-shadow: 0 0 10px rgba(0, 228, 255, .35);
}
.avatar-quality .aq-btn:focus-visible { outline: 2px solid var(--cyan, #00e4ff); outline-offset: 1px; }
/* orb leve (modo Baixo — zero WebGL) */
.avatar-orb-lite {
  position: absolute; top: 50%; left: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle at 38% 32%, #eafcff, #00e4ff 42%, #0e7490 78%, transparent 92%);
  box-shadow: 0 0 46px rgba(0, 228, 255, .40); animation: aqPulse 3s ease-in-out infinite;
}
@keyframes aqPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .9; } 50% { transform: translate(-50%,-50%) scale(1.06); opacity: 1; } }

/* ── ONDAS SONORAS NO MODO BAIXO (05/08) ──────────────────────────────────────────────
   Bug relatado pelo dono: no modo Baixo o orb ficava PARADO enquanto conversava. Causa: o
   `_mountAvatar('low')` não instancia o NeuralTree (particleOrb = null), então tudo que
   dependia de `particleOrb.setState()` virava no-op. O `setAvatarState` até punha a classe
   `speaking`/`listening` no `.avatar-container` — só que não existia CSS lendo isso no orb
   leve. Aqui está: a reação de fala/escuta feita 100% em CSS, sem WebGL. */
.avatar-orb-lite::before,
.avatar-orb-lite::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  opacity: 0; pointer-events: none;
}
/* FALANDO: anéis concêntricos saindo do centro (a "onda sonora") + batida mais viva */
.avatar-container.speaking .avatar-orb-lite {
  animation: aqPulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 62px rgba(0, 228, 255, .62);
}
.avatar-container.speaking .avatar-orb-lite::before,
.avatar-container.speaking .avatar-orb-lite::after {
  border: 2px solid rgba(234, 252, 255, .85);
  animation: aqOnda 1.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.avatar-container.speaking .avatar-orb-lite::after { animation-delay: .8s; }
@keyframes aqOnda {
  0%   { transform: scale(.42); opacity: .9; }
  70%  { opacity: .18; }
  100% { transform: scale(1.18); opacity: 0; }
}
/* ESCUTANDO: respiração lenta + halo verde, pra distinguir de falar num relance */
.avatar-container.listening .avatar-orb-lite {
  animation: aqPulse 2s ease-in-out infinite;
  box-shadow: 0 0 54px rgba(0, 255, 170, .48);
}
.avatar-container.listening .avatar-orb-lite::before {
  border: 2px solid rgba(0, 255, 170, .55);
  animation: aqOnda 2.4s ease-out infinite;
}
/* PENSANDO: brilho girando, sem anel — trabalho interno, não som saindo */
.avatar-container.thinking .avatar-orb-lite {
  animation: aqPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 54px rgba(255, 176, 32, .45);
}
.avatar-container.thinking .avatar-orb-lite::before {
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 214, 130, .5) 85%, transparent 100%);
  opacity: 1; animation: aqGiro 1.5s linear infinite;
}
@keyframes aqGiro { to { transform: rotate(360deg); } }

/* Acessibilidade: quem pede menos movimento continua vendo o ESTADO, sem animação. */
@media (prefers-reduced-motion: reduce) {
  .avatar-orb-lite,
  .avatar-container.speaking .avatar-orb-lite,
  .avatar-container.listening .avatar-orb-lite,
  .avatar-container.thinking .avatar-orb-lite { animation: none; }
  .avatar-orb-lite::before, .avatar-orb-lite::after { animation: none !important; }
}

/* Floating controls */
.cockpit-controls {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 16px;
  z-index: 50;
}
.mic-fab {
  position: relative;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(0,228,255,0.08);
  border: 2px solid rgba(0,228,255,0.4);
  color: var(--cyan); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t);
}
.mic-fab svg { width: 24px; height: 24px; }
.mic-fab:hover { background: rgba(0,228,255,0.15); box-shadow: 0 0 30px rgba(0,228,255,0.25); }
.mic-fab .mic-ring {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(0,228,255,0.2); pointer-events: none;
}
.mic-fab.recording {
  border-color: var(--red); color: var(--red);
  background: rgba(255,68,102,0.1);
  animation: mic-pulse 0.9s ease-in-out infinite;
}
.mic-fab.recording .mic-ring { border-color: rgba(255,68,102,0.3); animation: mic-ring-pulse 0.9s ease-in-out infinite; }

.screen-fab {
  width: 48px; height: 48px; border-radius: 50%;
  background: none; border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t); align-self: center;
}
.screen-fab svg { width: 20px; height: 20px; }
.screen-fab:hover { border-color: rgba(0,228,255,0.3); color: var(--cyan); background: rgba(0,228,255,0.06); }
.screen-fab.active {
  border-color: rgba(0,228,255,0.5); color: var(--cyan);
  background: rgba(0,228,255,0.1);
  animation: screen-glow 1.5s ease-in-out infinite;
}

/* ═══ TERMINAL — Full page tab ═══ */
.terminal-fullpage {
  display: flex; flex-direction: column;
  height: 100%; padding: 12px 16px;
  max-width: 900px; margin: 0 auto; width: 100%;
}

/* ═══ TERMINAL ═══ */
.terminal {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: rgba(1,4,8,0.85);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}
.terminal-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: rgba(0,228,255,0.02);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.ttb-dots { display: flex; gap: 5px; }
.ttb-dot { width: 8px; height: 8px; border-radius: 50%; }
.ttb-r { background: #ff5f57; }
.ttb-y { background: #febc2e; }
.ttb-g { background: #28c840; }
.ttb-title {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-dim); letter-spacing: 2px;
  text-transform: uppercase; flex: 1;
}
.ttb-right { display: flex; align-items: center; }
.ttb-badge {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-dim); letter-spacing: 1px;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.08);
}
.terminal-output {
  flex: 1; overflow-y: auto;
  padding: 12px 16px;
  font-family: var(--font-mono); font-size: 12.5px;
  line-height: 1.65;
}
.terminal-line {
  margin-bottom: 5px;
  animation: line-in 0.2s ease;
  display: flex; gap: 8px; align-items: baseline;
}
@keyframes line-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.terminal-line .ts {
  color: var(--text-dim); font-size: 9px;
  flex-shrink: 0; padding-top: 2px; opacity: 0.85;
}
.terminal-line .msg { color: var(--text); word-break: break-word; flex: 1; }
.terminal-line.user-line   .msg { color: var(--green); }
.terminal-line.system-line .msg { color: var(--purple); }
.terminal-line.error-line  .msg { color: var(--red); }
.terminal-line.warn-line   .msg { color: var(--amber); }
.terminal-line.info-line   .msg { color: var(--cyan); }
.terminal-line.file-line   .msg { color: var(--green); }
.terminal-line.jarvis-line .msg { color: var(--white); }

/* Markdown in terminal */
.msg h1,.msg h2,.msg h3 {
  color: var(--cyan); margin: 10px 0 5px;
  font-family: var(--font-orb); font-size: 13px; letter-spacing: 1px;
}
.msg code {
  background: rgba(0,228,255,0.07); padding: 1px 5px;
  border-radius: 3px; font-family: var(--font-mono);
  font-size: 11.5px; color: var(--amber);
}
.msg pre {
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--glass-border);
  border-radius: 8px; padding: 12px 14px;
  margin: 8px 0; overflow-x: auto; position: relative;
}
.msg pre code { background: transparent; padding: 0; color: var(--text); font-size: 12px; }
.msg a { color: var(--cyan); text-decoration: none; }
.msg a:hover { text-decoration: underline; }
.msg ul,.msg ol { padding-left: 18px; margin: 4px 0; }
.msg li { margin-bottom: 2px; }
.msg blockquote {
  border-left: 3px solid var(--cyan);
  padding-left: 12px; margin: 6px 0; color: var(--text-mid);
}
.msg table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 11px; }
.msg th {
  background: rgba(0,228,255,0.08); color: var(--cyan);
  padding: 6px 10px; border: 1px solid rgba(0,228,255,0.12);
  font-size: 10px; letter-spacing: 1px;
}
.msg td { padding: 5px 10px; border: 1px solid rgba(255,255,255,0.05); color: var(--text); }
.msg tr:nth-child(even) td { background: rgba(0,228,255,0.02); }

/* Copy button */
.code-copy-btn {
  position: absolute; top: 7px; right: 8px;
  background: rgba(0,228,255,0.08);
  border: 1px solid rgba(0,228,255,0.15);
  color: var(--text-mid); font-family: var(--font-mono);
  font-size: 9px; padding: 3px 8px; border-radius: 4px;
  cursor: pointer; transition: var(--t);
}
.code-copy-btn:hover { background: rgba(0,228,255,0.18); color: var(--cyan); }

/* Download card */
.download-card {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(0,255,136,0.04);
  border: 1px solid rgba(0,255,136,0.2);
  border-radius: 8px; padding: 8px 14px; margin: 6px 0;
}
.download-card .file-icon { color: var(--green); font-size: 16px; }
.download-card .file-name { color: var(--green); font-family: var(--font-mono); font-size: 11px; }
.download-card .file-size { color: var(--text-dim); font-size: 9px; }
.download-card .dl-btn {
  background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.25);
  color: var(--green); font-family: var(--font-mono);
  font-size: 9px; padding: 4px 10px; border-radius: 4px;
  cursor: pointer; text-decoration: none; transition: var(--t);
}
.download-card .dl-btn:hover { background: rgba(0,255,136,0.2); }

/* ═══ INPUT BAR ═══ */
.input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; flex-shrink: 0;
}
.mic-btn {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,228,255,0.06);
  border: 2px solid rgba(0,228,255,0.4);
  color: var(--cyan); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t); flex-shrink: 0;
}
.mic-btn svg { width: 18px; height: 18px; }
.mic-btn:hover { background: rgba(0,228,255,0.12); box-shadow: var(--glow-c); }
.mic-ring {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(0,228,255,0.2); pointer-events: none;
}
.mic-btn.recording {
  border-color: var(--red); color: var(--red);
  background: rgba(255,68,102,0.08);
  animation: mic-pulse 0.9s ease-in-out infinite;
}
.mic-btn.recording .mic-ring { border-color: rgba(255,68,102,0.3); animation: mic-ring-pulse 0.9s ease-in-out infinite; }
@keyframes mic-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,68,102,0.3); }
  50%      { box-shadow: 0 0 0 10px rgba(255,68,102,0); }
}
@keyframes mic-ring-pulse {
  0%,100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.3); opacity: 0; }
}

.screen-btn {
  width: 40px; height: 40px; border-radius: 8px;
  background: none; border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-mid); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t); flex-shrink: 0;
}
.screen-btn svg { width: 17px; height: 17px; }
.screen-btn:hover { border-color: rgba(0,228,255,0.3); color: var(--cyan); background: rgba(0,228,255,0.06); }
.screen-btn.active {
  border-color: rgba(0,228,255,0.5); color: var(--cyan);
  background: rgba(0,228,255,0.1);
  animation: screen-glow 1.5s ease-in-out infinite;
}
@keyframes screen-glow {
  0%,100% { box-shadow: 0 0 6px rgba(0,228,255,0.2); }
  50%      { box-shadow: 0 0 18px rgba(0,228,255,0.5); }
}

.input-wrap { flex: 1; position: relative; }
.chat-input {
  width: 100%; height: 44px;
  background: rgba(0,228,255,0.03);
  border: 1px solid rgba(0,228,255,0.15);
  border-radius: 10px; padding: 0 16px;
  color: var(--text);
  font-family: var(--font-mono); font-size: 13px;
  outline: none; transition: var(--t);
}
.chat-input:focus { border-color: rgba(0,228,255,0.45); background: rgba(0,228,255,0.05); }
.chat-input:focus ~ .input-glow { opacity: 1; }
.chat-input::placeholder { color: var(--text-dim); }
.input-glow {
  position: absolute; inset: -1px; border-radius: 11px;
  pointer-events: none; opacity: 0; transition: opacity 0.3s;
  box-shadow: 0 0 20px rgba(0,228,255,0.12);
}

.attach-btn {
  width: 40px; height: 40px; border-radius: 8px;
  background: none; border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-mid); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t); flex-shrink: 0;
}
.attach-btn svg { width: 17px; height: 17px; }
.attach-btn:hover { border-color: rgba(255,184,78,0.4); color: var(--amber); }

.send-btn {
  position: relative;
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(0,228,255,0.1);
  border: 1px solid rgba(0,228,255,0.35);
  color: var(--cyan); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t); overflow: hidden; flex-shrink: 0;
}
.send-btn svg { width: 17px; height: 17px; }
.send-btn:hover { background: rgba(0,228,255,0.18); box-shadow: var(--glow-c); transform: scale(1.05); }
.send-btn:active { transform: scale(0.95); }
.send-ripple {
  position: absolute; border-radius: 50%;
  width: 100%; height: 100%;
  background: rgba(0,228,255,0.15);
  transform: scale(0); pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s;
}
.send-btn:active .send-ripple { transform: scale(2.5); opacity: 0; }

/* Screen preview */
.screen-preview {
  position: relative; margin-bottom: 6px;
  border: 1px solid rgba(0,228,255,0.3); border-radius: 8px;
  overflow: hidden; background: rgba(0,228,255,0.02);
}
.screen-preview img { width: 100%; max-height: 150px; object-fit: cover; display: block; opacity: 0.85; }
.screen-preview .screen-label {
  position: absolute; top: 6px; left: 8px;
  font-family: var(--font-mono); font-size: 9px; color: var(--cyan);
  background: rgba(0,0,0,0.75); padding: 2px 6px; border-radius: 3px;
}
.screen-preview .remove-screen {
  position: absolute; top: 6px; right: 8px;
  background: rgba(0,0,0,0.75); border: none;
  color: var(--text-mid); cursor: pointer; font-size: 13px;
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.screen-preview.live {
  border-color: rgba(255,60,60,0.55);
  box-shadow: 0 0 16px rgba(255,60,60,0.25);
  animation: live-pulse 1.8s ease-in-out infinite;
}
.screen-preview.live .screen-label { color: #ff4040; background: rgba(0,0,0,0.85); font-weight: bold; }
.screen-preview.live .screen-label::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  background: #ff3030; border-radius: 50%; margin-right: 5px;
  vertical-align: middle; animation: live-dot 1s ease-in-out infinite;
}
@keyframes live-pulse {
  0%,100% { box-shadow: 0 0 16px rgba(255,60,60,0.25); }
  50% { box-shadow: 0 0 24px rgba(255,60,60,0.45); }
}
@keyframes live-dot {
  0%,100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* Attachment preview */
.attachment-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: rgba(255,184,78,0.04);
  border: 1px solid rgba(255,184,78,0.2); border-radius: 6px;
  margin-bottom: 6px; font-family: var(--font-mono);
  font-size: 10px; color: var(--amber);
}
.attachment-preview .remove-att {
  margin-left: auto; background: none; border: none;
  color: var(--text-dim); cursor: pointer; font-size: 13px;
}

/* ═══ FILE BROWSER ═══ */
.file-browser { padding: 24px; height: 100%; overflow-y: auto; }
.section-title {
  font-family: var(--font-orb); font-size: 14px;
  color: var(--cyan); letter-spacing: 3px;
  margin-bottom: 20px; text-transform: uppercase;
  text-shadow: 0 0 20px rgba(0,228,255,0.3);
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 12px;
}
.file-list { display: flex; flex-direction: column; gap: 16px; }
.file-project-group { display: flex; flex-direction: column; gap: 6px; }
.file-project-header {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--cyan);
  padding: 4px 0 6px; border-bottom: 1px solid rgba(0,228,255,0.15);
}
.file-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: 8px;
  transition: var(--t);
}
.file-item:hover { border-color: rgba(0,228,255,0.3); box-shadow: var(--glow-c2); }
.file-item-icon { font-size: 20px; flex-shrink: 0; }
.file-item-info { flex: 1; min-width: 0; }
.file-item-name {
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-item-meta { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.file-item-actions { display: flex; gap: 6px; }
.file-item-actions a, .file-item-actions button {
  background: rgba(0,228,255,0.05); border: 1px solid rgba(0,228,255,0.15);
  color: var(--cyan); font-family: var(--font-mono);
  font-size: 9px; padding: 4px 10px; border-radius: 4px;
  cursor: pointer; text-decoration: none; transition: var(--t);
}
.file-item-actions a:hover, .file-item-actions button:hover { background: rgba(0,228,255,0.15); }
.file-empty {
  color: var(--text-dim); font-family: var(--font-mono);
  font-size: 12px; text-align: center; padding: 50px 20px;
}

/* ═══ CONFIG PANEL ═══ */
.config-panel { padding: 24px; max-width: 1200px; }
.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.config-col { min-width: 0; }
@media (max-width: 860px) { .config-grid { grid-template-columns: 1fr; gap: 0; } }
.config-group { margin-bottom: 24px; }
.config-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-mid); letter-spacing: 1.5px;
  text-transform: uppercase; display: block; margin-bottom: 8px;
}
.config-row { display: flex; gap: 8px; }
.config-input {
  flex: 1; height: 40px; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: 7px;
  padding: 0 14px; color: var(--text);
  font-family: var(--font-mono); font-size: 12px; outline: none;
  transition: var(--t);
}
.config-input:focus { border-color: rgba(0,228,255,0.4); }
.config-save-btn {
  height: 40px; padding: 0 18px;
  background: rgba(0,228,255,0.08);
  border: 1px solid rgba(0,228,255,0.3); border-radius: 7px;
  color: var(--cyan); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1px;
  cursor: pointer; transition: var(--t);
}
.config-save-btn:hover { background: rgba(0,228,255,0.16); }
.config-select {
  width: 100%; height: 40px; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: 7px;
  padding: 0 14px; color: var(--text);
  font-family: var(--font-mono); font-size: 12px; outline: none;
  cursor: pointer; transition: var(--t); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300e4ff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.config-select:focus { border-color: rgba(0,228,255,0.4); }
.config-select option { background: #0a0e1a; color: var(--text); }
.config-test-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  background: rgba(0,228,255,0.08);
  border: 1px solid rgba(0,228,255,0.25);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  cursor: pointer; transition: var(--t);
  white-space: nowrap;
}
.config-test-btn:hover { background: rgba(0,228,255,0.18); border-color: rgba(0,228,255,0.5); }
.config-test-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.config-test-btn svg { color: #00e4ff; }
.config-hint { font-size: 10px; color: var(--text-dim); margin-top: 5px; display: block; }
.toggle { position: relative; display: inline-block; width: 46px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: rgba(255,255,255,0.08); border-radius: 12px; transition: var(--t);
}
.toggle-slider::before {
  content: ''; position: absolute;
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: var(--text-mid); border-radius: 50%; transition: var(--t);
}
.toggle input:checked + .toggle-slider { background: rgba(0,228,255,0.2); }
.toggle input:checked + .toggle-slider::before {
  transform: translateX(22px); background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}
.system-info {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); line-height: 2;
  padding: 12px 14px; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: 8px;
}

/* ═══════════════════════════════════════════════
   COCKPIT IRON MAN HUD — v2
═══════════════════════════════════════════════ */
.cockpit-iron {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "title  title   title"
    "left   orb     right"
    "left   hint    right";
  gap: 16px;
  padding: 60px 24px 100px;
  overflow: hidden;
}

/* ═══ CORNER DECORATIONS ═══ */
.hud-corner {
  position: absolute;
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}
.hud-corner::before, .hud-corner::after {
  content: "";
  position: absolute;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.hud-corner::before { width: 100%; height: 2px; top: 0; left: 0; }
.hud-corner::after  { width: 2px;  height: 100%; top: 0; left: 0; }

.hud-tl { top: 12px; left: 12px; }
.hud-tr { top: 12px; right: 12px; transform: scaleX(-1); }
.hud-bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.hud-br { bottom: 12px; right: 12px; transform: scale(-1, -1); }

/* ═══ TOP TITLE ═══ */
.hud-title {
  grid-area: title;
  text-align: center;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hud-title-main {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 900;
  letter-spacing: clamp(6px, 1vw, 14px);
  background: linear-gradient(135deg, #fff, #00e4ff 50%, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(0,228,255,0.4));
}
.hud-title-sub {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(9px, 0.9vw, 11px);
  letter-spacing: 4px;
  color: var(--cyan);
  opacity: 0.7;
  text-transform: uppercase;
}

/* ═══ SIDE HUD PANELS ═══ */
.hud-panel {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(0,228,255,0.05) 0%,
      rgba(0,228,255,0.02) 50%,
      rgba(0,228,255,0.05) 100%);
  border: 1px solid rgba(0,228,255,0.25);
  border-radius: 12px;
  padding: 20px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: calc(100vh - 220px);
  overflow-x: visible;
  overflow-y: auto;
  box-shadow:
    0 0 30px rgba(0,228,255,0.1),
    inset 0 0 40px rgba(0,228,255,0.03);
}
.hud-left  { grid-area: left;  }
.hud-right { grid-area: right; }

.hud-panel::-webkit-scrollbar { width: 4px; }
.hud-panel::-webkit-scrollbar-track { background: transparent; }
.hud-panel::-webkit-scrollbar-thumb { background: rgba(0,228,255,0.3); border-radius: 2px; }

/* Panel brackets (top/bottom) */
.hud-panel-bracket {
  position: absolute;
  left: -4px;
  right: -4px;
  top: -4px;
  height: 16px;
  border: 2px solid var(--cyan);
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 0 12px rgba(0,228,255,0.4);
  pointer-events: none;
}
.hud-bracket-bottom {
  top: auto;
  bottom: -4px;
  border: 2px solid var(--cyan);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

/* Section titles */
.hud-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hud-section-title {
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--cyan);
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,228,255,0.2);
  text-shadow: 0 0 6px rgba(0,228,255,0.5);
}

/* Widgets */
.hud-widget {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: rgba(0,228,255,0.04);
  border: 1px solid rgba(0,228,255,0.15);
  border-radius: 8px;
  transition: all 0.3s;
}
.hud-widget:hover {
  background: rgba(0,228,255,0.08);
  border-color: rgba(0,228,255,0.4);
  transform: translateX(2px);
}
.hud-right .hud-widget:hover { transform: translateX(-2px); }

.widget-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0,228,255,0.15), rgba(255,215,0,0.05));
  border: 1px solid rgba(0,228,255,0.3);
  border-radius: 6px;
  color: var(--cyan);
}
.widget-icon svg { width: 16px; height: 16px; }

.widget-content {
  flex: 1;
  min-width: 0;
}
.widget-label {
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.widget-value {
  font-family: "Orbitron", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.1;
  text-shadow: 0 0 8px rgba(0,228,255,0.4);
}
.widget-sub {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 2px;
  text-transform: capitalize;
}

/* Health bars */
.widget-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--text-dim);
}
.bar-row span { width: 42px; text-align: right; }
.bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  width: 0%;
  transition: width 0.8s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow: 0 0 6px var(--cyan);
}
.bar-fill.ok { width: 92%; }
.bar-fill.warn { background: linear-gradient(90deg, #ffaa00, #ff6b00); width: 60%; }
.bar-fill.err { background: linear-gradient(90deg, #ff3355, #ff0055); width: 30%; }

/* Pulse status */
.widget-pulse {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Quick buttons */
.hud-quick-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hud-qbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,228,255,0.04);
  border: 1px solid rgba(0,228,255,0.2);
  border-radius: 8px;
  color: var(--text);
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}
.hud-qbtn svg { width: 14px; height: 14px; color: var(--cyan); flex-shrink: 0; }
.hud-qbtn:hover {
  background: rgba(0,228,255,0.12);
  border-color: var(--cyan);
  transform: translateX(4px);
  box-shadow: 0 0 16px rgba(0,228,255,0.25);
}
.hud-right .hud-qbtn:hover { transform: translateX(-4px); }

/* Agents list */
.agents-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(0,228,255,0.12);
  border: 1px solid rgba(0,228,255,0.3);
  border-radius: 100px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--cyan);
  text-transform: lowercase;
}
.agent-pill.idle {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-dim);
}
.agent-pill.active {
  animation: agent-pulse 1.5s ease-in-out infinite;
}
@keyframes agent-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0,228,255,0.3); }
  50% { box-shadow: 0 0 12px rgba(0,228,255,0.6); }
}
.agent-pill::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* Metrics grid */
.hud-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.metric-item {
  text-align: center;
  padding: 8px 4px;
  background: rgba(0,228,255,0.04);
  border: 1px solid rgba(0,228,255,0.15);
  border-radius: 6px;
}
.metric-label {
  font-family: "Orbitron", sans-serif;
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.metric-value {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0,228,255,0.4);
}

/* ═══ ORB SECTION (central) ═══ */
.cockpit-iron .orb-section {
  grid-area: orb;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.orb-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,228,255,0.15);
}
.orb-ring-1 {
  width: 52vh;
  height: 52vh;
  max-width: 52vw;
  border-top-color: var(--cyan);
  border-right-color: var(--cyan);
  animation: ring-rotate 20s linear infinite;
}
.orb-ring-2 {
  width: 60vh;
  height: 60vh;
  max-width: 60vw;
  border: 1px dashed rgba(255,215,0,0.2);
  animation: ring-rotate 30s linear infinite reverse;
}
.orb-ring-3 {
  width: 68vh;
  height: 68vh;
  max-width: 68vw;
  border-left-color: var(--gold);
  border-bottom-color: var(--gold);
  opacity: 0.3;
  animation: ring-rotate 40s linear infinite;
}
@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cockpit-iron .avatar-container {
  position: relative;
  z-index: 2;
  width: 42vh;
  height: 42vh;
  max-width: 42vw;
  max-height: 42vh;
}

.cockpit-iron .avatar-status {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  letter-spacing: 6px;
  color: var(--cyan);
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,228,255,0.4);
}

/* ═══ BOTTOM HINT ═══ */
.hud-bottom-hint {
  grid-area: hint;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255,215,0,0.4);
  padding-bottom: 8px;
  opacity: 0.85;
}
.hud-arrow {
  color: var(--cyan);
  animation: arrow-pulse 1.5s ease-in-out infinite;
}
@keyframes arrow-pulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
  .cockpit-iron {
    grid-template-columns: 220px 1fr 220px;
    padding: 50px 14px 100px;
  }
}
@media (max-width: 820px) {
  .cockpit-iron {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "orb"
      "hint";
    padding: 60px 16px 100px;
  }
  .hud-panel { display: none; }
  .cockpit-iron .avatar-container { width: 60vw; height: 60vw; max-width: 400px; max-height: 400px; }
  .orb-ring-1, .orb-ring-2, .orb-ring-3 { display: none; }
}


/* ═══════════════════════════════════════════════
   HUD v3 FIXES — scroll, entity list, agents
═══════════════════════════════════════════════ */

/* v3 hud-panel base definitions removed — superseded by v4+/v5 blocks below */

/* Sections scrollaveis */
.hud-panel .hud-section {
  flex-shrink: 0;
  padding: 0 16px;
}
.hud-panel .hud-section + .hud-section {
  margin-top: 20px;
}

/* ═══ ENTITY LIST (agentes / modelos / conclave) ═══ */
.entity-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.entity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(0,228,255,0.03);
  border: 1px solid rgba(0,228,255,0.1);
  border-radius: 6px;
  transition: all 0.25s;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  cursor: default;
}
.entity-row:hover {
  background: rgba(0,228,255,0.08);
  border-color: rgba(0,228,255,0.3);
  transform: translateX(-2px);
}
.entity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  box-shadow: 0 0 0 rgba(255,255,255,0);
  transition: all 0.3s;
  flex-shrink: 0;
}
.entity-row.idle .entity-dot {
  background: rgba(255,255,255,0.15);
}
.entity-row.active .entity-dot {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: entity-pulse 1.2s ease-in-out infinite;
}
.entity-row.active {
  background: rgba(0,228,255,0.12);
  border-color: rgba(0,228,255,0.5);
  box-shadow: 0 0 12px rgba(0,228,255,0.2);
}
.entity-row.active .entity-name {
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0,228,255,0.6);
}
@keyframes entity-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.entity-emoji {
  font-size: 11px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  filter: grayscale(0.4);
  transition: filter 0.3s;
}
.entity-row.active .entity-emoji { filter: grayscale(0) drop-shadow(0 0 4px rgba(0,228,255,0.6)); }

.entity-name {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entity-tag {
  font-size: 8px;
  padding: 1px 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 100px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.entity-row.active .entity-tag {
  background: rgba(0,228,255,0.2);
  color: var(--cyan);
}

/* v4 hud-panel overflow fix removed — superseded by v5+ blocks below */

/* ═══════════════════════════════════════════════
   HUD v4 — Ingest Button + Modals + Brain Viewer
═══════════════════════════════════════════════ */

/* ── Ingest Button (Mega-Brain section) ── */
.hud-ingest-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(0,228,255,0.05));
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 8px;
  color: var(--gold);
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}
.hud-ingest-btn svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }
.hud-ingest-btn:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(0,228,255,0.1));
  border-color: var(--gold);
  transform: translateX(-2px);
  box-shadow: 0 0 20px rgba(255,215,0,0.3);
}

/* ═══ MODAL SYSTEM ═══ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modal-fade-in 0.25s ease;
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-card {
  background: var(--bg-1, #0a0f24);
  border: 1px solid rgba(0,228,255,0.4);
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(0,228,255,0.2), 0 25px 50px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: modal-slide-in 0.3s cubic-bezier(0.2,0.8,0.2,1);
  display: flex;
  flex-direction: column;
}
@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ingest modal sizing */
.modal-ingest {
  width: 90vw;
  max-width: 580px;
  max-height: 80vh;
}

/* Brain modal sizing */
.modal-brain {
  width: 92vw;
  max-width: 1100px;
  height: 80vh;
  transition: all 0.3s;
}
.modal-brain.maximized {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  border-radius: 0;
}

/* Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,228,255,0.2);
  background: rgba(0,228,255,0.05);
  flex-shrink: 0;
}
.modal-title {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--cyan);
  text-transform: uppercase;
}
.modal-header-btns { display: flex; gap: 8px; }
.modal-close, .modal-size-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.modal-close:hover { background: rgba(255,50,50,0.2); border-color: rgba(255,50,50,0.5); color: #ff4455; }
.modal-size-btn:hover { background: rgba(0,228,255,0.15); border-color: var(--cyan); color: var(--cyan); }

/* Body */
.modal-body { padding: 20px; flex: 1; overflow-y: auto; min-height: 0; }

/* Footer */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(0,228,255,0.15);
  flex-shrink: 0;
}
.modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.modal-btn-secondary {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: var(--text-dim);
}
.modal-btn-secondary:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.modal-btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #050714;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0,228,255,0.4);
}
.modal-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 25px rgba(0,228,255,0.6);
}

/* ═══ INGEST TABS ═══ */
.ingest-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.ingest-tab {
  flex: 1;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.ingest-tab:hover { background: rgba(0,228,255,0.08); color: var(--text); }
.ingest-tab.active {
  background: rgba(0,228,255,0.12);
  border-color: var(--cyan);
  color: var(--cyan);
}
.ingest-panel { display: none; }
.ingest-panel.active { display: block; }

.ingest-label {
  display: block;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ingest-textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,228,255,0.2);
  border-radius: 8px;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.ingest-textarea:focus { border-color: var(--cyan); box-shadow: 0 0 12px rgba(0,228,255,0.15); }
.ingest-textarea::placeholder { color: var(--text-dim); opacity: 0.5; }

.ingest-select {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,228,255,0.2);
  border-radius: 8px;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  outline: none;
}
.ingest-select option { background: #0a0f24; }

/* Dropzone */
.ingest-dropzone {
  border: 2px dashed rgba(0,228,255,0.3);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.3s;
}
.ingest-dropzone:hover, .ingest-dropzone.dragover {
  border-color: var(--cyan);
  background: rgba(0,228,255,0.06);
  color: var(--cyan);
}
.ingest-dropzone svg { margin-bottom: 10px; color: var(--cyan); opacity: 0.5; }
.ingest-dropzone p { font-size: 12px; line-height: 1.6; }
.ingest-dropzone strong { color: var(--cyan); }
.ingest-filetypes { font-size: 10px; opacity: 0.4; margin-top: 8px; }
.ingest-file-name {
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--cyan);
}

/* Session tab */
.ingest-session-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.ingest-session-items { display: flex; flex-direction: column; gap: 6px; }
.ingest-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,255,136,0.05);
  border: 1px solid rgba(0,255,136,0.2);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text);
}
.ingest-check span { color: #00ff88; font-weight: 700; }
.ingest-session-note {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 12px;
  font-style: italic;
}

.ingest-status {
  margin-top: 12px;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  color: var(--cyan);
  min-height: 20px;
}

/* ═══ BRAIN VIEWER ═══ */
.modal-brain-body {
  display: flex;
  gap: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.brain-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid rgba(0,228,255,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
}
.brain-search {
  padding: 12px;
  border-bottom: 1px solid rgba(0,228,255,0.1);
}
.brain-search-input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,228,255,0.2);
  border-radius: 8px;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  outline: none;
}
.brain-search-input:focus { border-color: var(--cyan); }
.brain-search-input::placeholder { color: var(--text-dim); opacity: 0.5; }

.brain-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.brain-tree::-webkit-scrollbar { width: 4px; }
.brain-tree::-webkit-scrollbar-thumb { background: rgba(0,228,255,0.3); border-radius: 2px; }
.brain-loading { padding: 20px; text-align: center; color: var(--text-dim); font-size: 11px; }

/* Tree items */
.brain-folder {
  margin-bottom: 4px;
}
.brain-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-dim);
  transition: all 0.2s;
}
.brain-folder-header:hover { background: rgba(0,228,255,0.08); color: var(--text); }
.brain-folder-header .folder-icon { font-size: 12px; }
.brain-folder-header .folder-name { font-weight: 500; }
.brain-folder-header .folder-count { font-size: 9px; opacity: 0.5; margin-left: auto; }
.brain-folder-items { padding-left: 16px; }

.brain-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-dim);
  transition: all 0.2s;
}
.brain-note:hover { background: rgba(0,228,255,0.08); color: var(--text); }
.brain-note.active {
  background: rgba(0,228,255,0.15);
  color: var(--cyan);
  border: 1px solid rgba(0,228,255,0.3);
}
.brain-note .note-icon { font-size: 10px; opacity: 0.5; }

/* Preview */
.brain-preview {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  min-width: 0;
}
.brain-preview::-webkit-scrollbar { width: 6px; }
.brain-preview::-webkit-scrollbar-thumb { background: rgba(0,228,255,0.2); border-radius: 3px; }

.brain-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-dim);
  font-size: 13px;
  gap: 16px;
}

/* Rendered markdown */
.brain-preview h1 { font-family: "Orbitron", sans-serif; font-size: 22px; color: var(--cyan); margin-bottom: 12px; }
.brain-preview h2 { font-family: "Orbitron", sans-serif; font-size: 16px; color: var(--text); margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(0,228,255,0.15); }
.brain-preview h3 { font-size: 14px; color: var(--gold); margin: 16px 0 6px; }
.brain-preview p { font-size: 13px; line-height: 1.7; color: var(--text-dim); margin-bottom: 8px; }
.brain-preview strong { color: var(--text); }
.brain-preview a, .brain-preview .brain-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,228,255,0.4);
  cursor: pointer;
  transition: all 0.2s;
}
.brain-preview a:hover, .brain-preview .brain-link:hover { color: var(--gold); border-color: var(--gold); }
.brain-preview code {
  background: rgba(0,228,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--cyan);
}
.brain-preview pre {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,228,255,0.15);
  border-radius: 8px;
  padding: 14px;
  overflow-x: auto;
  margin: 12px 0;
}
.brain-preview pre code { background: none; padding: 0; }
.brain-preview table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; }
.brain-preview th { background: rgba(0,228,255,0.1); color: var(--cyan); font-weight: 600; text-align: left; padding: 8px; border: 1px solid rgba(0,228,255,0.2); }
.brain-preview td { padding: 8px; border: 1px solid rgba(0,228,255,0.1); color: var(--text-dim); }
.brain-preview ul, .brain-preview ol { padding-left: 20px; margin: 8px 0; }
.brain-preview li { font-size: 12px; color: var(--text-dim); line-height: 1.8; }
.brain-preview li::marker { color: var(--cyan); }
.brain-preview blockquote {
  border-left: 3px solid var(--gold);
  padding: 8px 16px;
  margin: 12px 0;
  background: rgba(255,215,0,0.05);
  color: var(--text-dim);
  font-style: italic;
}
.brain-preview hr {
  border: none;
  border-top: 1px solid rgba(0,228,255,0.15);
  margin: 20px 0;
}

/* Mobile */
@media (max-width: 768px) {
  .modal-brain { width: 100vw; height: 100vh; border-radius: 0; }
  .brain-sidebar { width: 100%; height: 40%; border-right: none; border-bottom: 1px solid rgba(0,228,255,0.15); }
  .modal-brain-body { flex-direction: column; }
  .modal-ingest { width: 95vw; }
}

/* ═══════════════════════════════════════════════
   HUD v5 — Layout com BOTTOM HUD horizontal
   Substitui grid anterior (3 colunas → 3 col + bottom row)
═══════════════════════════════════════════════ */

/* Override do cockpit-iron grid */
.cockpit-iron {
  grid-template-columns: 280px 1fr 280px !important;
  grid-template-rows: 1fr auto !important;
  grid-template-areas:
    "left   orb     right"
    "bottom bottom  bottom" !important;
  gap: 10px !important;
  padding: 48px 12px 70px !important;
  height: 100vh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Remover título top (fica só no navbar) */
.hud-title { display: none !important; }

/* ═══ PANELS — scroll interno pra caber em 100vh ═══ */
.hud-panel {
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  padding: 12px 10px !important;
  gap: 12px !important;
  border: 1px solid rgba(0,228,255,0.25) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 20px rgba(0,228,255,0.08) !important;
}
.hud-panel > .hud-panel-bracket { display: none !important; }

/* Widgets mais compactos */
.hud-widget {
  padding: 8px !important;
  gap: 8px !important;
}
.widget-icon {
  width: 28px !important;
  height: 28px !important;
}
.widget-icon svg { width: 14px !important; height: 14px !important; }
.widget-value { font-size: 14px !important; }
.widget-label { font-size: 7px !important; letter-spacing: 1.5px !important; }
.widget-sub { font-size: 8px !important; }

/* Quick buttons em row horizontal */
.hud-quick-btns {
  flex-direction: row !important;
  gap: 4px !important;
}
.hud-qbtn {
  flex: 1 !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px 4px !important;
  font-size: 7px !important;
  text-align: center !important;
  justify-content: center !important;
}
.hud-qbtn svg { width: 14px !important; height: 14px !important; }

/* Section title compacto */
.hud-section-title {
  font-size: 8px !important;
  letter-spacing: 2px !important;
  padding-bottom: 4px !important;
}

/* ═══ AIOX SQUAD GRID ═══ */
.aiox-squad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 2px 0;
}
.aiox-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 1px 3px;
  background: rgba(0,228,255,0.03);
  border: 1px solid rgba(0,228,255,0.12);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.aiox-agent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.aiox-agent:hover {
  background: rgba(0,228,255,0.08);
  border-color: rgba(0,228,255,0.4);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,228,255,0.15);
}
.aiox-agent:hover::before { opacity: 1; }
.aiox-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 4px; right: 4px;
}
.aiox-dot.online {
  background: #0f0;
  box-shadow: 0 0 4px #0f0;
  animation: agent-pulse 2s ease-in-out infinite;
}
.aiox-dot.busy {
  background: var(--gold);
  box-shadow: 0 0 4px var(--gold);
  animation: agent-pulse 0.8s ease-in-out infinite;
}
.aiox-dot.offline {
  background: #555;
}
@keyframes agent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.aiox-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,228,255,0.06);
  border: 1px solid rgba(0,228,255,0.2);
  padding: 4px;
  margin-bottom: 1px;
  transition: all 0.3s;
}
.aiox-icon svg {
  width: 100%;
  height: 100%;
}
.aiox-agent:hover .aiox-icon {
  transform: scale(1.1);
}
/* Agent-specific colors */
.ai-master { color: #ffd700; border-color: rgba(255,215,0,0.3); background: rgba(255,215,0,0.08); }
.ai-architect { color: #a78bfa; border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.08); }
.ai-dev { color: #00e4ff; border-color: rgba(0,228,255,0.3); background: rgba(0,228,255,0.08); }
.ai-data { color: #34d399; border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.08); }
.ai-devops { color: #f97316; border-color: rgba(249,115,22,0.3); background: rgba(249,115,22,0.08); }
.ai-ux { color: #f472b6; border-color: rgba(244,114,182,0.3); background: rgba(244,114,182,0.08); }
.ai-pm { color: #60a5fa; border-color: rgba(96,165,250,0.3); background: rgba(96,165,250,0.08); }
.ai-po { color: #fb7185; border-color: rgba(251,113,133,0.3); background: rgba(251,113,133,0.08); }
.ai-analyst { color: #a3e635; border-color: rgba(163,230,53,0.3); background: rgba(163,230,53,0.08); }
.ai-qa { color: #2dd4bf; border-color: rgba(45,212,191,0.3); background: rgba(45,212,191,0.08); }
.ai-sm { color: #c084fc; border-color: rgba(192,132,252,0.3); background: rgba(192,132,252,0.08); }
.ai-squad { color: #fbbf24; border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.08); }
.aiox-agent:hover .ai-master { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
.aiox-agent:hover .ai-architect { box-shadow: 0 0 10px rgba(167,139,250,0.3); }
.aiox-agent:hover .ai-dev { box-shadow: 0 0 10px rgba(0,228,255,0.3); }
.aiox-agent:hover .ai-data { box-shadow: 0 0 10px rgba(52,211,153,0.3); }
.aiox-agent:hover .ai-devops { box-shadow: 0 0 10px rgba(249,115,22,0.3); }
.aiox-agent:hover .ai-ux { box-shadow: 0 0 10px rgba(244,114,182,0.3); }
.aiox-agent:hover .ai-pm { box-shadow: 0 0 10px rgba(96,165,250,0.3); }
.aiox-agent:hover .ai-po { box-shadow: 0 0 10px rgba(251,113,133,0.3); }
.aiox-agent:hover .ai-analyst { box-shadow: 0 0 10px rgba(163,230,53,0.3); }
.aiox-agent:hover .ai-qa { box-shadow: 0 0 10px rgba(45,212,191,0.3); }
.aiox-agent:hover .ai-sm { box-shadow: 0 0 10px rgba(192,132,252,0.3); }
.aiox-agent:hover .ai-squad { box-shadow: 0 0 10px rgba(251,191,36,0.3); }
.aiox-name {
  font-family: Orbitron, sans-serif;
  font-size: 7px;
  color: var(--cyan);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.aiox-role {
  font-size: 6px;
  color: var(--text-dim);
  opacity: 0.6;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Entity rows compactos no painel lateral */
.hud-right .entity-list:not(.aiox-squad-grid) .entity-row {
  padding: 4px 6px !important;
  font-size: 9px !important;
}
.hud-right .entity-tag {
  font-size: 7px !important;
  padding: 1px 4px !important;
}

/* ═══ BOTTOM HUD ═══ */
.hud-bottom {
  grid-area: bottom;
  display: flex;
  gap: 10px;
  width: 100%;
}

.hud-bottom-card {
  flex: 1;
  background: linear-gradient(180deg, rgba(0,228,255,0.06) 0%, rgba(0,228,255,0.02) 100%);
  border: 1px solid rgba(0,228,255,0.25);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 20px rgba(0,228,255,0.06);
  transition: all 0.3s;
}
.hud-bottom-card:hover {
  border-color: rgba(0,228,255,0.45);
  box-shadow: 0 0 30px rgba(0,228,255,0.12);
}

/* Conclave entities horizontal */
.entity-row-h {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
}
.entity-row-h .entity-row {
  flex: 1;
}

/* Ingest button compacto no bottom */
.hud-bottom .hud-ingest-btn {
  margin-top: 4px;
  padding: 8px 10px;
  font-size: 8px;
}
.hud-bottom .hud-ingest-btn svg { width: 14px; height: 14px; }

/* Brain mini card — clicável */
.hud-bottom-brain {
  cursor: pointer;
  border-color: rgba(255,215,0,0.3);
  background: linear-gradient(180deg, rgba(255,215,0,0.06) 0%, rgba(255,215,0,0.02) 100%);
}
.hud-bottom-brain:hover {
  border-color: rgba(255,215,0,0.6);
  box-shadow: 0 0 30px rgba(255,215,0,0.15);
  transform: translateY(-2px);
}
.hud-bottom-brain .hud-section-title {
  color: var(--gold) !important;
}
.brain-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brain-mini-icon {
  width: 32px;
  height: 32px;
  color: var(--gold);
  opacity: 0.7;
  flex-shrink: 0;
  animation: brain-spin 20s linear infinite;
}
@keyframes brain-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.brain-mini .widget-value {
  color: var(--gold) !important;
  font-size: 14px !important;
}

/* Metrics no bottom — 4 colunas */
.hud-bottom .hud-metrics {
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
}
.hud-bottom .metric-item {
  padding: 6px 4px !important;
}
.hud-bottom .metric-value {
  font-size: 12px !important;
}

/* ═══ ORB ajuste — menor pro bottom caber ═══ */
.cockpit-iron .avatar-container {
  width: 36vh !important;
  height: 36vh !important;
  max-width: 36vw !important;
  max-height: 36vh !important;
}
.orb-ring-1 { width: 44vh !important; height: 44vh !important; max-width: 44vw !important; }
.orb-ring-2 { width: 50vh !important; height: 50vh !important; max-width: 50vw !important; }
.orb-ring-3 { width: 56vh !important; height: 56vh !important; max-width: 56vw !important; }

/* ═══ MIC BUTTON — acima do bottom HUD ═══ */
.cockpit-controls {
  bottom: auto !important;
  position: absolute !important;
  z-index: 50;
}

/* ═══ BOTTOM HINT removido (info tá no bottom HUD) ═══ */
.hud-bottom-hint { display: none !important; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
  .cockpit-iron {
    grid-template-columns: 260px 1fr 260px !important;
  }
}
@media (max-width: 900px) {
  .cockpit-iron {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
    grid-template-areas:
      "orb"
      "bottom" !important;
  }
  .hud-left, .hud-right { display: none !important; }
  .hud-bottom { flex-wrap: wrap; }
  .hud-bottom-card { min-width: 200px; }
  .cockpit-iron .avatar-container { width: 50vw !important; height: 50vw !important; max-width: 300px !important; max-height: 300px !important; }
}

/* Fix: botao ingerir sempre visivel e clicavel */
#ingest-submit {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #00e4ff, #ffd700) !important;
  color: #050714 !important;
  font-weight: 800 !important;
}
#ingest-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0,228,255,0.6) !important;
}
#ingest-submit:disabled {
  opacity: 0.5 !important;
  cursor: wait !important;
}

/* Mic button inside Metrics VOZ card */
.metric-voice-mic {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
}
.metric-voice-mic .mic-fab {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  flex-shrink: 0;
}
.metric-voice-mic .mic-fab svg { width: 16px !important; height: 16px !important; }
.metric-voice-mic .mic-ring { inset: -3px !important; }
/* Remove old cockpit-controls positioning */
.cockpit-controls { display: none !important; }

/* Remove borda do avatar-container pra 3D ficar limpo */
.cockpit-iron .avatar-container {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
.orb-section {
  border: none !important;
  outline: none !important;
  overflow: visible !important;
}

/* ═══ FIX: Three.js ocupa TODA a area central do cockpit ═══ */
.cockpit-iron .orb-section {
  position: relative !important;
  overflow: visible !important;
  min-height: 0 !important;
}
.cockpit-iron .avatar-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  border: none !important;
  box-shadow: none !important;
}
/* O canvas do Three.js ja tem position:absolute inset:0 via JS */
.cockpit-iron .avatar-status {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

/* Claude activity card */
.metric-activity {
  min-width: 120px !important;
  flex: 2 !important;
}
.metric-activity-text {
  font-size: 9px !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  color: var(--text-dim) !important;
  transition: color 0.3s;
}
.metric-activity-text.active {
  color: var(--cyan) !important;
  animation: activity-pulse 1.5s ease-in-out infinite;
}
@keyframes activity-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   SCI-FI MILITARY HUD OVERRIDES v7.0
   Circuit-board aesthetics, radial gauges, scanning lines
   Iron Man / Military Command Center feel
═══════════════════════════════════════════════════════════ */

/* ── Extended palette ── */
:root {
  --sf-primary: #00e4ff;
  --sf-secondary: #ffd700;
  --sf-accent: #00ff88;
  --sf-bg-deep: #050714;
  --sf-bg-mid: #0a0f24;
  --sf-text-bright: #e8edff;
  --sf-text-dim: #5a6d99;
  --sf-glow: rgba(0,228,255,0.4);
  --sf-glow-strong: rgba(0,228,255,0.6);
  --sf-glow-soft: rgba(0,228,255,0.15);
  --sf-circuit: rgba(0,228,255,0.08);
  --sf-circuit-line: rgba(0,228,255,0.12);
  --sf-gold-glow: rgba(255,215,0,0.3);
}

/* ── Background upgrade — deeper space feel ── */
body {
  background: linear-gradient(135deg, var(--sf-bg-deep) 0%, #080d1e 40%, #0a0f24 100%) !important;
}

/* ── Circuit board background pattern on body ── */
.bg-hex {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0v20M0 30h20M40 30h20M30 40v20' stroke='%2300e4ff' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%2300e4ff' fill-opacity='0.03'/%3E%3Ccircle cx='0' cy='0' r='1' fill='%2300e4ff' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='0' r='1' fill='%2300e4ff' fill-opacity='0.05'/%3E%3Ccircle cx='0' cy='60' r='1' fill='%2300e4ff' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='60' r='1' fill='%2300e4ff' fill-opacity='0.05'/%3E%3C/svg%3E") !important;
  opacity: 0.7 !important;
}

/* ══════════════════════════════
   1. CORNER DECORATIONS — Thicker brackets with dot at joint
══════════════════════════════ */
.hud-corner {
  width: 100px !important;
  height: 100px !important;
}
.hud-corner::before {
  height: 3px !important;
  background: linear-gradient(90deg, var(--sf-primary), transparent) !important;
  box-shadow: 0 0 12px var(--sf-primary), 0 0 25px rgba(0,228,255,0.2) !important;
}
.hud-corner::after {
  width: 3px !important;
  background: linear-gradient(180deg, var(--sf-primary), transparent) !important;
  box-shadow: 0 0 12px var(--sf-primary), 0 0 25px rgba(0,228,255,0.2) !important;
}
/* Dot at corner joint */
.hud-corner .corner-dot,
.hud-tl::before,
.hud-tr::before,
.hud-bl::before,
.hud-br::before {
  border-radius: 0;
}
/* Use box-shadow trick on the corner to create the dot effect */
.hud-tl { box-shadow: 4px 4px 0 0 var(--sf-primary), 4px 4px 15px 2px rgba(0,228,255,0.5) !important; border-radius: 0 !important; }
.hud-tr { box-shadow: -4px 4px 0 0 var(--sf-primary), -4px 4px 15px 2px rgba(0,228,255,0.5) !important; border-radius: 0 !important; }
.hud-bl { box-shadow: 4px -4px 0 0 var(--sf-primary), 4px -4px 15px 2px rgba(0,228,255,0.5) !important; border-radius: 0 !important; }
.hud-br { box-shadow: -4px -4px 0 0 var(--sf-primary), -4px -4px 15px 2px rgba(0,228,255,0.5) !important; border-radius: 0 !important; }

/* ══════════════════════════════
   2. WIDGET CARDS — Circuit board border pattern
══════════════════════════════ */
.hud-widget {
  position: relative !important;
  background: linear-gradient(135deg, rgba(0,228,255,0.06) 0%, rgba(5,7,20,0.9) 100%) !important;
  border: 1px dashed rgba(0,228,255,0.25) !important;
  border-radius: 4px !important;
  overflow: visible !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
}
/* Circuit node dots at corners */
.hud-widget::before {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  width: 5px !important;
  height: 5px !important;
  background: var(--sf-primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px var(--sf-primary) !important;
  z-index: 2 !important;
}
.hud-widget::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 5px !important;
  height: 5px !important;
  background: var(--sf-primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px var(--sf-primary) !important;
  z-index: 2 !important;
}

/* Widget icon — hexagonal feel */
.widget-icon {
  background: linear-gradient(135deg, rgba(0,228,255,0.2), rgba(0,228,255,0.05)) !important;
  border: 1px solid rgba(0,228,255,0.4) !important;
  border-radius: 2px !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  width: 32px !important;
  height: 32px !important;
}

/* ══════════════════════════════
   3. SECTION TITLES — Diamond separator
══════════════════════════════ */
.hud-section-title {
  position: relative !important;
  text-align: center !important;
  border-bottom: none !important;
  padding-bottom: 10px !important;
  margin-bottom: 4px !important;
}
.hud-section-title::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,228,255,0.4) 40%, rgba(0,228,255,0.4) 60%, transparent) !important;
}
.hud-section-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 7px !important;
  height: 7px !important;
  background: var(--sf-primary) !important;
  box-shadow: 0 0 8px var(--sf-primary), 0 0 16px rgba(0,228,255,0.3) !important;
}

/* ══════════════════════════════
   4. HEALTH BARS — Radial/Circular progress via conic-gradient
══════════════════════════════ */
.widget-bars {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 6px !important;
}
.bar-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  position: relative !important;
}
.bar-row span {
  width: auto !important;
  text-align: center !important;
  font-size: 6px !important;
  letter-spacing: 1px !important;
  order: 2 !important;
}
.bar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: conic-gradient(
    var(--sf-primary) 0deg,
    var(--sf-primary) 0deg,
    rgba(255,255,255,0.06) 0deg,
    rgba(255,255,255,0.06) 360deg
  ) !important;
  overflow: visible !important;
  position: relative !important;
  flex: none !important;
  order: 1 !important;
  box-shadow: 0 0 8px rgba(0,228,255,0.15) !important;
  transition: background 0.8s ease !important;
}
.bar::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: var(--sf-bg-deep) !important;
  border-radius: 50% !important;
}
/* Override fill visibility - hide the linear bar inside the circle */
.bar-fill {
  opacity: 0 !important;
  position: absolute !important;
}
/* Active states via JS data-percent or .ok/.warn/.err classes */
.bar-fill.ok ~ .bar,
.bar:has(> .bar-fill.ok) {
  background: conic-gradient(var(--sf-accent) 330deg, rgba(255,255,255,0.06) 330deg) !important;
}
/* Fallback: JS will set these via style; CSS provides the circular frame */

/* ══════════════════════════════
   5. ENTITY ROWS — Animated pulse dot + hexagonal border
══════════════════════════════ */
.entity-row {
  position: relative !important;
  background: linear-gradient(90deg, rgba(0,228,255,0.04) 0%, rgba(5,7,20,0.8) 100%) !important;
  border: 1px solid rgba(0,228,255,0.12) !important;
  border-radius: 2px !important;
  border-left: 3px solid rgba(0,228,255,0.2) !important;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)) !important;
  transition: all 0.25s ease !important;
}
.entity-row:hover {
  background: linear-gradient(90deg, rgba(0,228,255,0.1) 0%, rgba(5,7,20,0.9) 100%) !important;
  border-left-color: var(--sf-primary) !important;
  box-shadow: 0 0 12px rgba(0,228,255,0.15), inset -20px 0 30px rgba(0,228,255,0.03) !important;
}

/* Animated pulse on the left dot */
.entity-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  position: relative !important;
}
.entity-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,228,255,0.15) !important;
  animation: sf-dot-ping 2.5s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}
@keyframes sf-dot-ping {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.8); opacity: 0; }
}
.entity-row.active .entity-dot::after {
  border-color: var(--sf-primary) !important;
  animation: sf-dot-ping-active 1.2s ease-in-out infinite !important;
}
@keyframes sf-dot-ping-active {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(2.2); opacity: 0; }
}

/* Entity tag — more tactical */
.entity-tag {
  background: rgba(0,228,255,0.08) !important;
  border: 1px solid rgba(0,228,255,0.15) !important;
  border-radius: 2px !important;
  font-size: 7px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}
.entity-row.active .entity-tag {
  background: rgba(0,228,255,0.25) !important;
  border-color: var(--sf-primary) !important;
  box-shadow: 0 0 6px rgba(0,228,255,0.3) !important;
}

/* ══════════════════════════════
   6. BOTTOM HUD CARDS — Scanning line animation
══════════════════════════════ */
.hud-bottom-card {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(5,7,20,0.95) 0%, rgba(10,15,36,0.9) 100%) !important;
  border: 1px solid rgba(0,228,255,0.2) !important;
  border-radius: 4px !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
  box-shadow:
    0 0 20px rgba(0,228,255,0.06),
    inset 0 1px 0 rgba(0,228,255,0.1) !important;
}
/* Scanning line sweep */
.hud-bottom-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--sf-primary), transparent) !important;
  opacity: 0.6 !important;
  /* 06/09: varredura que descia e subia nos cards MEGA-BRAIN/OBSIDIAN/MÉTRICAS — REMOVIDA a pedido do dono */
  animation: none !important;
  display: none !important;
  will-change: transform !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
@keyframes sf-scanline {
  0% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(calc(var(--card-h, 120px))); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 0.6; }
}
/* Stagger scan animation on each card */
.hud-bottom-card:nth-child(2)::before { animation-delay: -1.3s !important; }
.hud-bottom-card:nth-child(3)::before { animation-delay: -2.6s !important; }

/* ══════════════════════════════
   7. METRIC VALUES — Glow effect + text-shadow animation
══════════════════════════════ */
.metric-value,
.widget-value {
  text-shadow:
    0 0 8px rgba(0,228,255,0.5),
    0 0 16px rgba(0,228,255,0.25),
    0 0 32px rgba(0,228,255,0.1) !important;
  animation: sf-value-glow 3s ease-in-out infinite !important;
  will-change: text-shadow !important;
}
@keyframes sf-value-glow {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(0,228,255,0.5),
      0 0 16px rgba(0,228,255,0.25),
      0 0 32px rgba(0,228,255,0.1);
  }
  50% {
    text-shadow:
      0 0 12px rgba(0,228,255,0.7),
      0 0 24px rgba(0,228,255,0.4),
      0 0 48px rgba(0,228,255,0.15);
  }
}

/* Metric items — angular corners */
.metric-item {
  background: linear-gradient(180deg, rgba(0,228,255,0.06) 0%, rgba(5,7,20,0.95) 100%) !important;
  border: 1px solid rgba(0,228,255,0.18) !important;
  border-radius: 2px !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
  position: relative !important;
}
/* Subtle top-line accent */
.metric-item::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--sf-primary), transparent) !important;
  opacity: 0.5 !important;
}

/* ══════════════════════════════
   8. WEATHER WIDGET — clean temperature, no ring
══════════════════════════════ */
#widget-weather .widget-value {
  position: relative !important;
  display: inline-block !important;
}
/* Rings removed — they were cluttering the temperature reading */
#widget-weather .widget-value::before,
#widget-weather .widget-value::after { content: none !important; }

/* ══════════════════════════════
   9. HUD PANELS — Enhanced glow borders + angular clip
══════════════════════════════ */
.hud-panel {
  background: linear-gradient(180deg,
    rgba(5,7,20,0.95) 0%,
    rgba(10,15,36,0.85) 50%,
    rgba(5,7,20,0.95) 100%) !important;
  border: 1px solid rgba(0,228,255,0.2) !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 30px rgba(0,228,255,0.08),
    0 0 60px rgba(0,228,255,0.03),
    inset 0 0 30px rgba(0,228,255,0.02) !important;
  clip-path: polygon(
    0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px)
  ) !important;
}
/* Top edge highlight */
.hud-left::before,
.hud-right::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--sf-primary), transparent) !important;
  z-index: 10 !important;
}

/* ══════════════════════════════
   10. INGEST BUTTON — Pulsing border + prominence
══════════════════════════════ */
.hud-ingest-btn {
  position: relative !important;
  background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(0,228,255,0.08)) !important;
  border: 2px solid rgba(255,215,0,0.5) !important;
  border-radius: 4px !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
  animation: sf-ingest-pulse 2s ease-in-out infinite !important;
  will-change: box-shadow !important;
  overflow: visible !important;
  text-shadow: 0 0 6px rgba(255,215,0,0.3) !important;
}
@keyframes sf-ingest-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255,215,0,0.2), inset 0 0 8px rgba(255,215,0,0.05);
  }
  50% {
    box-shadow: 0 0 20px rgba(255,215,0,0.4), 0 0 40px rgba(255,215,0,0.1), inset 0 0 15px rgba(255,215,0,0.08);
  }
}
.hud-ingest-btn:hover {
  border-color: var(--sf-secondary) !important;
  animation: none !important;
  box-shadow: 0 0 30px rgba(255,215,0,0.5), 0 0 60px rgba(255,215,0,0.15) !important;
}

/* ══════════════════════════════
   11. OBSIDIAN BRAIN CARD — Gold tactical variant
══════════════════════════════ */
.hud-bottom-brain {
  background: linear-gradient(180deg, rgba(15,12,5,0.95) 0%, rgba(10,15,36,0.9) 100%) !important;
  border-color: rgba(255,215,0,0.25) !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
}
.hud-bottom-brain::before {
  background: linear-gradient(90deg, transparent, var(--sf-secondary), transparent) !important;
}
.hud-bottom-brain:hover {
  border-color: rgba(255,215,0,0.5) !important;
  box-shadow: 0 0 30px rgba(255,215,0,0.12), 0 0 60px rgba(255,215,0,0.04) !important;
}
.brain-mini-icon {
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.4)) !important;
}

/* ══════════════════════════════
   12. NAVBAR — Enhanced tactical feel
══════════════════════════════ */
.navbar {
  background: linear-gradient(180deg, rgba(5,7,20,0.98) 0%, rgba(5,7,20,0.9) 100%) !important;
  border-bottom: 1px solid rgba(0,228,255,0.15) !important;
  box-shadow: 0 2px 20px rgba(0,228,255,0.06) !important;
}
.navbar::after {
  content: "" !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 30% !important;
  right: 30% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--sf-primary), transparent) !important;
}
.navbar-title {
  text-shadow: 0 0 15px rgba(255,215,0,0.4), 0 0 30px rgba(255,215,0,0.15) !important;
}
.clock {
  color: var(--sf-primary) !important;
  text-shadow: 0 0 6px rgba(0,228,255,0.3) !important;
}

/* ══════════════════════════════
   13. QUICK BUTTONS — Tactical style
══════════════════════════════ */
.hud-qbtn {
  border-radius: 2px !important;
  border: 1px solid rgba(0,228,255,0.15) !important;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)) !important;
  position: relative !important;
}
.hud-qbtn:hover {
  background: linear-gradient(135deg, rgba(0,228,255,0.15), rgba(0,228,255,0.05)) !important;
  border-color: var(--sf-primary) !important;
  box-shadow: 0 0 12px rgba(0,228,255,0.2), inset 0 0 10px rgba(0,228,255,0.05) !important;
}

/* ══════════════════════════════
   14. MIC BUTTON — Tactical ring
══════════════════════════════ */
.metric-voice-mic .mic-fab {
  border: 2px solid rgba(0,228,255,0.35) !important;
  box-shadow: 0 0 15px rgba(0,228,255,0.1), inset 0 0 10px rgba(0,228,255,0.05) !important;
}
.metric-voice-mic .mic-fab:hover {
  box-shadow: 0 0 25px rgba(0,228,255,0.3), 0 0 50px rgba(0,228,255,0.1), inset 0 0 15px rgba(0,228,255,0.1) !important;
}

/* ══════════════════════════════
   15. AVATAR STATUS — Enhanced glow
══════════════════════════════ */
.cockpit-iron .avatar-status {
  text-shadow: 0 0 10px rgba(0,228,255,0.5), 0 0 20px rgba(0,228,255,0.2) !important;
  letter-spacing: 8px !important;
  font-size: 10px !important;
}

/* ══════════════════════════════
   16. CIRCUIT BOARD DECORATION — Ambient lines in panels
══════════════════════════════ */
.hud-left::after,
.hud-right::after {
  content: "" !important;
  position: absolute !important;
  bottom: 30px !important;
  left: 10px !important;
  right: 10px !important;
  height: 40px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.3 !important;
  background-image:
    linear-gradient(0deg, rgba(0,228,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,228,255,0.06) 1px, transparent 1px) !important;
  background-size: 12px 8px !important;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.5), transparent) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.5), transparent) !important;
}

/* ══════════════════════════════
   17. SCROLLBAR — Tactical
══════════════════════════════ */
::-webkit-scrollbar { width: 5px !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sf-primary), rgba(0,228,255,0.2)) !important;
  border-radius: 0 !important;
}
::-webkit-scrollbar-track {
  background: rgba(0,228,255,0.03) !important;
}

/* ══════════════════════════════
   18. SCANLINES — Enhanced
══════════════════════════════ */
.bg-scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,228,255,0.008) 3px,
    rgba(0,228,255,0.008) 4px
  ) !important;
  animation: sf-scanlines-drift 8s linear infinite !important;
  will-change: transform !important;
}
@keyframes sf-scanlines-drift {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}

/* ══════════════════════════════
   19. LANG BUTTONS — Tactical
══════════════════════════════ */
.lang-btn {
  border-radius: 2px !important;
}
.lang-btn.active {
  background: rgba(0,228,255,0.12) !important;
  border-color: rgba(0,228,255,0.4) !important;
  box-shadow: 0 0 8px rgba(0,228,255,0.2) !important;
}

/* ══════════════════════════════
   20. GLOBAL GLOW ENHANCEMENTS
══════════════════════════════ */
/* Ambient glow corners — more dramatic */
.bg-glow-tl {
  background: radial-gradient(ellipse at 15% 15%, rgba(0,100,200,0.08), transparent 65%) !important;
}
.bg-glow-br {
  background: radial-gradient(ellipse at 85% 85%, rgba(0,228,255,0.04), transparent 65%) !important;
}

/* Active entity row — enhanced */
.entity-row.active {
  background: linear-gradient(90deg, rgba(0,228,255,0.18) 0%, rgba(5,7,20,0.9) 100%) !important;
  border-color: rgba(0,228,255,0.5) !important;
  border-left: 3px solid var(--sf-primary) !important;
  box-shadow: 0 0 16px rgba(0,228,255,0.2), inset -30px 0 40px rgba(0,228,255,0.04) !important;
}
.entity-row.active .entity-name {
  text-shadow: 0 0 8px rgba(0,228,255,0.5) !important;
}

/* ══════════════════════════════
   21. MODAL CARDS — Angular tactical
══════════════════════════════ */
.modal-card {
  background: linear-gradient(180deg, #0a0f24, #050714) !important;
  border: 1px solid rgba(0,228,255,0.3) !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 60px rgba(0,228,255,0.15),
    0 0 120px rgba(0,228,255,0.05),
    0 25px 60px rgba(0,0,0,0.6) !important;
}
.modal-header {
  background: linear-gradient(90deg, rgba(0,228,255,0.08), rgba(0,228,255,0.03)) !important;
  border-bottom: 1px solid rgba(0,228,255,0.2) !important;
}

/* ══════════════════════════════
   22. SELECTION / FOCUS STATES — Cyan tactical
══════════════════════════════ */
::selection {
  background: rgba(0,228,255,0.25);
  color: #fff;
}

/* ══════════════════════════════
   23. CONCLAVE ROW — Horizontal tactical
══════════════════════════════ */
.entity-row-h .entity-row {
  border-left: 2px solid rgba(0,228,255,0.15) !important;
}
.entity-row-h .entity-row:hover {
  border-left-color: var(--sf-primary) !important;
}

/* ══════════════════════════════
   24. CPU/GPU/RAM WIDGETS — Radial gauge accent
══════════════════════════════ */
#widget-cpu .widget-value,
#widget-gpu .widget-value,
#widget-ram .widget-value {
  position: relative !important;
  z-index: 1 !important;
}

/* ══════════════════════════════
   25. AMBIENT PARTICLE DOTS (pure CSS)
══════════════════════════════ */
.cockpit-iron::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(0,228,255,0.15), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(0,228,255,0.1), transparent),
    radial-gradient(1px 1px at 70% 30%, rgba(0,228,255,0.12), transparent),
    radial-gradient(1px 1px at 85% 65%, rgba(255,215,0,0.08), transparent),
    radial-gradient(1px 1px at 50% 90%, rgba(0,228,255,0.1), transparent),
    radial-gradient(1px 1px at 15% 85%, rgba(0,255,136,0.06), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(0,228,255,0.08), transparent) !important;
  animation: sf-particles-float 20s ease-in-out infinite alternate !important;
  will-change: opacity !important;
}
@keyframes sf-particles-float {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* ══════════════════════════════
   26. GRID LINE OVERLAY on cockpit
══════════════════════════════ */
.cockpit-iron::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.15 !important;
  background-image:
    linear-gradient(90deg, rgba(0,228,255,0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,228,255,0.03) 1px, transparent 1px) !important;
  background-size: 80px 80px !important;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.3), transparent 70%) !important;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.3), transparent 70%) !important;
}

/* ══════════════════════════════
   PERFORMANCE NOTES:
   - All animations use transform/opacity only (GPU composited)
   - will-change hints on animated properties
   - No layout-triggering animations (no width/height/top/left animations)
   - clip-path is GPU-accelerated in modern browsers
   - Staggered animations prevent simultaneous repaints
══════════════════════════════ */

/* ═══ CRITICAL FIX: Cerebro 3D sem corte ═══ */
.cockpit-iron .orb-section {
  overflow: visible !important;
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.cockpit-iron .avatar-container {
  position: absolute !important;
  inset: -50px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.cockpit-iron .avatar-container canvas,
.cockpit-iron .avatar-container > div {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
}
.cockpit-iron .avatar-status {
  bottom: -40px !important;
}


/* ═══════════════════════════════════════════════
   ULTIMATE FIX: Cerebro 3D ocupa TODA area central
   Override FINAL de todas as regras anteriores
═══════════════════════════════════════════════ */
.cockpit-iron .orb-section {
  grid-area: orb !important;
  position: relative !important;
  overflow: visible !important;
  min-height: 0 !important;
  min-width: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.cockpit-iron .avatar-container {
  position: absolute !important;
  top: -20px !important;
  left: -20px !important;
  right: -20px !important;
  bottom: -20px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Canvas do Three.js preenche o container */
.cockpit-iron .avatar-container canvas,
.cockpit-iron .avatar-container > div[style] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
}

/* Status text fica no fundo */
.cockpit-iron .avatar-status {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

/* Garantir que o grid do cockpit nao corta overflow */
.cockpit-iron {
  overflow: visible !important;
}


/* ═══════════════════════════════════════════════
   HUD REFINEMENT v8 — Fix cortando + polish
═══════════════════════════════════════════════ */

/* Fix HUD direito: nomes cortados — dar mais espaço */
.hud-right {
  min-width: 240px !important;
  overflow-x: hidden !important;
}
.hud-right .entity-row {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.hud-right .entity-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 60px !important;
}
.hud-right .entity-grid {
  gap: 3px !important;
}
.hud-right .entity-grid .entity-row {
  padding: 5px 6px !important;
}

/* Fix HUD esquerdo: widgets mais compactos */
.hud-left .hud-widget {
  padding: 8px 10px !important;
}
.hud-left .widget-value {
  font-size: 13px !important;
}
.hud-left .widget-sub {
  font-size: 7px !important;
}

/* Health bars radial: menores e mais refinadas */
.bar-row {
  height: 28px !important;
}
.bar-row span {
  font-size: 7px !important;
  width: 35px !important;
}

/* Bottom HUD: mais compacto */
.hud-bottom-card {
  padding: 10px 12px !important;
}
.hud-bottom .hud-section-title {
  font-size: 8px !important;
  margin-bottom: 4px !important;
}

/* Metrics: valores menores */
.hud-bottom .metric-value {
  font-size: 11px !important;
}
.hud-bottom .metric-label {
  font-size: 6px !important;
}

/* Quick buttons: mais compactos */
.hud-bottom .hud-qbtn {
  padding: 6px 4px !important;
  font-size: 7px !important;
}
.hud-bottom .hud-qbtn svg {
  width: 12px !important;
  height: 12px !important;
}

/* Ingest button: mais fino */
.hud-ingest-btn {
  padding: 7px 10px !important;
  font-size: 7px !important;
}

/* Conclave entities: mais compactos no bottom */
.entity-row-h .entity-row {
  padding: 4px 6px !important;
  font-size: 8px !important;
}

/* Obsidian card: notas menores */
.hud-bottom-brain .widget-value {
  font-size: 13px !important;
}

/* Navbar: clock mais visivel */
.clock {
  font-size: 12px !important;
  color: var(--cyan) !important;
  text-shadow: 0 0 8px rgba(0,228,255,0.5) !important;
}

/* Section titles: diamante mais sutil */
.hud-section-title::after {
  width: 5px !important;
  height: 5px !important;
}

/* Corner brackets: mais finos */
.hud-corner {
  width: 60px !important;
  height: 60px !important;
}

/* Weather fallback: mostrar algo util quando nao tem GPS */


/* ═══ Server bar status labels ═══ */
.bar-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  color: var(--green, #00ff88);
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 20px;
  text-align: right;
}

/* ═══ Obsidian details grid ═══ */
.obsidian-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 6px;
}
.obs-detail {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: rgba(255,215,0,0.04);
  border: 1px solid rgba(255,215,0,0.12);
  border-radius: 4px;
  font-size: 9px;
}
.obs-icon { font-size: 10px; }
.obs-label {
  color: var(--text-dim);
  font-family: "Orbitron", sans-serif;
  font-size: 7px;
  letter-spacing: 0.5px;
}
.obs-val {
  margin-left: auto;
  color: var(--gold, #ffd700);
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  font-weight: 700;
}


/* ═══ Server status grid (legivel) ═══ */
.server-status-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.server-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: rgba(0,255,136,0.04);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
}
.server-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
  flex-shrink: 0;
}
.server-dot.err {
  background: #ff4455;
  box-shadow: 0 0 6px #ff4455;
}
.server-name {
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 1px;
  flex: 1;
}
.server-state {
  font-size: 8px;
  font-weight: 700;
  color: #00ff88;
  letter-spacing: 0.5px;
}
.server-state.err {
  color: #ff4455;
}


/* ═══ REMOVER corner brackets (quadrados nos cantos) ═══ */
.hud-corner {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   ADVANCED SCI-FI HUD COMPONENTS v1.0
   Circular Gauge · Radar · Waveform · Activity · Graph · Flow
═══════════════════════════════════════════════════════════ */

/* ─── 1. CIRCULAR GAUGE ─── */
.gauge {
  --value: 0;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gauge-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    #00e4ff calc(var(--value) * 1%),
    rgba(90,109,153,0.2) calc(var(--value) * 1%)
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  transition: --value 0.6s ease;
  will-change: transform;
  filter: drop-shadow(0 0 4px rgba(0,228,255,0.45));
}
/* tick marks at 0, 25, 50, 75 */
.gauge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,   rgba(0,228,255,0.5) 0.8%, transparent 0.8%),
    conic-gradient(from 90deg,  rgba(0,228,255,0.5) 0.8%, transparent 0.8%),
    conic-gradient(from 180deg, rgba(0,228,255,0.5) 0.8%, transparent 0.8%),
    conic-gradient(from 270deg, rgba(0,228,255,0.5) 0.8%, transparent 0.8%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px), #000 calc(100% - 2px), transparent calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px), #000 calc(100% - 2px), transparent calc(100% - 2px));
  pointer-events: none;
  z-index: 1;
}
.gauge-value {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #00e4ff;
  text-shadow: 0 0 6px rgba(0,228,255,0.4);
}

/* ─── 2. RADAR / SONAR DISPLAY ─── */
.radar {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,136,0.03) 0%, rgba(5,7,20,0.95) 70%);
  border: 1px solid rgba(0,255,136,0.2);
  overflow: hidden;
}
/* concentric rings */
.radar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 19%, rgba(0,255,136,0.1) 20%, transparent 21%),
    radial-gradient(circle, transparent 39%, rgba(0,255,136,0.08) 40%, transparent 41%),
    radial-gradient(circle, transparent 59%, rgba(0,255,136,0.06) 60%, transparent 61%);
  pointer-events: none;
}
/* cross-hair lines */
.radar::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg,   transparent 49.5%, rgba(0,255,136,0.1) 49.5%, rgba(0,255,136,0.1) 50.5%, transparent 50.5%),
    linear-gradient(90deg,  transparent 49.5%, rgba(0,255,136,0.1) 49.5%, rgba(0,255,136,0.1) 50.5%, transparent 50.5%);
  pointer-events: none;
}
/* sweep line */
.radar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(0,255,136,0.6), transparent);
  will-change: transform;
  animation: radar-spin 5s linear infinite;
}
.radar-sweep::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 60px;
  background: conic-gradient(from -30deg at 0% 50%, rgba(0,255,136,0.12), transparent 60deg);
  pointer-events: none;
}
@keyframes radar-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* blips */
.radar-blip {
  --angle: 0deg;
  --dist: 50%;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88, 0 0 12px rgba(0,255,136,0.3);
  top: 50%;
  left: 50%;
  transform:
    rotate(var(--angle))
    translateX(calc(var(--dist) * 0.6))
    translate(-50%, -50%);
  will-change: opacity;
  animation: blip-pulse 2s ease-in-out infinite;
}
@keyframes blip-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ─── 3. WAVEFORM / HEARTBEAT LINE ─── */
.waveform {
  width: 100%;
  height: 30px;
  position: relative;
  overflow: hidden;
}
.waveform::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 10%,
      rgba(0,228,255,0.0) 10%,
      rgba(0,228,255,0.0) 12%,
      transparent 12%,
      transparent 35%,
      rgba(0,228,255,0.0) 35%,
      rgba(0,228,255,0.0) 36%,
      transparent 36%,
      transparent 38%
    );
  will-change: transform;
}
.waveform::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath d='M0,15 L20,15 L25,15 L30,5 L35,25 L40,12 L45,18 L50,15 L70,15 L75,15 L80,2 L85,28 L90,10 L95,20 L100,15 L120,15 L125,15 L130,5 L135,25 L140,12 L145,18 L150,15 L170,15 L175,15 L180,2 L185,28 L190,10 L195,20 L200,15' fill='none' stroke='%2300e4ff' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x center / 200px 30px;
  filter: drop-shadow(0 0 4px rgba(0,228,255,0.5));
  will-change: transform;
  animation: waveform-scroll 3s linear infinite;
}
@keyframes waveform-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* ─── 4. ACTIVITY BAR (AI Models) ─── */
.activity-bar {
  width: 100%;
  height: 3px;
  background: rgba(90,109,153,0.15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.activity-fill {
  height: 100%;
  width: 10%;
  border-radius: 2px;
  background: rgba(0,228,255,0.25);
  transition: width 0.4s ease, opacity 0.4s ease;
  will-change: width, opacity;
}
.activity-bar.active .activity-fill {
  width: 100%;
  opacity: 1;
  background: linear-gradient(90deg, transparent, #00e4ff, transparent);
  animation: activity-sweep 1.8s ease-in-out infinite;
}
@keyframes activity-sweep {
  0%   { transform: translateX(-100%); opacity: 0.6; }
  50%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0.6; }
}

/* ─── 5. MINI KNOWLEDGE GRAPH (Obsidian) ─── */
.mini-graph {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 80px;
  overflow: hidden;
}
.graph-node {
  --x: 50%;
  --y: 50%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 6px rgba(255,215,0,0.5), 0 0 12px rgba(255,215,0,0.2);
  will-change: transform, opacity;
  animation: node-glow 3s ease-in-out infinite;
  animation-delay: calc(var(--x, 50%) * 0.01s);
  transform: translate(-50%, -50%);
}
.graph-node::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,215,0,0.08);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@keyframes node-glow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.3); }
}
/* graph lines drawn via embedded SVG in the component */
.mini-graph svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mini-graph svg line {
  stroke: rgba(255,215,0,0.15);
  stroke-width: 1;
}

/* ─── 6. DATA FLOW INDICATOR ─── */
.data-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.flow-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00e4ff;
  opacity: 0.2;
  will-change: opacity, transform;
  animation: flow-move 1.5s ease-in-out infinite;
}
.flow-dot:nth-child(1) { animation-delay: 0s; }
.flow-dot:nth-child(2) { animation-delay: 0.2s; }
.flow-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes flow-move {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  40%      { opacity: 1;    transform: scale(1.3); }
  60%      { opacity: 1;    transform: scale(1.3); }
}

/* ─── 7. EXPANDED LAYOUT OVERRIDE ─── */
.cockpit-iron.expanded {
  grid-template-columns: 300px 1fr 300px;
  gap: 20px;
  padding: 60px 28px 100px;
}
.cockpit-iron.expanded .hud-panel {
  min-width: 280px;
}
.cockpit-iron.expanded .hud-bottom .hud-card {
  min-height: 120px;
}

/* ─── 8. ENHANCED PANEL BORDERS ─── */
.hud-panel.enhanced {
  border: 1px solid rgba(0,228,255,0.3);
  outline: 1px dashed rgba(0,228,255,0.08);
  outline-offset: 3px;
  animation: panel-glow-pulse 4s ease-in-out infinite;
}
@keyframes panel-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,228,255,0.08), inset 0 0 30px rgba(0,228,255,0.02); }
  50%      { box-shadow: 0 0 35px rgba(0,228,255,0.15), inset 0 0 40px rgba(0,228,255,0.04); }
}
/* corner accents */
.hud-panel.enhanced::before,
.hud-panel.enhanced::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(0,228,255,0.4);
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}
.hud-panel.enhanced::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
  border-radius: 4px 0 0 0;
}
.hud-panel.enhanced::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 4px 0;
}
/* second set of corner accents via wrapper */
.panel-accent-tr,
.panel-accent-bl {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(0,228,255,0.4);
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}
.panel-accent-tr {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
  border-radius: 0 4px 0 0;
}
.panel-accent-bl {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
  border-radius: 0 0 0 4px;
}

/* ═══════════════════════════════════════════════════════════
   SCI-FI HUD COCKPIT COMPONENTS v8.0
   Circular gauges, radar, waveforms, data flow, knowledge graph
═══════════════════════════════════════════════════════════ */

/* ── 1. CIRCULAR GAUGE (conic-gradient) ── */
.hud-widget-gauge {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
  padding: 10px 10px 10px 14px !important;
}
.gauge-ring {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(
    var(--sf-primary) 0deg,
    var(--sf-primary) calc(var(--value, 0) * 3.6deg),
    rgba(0,228,255,0.08) calc(var(--value, 0) * 3.6deg),
    rgba(0,228,255,0.08) 360deg
  );
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0,228,255,0.15), inset 0 0 6px rgba(0,228,255,0.05);
  transition: background 0.6s ease;
}
.gauge-inner {
  position: absolute;
  inset: 5px;
  background: var(--sf-bg-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gauge-pct {
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--sf-primary);
  text-shadow: 0 0 6px rgba(0,228,255,0.5);
}
.gauge-ticks {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  animation: gauge-tick-spin 30s linear infinite;
  pointer-events: none;
}
@keyframes gauge-tick-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Outer dashed ring on gauge */
.gauge-ring::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(0,228,255,0.15);
  animation: gauge-tick-spin 20s linear infinite reverse;
  pointer-events: none;
}

/* ── 2. WEATHER ANIMATED CANVAS ── */
.weather-anim-canvas {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  opacity: 0.4;
  pointer-events: none;
}

/* ── 3. NETWORK DATA FLOW ── */
.hud-widget-net {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 8px 10px !important;
  gap: 6px !important;
}
.net-flow {
  position: relative;
  height: 16px;
  background: rgba(0,228,255,0.03);
  border-radius: 2px;
  overflow: hidden;
}
.net-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,228,255,0.3), transparent);
}
.net-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--sf-primary);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 6px var(--sf-primary);
  animation: net-flow-move 2s linear infinite;
}
.net-dot.nd1 { left: -4px; animation-delay: 0s; }
.net-dot.nd2 { left: -4px; animation-delay: 0.33s; }
.net-dot.nd3 { left: -4px; animation-delay: 0.66s; }
.net-dot.nd4 { left: -4px; animation-delay: 1s; }
.net-dot.nd5 { left: -4px; animation-delay: 1.33s; }
.net-dot.nd6 { left: -4px; animation-delay: 1.66s; }
@keyframes net-flow-move {
  0% { left: -4px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% + 4px); opacity: 0; }
}
.net-stats {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
}
.net-up {
  color: var(--sf-accent);
  text-shadow: 0 0 4px rgba(0,255,136,0.3);
}
.net-down {
  color: var(--sf-primary);
  text-shadow: 0 0 4px rgba(0,228,255,0.3);
}

/* ── 4. SYSTEM UPTIME MINI WIDGET ── */
.hud-widget-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: linear-gradient(90deg, rgba(0,228,255,0.04), rgba(5,7,20,0.8));
  border: 1px solid rgba(0,228,255,0.12);
  border-radius: 3px;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.uptime-val {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: var(--sf-primary) !important;
}

/* ── 5. AI MODEL ACTIVITY BARS ── */
.activity-bar {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0,228,255,0.06);
  overflow: hidden;
  border-radius: 0 0 2px 2px;
}
.activity-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--sf-primary), var(--sf-accent));
  border-radius: 2px;
  transition: width 0.4s ease;
  box-shadow: 0 0 4px var(--sf-primary);
}
/* Active state: animate the bar */
.entity-row.active .activity-bar-fill {
  width: 100%;
  animation: activity-bar-pulse 1.5s ease-in-out infinite;
}
@keyframes activity-bar-pulse {
  0%, 100% { width: 30%; opacity: 0.6; }
  50% { width: 100%; opacity: 1; }
}

/* ── 6. RADAR / SONAR DISPLAY ── */
.radar-container {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 4px auto 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,228,255,0.04) 0%, rgba(5,7,20,0.95) 100%);
  border: 1px solid rgba(0,228,255,0.2);
  overflow: hidden;
}
.radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,228,255,0.1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.radar-ring.r1 { width: 25%; height: 25%; }
.radar-ring.r2 { width: 55%; height: 55%; }
.radar-ring.r3 { width: 85%; height: 85%; }
.radar-center-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--sf-primary);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px var(--sf-primary);
}
.radar-sweep {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  left: 50%;
  transform-origin: bottom left;
  background: linear-gradient(0deg, rgba(0,228,255,0.25) 0%, transparent 100%);
  animation: radar-spin 3s linear infinite;
}
@keyframes radar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.radar-blip {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--sf-primary);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--sf-primary), 0 0 12px rgba(0,228,255,0.3);
  animation: radar-blip-fade 3s ease-in-out infinite;
}
.radar-blip.rb1 { top: 20%; left: 60%; animation-delay: 0s; }
.radar-blip.rb2 { top: 55%; left: 25%; animation-delay: 0.8s; }
.radar-blip.rb3 { top: 35%; left: 72%; animation-delay: 1.5s; }
.radar-blip.rb4 { top: 70%; left: 55%; animation-delay: 2.2s; }
@keyframes radar-blip-fade {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* ── 7. AGENT READINESS BARS ── */
.agent-ready-bar {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0,228,255,0.06);
  overflow: hidden;
}
.agent-ready-fill {
  height: 100%;
  width: calc(var(--ready, 0) * 1%);
  background: linear-gradient(90deg, rgba(0,228,255,0.3), var(--sf-primary));
  transition: width 0.5s ease;
}

/* ── 8. CONCLAVE CIRCULAR GAUGES ── */
.conclave-gauges {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 8px 0;
}
.conclave-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(0,228,255,0.03);
  border: 1px solid rgba(0,228,255,0.1);
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
  min-width: 70px;
}
.conclave-gauge:hover {
  background: rgba(0,228,255,0.08);
  border-color: rgba(0,228,255,0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,228,255,0.15);
}
.conclave-gauge:nth-child(1) { border-color: rgba(255,107,107,0.25); }
.conclave-gauge:nth-child(1):hover { border-color: rgba(255,107,107,0.5); box-shadow: 0 4px 12px rgba(255,107,107,0.15); }
.conclave-gauge:nth-child(2) { border-color: rgba(255,215,0,0.25); }
.conclave-gauge:nth-child(2):hover { border-color: rgba(255,215,0,0.5); box-shadow: 0 4px 12px rgba(255,215,0,0.15); }
.conclave-gauge:nth-child(3) { border-color: rgba(204,136,255,0.25); }
.conclave-gauge:nth-child(3):hover { border-color: rgba(204,136,255,0.5); box-shadow: 0 4px 12px rgba(204,136,255,0.15); }
.cg-ring {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(0,228,255,0.6) 0deg,
    rgba(0,228,255,0.6) calc(var(--value, 0) * 3.6deg),
    rgba(0,228,255,0.08) calc(var(--value, 0) * 3.6deg),
    rgba(0,228,255,0.08) 360deg
  );
  box-shadow: 0 0 12px rgba(0,228,255,0.15);
  transition: background 0.6s ease;
}
.conclave-gauge:nth-child(1) .cg-ring {
  background: conic-gradient(rgba(255,107,107,0.7) 0deg, rgba(255,107,107,0.7) calc(var(--value,0)*3.6deg), rgba(255,107,107,0.08) calc(var(--value,0)*3.6deg), rgba(255,107,107,0.08) 360deg);
}
.conclave-gauge:nth-child(2) .cg-ring {
  background: conic-gradient(rgba(255,215,0,0.7) 0deg, rgba(255,215,0,0.7) calc(var(--value,0)*3.6deg), rgba(255,215,0,0.08) calc(var(--value,0)*3.6deg), rgba(255,215,0,0.08) 360deg);
}
.conclave-gauge:nth-child(3) .cg-ring {
  background: conic-gradient(rgba(204,136,255,0.7) 0deg, rgba(204,136,255,0.7) calc(var(--value,0)*3.6deg), rgba(204,136,255,0.08) calc(var(--value,0)*3.6deg), rgba(204,136,255,0.08) 360deg);
}
.cg-inner {
  position: absolute;
  inset: 5px;
  background: var(--sf-bg-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.cg-label {
  font-family: Orbitron, sans-serif;
  font-size: 7px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── 9. KNOWLEDGE GRAPH MINI (Obsidian card) ── */
.kg-mini {
  position: relative;
  height: 50px;
  margin: 4px 0;
  overflow: hidden;
}
.kg-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kg-node {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--sf-secondary);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,215,0,0.4);
  animation: kg-pulse 3s ease-in-out infinite;
}
.kg-node.kn1 { top: 20%; left: 15%; animation-delay: 0s; }
.kg-node.kn2 { top: 20%; left: 85%; animation-delay: 0.5s; }
.kg-node.kn3 { top: 45%; left: 50%; animation-delay: 1s; width: 8px; height: 8px; }
.kg-node.kn4 { top: 72%; left: 30%; animation-delay: 1.5s; }
.kg-node.kn5 { top: 72%; left: 70%; animation-delay: 2s; }
.kg-node.kn6 { top: 8%; left: 50%; animation-delay: 0.3s; width: 4px; height: 4px; }
.kg-node.kn7 { top: 88%; left: 50%; animation-delay: 1.8s; width: 4px; height: 4px; }
@keyframes kg-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}
/* Animate the SVG lines */
.kg-lines line {
  animation: kg-line-glow 4s ease-in-out infinite alternate;
}
.kg-lines line:nth-child(2n) { animation-delay: -1s; }
.kg-lines line:nth-child(3n) { animation-delay: -2s; }
@keyframes kg-line-glow {
  0% { stroke-opacity: 0.15; }
  100% { stroke-opacity: 0.5; }
}

/* ── 10. WAVEFORM / HEARTBEAT LINE ── */
.hud-waveform {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  padding: 0 4px;
  margin-bottom: 4px;
}
.wf-bar {
  flex: 1;
  min-width: 3px;
  background: linear-gradient(to top, var(--sf-primary), rgba(0,228,255,0.3));
  border-radius: 1px 1px 0 0;
  animation: wf-wave 1.5s ease-in-out infinite;
  box-shadow: 0 0 3px rgba(0,228,255,0.2);
}
.wf-bar:nth-child(1)  { animation-delay: 0.00s; height: 30%; }
.wf-bar:nth-child(2)  { animation-delay: 0.06s; height: 50%; }
.wf-bar:nth-child(3)  { animation-delay: 0.12s; height: 80%; }
.wf-bar:nth-child(4)  { animation-delay: 0.18s; height: 100%; }
.wf-bar:nth-child(5)  { animation-delay: 0.24s; height: 70%; }
.wf-bar:nth-child(6)  { animation-delay: 0.30s; height: 40%; }
.wf-bar:nth-child(7)  { animation-delay: 0.36s; height: 20%; }
.wf-bar:nth-child(8)  { animation-delay: 0.42s; height: 55%; }
.wf-bar:nth-child(9)  { animation-delay: 0.48s; height: 90%; }
.wf-bar:nth-child(10) { animation-delay: 0.54s; height: 60%; }
.wf-bar:nth-child(11) { animation-delay: 0.60s; height: 35%; }
.wf-bar:nth-child(12) { animation-delay: 0.66s; height: 75%; }
.wf-bar:nth-child(13) { animation-delay: 0.72s; height: 45%; }
.wf-bar:nth-child(14) { animation-delay: 0.78s; height: 85%; }
.wf-bar:nth-child(15) { animation-delay: 0.84s; height: 25%; }
.wf-bar:nth-child(16) { animation-delay: 0.90s; height: 65%; }
.wf-bar:nth-child(17) { animation-delay: 0.96s; height: 95%; }
.wf-bar:nth-child(18) { animation-delay: 1.02s; height: 50%; }
.wf-bar:nth-child(19) { animation-delay: 1.08s; height: 30%; }
.wf-bar:nth-child(20) { animation-delay: 1.14s; height: 70%; }
.wf-bar:nth-child(21) { animation-delay: 1.20s; height: 40%; }
.wf-bar:nth-child(22) { animation-delay: 1.26s; height: 80%; }
.wf-bar:nth-child(23) { animation-delay: 1.30s; height: 55%; }
.wf-bar:nth-child(24) { animation-delay: 1.34s; height: 35%; }
@keyframes wf-wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.3); }
}

/* ── 11. EQUALIZER BARS ── */
.hud-equalizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin: 4px 0;
}
.eq-bar {
  width: 6px;
  background: linear-gradient(to top, var(--sf-accent), rgba(0,255,136,0.2));
  border-radius: 1px 1px 0 0;
  animation: eq-bounce 1s ease-in-out infinite;
  box-shadow: 0 0 3px rgba(0,255,136,0.15);
}
.eq-bar:nth-child(1) { height: 40%; animation-delay: 0.0s; }
.eq-bar:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.eq-bar:nth-child(3) { height: 55%; animation-delay: 0.2s; }
.eq-bar:nth-child(4) { height: 90%; animation-delay: 0.3s; }
.eq-bar:nth-child(5) { height: 45%; animation-delay: 0.15s; }
.eq-bar:nth-child(6) { height: 80%; animation-delay: 0.25s; }
.eq-bar:nth-child(7) { height: 60%; animation-delay: 0.35s; }
.eq-bar:nth-child(8) { height: 35%; animation-delay: 0.05s; }
@keyframes eq-bounce {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.2); }
}

/* ── 12. BOTTOM HUD — Taller with more content ── */
.hud-bottom {
  min-height: 220px !important;
}
.hud-bottom-card {
  padding: 14px 16px !important;
  gap: 6px !important;
}

/* ═══════════════════════════════════════════════
   HUD ULTRA REFINEMENT v9 — Premium Sci-Fi Polish
═══════════════════════════════════════════════ */

/* Gauges: gradient fill + glow */
.gauge-ring {
  background: conic-gradient(
    #00e4ff 0%,
    #00ffaa calc(var(--value, 0) * 0.7%),
    #ffd700 calc(var(--value, 0) * 1%),
    rgba(0,228,255,0.08) calc(var(--value, 0) * 1%),
    rgba(0,228,255,0.08) 100%
  ) !important;
  filter: drop-shadow(0 0 6px rgba(0,228,255,0.5)) !important;
  transition: background 0.8s ease !important;
}
.gauge-value, .gauge-pct {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important;
  color: var(--cyan) !important;
  text-shadow: 0 0 8px rgba(0,228,255,0.6) !important;
}

/* Circuit lines between widgets */
.hud-left .hud-widget { position: relative !important; }
.hud-left .hud-widget::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 20px;
  width: 2px;
  height: 8px;
  background: linear-gradient(180deg, rgba(0,228,255,0.4), transparent);
}
.hud-left .hud-widget:last-child::after { display: none; }
.hud-left .hud-widget::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 4px var(--cyan);
  opacity: 0.4;
}

/* Data flow sweep on panels */
.hud-panel::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,228,255,0.3), transparent);
  animation: data-sweep 4s ease-in-out infinite;
}
@keyframes data-sweep {
  0%, 100% { opacity: 0.2; transform: scaleX(0.5); }
  50% { opacity: 0.8; transform: scaleX(1); }
}

/* Radar: bigger + brighter */
.radar-container {
  width: 140px !important;
  height: 140px !important;
  margin: 0 auto 8px !important;
}
.radar-sweep {
  background: conic-gradient(
    transparent 0deg, transparent 340deg,
    rgba(0,255,136,0.4) 355deg, rgba(0,255,136,0.15) 360deg
  ) !important;
}

/* AI Model tags: colored per model */
.entity-row[data-entity='opus'] .entity-tag { color: #ff6b6b !important; border-color: #ff6b6b !important; }
.entity-row[data-entity='sonnet'] .entity-tag { color: #00e4ff !important; border-color: #00e4ff !important; }
.entity-row[data-entity='haiku'] .entity-tag { color: #ffd700 !important; border-color: #ffd700 !important; }
.entity-row[data-entity='gpt-realtime'] .entity-tag { color: #00ff88 !important; border-color: #00ff88 !important; }
.entity-row[data-entity='gpt-mini'] .entity-tag { color: #cc88ff !important; border-color: #cc88ff !important; }
.entity-tag { text-shadow: 0 0 4px currentColor !important; border: 1px solid currentColor !important; background: rgba(0,228,255,0.06) !important; }

/* Agent readiness bars */
.agent-ready-bar { height: 2px !important; background: rgba(0,228,255,0.1) !important; border-radius: 1px !important; overflow: hidden !important; margin-top: 2px !important; }
.agent-ready-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--ready, 80%);
  background: linear-gradient(90deg, #00e4ff, #00ffaa) !important;
  box-shadow: 0 0 4px #00e4ff;
  animation: bar-pulse 3s ease-in-out infinite;
}
@keyframes bar-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Waveform bars: glow */
.waveform-bar {
  background: linear-gradient(180deg, #00e4ff, #004466) !important;
  box-shadow: 0 0 3px rgba(0,228,255,0.5) !important;
}

/* Bottom cards: richer */
.hud-bottom-card {
  min-height: 130px !important;
  background: linear-gradient(180deg, rgba(0,228,255,0.06) 0%, rgba(0,10,30,0.9) 100%) !important;
}

/* Conclave gauges colored */
.conclave-gauge:nth-child(1) .cg-ring { filter: drop-shadow(0 0 4px rgba(255,107,107,0.4)) !important; }
.conclave-gauge:nth-child(2) .cg-ring { filter: drop-shadow(0 0 4px rgba(255,215,0,0.4)) !important; }
.conclave-gauge:nth-child(3) .cg-ring { filter: drop-shadow(0 0 4px rgba(204,136,255,0.4)) !important; }

/* Knowledge graph nodes: brighter */
.graph-node { width: 6px !important; height: 6px !important; box-shadow: 0 0 8px rgba(255,215,0,0.6), 0 0 15px rgba(255,215,0,0.2) !important; }

/* Network flow dots */
.flow-dot { width: 5px !important; height: 5px !important; background: #00e4ff !important; box-shadow: 0 0 6px #00e4ff !important; }

/* Scanning line across cockpit */
.cockpit-iron::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,228,255,0.5), transparent);
  animation: top-scan 6s ease-in-out infinite;
  z-index: 50;
  pointer-events: none;
}
@keyframes top-scan {
  0% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(50vh); opacity: 0.8; }
  100% { transform: translateY(100vh); opacity: 0.3; }
}

/* Section separators */
.hud-section + .hud-section::before {
  content: '';
  display: block;
  height: 1px;
  margin: 8px 0;
  background: linear-gradient(90deg, transparent, rgba(0,228,255,0.25), transparent);
}

/* Section title accent dot */
.hud-section-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* Equalizer bounce */
.eq-bar { animation: eq-bounce 0.8s ease-in-out infinite alternate !important; }
.eq-bar:nth-child(2) { animation-delay: 0.1s !important; }
.eq-bar:nth-child(3) { animation-delay: 0.2s !important; }
.eq-bar:nth-child(4) { animation-delay: 0.3s !important; }
.eq-bar:nth-child(5) { animation-delay: 0.15s !important; }
.eq-bar:nth-child(6) { animation-delay: 0.25s !important; }
@keyframes eq-bounce { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } }

/* Server dots pulse */
.server-dot { animation: status-pulse 2s ease-in-out infinite !important; }
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 4px currentColor; }
  50% { box-shadow: 0 0 10px currentColor, 0 0 20px currentColor; }
}

/* Entity hover glow */
.entity-row:hover .entity-dot {
  background: var(--cyan) !important;
  box-shadow: 0 0 8px var(--cyan) !important;
  transform: scale(1.5) !important;
}

/* Panel ambient glow */
.hud-left, .hud-right {
  box-shadow: 0 0 30px rgba(0,228,255,0.06), inset 0 1px 0 rgba(0,228,255,0.15) !important;
}

/* Obsidian gold accent */
.hud-bottom-brain { border-top: 2px solid rgba(255,215,0,0.4) !important; }

/* Text glow on values */
.metric-value, .widget-value { text-shadow: 0 0 6px rgba(0,228,255,0.4) !important; }

/* Navbar bottom line */
.navbar { border-bottom: 1px solid rgba(0,228,255,0.2) !important; box-shadow: 0 2px 20px rgba(0,228,255,0.05) !important; }


/* Terminal tab hidden */
#tab-terminal { display: none !important; }
.hud-qbtn[data-quick-tab="terminal"] { display: none !important; }


/* ═══════════════════════════════════════════════════════════
   HUD ADVANCED SCI-FI POLISH v10.0
   Scanline overlays, grid patterns, glowing borders,
   corner brackets, blinking indicators, layered depth,
   pulsing status dots, animated progress, hex patterns
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   1. METRIC CARDS — Scanline overlay + grid pattern + glowing borders
══════════════════════════════ */
.metric-item {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,228,255,0.22) !important;
  box-shadow:
    0 0 8px rgba(0,228,255,0.08),
    inset 0 0 20px rgba(0,228,255,0.03) !important;
  transition: all 0.3s ease !important;
}
/* Subtle grid pattern inside metric cards */
.metric-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(0deg, rgba(0,228,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,228,255,0.03) 1px, transparent 1px) !important;
  background-size: 8px 8px !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Horizontal scanline sweep inside metric cards */
.metric-item::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100% !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,228,255,0.06) 48%,
    rgba(0,228,255,0.12) 50%,
    rgba(0,228,255,0.06) 52%,
    transparent 100%
  ) !important;
  background-size: 100% 200% !important;
  /* 06/09: varredura dos itens de métrica — REMOVIDA (mesmo pedido) */
  animation: none !important;
  display: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
@keyframes metric-scanline {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 200%; }
}
/* Metric card hover — intensify glow */
.metric-item:hover {
  border-color: rgba(0,228,255,0.45) !important;
  box-shadow:
    0 0 16px rgba(0,228,255,0.2),
    0 0 40px rgba(0,228,255,0.06),
    inset 0 0 30px rgba(0,228,255,0.05) !important;
}
/* Metric values sit above overlays */
.metric-value {
  position: relative !important;
  z-index: 2 !important;
}
.metric-label {
  position: relative !important;
  z-index: 2 !important;
}

/* ══════════════════════════════
   2. PANEL HEADERS — Tech feel, corner brackets, blinking indicators
══════════════════════════════ */
.hud-section-title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 14px 10px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,228,255,0.04) 20%,
    rgba(0,228,255,0.06) 50%,
    rgba(0,228,255,0.04) 80%,
    transparent 100%) !important;
  border: 1px solid rgba(0,228,255,0.12) !important;
  border-bottom: none !important;
  clip-path: polygon(
    0 0, 6px 0, 8px 4px, calc(100% - 8px) 4px, calc(100% - 6px) 0, 100% 0,
    100% 100%, 0 100%
  ) !important;
  letter-spacing: 3px !important;
}
/* Left bracket indicator */
.hud-section-title::before {
  content: "[" !important;
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-right: 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: rgba(0,228,255,0.5) !important;
  animation: bracket-blink 2.5s steps(2, start) infinite !important;
  vertical-align: baseline !important;
}
/* Right bracket indicator */
.hud-section-title::after {
  content: "]" !important;
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  margin-left: 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: rgba(0,228,255,0.5) !important;
  animation: bracket-blink 2.5s steps(2, start) infinite !important;
  animation-delay: -1.2s !important;
}
@keyframes bracket-blink {
  0%, 60% { opacity: 1; }
  61%, 80% { opacity: 0.2; }
  81%, 100% { opacity: 1; }
}

/* Bottom border line for section titles — gradient accent */
.hud-section-title + * {
  position: relative !important;
}

/* ══════════════════════════════
   3. BOTTOM HUD CARDS — Layered borders, micro-animations, depth
══════════════════════════════ */
/* Outer glow frame */
.hud-bottom-card {
  border: 1px solid rgba(0,228,255,0.2) !important;
  box-shadow:
    0 0 12px rgba(0,228,255,0.06),
    0 0 40px rgba(0,228,255,0.03),
    inset 0 0 30px rgba(0,228,255,0.02),
    inset 0 1px 0 rgba(0,228,255,0.15) !important;
  transition: all 0.35s ease !important;
}
/* Double-border effect via outline */
.hud-bottom-card {
  outline: 1px solid rgba(0,228,255,0.06) !important;
  outline-offset: 3px !important;
}
/* Inner hex grid pattern */
.hud-bottom-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2l10 6v8l-10 6L2 16V8z' fill='none' stroke='%2300e4ff' stroke-opacity='0.025' stroke-width='0.5'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.8 !important;
}
/* Hover: double-border intensify */
.hud-bottom-card:hover {
  border-color: rgba(0,228,255,0.4) !important;
  outline-color: rgba(0,228,255,0.12) !important;
  box-shadow:
    0 0 20px rgba(0,228,255,0.12),
    0 0 50px rgba(0,228,255,0.04),
    inset 0 0 40px rgba(0,228,255,0.04),
    inset 0 1px 0 rgba(0,228,255,0.25) !important;
}
/* Corner brackets on bottom cards */
.hud-bottom-card {
  position: relative !important;
}
/* Top-left corner bracket */
.hud-bottom-card .hud-section-title ~ *:first-of-type::before,
.hud-bottom-card > :first-child::before {
  /* We handle corners via the card itself */
}

/* Gold accent variant for brain card */
.hud-bottom-brain {
  outline: 1px solid rgba(255,215,0,0.08) !important;
  outline-offset: 3px !important;
}
.hud-bottom-brain::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2l10 6v8l-10 6L2 16V8z' fill='none' stroke='%23ffd700' stroke-opacity='0.025' stroke-width='0.5'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.hud-bottom-brain:hover {
  outline-color: rgba(255,215,0,0.15) !important;
}

/* ══════════════════════════════
   4. STATUS INDICATORS — Pulsing dots, animated bars
══════════════════════════════ */
/* Enhanced pulse dots with double-ring effect */
.pulse-dot {
  position: relative !important;
  width: 7px !important;
  height: 7px !important;
  background: var(--cyan) !important;
  box-shadow:
    0 0 6px var(--cyan),
    0 0 12px rgba(0,228,255,0.3) !important;
  animation: enhanced-pulse 2s ease-in-out infinite !important;
}
.pulse-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,228,255,0.3) !important;
  animation: pulse-ring-expand 2s ease-out infinite !important;
}
@keyframes enhanced-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px var(--cyan), 0 0 12px rgba(0,228,255,0.3); }
  50% { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 4px var(--cyan), 0 0 8px rgba(0,228,255,0.2); }
}
@keyframes pulse-ring-expand {
  0% { transform: scale(0.8); opacity: 0.6; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Server dots — triple-ring pulse */
.server-dot {
  position: relative !important;
}
.server-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  border: 1px solid currentColor !important;
  opacity: 0.3 !important;
  animation: server-ring-ping 2.5s ease-out infinite !important;
}
@keyframes server-ring-ping {
  0% { transform: scale(1); opacity: 0.3; }
  60% { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}

/* Health bar fill — animated shimmer */
.bar-fill {
  position: relative !important;
}
.bar-fill::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 50%,
    transparent 100%
  ) !important;
  animation: bar-shimmer 2s ease-in-out infinite !important;
}
@keyframes bar-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Agent pills — enhanced active state */
.agent-pill.active {
  animation: agent-pulse-enhanced 1.5s ease-in-out infinite !important;
  box-shadow: 0 0 6px rgba(0,228,255,0.4) !important;
}
.agent-pill.active::before {
  animation: agent-dot-throb 1s ease-in-out infinite !important;
}
@keyframes agent-pulse-enhanced {
  0%, 100% { box-shadow: 0 0 4px rgba(0,228,255,0.3), 0 0 8px rgba(0,228,255,0.1); }
  50% { box-shadow: 0 0 10px rgba(0,228,255,0.6), 0 0 20px rgba(0,228,255,0.15); }
}
@keyframes agent-dot-throb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

/* ══════════════════════════════
   5. OVERALL POLISH — Grid/hex backgrounds, improved glows
══════════════════════════════ */
/* Side panels — subtle hex grid background */
.hud-left,
.hud-right {
  position: relative !important;
}
.hud-left > *,
.hud-right > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Enhanced panel border glow with breathing animation */
.hud-left,
.hud-right {
  animation: panel-border-breathe 5s ease-in-out infinite !important;
}
.hud-right {
  animation-delay: -2.5s !important;
}
@keyframes panel-border-breathe {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(0,228,255,0.05),
      inset 0 1px 0 rgba(0,228,255,0.12) !important;
    border-color: rgba(0,228,255,0.18) !important;
  }
  50% {
    box-shadow:
      0 0 35px rgba(0,228,255,0.1),
      0 0 60px rgba(0,228,255,0.03),
      inset 0 1px 0 rgba(0,228,255,0.2) !important;
    border-color: rgba(0,228,255,0.28) !important;
  }
}

/* Widget cards — inner glow on hover */
.hud-widget:hover {
  box-shadow:
    0 0 12px rgba(0,228,255,0.15),
    inset 0 0 20px rgba(0,228,255,0.04) !important;
}

/* Widget icons — subtle spin animation on hover */
.hud-widget:hover .widget-icon {
  filter: drop-shadow(0 0 6px rgba(0,228,255,0.5)) !important;
  transition: filter 0.3s ease !important;
}

/* Scanline overlay on side panels */
.hud-panel {
  overflow: hidden !important;
}
.hud-panel > .hud-section {
  position: relative !important;
  z-index: 2 !important;
}

/* Quick buttons — data-flow line on hover */
.hud-qbtn {
  position: relative !important;
  overflow: hidden !important;
}
.hud-qbtn::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,228,255,0.08),
    transparent
  ) !important;
  transition: left 0.4s ease !important;
  z-index: 0 !important;
}
.hud-qbtn:hover::before {
  left: 100% !important;
}

/* Entity rows — left accent line animation */
.entity-row {
  transition: all 0.25s ease, border-left-width 0.15s ease !important;
}
.entity-row:hover {
  border-left-width: 4px !important;
}

/* Obsidian brain card — gold breathing border */
.hud-bottom-brain {
  animation: brain-border-glow 4s ease-in-out infinite !important;
}
@keyframes brain-border-glow {
  0%, 100% {
    border-color: rgba(255,215,0,0.2);
    box-shadow:
      0 0 15px rgba(255,215,0,0.05),
      inset 0 0 20px rgba(255,215,0,0.02);
  }
  50% {
    border-color: rgba(255,215,0,0.4);
    box-shadow:
      0 0 25px rgba(255,215,0,0.1),
      0 0 50px rgba(255,215,0,0.03),
      inset 0 0 30px rgba(255,215,0,0.04);
  }
}

/* Bottom HUD container — subtle top-edge glow */
.hud-bottom::before {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  left: 5% !important;
  right: 5% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,228,255,0.3) 30%,
    rgba(0,228,255,0.5) 50%,
    rgba(0,228,255,0.3) 70%,
    transparent
  ) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.hud-bottom {
  position: relative !important;
}

/* Gauge rings — outer tick marks glow */
.gauge-ring {
  position: relative !important;
}
.gauge-ring::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,228,255,0.1) !important;
  animation: gauge-outer-pulse 3s ease-in-out infinite !important;
}
@keyframes gauge-outer-pulse {
  0%, 100% { border-color: rgba(0,228,255,0.1); }
  50% { border-color: rgba(0,228,255,0.3); }
}

/* Corner accent dots on bottom cards */
.hud-bottom-card > :first-child {
  position: relative !important;
  z-index: 2 !important;
}

/* Navbar — enhanced center glow line */
.navbar::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,228,255,0.2) 30%,
    rgba(0,228,255,0.4) 50%,
    rgba(0,228,255,0.2) 70%,
    transparent
  ) !important;
  z-index: 1 !important;
}

/* ══════════════════════════════
   6. PERFORMANCE NOTES v10
   - All new animations use transform/opacity (GPU composited)
   - Scanline uses background-position (no reflow)
   - Outlines don't trigger layout
   - will-change omitted on low-priority elements
══════════════════════════════ */

/* ═══════════════════════════════════════════════
   FINAL FIX: 3D Brain clipping — overflow chain
   Ensures NO ancestor clips the Three.js canvas
═══════════════════════════════════════════════ */
.tab-panel,
.tab-panel.active {
  overflow: visible !important;
}
.cockpit-iron {
  overflow: visible !important;
}
.cockpit-iron .orb-section {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  z-index: 1;
}
.cockpit-iron .avatar-container {
  position: absolute !important;
  top: -30px !important;
  left: -30px !important;
  right: -30px !important;
  bottom: -30px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.cockpit-iron .avatar-container canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* ═══ CONFIG: scroll quando o conteúdo passa da viewport ═══
   O override acima força overflow:visible em TODA .tab-panel (pro brain 3D do
   cockpit não ser cortado). Mas a aba Config tem muito conteúdo (keys + auto-
   setup + privacidade) e precisa rolar. Especificidade #id.classe vence a
   regra .tab-panel global. */
/* IMPORTANTE: só quando ATIVO. Sem o .active, o #tab-config herda
   display:none de .tab-panel — senão a Config renderiza SEMPRE, sobreposta ao
   cockpit (regressão 1.4.5: "coisas da Config vazando no cockpit"). */
#tab-config.tab-panel.active {
  overflow-y: auto !important;
  display: block !important;
}
#tab-config .config-panel { margin: 0 auto; }
/* Colapso do painel de Verificação do Sistema (botão minimizar): minimizado
   fica só o título + o botão [+]. Esconde o corpo E o botão VERIFICAR. */
#setup-verify-card.collapsed #sv-body { display: none; }
#setup-verify-card.collapsed #sv-verify-btn { display: none; }
#setup-verify-card.collapsed { padding-top: 14px; padding-bottom: 14px; }

/* ═══ PROJECT WORKSPACE (cards → raízes + chat) ═══ */
.file-project-clickable { cursor: pointer; transition: var(--t); display: flex; align-items: center; gap: 8px; }
.file-project-clickable:hover { color: #fff; text-shadow: 0 0 12px rgba(0,228,255,0.5); }
.file-project-clickable .fp-open { margin-left: auto; font-size: 9px; opacity: 0; color: var(--cyan); letter-spacing: 1px; transition: var(--t); }
.file-project-clickable:hover .fp-open { opacity: 0.8; }

.pv-card { width: min(1080px, 94vw); height: min(86vh, 820px); display: flex; flex-direction: column; }
.pv-path { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-right: 6px; }
.pv-body { flex: 1; display: grid; grid-template-rows: 1.25fr 1fr; min-height: 0; }
.pv-roots { position: relative; overflow: hidden; border-bottom: 1px solid var(--glass-border);
  background: radial-gradient(ellipse at 50% 0%, rgba(0,228,255,0.06), transparent 60%); }
.pv-trunk { position: absolute; left: 50%; top: 16%; transform: translate(-50%,-50%); font-size: 34px;
  filter: drop-shadow(0 0 16px rgba(0,228,255,0.6)); z-index: 2; animation: pv-pulse 3s ease-in-out infinite; }
@keyframes pv-pulse { 0%,100% { filter: drop-shadow(0 0 12px rgba(0,228,255,0.5)); } 50% { filter: drop-shadow(0 0 24px rgba(0,228,255,0.9)); } }
.pv-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-labels { position: absolute; inset: 0; pointer-events: none; }
.pv-nodelabel { position: absolute; transform: translateX(-50%); font-family: var(--font-mono);
  font-size: 9.5px; color: var(--text-mid); white-space: nowrap; opacity: 0; transition: opacity .5s;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.pv-nodelabel.show { opacity: 0.75; }

.pv-chat { display: flex; flex-direction: column; min-height: 0; padding: 14px 18px 16px; }
.pv-chat-title { font-family: var(--font-orb); font-size: 9px; letter-spacing: 2px; color: rgba(0,228,255,0.6); margin-bottom: 10px; }
.pv-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 6px; }
.pv-msg { max-width: 88%; }
.pv-msg.u { align-self: flex-end; text-align: right; }
.pv-who { font-family: var(--font-orb); font-size: 8px; letter-spacing: 1.5px; color: var(--text-dim); margin-bottom: 3px; }
.pv-txt { display: inline-block; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  font-family: var(--font-ui); white-space: pre-wrap; }
.pv-msg.u .pv-txt { background: rgba(0,228,255,0.12); border: 1px solid rgba(0,228,255,0.25); color: var(--text); }
.pv-msg.j .pv-txt { background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-mid); }
.pv-input-row { display: flex; gap: 8px; margin-top: 12px; }
.pv-input { flex: 1; height: 42px; background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 9px; padding: 0 14px; color: var(--text); font-family: var(--font-mono); font-size: 12px; outline: none; transition: var(--t); }
.pv-input:focus { border-color: rgba(0,228,255,0.4); box-shadow: var(--glow-c2); }
.pv-send { width: 48px; height: 42px; background: rgba(0,228,255,0.1); border: 1px solid rgba(0,228,255,0.3);
  border-radius: 9px; color: var(--cyan); font-size: 16px; cursor: pointer; transition: var(--t); }
.pv-send:hover { background: rgba(0,228,255,0.2); box-shadow: var(--glow-c); }

/* ═══════════════════════════════════════════════
   NEURAL CONSOLE — chat embutido no centro do cockpit
   ═══════════════════════════════════════════════ */
/* Avatar volta pro centro — o console flutua POR CIMA dele */
.cockpit-iron .orb-section {
  position: relative !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
  gap: 6px !important;
  overflow: visible !important;
}
.cockpit-iron .avatar-container {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  inset: auto !important;
  width: min(50vw, 76vh) !important;
  height: min(50vw, 76vh) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
}
.cockpit-iron .avatar-status { margin-top: 6px !important; text-align: center !important; }

/* ── NEURAL CONSOLE: overlay flutuante, semi-transparente, SOBRE o avatar ── */
.neural-console {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);   /* sempre centrado sobre o avatar */
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 40;                 /* na frente do avatar */
  background: linear-gradient(180deg, rgba(0,20,40,0.42), rgba(0,6,16,0.58));
  border: 1px solid rgba(0,228,255,0.30);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 32px rgba(0,228,255,0.12), inset 0 0 50px rgba(0,228,255,0.03);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  overflow: hidden;
  transition: width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1),
              border-color .2s, box-shadow .2s, opacity .2s, background .2s;
}

/* DOCKED (padrão) — centrado sobre o avatar, tamanho confortável */
.neural-console {
  width: clamp(360px, 40vw, 540px);
  height: clamp(300px, 50vh, 460px);
}
.cockpit-iron .orb-section:hover .neural-console,
.neural-console:focus-within { opacity: 1; }
.neural-console:not(.nc-expanded):not(.nc-minimized) { opacity: 0.94; }

/* EXPANDED — tamanho de trabalho, ainda semi-transparente (avatar brilha atrás) */
.neural-console.nc-expanded {
  width: min(1000px, 80vw);
  height: 88%;
  opacity: 1;
  background: linear-gradient(180deg, rgba(0,20,40,0.55), rgba(0,6,16,0.72));
}

/* MINIMIZED — só a barra de cabeçalho, ancorada embaixo sobre o "IDLE" */
.neural-console.nc-minimized {
  height: auto !important;
  top: auto !important;
  bottom: 2% !important;
  transform: translateX(-50%) !important;
}
.neural-console.nc-minimized .nc-chips,
.neural-console.nc-minimized .terminal,
.neural-console.nc-minimized .input-bar { display: none !important; }

/* 15/09 — O CONSOLE MINIMIZADO COMIA OS BOTOES DE GRAFICOS.
   Ele e `position:absolute` ancorado em `bottom:2%`, entao NAO reserva espaco no fluxo: o
   `.avatar-quality`, que e o ultimo elemento do fluxo da secao, ia parar 37 px POR BAIXO dele.
   Medido com elementFromPoint: nos quatro botoes quem respondia era o `.nc-head`. Dava um texto
   embaralhado ("Baixo" misturado com o titulo do console) e uma borda ciano cortada aparecendo
   no rodape — os dois defeitos que o dono mandou em print.
   A secao passa a reservar a faixa que o console minimizado ocupa. Como ela centraliza o conteudo,
   o conjunto sobe junto e nada mais encosta. */
/* a folga acompanha a altura: o console minimizado tem altura fixa (~41px) MAIS `bottom: 2%` da
   secao, entao em janela baixa ele sobe proporcionalmente e um padding fixo deixava de bastar
   (medido: 78px dava +2px em 1080 e -6px em 768) */
.orb-section { padding-bottom: clamp(86px, 13%, 130px); }
.cockpit-iron .orb-section { padding-bottom: clamp(86px, 13%, 130px); }

/* Botões de controle do cabeçalho (expandir / minimizar) */
.nc-ctrl {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,228,255,0.06); border: 1px solid rgba(0,228,255,0.22);
  border-radius: 6px; color: #9fe8ff; cursor: pointer; padding: 0;
  transition: all .15s;
}
.nc-ctrl svg { width: 13px; height: 13px; }
.nc-ctrl:hover { background: rgba(0,228,255,0.18); border-color: #00e4ff; color: #fff; }
.neural-console.dragover {
  border-color: #00e4ff;
  box-shadow: 0 0 50px rgba(0,228,255,0.35), inset 0 0 60px rgba(0,228,255,0.08);
}
.nc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(0,228,255,0.12);
  background: rgba(0,228,255,0.03);
}
.nc-dot { width: 7px; height: 7px; border-radius: 50%; background: #00e4ff; box-shadow: 0 0 8px #00e4ff; animation: pulse 2s infinite; }
.nc-title { font-family: "Orbitron", sans-serif; font-size: 10px; letter-spacing: 3px; color: #00e4ff; }
.nc-sub { font-size: 9px; color: rgba(255,255,255,0.4); flex: 1; }
.nc-head .ttb-badge { font-size: 9px; color: #9fe8ff; opacity: 0.8; }
.nc-chips { display: flex; gap: 6px; padding: 8px 14px 4px; flex-wrap: wrap; }
.nc-chip {
  font-family: "Orbitron", sans-serif; font-size: 9px; letter-spacing: 1px;
  padding: 5px 11px; border-radius: 20px;
  border: 1px solid rgba(0,228,255,0.25); background: rgba(0,228,255,0.06);
  color: #9fe8ff; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.nc-chip:hover { background: rgba(0,228,255,0.16); border-color: #00e4ff; color: #fff; transform: translateY(-1px); }

/* Seletor de projeto — dropdown sobre o console */
.nc-chips { position: relative; }
.nc-project-menu {
  position: absolute; top: 100%; left: 14px; z-index: 60;
  margin-top: 4px; min-width: 210px; max-width: 280px; max-height: 240px; overflow-y: auto;
  background: linear-gradient(180deg, rgba(0,18,36,0.97), rgba(0,8,18,0.98));
  border: 1px solid rgba(0,228,255,0.3); border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5), 0 0 24px rgba(0,228,255,0.12);
  backdrop-filter: blur(8px); padding: 5px;
}
.nc-pm-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 7px 10px; border: none; background: transparent; border-radius: 7px;
  color: #cfeeff; font-family: var(--font-ui, sans-serif); font-size: 12px; cursor: pointer; text-align: left;
  transition: background .15s;
}
.nc-pm-item:hover { background: rgba(0,228,255,0.14); color: #fff; }
.nc-pm-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-pm-meta { font-size: 9px; color: rgba(0,228,255,0.55); flex: 0 0 auto; }
.nc-pm-loading, .nc-pm-empty { padding: 10px 12px; font-size: 11px; color: rgba(255,255,255,0.5); }
.nc-project-menu::-webkit-scrollbar { width: 6px; }
.nc-project-menu::-webkit-scrollbar-thumb { background: rgba(0,228,255,0.25); border-radius: 3px; }
.neural-console .terminal {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  border: none !important; background: transparent !important; margin: 0 !important;
}
.neural-console .terminal-output {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 10px 14px; background: transparent !important;
}
.neural-console .input-bar {
  border-top: 1px solid rgba(0,228,255,0.12);
  background: rgba(0,8,20,0.5) !important;
  margin: 0 !important;
}
.nc-paste-thumb {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 14px; padding: 4px 8px; border-radius: 8px;
  background: rgba(0,228,255,0.08); border: 1px solid rgba(0,228,255,0.25);
  font-size: 10px; color: #9fe8ff;
}
.nc-paste-thumb img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }

/* Download card aprimorado (thumbnail + abrir + download) */
.download-card {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0; padding: 8px 12px;
  background: rgba(0,228,255,0.06); border: 1px solid rgba(0,228,255,0.22);
  border-radius: 10px; max-width: 100%;
}
.download-card .file-icon { font-size: 20px; }
.download-card .dl-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  border: 1px solid rgba(0,228,255,0.3); background: rgba(0,0,0,0.3);
}
.download-card .file-name {
  flex: 1; font-size: 12px; color: #cfeeff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.download-card .dl-btn, .download-card .dl-view {
  font-family: "Orbitron", sans-serif; font-size: 9px; letter-spacing: 1px;
  padding: 5px 12px; border-radius: 7px; text-decoration: none; white-space: nowrap;
  transition: all .2s;
}
.download-card .dl-view { color: #9fe8ff; border: 1px solid rgba(0,228,255,0.3); background: transparent; }
.download-card .dl-view:hover { background: rgba(0,228,255,0.14); }
.download-card .dl-btn { color: #001018; background: var(--cyan, #00e4ff); border: 1px solid var(--cyan, #00e4ff); font-weight: 700; }
.download-card .dl-btn:hover { box-shadow: 0 0 14px rgba(0,228,255,0.5); }

/* ═══════════════════════════════════════════════
   NEURAL CONSOLE — camada HUD premium (Iron Man)
   ═══════════════════════════════════════════════ */
/* Scan-line viva varrendo o topo do console */
.neural-console::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #00e4ff, #7af9ff, #00e4ff, transparent);
  background-size: 200% 100%;
  animation: nc-scan 3.2s linear infinite;
  opacity: 0.85; z-index: 3; pointer-events: none;
}
@keyframes nc-scan { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Brackets de canto — moldura HUD */
.nc-head::before, .neural-console .input-bar::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid rgba(0,228,255,0.55); pointer-events: none; z-index: 4;
}
.nc-head::before { top: 6px; left: 6px; border-right: none; border-bottom: none; border-radius: 3px 0 0 0; }
.neural-console .input-bar::after { bottom: 6px; right: 6px; border-left: none; border-top: none; border-radius: 0 0 3px 0; }
.nc-head { position: relative; }
.neural-console .input-bar { position: relative; }

/* Respiração ambiente do console */
.neural-console {
  animation: nc-breathe 5s ease-in-out infinite;
}
@keyframes nc-breathe {
  0%,100% { box-shadow: 0 0 32px rgba(0,228,255,0.10), inset 0 0 50px rgba(0,228,255,0.03); }
  50%     { box-shadow: 0 0 40px rgba(0,228,255,0.18), inset 0 0 60px rgba(0,228,255,0.05); }
}
.neural-console.dragover { animation: none; }

/* Lane badge como pill vivo — ⚡🔨🧠 contadores */
.nc-head .ttb-badge {
  font-family: "Orbitron", sans-serif; font-size: 9px; letter-spacing: 1px;
  padding: 3px 9px; border-radius: 12px;
  background: rgba(0,228,255,0.08); border: 1px solid rgba(0,228,255,0.28);
  color: #aef0ff; opacity: 1;
  box-shadow: inset 0 0 8px rgba(0,228,255,0.08);
  cursor: default; transition: all .2s;
}
.nc-head .ttb-badge:hover { background: rgba(0,228,255,0.16); border-color: #00e4ff; }

/* Título com leve glow pulsante */
.nc-title { text-shadow: 0 0 6px rgba(0,228,255,0.4); }

/* Chips: estado de clique + brilho na borda */
.nc-chip:active { transform: translateY(0) scale(0.96); }
.nc-chip::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px;
  box-shadow: 0 0 0 0 rgba(0,228,255,0.4); transition: box-shadow .3s; pointer-events: none;
}
.nc-chip { position: relative; }
.nc-chip:hover::after { box-shadow: 0 0 14px 1px rgba(0,228,255,0.3); }

/* Output: linhas com fade-in suave ao chegar */
.neural-console .terminal-output > * { animation: nc-line-in .25s ease both; }
@keyframes nc-line-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Scrollbar fina cyan */
.neural-console .terminal-output::-webkit-scrollbar { width: 6px; }
.neural-console .terminal-output::-webkit-scrollbar-thumb { background: rgba(0,228,255,0.25); border-radius: 3px; }
.neural-console .terminal-output::-webkit-scrollbar-thumb:hover { background: rgba(0,228,255,0.45); }

/* ═══════════════════════════════════════════════
   RESPONSIVIDADE — monitores menores / laptops
   Escala ícones, cards, avatar e layout do cockpit.
   ═══════════════════════════════════════════════ */

/* Laptops largura média (1280–1500px): colunas e gaps mais enxutos */
@media (max-width: 1500px) {
  .cockpit-iron { grid-template-columns: clamp(210px, 19vw, 280px) 1fr clamp(210px, 19vw, 280px) !important; gap: 12px !important; }
  .hud-bottom-card { padding: 10px 12px !important; }
  .hud-bottom .metric-value { font-size: clamp(15px, 1.4vw, 20px) !important; }
}

/* Telas baixas (laptops ~768px de altura): comprime verticalmente */
@media (max-height: 800px) {
  .cockpit-iron .avatar-container { width: clamp(180px, 26vh, 300px) !important; height: clamp(180px, 26vh, 300px) !important; }
  .neural-console { height: clamp(190px, 34vh, 300px); }
  .hud-bottom-card { padding: 8px 10px !important; }
  .metric-voice-mic .mic-fab { width: 48px !important; height: 48px !important; }
  .nc-chips { padding: 6px 12px 3px !important; }
  .nc-chip { font-size: 8px !important; padding: 4px 9px !important; }
}

/* Compacto (≤1180px): empilha laterais e prioriza o centro */
@media (max-width: 1180px) {
  .cockpit-iron { grid-template-columns: 1fr !important; grid-template-rows: 1fr auto !important;
    grid-template-areas: "orb" "bottom" !important; gap: 10px !important; }
  .hud-left, .hud-right { display: none !important; }
  .hud-bottom { flex-wrap: wrap !important; justify-content: center !important; }
  .hud-bottom-card { min-width: 150px !important; flex: 1 1 150px !important; }
  .neural-console { width: clamp(280px, 80vw, 440px); }
  .neural-console.nc-expanded { width: 92vw; }
}

/* Telefone/janela mínima (≤640px): tudo fluido */
@media (max-width: 640px) {
  .cockpit-iron { padding: 8px !important; }
  .cockpit-iron .avatar-container { width: clamp(150px, 44vw, 240px) !important; height: clamp(150px, 44vw, 240px) !important; }
  .neural-console { width: 94vw; bottom: 2%; }
  .hud-bottom-card { min-width: 120px !important; font-size: 11px !important; }
  .nc-title { font-size: 9px !important; letter-spacing: 2px !important; }
}

/* ===== Painel de Notas Fiscais (sob demanda) ===== */
#nota-panel {
  position: absolute; right: 14px; bottom: 86px; z-index: 60;
  width: 340px; max-width: calc(100vw - 28px); max-height: 56vh;
  display: flex; flex-direction: column;
  background: rgba(8, 16, 28, 0.96); backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 212, 255, 0.35); border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0,212,255,0.08) inset;
  animation: notaPanelIn 0.18s ease-out;
}
@keyframes notaPanelIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.nota-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(0,212,255,0.18); }
.nota-panel-title { font-weight: 700; color: #cfeeff; font-size: 13px; letter-spacing: .3px; }
.nota-coverage { margin-left: auto; font-size: 11px; color: #00d4ff; font-weight: 600; }
.nota-panel-x { background: none; border: none; color: #7e93a8; font-size: 15px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.nota-panel-x:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nota-panel-tools { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nota-panel-tools label { font-size: 11px; color: #9fb3c7; display: flex; align-items: center; gap: 6px; }
.nota-panel-tools input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: #fff; padding: 3px 6px; font-size: 12px; }
.nota-panel-export { margin-left: auto; background: linear-gradient(135deg,#1f6feb,#00d4ff); color: #001018; border: none; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 12px; cursor: pointer; }
.nota-panel-export:disabled { opacity: .4; cursor: not-allowed; }
.nota-list { overflow-y: auto; padding: 6px; flex: 1; }
.nota-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; font-size: 12px; }
.nota-row:nth-child(odd) { background: rgba(255,255,255,0.03); }
.nota-row .nr-idx { color: #00d4ff; font-weight: 700; min-width: 18px; }
.nota-row .nr-main { flex: 1; min-width: 0; }
.nota-row .nr-emp { color: #e7f3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nota-row .nr-meta { color: #8aa0b4; font-size: 10.5px; }
.nota-row .nr-val { color: #4ade80; font-weight: 700; white-space: nowrap; }
.nota-row .nr-del { background: none; border: none; color: #7e93a8; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.nota-row .nr-del:hover { color: #ff6b6b; background: rgba(255,107,107,0.12); }
.nota-row.nr-dup { outline: 1px solid rgba(255,193,7,0.5); }
.nota-empty { padding: 22px 16px; text-align: center; color: #6b8197; font-size: 12px; }

/* ═══ MODO BAIXO = ZERO ANIMAÇÕES (06/09/2026, pedido do dono: "em baixo 0 animações") ═══
   A classe html.jarvis-lite é ligada pelo script quando a qualidade do avatar é "Baixo" (escolha do aluno ou
   modo leve do servidor). Desliga TODA animação e transição CSS — pulsos, brilhos, varreduras, giros. Exceções
   (feedback, não decoração, e só enquanto acontecem): o orb-lite reagindo a falar/ouvir/pensar e o anel do
   microfone gravando. Medido: 99 animações em repouso → 0. */
html.jarvis-lite *:not(.avatar-orb-lite):not(.mic-btn.recording):not(.mic-btn.recording *),
html.jarvis-lite *:not(.avatar-orb-lite)::before,
html.jarvis-lite *:not(.avatar-orb-lite)::after {
  animation: none !important;
  transition: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA CLARO (15/09) — a mesma sala, com a luz acesa.
   O escuro continua sendo o padrão: o claro só entra quando o dono liga no
   botão ao lado do BR, e a escolha fica salva.
   Regras que guiaram as cores, para quem for mexer depois:
   · o fundo nunca é branco puro (#f4f8fb): branco puro sobre monitor grande cansa
     a vista e mata o ar de cockpit;
   · o ciano precisou escurecer (#0088a8): o #00e4ff original some sobre claro;
   · o que era GLOW vira SOMBRA — brilho não existe em fundo claro, e insistir
     nele deixa tudo borrado;
   · o vidro (--glass) inverte o sentido: no escuro era luz sobre preto, aqui é
     sombra sobre papel.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-tema="claro"] {
  --bg:         #f4f8fb;
  --bg2:        #e9f1f7;
  --cyan:       #0088a8;
  --cyan2:      #006d88;
  --green:      #0a8f52;
  --purple:     #6d4fd0;
  --fire:       #d65200;
  --amber:      #a86a00;
  --red:        #c62348;
  --white:      #0d1b26;
  --text:       #0d1b26;
  --text-mid:   #33566e;
  --text-dim:   #5c7d94;
  --dim:        #c6d8e4;
  --glass:          rgba(0,136,168,0.05);
  --glass-border:   rgba(0,136,168,0.20);
  --glass-strong:   rgba(0,136,168,0.09);
  --glow-c:  0 2px 10px rgba(0,80,110,0.13);
  --glow-c2: 0 1px 6px rgba(0,80,110,0.09);
  --sf-primary: #0088a8;
}
/* o fundo animado (hexágonos, scanlines, brilhos) é desenhado para o escuro:
   no claro ele vira sujeira sobre o papel, então sai de cena */
:root[data-tema="claro"] .bg-hex,
:root[data-tema="claro"] .bg-scanlines,
:root[data-tema="claro"] .bg-glow-br,
:root[data-tema="claro"] .bg-glow-tl { opacity: .16; filter: invert(1) hue-rotate(180deg); }
/* painéis: no escuro eram vidro iluminado; aqui são cartões sobre papel */
:root[data-tema="claro"] .hud-panel,
:root[data-tema="claro"] .hud-section,
:root[data-tema="claro"] .neural-console {
  background: rgba(255,255,255,0.72);
  box-shadow: 0 1px 3px rgba(13,27,38,0.07), 0 8px 24px rgba(13,27,38,0.05);
}
/* o body e pintado por `background: linear-gradient(...) !important` (ver a regra `body` acima),
   entao o tema claro precisa da mesma forca — e com gradiente, nao cor chapada, para o papel nao
   ficar morto */
:root[data-tema="claro"] body {
  background: linear-gradient(135deg, #f7fafc 0%, #eef4f9 42%, #e6eef6 100%) !important;
}
:root[data-tema="claro"] .bg-hex { opacity: .30 !important; filter: invert(1) hue-rotate(180deg); }
/* Os componentes abaixo pintam o fundo com GRADIENTE, nao com cor — por isso nao herdam `--bg`
   e continuavam escuros no tema claro (medido no navegador: navbar, cartoes do rodape e os itens
   de metrica). Cada um recebe o equivalente claro, mantendo o mesmo desenho: um fio de ciano no
   topo que desce para o papel. */
:root[data-tema="claro"] .navbar {
  background: linear-gradient(rgba(255,255,255,0.96) 0%, rgba(240,246,251,0.92) 100%) !important;
  border-bottom: 1px solid rgba(0,136,168,0.18) !important;
}
:root[data-tema="claro"] .hud-bottom-card,
:root[data-tema="claro"] .metric-item {
  background: linear-gradient(rgba(0,136,168,0.045) 0%, rgba(255,255,255,0.92) 100%) !important;
  border-color: rgba(0,136,168,0.20) !important;
}
/* a marca era dourada para brilhar no escuro; sobre papel ela some */
:root[data-tema="claro"] .logo,
:root[data-tema="claro"] .navbar .logo { color: #0d1b26 !important; -webkit-text-fill-color: #0d1b26 !important; background: none !important; }
/* textos que eram claros de proposito (brilho sobre preto) */
:root[data-tema="claro"] .nc-sub { color: rgba(13,27,38,0.55) !important; }
:root[data-tema="claro"] .nc-status,
:root[data-tema="claro"] .terminal { color: #0d1b26 !important; }
:root[data-tema="claro"] .terminal .jarvis-line { color: #005f7a !important; }
:root[data-tema="claro"] .terminal .info-line { color: #33566e !important; }

/* CONTRASTE MEDIDO, nao ajustado no olho. Rodei o calculo WCAG sobre o cockpit no tema claro
   levando a opacidade acumulada em conta: 28 rotulos ficavam abaixo do minimo (4,5:1 para texto
   normal, 3:1 para grande). Os piores eram a marca (1,31:1) e o titulo do console (1,45:1) — quase
   invisiveis. Estes seletores sao exatamente os que a medida apontou. */
:root[data-tema="claro"] .navbar-title { color: #0d1b26 !important; -webkit-text-fill-color: #0d1b26 !important; background: none !important; text-shadow: none !important; }
:root[data-tema="claro"] .nc-title { color: #00647d !important; text-shadow: none !important; }
:root[data-tema="claro"] .aq-label { color: #4a6c82 !important; opacity: 1 !important; }
:root[data-tema="claro"] .aq-btn { color: #2c4d63 !important; border-color: rgba(0,136,168,.30) !important; }
:root[data-tema="claro"] .cg-label,
:root[data-tema="claro"] .obs-label,
:root[data-tema="claro"] .metric-value,
:root[data-tema="claro"] .metric-label,
:root[data-tema="claro"] .hud-agenda-open,
:root[data-tema="claro"] .avatar-status,
:root[data-tema="claro"] .lang-btn,
:root[data-tema="claro"] .hud-qbtn,
:root[data-tema="claro"] .widget-label { color: #2c4d63 !important; opacity: 1 !important; }
:root[data-tema="claro"] .hud-title,
:root[data-tema="claro"] .card-title { color: #00647d !important; opacity: 1 !important; text-shadow: none !important; }
/* segunda passada, com a mesma medida: de 28 caiu para 10, e estes sao os 10.
   Os piores eram "pronto" (1,17:1) e os numeros dourados (1,31:1) — o dourado brilha no preto e
   desaparece no papel, entao vira ambar escuro. */
:root[data-tema="claro"] .ttb-badge {
  color: #05323f !important; background: rgba(0,136,168,.16) !important; border-color: rgba(0,136,168,.35) !important;
}
:root[data-tema="claro"] .obs-val,
:root[data-tema="claro"] .widget-value { color: #8a5a00 !important; }
:root[data-tema="claro"] .hud-section-title { color: #00647d !important; opacity: 1 !important; }
:root[data-tema="claro"] .nc-sub,
:root[data-tema="claro"] .widget-sub,
:root[data-tema="claro"] .hud-agenda-data,
:root[data-tema="claro"] .hud-agenda-next-sub { color: #3d6178 !important; opacity: 1 !important; }
/* rotulos soltos que nao tem classe propria (o medidor achou dois) */
:root[data-tema="claro"] .hud-agenda-card span,
:root[data-tema="claro"] .hud-agenda-card div { color: #2c4d63; }
:root[data-tema="claro"] .hud-agenda-card .hud-agenda-next-title { color: #0d1b26 !important; }

/* o brilho de texto e feito para fundo preto: sobre papel ele so borra */
:root[data-tema="claro"] * { text-shadow: none !important; }

/* o botão do tema acompanha o vizinho BR */
.tema-btn { font-size: 11px !important; line-height: 1; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TEMA CLARO — SEGUNDA REVISÃO (25/09/2026). O dono: "achei um pouco zuado o cockpit na cor clara,
   precisa corrigir muitos pontos". Medido, não no olho (user/scripts/lote2026-09-14/84 e 85-contraste-
   claro): contraste de cada texto contra os PIXELS reais do fundo, nas 6 telas — 344 textos abaixo do
   mínimo WCAG e 38 blocos que continuavam escuros. As causas eram poucas:
   1) os painéis laterais e seus cartões são pintados com degradê do escuro e `!important` (regras
      ".hud-panel"/".hud-widget"/".entity-row" do HUD v8) — a camada clara de 15/09 não tinha força;
   2) cores neon feitas para brilhar no preto (#00ff88, #ffe2a8, #ff6b6b, #00e4ff) somem no papel;
   3) o ciano e o cinza de texto do claro ficavam em 3,4-4,0:1 — abaixo de 4,5:1.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root[data-tema="claro"] {
  --cyan: #006a84; --cyan2: #00617a; --sf-primary: #006a84;
  --text-dim: #46657b; --green: #0a6e3f; --amber: #8a5a00; --red: #b3261e; --purple: #5b3fc0;
  --sf-bg-deep: #f4f8fb; --sf-bg-mid: #e9f1f7; --sf-text-bright: #0d1b26; --sf-text-dim: #46657b;
  --sf-accent: #0a6e3f; --sf-secondary: #8a5a00;
  color-scheme: light;
}
/* 1) painéis laterais: papel, com o mesmo fio de ciano do rodapé */
:root[data-tema="claro"] .hud-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(240,246,251,0.92) 100%) !important;
  border-color: rgba(0,106,132,0.22) !important;
  box-shadow: 0 1px 3px rgba(13,27,38,0.07), 0 8px 24px rgba(13,27,38,0.05) !important;
}
:root[data-tema="claro"] .hud-panel .hud-section { background: transparent !important; box-shadow: none !important; }
:root[data-tema="claro"] .hud-widget {
  background: linear-gradient(135deg, rgba(0,106,132,0.06) 0%, rgba(255,255,255,0.95) 100%) !important;
  border-color: rgba(0,106,132,0.28) !important;
}
:root[data-tema="claro"] .entity-row {
  background: linear-gradient(90deg, rgba(0,106,132,0.07) 0%, rgba(255,255,255,0.95) 100%) !important;
  border-color: rgba(0,106,132,0.18) !important; border-left-color: rgba(0,106,132,0.40) !important;
}
:root[data-tema="claro"] .entity-row:hover {
  background: linear-gradient(90deg, rgba(0,106,132,0.13) 0%, rgba(255,255,255,0.98) 100%) !important;
  box-shadow: 0 1px 6px rgba(0,80,110,0.12) !important;
}
:root[data-tema="claro"] .entity-name { color: #0d1b26 !important; }
:root[data-tema="claro"] .aiox-agent { background: rgba(255,255,255,0.85) !important; border-color: rgba(0,106,132,0.18) !important; }
:root[data-tema="claro"] .aiox-name { color: #006a84 !important; opacity: 1 !important; }
:root[data-tema="claro"] .aiox-role { color: #46657b !important; opacity: 1 !important; }
:root[data-tema="claro"] .server-item { background: rgba(10,110,63,0.05) !important; border-color: rgba(10,110,63,0.22) !important; }
:root[data-tema="claro"] .server-name { color: #2c4d63 !important; opacity: 1 !important; }
:root[data-tema="claro"] #bar-api-status,
:root[data-tema="claro"] #bar-voice-status,
:root[data-tema="claro"] #bar-claude-status { color: #0a6e3f !important; }
/* valores e rótulos dos cartões de sistema (relógio, clima, CPU, GPU, RAM, rede, uptime) */
:root[data-tema="claro"] .hud-widget .widget-value,
:root[data-tema="claro"] #date-time, :root[data-tema="claro"] #weather-temp,
:root[data-tema="claro"] #sys-uptime, :root[data-tema="claro"] #cpu-temp, :root[data-tema="claro"] #gpu-temp { color: #8a5a00 !important; -webkit-text-fill-color: #8a5a00 !important; }
:root[data-tema="claro"] #cpu-usage, :root[data-tema="claro"] #gpu-usage, :root[data-tema="claro"] #ram-value,
:root[data-tema="claro"] #net-down-val { color: #006a84 !important; }
:root[data-tema="claro"] #net-up-val { color: #0a6e3f !important; }
:root[data-tema="claro"] .hud-widget .widget-label,
:root[data-tema="claro"] #date-day, :root[data-tema="claro"] #weather-city { color: #2c4d63 !important; opacity: 1 !important; }
:root[data-tema="claro"] .hud-widget .widget-sub,
:root[data-tema="claro"] #date-full, :root[data-tema="claro"] #weather-desc, :root[data-tema="claro"] #cpu-cores,
:root[data-tema="claro"] #gpu-status, :root[data-tema="claro"] #ram-detail { color: #46657b !important; opacity: 1 !important; }
/* etiquetas de papel dos modelos (THINK/EXECUTE/VOICE/QUICK): neon → tinta */
/* etiquetas de papel dos modelos (THINK/EXECUTE/VOICE/QUICK): o neon de cada uma vira a tinta dela */
:root[data-tema="claro"] .entity-tag { opacity: 1 !important; background: rgba(255,255,255,0.7) !important; }
:root[data-tema="claro"] .entity-row[data-entity='opus'] .entity-tag { color: #b3261e !important; border-color: #b3261e !important; }
:root[data-tema="claro"] .entity-row[data-entity='sonnet'] .entity-tag { color: #006a84 !important; border-color: #006a84 !important; }
:root[data-tema="claro"] .entity-row[data-entity='haiku'] .entity-tag { color: #8a5a00 !important; border-color: #8a5a00 !important; }
:root[data-tema="claro"] .entity-row[data-entity='gpt-realtime'] .entity-tag { color: #0a6e3f !important; border-color: #0a6e3f !important; }
:root[data-tema="claro"] .entity-row[data-entity='gpt-mini'] .entity-tag { color: #5b3fc0 !important; border-color: #5b3fc0 !important; }
/* a faixa do uptime é outro componente (.hud-widget-mini), com o mesmo degradê escuro */
:root[data-tema="claro"] .hud-widget-mini {
  background: linear-gradient(90deg, rgba(0,106,132,0.06), rgba(255,255,255,0.95)) !important;
  border-color: rgba(0,106,132,0.22) !important;
}
/* título do cartão "Verificação do sistema" (ciano neon inline) */
:root[data-tema="claro"] #setup-verify-card strong { color: #006a84 !important; }
:root[data-tema="claro"] #setup-verify-card { background: linear-gradient(135deg, rgba(0,106,132,0.07) 0%, rgba(10,110,63,0.05) 100%) !important; border-color: rgba(0,106,132,0.25) !important; }
/* anéis do Conclave: o miolo era var(--sf-bg-deep) preto */
:root[data-tema="claro"] .cg-inner { background: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(0,106,132,0.12); }
/* botão ativo de qualidade gráfica: texto claro sobre o ciano */
:root[data-tema="claro"] .aq-btn.active { color: #ffffff !important; background: #006a84 !important; }
/* botão "‹ COCKPIT" (estilo inline, criado no script.js) */
:root[data-tema="claro"] #back-to-cockpit {
  background: rgba(255,255,255,0.95) !important; color: #006a84 !important;
  border-color: rgba(0,106,132,0.45) !important; box-shadow: 0 1px 4px rgba(13,27,38,0.10) !important;
}
:root[data-tema="claro"] #back-to-cockpit:hover { background: rgba(0,106,132,0.10) !important; }

/* CONFIG — tudo nela é estilo inline, e o JS troca as cores de status (verde neon "Conectado") */
:root[data-tema="claro"] #claude-auth-status { color: #0a6e3f !important; }
:root[data-tema="claro"] #claude-auth-card > div,
:root[data-tema="claro"] #claude-auth-card div[style*="color"] { color: #2c4d63 !important; }
:root[data-tema="claro"] #claude-auth-card strong,
:root[data-tema="claro"] #deps-card strong { color: #4a32a8 !important; }
:root[data-tema="claro"] #btn-claude-auth { color: #ffffff !important; background: linear-gradient(90deg, #5b3fc0, #006a84) !important; }
:root[data-tema="claro"] #sv-desc { color: #2c4d63 !important; }
:root[data-tema="claro"] #sv-desc strong { color: #0a6e3f !important; }
:root[data-tema="claro"] #sv-verify-btn { color: #00566b !important; background: rgba(0,106,132,0.10) !important; border-color: rgba(0,106,132,0.45) !important; }
:root[data-tema="claro"] #sv-min { color: #00566b !important; border-color: rgba(0,106,132,0.45) !important; }
:root[data-tema="claro"] #sv-empty { color: #46657b !important; }
:root[data-tema="claro"] #deps-card div, :root[data-tema="claro"] #deps-card code { color: #2c4d63 !important; }
:root[data-tema="claro"] #deps-status { color: #46657b !important; }
:root[data-tema="claro"] #deps-check-btn { color: #4a32a8 !important; background: rgba(91,63,192,0.10) !important; border-color: rgba(91,63,192,0.45) !important; }
:root[data-tema="claro"] #deps-repair-btn { background: linear-gradient(90deg, #5b3fc0, #006a84) !important; color: #ffffff !important; }
/* o bloco "Privacidade & dados" era uma ilha preta (rgba(4,10,16,.7) inline) */
:root[data-tema="claro"] #tab-config .config-panel > div[style*="rgba(4,10,16"] {
  background: rgba(255,255,255,0.9) !important; border-color: rgba(0,106,132,0.22) !important;
}
:root[data-tema="claro"] #tab-config .config-panel > div[style*="rgba(4,10,16"] div,
:root[data-tema="claro"] #tab-config .config-panel > div[style*="rgba(4,10,16"] span { color: #2c4d63 !important; }
:root[data-tema="claro"] #tab-config .config-panel > div[style*="rgba(4,10,16"] strong { color: #006a84 !important; }
:root[data-tema="claro"] #tab-config .config-panel > div[style*="rgba(4,10,16"] a { color: #006a84 !important; background: rgba(0,106,132,0.08) !important; }
:root[data-tema="claro"] #btn-delete-data { color: #b3261e !important; background: rgba(179,38,30,0.07) !important; border-color: rgba(179,38,30,0.35) !important; }
:root[data-tema="claro"] .config-hint,
:root[data-tema="claro"] #groq-key-status, :root[data-tema="claro"] #cerebras-key-status, :root[data-tema="claro"] #mistral-key-status { color: #46657b !important; }