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

@layer base {
  :root {
    --font-display: "Futura", "Avenir Next", sans-serif;
    --font-body: "Avenir Next", "Helvetica Neue", sans-serif;
    --font-mono: "SF Mono", "Menlo", monospace;
    --background: 220 27% 97%;
    --foreground: 224 30% 10%;
    --card: 0 0% 100%;
    --card-foreground: 224 30% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 30% 10%;
    --primary: 345 100% 49%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 18% 94%;
    --secondary-foreground: 224 24% 18%;
    --muted: 220 18% 94%;
    --muted-foreground: 220 10% 42%;
    --accent: 345 100% 96%;
    --accent-foreground: 345 92% 43%;
    --destructive: 0 74% 52%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 17% 88%;
    --input: 220 17% 88%;
    --ring: 345 100% 49%;
    --radius: 0.875rem;
    --chart-cyan: 194 76% 44%;
    --chart-blue: 221 72% 52%;
    --chart-amber: 38 91% 52%;
    --chart-emerald: 153 64% 42%;
    --chart-rose: 345 100% 49%;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 16px 42px rgba(15, 23, 42, 0.08);
    --shadow-panel: 0 18px 54px rgba(15, 23, 42, 0.10);
    --shadow-glow: 0 0 0 1px rgba(250, 0, 63, 0.06), 0 24px 80px rgba(15, 23, 42, 0.10);
    --surface-panel: linear-gradient(180deg, hsl(0 0% 100% / 0.94), hsl(220 27% 98% / 0.90));
    --surface-panel-border: hsl(var(--border) / 0.92);
    --surface-panel-muted: hsl(220 18% 96% / 0.86);
    --status-success: 153 64% 40%;
    --status-success-foreground: 153 70% 28%;
    --status-info: 345 100% 49%;
    --status-info-foreground: 345 92% 43%;
    --status-warning: 38 91% 48%;
    --status-warning-foreground: 34 85% 34%;
    --status-danger: 0 74% 52%;
    --status-danger-foreground: 0 72% 44%;
    --status-muted: 220 10% 48%;
    --status-muted-foreground: 220 10% 42%;
    --status-purple: 264 58% 54%;
    --status-purple-foreground: 264 48% 42%;
  }

  .dark {
    --background: 222 36% 6%;
    --foreground: 215 24% 94%;
    --card: 222 28% 10%;
    --card-foreground: 215 24% 96%;
    --popover: 222 28% 10%;
    --popover-foreground: 215 24% 96%;
    --primary: 345 100% 49%;
    --primary-foreground: 0 0% 100%;
    --secondary: 222 20% 15%;
    --secondary-foreground: 215 22% 94%;
    --muted: 222 20% 15%;
    --muted-foreground: 218 13% 66%;
    --accent: 345 94% 13%;
    --accent-foreground: 345 100% 68%;
    --destructive: 0 73% 57%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 18% 19%;
    --input: 220 18% 19%;
    --ring: 345 100% 49%;
    --chart-cyan: 190 83% 55%;
    --chart-blue: 216 86% 63%;
    --chart-amber: 38 92% 60%;
    --chart-emerald: 153 71% 49%;
    --chart-rose: 345 100% 49%;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 18px 54px rgba(0, 0, 0, 0.28);
    --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 22px 70px rgba(0, 0, 0, 0.34);
    --shadow-glow: 0 0 0 1px rgba(250, 0, 63, 0.10), 0 24px 80px rgba(0, 0, 0, 0.42);
    --surface-panel: linear-gradient(180deg, hsl(222 28% 12% / 0.92), hsl(222 36% 8% / 0.88));
    --surface-panel-border: hsl(var(--border) / 0.92);
    --surface-panel-muted: hsl(222 22% 14% / 0.82);
    --status-success: 153 71% 49%;
    --status-success-foreground: 153 72% 72%;
    --status-info: 345 100% 49%;
    --status-info-foreground: 345 100% 70%;
    --status-warning: 38 92% 60%;
    --status-warning-foreground: 38 100% 78%;
    --status-danger: 0 73% 57%;
    --status-danger-foreground: 0 90% 78%;
    --status-muted: 218 13% 66%;
    --status-muted-foreground: 218 13% 74%;
    --status-purple: 264 70% 64%;
    --status-purple-foreground: 264 82% 82%;
  }

  * {
    @apply border-border;
  }

  html {
    color-scheme: dark;
  }

  body {
    @apply min-h-screen bg-background font-sans text-foreground antialiased;
    background-image:
      radial-gradient(circle at 22% 18%, hsl(var(--primary) / 0.08), transparent 28%),
      radial-gradient(circle at 78% 18%, hsl(222 60% 40% / 0.10), transparent 24%),
      linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background)) 100%);
  }

  pre,
  code {
    @apply font-mono;
  }
}

