:root {
  --neon-blue: #00c8f0; /* less saturated than before */
  --neon-gold: #ffaa00;
  --neon-red: #ff3333;
  --neon-green: #00ff66;
  --neon-pink: #0088ff;
  --dark-bg: #020c1a; /* DARKER navy */
  --grid-color: rgba(0, 80, 180, 0.06); /* more blue, less bright */
  --panel-bg: linear-gradient(180deg, #051322 0%, #030b16 100%);
  --lexie-glow: rgba(0, 136, 255, 0.15);
  --tech-border: #1e3a5f;
  --tech-border-light: #00509e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Share Tech Mono", monospace;
  background-color: #010810;
  color: #e2e8f0;
  overflow: hidden;
  height: 100vh;
  background-image:
    radial-gradient(
      ellipse 55% 55% at 50% 52%,
      rgba(0, 50, 140, 0.45) 0%,
      rgba(0, 12, 40, 0.75) 45%,
      rgba(1, 5, 14, 0.99) 100%
    ),
    /* stronger center glow */
    linear-gradient(rgba(0, 100, 200, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 100, 200, 0.05) 1px, transparent 1px);
  background-size:
    100% 100%,
    28px 28px,
    28px 28px; /* slightly larger grid */
}

/* SCANLINE OVERLAY for JARVIS feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.025) 2px,
    rgba(0, 0, 0, 0.025) 4px
  );
  pointer-events: none;
  z-index: 100;
}

@keyframes bg-scroll {
  0% {
    background-position:
      0 0,
      0 0;
  }
  100% {
    background-position:
      32px 32px,
      32px 32px;
  }
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--neon-blue);
}

/* ── TOP TACTICAL STATUS BAR ── */
.jarvis-status-bar {
  width: 100%;
  height: 28px;
  background: linear-gradient(
    90deg,
    rgba(0, 25, 60, 0.9) 0%,
    rgba(0, 5, 15, 0.95) 50%,
    rgba(0, 25, 60, 0.9) 100%
  );
  border-bottom: 1px solid rgba(0, 243, 255, 0.4);
  box-shadow: 0 2px 10px rgba(0, 85, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  z-index: 10;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #fff;
  position: relative;
  flex-shrink: 0;
}
.status-left,
.status-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sys-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--neon-blue);
  color: var(--neon-blue);
  border-radius: 2px;
  letter-spacing: 1px;
  box-shadow: 0 0 5px rgba(0, 243, 255, 0.1) inset;
  text-transform: uppercase;
}
.sys-badge.pink {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
  box-shadow: 0 0 5px rgba(0, 136, 255, 0.1) inset;
}
.sys-badge.gold {
  border-color: var(--neon-gold);
  color: var(--neon-gold);
  box-shadow: 0 0 5px rgba(255, 170, 0, 0.1) inset;
}
.sys-badge.hot {
  border-color: var(--neon-red);
  color: var(--neon-red);
  background: rgba(255, 51, 51, 0.1);
  box-shadow: 0 0 5px rgba(255, 51, 51, 0.2) inset;
}
.sys-badge.green {
  border-color: var(--neon-green);
  color: var(--neon-green);
  background: rgba(0, 255, 102, 0.05);
  box-shadow: 0 0 5px rgba(0, 255, 102, 0.1) inset;
}
.sys-badge.blue {
  border-color: var(--neon-blue);
  color: var(--neon-blue);
  background: rgba(0, 243, 255, 0.1);
}

/* ── HEADER ── */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(0, 243, 255, 0.25);
  background: rgba(1, 4, 10, 0.98);
  height: 52px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-brand h2 {
  margin: 0;
  font-family: "Orbitron", monospace;
  font-size: 16px;
  letter-spacing: 5px;
  color: var(--neon-blue);
  text-shadow:
    0 0 10px var(--neon-blue),
    0 0 20px rgba(0, 243, 255, 0.5);
}
.lexie-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid rgba(0, 136, 255, 0.35);
  background: rgba(0, 136, 255, 0.05);
}
.lexie-orb {
  width: 22px;
  height: 22px;
  background: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink);
  animation: orb-pulse 2.5s ease-in-out infinite alternate;
  flex-shrink: 0;
}
@keyframes orb-pulse {
  0% {
    box-shadow: 0 0 8px var(--neon-pink);
    opacity: 0.8;
  }
  100% {
    box-shadow:
      0 0 18px var(--neon-pink),
      0 0 35px rgba(0, 136, 255, 0.5);
    opacity: 1;
  }
}
.lexie-orb.speaking {
  animation: orb-speak 0.15s ease-in-out infinite alternate;
  background: var(--neon-blue);
}
@keyframes orb-speak {
  0% {
    box-shadow: 0 0 18px var(--neon-blue);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 30px var(--neon-blue);
    transform: scale(1.12);
  }
}
.lexie-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.lexie-name {
  font-family: "Orbitron", monospace;
  font-size: 11px;
  color: var(--neon-pink);
  letter-spacing: 2px;
}
.lexie-sub {
  font-size: 10px;
  color: rgba(0, 136, 255, 0.6);
}

/* DEFCON */
.defcon-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
}
.defcon-levels {
  display: flex;
  gap: 3px;
}
.defcon-seg {
  width: 14px;
  height: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s;
}
.defcon-seg.active.level-5 {
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
  border-color: var(--neon-green);
}
.defcon-seg.active.level-4 {
  background: #a3e635;
  box-shadow: 0 0 6px #a3e635;
  border-color: #a3e635;
}
.defcon-seg.active.level-3 {
  background: var(--neon-gold);
  box-shadow: 0 0 6px var(--neon-gold);
  border-color: var(--neon-gold);
}
.defcon-seg.active.level-2 {
  background: #f97316;
  box-shadow: 0 0 6px #f97316;
  border-color: #f97316;
}
.defcon-seg.active.level-1 {
  background: var(--neon-red);
  box-shadow: 0 0 6px var(--neon-red);
  border-color: var(--neon-red);
}

/* ═══════════════════════════════════════════════════════════
   MAIN LAYOUT — JARVIS 4-COLUMN GRID
   ═══════════════════════════════════════════════════════════ */
#main-layout {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: 1fr;
  gap: 8px;
  padding: 10px;
  height: calc(100vh - 76px); /* 24px ticker + 52px header */
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* COL 1 — GOD-TIER CONTROLS */
#panel-controls {
  grid-column: 1;
  grid-row: 1;
  width: 240px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* COL 2 — LEFT DATA COLUMN */
.left-data-col {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 240px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

/* COL 3 — CENTER (ARC REACTOR + COMMS) */
.center-col {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  height: 100%;
  align-items: stretch;
}

/* COL 4 — NEURAL LINK */
#panel-neural {
  grid-column: 4;
  grid-row: 1;
  width: 240px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* COL 5 — COMMS TABLE (Wait, where is it?) */
#panel-comms {
  grid-column: 5;
  grid-row: 1;
  width: 240px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* BOTTOM ROW 1 — TERMINAL (spans all 4 cols) */
#panel-terminal {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 130px;
  min-height: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
}

/* BOTTOM ROW 2 — FOOTER */
.hud-footer {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  gap: 16px;
  align-items: center;
  background: rgba(0, 0, 0, 0.92);
  border-top: 1px solid rgba(0, 229, 255, 0.25);
  padding: 0 12px;
  height: 22px;
}

/* ── JARVIS PANELS ── */
.jarvis-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
}

/* (panelBreathe animation removed for performance) */
.jarvis-panel::before,
.jarvis-panel::after {
  display: none;
}

.jarvis-mini-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 8px;
  position: relative;
}

.panel-glass {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ARC REACTOR — DOMINANT CENTERPIECE (no more absolute/ghost)
   ═══════════════════════════════════════════════════════════ */
.jarvis-reactor-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  border: none;
  padding: 10px 8px;
  overflow: hidden;
}
/* Subtle radial glow behind the reactor */
.jarvis-reactor-wrap::before {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  background: radial-gradient(
    circle,
    rgba(0, 150, 255, 0.3) 0%,
    rgba(0, 100, 255, 0.1) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
}

.arc-container {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(0, 243, 255, 0.2);
  z-index: 1;
}

.arc-container::before {
  content: "";
  position: absolute;
  width: 100vh;
  height: 100vh;
  border-radius: 50%;
  border: 1px solid rgba(0, 243, 255, 0.05);
  background: repeating-conic-gradient(
    rgba(0, 243, 255, 0.05) 0deg 2deg,
    transparent 2deg 4deg
  );
  animation: spin-slow 60s linear infinite;
  z-index: -1;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 20%, black 100%);
  mask: radial-gradient(circle, transparent 20%, black 100%);
}

