/* ============================================================
   ORION DESIGN SYSTEM — N1 NEXUS BUNKER VIP
   Obsidian Glass · The Data Line · Nodal Micro-interactions
   ============================================================ */

/* ====== ORION DESIGN TOKENS ====== */
:root {
  --obsidian: #0a0a0c;
  --obsidian-lighter: #0e0e12;
  --obsidian-surface: #111115;
  --surface-1: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.10);
  --electric-blue: #00d2ff;
  --violet-core: #6c5ce7;
  --neon-pulse: #ff2d78;
  --text-crisp: #f0eff5;
  --text-dim: #7a7894;
  --text-muted: rgba(255, 255, 255, 0.35);
  --data-line: 1px solid rgba(0, 210, 255, 0.10);
  --data-line-hover: rgba(0, 210, 255, 0.30);
  --data-line-glow: 0 0 20px rgba(0, 210, 255, 0.06);
  --glass-blur: blur(24px);
  --glass-blur-sm: blur(12px);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ====== BASE ====== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: var(--obsidian);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(0, 210, 255, 0.25);
  color: #fff;
}

/* ====== OBSIDIAN GLASS LAYERS ====== */
.glass-1 { background: var(--surface-1); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--data-line); }
.glass-2 { background: var(--surface-2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--data-line); }
.glass-3 { background: var(--surface-3); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, 0.12); }

/* ====== THE DATA LINE ====== */
.data-line {
  border: var(--data-line);
  transition: border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.data-line:hover {
  border-color: var(--data-line-hover);
  box-shadow: var(--data-line-glow);
}
.data-line:focus-visible {
  border-color: var(--electric-blue);
  box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.15), var(--data-line-glow);
  outline: none;
}

/* ====== NODAL MICRO-INTERACTIONS ====== */
.nodal {
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo);
}
.nodal:hover {
  transform: translateY(-1px);
}
.nodal:active {
  transform: translateY(0px) scale(0.98);
}

/* ====== CUSTOM SCROLLBAR ====== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(108, 92, 231, 0.2); border-radius: 3px; transition: background 0.3s; }
::-webkit-scrollbar-thumb:hover { background: rgba(108, 92, 231, 0.4); }
.styled-scroll::-webkit-scrollbar { width: 4px; }
.styled-scroll::-webkit-scrollbar-thumb { background: rgba(108, 92, 231, 0.15); border-radius: 2px; }

/* ====== AGENT CARDS ====== */
.agent-card {
  position: relative;
  isolation: isolate;
}
.agent-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, transparent 40%, rgba(0, 210, 255, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-expo);
  pointer-events: none;
}
.agent-card:hover::before {
  opacity: 1;
}
.agent-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1rem;
  padding: 1px;
  background: linear-gradient(135deg, transparent 0%, var(--violet-core) 25%, var(--electric-blue) 50%, transparent 75%);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-expo);
  pointer-events: none;
}
.agent-card:hover::after {
  opacity: 0.7;
  animation: scanline 2.5s linear infinite;
}
.agent-card .agent-icon {
  position: relative;
  isolation: isolate;
}
.agent-card .agent-icon::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
  filter: blur(12px);
  z-index: -1;
  transition: opacity 0.4s var(--ease-out-expo);
}
.agent-card:hover .agent-icon::after {
  opacity: 0.5;
}

/* ====== DETAIL PANEL ====== */
#detail-panel {
  animation: fadeIn 0.25s var(--ease-out-expo);
}
#detail-panel aside {
  animation: slideInLeft 0.3s var(--ease-out-expo);
}
#detail-panel main {
  animation: fadeIn 0.35s var(--ease-out-expo);
}

.detail-tab {
  position: relative;
  transition: background 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo);
}
.detail-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2.5px;
  height: 60%;
  border-radius: 0 2px 2px 0;
  background: var(--electric-blue);
  transition: transform 0.3s var(--ease-out-expo);
}
.detail-tab.active::before {
  transform: translateY(-50%) scaleY(1);
}
.detail-tab .tab-dot {
  transition: opacity 0.3s var(--ease-out-expo);
}

