/* ═══════════════════════════════════════════════════════════
   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;
}
.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); }

/* 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); }
/* BATCH 2 #6 — Stop btn (mostra durante streaming) */
.stop-btn {
  background: rgba(255,68,68,0.15); border: 1px solid rgba(255,68,68,0.5);
  color: #ff6666; border-radius: 8px; padding: 0 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; transition: all 0.15s;
}
.stop-btn:hover { background: rgba(255,68,68,0.3); transform: scale(1.05); }
.stop-btn svg { width: 14px; height: 14px; }
/* BATCH 4 #19 — Modo Foco: esconde HUD lateral/inferior, expande terminal */
body.focus-mode .hud-panel,
body.focus-mode .hud-bottom,
body.focus-mode .navbar,
body.focus-mode .orb-section { display: none !important; }
body.focus-mode #tab-terminal,
body.focus-mode .cockpit-iron { padding: 0 !important; margin: 0 !important; }
body.focus-mode #terminal { max-height: 90vh !important; height: 90vh !important; }
body.focus-mode .arc-reactor { display: none; }
/* BATCH 4 #22 — Drag-and-drop overlay */
body.drag-over::before {
  content: 'Solte para anexar';
  position: fixed; inset: 0; background: rgba(0,228,255,0.15); border: 3px dashed #00e4ff;
  z-index: 99998; display: flex; align-items: center; justify-content: center;
  font-family: Orbitron, monospace; font-size: 32px; color: #00e4ff; pointer-events: none;
  text-shadow: 0 0 20px rgba(0,228,255,0.8);
}
/* BATCH 4 #23 — wake word indicator (no HUD) */
#wake-indicator { width: 8px; height: 8px; border-radius: 50%; background: #666; display: inline-block; vertical-align: middle; margin-right: 6px; transition: background 0.3s; }

/* BATCH 2 #10 — "Pensando..." linha */
.thinking-line { color: #ffd700; font-style: italic; opacity: 0.85; }
.thinking-dots::after {
  content: ''; display: inline-block; width: 18px; text-align: left;
  animation: thinking-dots 1.4s steps(4,end) infinite;
}
@keyframes thinking-dots {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; }
}
.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: 600px; }
.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-hint { font-size: 10px; color: var(--text-dim); margin-top: 5px; display: block; }
/* PATCH 22 — botão Testar voz */
.config-voice-row { display: flex; gap: 8px; align-items: stretch; }
.config-voice-row .config-select { flex: 1; }
.config-test-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px;
  background: rgba(0,228,255,0.08);
  border: 1px solid rgba(0,228,255,0.25);
  border-radius: 8px;
  color: var(--cyan, #00e4ff);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.config-test-btn:hover { background: rgba(0,228,255,0.18); border-color: rgba(0,228,255,0.5); }
.config-test-btn:active { transform: scale(0.97); }
.config-test-btn:disabled { opacity: 0.5; cursor: wait; }
.config-test-btn svg { 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: 1fr 1fr 1fr;
  gap: 4px;
  padding: 4px 0;
}
.aiox-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px 4px;
  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: 28px;
  height: 28px;
  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: 5px;
  margin-bottom: 2px;
  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;
  animation: sf-scanline 4s ease-in-out infinite !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 — Animated ring around temperature
══════════════════════════════ */
#widget-weather .widget-value {
  position: relative !important;
  display: inline-block !important;
}
/* PATCH 25 — anéis giratórios no weather removidos (visualmente poluente) */
#widget-weather .widget-value::before { content: none !important; }
#widget-weather .widget-value::after  { content: none !important; }
@keyframes sf-temp-ring {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ══════════════════════════════
   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; }


/* PATCH — Terminal tab REABILITADA (estava bloqueando a única tela com input pra digitar/falar) */
/* #tab-terminal { display: none !important; } */
/* .hud-qbtn[data-quick-tab="terminal"] { display: none !important; } */

/* ═══════════════════════════════════════════════════════════
   ARC REACTOR — Iron Man core (substitui NeuralTree feio)
   3 anéis concêntricos giratórios + núcleo brilhante
═══════════════════════════════════════════════════════════ */
.arc-reactor {
  position: relative;
  width: 380px; height: 380px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  filter: drop-shadow(0 0 30px rgba(0,228,255,0.5));
}
.arc-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0,228,255,0.25);
  box-shadow: 0 0 24px rgba(0,228,255,0.15), inset 0 0 24px rgba(0,228,255,0.08);
}
.arc-ring-1 {
  width: 380px; height: 380px;
  border-style: dashed;
  border-color: rgba(0,228,255,0.18);
  animation: arc-rotate 60s linear infinite;
}
.arc-ring-2 {
  width: 290px; height: 290px;
  border-width: 2px;
  border-color: rgba(0,228,255,0.35);
  border-top-color: rgba(0,228,255,0.85);
  border-right-color: transparent;
  animation: arc-rotate 14s linear infinite reverse;
}
.arc-ring-3 {
  width: 220px; height: 220px;
  border-width: 2px;
  border-color: rgba(0,228,255,0.3);
  border-bottom-color: rgba(0,228,255,0.85);
  border-left-color: transparent;
  animation: arc-rotate 9s linear infinite;
}
.arc-core {
  position: relative;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(180,240,255,0.95) 0%,
    rgba(0,228,255,0.65) 30%,
    rgba(0,180,220,0.25) 60%,
    transparent 100%);
  display: flex; align-items: center; justify-content: center;
  animation: arc-pulse 3.5s ease-in-out infinite;
}
.arc-core-inner {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #d4f5ff 40%, #00e4ff 100%);
  box-shadow: 0 0 40px rgba(180,240,255,0.9), 0 0 80px rgba(0,228,255,0.6);
}
.arc-core-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,228,255,0.3) 0%, transparent 70%);
  animation: arc-pulse 3.5s ease-in-out infinite reverse;
  pointer-events: none;
}
.arc-label {
  position: absolute;
  bottom: -38px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 8px;
  color: rgba(0,228,255,0.8);
  text-shadow: 0 0 12px rgba(0,228,255,0.6);
  white-space: nowrap;
  font-weight: 500;
}
@keyframes arc-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes arc-pulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.04); opacity: 1; }
}
/* Hover sutil (interativo) */
.arc-reactor:hover .arc-core { animation-duration: 1.5s; }
.arc-reactor:hover .arc-ring-2 { animation-duration: 5s; }
.arc-reactor:hover .arc-ring-3 { animation-duration: 3s; }
/* Reativo a estados do avatar */
.avatar-container[data-state="listening"] .arc-core { animation-duration: 1s; }
.avatar-container[data-state="thinking"] .arc-ring-2,
.avatar-container[data-state="thinking"] .arc-ring-3 { animation-duration: 4s; }


/* ═══════════════════════════════════════════════════════════
   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;
  animation: metric-scanline 3.5s ease-in-out infinite !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;
}