.arc-container::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 100, 255, 0.2);
  animation: reactor-spin-rev 40s linear infinite;
  z-index: -1;
  pointer-events: none;
}

.arc-ring {
  position: absolute;
  border-radius: 50%;
}

.outer-ring {
  width: 100%;
  height: 100%;
  border: 3px solid var(--tech-border);
  border-left-color: var(--neon-blue);
  border-right-color: var(--neon-blue);
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 243, 255, 0.3);
  animation: spin-slow 15s linear infinite;
}

.tick-ring {
  width: 92%;
  height: 92%;
  border: 1px solid transparent;
  background: repeating-conic-gradient(
    rgba(0, 243, 255, 0.5) 0deg,
    rgba(0, 243, 255, 0.5) 1deg,
    transparent 1deg,
    transparent 9deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    black calc(100% - 3px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    black calc(100% - 3px)
  );
  animation: spin-slow 30s linear infinite reverse;
}

.hash-ring {
  width: 78%;
  height: 78%;
  border: 2px dashed rgba(0, 243, 255, 0.4);
  animation: reactor-spin-rev 8s linear infinite;
}

.inner-glow {
  width: 56%;
  height: 56%;
  border: 6px solid rgba(0, 243, 255, 0.25);
  box-shadow:
    0 0 15px var(--neon-blue),
    inset 0 0 15px rgba(0, 100, 255, 0.3);
}

.arc-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 40px solid rgba(0, 180, 255, 0.85);
  opacity: 0.9;
  animation: reactor-pulse 2s ease-in-out infinite alternate;
  margin-top: -8px;
  will-change: transform, opacity;
}

.arc-triangle-inv {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 40px solid rgba(0, 243, 255, 0.5);
  opacity: 0.6;
  animation: reactor-pulse 2s ease-in-out infinite alternate-reverse;
  margin-top: 8px;
  will-change: transform, opacity;
}

.arc-center-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 15px #fff,
    0 0 30px var(--neon-blue),
    0 0 60px rgba(0, 100, 255, 0.5);
  z-index: 10;
}

/* Data labels ringing the reactor */
.reactor-data-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.rdl {
  position: absolute;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  color: var(--neon-blue);
  letter-spacing: 1px;
  opacity: 0.8;
  text-shadow: 0 0 4px var(--neon-blue);
}
.rdl-tl {
  top: 18px;
  left: 8px;
}
.rdl-tr {
  top: 18px;
  right: 8px;
}
.rdl-bl {
  bottom: 50px;
  left: 8px;
}
.rdl-br {
  bottom: 50px;
  right: 8px;
}
.rdl-t {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--neon-gold);
}
.rdl-b {
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--neon-gold);
}

/* Surrounding HUD data row */
.reactor-hud-data {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  z-index: 2;
}
.rhd-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 243, 255, 0.04);
  border: 1px solid rgba(0, 243, 255, 0.15);
  padding: 4px 2px;
}
.rhd-label {
  font-size: 7px;
  color: rgba(0, 243, 255, 0.4);
  letter-spacing: 1px;
}
.rhd-val {
  font-family: "Orbitron", monospace;
  font-size: 10px;
  color: var(--neon-blue);
  letter-spacing: 1px;
}

@keyframes reactor-spin-rev {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes reactor-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.05);
    opacity: 1;
  }
}
@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── PANELS ── */
.panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 2px;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--neon-blue);
  box-shadow: 0 0 15px var(--neon-blue);
  clip-path: polygon(
    15px 0,
    100% 0,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    0 100%,
    0 15px
  );
  z-index: -2;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  background:
    linear-gradient(var(--neon-blue), var(--neon-blue)) top left / 10px 2px
      no-repeat,
    linear-gradient(var(--neon-blue), var(--neon-blue)) top left / 2px 10px
      no-repeat,
    linear-gradient(var(--neon-blue), var(--neon-blue)) top right / 10px 2px
      no-repeat,
    linear-gradient(var(--neon-blue), var(--neon-blue)) top right / 2px 10px
      no-repeat,
    linear-gradient(var(--neon-blue), var(--neon-blue)) bottom right / 10px 2px
      no-repeat,
    linear-gradient(var(--neon-blue), var(--neon-blue)) bottom right / 2px 10px
      no-repeat,
    linear-gradient(var(--neon-blue), var(--neon-blue)) bottom left / 10px 2px
      no-repeat,
    linear-gradient(var(--neon-blue), var(--neon-blue)) bottom left / 2px 10px
      no-repeat,
    var(--panel-bg);
  clip-path: polygon(
    14px 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%,
    0 14px
  );
  z-index: -1;
}
.panel > * {
  z-index: 1;
  position: relative;
}

.panel-header {
  padding: 0;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--tech-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}
.panel-title {
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--tech-border-light);
  padding: 5px 18px 5px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  display: inline-block;
}
.panel-status {
  font-size: 9px;
  color: var(--neon-green);
  padding-right: 12px;
}
.panel-body {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── BUTTONS ── */
.glow-btn,
button,
.sys-badge,
.panel-label,
.metric-val,
.rhd-val {
  transition:
    transform 0.4s cubic-bezier(0.25, 1.5, 0.5, 1),
    box-shadow 0.3s ease,
    text-shadow 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

/* Hovering the entire panel lifts elements inside */
.jarvis-panel:hover .sys-badge,
.jarvis-panel:hover .metric-val,
.jarvis-panel:hover .rhd-val,
.sci-fi-armor-wrapper:hover .sys-badge,
.sci-fi-armor-wrapper:hover .metric-val,
.sci-fi-armor-wrapper:hover .rhd-val {
  transform: translateY(-2px);
  text-shadow: 0 4px 10px rgba(0, 243, 255, 0.8);
}

.jarvis-panel:hover button,
.sci-fi-armor-wrapper:hover button,
.jarvis-panel:hover .glow-btn,
.sci-fi-armor-wrapper:hover .glow-btn {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 243, 255, 0.3);
}

.glow-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #072a54 0%, #03152a 100%);
  border: 1px solid var(--tech-border);
  border-top: 1px solid rgba(0, 243, 255, 0.4);
  border-left: 1px solid rgba(0, 243, 255, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
  color: var(--neon-blue);
  padding: 8px 10px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 3px;
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
    inset -1px -1px 3px rgba(0, 0, 0, 0.8),
    0 4px 6px rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.glow-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 243, 255, 0.4),
    transparent
  );
  transform: skewX(-25deg);
  animation: gleamSweep 4s infinite cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1;
  pointer-events: none;
}

@keyframes gleamSweep {
  0% {
    left: -100%;
  }
  20% {
    left: 200%;
  }
  100% {
    left: 200%;
  }
}

.glow-btn:hover {
  background: linear-gradient(180deg, #093c76 0%, #052040 100%);
  border-color: var(--neon-blue) !important;
  border-top: 1px solid rgba(0, 243, 255, 0.8) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.9) !important;
  box-shadow:
    inset 1px 1px 4px rgba(255, 255, 255, 0.4),
    inset -1px -1px 4px rgba(0, 0, 0, 0.8),
    0 8px 15px rgba(0, 243, 255, 0.3),
    0 0 10px var(--neon-blue) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.02) !important;
}

.glow-btn:active {
  transform: translateY(2px) scale(0.98) !important;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.9),
    inset -1px -1px 2px rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3) !important;
  background: linear-gradient(180deg, #03152a 0%, #072a54 100%) !important;
}

.glow-btn.red {
  border-color: var(--neon-red);
  border-top-color: rgba(255, 51, 51, 0.5);
  color: var(--neon-red);
}
.glow-btn.red::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 51, 51, 0.4),
    transparent
  );
}
.glow-btn.red:hover {
  border-color: var(--neon-red) !important;
  border-top-color: rgba(255, 51, 51, 0.9) !important;
  box-shadow:
    inset 1px 1px 4px rgba(255, 255, 255, 0.4),
    inset -1px -1px 4px rgba(0, 0, 0, 0.8),
    0 8px 15px rgba(255, 51, 51, 0.3),
    0 0 10px var(--neon-red) !important;
  background: rgba(255, 51, 51, 0.15);
}