@layer utilities {
  .panel-surface {
    @apply border backdrop-blur-xl;
    border-color: var(--surface-panel-border);
    background: var(--surface-panel);
    box-shadow: var(--shadow-panel);
  }

  .panel-glow {
    box-shadow: var(--shadow-card);
  }

  .mission-ease-smooth {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .status-ring {
    position: relative;
  }

  .status-ring::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    opacity: 0.15;
  }

  .cockpit-panel {
    position: relative;
    overflow: hidden;
    border-color: hsl(var(--border) / 0.88);
    background:
      linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--background) / 0.82));
    box-shadow: var(--shadow-card);
  }

  .cockpit-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      linear-gradient(180deg, hsl(var(--foreground) / 0.035), transparent 22%),
      radial-gradient(circle at 92% 0%, hsl(var(--primary) / 0.06), transparent 34%);
    opacity: 0.9;
  }

  .cockpit-panel > * {
    position: relative;
    z-index: 1;
  }

  .cockpit-inset {
    border-color: hsl(var(--border) / 0.82);
    background: hsl(var(--muted) / 0.44);
  }

  .dark .cockpit-panel {
    border-color: hsl(var(--primary) / 0.16);
    background:
      radial-gradient(circle at 8% -6%, hsl(var(--primary) / 0.08), transparent 32%),
      linear-gradient(180deg, hsl(var(--card) / 0.94), hsl(var(--background) / 0.88));
    box-shadow:
      0 1px 0 hsl(var(--foreground) / 0.035) inset,
      0 18px 64px rgba(0, 0, 0, 0.32),
      0 0 0 1px hsl(var(--primary) / 0.035);
  }

  .dark .cockpit-inset {
    border-color: hsl(var(--primary) / 0.12);
    background:
      linear-gradient(180deg, hsl(var(--card) / 0.72), hsl(var(--background) / 0.46));
  }

  .mission-shell--light .cockpit-panel {
    border-color: hsl(var(--border) / 0.92);
    background:
      linear-gradient(180deg, hsl(0 0% 100% / 0.98), hsl(220 27% 98% / 0.92));
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.04),
      0 18px 42px rgba(15, 23, 42, 0.07);
  }

  .mission-shell--light .cockpit-inset {
    border-color: hsl(var(--border) / 0.92);
    background: hsl(220 18% 96% / 0.78);
  }
}

.mission-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(98, 165, 255, 0.16) 1px, transparent 1.5px);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle at center, black 38%, transparent 100%);
  opacity: 0.42;
}

.mission-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 14%);
}

.mission-shell--light {
  --background: 220 27% 97%;
  --foreground: 224 30% 10%;
  --card: 0 0% 100%;
  --card-foreground: 224 30% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 30% 10%;
  --primary: 345 100% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 18% 94%;
  --secondary-foreground: 224 24% 18%;
  --muted: 220 18% 94%;
  --muted-foreground: 220 10% 42%;
  --accent: 345 100% 96%;
  --accent-foreground: 345 92% 43%;
  --destructive: 0 74% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 17% 88%;
  --input: 220 17% 88%;
  --ring: 345 100% 49%;
  --chart-rose: 345 100% 49%;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 16px 42px rgba(15, 23, 42, 0.08);
  --shadow-panel: 0 18px 54px rgba(15, 23, 42, 0.10);
  --shadow-glow: 0 0 0 1px rgba(250, 0, 63, 0.06), 0 24px 80px rgba(15, 23, 42, 0.10);
  --surface-panel: linear-gradient(180deg, hsl(0 0% 100% / 0.96), hsl(220 27% 98% / 0.92));
  --surface-panel-border: hsl(var(--border) / 0.92);
  --surface-panel-muted: hsl(220 18% 96% / 0.86);
  --status-success: 153 64% 40%;
  --status-success-foreground: 153 70% 28%;
  --status-info: 345 100% 49%;
  --status-info-foreground: 345 92% 43%;
  --status-warning: 38 91% 48%;
  --status-warning-foreground: 34 85% 34%;
  --status-danger: 0 74% 52%;
  --status-danger-foreground: 0 72% 44%;
  --status-muted: 220 10% 48%;
  --status-muted-foreground: 220 10% 42%;
  --status-purple: 264 58% 54%;
  --status-purple-foreground: 264 48% 42%;
  color: hsl(var(--foreground));
  background: linear-gradient(180deg, hsl(220 33% 98%) 0%, hsl(220 24% 96%) 54%, hsl(220 22% 94%) 100%);
}

.mission-shell--light::before {
  background-image:
    radial-gradient(circle, rgba(250, 0, 63, 0.08) 1px, transparent 1.65px);
  opacity: 0.18;
  mask-image: radial-gradient(circle at center, black 44%, transparent 100%);
}

.agentos-light-modal,
.mission-shell--light .mission-inspector-light {
  border-color: rgba(213, 199, 184, 0.92) !important;
  background: linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 243, 238, 0.98)) !important;
  color: #2d241f !important;
  box-shadow: 0 24px 72px rgba(61, 47, 36, 0.18) !important;
}

