:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #0d0d1a;
  --bg-panel: #111122;
  --bg-card: #151530;
  --border-glow: rgba(0, 255, 180, 0.15);
  --accent-cyan: #00e5ff;
  --accent-green: #00ffb4;
  --accent-purple: #a855f7;
  --accent-red: #ff4057;
  --accent-yellow: #ffd600;
  --text-primary: #e0e0f0;
  --text-secondary: #8888aa;
  --text-dim: #555577;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'IBM Plex Sans', sans-serif;
  overflow: hidden;
  height: 100vh;
}

#root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  body {
    overflow: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
  #root {
    height: auto;
    min-height: 100vh;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 180, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 180, 0.4);
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 180, 0.3), 0 0 20px rgba(0, 255, 180, 0.1); }
  50% { text-shadow: 0 0 20px rgba(0, 255, 180, 0.6), 0 0 40px rgba(0, 255, 180, 0.2); }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 180, 0.1); }
  50% { box-shadow: 0 0 15px rgba(0, 255, 180, 0.2); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes runPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 180, 0.3); }
  50% { box-shadow: 0 0 25px rgba(0, 255, 180, 0.6), 0 0 50px rgba(0, 255, 180, 0.2); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

.border-glow {
  animation: borderGlow 3s ease-in-out infinite;
}

.toast-enter {
  animation: slideInRight 0.3s ease-out;
}

.toast-error {
  animation: shake 0.5s ease-out;
}

.log-enter {
  animation: slideInLeft 0.2s ease-out;
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.run-pulse {
  animation: runPulse 1.5s ease-in-out infinite;
}

.shimmer {
  background: linear-gradient(90deg, transparent, rgba(0,255,180,0.05), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: 8px;
}

.btn-glow {
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}
.btn-glow:hover {
  box-shadow: 0 0 20px rgba(0, 255, 180, 0.3);
}

input, textarea, select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-glow);
  color: var(--text-primary);
  font-family: 'IBM Plex Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
}

@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  
  /* Allow main content area to expand naturally on mobile */
  main {
    overflow: visible !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Stack markdown panel sidebar and viewer vertically */
  .md-panel-wrapper {
    flex-direction: column !important;
    overflow: visible !important;
  }
  
  .md-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-height: 200px !important;
    border-radius: 8px 8px 0 0 !important;
  }
  
  .md-viewer {
    border-radius: 0 0 8px 8px !important;
    min-height: 300px !important;
  }
  
  /* Stack agent runner panels vertically */
  .agent-split-view {
    flex-direction: column !important;
    overflow: visible !important;
  }
  
  .agent-split-view > div {
    min-height: 250px !important;
  }
  
  /* WAT panel */
  .wat-panel-root {
    min-height: 400px !important;
  }
}

/* ─── WAT Syntax Highlighting ─── */
.wat-comment { color: #555577; font-style: italic; }
.wat-keyword { color: #00e5ff; }
.wat-type    { color: #a855f7; }
.wat-instr   { color: #00ffb4; }
.wat-string  { color: #ffd600; }
.wat-number  { color: #ff8a65; }
.wat-paren   { color: #555577; }
.wat-ident   { color: #8888cc; }

@media (max-width: 768px) {
  
  /* Settings panel */
  .settings-panel-root {
    max-width: 100% !important;
  }
}

@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}

/* ─── Pipes Panel ─── */
@keyframes flowRight {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes byteFlash {
  0% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.8) translateX(30px); }
}

@keyframes pipeDataFlow {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

.pipe-flow-line {
  background: linear-gradient(90deg, transparent, rgba(0,255,180,0.4), rgba(0,229,255,0.4), transparent);
  background-size: 200% 100%;
  animation: flowRight 1.5s linear infinite;
}

.pipe-node {
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.2s;
  cursor: grab;
  user-select: none;
}
.pipe-node:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(0,229,255,0.15);
}
.pipe-node.active {
  border-color: var(--accent-green);
  box-shadow: 0 0 20px rgba(0,255,180,0.2);
}

.fd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
}
.fd-badge.stdin { background: rgba(0,229,255,0.12); color: #00e5ff; border: 1px solid rgba(0,229,255,0.25); }
.fd-badge.stdout { background: rgba(0,255,180,0.12); color: #00ffb4; border: 1px solid rgba(0,255,180,0.25); }
.fd-badge.stderr { background: rgba(255,64,87,0.12); color: #ff4057; border: 1px solid rgba(255,64,87,0.25); }

.byte-stream-viewer {
  background: #060610;
  border: 1px solid rgba(0,255,180,0.08);
  border-radius: 6px;
  padding: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  overflow: auto;
  white-space: pre;
  max-height: 200px;
}
.byte-stream-viewer .hex { color: #00ffb4; }
.byte-stream-viewer .ascii { color: #00e5ff; }
.byte-stream-viewer .offset { color: #333355; }
.byte-stream-viewer .separator { color: #222244; }

.pipeline-canvas {
  position: relative;
  flex: 1;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,255,180,0.02) 0%, transparent 70%),
    linear-gradient(rgba(0,255,180,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,180,0.03) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px, 20px 20px;
}

.pipes-panel-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

@media (max-width: 768px) {
  .pipes-panel-root {
    min-height: 500px !important;
  }
  .pipe-split-view {
    flex-direction: column !important;
    overflow: visible !important;
  }
  .pipe-split-view > div {
    min-height: 200px !important;
  }
}