.glow-btn.gold {
  border-color: var(--neon-gold);
  border-top-color: rgba(255, 170, 0, 0.5);
  color: var(--neon-gold);
}
.glow-btn.gold::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 170, 0, 0.4),
    transparent
  );
}
.glow-btn.gold:hover {
  border-color: var(--neon-gold) !important;
  border-top-color: rgba(255, 170, 0, 0.9) !important;
  box-shadow:
    inset 1px 1px 4px rgba(255, 255, 255, 0.4),
    inset -1px -1px 4px rgba(0, 0, 0, 0.8),
    0 8px 15px rgba(255, 170, 0, 0.3),
    0 0 10px var(--neon-gold) !important;
  background: rgba(255, 170, 0, 0.15);
}

.glow-btn.pink {
  border-color: var(--neon-pink);
  border-top-color: rgba(255, 0, 255, 0.5);
  color: var(--neon-pink);
}
.glow-btn.pink::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 0, 255, 0.4),
    transparent
  );
}
.glow-btn.pink:hover {
  border-color: var(--neon-pink) !important;
  border-top-color: rgba(255, 0, 255, 0.9) !important;
  box-shadow:
    inset 1px 1px 4px rgba(255, 255, 255, 0.4),
    inset -1px -1px 4px rgba(0, 0, 0, 0.8),
    0 8px 15px rgba(255, 0, 255, 0.3),
    0 0 10px var(--neon-pink) !important;
  background: rgba(255, 0, 255, 0.05);
}

/* ── LEFT PANEL — ACCORDION ── */
.acc-item {
  border-bottom: 1px solid rgba(0, 243, 255, 0.15);
}
.acc-header {
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #ccc;
  transition: background 0.2s;
  user-select: none;
}
.acc-header:hover {
  background: rgba(0, 243, 255, 0.1);
}
.acc-header.open {
  color: var(--neon-blue);
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 243, 255, 0.2);
}
.acc-body {
  display: none;
  padding: 10px;
}
.acc-body.show {
  display: block;
}
.chevron {
  font-size: 9px;
  color: rgba(0, 243, 255, 0.5);
  transition: transform 0.3s;
}
.acc-header.open .chevron {
  transform: rotate(180deg);
  color: var(--neon-blue);
}
.macro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.macro-grid .glow-btn {
  font-size: 10px;
  padding: 6px 4px;
}
.lore-badge {
  margin: 10px;
  padding: 10px;
  border: 1px solid rgba(0, 136, 255, 0.3);
  background: rgba(0, 136, 255, 0.05);
  font-size: 10px;
  color: rgba(216, 240, 255, 0.6);
  line-height: 1.5;
}
.lore-title {
  font-family: "Orbitron", monospace;
  font-size: 9px;
  color: var(--neon-pink);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

/* ── CHARTS ── */
.chart-panel {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 243, 255, 0.2);
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chart-label {
  font-size: 9px;
  color: var(--neon-blue);
  letter-spacing: 1px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* ── COMMS TABLE ── */
#comms-table-wrap {
  flex: 1;
  overflow: auto;
}
table#commsTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  table-layout: fixed;
}
table#commsTable th:nth-child(1) {
  width: 22%;
}
table#commsTable th:nth-child(2) {
  width: 15%;
}
table#commsTable th:nth-child(3) {
  width: 33%;
}
table#commsTable th:nth-child(4) {
  width: 30%;
}
table#commsTable th {
  padding: 6px 8px;
  border-bottom: 2px solid var(--neon-blue);
  color: var(--neon-blue);
  font-size: 9px;
  letter-spacing: 1px;
  text-align: left;
  background: rgba(0, 0, 0, 0.8);
  position: sticky;
  top: 0;
  z-index: 2;
}
table#commsTable td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0, 243, 255, 0.1);
  vertical-align: top;
}
table#commsTable tr:hover td {
  background: rgba(0, 243, 255, 0.1);
  cursor: pointer;
  border-left: 2px solid var(--neon-blue);
}
table#commsTable tr.selected td {
  background: rgba(0, 136, 255, 0.15);
  border-left: 3px solid var(--neon-pink);
}
.target-id-cell {
  color: var(--neon-pink);
  font-size: 10px;
}
.time-cell {
  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  white-space: nowrap;
}
.msg-cell {
  color: #e2e8f0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-cell {
  color: rgba(0, 243, 255, 0.8);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comms-filter {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 243, 255, 0.3);
  color: var(--neon-blue);
  padding: 6px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  outline: none;
}
.comms-filter:focus {
  border-color: var(--neon-pink);
  box-shadow: 0 0 8px rgba(0, 136, 255, 0.2);
}

/* ── NEURAL LINK CHAT ── */
.chat-window {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  background: rgba(0, 0, 0, 0.4);
  border: 1px inset rgba(0, 136, 255, 0.2);
  margin: 0 4px;
}
.chat-msg {
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.user-msg {
  background: rgba(0, 136, 255, 0.1);
  border-left: 3px solid var(--neon-pink);
  color: #e2e8f0;
  align-self: flex-end;
  max-width: 90%;
}
.lexie-msg {
  background: rgba(0, 0, 0, 0.7);
  border-left: 3px solid var(--neon-blue);
  color: rgba(0, 243, 255, 0.9);
  align-self: flex-start;
  max-width: 100%;
}
.chat-controls {
  padding: 6px;
  border-top: 1px solid rgba(0, 243, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.6);
}
.chat-controls input[type="text"] {
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 136, 255, 0.4);
  border-bottom: 2px solid var(--neon-blue);
  color: var(--neon-blue);
  padding: 6px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  outline: none;
}
.send-row {
  display: flex;
  gap: 6px;
}
.send-row input {
  flex: 1;
}

.target-lock {
  background: rgba(255, 51, 51, 0.1);
  border: 1px solid rgba(255, 51, 51, 0.4);
  padding: 5px 8px;
  font-size: 10px;
  color: var(--neon-red);
  display: none;
  letter-spacing: 1px;
  font-weight: bold;
  text-align: center;
  margin: 4px;
}
.target-lock.active {
  display: block;
  animation: lock-pulse 1.5s infinite;
}
@keyframes lock-pulse {
  50% {
    opacity: 0.5;
  }
}

/* ── TERMINAL ── */
.terminal-inner {
  flex: 1;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid rgba(0, 243, 255, 0.2);
  border-left: 4px solid var(--neon-blue);
  padding: 8px 10px;
  overflow-y: auto;
  font-size: 10px;
  color: var(--neon-blue);
}
.log-line {
  margin: 2px 0;
  opacity: 0.9;
}
.log-line.warn {
  color: var(--neon-gold);
}
.log-line.lexie {
  color: #fff;
}

/* ── LOGIN & MODAL ── */
#login-screen {
  position: fixed;
  inset: 0;
  background: #010408;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
#login-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.modal-overlay.open {
  display: flex;
  opacity: 1;
}
.modal-box {
  background: var(--panel-bg);
  border: 1px solid var(--neon-blue);
  padding: 20px;
  width: 320px;
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);
}
.modal-title {
  font-family: "Orbitron", monospace;
  color: var(--neon-blue);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.modal-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 136, 255, 0.4);
  border-bottom: 2px solid var(--neon-blue);
  color: #fff;
  padding: 10px;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  outline: none;
  margin-bottom: 15px;
  box-sizing: border-box;
}

/* ── SCI-FI ARMOR WRAPPER ── */
.sci-fi-armor-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2px;
  box-shadow: none; /* Borderless */
}

/* (armorBreathe animation removed for optimal performance) */

.armor-plate-bg {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    15px 0,
    100% 0,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    0 100%,
    0 15px
  );
  z-index: 0;
  background: transparent;
  box-shadow: none;
}
.panel.content-core {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: none !important;
  background: transparent;
  box-shadow: none;
}

/* Scanline inside panels */
.panel.content-core::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 243, 255, 0.4);
  box-shadow: 0 0 5px var(--neon-blue);
  animation: scanline 4s infinite linear;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