.agentos-light-modal [class*="bg-[linear-gradient"],
.mission-shell--light .mission-inspector-light [class*="bg-[linear-gradient"] {
  background: linear-gradient(180deg, rgba(255, 252, 248, 0.96), rgba(246, 241, 235, 0.92)) !important;
}

.agentos-light-modal [class*="bg-slate-950"],
.agentos-light-modal [class*="bg-slate-900"],
.mission-shell--light .mission-inspector-light [class*="bg-slate-950"],
.mission-shell--light .mission-inspector-light [class*="bg-slate-900"] {
  background-color: rgba(246, 241, 235, 0.94) !important;
}

.agentos-light-modal [class*="bg-white/["],
.mission-shell--light .mission-inspector-light [class*="bg-white/["] {
  background-color: rgba(255, 255, 255, 0.62) !important;
}

.agentos-light-modal [class*="bg-sky-"],
.agentos-light-modal [class*="bg-cyan-"],
.mission-shell--light .mission-inspector-light [class*="bg-sky-"],
.mission-shell--light .mission-inspector-light [class*="bg-cyan-"] {
  background-color: rgba(219, 234, 254, 0.78) !important;
}

.agentos-light-modal [class*="bg-emerald-"],
.mission-shell--light .mission-inspector-light [class*="bg-emerald-"] {
  background-color: rgba(209, 250, 229, 0.78) !important;
}

.agentos-light-modal [class*="bg-amber-"],
.mission-shell--light .mission-inspector-light [class*="bg-amber-"] {
  background-color: rgba(254, 243, 199, 0.8) !important;
}

.agentos-light-modal [class*="bg-rose-"],
.mission-shell--light .mission-inspector-light [class*="bg-rose-"] {
  background-color: rgba(255, 228, 230, 0.8) !important;
}

.agentos-light-modal [class*="bg-violet-"],
.mission-shell--light .mission-inspector-light [class*="bg-violet-"] {
  background-color: rgba(237, 233, 254, 0.8) !important;
}

.agentos-light-modal [class*="border-white/"],
.mission-shell--light .mission-inspector-light [class*="border-white/"] {
  border-color: rgba(213, 199, 184, 0.9) !important;
}

.agentos-light-modal [class*="text-white"],
.agentos-light-modal [class*="text-slate-100"],
.agentos-light-modal [class*="text-slate-200"],
.mission-shell--light .mission-inspector-light [class*="text-white"],
.mission-shell--light .mission-inspector-light [class*="text-slate-100"],
.mission-shell--light .mission-inspector-light [class*="text-slate-200"] {
  color: #2d241f !important;
}

.agentos-light-modal [class*="text-slate-300"],
.agentos-light-modal [class*="text-slate-400"],
.agentos-light-modal [class*="text-slate-500"],
.mission-shell--light .mission-inspector-light [class*="text-slate-300"],
.mission-shell--light .mission-inspector-light [class*="text-slate-400"],
.mission-shell--light .mission-inspector-light [class*="text-slate-500"] {
  color: #74665c !important;
}

.agentos-light-modal [class*="text-sky-"],
.agentos-light-modal [class*="text-cyan-"],
.mission-shell--light .mission-inspector-light [class*="text-sky-"],
.mission-shell--light .mission-inspector-light [class*="text-cyan-"] {
  color: #1d4ed8 !important;
}

.agentos-light-modal [class*="text-emerald-"],
.mission-shell--light .mission-inspector-light [class*="text-emerald-"] {
  color: #166534 !important;
}

.agentos-light-modal [class*="text-amber-"],
.mission-shell--light .mission-inspector-light [class*="text-amber-"] {
  color: #92400e !important;
}

.agentos-light-modal [class*="text-rose-"],
.mission-shell--light .mission-inspector-light [class*="text-rose-"] {
  color: #be123c !important;
}

.agentos-light-modal [class*="text-violet-"],
.mission-shell--light .mission-inspector-light [class*="text-violet-"] {
  color: #6d28d9 !important;
}

.agentos-light-modal [class*="from-[rgba(13,20,34"],
.agentos-light-modal [class*="from-[rgba(15,23,42"],
.mission-shell--light .mission-inspector-light [class*="from-[rgba(13,20,34"],
.mission-shell--light .mission-inspector-light [class*="from-[rgba(15,23,42"] {
  --tw-gradient-from: rgba(255, 252, 248, 0.96) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 252, 248, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.agentos-light-modal [class*="bg-cyan-300/"],
.agentos-light-modal [class*="bg-cyan-400/"],
.mission-shell--light .mission-inspector-light [class*="bg-cyan-300/"],
.mission-shell--light .mission-inspector-light [class*="bg-cyan-400/"] {
  background-color: rgba(207, 250, 254, 0.82) !important;
}

.agentos-light-modal [class*="bg-amber-300/"],
.agentos-light-modal [class*="bg-amber-400/"],
.mission-shell--light .mission-inspector-light [class*="bg-amber-300/"],
.mission-shell--light .mission-inspector-light [class*="bg-amber-400/"] {
  background-color: rgba(254, 243, 199, 0.88) !important;
}

.agentos-light-modal input,
.agentos-light-modal textarea,
.mission-shell--light .mission-inspector-light input,
.mission-shell--light .mission-inspector-light textarea {
  border-color: rgba(213, 199, 184, 0.95) !important;
  background-color: rgba(255, 255, 255, 0.84) !important;
  color: #2d241f !important;
}

.agentos-light-modal input::placeholder,
.agentos-light-modal textarea::placeholder,
.mission-shell--light .mission-inspector-light input::placeholder,
.mission-shell--light .mission-inspector-light textarea::placeholder {
  color: rgba(116, 102, 92, 0.72) !important;
}

.mission-shell--light::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 16%);
}

