/* MAS Control — extra styles beyond Tailwind */
:root {
  --bg: #0b0d12;
  --bg-elev: #11141b;
  --bg-card: #161a23;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);
  --text: #e6e8ee;
  --text-dim: #9aa3b2;
  --text-mute: #5a6477;
  --accent: #f5f7ff;
  --safety-dash: rgba(191, 219, 254, 0.70);  /* slate-blue dashes on dark */
  --safety-comet: rgba(255, 255, 255, 0.42); /* white comet on dark */
}
.light {
  --bg: #f4f5f8;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --line: rgba(15,23,42,0.08);
  --line-strong: rgba(15,23,42,0.16);
  --text: #0f172a;
  --text-dim: #4b5563;
  --text-mute: #8a93a5;
  --accent: #0f172a;
  --safety-dash: rgba(75, 85, 99, 0.75);   /* dark gray on light */
  --safety-comet: rgba(15, 23, 42, 0.40);
}

html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Canvas background — dot grid */
.canvas-bg {
  background-image:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size: 24px 24px;
}
.light .canvas-bg {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,0.08) 1px, transparent 0);
}

/* Department tint backgrounds (very subtle) */
.dept-tint { mix-blend-mode: screen; opacity: 0.18; filter: blur(40px); pointer-events: none; }
.light .dept-tint { mix-blend-mode: multiply; opacity: 0.08; }

/* Agent card */
.agent-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  user-select: none;
}
.agent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.7), 0 0 0 1px var(--line-strong);
  border-color: var(--line-strong);
}
.agent-card.active { box-shadow: 0 0 0 2px currentColor, 0 20px 50px -20px rgba(0,0,0,0.7); }
.dept-head {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
}

/* Pulsing glow for active connections */
@keyframes dash {
  to { stroke-dashoffset: -24; }
}
.conn-active { animation: dash 1.4s linear infinite; }

/* Comet flow along connection paths (agent → orchestrator).
   Pattern is "70 1500"; we shift by the full period so the cycle loops seamlessly. */
@keyframes comet-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1570; }
}
.comet {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 70 1500;
  animation: comet-flow 3s linear infinite;
  pointer-events: none;
  will-change: stroke-dashoffset;
}
.comet.safety {
  stroke-dasharray: 40 1500;
  animation-duration: 6s;
}

/* Pulsing dot */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.55; }
}
.pulse-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

/* Microphone overlay pulse */
@keyframes mic-pulse {
  0% { transform: scale(0.95); opacity: 0.85; box-shadow: 0 0 0 0 rgba(244,63,94,0.5); }
  70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 60px rgba(244,63,94,0); }
  100% { transform: scale(0.95); opacity: 0.85; box-shadow: 0 0 0 0 rgba(244,63,94,0); }
}
.mic-pulse { animation: mic-pulse 1.6s ease-out infinite; }

/* Scrollbars */
.thin-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Inputs */
.chat-input {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--line);
}
.chat-input::placeholder { color: var(--text-mute); }
.chat-input:focus { outline: none; border-color: var(--line-strong); box-shadow: 0 0 0 4px rgba(120,130,160,0.08); }

/* Department list buttons */
.dept-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left; cursor: pointer;
  transition: background .15s ease;
}
.dept-btn:hover { background: var(--bg-elev); }
.dept-btn.active { background: var(--bg-elev); border-color: var(--line-strong); }
.dept-swatch { width: 10px; height: 10px; border-radius: 999px; }

/* Drawer */
.drawer {
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
}
.kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
}

/* Mobile chat bar safe area */
.chat-bar {
  background: linear-gradient(180deg, transparent, var(--bg) 25%);
}