@keyframes scanline {
  0% {
    top: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Minimize button */
.panel-min-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  background: none;
  border: 1px solid var(--neon-blue);
  color: var(--neon-blue);
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  z-index: 50;
  transition: all 0.2s;
}
.panel-min-btn:hover {
  background: var(--neon-blue);
  color: #000;
  box-shadow: 0 0 10px var(--neon-blue);
}

/* ── MISC ── */
.tech-font {
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
}
.neon-red {
  color: var(--neon-red);
  text-shadow: 0 0 5px rgba(255, 51, 51, 0.5);
}
.whisper-label {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  color: var(--neon-pink);
  cursor: pointer;
}
.status-dot {
  width: 7px;
  height: 7px;
  background: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
  display: inline-block;
  margin-right: 5px;
  animation: dot-pulse 1.5s ease infinite;
}
@keyframes dot-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ═══════════════════════════════════════════════════════
   KOHMZ OMEGA — BORDERLESS FLOATING PANEL UPGRADE
   Add to BOTTOM of style.css
═══════════════════════════════════════════════════════ */

/* Remove solid borders from all panels */
.sci-fi-armor-wrapper {
  border: none !important;
  background: transparent !important;
}

.armor-plate-bg {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important; /* Remove expensive blur */
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.panel.content-core {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Panel title — floats above content, brighter */
.panel-title {
  letter-spacing: 3px;
  font-size: 10px;
  opacity: 0.9;
  text-shadow: 0 0 12px currentColor;
}

/* ── FLOATING CORNER MARKERS (replaces borders) ──
   This CSS adds 4 corner L-brackets to every panel
   using pure CSS — no extra HTML needed */
.sci-fi-armor-wrapper {
  position: relative;
}
.sci-fi-armor-wrapper::before,
.sci-fi-armor-wrapper::after {
  display: none;
}
/* Removing corner pseudo elements */

/* ── FLOATING STATS — borderless text with glow only ── */
.sys-badge {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 0 8px currentColor;
  padding: 2px 4px !important;
}

/* ── GLOW BUTTONS — thinner, more holographic ── */
.glow-btn {
  background: transparent !important;
  border-width: 1px !important;
  text-shadow: 0 0 6px currentColor;
}

/* ── REMOVE box-shadow ANIMATIONS, replace with opacity ── */
@keyframes orb-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.metric-strip {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
#radar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 243, 255, 0.2);
  position: relative;
  overflow: hidden;
}

/* ── HOLO BAR CHART ── */
.holo-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.holo-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.holo-bar-label {
  width: 35px;
  font-size: 9px;
  color: rgba(0, 243, 255, 0.6);
  text-align: right;
}
.holo-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(0, 243, 255, 0.05);
  position: relative;
  border: 1px solid rgba(0, 243, 255, 0.1);
}
.holo-bar-fill {
  height: 100%;
  background: rgba(0, 243, 255, 0.4);
  box-shadow: 2px 0 8px rgba(0, 243, 255, 0.6);
  transition: width 0.3s ease;
}
.holo-bar-fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 4px #fff;
}

.binary-stream {
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  color: rgba(0, 243, 255, 0.35);
  overflow: hidden;
  height: 100%;
  white-space: pre;
  animation: stream-scroll 8s linear infinite;
  line-height: 1.4;
}
@keyframes stream-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* ── DATA WIRES ── */
/* ── NEW SIDE HUDS ── */
.side-hud {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 10;
  pointer-events: none;
}
.hud-panel {
  border: none;
  background: transparent;
  pointer-events: auto;
}
.hud-panel.brackets {
  position: relative;
  background: rgba(0, 10, 30, 0.2);
  border: 1px solid rgba(0, 243, 255, 0.1);
}
.hud-panel.brackets::before,
.hud-panel.brackets::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.hud-panel.brackets::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--neon-blue);
  border-left: 2px solid var(--neon-blue);
}
.hud-panel.brackets::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--neon-blue);
  border-right: 2px solid var(--neon-blue);
}

/* Uplink Matrix */
.port-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.port-bar-row .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-blue);
  box-shadow: 0 0 6px var(--neon-blue);
}
.port-bar-row .line {
  width: 30px;
  height: 1px;
  background: var(--neon-blue);
  opacity: 0.5;
}
.port-bar-row .bar-bg {
  flex: 1;
  height: 6px;
  background: rgba(0, 243, 255, 0.1);
  position: relative;
}
.port-bar-row .bar-fill {
  height: 100%;
  background: var(--neon-blue);
  box-shadow: 0 0 8px var(--neon-blue);
  transition: width 0.2s;
}

/* Horizontal Bars */
.sb-row {
  margin-bottom: 6px;
  height: 8px;
}
.sb-fill {
  height: 100%;
  background: rgba(0, 243, 255, 0.4);
  transition: width 0.2s;
}
.sb-fill.glow {
  background: var(--neon-blue);
  box-shadow: 0 0 8px var(--neon-blue);
}

/* CSS Wireframe Globe (Right Top) */
.css-globe {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(0, 243, 255, 0.5);
  position: relative;
  box-shadow: inset 0 0 20px rgba(0, 243, 255, 0.2);
  /* Latitude lines */
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 10%,
    rgba(0, 243, 255, 0.2) 10%,
    rgba(0, 243, 255, 0.2) 11%
  );
}
/* Longitude lines */
.css-globe::before,
.css-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 243, 255, 0.4);
}
.css-globe::before {
  transform: scaleX(0.5);
}
.css-globe::after {
  transform: scaleX(0.1);
}

.sat-wrapper {
  position: absolute;
  width: 160px;
  height: 160px;
  top: -20px;
  left: -20px;
  animation: sat-spin 10s linear infinite;
}
.satellite {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 20px;
  height: 6px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 10px #fff;
}
.satellite::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -10px;
  width: 10px;
  height: 16px;
  background: var(--neon-blue);
}
.satellite::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -10px;
  width: 10px;
  height: 16px;
  background: var(--neon-blue);
}
@keyframes sat-spin {
  100% {
    transform: rotate(360deg);
  }
}

.data-wire {
  position: absolute;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0, 243, 255, 0) 0%,
    rgba(0, 243, 255, 0.8) 50%,
    rgba(0, 243, 255, 0) 100%
  );
  opacity: 0.5;
  z-index: -1;
  transform-origin: left center;
  animation: wire-pulse 3s infinite;
}
@keyframes wire-pulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 0.8;
    transform: scaleX(1.2);
  }
}
.floating-coords {
  position: absolute;
  color: var(--neon-blue);
  font-size: 10px;
  text-shadow: 0 0 8px currentColor;
  pointer-events: none;
  z-index: 5;
}

/* ── CSS 3D DEPTH ENHANCEMENTS (DISABLED FOR FPS) ── */
#dashboard {
  /* perspective: 1400px; */
  /* transform-style: preserve-3d; */
}
.sci-fi-armor-wrapper {
  box-shadow: none !important; /* Removed for FPS and borderless feel */
  /* transform-style: preserve-3d; */
  /* transform: translateZ(20px); */
}
.panel-title {
  /* transform: translateZ(10px); */
}
.glow-btn {
  /* transform: translateZ(15px); */
}
.kfx-toast {
  transform: translateZ(40px) translateX(110%);
}
.kfx-toast.visible {
  transform: translateZ(40px) translateX(0);
}
.copilot-section {
  border-top: 1px solid rgba(0, 243, 255, 0.2);
  padding: 8px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.4);
}
.copilot-title {
  font-size: 10px;
  color: var(--neon-gold);
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: bold;
}
.copilot-item {
  padding: 6px 8px;
  margin-bottom: 4px;
  background: rgba(255, 170, 0, 0.05);
  border: 1px solid rgba(255, 170, 0, 0.2);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.2s;
}
.copilot-item:hover {
  background: rgba(255, 170, 0, 0.2);
}
.copilot-item span {
  color: var(--neon-gold);
  display: block;
  font-size: 9px;
  margin-bottom: 3px;
  font-weight: bold;
}
#ext-session-timer {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: rgba(0, 255, 102, 0.6);
  padding: 3px 8px;
  border: 1px solid rgba(0, 255, 102, 0.2);
  background: rgba(0, 255, 102, 0.04);
  white-space: nowrap;
}
#ext-copilot-panel {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(0, 136, 255, 0.3);
  background: rgba(0, 136, 255, 0.05);
  margin-bottom: 8px;
}
#ext-copilot-panel .cp-title {
  font-family: "Orbitron", monospace;
  font-size: 9px;
  color: rgba(0, 136, 255, 0.7);
  letter-spacing: 2px;
  margin-bottom: 3px;
}
.copilot-btn {
  background: rgba(0, 136, 255, 0.08);
  border: 1px solid rgba(0, 136, 255, 0.25);
  color: rgba(216, 240, 255, 0.85);
  padding: 6px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  line-height: 1.4;
  width: 100%;
}
.copilot-btn:hover {
  background: rgba(0, 136, 255, 0.18);
  color: #fff;
}
.client-tag {
  display: inline-block;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  padding: 2px 6px;
  margin: 1px 2px;
  cursor: pointer;
}
.tag-vip {
  background: rgba(255, 170, 0, 0.15);
  border: 1px solid rgba(255, 170, 0, 0.4);
  color: #ffaa00;
}
.tag-hot {
  background: rgba(255, 51, 51, 0.12);
  border: 1px solid rgba(255, 51, 51, 0.4);
  color: #ff3333;
}
.tag-cold {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}
.tag-follow {
  background: rgba(0, 136, 255, 0.12);
  border: 1px solid rgba(0, 136, 255, 0.4);
  color: #0088ff;
}
.tag-booked {
  background: rgba(0, 255, 102, 0.1);
  border: 1px solid rgba(0, 255, 102, 0.4);
  color: #00ff66;
}
#ext-followup-btn {
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.35);
  color: rgba(255, 170, 0, 0.9);
  padding: 3px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.15s;
}
#ext-followup-btn:hover {
  background: rgba(255, 170, 0, 0.25);
  color: #fff;
}
#ext-followup-popup {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: rgba(8, 12, 20, 0.98);
  border: 1px solid rgba(255, 170, 0, 0.4);
  padding: 10px;
  min-width: 220px;
}
#ext-followup-popup .fu-title {
  font-family: "Orbitron", monospace;
  font-size: 9px;
  color: rgba(255, 170, 0, 0.7);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.fu-option {
  display: block;
  width: 100%;
  background: rgba(255, 170, 0, 0.07);
  border: 1px solid rgba(255, 170, 0, 0.2);
  color: rgba(216, 240, 255, 0.8);
  padding: 5px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  margin-bottom: 4px;
  text-align: left;
  transition: all 0.15s;
}
.fu-option:hover {
  background: rgba(255, 170, 0, 0.2);
  color: #fff;
}
#ext-fu-custom-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
#ext-fu-custom-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 170, 0, 0.25);
  color: #e2e8f0;
  padding: 4px 6px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
}
#ext-reminder-toast {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999999;
  background: rgba(8, 12, 20, 0.97);
  border: 1px solid rgba(255, 170, 0, 0.6);
  box-shadow: 0 0 20px rgba(255, 170, 0, 0.2);
  padding: 14px 16px;
  max-width: 320px;
  animation: ext-toast-in 0.3s ease;
}
@keyframes ext-toast-in {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
#ext-reminder-toast .toast-title {
  font-family: "Orbitron", monospace;
  font-size: 10px;
  color: rgba(255, 170, 0, 0.9);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
#ext-reminder-toast .toast-msg {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: rgba(216, 240, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 8px;
}
#ext-reminder-toast .toast-btns {
  display: flex;
  gap: 6px;
}
#ext-reminder-toast .toast-btn {
  flex: 1;
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.4);
  color: rgba(255, 170, 0, 0.9);
  padding: 5px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