.mission-canvas-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.mission-canvas-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(4, 11, 22, 0.06), rgba(4, 11, 22, 0.01));
}

.mission-canvas-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: linear-gradient(180deg, rgba(2, 6, 17, 0.02), rgba(2, 6, 17, 0.08));
}

.mission-shell--light .mission-canvas-backdrop::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(229, 215, 204, 0.04));
}

.mission-shell--light .mission-canvas-backdrop::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(214, 196, 183, 0.08));
}

.mission-canvas-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(4, 11, 22, 0.08), rgba(4, 11, 22, 0.01));
}

.mission-shell--light .mission-canvas-frame::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(229, 215, 204, 0.04));
}

.mission-canvas-pattern {
  pointer-events: none;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.13) 1px, transparent 1px),
    radial-gradient(circle, rgba(96, 165, 250, 0.28) 1.7px, transparent 2px);
  background-size: 88px 88px, 88px 88px, 22px 22px;
  background-position: 0 0, 0 0, 2px 2px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.98) 62%, rgba(0, 0, 0, 0.9) 84%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.98) 62%, rgba(0, 0, 0, 0.9) 84%, transparent 100%);
}

.mission-shell--light .mission-canvas-pattern {
  background-image:
    linear-gradient(rgba(153, 122, 100, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153, 122, 100, 0.12) 1px, transparent 1px),
    radial-gradient(circle, rgba(185, 145, 114, 0.24) 1.7px, transparent 2px);
}

.mission-shell {
  --workspace-chip-border: rgba(255, 255, 255, 0.06);
  --workspace-chip-border-hover: rgba(255, 255, 255, 0.12);
  --workspace-chip-bg: rgba(8, 15, 28, 0.68);
  --workspace-chip-bg-hover: rgba(255, 255, 255, 0.08);
  --workspace-chip-text: rgba(226, 232, 240, 0.92);
  --workspace-chip-text-hover: #ffffff;
  --workspace-chip-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  --workspace-chip-focus: rgba(125, 211, 252, 0.38);
  --mission-edge-core: rgba(116, 199, 255, 0.94);
  --mission-edge-core-active: rgba(179, 232, 255, 0.98);
  --mission-edge-glow: rgba(59, 130, 246, 0.28);
  --mission-edge-glow-active: rgba(96, 165, 250, 0.34);
  --mission-edge-arrow: rgba(210, 232, 255, 0.94);
  --mission-edge-packet: rgba(232, 249, 255, 0.98);
}

.mission-shell--light {
  --workspace-chip-border: rgba(185, 145, 114, 0.24);
  --workspace-chip-border-hover: rgba(185, 145, 114, 0.36);
  --workspace-chip-bg: rgba(255, 249, 243, 0.82);
  --workspace-chip-bg-hover: rgba(248, 239, 231, 0.98);
  --workspace-chip-text: #5d4637;
  --workspace-chip-text-hover: #3d2e25;
  --workspace-chip-shadow: 0 12px 22px rgba(161, 125, 101, 0.12);
  --workspace-chip-focus: rgba(184, 149, 102, 0.28);
  --mission-edge-core: rgba(126, 84, 58, 0.84);
  --mission-edge-core-active: rgba(146, 94, 60, 0.98);
  --mission-edge-glow: rgba(184, 149, 102, 0.28);
  --mission-edge-glow-active: rgba(201, 166, 123, 0.34);
  --mission-edge-arrow: rgba(109, 74, 50, 0.96);
  --mission-edge-packet: rgba(112, 77, 55, 0.96);
}

