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

/* ═══════════════════════════════════════════
   shadcn/ui CSS 变量体系（由 ThemeContext 动态切换）
   ═══════════════════════════════════════════ */
@layer base {
  :root {
    --background: 222 47% 5%;
    --foreground: 210 40% 98%;
    --card: 222 47% 8%;
    --card-foreground: 210 40% 98%;
    --popover: 222 47% 8%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222 47% 5%;
    --secondary: 217 33% 17%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    --accent: 217 33% 17%;
    --accent-foreground: 210 40% 98%;
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 212 68% 58%;
    --radius: 0.75rem;
    --color-temp:   211 85% 52%;
    --color-gas:    252 65% 58%;
    --color-valve:  32  90% 52%;
    --color-struct: 160 55% 42%;
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
    --transition-smooth: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@layer base {
  * {
    @apply border-border;
    box-sizing: border-box;
  }
  button {
    background-color: transparent;
    background-image: none;
    color: inherit;
    border: 0;
  }
  body {
    background: #000a1e;
    color: #a8d8ff;
    min-height: 100vh;
    font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
}

/* ═══════════════════════════════════════════
   Apple 风格工具类（用于浅色主题模块）
   ═══════════════════════════════════════════ */
@layer utilities {
  .card-glass {
    background-color: rgba(255,255,255,0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: var(--shadow-sm);
  }
  .card-solid {
    background-color: #ffffff;
    border: 1px solid #e8e8ed;
    box-shadow: var(--shadow-sm);
  }
  .card-elevated {
    background-color: #ffffff;
    border: 1px solid rgba(232,232,237,0.6);
    box-shadow: var(--shadow-md);
  }
  .sidebar-bg {
    background-color: rgba(248,248,250,0.98);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }
  .text-gradient-primary {
    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(252 70% 58%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .list-card {
    background-color: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.18s ease;
  }
  .list-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .list-card-active {
    background-color: #f0f7ff;
    border-color: rgba(10,122,255,0.3);
    box-shadow: 0 2px 10px rgba(10,122,255,0.10);
  }
}

/* ═══════════════════════════════════════════
   太空舱主题 CSS — 动画关键帧
   ═══════════════════════════════════════════ */

@keyframes space-border-scan {
  0%   { left: -100%; }
  100% { left: 200%; }
}

@keyframes space-pulse {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 10px rgba(0,212,255,0.2); }
  50%       { opacity: 1;   box-shadow: 0 0 25px rgba(0,212,255,0.6); }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}

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

@keyframes slide-in-right-space {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes notice-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0,212,255,0.2); }
  50%       { box-shadow: 0 0 30px rgba(0,212,255,0.5); }
}

@keyframes scan-line {
  0%   { top: 0%; opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* 拖入模块处理动画 */
@keyframes module-spin {
  0%   { transform: rotateY(0deg) scale(1); }
  30%  { transform: rotateY(90deg) scale(0.92); }
  60%  { transform: rotateY(180deg) scale(0.88); }
  80%  { transform: rotateY(270deg) scale(0.92); }
  100% { transform: rotateY(360deg) scale(1); }
}

@keyframes orbit-ring {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes orbit-ring-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes processing-dots {
  0%, 20%  { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
  80%, 100%{ opacity: 0.2; transform: scale(0.8); }
}

@keyframes content-reveal {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes scan-sweep {
  0%   { top: -4px; opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

/* 知识图谱模块动画 */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════
   太空舱主题 CSS — 动画工具类
   ═══════════════════════════════════════════ */

.space-animate-left  { animation: slide-in-left 0.4s cubic-bezier(0.4,0,0.2,1); }
.space-animate-right { animation: slide-in-right-space 0.4s cubic-bezier(0.4,0,0.2,1); }
.space-animate-up    { animation: slide-in-up 0.4s cubic-bezier(0.4,0,0.2,1); }
.space-pulse         { animation: space-pulse 2.5s ease-in-out infinite; }
.glow-pulse          { animation: glow-pulse 3s ease-in-out infinite; }

.space-card {
  background: rgba(0, 20, 60, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.06), inset 0 1px 0 rgba(255,255,255,0.05);
}

.space-scroll::-webkit-scrollbar { width: 4px; }
.space-scroll::-webkit-scrollbar-track { background: rgba(0,212,255,0.04); }
.space-scroll::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.25); border-radius: 4px; }
.space-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.45); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 10px; }

.module-processing {
  animation: module-spin 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-style: preserve-3d;
  perspective: 800px;
}

.content-reveal {
  animation: content-reveal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.graph-node { cursor: pointer; }

.animate-fade-in-up { animation: fade-in-up 0.25s ease-out; }
.animate-slide-in-right { animation: slide-in-right 0.25s ease-out; }