#ext-ghost-status {
  padding: 6px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  margin-bottom: 6px;
  transition: all 0.3s;
}
#ext-ghost-status.active-passive {
  border: 1px solid rgba(255, 170, 0, 0.4);
  color: rgba(255, 170, 0, 0.8);
  background: rgba(255, 170, 0, 0.06);
}
#ext-ghost-status.active-active {
  border: 1px solid rgba(255, 51, 51, 0.5);
  color: rgba(255, 51, 51, 0.9);
  background: rgba(255, 51, 51, 0.07);
  animation: ghost-pulse 2s ease infinite;
}
#ext-ghost-status.offline {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
}
@keyframes ghost-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 51, 51, 0);
  }
  50% {
    box-shadow: 0 0 8px rgba(255, 51, 51, 0.3);
  }
}
#ext-ghost-log {
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid rgba(0, 136, 255, 0.1);
  padding: 4px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 9px;
  color: rgba(0, 136, 255, 0.5);
  line-height: 1.7;
  font-family: "Share Tech Mono", monospace;
}
.ghost-highlight td {
  background: rgba(255, 51, 51, 0.06) !important;
  border-bottom: 1px solid rgba(255, 51, 51, 0.2) !important;
}
.ghost-highlight td:first-child {
  border-left: 2px solid var(--neon-red) !important;
}
.followup-highlight td {
  background: rgba(255, 170, 0, 0.06) !important;
  border-bottom: 1px solid rgba(255, 170, 0, 0.2) !important;
}
.followup-highlight td:first-child {
  border-left: 2px solid var(--neon-gold) !important;
}
#ext-drawer {
  position: fixed;
  right: -290px;
  top: 60px;
  width: 270px;
  height: calc(100vh - 70px);
  background: rgba(8, 12, 20, 0.97);
  border-left: 1px solid rgba(0, 136, 255, 0.3);
  z-index: 9999998;
  transition: right 0.3s ease;
  padding: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
}
#ext-drawer.open {
  right: 0;
}
#ext-drawer-toggle {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--neon-blue);
  border-right: none;
  color: var(--neon-blue);
  font-family: "Orbitron", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 15px 5px;
  cursor: pointer;
  clip-path: polygon(100% 0, 0 10px, 0 calc(100% - 10px), 100% 100%);
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
  z-index: 10000;
  transition: all 0.3s;
}
#ext-drawer-toggle:hover {
  background: rgba(0, 243, 255, 0.1);
  color: #fff;
}
.ext-section {
  font-family: "Orbitron", monospace;
  font-size: 10px;
  color: var(--neon-blue);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 15px;
}
.ext-section::before {
  content: "◆";
  margin-right: 5px;
  color: var(--neon-gold);
}
.ext-section::after {
  content: "";
  flex: 1;
  border-bottom: 1px dashed rgba(0, 243, 255, 0.3);
  margin-left: 8px;
}
.ext-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 136, 255, 0.25);
  color: #e2e8f0;
  padding: 5px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  box-sizing: border-box;
  margin-bottom: 5px;
}
.ext-btn {
  background: rgba(0, 136, 255, 0.1);
  border: 1px solid rgba(0, 136, 255, 0.35);
  color: rgba(0, 136, 255, 0.9);
  padding: 5px 10px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 4px;
  transition: all 0.15s;
}
.ext-btn:hover {
  background: rgba(0, 136, 255, 0.25);
  color: #fff;
}
.ext-btn.red {
  border-color: rgba(255, 51, 51, 0.4);
  color: rgba(255, 51, 51, 0.8);
  background: rgba(255, 51, 51, 0.06);
}
.ext-btn.gold {
  border-color: rgba(255, 170, 0, 0.4);
  color: rgba(255, 170, 0, 0.8);
  background: rgba(255, 170, 0, 0.06);
}
.ext-btn.green {
  border-color: rgba(0, 255, 102, 0.4);
  color: rgba(0, 255, 102, 0.8);
  background: rgba(0, 255, 102, 0.06);
}

/* ── ROW STATES ── */
.row-hot td:first-child {
  border-left: 3px solid var(--neon-gold) !important;
}
.row-hot td {
  background: rgba(255, 170, 0, 0.06);
}
.row-cold {
  opacity: 0.4;
}
.row-danger td:first-child {
  border-left: 3px solid var(--neon-red) !important;
}
.row-danger td {
  background: rgba(255, 51, 51, 0.06);
}
.row-success td:first-child {
  border-left: 3px solid var(--neon-green) !important;
}
.row-success td {
  background: rgba(0, 255, 102, 0.06);
}