.workspace-node {
  --workspace-node-text: rgba(244, 247, 252, 0.96);
  --workspace-node-text-muted: rgba(184, 194, 214, 0.76);
  --workspace-node-text-soft: rgba(160, 173, 193, 0.72);
  --workspace-node-surface-top: rgba(9, 14, 24, 0.94);
  --workspace-node-surface-bottom: rgba(4, 8, 15, 0.95);
  --workspace-node-accent-wash: rgba(var(--workspace-accent-rgb), 0.16);
  --workspace-node-accent-spot: rgba(var(--workspace-accent-rgb), 0.08);
  --workspace-node-border: rgba(var(--workspace-accent-rgb), 0.24);
  --workspace-node-border-selected: rgba(var(--workspace-accent-rgb), 0.46);
  --workspace-node-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
  --workspace-node-shadow-selected: 0 0 0 1px rgba(var(--workspace-accent-rgb), 0.14), 0 24px 64px rgba(0, 0, 0, 0.36), 0 0 0 10px rgba(var(--workspace-accent-rgb), 0.05);
  --workspace-node-header-bg: linear-gradient(180deg, rgba(7, 12, 22, 0.92), rgba(4, 8, 15, 0.96));
  --workspace-node-header-border: rgba(var(--workspace-accent-rgb), 0.28);
  --workspace-node-header-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
  --workspace-node-header-icon-bg: rgba(var(--workspace-accent-rgb), 0.12);
  --workspace-node-header-icon-border: rgba(var(--workspace-accent-rgb), 0.24);
  --workspace-node-header-icon-color: rgb(var(--workspace-accent-rgb));
  --workspace-chip-border: rgba(var(--workspace-accent-rgb), 0.24);
  --workspace-chip-border-hover: rgba(var(--workspace-accent-rgb), 0.38);
  --workspace-chip-bg: rgba(var(--workspace-accent-rgb), 0.16);
  --workspace-chip-bg-hover: rgba(var(--workspace-accent-rgb), 0.24);
  --workspace-chip-text: var(--workspace-node-text);
  --workspace-chip-text-hover: rgba(255, 255, 255, 0.98);
  --workspace-chip-shadow: 0 10px 18px rgba(var(--workspace-accent-rgb), 0.08);
  --workspace-chip-focus: rgba(var(--workspace-accent-rgb), 0.38);
  color: var(--workspace-node-text);
  border-color: var(--workspace-node-border);
  background:
    linear-gradient(180deg, var(--workspace-node-surface-top), var(--workspace-node-surface-bottom)),
    radial-gradient(circle at 16% 0%, var(--workspace-node-accent-wash), transparent 36%),
    radial-gradient(circle at 86% 8%, var(--workspace-node-accent-spot), transparent 28%);
  box-shadow: var(--workspace-node-shadow);
}

.workspace-node::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 0%, rgba(var(--workspace-accent-rgb), 0.2), transparent 34%),
    radial-gradient(circle at 86% 6%, rgba(var(--workspace-accent-rgb), 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%);
  opacity: 0.96;
}

.workspace-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: 28px;
  border: 1px solid var(--workspace-node-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0.9;
}

.workspace-node--selected {
  --workspace-node-border: var(--workspace-node-border-selected);
  --workspace-chip-border: rgba(var(--workspace-accent-rgb), 0.34);
  --workspace-chip-border-hover: rgba(var(--workspace-accent-rgb), 0.5);
  --workspace-chip-bg: rgba(var(--workspace-accent-rgb), 0.22);
  --workspace-chip-bg-hover: rgba(var(--workspace-accent-rgb), 0.3);
  --workspace-node-shadow: var(--workspace-node-shadow-selected);
}

.workspace-node__header {
  border: 1px solid var(--workspace-node-header-border);
  background: var(--workspace-node-header-bg);
  box-shadow: var(--workspace-node-header-shadow);
}

.workspace-node__header-icon {
  border: 1px solid var(--workspace-node-header-icon-border);
  background: var(--workspace-node-header-icon-bg);
  color: var(--workspace-node-header-icon-color);
  box-shadow: 0 10px 18px rgba(var(--workspace-accent-rgb), 0.08);
}

.workspace-node__workspace-action {
  cursor: pointer;
}

