@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    --canvas-bg: #f0f2f5;
    --panel-bg: #ffffff;
    --panel-bg-secondary: #f8f9fa;
    --border-color: #d0d7de;
    --border-color-light: #e1e4e8;
    --text-primary: #1f2328;
    --text-secondary: #656d76;
    --text-tertiary: #8c959f;
    --accent-blue: #0969da;
    --accent-blue-light: #ddf4ff;
    --accent-green: #1a7f37;
    --accent-red: #cf222e;
    --accent-amber: #9a6700;
    --accent-purple: #8250df;
    --node-source: #0969da;
    --node-build: #9a6700;
    --node-deploy: #1a7f37;
    --node-test: #8250df;
    --node-approval: #bc4c00;
    --node-custom: #6e7781;
    --line-active: #0969da;
    --line-success: #1a7f37;
    --line-pending: #d0d7de;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;

    --canvas-bg: #0d1117;
    --panel-bg: #161b22;
    --panel-bg-secondary: #21262d;
    --border-color: #30363d;
    --border-color-light: #21262d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --text-tertiary: #6e7681;
    --accent-blue: #58a6ff;
    --accent-blue-light: #388bfd;
    --accent-green: #3fb950;
    --accent-red: #f85149;
    --accent-amber: #d29922;
    --accent-purple: #bc8cff;
    --node-source: #58a6ff;
    --node-build: #d29922;
    --node-deploy: #3fb950;
    --node-test: #bc8cff;
    --node-approval: #f0883e;
    --node-custom: #8b949e;
    --line-active: #58a6ff;
    --line-success: #3fb950;
    --line-pending: #30363d;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
  }
}

/* Dot grid background */
.dot-grid-bg {
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, #d0d7de 1px, transparent 1px);
  background-size: 20px 20px;
}

.dark .dot-grid-bg {
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, #30363d 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Animated flowing line */
.flowing-line {
  stroke-dasharray: 8 4;
  animation: flowLine 0.8s linear infinite;
}

@keyframes flowLine {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -24;
  }
}

/* Running status pulse */
.running-pulse {
  animation: runningPulse 1.5s ease-in-out infinite;
}

@keyframes runningPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.5;
  }
}

/* Glow effect for active connections */
.glow-line {
  filter: drop-shadow(0 0 2px rgba(9, 105, 218, 0.4));
}

.dark .glow-line {
  filter: drop-shadow(0 0 3px rgba(88, 166, 255, 0.5));
}

/* Node hover lift - subtle */
.node-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.node-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Scrollbar styling */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #d0d7de;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #8c959f;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #30363d;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

/* Minimap styling */
.minimap-bg {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.dark .minimap-bg {
  background: rgba(22, 27, 34, 0.95);
  border-color: var(--border-color);
}

/* Tab indicator animation */
.tab-indicator {
  transition: left 0.3s ease, width 0.3s ease;
}

/* Draggable item ghost */
.dragging-ghost {
  opacity: 0.8;
  transform: rotate(2deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Panel transitions */
.panel-transition {
  transition: transform 0.3s ease, width 0.3s ease;
}

/* Flow particle on line */
@keyframes flowParticle {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

.flow-particle {
  animation: flowParticle 2s linear infinite;
  offset-path: path('M0,0 C50,0 50,50 100,50');
}

/* Node selection ring - subtle */
@keyframes selectionRing {
  0% {
    box-shadow: 0 0 0 0px rgba(9, 105, 218, 0.25);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(9, 105, 218, 0.25);
  }
}

.selection-ring {
  animation: selectionRing 2s ease-in-out infinite;
  box-shadow: 0 0 0 1.5px var(--accent-blue);
}

/* Button hover effects */
.btn-primary {
  background: var(--accent-blue);
  color: white;
  transition: opacity 0.15s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

/* Responsive panel collapse */
@media (max-width: 1280px) {
  .left-panel {
    width: 48px !important;
  }
}

/* Tab content fade-in animation */
.tab-content-fade {
  animation: tabContentFadeIn 200ms ease-out;
}

@keyframes tabContentFadeIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus ring for inputs - thinner */
input:focus,
textarea:focus {
  outline: none;
  ring: 1px;
  ring-color: rgba(9, 105, 218, 0.25);
}

/* Script editor styling */
.script-editor {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
}

/* Context menu styling */
.context-menu {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  padding: 4px;
  min-width: 160px;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.context-menu-item:hover {
  background: var(--panel-bg-secondary);
}

.context-menu-item-danger {
  color: var(--accent-red);
}

.context-menu-item-danger:hover {
  background: rgba(207, 34, 46, 0.08);
}

/* ---------- 文档页 Markdown 排版 ---------- */
.md-body { font-size: 13px; line-height: 1.75; color: var(--text-primary); }
.md-body h1 { font-size: 20px; font-weight: 700; margin: 24px 0 12px; }
.md-body h2 { font-size: 16px; font-weight: 700; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color-light); scroll-margin-top: 16px; }
.md-body h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; scroll-margin-top: 16px; }
.md-body h4 { font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.md-body p { margin: 8px 0; color: var(--text-secondary); }
.md-body strong { color: var(--text-primary); font-weight: 600; }
.md-body ul, .md-body ol { margin: 8px 0; padding-left: 22px; color: var(--text-secondary); }
.md-body li { margin: 4px 0; }
.md-body a { color: var(--accent-blue); text-decoration: none; }
.md-body a:hover { text-decoration: underline; }
.md-body blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--accent-blue); background: var(--panel-bg-secondary); border-radius: 0 6px 6px 0; color: var(--text-secondary); }
.md-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--panel-bg-secondary); border: 1px solid var(--border-color-light); border-radius: 4px; padding: 1px 5px; color: var(--accent-purple); }
.md-body pre { margin: 10px 0; padding: 12px 14px; background: var(--panel-bg-secondary); border: 1px solid var(--border-color-light); border-radius: 8px; overflow-x: auto; }
.md-body pre code { background: transparent; border: none; padding: 0; color: var(--text-primary); font-size: 11.5px; line-height: 1.6; }
.md-body table { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 12px; }
.md-body th { text-align: left; padding: 7px 10px; background: var(--panel-bg-secondary); color: var(--text-tertiary); font-weight: 600; border: 1px solid var(--border-color-light); white-space: nowrap; }
.md-body td { padding: 6px 10px; border: 1px solid var(--border-color-light); color: var(--text-secondary); vertical-align: top; }
.md-body tr:nth-child(even) td { background: color-mix(in srgb, var(--panel-bg-secondary) 45%, transparent); }
.md-body hr { border: none; border-top: 1px solid var(--border-color-light); margin: 18px 0; }