/* ── SKELETON / HUD BADGE ── */
.skeleton-row {
  height: 12px;
  background: linear-gradient(
    90deg,
    rgba(0, 243, 255, 0.05) 25%,
    rgba(0, 243, 255, 0.2) 50%,
    rgba(0, 243, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 2s infinite linear;
  margin-bottom: 8px;
}
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.hud-badge.warn {
  border: 1px solid var(--neon-red);
  color: var(--neon-red);
  background: rgba(255, 51, 51, 0.15);
  animation: blink-warn 1s infinite alternate;
  font-size: 9px;
  font-weight: bold;
  padding: 2px 6px;
  letter-spacing: 1px;
  margin-left: auto;
}
@keyframes blink-warn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

/* ── GHOST PILL ── */
.ghost-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 1px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.3s;
  margin-bottom: 10px;
}
.ghost-pill .indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ghost-pill.active {
  border-color: var(--neon-red);
  color: var(--neon-red);
  box-shadow: 0 0 10px rgba(255, 51, 51, 0.2);
}
.ghost-pill.active .indicator {
  background: var(--neon-red);
  box-shadow: 0 0 8px var(--neon-red);
  animation: pulse-red 1s infinite alternate;
}
.ghost-pill.passive {
  border-color: var(--neon-gold);
  color: var(--neon-gold);
}
.ghost-pill.passive .indicator {
  background: var(--neon-gold);
  box-shadow: 0 0 5px var(--neon-gold);
  animation: blink-yellow 2s infinite alternate;
}
.ghost-pill.offline {
  color: #888;
  border-color: #444;
}
.ghost-pill.offline .indicator {
  background: #555;
}

/* ── MISC ANIMATIONS ── */
@keyframes pulse-op {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes pulse-red {
  0% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 5px var(--neon-red);
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 15px var(--neon-red);
  }
}
@keyframes blink-yellow {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes orb-pulse {
  0% {
    box-shadow: 0 0 8px var(--neon-pink);
    opacity: 0.8;
  }
  100% {
    box-shadow:
      0 0 18px var(--neon-pink),
      0 0 35px rgba(0, 136, 255, 0.5);
    opacity: 1;
  }
}

.crosshair-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--neon-red) 2px, transparent 2px) 0 0,
    linear-gradient(to bottom, var(--neon-red) 2px, transparent 2px) 0 0,
    linear-gradient(to left, var(--neon-red) 2px, transparent 2px) 100% 0,
    linear-gradient(to bottom, var(--neon-red) 2px, transparent 2px) 100% 0,
    linear-gradient(to right, var(--neon-red) 2px, transparent 2px) 0 100%,
    linear-gradient(to top, var(--neon-red) 2px, transparent 2px) 0 100%,
    linear-gradient(to left, var(--neon-red) 2px, transparent 2px) 100% 100%,
    linear-gradient(to top, var(--neon-red) 2px, transparent 2px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  animation: crosshair-zoom 0.5s ease-out;
  z-index: 10;
}
@keyframes crosshair-zoom {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Login page orb */
.login-orb {
  width: 55px !important;
  height: 55px !important;
  background: var(--neon-blue) !important;
  box-shadow:
    0 0 20px var(--neon-blue),
    0 0 50px rgba(0, 243, 255, 0.4) !important;
  border-radius: 50% !important;
}

/* Quick reply / waveform */
.waveform {
  display: none;
  align-items: center;
  gap: 2px;
  height: 13px;
  margin-right: 8px;
}
.waveform.active {
  display: flex;
}
.waveform span {
  display: block;
  width: 2px;
  background: var(--neon-blue);
  animation: wave 0.6s ease-in-out infinite alternate;
}
@keyframes wave {
  to {
    transform: scaleY(0.3);
  }
}
.quick-reply-btn {
  background: transparent;
  border: none;
  color: var(--neon-blue);
  padding: 4px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.quick-reply-btn:hover {
  color: #fff;
  text-shadow: 0 0 8px var(--neon-blue);
}

/* Micro uptime */
.micro-uptime {
}

/* Ghost mode toggle */
#ext-ghost-mode-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.ghost-mode-btn {
  flex: 1;
  padding: 5px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s;
  text-align: center;
}
.ghost-mode-btn.passive {
  border-color: rgba(255, 170, 0, 0.4);
  color: rgba(255, 170, 0, 0.7);
  background: rgba(255, 170, 0, 0.06);
}
.ghost-mode-btn.passive.sel {
  background: rgba(255, 170, 0, 0.2);
  color: rgba(255, 170, 0, 1);
}
.ghost-mode-btn.active-mode {
  border-color: rgba(255, 51, 51, 0.4);
  color: rgba(255, 51, 51, 0.7);
  background: rgba(255, 51, 51, 0.06);
}
.ghost-mode-btn.active-mode.sel {
  background: rgba(255, 51, 51, 0.2);
  color: rgba(255, 51, 51, 1);
}
#ext-uptime-log {
  max-height: 80px;
  overflow-y: auto;
  border: 1px solid rgba(0, 255, 102, 0.1);
  padding: 4px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 9px;
  color: rgba(0, 255, 102, 0.5);
  line-height: 1.6;
}
#ext-notif-status {
  font-size: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: rgba(0, 255, 102, 0.7);
  background: rgba(0, 255, 102, 0.05);
  margin-bottom: 5px;
}
#ext-notif-status.disabled {
  border-color: rgba(255, 51, 51, 0.3);
  color: rgba(255, 51, 51, 0.6);
  background: rgba(255, 51, 51, 0.04);
}
.fu-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  border: 1px solid rgba(255, 170, 0, 0.15);
  margin-bottom: 4px;
  background: rgba(255, 170, 0, 0.03);
}
.fu-list-item .fu-info {
  font-size: 9px;
  color: rgba(216, 240, 255, 0.6);
  line-height: 1.5;
}
.fu-list-item .fu-time {
  font-size: 9px;
  color: rgba(255, 170, 0, 0.7);
}
.fu-list-item .fu-cancel {
  background: none;
  border: none;
  color: rgba(255, 51, 51, 0.5);
  cursor: pointer;
  font-size: 10px;
  padding: 0 4px;
}
.ext-shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 10px;
}
.ext-shortcut-row kbd {
  background: rgba(0, 136, 255, 0.15);
  border: 1px solid rgba(0, 136, 255, 0.3);
  padding: 1px 5px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  color: rgba(0, 136, 255, 0.9);
}
.ext-shortcut-row .lbl {
  color: rgba(216, 240, 255, 0.4);
}

/* ================================================================
   LEXIE AVATAR PANEL — ADD THIS AT THE BOTTOM OF YOUR style.css
   ================================================================ */

/* ── MAIN CONTAINER ── */
.lexie-avatar-panel {
  position: relative;
  background: rgba(0, 5, 20, 0.9);
  border: 1px solid rgba(0, 243, 255, 0.25);
  padding: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── CORNER BRACKETS ── */
.lap-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 10;
}
.lap-tl {
  top: 0;
  left: 0;
  border-top: 2px solid var(--neon-blue);
  border-left: 2px solid var(--neon-blue);
}
.lap-tr {
  top: 0;
  right: 0;
  border-top: 2px solid var(--neon-blue);
  border-right: 2px solid var(--neon-blue);
}
.lap-bl {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid var(--neon-blue);
  border-left: 2px solid var(--neon-blue);
}
.lap-br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--neon-blue);
  border-right: 2px solid var(--neon-blue);
}

/* ── TOP LABEL BAR ── */
.lap-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  color: rgba(0, 243, 255, 0.5);
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(0, 243, 255, 0.1);
  padding-bottom: 4px;
}
.lap-id-tag {
  color: rgba(0, 243, 255, 0.4);
}
.lap-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
  margin-left: auto;
  animation: lap-dot-blink 2s ease-in-out infinite;
}
.lap-status-dot.speaking {
  background: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink);
  animation: lap-dot-speak 0.2s ease-in-out infinite alternate;
}
.lap-status-text {
  color: var(--neon-green);
  font-size: 8px;
  letter-spacing: 2px;
  transition: color 0.3s;
}
.lap-status-text.speaking {
  color: var(--neon-pink);
}

/* ── AVATAR IMAGE FRAME (FLOATING HOLOGRAM PROTOCOL) ── */
.lap-img-frame {
  position: relative;
  width: 100%;
  height: 140px;
  margin-bottom: 25px; /* Give space for the projector base below */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Completely naked container - NO BORDERS OR TINTS */
  border: none;
  background: transparent;
  overflow: visible; /* Let the beam escape */
  box-shadow: none;
}

/* Remove corner HUD accents */
.lap-img-frame::before,
.lap-img-frame::after {
  display: none;
}

/* Central Light Beam pointing UP */
.lap-scanlines::before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 10%;
  right: 10%;
  height: 140px;
  background: linear-gradient(
    to top,
    rgba(var(--mood-rgba, 0, 243, 255), 0.4) 0%,
    rgba(var(--mood-rgba, 0, 243, 255), 0.05) 50%,
    transparent 100%
  );
  clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
  z-index: 0;
  pointer-events: none;
  animation: projector-flicker 0.2s infinite;
  transition: all 0.5s ease;
}

/* Rotating rings */
.lap-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--mood-rgba, 0, 243, 255), 0.15);
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  transition: border-color 0.5s ease;
}
.lap-ring-outer {
  width: 140px;
  height: 140px;
  border-color: rgba(var(--mood-rgba, 0, 243, 255), 0.12);
  border-style: dashed;
  animation: lap-ring-spin 20s linear infinite;
}
.lap-ring-inner {
  width: 100px;
  height: 100px;
  border-color: rgba(var(--mood-rgba, 0, 243, 255), 0.18);
  animation: lap-ring-spin 10s linear infinite reverse;
}