.workspace-node__workspace-action .workspace-node__header,
.workspace-node__workspace-action .workspace-node__title,
.workspace-node__workspace-action .workspace-node__path {
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.workspace-node__workspace-action:hover .workspace-node__header,
.workspace-node__workspace-action:focus-visible .workspace-node__header {
  border-color: rgba(var(--workspace-accent-rgb), 0.5);
  background: rgba(var(--workspace-accent-rgb), 0.18);
  box-shadow:
    var(--workspace-node-header-shadow),
    0 0 0 1px rgba(var(--workspace-accent-rgb), 0.18),
    0 16px 34px rgba(var(--workspace-accent-rgb), 0.16);
}

.workspace-node__workspace-action:hover .workspace-node__title,
.workspace-node__workspace-action:focus-visible .workspace-node__title,
.workspace-node__workspace-action:hover .workspace-node__path,
.workspace-node__workspace-action:focus-visible .workspace-node__path {
  color: var(--workspace-node-text);
}

.workspace-node__title {
  color: var(--workspace-node-text);
}

.workspace-node__slug {
  color: var(--workspace-node-text-muted);
}

.workspace-node__path {
  color: var(--workspace-node-text-soft);
}

.mission-shell--light .workspace-node {
  --workspace-node-text: #4f3d31;
  --workspace-node-text-muted: #6f5a4f;
  --workspace-node-text-soft: #857062;
  --workspace-node-surface-top: rgba(255, 255, 255, 0.96);
  --workspace-node-surface-bottom: rgba(247, 241, 234, 0.95);
  --workspace-node-accent-wash: rgba(var(--workspace-accent-rgb), 0.12);
  --workspace-node-accent-spot: rgba(var(--workspace-accent-rgb), 0.06);
  --workspace-node-border: rgba(var(--workspace-accent-rgb), 0.22);
  --workspace-node-border-selected: rgba(var(--workspace-accent-rgb), 0.38);
  --workspace-node-shadow: 0 18px 36px rgba(82, 60, 46, 0.08);
  --workspace-node-shadow-selected: 0 0 0 1px rgba(var(--workspace-accent-rgb), 0.12), 0 18px 42px rgba(82, 60, 46, 0.1), 0 0 0 10px rgba(var(--workspace-accent-rgb), 0.04);
  --workspace-node-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 242, 235, 0.96));
  --workspace-node-header-border: rgba(var(--workspace-accent-rgb), 0.22);
  --workspace-node-header-shadow: 0 12px 22px rgba(161, 125, 101, 0.08);
  --workspace-node-header-icon-bg: rgba(var(--workspace-accent-rgb), 0.12);
  --workspace-node-header-icon-border: rgba(var(--workspace-accent-rgb), 0.22);
  --workspace-node-header-icon-color: rgb(var(--workspace-accent-rgb));
  --workspace-chip-border: rgba(var(--workspace-accent-rgb), 0.22);
  --workspace-chip-border-hover: rgba(var(--workspace-accent-rgb), 0.34);
  --workspace-chip-bg: rgba(var(--workspace-accent-rgb), 0.1);
  --workspace-chip-bg-hover: rgba(var(--workspace-accent-rgb), 0.16);
  --workspace-chip-text: #4f3d31;
  --workspace-chip-text-hover: #3d2e25;
  --workspace-chip-shadow: 0 12px 22px rgba(161, 125, 101, 0.1);
  --workspace-chip-focus: rgba(var(--workspace-accent-rgb), 0.28);
}

.mission-shell--light .workspace-node::before {
  background:
    radial-gradient(circle at 16% 0%, rgba(var(--workspace-accent-rgb), 0.16), transparent 34%),
    radial-gradient(circle at 86% 6%, rgba(var(--workspace-accent-rgb), 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 16%);
  opacity: 0.92;
}

.mission-shell--light .workspace-node::after {
  border-color: rgba(var(--workspace-accent-rgb), 0.22);
  opacity: 0.96;
}

.workspace-node__chip {
  border-color: var(--workspace-chip-border) !important;
  background: var(--workspace-chip-bg) !important;
  color: var(--workspace-chip-text) !important;
  box-shadow: var(--workspace-chip-shadow) !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.workspace-node__chip:hover:not(:disabled) {
  border-color: var(--workspace-chip-border-hover) !important;
  background: var(--workspace-chip-bg-hover) !important;
  color: var(--workspace-chip-text-hover) !important;
}

.workspace-node__chip:focus-visible {
  outline: 2px solid var(--workspace-chip-focus);
  outline-offset: 2px;
}

.workspace-node__chip-icon,
.workspace-node__chip-label,
.workspace-node__chip-value {
  color: inherit !important;
}

.mission-shell .react-flow__edge .mission-edge__path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke 180ms ease,
    opacity 180ms ease,
    filter 180ms ease;
}

.mission-shell .react-flow__edge .mission-edge__path--glow {
  stroke: var(--mission-edge-glow);
  opacity: 0.82;
  filter: drop-shadow(0 0 10px var(--mission-edge-glow));
}

.mission-shell .react-flow__edge .mission-edge__path--core {
  stroke: var(--mission-edge-core);
  opacity: 0.98;
}

.mission-shell .react-flow__edge .mission-edge__path--surface-tether,
.mission-shell .react-flow__edge .mission-edge__path--telegram-tether {
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.mission-shell .react-flow__edge.animated .mission-edge__path--glow {
  stroke: var(--mission-edge-glow-active);
  opacity: 0.95;
}

.mission-shell .react-flow__edge.animated .mission-edge__path--core {
  stroke: var(--mission-edge-core-active);
}

.mission-shell .react-flow__edge.selected .mission-edge__path--glow,
.mission-shell .react-flow__edge.selected .mission-edge__path--core {
  opacity: 1;
}

.mission-shell .react-flow__edge.selected .mission-edge__path--glow {
  filter: drop-shadow(0 0 14px var(--mission-edge-glow-active));
}

.mission-shell .react-flow__edge .mission-edge__packet {
  pointer-events: none;
  mix-blend-mode: screen;
}

.mission-shell .react-flow__edge .mission-edge__packet circle {
  fill: currentColor;
  stroke: none;
}

.agent-node__composer-glow {
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08), transparent 42%);
  filter: blur(16px);
  opacity: 0.52;
  transform-origin: center;
  animation: agent-composer-pulse 3.2s ease-in-out infinite;
}

