/* ════════════════════════════════════════════════════
   JARVIS / HYPDB.ONE — Neural Voice Dock
   Global visual brain + speech input module
   Frontend-only: Web Speech API when available, typed fallback always available
   ════════════════════════════════════════════════════ */
:root{
  --nvd-bg: rgba(0, 10, 4, .88);
  --nvd-bg-2: rgba(0, 255, 65, .055);
  --nvd-border: rgba(0, 255, 65, .38);
  --nvd-border-dim: rgba(0, 204, 51, .22);
  --nvd-text: #00ff41;
  --nvd-dim: #008822;
  --nvd-warn: #ffaa00;
  --nvd-red: #ff3333;
  --nvd-shadow: 0 0 22px rgba(0,255,65,.22), inset 0 0 18px rgba(0,255,65,.045);
}
.neural-voice-dock{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2147483000;
  width: min(760px, calc(100vw - 28px));
  color: var(--nvd-text);
  font-family: var(--font-mono, 'Courier New', monospace);
  pointer-events: auto;
}
.neural-voice-dock.nvd-minimized{ width: auto; }
.neural-voice-core{
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  background: linear-gradient(135deg, var(--nvd-bg), rgba(0,0,0,.78));
  border: 1px solid var(--nvd-border);
  box-shadow: var(--nvd-shadow);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.neural-voice-core::before,
.neural-voice-core::after{
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--nvd-text);
  border-style: solid;
  opacity: .75;
  pointer-events: none;
}
.neural-voice-core::before{ top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.neural-voice-core::after{ right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.neural-voice-dock.nvd-minimized .neural-voice-core{
  display: flex;
  min-height: 48px;
  width: 220px;
  grid-template-columns: none;
  cursor: pointer;
}
.nvd-brain-wrap{
  width: 58px;
  height: 58px;
  position: relative;
  display: grid;
  place-items: center;
}
.nvd-brain-orb{
  width: 52px;
  height: 52px;
  border: 1px solid var(--nvd-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(0,255,65,.14), rgba(0,0,0,.38) 58%, rgba(0,0,0,.72));
  box-shadow: 0 0 12px rgba(0,255,65,.25), inset 0 0 20px rgba(0,255,65,.08);
  animation: nvdBrainPulse 3.2s ease-in-out infinite;
}
.nvd-brain-icon{
  font-size: 26px;
  filter: drop-shadow(0 0 7px rgba(0,255,65,.65));
}
.nvd-node{
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--nvd-text);
  background: rgba(0,255,65,.22);
  box-shadow: 0 0 8px rgba(0,255,65,.55);
}
.nvd-node:nth-child(2){ top: 4px; left: 28px; animation: nvdNodeA 2.4s infinite; }
.nvd-node:nth-child(3){ top: 22px; right: 0; animation: nvdNodeB 2.8s infinite; }
.nvd-node:nth-child(4){ bottom: 5px; right: 15px; animation: nvdNodeA 2.2s infinite reverse; }
.nvd-node:nth-child(5){ bottom: 10px; left: 3px; animation: nvdNodeB 3s infinite reverse; }
.nvd-payload{ min-width: 0; }
.nvd-title-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.nvd-title{
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0,255,65,.55);
  white-space: nowrap;
}
.nvd-badge{
  font-size: 8px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border: 1px solid var(--nvd-border-dim);
  color: var(--nvd-dim);
  text-transform: uppercase;
}
.nvd-badge.nvd-active{ color: var(--nvd-text); border-color: var(--nvd-border); background: rgba(0,255,65,.07); }
.nvd-badge.nvd-warn{ color: var(--nvd-warn); border-color: rgba(255,170,0,.38); background: rgba(255,170,0,.06); }
.nvd-input-row{
  display: flex;
  gap: 8px;
  align-items: center;
}
.nvd-command{
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--nvd-border-dim);
  background: rgba(0,0,0,.42);
  color: var(--nvd-text);
  outline: none;
  padding: 0 12px;
  font-family: inherit;
  font-size: 12px;
  box-shadow: inset 0 0 10px rgba(0,255,65,.04);
}
.nvd-command::placeholder{ color: rgba(0,136,34,.9); }
.nvd-command:focus{ border-color: var(--nvd-border); box-shadow: 0 0 8px rgba(0,255,65,.24), inset 0 0 10px rgba(0,255,65,.06); }
.nvd-actions{ display: flex; gap: 7px; align-items: center; }
.nvd-btn{
  width: 36px;
  height: 36px;
  border: 1px solid var(--nvd-border-dim);
  background: rgba(0,255,65,.07);
  color: var(--nvd-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  display: inline-grid;
  place-items: center;
  transition: all .18s ease;
}
.nvd-btn:hover{ border-color: var(--nvd-border); background: rgba(0,255,65,.14); box-shadow: 0 0 10px rgba(0,255,65,.26); transform: translateY(-1px); }
.nvd-btn:active{ transform: translateY(1px); }
.nvd-btn.nvd-recording{ color: #001500; background: var(--nvd-text); box-shadow: 0 0 18px rgba(0,255,65,.55); animation: nvdRec 1s infinite; }
.nvd-submit{ width: 54px; font-size: 10px; letter-spacing: 1px; }
.nvd-meta-row{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 7px;
  font-size: 9px;
  color: var(--nvd-dim);
  min-height: 12px;
}
.nvd-status-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nvd-dim);
  box-shadow: 0 0 6px rgba(0,255,65,.35);
}
.nvd-status-dot.on{ background: var(--nvd-text); animation: nvdDot 1.5s infinite; }
.nvd-transcript{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nvd-dim);
}
.nvd-dock-tools{
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.neural-voice-dock.nvd-minimized .nvd-payload,
.neural-voice-dock.nvd-minimized .nvd-dock-tools{ display: none; }
.neural-voice-dock.nvd-minimized .nvd-brain-wrap{ width: 36px; height: 36px; }
.neural-voice-dock.nvd-minimized .nvd-brain-orb{ width: 34px; height: 34px; }
.neural-voice-dock.nvd-minimized .nvd-brain-icon{ font-size: 18px; }
.neural-voice-dock.nvd-minimized .neural-voice-core::before,
.neural-voice-dock.nvd-minimized .neural-voice-core::after{ width: 10px; height: 10px; }
.neural-voice-dock.nvd-minimized .neural-voice-core::after{ display:block; }
.neural-voice-dock.nvd-minimized .neural-voice-core::before{ display:block; }
.neural-voice-dock.nvd-minimized .nvd-mini-label{
  display: block;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.nvd-mini-label{ display:none; }
@keyframes nvdBrainPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); box-shadow:0 0 18px rgba(0,255,65,.42), inset 0 0 22px rgba(0,255,65,.11); } }
@keyframes nvdNodeA{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.2); } }
@keyframes nvdNodeB{ 0%,100%{ opacity:1; transform:scale(1.15); } 50%{ opacity:.28; transform:scale(.8); } }
@keyframes nvdRec{ 0%,100%{ box-shadow:0 0 12px rgba(0,255,65,.45); } 50%{ box-shadow:0 0 24px rgba(0,255,65,.8); } }
@keyframes nvdDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media(max-width:760px){
  .neural-voice-dock{ bottom: 10px; width: calc(100vw - 18px); }
  .neural-voice-core{ grid-template-columns: 48px 1fr; gap: 8px; padding: 10px; }
  .nvd-dock-tools{ grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .nvd-brain-wrap{ width: 44px; height: 44px; }
  .nvd-brain-orb{ width: 40px; height: 40px; }
  .nvd-brain-icon{ font-size: 20px; }
  .nvd-title-row{ margin-bottom: 6px; }
  .nvd-title{ font-size: 9px; letter-spacing: 1px; }
  .nvd-badge{ display:none; }
  .nvd-input-row{ flex-wrap: wrap; }
  .nvd-command{ flex-basis: 100%; }
  .nvd-actions{ width: 100%; justify-content: space-between; }
}