/* The actual avatar image */
.lap-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Don't crop the user's image */
  object-position: center;

  /* Clean original color with cyan drop pattern */
  mix-blend-mode: screen;
  opacity: 0.95;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease,
    transform 0.2s ease;
  z-index: 5;
  position: relative;

  /* Reliable soft circular mask to completely eliminate hard borders */
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 65%,
    rgba(0, 0, 0, 0) 90%
  );
  mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 65%,
    rgba(0, 0, 0, 0) 90%
  );

  /* True floating bob animation + Breathing combined */
  animation: organic-breathe 4s ease-in-out infinite;
}
.lap-img.speaking {
  /* Removed effects/bobbing as per user request to focus purely on Visemes */
  will-change: transform;
}

@keyframes organic-breathe {
  0%, 100% { transform: translateY(-5px) scaleX(1) scaleY(1); }
  50% { transform: translateY(-15px) scaleX(1.02) scaleY(0.98); } /* Subtle chest expansion/compression combined with float */
}

@keyframes lap-img-speak-bob {
  0% { transform: translateY(-5px) rotate(0deg) scale(1); }
  33% { transform: translateY(-10px) rotate(1.5deg) scale(1.01); }
  50% { transform: translateY(-15px) rotate(0deg) scale(1); }
  66% { transform: translateY(-10px) rotate(-1.5deg) scale(1.01); }
  100% { transform: translateY(-5px) rotate(0deg) scale(1); }
}

@keyframes lap-img-pulse-soft {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.01);
  }
}

/* ── AVATAR EMOTION FILTERS & ANIMATIONS ── */
.lap-img.emotion-thinking {
  animation: lap-anim-thinking 6s ease-in-out infinite;
}
.lap-img.emotion-alert {
  animation: lap-anim-alert 0.8s ease-in-out infinite;
}
.lap-img.emotion-happy {
  animation: lap-anim-happy 3s ease-in-out infinite;
}
.lap-img.emotion-sad {
  animation: lap-anim-sad 6s ease-in-out infinite;
}
.lap-img.emotion-angry {
  animation: lap-anim-angry 1.5s ease-in-out infinite;
}
.lap-img.emotion-love {
  animation: lap-anim-love 5s ease-in-out infinite;
}
.lap-img.emotion-teasing {
  animation: lap-anim-teasing 3.5s ease-in-out infinite;
}
.lap-img.emotion-seductive {
  animation: lap-anim-seductive 5s ease-in-out infinite;
}

/* Base override for emotion + speaking matrix */
.lap-img.speaking.emotion-happy { animation: none; }
.lap-img.speaking.emotion-sad { animation: none; }
.lap-img.speaking.emotion-angry { animation: none; }
.lap-img.speaking.emotion-alert { animation: none; }
.lap-img.speaking.emotion-thinking { animation: none; }
.lap-img.speaking.emotion-love { animation: none; }
.lap-img.speaking.emotion-teasing { animation: none; }
.lap-img.speaking.emotion-seductive { animation: none; }

/* Dynamic Emotion Keyframes */
@keyframes lap-anim-happy {
  0%, 100% { transform: translateY(-5px) scale(1) rotate(0deg); }
  25% { transform: translateY(-18px) scale(1.02) rotate(2deg); }
  50% { transform: translateY(-8px) scale(1.01) rotate(-1deg); }
  75% { transform: translateY(-16px) scale(1.03) rotate(1deg); }
}

@keyframes lap-anim-sad {
  0%, 100% { transform: translateY(0px) scale(0.98) rotate(0deg); }
  50% { transform: translateY(-4px) scale(0.99) rotate(0.5deg); }
}

@keyframes lap-anim-angry {
  0%, 100% { transform: translateY(-10px) scale(1.01) rotate(0deg); }
  25% { transform: translateY(-12px) scale(1.02) rotate(-1deg); }
  50% { transform: translateY(-8px) scale(1.01) rotate(1deg); }
  75% { transform: translateY(-11px) scale(1.02) rotate(-2deg); }
}

@keyframes lap-anim-alert {
  0%, 100% { transform: translateY(-10px) scale(1.03); }
  50% { transform: translateY(-15px) scale(1.04); }
}

@keyframes lap-anim-thinking {
  0%, 100% { transform: translateY(-5px) rotate(0deg); }
  30% { transform: translateY(-8px) rotate(-2deg) translateX(-3px); }
  70% { transform: translateY(-4px) rotate(1deg) translateX(2px); }
}

@keyframes lap-anim-love {
  0%, 100% { transform: translateY(-5px) scale(1) rotate(0deg); }
  50% { transform: translateY(-12px) scale(1.02) rotate(2deg) translateX(3px); }
}

@keyframes lap-anim-teasing {
  0%, 100% { transform: translateY(-8px) rotate(0deg); }
  25% { transform: translateY(-14px) rotate(3deg) translateX(4px); }
  50% { transform: translateY(-8px) rotate(0deg); }
  75% { transform: translateY(-14px) rotate(-3deg) translateX(-4px); }
}

@keyframes lap-anim-seductive {
  0%, 100% { transform: translateY(-2px) scale(1) rotate(0deg); }
  50% { transform: translateY(-10px) scale(1.03) rotate(-1deg) translateX(1px); }
}

/* Fast Micro-Scanlines (Not a slow TV) */
.lap-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(var(--mood-rgba, 0, 243, 255), 0.2) 1px,
    rgba(var(--mood-rgba, 0, 243, 255), 0.2) 2px
  );
  pointer-events: none;
  z-index: 3;
  opacity: 0.5;
  transition: all 0.5s ease;
}

/* Fast digital scanner bar (No TV scroll) */
.lap-scanlines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px rgba(var(--mood-rgba, 0, 243, 255), 1);
  animation: digital-scan 2.5s ease-in-out infinite;
}

/* Holographic Projector Base Puddle */
.lap-holo-tint {
  display: block;
  position: absolute;
  bottom: -25px; /* Underneath the image frame */
  left: 20%;
  right: 20%;
  height: 15px; /* Creates a flat elliptical disc */
  background: radial-gradient(
    ellipse at center,
    rgba(var(--mood-rgba, 0, 243, 255), 0.8) 0%,
    rgba(var(--mood-rgba, 0, 80, 200), 0.4) 40%,
    transparent 80%
  );
  box-shadow: 0 0 20px 5px rgba(var(--mood-rgba, 0, 243, 255), 0.5);
  z-index: 2;
  border-radius: 50%;
  animation: projector-pulse-disk 2s infinite alternate;
  transition: all 0.5s ease;
}

/* Speaking flash overlay */
.lap-speak-flash {
  position: absolute;
  inset: 0;
  background: rgba(0, 243, 255, 0);
  pointer-events: none;
  z-index: 6;
  transition: background 0.1s;
}
.lap-speak-flash.active {
  animation: lap-flash 0.15s ease-in-out infinite alternate;
}

/* Name strip at bottom of image */
.lap-name-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  padding: 12px 6px 4px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  z-index: 7;
}
.lap-name {
  font-family: "Orbitron", monospace;
  font-size: 11px;
  color: var(--neon-blue);
  letter-spacing: 3px;
  text-shadow: 0 0 8px var(--neon-blue);
}
.lap-ver {
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  color: rgba(0, 243, 255, 0.5);
  letter-spacing: 1px;
}

/* ── SPECTRUM BAR ── */
.lap-spectrum-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 243, 255, 0.1);
  padding: 3px 6px;
}
.lap-spectrum-label {
  font-family: "Share Tech Mono", monospace;
  font-size: 7px;
  color: rgba(0, 243, 255, 0.4);
  letter-spacing: 1px;
  flex-shrink: 0;
}
.lap-spectrum-bar-wrap {
  flex: 1;
  height: 28px;
  position: relative;
  overflow: hidden;
}
#lexie-spectrum-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ── STATUS INFO ROW ── */
.lap-info-row {
  display: flex;
  gap: 4px;
  margin-bottom: 5px;
}
.lap-info-cell {
  flex: 1;
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid rgba(0, 229, 255, 0.12);
  padding: 3px 5px;
  text-align: center;
}
.lap-info-label {
  font-size: 6px;
  color: rgba(0, 243, 255, 0.35);
  letter-spacing: 1px;
  font-family: "Share Tech Mono", monospace;
}
.lap-info-val {
  font-size: 8px;
  color: var(--neon-blue);
  font-family: "Orbitron", monospace;
  letter-spacing: 1px;
  margin-top: 1px;
}