.agent-node__composer-svg {
  mix-blend-mode: screen;
  opacity: 1;
}

.agent-node__composer-rail {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: rgba(186, 230, 253, 0.3);
  stroke-width: 2.3;
  opacity: 1;
}

.agent-node__composer-trace {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent-node__composer-trace--glow {
  stroke: rgba(34, 211, 238, 0.4);
  opacity: 0.78;
  stroke-width: 10.4;
  stroke-dasharray: 20 80;
  animation: agent-composer-trace 1.85s linear infinite;
  filter: blur(8.5px);
}

.agent-node__composer-trace--core {
  stroke: rgba(186, 230, 253, 0.98);
  stroke-width: 3.2;
  stroke-dasharray: 7 93;
  animation: agent-composer-trace 1.85s linear infinite;
  filter:
    drop-shadow(0 0 12px rgba(103, 232, 249, 0.94))
    drop-shadow(0 0 22px rgba(34, 211, 238, 0.38))
    drop-shadow(0 0 34px rgba(59, 130, 246, 0.18));
}

.agent-node__composer-trace--tail {
  stroke: rgba(103, 232, 249, 0.48);
  opacity: 0.92;
  stroke-width: 5.4;
  stroke-dasharray: 14 86;
  animation: agent-composer-trace 1.85s linear infinite;
  animation-delay: -0.08s;
  filter: blur(2.4px);
}

.agent-node__composer-svg,
.agent-node__composer-trace {
  mix-blend-mode: screen;
}

.mission-shell--light .agent-node__composer-glow {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 35, 83, 0.24), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255, 83, 119, 0.14), transparent 42%);
  filter: blur(14px);
  opacity: 0.72;
}

.mission-shell--light .agent-node__composer-svg,
.mission-shell--light .agent-node__composer-trace {
  mix-blend-mode: normal;
}

.mission-shell--light .agent-node__composer-rail {
  stroke: rgba(255, 38, 83, 0.58);
  stroke-width: 2.45;
  filter: drop-shadow(0 0 5px rgba(255, 38, 83, 0.24));
}

.mission-shell--light .agent-node__composer-trace--glow {
  stroke: rgba(255, 38, 83, 0.62);
  opacity: 0.82;
  stroke-width: 9.2;
  filter: blur(6.5px);
}

.mission-shell--light .agent-node__composer-trace--core {
  stroke: rgba(255, 56, 98, 0.98);
  stroke-width: 3.05;
  filter:
    drop-shadow(0 0 10px rgba(255, 38, 83, 0.88))
    drop-shadow(0 0 18px rgba(255, 38, 83, 0.38))
    drop-shadow(0 0 30px rgba(255, 38, 83, 0.18));
}

.mission-shell--light .agent-node__composer-trace--tail {
  stroke: rgba(255, 56, 98, 0.72);
  opacity: 0.94;
  stroke-width: 4.9;
  filter: blur(2px);
}

.mission-shell .react-flow__edge .mission-edge__path--composer {
  stroke: var(--mission-edge-core-active);
  opacity: 1;
  filter: drop-shadow(0 0 18px var(--mission-edge-glow-active));
}

.mission-shell .react-flow__edge .mission-edge__path--composer.mission-edge__path--glow {
  opacity: 1;
  filter: drop-shadow(0 0 20px var(--mission-edge-glow-active));
}

.mission-shell .react-flow__edge .mission-edge__path--composer.mission-edge__path--core {
  stroke: var(--mission-edge-core-active);
}

.mission-shell .react-flow__edge .mission-edge__path--composer.mission-edge__path--animated {
  filter: drop-shadow(0 0 24px var(--mission-edge-glow-active));
}

.mission-shell--light .workspace-node__health {
  border-width: 1px;
  color: #8a7261;
  box-shadow: 0 10px 18px rgba(105, 79, 61, 0.12);
}

.mission-shell--light .workspace-node__health[data-health="engaged"] {
  border-color: rgba(116, 160, 177, 0.34);
  background: rgba(125, 173, 192, 0.22);
}

.mission-shell--light .workspace-node__health[data-health="monitoring"] {
  border-color: rgba(126, 158, 135, 0.34);
  background: rgba(138, 176, 149, 0.22);
}

.mission-shell--light .workspace-node__health[data-health="ready"] {
  border-color: rgba(184, 149, 102, 0.34);
  background: rgba(197, 164, 120, 0.22);
}

.mission-shell--light .workspace-node__health[data-health="standby"] {
  border-color: rgba(141, 108, 86, 0.3);
  background: rgba(163, 131, 107, 0.18);
}

.mission-shell--light .workspace-node__health[data-health="offline"] {
  border-color: rgba(175, 122, 132, 0.34);
  background: rgba(191, 136, 146, 0.22);
}

.react-flow__renderer {
  background: transparent;
}

.react-flow__controls-button {
  @apply border-white/10 bg-transparent text-white transition-colors hover:bg-white/10;
}

.react-flow__attribution {
  display: none;
}