/* ====== CHAT MESSAGES ====== */
.chat-msg {
  animation: msgSlide 0.25s var(--ease-out-expo);
}
.chat-msg > div {
  position: relative;
  transition: box-shadow 0.3s var(--ease-out-expo);
}
.chat-msg > div::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5px;
  border-radius: 2px;
  opacity: 0.4;
}
.chat-msg:first-child > div::before {
  opacity: 0.7;
}

/* ====== CODE SNIPPETS ====== */
.snippet-card {
  transition: border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.snippet-card:hover {
  border-color: rgba(0, 210, 255, 0.2);
  box-shadow: var(--data-line-glow);
}
.snippet-card pre {
  margin: 0;
  background: transparent !important;
}
.snippet-card code {
  font-family: 'JetBrains Mono', monospace !important;
}
.snippet-card .snippet-glow {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--violet-core), var(--electric-blue));
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-expo);
}
.snippet-card:hover .snippet-glow {
  opacity: 0.5;
}

/* ====== BUTTONS ====== */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s var(--ease-out-expo), transform 0.2s var(--ease-out-expo);
}
.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15);
}
.btn-primary:active {
  transform: translateY(0) scale(0.97);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-expo);
}
.btn-primary:hover::after {
  opacity: 1;
}

.btn-ghost {
  transition: background 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo);
}

/* ====== INPUTS ====== */
input, textarea, select {
  transition: border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--electric-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.08), 0 0 20px rgba(0, 210, 255, 0.04) !important;
  outline: none;
}

/* ====== HEADER ====== */
.bunker-header {
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.bunker-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--electric-blue) 50%, transparent 100%);
  opacity: 0.15;
}

/* ====== STATUS PULSE ====== */
.status-pulse {
  position: relative;
}
.status-pulse .ping {
  animation: pulse-ring 2s var(--ease-out-expo) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ====== SKILLS TAGS ====== */
.skill-tag {
  transition: all 0.25s var(--ease-out-expo);
}
.skill-tag:hover {
  border-color: rgba(0, 210, 255, 0.25);
  background: rgba(0, 210, 255, 0.05);
  transform: translateY(-1px);
}

/* ====== LOGIN GLOW ====== */
.login-glow {
  animation: loginGlow 3s ease-in-out infinite alternate;
}
@keyframes loginGlow {
  from { opacity: 0.12; transform: scale(1); }
  to { opacity: 0.25; transform: scale(1.05); }
}

/* ====== ANIMATIONS ====== */
@keyframes glitch {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-3px, 2px) skewX(-1deg); }
  20% { transform: translate(3px, -1px) skewX(1deg); }
  30% { transform: translate(-1px, 3px) skewX(-2deg); }
  40% { transform: translate(1px, -2px) skewX(2deg); }
  50% { transform: translate(-3px, 1px) skewX(-1deg); }
  60% { transform: translate(2px, -3px) skewX(1deg); }
  70% { transform: translate(-2px, 3px) skewX(-2deg); }
  80% { transform: translate(3px, -1px) skewX(2deg); }
  90% { transform: translate(-1px, 2px) skewX(-1deg); }
}
.glitch { animation: glitch 0.35s ease-in-out 3; }

@keyframes scanline {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes msgSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) translateX(-50%) scale(0.95); }
  to { opacity: 1; transform: translateY(0) translateX(-50%) scale(1); }
}

.modal-content:not(.hidden) > div:last-child { animation: modalIn 0.3s var(--ease-out-expo); }
#toast:not(.hidden) { animation: toastIn 0.35s var(--ease-elastic); }

.screen { transition: opacity 0.3s ease; }

/* ====== ACCESSIBILITY ====== */
:focus-visible {
  outline: 2px solid var(--electric-blue);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
  .agent-card::after, .agent-card::before,
  .agent-card .agent-icon::after,
  .bunker-header::after { display: none; }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  #detail-panel aside {
    width: 100% !important;
    max-height: 50vh;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  #detail-panel .flex {
    flex-direction: column;
  }
}