/* ── VOICE ACTIVITY DOTS ── */
.lap-voice-dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  height: 8px;
  align-items: flex-end;
  margin-top: 2px;
}
.lap-voice-dots span {
  display: block;
  width: 3px;
  background: rgba(var(--mood-rgba, 0, 243, 255), 0.2);
  border-radius: 1px;
  height: 3px;
  transition: height 0.1s ease, background 0.3s;
}
.lap-voice-dots.active span {
  background: rgba(var(--mood-rgba, 0, 243, 255), 0.9);
  box-shadow: 0 0 5px rgba(var(--mood-rgba, 0, 243, 255), 1);
}
.lap-voice-dots.active span:nth-child(1) {
  animation: lap-dot-bar 0.4s 0s ease-in-out infinite alternate;
}
.lap-voice-dots.active span:nth-child(2) {
  animation: lap-dot-bar 0.4s 0.05s ease-in-out infinite alternate;
}
.lap-voice-dots.active span:nth-child(3) {
  animation: lap-dot-bar 0.4s 0.1s ease-in-out infinite alternate;
}
.lap-voice-dots.active span:nth-child(4) {
  animation: lap-dot-bar 0.4s 0.15s ease-in-out infinite alternate;
}
.lap-voice-dots.active span:nth-child(5) {
  animation: lap-dot-bar 0.4s 0.2s ease-in-out infinite alternate;
}
.lap-voice-dots.active span:nth-child(6) {
  animation: lap-dot-bar 0.4s 0.15s ease-in-out infinite alternate;
}
.lap-voice-dots.active span:nth-child(7) {
  animation: lap-dot-bar 0.4s 0.1s ease-in-out infinite alternate;
}
.lap-voice-dots.active span:nth-child(8) {
  animation: lap-dot-bar 0.4s 0.05s ease-in-out infinite alternate;
}
.lap-voice-dots.active span:nth-child(9) {
  animation: lap-dot-bar 0.4s 0s ease-in-out infinite alternate;
}
.lap-voice-dots.active span:nth-child(10) {
  animation: lap-dot-bar 0.4s 0.05s ease-in-out infinite alternate;
}

/* ── KEYFRAMES ── */
@keyframes lap-ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes lap-dot-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes lap-dot-speak {
  0% {
    box-shadow: 0 0 6px var(--neon-pink);
    transform: scale(1.02);
  }
  100% {
    box-shadow:
      0 0 14px var(--neon-pink),
      0 0 25px rgba(255, 0, 102, 0.4);
    transform: scale(1.3);
  }
}
@keyframes lap-holo-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.02);
  }
}
@keyframes digital-scan {
  0% {
    top: 0%;
    opacity: 1;
  }
  50% {
    top: 100%;
    opacity: 0;
  }
  50.1% {
    top: 0%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@keyframes projector-flicker {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.9;
  }
}
@keyframes lap-holo-glitch-idle {
  0%,
  98%,
  100% {
    opacity: 0.9;
    transform: translateX(0);
  }
  99% {
    opacity: 0.6;
    transform: translateX(-2px);
    filter: sepia(1) hue-rotate(180deg) saturate(4);
  }
  99.5% {
    opacity: 0.8;
    transform: translateX(2px);
    filter: sepia(1) hue-rotate(110deg) saturate(4);
  }
}
@keyframes lap-img-pulse {
  0% {
    filter: sepia(1) hue-rotate(150deg) saturate(5.5) brightness(1.2)
      contrast(1.8) drop-shadow(0 0 10px rgba(0, 255, 255, 0.8));
  }
  100% {
    filter: sepia(1) hue-rotate(150deg) saturate(7) brightness(1.5)
      contrast(2.2) drop-shadow(0 0 20px rgba(0, 255, 255, 1));
  }
}
@keyframes true-holo-float {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(-15px);
  }
}
@keyframes projector-pulse-disk {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.05);
    opacity: 1;
  }
}
@keyframes lap-scan-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 1000px;
  }
}
@keyframes lap-scanner-bar {
  0% {
    top: -20%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 120%;
    opacity: 0;
  }
}
@keyframes lap-flash {
  0% {
    background: rgba(var(--mood-rgba, 0, 243, 255), 0);
  }
  100% {
    background: rgba(var(--mood-rgba, 0, 243, 255), 0.08); /* slight boost */
  }
}
@keyframes lap-holo-shift {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lap-dot-bar {
  0% {
    height: 2px;
    background: rgba(0, 243, 255, 0.3);
  }
  100% {
    height: 8px;
    background: rgba(0, 243, 255, 0.9);
    box-shadow: 0 0 4px var(--neon-blue);
  }
}

/* ── PORT CONNECTIONS ── */
.port-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 8px;
  color: rgba(0, 200, 240, 0.6);
  letter-spacing: 1px;
}
.port-row .port-icon {
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  flex-shrink: 0;
}
.port-row .port-label {
  width: 65px;
}
.port-row .port-track {
  flex: 1;
  height: 3px;
  background: rgba(0, 200, 240, 0.1);
}
.port-row .port-fill {
  height: 100%;
  background: var(--neon-blue);
  transition:
    width 0.8s ease,
    background 0.3s;
}
.port-row.status-ok .port-fill {
  background: #00ff88;
  box-shadow: 0 0 5px #00ff88;
}
.port-row.status-warn .port-fill {
  background: #ffaa00;
  box-shadow: 0 0 5px #ffaa00;
}
.port-row.status-error .port-fill {
  background: #ff3344;
  box-shadow: 0 0 5px #ff3344;
}

/* ── ANIMATED DATA WIRES — replace existing .data-wire ───── */
.data-wire {
  position: absolute;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 6px,
    rgba(0, 200, 240, 0.5) 6px,
    rgba(0, 200, 240, 0.5) 10px
  );
  background-size: 16px 1px;
  animation: wire-flow 1.5s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes wire-flow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 32px 0;
  }
}

/* ── GLOBE SCAN LINE (horizontal sweep) ──────────────────── */
#holo-globe-core::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 200, 240, 0.4),
    transparent
  );
  animation: scan-sweep 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
}

@keyframes scan-sweep {
  0% {
    top: 5%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 95%;
    opacity: 0;
  }
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* --- 🚀 JARVIS OMEGA UPGRADE --- */
.hud-panel.brackets { backdrop-filter: blur(8px); background: rgba(0, 10, 20, 0.6) !important; border: 1px solid rgba(0, 243, 255, 0.2); box-shadow: 0 0 15px rgba(0,243,255,0.1) inset, 0 0 10px rgba(0,0,0,0.8); position:relative; overflow:hidden; } .hud-panel.brackets::before { content: ''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; background: linear-gradient(45deg, transparent 40%, rgba(0,243,255,0.3) 50%, transparent 60%); z-index:-1; animation: jarvis-scan 4s linear infinite; } @keyframes jarvis-scan { 0% { background-position: -200px -200px; } 100% { background-position: 400px 400px; } } .side-hud-left, .side-hud-right { animation: slide-hud 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes slide-hud { 0% { opacity: 0; transform: translateY(50px) scale(0.9); filter: blur(10px); } 100% { opacity: 0.8; transform: translateY(0) scale(1); filter: blur(0); } } #holo-globe-core { box-shadow: inset 0 0 100px rgba(0,0,0,0.9); } .reactor-core { filter: hue-rotate(15deg); }
/* --- 🚀 JARVIS OMEGA UPGRADE CSS --- */
.hud-panel.brackets { 
    backdrop-filter: blur(8px); 
    background: rgba(0, 10, 20, 0.6) !important; 
    border: 1px solid rgba(0, 243, 255, 0.2); 
    box-shadow: 0 0 15px rgba(0,243,255,0.1) inset, 0 0 10px rgba(0,0,0,0.8); 
    position: relative; 
    overflow: hidden; 
} 
.hud-panel.brackets::before { 
    content: ''; 
    position: absolute; 
    top: -2px; left: -2px; right: -2px; bottom: -2px; 
    background: linear-gradient(45deg, transparent 40%, rgba(0,243,255,0.3) 50%, transparent 60%); 
    z-index: -1; 
    animation: jarvis-scan 4s linear infinite; 
} 
@keyframes jarvis-scan { 
    0% { background-position: -200px -200px; } 
    100% { background-position: 400px 400px; } 
} 
#holo-globe-core { 
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9); 
} 
.reactor-core { 
    filter: hue-rotate(15deg); 
}
#frequency-node-bars div {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
\n
/* --- 🚀 JARVIS OMEGA UPGRADE: Master Terminal UI & Holographic Lexie --- */
#lexie-avatar-panel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 200px;
    z-index: 100;
    pointer-events: auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.lap-img {
    mix-blend-mode: screen;
    opacity: 0.8;
}
.lap-holo-tint {
    mix-blend-mode: color-dodge;
}