.mission-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.mission-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.22);
  border-radius: 9999px;
}

.mission-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.inspector-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.inspector-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sidebar-scroll {
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.workspace-menu-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}

.workspace-menu-scroll::-webkit-scrollbar {
  width: 6px;
}

.workspace-menu-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.workspace-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.26);
  border-radius: 9999px;
}

.workspace-menu-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.38);
}

@keyframes openclaw-onboarding-aurora {
  0% {
    transform: translate3d(-7%, -4%, 0) rotate(0deg) scale(1);
  }

  45% {
    transform: translate3d(6%, 3%, 0) rotate(8deg) scale(1.06);
  }

  100% {
    transform: translate3d(-2%, 6%, 0) rotate(-6deg) scale(1.03);
  }
}

@keyframes openclaw-onboarding-sweep {
  0% {
    transform: translateX(-34%) skewX(-10deg);
    opacity: 0.26;
  }

  50% {
    opacity: 0.52;
  }

  100% {
    transform: translateX(34%) skewX(-10deg);
    opacity: 0.3;
  }
}

.openclaw-onboarding-backdrop::before,
.openclaw-onboarding-backdrop::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.openclaw-onboarding-backdrop::before {
  inset: -24%;
  background:
    conic-gradient(
      from 210deg at 52% 52%,
      transparent 0deg,
      rgba(34, 211, 238, 0.2) 58deg,
      rgba(99, 102, 241, 0.14) 118deg,
      transparent 178deg,
      rgba(244, 114, 182, 0.12) 246deg,
      rgba(14, 165, 233, 0.18) 306deg,
      transparent 360deg
    ),
    linear-gradient(115deg, transparent 18%, rgba(125, 211, 252, 0.12) 42%, transparent 68%);
  filter: blur(42px);
  opacity: 0.9;
  animation: openclaw-onboarding-aurora 16s ease-in-out infinite alternate;
}

.openclaw-onboarding-backdrop::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 45%, transparent 72%),
    radial-gradient(ellipse at 50% 58%, transparent 0%, rgba(2, 6, 23, 0.1) 52%, rgba(2, 6, 23, 0.38) 100%);
  mix-blend-mode: screen;
  animation: openclaw-onboarding-sweep 12s ease-in-out infinite alternate;
}

.openclaw-onboarding-backdrop--dark::before {
  opacity: 0.82;
}

.openclaw-onboarding-backdrop--dark::after {
  opacity: 0.72;
}

.openclaw-onboarding-backdrop--light::before {
  background:
    conic-gradient(
      from 210deg at 52% 52%,
      transparent 0deg,
      rgba(14, 165, 233, 0.14) 62deg,
      rgba(200, 148, 111, 0.18) 128deg,
      transparent 184deg,
      rgba(244, 114, 182, 0.08) 246deg,
      rgba(59, 130, 246, 0.1) 312deg,
      transparent 360deg
    ),
    linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.32) 42%, transparent 68%);
  opacity: 0.72;
}

.openclaw-onboarding-backdrop--light::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.32) 45%, transparent 72%),
    radial-gradient(ellipse at 50% 58%, transparent 0%, rgba(255, 249, 244, 0.12) 52%, rgba(229, 215, 204, 0.28) 100%);
  opacity: 0.62;
}

@keyframes operation-progress-fill {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.operation-progress__fill {
  width: 100%;
  transform-origin: left center;
}

.operation-progress__fill--active {
  animation-name: operation-progress-fill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes agent-composer-trace {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -100;
  }
}

@keyframes agent-composer-pulse {
  0%,
  100% {
    opacity: 0.46;
    transform: scale(0.985);
  }

  50% {
    opacity: 0.82;
    transform: scale(1.02);
  }
}

@keyframes workspace-architect-card-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes workspace-architect-chip-enter {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.workspace-architect-card-enter {
  animation: workspace-architect-card-enter 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workspace-architect-chip-enter {
  animation: workspace-architect-chip-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .agent-node__composer-glow {
    animation: none !important;
  }

  .agent-node__composer-svg,
  .agent-node__composer-trace {
    animation: none !important;
  }

  .agent-node__composer-trace--core {
    stroke-dasharray: 18 82;
    stroke-dashoffset: 0;
  }

  .mission-shell .react-flow__edge .mission-edge__packet {
    display: none !important;
  }

  .mission-shell .react-flow__edge .mission-edge__path--composer,
  .mission-shell .react-flow__edge .mission-edge__path--composer.mission-edge__path--glow,
  .mission-shell .react-flow__edge .mission-edge__path--composer.mission-edge__path--core,
  .mission-shell .react-flow__edge .mission-edge__path--composer.mission-edge__path--animated {
    filter: drop-shadow(0 0 14px var(--mission-edge-glow-active));
  }

  .workspace-architect-card-enter,
  .workspace-architect-chip-enter {
    animation: none !important;
  }

  .openclaw-onboarding-backdrop::before,
  .openclaw-onboarding-backdrop::after {
    animation: none !important;
  }
}
